update:Change screen state to "Generate render function based on AST"

Author: 2nofa11

book/impls/10_minimum_example/060_template_compiler2/packages/compiler-core/codegen.ts

@@ -1,16 +1,33 @@
+import { ElementNode, NodeTypes, TemplateChildNode, TextNode } from './ast'
+
 export const generate = ({
-  tag,
-  props,
-  textContent,
+  children,
 }: {
-  tag: string
-  props: Record<string, string>
-  textContent: string
+  children: TemplateChildNode[]
 }): string => {
-  return `return () => {
+  return `return function render() {
   const { h } = ChibiVue;
-  return h("${tag}", { ${Object.entries(props)
-    .map(([k, v]) => `${k}: "${v}"`)
-    .join(', ')} }, ["${textContent}"]);
+  return ${genNode(children[0])};
 }`
 }
+
+const genNode = (node: TemplateChildNode): string => {
+  switch (node.type) {
+    case NodeTypes.ELEMENT:
+      return genElement(node)
+    case NodeTypes.TEXT:
+      return genText(node)
+    default:
+      return ''
+  }
+}
+
+const genElement = (el: ElementNode): string => {
+  return `h("${el.tag}", {${el.props
+    .map(({ name, value }) => `${name}: "${value?.content}"`)
+    .join(', ')}}, [${el.children.map(it => genNode(it)).join(', ')}])`
+}
+
+const genText = (text: TextNode): string => {
+  return `\`${text.content}\``
+}

book/impls/10_minimum_example/060_template_compiler2/packages/compiler-core/compile.ts

@@ -1,14 +1,8 @@
+import { generate } from './codegen'
 import { baseParse } from './parse'
 
 export function baseCompile(template: string) {
   const parseResult = baseParse(template.trim())
-  console.log(
-    '🚀 ~ file: compile.ts:6 ~ baseCompile ~ parseResult:',
-    parseResult,
-  )
-
-  // TODO: codegen
-  // const code = generate(parseResult);
-  // return code;
-  return ''
+  const code = generate(parseResult)
+  return code
 }