feat(compile-core): support element and interpolation

example/compiler-base/App.js

@@ -1,5 +1,19 @@
+// 最简单的情况
+// template 只有一个 interpolation
+// export default {
+//   template: `{{msg}}`,
+//   setup() {
+//     return {
+//       msg: "vue3 - compiler",
+//     };
+//   },
+// };
+
+
+// 复杂一点
+// template 包含 element 和 interpolation 
 export default {
-  template: `{{msg}}`,
+  template: `<p>{{msg}}</p>`,
   setup() {
     return {
       msg: "vue3 - compiler",

example/compiler-base/index.html

@@ -13,6 +13,8 @@
 
       const rootContainer = document.querySelector("#app");
       createApp(App).mount(rootContainer);
+
+
     </script>
   </body>
 </html>

src/compiler-core/__tests__/codegen.spec.ts

@@ -1,14 +1,26 @@
 import { generate } from "../src/codegen";
 import { baseParse } from "../src/parse";
 import { transform } from "../src/transform";
+import { transformElement } from "../src/transforms/transformElement";
 import { transformExpression } from "../src/transforms/transformExpression";
 
 test("interpolation module", () => {
   const ast = baseParse("{{hello}}");
   transform(ast, {
-    nodeTransforms: [transformExpression]
+    nodeTransforms: [transformExpression],
   });
 
   const { code } = generate(ast);
   console.log(code);
 });
+
+test("element and interpolation", () => {
+  const ast = baseParse("<div>hi,{{msg}}</div>");
+  transform(ast, {
+    nodeTransforms: [transformExpression, transformElement],
+  });
+
+  const { code } = generate(ast);
+  console.log(code);
+  console.log(code.children[0])
+});

src/compiler-core/src/codegen.ts

@@ -1,5 +1,9 @@
 import { NodeTypes } from "./ast";
-import { helperNameMap, TO_DISPLAY_STRING } from "./runtimeHelpers";
+import {
+  CREATE_ELEMENT_VNODE,
+  helperNameMap,
+  TO_DISPLAY_STRING,
+} from "./runtimeHelpers";
 
 export function generate(ast, options = {}) {
   // 先生成 context
@@ -65,11 +69,37 @@ function genNode(node: any, context: any) {
       genExpression(node, context);
       break;
 
+    case NodeTypes.ELEMENT:
+      genElement(node, context);
+      break;
+
+    case NodeTypes.TEXT:
+      genText(node, context);
+      break;
+
     default:
       break;
   }
 }
 
+function genText(node: any, context: any) {
+  // Implement
+  const { push } = context;
+
+  // TODO 是如何处理添加 + 操作符的呢？
+  push(`'${node.content}'+`);
+}
+
+function genElement(node, context) {
+  const { push, helper } = context;
+
+  push(`${helper(CREATE_ELEMENT_VNODE)}("${node.tag}", {}, `);
+  node.children.forEach((n) => {
+    genNode(n, context);
+  });
+  push(`)`)
+}
+
 function genExpression(node: any, context: any) {
   context.push(node.content, node);
 }

src/compiler-core/src/compile.ts

@@ -2,6 +2,7 @@ import { generate } from "./codegen";
 import { baseParse } from "./parse";
 import { transform } from "./transform";
 import { transformExpression } from "./transforms/transformExpression";
+import { transformElement } from "./transforms/transformElement";
 
 export function baseCompile(template, options) {
   // 1. 先把 template 也就是字符串 parse 成 ast
@@ -10,7 +11,7 @@ export function baseCompile(template, options) {
   transform(
     ast,
     Object.assign(options, {
-      nodeTransforms: [transformExpression],
+      nodeTransforms: [transformExpression, transformElement],
     })
   );
 

src/compiler-core/src/runtimeHelpers.ts

@@ -1,5 +1,7 @@
 export const TO_DISPLAY_STRING = Symbol(`toDisplayString`);
+export const CREATE_ELEMENT_VNODE = Symbol("createElementVNode");
 
 export const helperNameMap = {
   [TO_DISPLAY_STRING]: "toDisplayString",
+  [CREATE_ELEMENT_VNODE]: "createElementVNode"
 };

src/compiler-core/src/transforms/transformElement.ts

@@ -0,0 +1,9 @@
+import { NodeTypes } from "../ast";
+import { CREATE_ELEMENT_VNODE } from "../runtimeHelpers";
+
+export function transformElement(node, context) {
+  if (node.type === NodeTypes.ELEMENT) {
+    // TODO 没有实现 block  所以这里直接创建 element
+    context.helper(CREATE_ELEMENT_VNODE);
+  }
+}

src/runtime-core/index.ts

@@ -3,6 +3,6 @@ export * from "./createApp";
 export { getCurrentInstance, registerRuntimeCompiler } from "./component";
 export { inject, provide } from "./apiInject";
 export { renderSlot } from "./helpers/renderSlot";
-export { createTextVNode } from "./vnode";
+export { createTextVNode, createElementVNode } from "./vnode";
 export { createRenderer } from "./renderer";
 export { toDisplayString } from "../shared";

src/runtime-core/vnode.ts

@@ -1,5 +1,7 @@
 import { ShapeFlags } from "../shared";
 
+export { createVNode as createElementVNode }
+
 export const createVNode = function (
   type: any,
   props?: any,