实现 monorepo & 使用 vitest 替换 jest

package.json

@@ -5,20 +5,17 @@
   "module": "lib/guide-mini-vue.esm.js",
   "license": "MIT",
   "scripts": {
-    "test": "jest",
+    "test": "vitest",
     "build": "rollup -c rollup.config.js"
   },
   "devDependencies": {
     "@babel/core": "^7.18.0",
     "@babel/preset-env": "^7.18.0",
     "@babel/preset-typescript": "^7.17.12",
     "@rollup/plugin-typescript": "^8.3.2",
-    "@types/jest": "^27.5.1",
-    "babel-jest": "^28.1.0",
-    "jest": "^28.1.0",
     "rollup": "^2.75.5",
-    "ts-jest": "^28.0.3",
     "tslib": "^2.4.0",
-    "typescript": "^4.7.2"
+    "typescript": "^4.7.2",
+    "vitest": "^0.23.2"
   }
 }

packages/compiler-core/__tests__/__snapshots__/codegen.spec.ts.snap

@@ -0,0 +1,31 @@
+// Vitest Snapshot v1
+
+exports[`codegen > element 1`] = `
+"const { toDisplayString: _toDisplayString,createElementVNode: _createElementVNode } = Vue
+return function render(_ctx,_cache){return _createElementVNode('div',null,'hi,' + _toDisplayString(_ctx.message))}"
+`;
+
+exports[`codegen > interpolation 1`] = `
+"const { toDisplayString: _toDisplayString } = Vue
+return function render(_ctx,_cache){return _toDisplayString(_ctx.message)}"
+`;
+
+exports[`codegen > string 1`] = `
+"
+return function render(_ctx,_cache){return 'hi'}"
+`;
+
+exports[`codegen element 1`] = `
+"const { toDisplayString: _toDisplayString,createElementVNode: _createElementVNode } = Vue
+return function render(_ctx,_cache){return _createElementVNode('div',null,'hi,' + _toDisplayString(_ctx.message))}"
+`;
+
+exports[`codegen interpolation 1`] = `
+"const { toDisplayString: _toDisplayString } = Vue
+return function render(_ctx,_cache){return _toDisplayString(_ctx.message)}"
+`;
+
+exports[`codegen string 1`] = `
+"
+return function render(_ctx,_cache){return 'hi'}"
+`;

packages/compiler-core/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@guide-mini-vue/compiler-core",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@guide-mini-vue/shared": "workspace:^1.0.0"
+  }
+}

src/compiler-core/src/codegen.ts → packages/compiler-core/src/codegen.ts

