feat: runtime-test happy path

packages/runtime-core/__tests__/rendererElement.spec.ts

@@ -1,3 +1,6 @@
+import { h } from "@mini-vue/runtime-core";
+import { nodeOps, render, serialize as inner } from "@mini-vue/runtime-test";
+
 describe("renderer: element", () => {
   let root;
 
@@ -6,7 +9,9 @@ describe("renderer: element", () => {
   });
 
   it("should create an element", () => {
-    render(h("div"), root);
+    render(h("div", null, []), root);
     expect(inner(root)).toBe("<div></div>");
   });
 });
+
+

packages/runtime-core/package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "description": "@mini-vue/runtime-core",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "jest"
   },
   "keywords": [],
   "author": "",

packages/runtime-core/src/.pnpm-debug.log

@@ -0,0 +1,20 @@
+{
+  "0 debug pnpm:scope": {
+    "selected": 1,
+    "workspacePrefix": "/Users/cxr/projects/mini-vue/code/mini-vue"
+  },
+  "1 error pnpm": {
+    "errno": 1,
+    "code": "ELIFECYCLE",
+    "pkgid": "@mini-vue/[email protected]",
+    "stage": "test",
+    "script": "jest \"runtime-core\"",
+    "pkgname": "@mini-vue/runtime-core",
+    "err": {
+      "name": "pnpm",
+      "message": "@mini-vue/[email protected] test: `jest \"runtime-core\"`\nExit status 1",
+      "code": "ELIFECYCLE",
+      "stack": "pnpm: @mini-vue/[email protected] test: `jest \"runtime-core\"`\nExit status 1\n    at EventEmitter.<anonymous> (/opt/homebrew/Cellar/pnpm/6.32.4/libexec/lib/node_modules/pnpm/dist/pnpm.cjs:105736:20)\n    at EventEmitter.emit (node:events:527:28)\n    at ChildProcess.<anonymous> (/opt/homebrew/Cellar/pnpm/6.32.4/libexec/lib/node_modules/pnpm/dist/pnpm.cjs:92297:18)\n    at ChildProcess.emit (node:events:527:28)\n    at maybeClose (node:internal/child_process:1092:16)\n    at Process.ChildProcess._handle.onexit (node:internal/child_process:302:5)"
+    }
+  }
+}

packages/runtime-core/src/renderer.ts

@@ -598,6 +598,7 @@ export function createRenderer(options) {
   }
 
   return {
+    render,
     createApp: createAppAPI(render),
   };
 }

packages/runtime-test/src/index.ts

@@ -1,5 +1,12 @@
 // todo
 // 实现 render 的渲染接口
 // 实现序列化
+import { createRenderer } from "@mini-vue/runtime-core";
+import { extend } from "@mini-vue/shared";
+import { nodeOps } from "./nodeOps";
+import { patchProp } from "./patchProp";
 
+export const { render } = createRenderer(extend({ patchProp }, nodeOps));
 
+export * from "./nodeOps";
+export * from "./serialize"

packages/runtime-test/src/nodeOps.ts

@@ -0,0 +1,27 @@
+export const enum NodeTypes {
+  ELEMENT = "element",
+}
+
+let nodeId = 0;
+// 这个函数会在 runtime-core 初始化 element 的时候调用
+function createElement(tag: string) {
+  // 如果是基于 dom 的话 那么这里会返回 dom 元素
+  // 这里是为了测试 所以只需要反正一个对象就可以了
+  // 后面的话 通过这个对象来做测试
+  const node = {
+    tag,
+    id: nodeId++,
+    type: NodeTypes.ELEMENT,
+    props: {},
+    children: [],
+  };
+
+  return node;
+}
+
+
+function insert () {
+
+}
+
+export const nodeOps = { createElement,insert };

packages/runtime-test/src/patchProp.ts

@@ -0,0 +1,3 @@
+export function patchProp(el, key, prevValue, nextValue) {
+  el[key] = nextValue;
+}

packages/runtime-test/src/serialize.ts

@@ -0,0 +1,10 @@
+// 把 node 给序列化
+// 测试的时候好对比
+// 序列化： 把一个对象给处理成 string （进行流化）
+export function serialize(node) {
+  return serializeElement(node);
+}
+
+function serializeElement(node) {
+  return `<${node.tag}></${node.tag}>`;
+}

tsconfig.json

@@ -12,7 +12,7 @@
     "preserveConstEnums": true,
     "sourceMap": true,
     "downlevelIteration": true,
-    "lib": ["es6", "DOM"],
+    "lib": ["esnext", "DOM"],
     "types": ["jest"],
     "paths": {
       "@mini-vue/*": ["packages/*/src"]