Merge pull request #167 from Ubugeeei/30-resolve-component

#30 resolve component
ubugeeei · Nov 4, 2023 · f969757 · f969757
2 parents 56dcdc7 + 520ff63
commit f969757
Show file tree

Hide file tree

Showing 115 changed files with 9,553 additions and 84 deletions.
diff --git a/README.md b/README.md
@@ -40,7 +40,7 @@ npm i -g @antfu/ni
 
 [![Pages Deploy](https://github.com/Ubugeeei/chibivue/actions/workflows/deploy.yml/badge.svg?branch=main)](https://github.com/Ubugeeei/chibivue/actions/workflows/deploy.yml)
 
-> total: 340,000 chars ↑ (japanese)
+> total: 360,000 chars ↑ (japanese)
 
 ### book url (GitHub Pages)
 
@@ -144,23 +144,24 @@ Please refer to the information below for the progress status.
 
 ### Template Compiler
 
-| feature           | impl | book |
-| ----------------- | ---- | ---- |
-| v-bind            | ✅   | ✅   |
-| v-on              | ✅   | ✅   |
-| event modifier    | ✅   | ✅   |
-| v-if              | ✅   | ✅   |
-| v-for             | ✅   | ✅   |
-| v-model           | ✅   |      |
-| v-show            |      |      |
-| mustache          | ✅   | ✅   |
-| slot (default)    |      |      |
-| slot (named)      |      |      |
-| slot (scoped)     |      |      |
-| dynamic component |      |      |
-| comment out       | ✅   | ✅   |
-| fragment          | ✅   | ✅   |
-| bind expressions  | ✅   | ✅   |
+| feature            | impl | book |
+| ------------------ | ---- | ---- |
+| v-bind             | ✅   | ✅   |
+| v-on               | ✅   | ✅   |
+| event modifier     | ✅   | ✅   |
+| v-if               | ✅   | ✅   |
+| v-for              | ✅   | ✅   |
+| v-model            | ✅   |      |
+| v-show             |      |      |
+| mustache           | ✅   | ✅   |
+| slot (default)     |      |      |
+| slot (named)       |      |      |
+| slot (scoped)      |      |      |
+| dynamic component  |      |      |
+| comment out        | ✅   | ✅   |
+| fragment           | ✅   | ✅   |
+| bind expressions   | ✅   | ✅   |
+| resolve components | ✅   | ✅   |
 
 ### SFC Compiler
 
@@ -182,21 +183,20 @@ Please refer to the information below for the progress status.
 
 ## 🗓️ Big Plans
 
-- Complete Basic Template Compiler  
-  - Component resolution
+- Complete Basic Template Compiler
   - Slots
-- Complete Basic SFC Compiler  
+- Complete Basic SFC Compiler
   - script setup
   - compiler macro
-- Overall restructuring  
+- Overall restructuring
   - Fixing typos and errors
   - Reviewing English version of the text
   - Making explanations more understandable
-- Incorporate refactoring of the reactivity package that will likely be included in Vue.js 3.4  
+- Incorporate refactoring of the reactivity package that will likely be included in Vue.js 3.4
 - Implementation and explanation of SSR / SSG
 - Implementation and explanation of compile-time optimization  
   Tree flattening and static hoisting, among others
-- 🌟 Implementation and explanation of **__Vapor Mode__**  
+- 🌟 Implementation and explanation of \***\*Vapor Mode\*\***  
   Since the official version has not been released, we will implement it based on our predictions.
 
 ## 🎉 Bonus Track
@@ -213,4 +213,4 @@ The title is "**Hyper Ultimate Super Extreme Minimal Vue - writing Vue.js on 15
 
 # Contributing
 
-Please see [contributing.md](https://github.com/Ubugeeei/chibivue/blob/main/.github/contributing.md).
+Please see [contributing.md](https://github.com/Ubugeeei/chibivue/blob/main/.github/contributing.md).
diff --git a/book/images/resolve_components.png b/book/images/resolve_components.png
diff --git a/...ompiler/022_transform_expression/packages/compiler-core/transforms/transformExpression.ts b/...ompiler/022_transform_expression/packages/compiler-core/transforms/transformExpression.ts
@@ -12,6 +12,9 @@ import {
 import { walkIdentifiers } from "../babelUtils";
 import { NodeTransform, TransformContext } from "../transform";
 import { advancePositionWithClone, isSimpleIdentifier } from "../utils";
+import { makeMap } from "../../shared/makeMap";
+
+const isLiteralWhitelisted = makeMap("true,false,null,this");
 
 export const transformExpression: NodeTransform = (node, ctx) => {
   if (node.type === NodeTypes.INTERPOLATION) {
@@ -53,7 +56,10 @@ export function processExpression(
   };
 
   if (isSimpleIdentifier(rawExp)) {
-    node.content = rewriteIdentifier(rawExp);
+    const isLiteral = isLiteralWhitelisted(rawExp);
+    if (!isLiteral) {
+      node.content = rewriteIdentifier(rawExp);
+    }
     return node;
   }
 

diff --git a/book/impls/50_basic_template_compiler/022_transform_expression/packages/shared/makeMap.ts b/book/impls/50_basic_template_compiler/022_transform_expression/packages/shared/makeMap.ts
@@ -0,0 +1,13 @@
+export function makeMap(
+  str: string,
+  expectsLowerCase?: boolean
+): (key: string) => boolean {
+  const map: Record<string, boolean> = Object.create(null);
+  const list: Array<string> = str.split(",");
+  for (let i = 0; i < list.length; i++) {
+    map[list[i]] = true;
+  }
+  return expectsLowerCase
+    ? (val) => !!map[val.toLowerCase()]
+    : (val) => !!map[val];
+}
diff --git a/...basic_template_compiler/025_v_on/packages/compiler-core/transforms/transformExpression.ts b/...basic_template_compiler/025_v_on/packages/compiler-core/transforms/transformExpression.ts
@@ -12,6 +12,9 @@ import {
 import { walkIdentifiers } from "../babelUtils";
 import { NodeTransform, TransformContext } from "../transform";
 import { advancePositionWithClone, isSimpleIdentifier } from "../utils";
+import { makeMap } from "../../shared/makeMap";
+
+const isLiteralWhitelisted = makeMap("true,false,null,this");
 
 export const transformExpression: NodeTransform = (node, ctx) => {
   if (node.type === NodeTypes.INTERPOLATION) {
@@ -57,7 +60,10 @@ export function processExpression(
   };
 
   if (isSimpleIdentifier(rawExp)) {
-    node.content = rewriteIdentifier(rawExp);
+    const isLiteral = isLiteralWhitelisted(rawExp);
+    if (!isLiteral) {
+      node.content = rewriteIdentifier(rawExp);
+    }
     return node;
   }
 

diff --git a/book/impls/50_basic_template_compiler/025_v_on/packages/shared/makeMap.ts b/book/impls/50_basic_template_compiler/025_v_on/packages/shared/makeMap.ts
@@ -0,0 +1,13 @@
+export function makeMap(
+  str: string,
+  expectsLowerCase?: boolean
+): (key: string) => boolean {
+  const map: Record<string, boolean> = Object.create(null);
+  const list: Array<string> = str.split(",");
+  for (let i = 0; i < list.length; i++) {
+    map[list[i]] = true;
+  }
+  return expectsLowerCase
+    ? (val) => !!map[val.toLowerCase()]
+    : (val) => !!map[val];
+}
diff --git a/...late_compiler/027_event_modifier/packages/compiler-core/transforms/transformExpression.ts b/...late_compiler/027_event_modifier/packages/compiler-core/transforms/transformExpression.ts
@@ -12,6 +12,9 @@ import {
 import { walkIdentifiers } from "../babelUtils";
 import { NodeTransform, TransformContext } from "../transform";
 import { advancePositionWithClone, isSimpleIdentifier } from "../utils";
+import { makeMap } from "../../shared/makeMap";
+
+const isLiteralWhitelisted = makeMap("true,false,null,this");
 
 export const transformExpression: NodeTransform = (node, ctx) => {
   if (node.type === NodeTypes.INTERPOLATION) {
@@ -57,7 +60,10 @@ export function processExpression(
   };
 
   if (isSimpleIdentifier(rawExp)) {
-    node.content = rewriteIdentifier(rawExp);
+    const isLiteral = isLiteralWhitelisted(rawExp);
+    if (!isLiteral) {
+      node.content = rewriteIdentifier(rawExp);
+    }
     return node;
   }
 

diff --git a/...ate_compiler/027_event_modifier2/packages/compiler-core/transforms/transformExpression.ts b/...ate_compiler/027_event_modifier2/packages/compiler-core/transforms/transformExpression.ts
@@ -12,6 +12,9 @@ import {
 import { walkIdentifiers } from "../babelUtils";
 import { NodeTransform, TransformContext } from "../transform";
 import { advancePositionWithClone, isSimpleIdentifier } from "../utils";
+import { makeMap } from "../../shared/makeMap";
+
+const isLiteralWhitelisted = makeMap("true,false,null,this");
 
 export const transformExpression: NodeTransform = (node, ctx) => {
   if (node.type === NodeTypes.INTERPOLATION) {
@@ -57,7 +60,10 @@ export function processExpression(
   };
 
   if (isSimpleIdentifier(rawExp)) {
-    node.content = rewriteIdentifier(rawExp);
+    const isLiteral = isLiteralWhitelisted(rawExp);
+    if (!isLiteral) {
+      node.content = rewriteIdentifier(rawExp);
+    }
     return node;
   }
 

diff --git a/...c_template_compiler/030_fragment/packages/compiler-core/transforms/transformExpression.ts b/...c_template_compiler/030_fragment/packages/compiler-core/transforms/transformExpression.ts
@@ -12,6 +12,9 @@ import {
 import { walkIdentifiers } from "../babelUtils";
 import { NodeTransform, TransformContext } from "../transform";
 import { advancePositionWithClone, isSimpleIdentifier } from "../utils";
+import { makeMap } from "../../shared/makeMap";
+
+const isLiteralWhitelisted = makeMap("true,false,null,this");
 
 export const transformExpression: NodeTransform = (node, ctx) => {
   if (node.type === NodeTypes.INTERPOLATION) {
@@ -57,7 +60,10 @@ export function processExpression(
   };
 
   if (isSimpleIdentifier(rawExp)) {
-    node.content = rewriteIdentifier(rawExp);
+    const isLiteral = isLiteralWhitelisted(rawExp);
+    if (!isLiteral) {
+      node.content = rewriteIdentifier(rawExp);
+    }
     return node;
   }
 

diff --git a/...ic_template_compiler/035_comment/packages/compiler-core/transforms/transformExpression.ts b/...ic_template_compiler/035_comment/packages/compiler-core/transforms/transformExpression.ts
@@ -12,6 +12,9 @@ import {
 import { walkIdentifiers } from "../babelUtils";
 import { NodeTransform, TransformContext } from "../transform";
 import { advancePositionWithClone, isSimpleIdentifier } from "../utils";
+import { makeMap } from "../../shared/makeMap";
+
+const isLiteralWhitelisted = makeMap("true,false,null,this");
 
 export const transformExpression: NodeTransform = (node, ctx) => {
   if (node.type === NodeTypes.INTERPOLATION) {
@@ -57,7 +60,10 @@ export function processExpression(
   };
 
   if (isSimpleIdentifier(rawExp)) {
-    node.content = rewriteIdentifier(rawExp);
+    const isLiteral = isLiteralWhitelisted(rawExp);
+    if (!isLiteral) {
+      node.content = rewriteIdentifier(rawExp);
+    }
     return node;
   }
 

diff --git a/...40_v_if_and_structural_directive/packages/compiler-core/transforms/transformExpression.ts b/...40_v_if_and_structural_directive/packages/compiler-core/transforms/transformExpression.ts
@@ -12,6 +12,9 @@ import {
 import { walkIdentifiers } from "../babelUtils";
 import { NodeTransform, TransformContext } from "../transform";
 import { advancePositionWithClone, isSimpleIdentifier } from "../utils";
+import { makeMap } from "../../shared/makeMap";
+
+const isLiteralWhitelisted = makeMap("true,false,null,this");
 
 export const transformExpression: NodeTransform = (node, ctx) => {
   if (node.type === NodeTypes.INTERPOLATION) {
@@ -57,7 +60,10 @@ export function processExpression(
   };
 
   if (isSimpleIdentifier(rawExp)) {
-    node.content = rewriteIdentifier(rawExp);
+    const isLiteral = isLiteralWhitelisted(rawExp);
+    if (!isLiteral) {
+      node.content = rewriteIdentifier(rawExp);
+    }
     return node;
   }
 

diff --git a/...plate_compiler/040_v_if_and_structural_directive/packages/compiler-core/transforms/vIf.ts b/...plate_compiler/040_v_if_and_structural_directive/packages/compiler-core/transforms/vIf.ts
@@ -5,6 +5,7 @@ import {
   IfConditionalExpression,
   IfNode,
   NodeTypes,
+  SimpleExpressionNode,
   VNodeCall,
   createCallExpression,
   createConditionalExpression,
@@ -15,6 +16,7 @@ import {
   createStructuralDirectiveTransform,
   traverseNode,
 } from "../transform";
+import { processExpression } from "./transformExpression";
 
 export const transformIf = createStructuralDirectiveTransform(
   /^(if|else|else-if)$/,
@@ -48,6 +50,10 @@ export function processIf(
     isRoot: boolean
   ) => (() => void) | undefined
 ) {
+  if (!context.isBrowser && dir.exp) {
+    dir.exp = processExpression(dir.exp as SimpleExpressionNode, context);
+  }
+
   if (dir.name === "if") {
     const branch = createIfBranch(node, dir);
     const ifNode: IfNode = {

diff --git a/...asic_template_compiler/050_v_for/packages/compiler-core/transforms/transformExpression.ts b/...asic_template_compiler/050_v_for/packages/compiler-core/transforms/transformExpression.ts
@@ -12,6 +12,9 @@ import {
 import { walkIdentifiers } from "../babelUtils";
 import { NodeTransform, TransformContext } from "../transform";
 import { advancePositionWithClone, isSimpleIdentifier } from "../utils";
+import { makeMap } from "../../shared/makeMap";
+
+const isLiteralWhitelisted = makeMap("true,false,null,this");
 
 export const transformExpression: NodeTransform = (node, ctx) => {
   if (node.type === NodeTypes.INTERPOLATION) {
@@ -58,8 +61,9 @@ export function processExpression(
   };
 
   if (isSimpleIdentifier(rawExp)) {
+    const isLiteral = isLiteralWhitelisted(rawExp);
     const isScopeVarReference = ctx.identifiers[rawExp];
-    if (!asParams && !isScopeVarReference) {
+    if (!asParams && !isScopeVarReference && !isLiteral) {
       node.content = rewriteIdentifier(rawExp);
     }
     return node;

diff --git a/book/impls/50_basic_template_compiler/050_v_for/packages/compiler-core/transforms/vIf.ts b/book/impls/50_basic_template_compiler/050_v_for/packages/compiler-core/transforms/vIf.ts
@@ -5,6 +5,7 @@ import {
   IfConditionalExpression,
   IfNode,
   NodeTypes,
+  SimpleExpressionNode,
   VNodeCall,
   createCallExpression,
   createConditionalExpression,
@@ -15,6 +16,7 @@ import {
   createStructuralDirectiveTransform,
   traverseNode,
 } from "../transform";
+import { processExpression } from "./transformExpression";
 
 export const transformIf = createStructuralDirectiveTransform(
   /^(if|else|else-if)$/,
@@ -48,6 +50,10 @@ export function processIf(
     isRoot: boolean
   ) => (() => void) | undefined
 ) {
+  if (!context.isBrowser && dir.exp) {
+    dir.exp = processExpression(dir.exp as SimpleExpressionNode, context);
+  }
+
   if (dir.name === "if") {
     const branch = createIfBranch(node, dir);
     const ifNode: IfNode = {

diff --git a/book/impls/50_basic_template_compiler/060_resolve_components/examples/playground/.gitignore b/book/impls/50_basic_template_compiler/060_resolve_components/examples/playground/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/book/impls/50_basic_template_compiler/060_resolve_components/examples/playground/index.html b/book/impls/50_basic_template_compiler/060_resolve_components/examples/playground/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>chibivue</title>
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/.../impls/50_basic_template_compiler/060_resolve_components/examples/playground/package.json b/.../impls/50_basic_template_compiler/060_resolve_components/examples/playground/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "playground",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "typescript": "^4.9.3",
+    "vite": "^4.2.0"
+  }
+}