@@ -2,147 +2,149 @@ import {
 	CREATE_ELEMENT_VNODE,
 	helperMapName,
 	TO_DISPLAY_STRING,
-} from "./runtimeHelpers"
-import { NodeTypes } from "./ast"
-import { isString } from "../../shared"
+} from "./runtimeHelpers";
+import { NodeTypes } from "./ast";
+import { isString } from "@guide-mini-vue/shared";
 
 export function generate(ast) {
 	// let code = ""
 	// code += "return "
-	const context = createCodegenContext()
-	const { push } = context
+	const context = createCodegenContext();
+	const { push } = context;
 
 	// const VueBinging = "Vue"
 	// const aliasHelpers = (s) => `${s}: _${s}`
 	// push(`const { ${ast.helpers.map(aliasHelpers).join(",")} = ${VueBinging}`)
 	// push("\n")
 	// push("return ")
-	genFunctionPreamble(ast, context)
-	const functionName = "render"
-	const args = ["_ctx", "_cache"]
-	const signature = args.join(",")
+	genFunctionPreamble(ast, context);
+	const functionName = "render";
+	const args = ["_ctx", "_cache"];
+	const signature = args.join(",");
 	// code += `function ${functionName}(${signature}){`
-	push(`function ${functionName}(${signature}){`)
+	push(`function ${functionName}(${signature}){`);
 
 	// const node = ast.codegenNode
 	// code += `return '${node.content}'`
 	// code += `return`
-	push(`return `)
-	genNode(ast.codegenNode, context)
+	push(`return `);
+	genNode(ast.codegenNode, context);
 	// code += `}`
-	push(`}`)
+	push(`}`);
 	return {
 		code: context.code,
-	}
+	};
 }
 
 function genFunctionPreamble(ast, context) {
-	const { push } = context
-	const VueBinging = "Vue"
-	const aliasHelpers = (s) => `${helperMapName[s]}: _${helperMapName[s]}`
+	const { push } = context;
+	const VueBinging = "Vue";
+	const aliasHelpers = (s) => `${helperMapName[s]}: _${helperMapName[s]}`;
 	if (ast.helpers.length > 0) {
-		push(`const { ${ast.helpers.map(aliasHelpers).join(",")} } = ${VueBinging}`)
+		push(
+			`const { ${ast.helpers.map(aliasHelpers).join(",")} } = ${VueBinging}`
+		);
 	}
-	push("\n")
-	push("return ")
+	push("\n");
+	push("return ");
 }
 
 function createCodegenContext(): any {
 	const context = {
 		code: "",
 		push(source) {
-			context.code += source
+			context.code += source;
 		},
 		helper(key) {
-			return `_${helperMapName[key]}`
+			return `_${helperMapName[key]}`;
 		},
-	}
-	return context
+	};
+	return context;
 }
 
 function genNode(node, context) {
 	switch (node.type) {
 		case NodeTypes.TEXT:
-			genText(node, context)
-			break
+			genText(node, context);
+			break;
 		case NodeTypes.INTERPOLATION:
-			genInterpolation(node, context)
-			break
+			genInterpolation(node, context);
+			break;
 		case NodeTypes.SIMPLE_EXPRESSION:
-			genExpression(node, context)
-			break
+			genExpression(node, context);
+			break;
 		case NodeTypes.ELEMENT:
-			genElement(node, context)
-			break
+			genElement(node, context);
+			break;
 		case NodeTypes.COMPOUND_EXPRESSION:
-			genCompoundExpression(node, context)
-			break
+			genCompoundExpression(node, context);
+			break;
 		default:
-			break
+			break;
 	}
 }
 
 function genCompoundExpression(node, context) {
-	const { children } = node
-	const { push } = context
+	const { children } = node;
+	const { push } = context;
 	for (let index = 0; index < children.length; index++) {
-		const child = children[index]
+		const child = children[index];
 		if (isString(child)) {
-			push(child)
+			push(child);
 		} else {
-			genNode(child, context)
+			genNode(child, context);
 		}
 	}
 }
 
 function genElement(node, context) {
-	const { push, helper } = context
-	const { tag, children, props } = node
-	push(`${helper(CREATE_ELEMENT_VNODE)}(`)
+	const { push, helper } = context;
+	const { tag, children, props } = node;
+	push(`${helper(CREATE_ELEMENT_VNODE)}(`);
 	// const child = children[0]
 	// for (let index = 0; index < children.length; index++) {
 	// 	const child = children[index]
 	// 	genNode(child, context)
 	// }
-	genNodeList(genNullable([tag, props, children]), context)
+	genNodeList(genNullable([tag, props, children]), context);
 	// genNode(children, context)
-	push(")")
+	push(")");
 }
 
 function genNodeList(nodes, context) {
-	const { push } = context
+	const { push } = context;
 
 	for (let index = 0; index < nodes.length; index++) {
-		const node = nodes[index]
+		const node = nodes[index];
 		if (isString(node)) {
-			push(node)
+			push(node);
 		} else {
-			genNode(node, context)
+			genNode(node, context);
 		}
 
 		if (index < nodes.length - 1) {
-			push(",")
+			push(",");
 		}
 	}
 }
 
 function genNullable(args: any) {
-	return args.map((arg) => arg || "null")
+	return args.map((arg) => arg || "null");
 }
 
 function genExpression(node, context) {
-	const { push } = context
-	push(`${node.content}`)
+	const { push } = context;
+	push(`${node.content}`);
 }
 
 function genText(node, context) {
-	const { push } = context
-	push(`'${node.content}'`)
+	const { push } = context;
+	push(`'${node.content}'`);
 }
 
 function genInterpolation(node, context) {
-	const { push, helper } = context
-	push(`${helper(TO_DISPLAY_STRING)}(`)
-	genNode(node.content, context)
-	push(")")
+	const { push, helper } = context;
+	push(`${helper(TO_DISPLAY_STRING)}(`);
+	genNode(node.content, context);
+	push(")");
 }

src/compiler-core/src/transform/transformElement.ts → packages/compiler-core/src/transform/transformElement.ts

@@ -1,5 +1,5 @@
-import { createVNodeCall, NodeTypes } from "../ast"
-import { CREATE_ELEMENT_VNODE } from "../runtimeHelpers"
+import { createVNodeCall, NodeTypes } from "../ast";
+// import { CREATE_ELEMENT_VNODE } from "../runtimeHelpers"
 
 export function transformElement(node: any, context) {
 	if (node.type === NodeTypes.ELEMENT) {
@@ -8,12 +8,12 @@ export function transformElement(node: any, context) {
 
 			// 中间层
 			// tag
-			const vnodeTag = `'${node.tag}'`
+			const vnodeTag = `'${node.tag}'`;
 			// children
-			const children = node.children
-			const vnodeChildren = children[0]
+			const children = node.children;
+			const vnodeChildren = children[0];
 			// props
-			let vnodeProps
+			let vnodeProps;
 
 			// const vnodeElement = {
 			// 	type: NodeTypes.ELEMENT,
@@ -27,7 +27,7 @@ export function transformElement(node: any, context) {
 				vnodeTag,
 				vnodeProps,
 				vnodeChildren
-			)
-		}
+			);
+		};
 	}
 }

packages/reactivity/__tests__/computed.spec.ts

@@ -0,0 +1,43 @@
+import { vi } from "vitest";
+import { reactive } from "../src/reactive";
+import { computed } from "../src/computed";
+
+describe("computed", () => {
+	it("happy path", () => {
+		const user = reactive({
+			age: 1,
+		});
+
+		const age = computed(() => {
+			return user.age;
+		});
+
+		expect(age.value).toBe(1);
+	});
+
+	it("should computed lazily", () => {
+		const value = reactive({ foo: 1 });
+		const getter = vi.fn(() => {
+			return value.foo;
+		});
+		const cValue = computed(getter);
+
+		// lazy
+		expect(getter).not.toHaveBeenCalled();
+
+		expect(cValue.value).toBe(1);
+		expect(getter).toHaveBeenCalledTimes(1);
+
+		cValue.value;
+		expect(getter).toHaveBeenCalledTimes(1);
+
+		value.foo = 2;
+		expect(getter).toHaveBeenCalledTimes(1);
+
+		expect(cValue.value).toBe(2);
+		expect(getter).toHaveBeenCalledTimes(2);
+
+		cValue.value;
+		expect(getter).toHaveBeenCalledTimes(2);
+	});
+});