From ea1c2ad6e4f0d6ca057dabb60edd9182c52c3c69 Mon Sep 17 00:00:00 2001
From: madogiwa <madogiwa0124@gmail.com>
Date: Thu, 2 May 2024 12:30:18 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=93=8C=20Fixed=20sample=20code=20i?=
 =?UTF-8?q?n=20Minimum=20SFC.=20(#280)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

In the step for adding `option` to `generate`, it seemed necessary to add `option` to the arguments of `genNode` and `genElement` as well.

https://github.com/Ubugeeei/chibivue/blob/v0.0.8/book/impls/10_minimum_example/070_sfc_compiler3/packages/compiler-core/codegen.ts

Therefore, `genNode` and `genElement` with added arguments were also added to the sample code.

> 一時的な対応なのであまり厳格ではないのですが、概ね動作するようになると思います。
>
> ```ts
> export const generate = (
>   {
>     children,
>   }: {
>     children: TemplateChildNode[]
>   },
>   option: Required<CompilerOptions>,
> ): string => {
>   // isBrowser が false の場合は with 文を含まないコードを生成する
>   return `${option.isBrowser ? 'return ' : ''}function render(_ctx) {
>     ${option.isBrowser ? 'with (_ctx) {' : ''}
>       const { h } = ChibiVue;
>       return ${genNode(children[0], option)};
>     ${option.isBrowser ? '}' : ''}
> }`
> }
>
> // .
> // .
> // .
>
> const genProp = (
>   prop: AttributeNode | DirectiveNode,
>   option: Required<CompilerOptions>,
> ): string => {
>   switch (prop.type) {
>     case NodeTypes.ATTRIBUTE:
>       return `${prop.name}: "${prop.value?.content}"`
>     case NodeTypes.DIRECTIVE: {
>       switch (prop.name) {
>         case 'on':
>           return `${toHandlerKey(prop.arg)}: ${
>             option.isBrowser ? '' : '_ctx.' // -------------------- ここ
>           }${prop.exp}`
>         default:
>           // TODO: other directives
>           throw new Error(`unexpected directive name. got "${prop.name}"`)
>       }
>     }
>     default:
>       throw new Error(`unexpected prop type.`)
>   }
> }
>
> // .
> // .
> // .
>
> const genInterpolation = (
>   node: InterpolationNode,
>   option: Required<CompilerOptions>,
> ): string => {
>   return `${option.isBrowser ? '' : '_ctx.'}${node.content}` // ------------ ここ
> }
> ```
>
> https://ubugeeei.github.io/chibivue/10-minimum-example/090-minimum-sfc.html#template-%E9%83%A8%E5%88%86%E3%81%AE%E3%82%B3%E3%83%B3%E3%83%8F%E3%82%9A%E3%82%A4%E3%83%AB
---
 .../src/10-minimum-example/090-minimum-sfc.md | 25 +++++++++++++++++++
 .../en/10-minimum-example/090-minimum-sfc.md  | 25 +++++++++++++++++++
 2 files changed, 50 insertions(+)

diff --git a/book/online-book/src/10-minimum-example/090-minimum-sfc.md b/book/online-book/src/10-minimum-example/090-minimum-sfc.md
index 860d197f..174004d0 100644
--- a/book/online-book/src/10-minimum-example/090-minimum-sfc.md
+++ b/book/online-book/src/10-minimum-example/090-minimum-sfc.md
@@ -793,6 +793,31 @@ export const generate = (
 // .
 // .
 
+const genNode = (
+  node: TemplateChildNode,
+  option: Required<CompilerOptions>,
+): string => {
+  switch (node.type) {
+    case NodeTypes.ELEMENT:
+      return genElement(node, option)
+    case NodeTypes.TEXT:
+      return genText(node)
+    case NodeTypes.INTERPOLATION:
+      return genInterpolation(node, option)
+    default:
+      return ''
+  }
+}
+
+const genElement = (
+  el: ElementNode,
+  option: Required<CompilerOptions>,
+): string => {
+  return `h("${el.tag}", {${el.props
+    .map(prop => genProp(prop, option))
+    .join(', ')}}, [${el.children.map(it => genNode(it, option)).join(', ')}])`
+}
+
 const genProp = (
   prop: AttributeNode | DirectiveNode,
   option: Required<CompilerOptions>,
diff --git a/book/online-book/src/en/10-minimum-example/090-minimum-sfc.md b/book/online-book/src/en/10-minimum-example/090-minimum-sfc.md
index ef63a5bf..58076472 100644
--- a/book/online-book/src/en/10-minimum-example/090-minimum-sfc.md
+++ b/book/online-book/src/en/10-minimum-example/090-minimum-sfc.md
@@ -783,6 +783,31 @@ export const generate = (
 // .
 // .
 
+const genNode = (
+  node: TemplateChildNode,
+  option: Required<CompilerOptions>,
+): string => {
+  switch (node.type) {
+    case NodeTypes.ELEMENT:
+      return genElement(node, option)
+    case NodeTypes.TEXT:
+      return genText(node)
+    case NodeTypes.INTERPOLATION:
+      return genInterpolation(node, option)
+    default:
+      return ''
+  }
+}
+
+const genElement = (
+  el: ElementNode,
+  option: Required<CompilerOptions>,
+): string => {
+  return `h("${el.tag}", {${el.props
+    .map(prop => genProp(prop, option))
+    .join(', ')}}, [${el.children.map(it => genNode(it, option)).join(', ')}])`
+}
+
 const genProp = (
   prop: AttributeNode | DirectiveNode,
   option: Required<CompilerOptions>,