diff --git a/packages/runtime-core/__tests__/rendererElement.spec.ts b/packages/runtime-core/__tests__/rendererElement.spec.ts index b949341..ab4c388 100644 --- a/packages/runtime-core/__tests__/rendererElement.spec.ts +++ b/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("
"); }); }); + + diff --git a/packages/runtime-core/package.json b/packages/runtime-core/package.json index 0a58128..fb73d44 100644 --- a/packages/runtime-core/package.json +++ b/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": "", diff --git a/packages/runtime-core/src/.pnpm-debug.log b/packages/runtime-core/src/.pnpm-debug.log new file mode 100644 index 0000000..3643568 --- /dev/null +++ b/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/runtime-core@1.0.0", + "stage": "test", + "script": "jest \"runtime-core\"", + "pkgname": "@mini-vue/runtime-core", + "err": { + "name": "pnpm", + "message": "@mini-vue/runtime-core@1.0.0 test: `jest \"runtime-core\"`\nExit status 1", + "code": "ELIFECYCLE", + "stack": "pnpm: @mini-vue/runtime-core@1.0.0 test: `jest \"runtime-core\"`\nExit status 1\n at EventEmitter. (/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. (/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)" + } + } +} \ No newline at end of file diff --git a/packages/runtime-core/src/renderer.ts b/packages/runtime-core/src/renderer.ts index e238efd..9805f02 100644 --- a/packages/runtime-core/src/renderer.ts +++ b/packages/runtime-core/src/renderer.ts @@ -598,6 +598,7 @@ export function createRenderer(options) { } return { + render, createApp: createAppAPI(render), }; } diff --git a/packages/runtime-test/src/index.ts b/packages/runtime-test/src/index.ts index 8f47424..f647457 100644 --- a/packages/runtime-test/src/index.ts +++ b/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" \ No newline at end of file diff --git a/packages/runtime-test/src/nodeOps.ts b/packages/runtime-test/src/nodeOps.ts new file mode 100644 index 0000000..16f9f0c --- /dev/null +++ b/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 }; diff --git a/packages/runtime-test/src/patchProp.ts b/packages/runtime-test/src/patchProp.ts new file mode 100644 index 0000000..0cfe585 --- /dev/null +++ b/packages/runtime-test/src/patchProp.ts @@ -0,0 +1,3 @@ +export function patchProp(el, key, prevValue, nextValue) { + el[key] = nextValue; +} diff --git a/packages/runtime-test/src/serialize.ts b/packages/runtime-test/src/serialize.ts new file mode 100644 index 0000000..30a833c --- /dev/null +++ b/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}>`; +} diff --git a/tsconfig.json b/tsconfig.json index ffafd5b..f8192a7 100644 --- a/tsconfig.json +++ b/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"]