Merge pull request #98 from Ubugeeei/97-template-binding-by-with

chapter: #97 📜 binding by with statement
Ubugeeei · Aug 13, 2023 · b047ff4 · b047ff4
2 parents 1fd63dc + 87d0049
commit b047ff4
Show file tree

Hide file tree

Showing 116 changed files with 1,291 additions and 448 deletions.
diff --git a/book/images/state_is_not_defined.png b/book/images/state_is_not_defined.png
diff --git a/book/impls/10_minimum_example/060_template_compiler3/packages/compiler-core/codegen.ts b/book/impls/10_minimum_example/060_template_compiler3/packages/compiler-core/codegen.ts
@@ -15,8 +15,10 @@ export const generate = ({
   children: TemplateChildNode[];
 }): string => {
   return `return function render(_ctx) {
-  const { h } = ChibiVue;
-  return ${genNode(children[0])};
+  with (_ctx) {
+    const { h } = ChibiVue;
+    return ${genNode(children[0])};
+  }
 }`;
 };
 
@@ -46,7 +48,7 @@ const genProp = (prop: AttributeNode | DirectiveNode): string => {
     case NodeTypes.DIRECTIVE: {
       switch (prop.name) {
         case "on":
-          return `${toHandlerKey(prop.arg)}: _ctx.${prop.exp}`;
+          return `${toHandlerKey(prop.arg)}: ${prop.exp}`;
         default:
           // TODO: other directives
           throw new Error(`unexpected directive name. got "${prop.name}"`);
@@ -62,5 +64,5 @@ const genText = (text: TextNode): string => {
 };
 
 const genInterpolation = (node: InterpolationNode): string => {
-  return `_ctx.${node.content}`;
+  return `${node.content}`;
 };
diff --git a/book/impls/10_minimum_example/070_sfc_compiler/packages/compiler-core/codegen.ts b/book/impls/10_minimum_example/070_sfc_compiler/packages/compiler-core/codegen.ts
@@ -15,8 +15,10 @@ export const generate = ({
   children: TemplateChildNode[];
 }): string => {
   return `return function render(_ctx) {
-  const { h } = ChibiVue;
-  return ${genNode(children[0])};
+  with (_ctx) {
+    const { h } = ChibiVue;
+    return ${genNode(children[0])};
+  }
 }`;
 };
 
@@ -46,7 +48,7 @@ const genProp = (prop: AttributeNode | DirectiveNode): string => {
     case NodeTypes.DIRECTIVE: {
       switch (prop.name) {
         case "on":
-          return `${toHandlerKey(prop.arg)}: _ctx.${prop.exp}`;
+          return `${toHandlerKey(prop.arg)}: ${prop.exp}`;
         default:
           // TODO: other directives
           throw new Error(`unexpected directive name. got "${prop.name}"`);
@@ -62,5 +64,5 @@ const genText = (text: TextNode): string => {
 };
 
 const genInterpolation = (node: InterpolationNode): string => {
-  return `_ctx.${node.content}`;
+  return `${node.content}`;
 };
diff --git a/book/impls/10_minimum_example/070_sfc_compiler2/packages/compiler-core/codegen.ts b/book/impls/10_minimum_example/070_sfc_compiler2/packages/compiler-core/codegen.ts
@@ -15,8 +15,10 @@ export const generate = ({
   children: TemplateChildNode[];
 }): string => {
   return `return function render(_ctx) {
-  const { h } = ChibiVue;
-  return ${genNode(children[0])};
+  with (_ctx) {
+    const { h } = ChibiVue;
+    return ${genNode(children[0])};
+  }
 }`;
 };
 
@@ -46,7 +48,7 @@ const genProp = (prop: AttributeNode | DirectiveNode): string => {
     case NodeTypes.DIRECTIVE: {
       switch (prop.name) {
         case "on":
-          return `${toHandlerKey(prop.arg)}: _ctx.${prop.exp}`;
+          return `${toHandlerKey(prop.arg)}: ${prop.exp}`;
         default:
           // TODO: other directives
           throw new Error(`unexpected directive name. got "${prop.name}"`);
@@ -62,5 +64,5 @@ const genText = (text: TextNode): string => {
 };
 
 const genInterpolation = (node: InterpolationNode): string => {
-  return `_ctx.${node.content}`;
+  return `${node.content}`;
 };
diff --git a/book/impls/10_minimum_example/070_sfc_compiler3/packages/compiler-core/codegen.ts b/book/impls/10_minimum_example/070_sfc_compiler3/packages/compiler-core/codegen.ts
@@ -19,38 +19,53 @@ export const generate = (
   option: Required<CompilerOptions>
 ): string => {
   return `${option.isBrowser ? "return " : ""}function render(_ctx) {
-  const { h } = ChibiVue;
-  return ${genNode(children[0])};
+    ${option.isBrowser ? "with (_ctx) {" : ""}
+      const { h } = ChibiVue;
+      return ${genNode(children[0], option)};
+    ${option.isBrowser ? "}" : ""}
 }`;
 };
 
-const genNode = (node: TemplateChildNode): string => {
+const genNode = (
+  node: TemplateChildNode,
+  option: Required<CompilerOptions>
+): string => {
   switch (node.type) {
     case NodeTypes.ELEMENT:
-      return genElement(node);
+      return genElement(node, option);
     case NodeTypes.TEXT:
       return genText(node);
     case NodeTypes.INTERPOLATION:
-      return genInterpolation(node);
+      return genInterpolation(node, option);
     default:
       return "";
   }
 };
 
-const genElement = (el: ElementNode): string => {
+const genElement = (
+  el: ElementNode,
+  option: Required<CompilerOptions>
+): string => {
   return `h("${el.tag}", {${el.props
-    .map((prop) => genProp(prop))
-    .join(", ")}}, [${el.children.map((it) => genNode(it)).join(", ")}])`;
+    .map((prop) => genProp(prop, option))
+    .join(", ")}}, [${el.children
+    .map((it) => genNode(it, option))
+    .join(", ")}])`;
 };
 
-const genProp = (prop: AttributeNode | DirectiveNode): string => {
+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)}: _ctx.${prop.exp}`;
+          return `${toHandlerKey(prop.arg)}: ${
+            option.isBrowser ? "" : "_ctx."
+          }${prop.exp}`;
         default:
           // TODO: other directives
           throw new Error(`unexpected directive name. got "${prop.name}"`);
@@ -65,6 +80,9 @@ const genText = (text: TextNode): string => {
   return `\`${text.content}\``;
 };
 
-const genInterpolation = (node: InterpolationNode): string => {
-  return `_ctx.${node.content}`;
+const genInterpolation = (
+  node: InterpolationNode,
+  option: Required<CompilerOptions>
+): string => {
+  return `${option.isBrowser ? "" : "_ctx."}${node.content}`;
 };
diff --git a/book/impls/10_minimum_example/070_sfc_compiler4/packages/compiler-core/codegen.ts b/book/impls/10_minimum_example/070_sfc_compiler4/packages/compiler-core/codegen.ts
@@ -19,38 +19,53 @@ export const generate = (
   option: Required<CompilerOptions>
 ): string => {
   return `${option.isBrowser ? "return " : ""}function render(_ctx) {
-  const { h } = ChibiVue;
-  return ${genNode(children[0])};
+    ${option.isBrowser ? "with (_ctx) {" : ""}
+      const { h } = ChibiVue;
+      return ${genNode(children[0], option)};
+    ${option.isBrowser ? "}" : ""}
 }`;
 };
 
-const genNode = (node: TemplateChildNode): string => {
+const genNode = (
+  node: TemplateChildNode,
+  option: Required<CompilerOptions>
+): string => {
   switch (node.type) {
     case NodeTypes.ELEMENT:
-      return genElement(node);
+      return genElement(node, option);
     case NodeTypes.TEXT:
       return genText(node);
     case NodeTypes.INTERPOLATION:
-      return genInterpolation(node);
+      return genInterpolation(node, option);
     default:
       return "";
   }
 };
 
-const genElement = (el: ElementNode): string => {
+const genElement = (
+  el: ElementNode,
+  option: Required<CompilerOptions>
+): string => {
   return `h("${el.tag}", {${el.props
-    .map((prop) => genProp(prop))
-    .join(", ")}}, [${el.children.map((it) => genNode(it)).join(", ")}])`;
+    .map((prop) => genProp(prop, option))
+    .join(", ")}}, [${el.children
+    .map((it) => genNode(it, option))
+    .join(", ")}])`;
 };
 
-const genProp = (prop: AttributeNode | DirectiveNode): string => {
+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)}: _ctx.${prop.exp}`;
+          return `${toHandlerKey(prop.arg)}: ${
+            option.isBrowser ? "" : "_ctx."
+          }${prop.exp}`;
         default:
           // TODO: other directives
           throw new Error(`unexpected directive name. got "${prop.name}"`);
@@ -65,6 +80,9 @@ const genText = (text: TextNode): string => {
   return `\`${text.content}\``;
 };
 
-const genInterpolation = (node: InterpolationNode): string => {
-  return `_ctx.${node.content}`;
+const genInterpolation = (
+  node: InterpolationNode,
+  option: Required<CompilerOptions>
+): string => {
+  return `${option.isBrowser ? "" : "_ctx."}${node.content}`;
 };
diff --git a/book/impls/20_basic_virtual_dom/010_patch_keyed_children/packages/compiler-core/codegen.ts b/book/impls/20_basic_virtual_dom/010_patch_keyed_children/packages/compiler-core/codegen.ts
@@ -19,38 +19,53 @@ export const generate = (
   option: Required<CompilerOptions>
 ): string => {
   return `${option.isBrowser ? "return " : ""}function render(_ctx) {
-  const { h } = ChibiVue;
-  return ${genNode(children[0])};
+    ${option.isBrowser ? "with (_ctx) {" : ""}
+      const { h } = ChibiVue;
+      return ${genNode(children[0], option)};
+    ${option.isBrowser ? "}" : ""}
 }`;
 };
 
-const genNode = (node: TemplateChildNode): string => {
+const genNode = (
+  node: TemplateChildNode,
+  option: Required<CompilerOptions>
+): string => {
   switch (node.type) {
     case NodeTypes.ELEMENT:
-      return genElement(node);
+      return genElement(node, option);
     case NodeTypes.TEXT:
       return genText(node);
     case NodeTypes.INTERPOLATION:
-      return genInterpolation(node);
+      return genInterpolation(node, option);
     default:
       return "";
   }
 };
 
-const genElement = (el: ElementNode): string => {
+const genElement = (
+  el: ElementNode,
+  option: Required<CompilerOptions>
+): string => {
   return `h("${el.tag}", {${el.props
-    .map((prop) => genProp(prop))
-    .join(", ")}}, [${el.children.map((it) => genNode(it)).join(", ")}])`;
+    .map((prop) => genProp(prop, option))
+    .join(", ")}}, [${el.children
+    .map((it) => genNode(it, option))
+    .join(", ")}])`;
 };
 
-const genProp = (prop: AttributeNode | DirectiveNode): string => {
+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)}: _ctx.${prop.exp}`;
+          return `${toHandlerKey(prop.arg)}: ${
+            option.isBrowser ? "" : "_ctx."
+          }${prop.exp}`;
         default:
           // TODO: other directives
           throw new Error(`unexpected directive name. got "${prop.name}"`);
@@ -65,6 +80,9 @@ const genText = (text: TextNode): string => {
   return `\`${text.content}\``;
 };
 
-const genInterpolation = (node: InterpolationNode): string => {
-  return `_ctx.${node.content}`;
+const genInterpolation = (
+  node: InterpolationNode,
+  option: Required<CompilerOptions>
+): string => {
+  return `${option.isBrowser ? "" : "_ctx."}${node.content}`;
 };
diff --git a/book/impls/20_basic_virtual_dom/020_bit_flags/packages/compiler-core/codegen.ts b/book/impls/20_basic_virtual_dom/020_bit_flags/packages/compiler-core/codegen.ts
@@ -19,38 +19,53 @@ export const generate = (
   option: Required<CompilerOptions>
 ): string => {
   return `${option.isBrowser ? "return " : ""}function render(_ctx) {
-  const { h } = ChibiVue;
-  return ${genNode(children[0])};
+    ${option.isBrowser ? "with (_ctx) {" : ""}
+      const { h } = ChibiVue;
+      return ${genNode(children[0], option)};
+    ${option.isBrowser ? "}" : ""}
 }`;
 };
 
-const genNode = (node: TemplateChildNode): string => {
+const genNode = (
+  node: TemplateChildNode,
+  option: Required<CompilerOptions>
+): string => {
   switch (node.type) {
     case NodeTypes.ELEMENT:
-      return genElement(node);
+      return genElement(node, option);
     case NodeTypes.TEXT:
       return genText(node);
     case NodeTypes.INTERPOLATION:
-      return genInterpolation(node);
+      return genInterpolation(node, option);
     default:
       return "";
   }
 };
 
-const genElement = (el: ElementNode): string => {
+const genElement = (
+  el: ElementNode,
+  option: Required<CompilerOptions>
+): string => {
   return `h("${el.tag}", {${el.props
-    .map((prop) => genProp(prop))
-    .join(", ")}}, [${el.children.map((it) => genNode(it)).join(", ")}])`;
+    .map((prop) => genProp(prop, option))
+    .join(", ")}}, [${el.children
+    .map((it) => genNode(it, option))
+    .join(", ")}])`;
 };
 
-const genProp = (prop: AttributeNode | DirectiveNode): string => {
+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)}: _ctx.${prop.exp}`;
+          return `${toHandlerKey(prop.arg)}: ${
+            option.isBrowser ? "" : "_ctx."
+          }${prop.exp}`;
         default:
           // TODO: other directives
           throw new Error(`unexpected directive name. got "${prop.name}"`);
@@ -65,6 +80,9 @@ const genText = (text: TextNode): string => {
   return `\`${text.content}\``;
 };
 
-const genInterpolation = (node: InterpolationNode): string => {
-  return `_ctx.${node.content}`;
+const genInterpolation = (
+  node: InterpolationNode,
+  option: Required<CompilerOptions>
+): string => {
+  return `${option.isBrowser ? "" : "_ctx."}${node.content}`;
 };