feat: homework

.github/workflows/node.js.yml

@@ -26,5 +26,6 @@ jobs:
       with:
         node-version: ${{ matrix.node-version }}
     - run: npm i
+    - run: npm run tsc
     # Just run tests once
     - run: npm test

.gitignore

@@ -26,4 +26,4 @@ coverage
 *.njsproj
 *.sln
 *.sw?
-mini-renderer2.js
+src/mini-renderer.js

package.json

@@ -5,7 +5,8 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview --port 4173",
-    "test": "vitest --environment jsdom"
+    "test": "vitest --environment jsdom",
+    "tsc": "tsc"
   },
   "dependencies": {
     "vue": "^3.2.38"
@@ -15,6 +16,7 @@
     "@vitejs/plugin-vue": "^3.0.3",
     "@vue/test-utils": "^2.0.2",
     "jsdom": "^20.0.0",
+    "typescript": "^4.8.4",
     "vite": "^3.0.9",
     "vitest": "^0.23.0"
   }

src/components/__tests__/HelloWorld.spec.js

@@ -1,12 +1,12 @@
 import { describe, it, expect } from 'vitest'
-import { createApp } from '../../mini-renderer'
+import { createApp } from '../../mini-renderer.js'
 import App from '../../App.vue'
 
 describe('createApp for dom', () => {
   it('should render component', () => {
     const app = createApp(App)
     app.mount(document.createElement('div'))
-    expect(app._component).not.toBe(App)
+    expect(app._component).not.toBe(App);
   })
 
   it('should not mutate original root component options object', () => {

src/mini-renderer.ts

@@ -0,0 +1,122 @@
+import {
+  createRenderer,
+  RendererOptions,
+  ConcreteComponent,
+  createVNode,
+  AppContext,
+} from '@vue/runtime-core';
+
+
+const render = createRenderer({
+  forcePatchProp(el, key): boolean {
+    return false
+  },
+  patchProp(
+    el,
+    key,
+    prevValue,
+    nextValue,
+    isSVG = false,
+    prevChildren,
+    parentComponent,
+    parentSuspense,
+    unmountChildren
+  ) {
+    if (key.startsWith('on')) {
+      el.addEventListener(key.substring(2).toLowerCase(), nextValue)
+    } else {
+      el.setAttribute(key, nextValue)
+    }
+  },
+  insert(child, parent, anchor) {
+    parent.insertBefore(child, anchor || null)
+  },
+  remove(child) {
+    const parent = child.parentNode
+    if (parent) {
+      parent.removeNode(child)
+    }
+  },
+  createElement(type, isSvg, isCustomizedBuiltIn) {
+    return document.createElement(type)
+  },
+  createText(text) {
+    return document.createTextNode(text)
+  },
+  createComment(text) {
+    return document.createComment(text)
+  },
+  setText(node, text) {
+    node.nodeValue = text
+  },
+  setElementText(el, text) {
+    el.textContent = text
+  },
+  parentNode(node) {
+    return node.parentNode
+  },
+  nextSibling(node) {
+    return node.nextSibling
+  },
+  querySelector(selector) {
+    return document.querySelector(selector)
+  },
+  setScopeId(el, id) {
+    el.setAttribute(id, '')
+  },
+  cloneNode(el) {
+    return el.cloneNode(true)
+  },
+  insertStaticContent(): any {
+    return []
+  }
+} as RendererOptions & { forcePatchProp?: (el: any, key: string) => boolean })
+
+function createAppContext(): AppContext {
+  return {
+    app: null as any,
+    config: {
+      isNativeTag: () => false,
+      performance: false,
+      globalProperties: {},
+      optionMergeStrategies: {},
+      errorHandler: undefined,
+      warnHandler: undefined,
+      compilerOptions: {}
+    },
+    mixins: [],
+    components: {},
+    directives: {},
+    provides: Object.create(null),
+  }
+}
+
+const createApp = (rootComponent, rootProps = null) => {
+  //TODO
+  let isMounted = false;
+  const context = createAppContext();
+  if (typeof rootComponent !== 'function') {
+    rootComponent = { ...rootComponent };
+  }
+  const app = {
+    _component: rootComponent as ConcreteComponent,
+    _container: null,
+    mount: (rootContainer: Element) => {
+      if (!isMounted) {
+        const vnode = createVNode(rootComponent, rootProps);
+        render.render(vnode, rootContainer, false);
+        isMounted = true;
+        app._container = rootContainer as any;
+        (rootContainer as any).__vue_app__ = app;
+        return vnode.component!.proxy;
+      } else {
+        console.warn('App has already been mounted');
+      }
+    }
+  };
+  return app;
+}
+
+export {
+  createApp
+}

tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "target": "ESNext", 
+    "moduleResolution":"Node"                                 /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+  },
+  "files": [
+    "src/mini-renderer.ts"
+  ]
+}