fix(compiler): #196 remove reactive effect deps (#200)

* other: #196 🔹 remove reactive effect deps * fix: #196 📌 compile script setup to inline bunding render function
chibivue-land · Dec 30, 2023 · 762c4b4 · 762c4b4
1 parent 873da6b
commit 762c4b4
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 39 deletions.
diff --git a/packages/@extensions/vite-plugin-chibivue/src/script.ts b/packages/@extensions/vite-plugin-chibivue/src/script.ts
@@ -7,7 +7,9 @@ export function resolveScript(
 ): SFCScriptBlock | null {
   if (!descriptor.script && !descriptor.scriptSetup) return null;
   let resolved: SFCScriptBlock | null = null;
-  resolved = options.compiler.compileScript(descriptor);
+  resolved = options.compiler.compileScript(descriptor, {
+    inlineTemplate: isUseInlineTemplate(descriptor),
+  });
   return resolved;
 }
 

diff --git a/packages/compiler-core/src/transforms/transformExpression.ts b/packages/compiler-core/src/transforms/transformExpression.ts
@@ -1,6 +1,6 @@
 import { parse } from "@babel/parser";
 import { Identifier, Node } from "@babel/types";
-import { makeMap } from "@chibivue/shared";
+import { genPropsAccessExp, hasOwn, makeMap } from "@chibivue/shared";
 
 import {
   NodeTypes,
@@ -13,6 +13,8 @@ import {
 import { walkIdentifiers } from "../babelUtils";
 import { NodeTransform, TransformContext } from "../transform";
 import { advancePositionWithClone, isSimpleIdentifier } from "../utils";
+import { BindingTypes } from "../options";
+import { UNREF } from "../runtimeHelpers";
 
 const isLiteralWhitelisted = makeMap("true,false,null,this");
 
@@ -56,7 +58,33 @@ export function processExpression(
 
   const rawExp = node.content;
 
-  const rewriteIdentifier = (raw: string) => {
+  const { inline, bindingMetadata } = ctx;
+
+  const rewriteIdentifier = (raw: string, parent?: Node, id?: Identifier) => {
+    const type = hasOwn(bindingMetadata, raw) && bindingMetadata[raw];
+    // x = y
+    const isAssignmentLVal =
+      parent && parent.type === "AssignmentExpression" && parent.left === id;
+    // x++
+    const isUpdateArg =
+      parent && parent.type === "UpdateExpression" && parent.argument === id;
+
+    if (inline) {
+      if (type === BindingTypes.SETUP_CONST) {
+        return raw;
+      } else if (type === BindingTypes.SETUP_REACTIVE_CONST) {
+        return raw;
+      } else if (type === BindingTypes.SETUP_REF) {
+        return `${raw}.value`;
+      } else if (type === BindingTypes.SETUP_MAYBE_REF) {
+        return isAssignmentLVal || isUpdateArg
+          ? `${raw}.value`
+          : `${ctx.helperString(UNREF)}(${raw})`;
+      } else if (type === BindingTypes.PROPS) {
+        return genPropsAccessExp(raw);
+      }
+    }
+
     return `_ctx.${raw}`;
   };
 

diff --git a/packages/compiler-core/src/transforms/vFor.ts b/packages/compiler-core/src/transforms/vFor.ts
@@ -39,6 +39,7 @@ export const transformFor = createStructuralDirectiveTransform(
       ) as ForCodegenNode;
 
       return () => {
+        // finish the codegen now that all children have been traversed
         const { children } = forNode;
         const childBlock = (children[0] as ElementNode)
           .codegenNode as VNodeCall;
@@ -66,8 +67,9 @@ export function processFor(
     context
   );
 
-  const { addIdentifiers, removeIdentifiers } = context;
+  const { addIdentifiers, removeIdentifiers, scopes } = context;
 
+  // TODO: error handling when parseResult is undefined
   const { source, value, key, index } = parseResult!;
 
   const forNode: ForNode = {
@@ -82,15 +84,18 @@ export function processFor(
 
   context.replaceNode(forNode);
 
-  if (!context.isBrowser) {
-    value && addIdentifiers(value);
-    key && addIdentifiers(key);
-    index && addIdentifiers(index);
-  }
+  // bookkeeping
+  scopes.vFor++;
+  // scope management
+  // inject identifiers to context
+  value && addIdentifiers(value);
+  key && addIdentifiers(key);
+  index && addIdentifiers(index);
 
   const onExit = processCodegen && processCodegen(forNode);
 
   return () => {
+    scopes.vFor--;
     value && removeIdentifiers(value);
     key && removeIdentifiers(key);
     index && removeIdentifiers(index);
@@ -132,12 +137,10 @@ export function parseForExpression(
     index: undefined,
   };
 
-  if (!context.isBrowser) {
-    result.source = processExpression(
-      result.source as SimpleExpressionNode,
-      context
-    );
-  }
+  result.source = processExpression(
+    result.source as SimpleExpressionNode,
+    context
+  );
 
   let valueContent = LHS.trim().replace(stripParensRE, "").trim();
   const iteratorMatch = valueContent.match(forIteratorRE);
@@ -150,9 +153,6 @@ export function parseForExpression(
     if (keyContent) {
       keyOffset = exp.indexOf(keyContent, trimmedOffset + valueContent.length);
       result.key = createAliasExpression(loc, keyContent, keyOffset);
-      if (!context.isBrowser) {
-        result.key = processExpression(result.key, context, true);
-      }
     }
 
     if (iteratorMatch[2]) {
@@ -168,17 +168,11 @@ export function parseForExpression(
               : trimmedOffset + valueContent.length
           )
         );
-        if (!context.isBrowser) {
-          result.index = processExpression(result.index, context, true);
-        }
       }
     }
-  }
 
-  if (valueContent) {
-    result.value = createAliasExpression(loc, valueContent, trimmedOffset);
-    if (!context.isBrowser) {
-      result.value = processExpression(result.value, context, true);
+    if (valueContent) {
+      result.value = createAliasExpression(loc, valueContent, trimmedOffset);
     }
   }
 

diff --git a/packages/compiler-core/src/transforms/vOn.ts b/packages/compiler-core/src/transforms/vOn.ts
@@ -22,7 +22,7 @@ export interface VOnDirectiveNode extends DirectiveNode {
 
 export const transformOn: DirectiveTransform = (
   dir,
-  node,
+  _node,
   context,
   augmentor
 ) => {
@@ -79,5 +79,9 @@ export const transformOn: DirectiveTransform = (
     ],
   };
 
+  if (augmentor) {
+    ret = augmentor(ret);
+  }
+
   return ret;
 };
diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
@@ -30,7 +30,14 @@ export interface ImportBinding {
   isFromSetup: boolean;
 }
 
-export function compileScript(sfc: SFCDescriptor): SFCScriptBlock {
+export interface SFCScriptCompileOptions {
+  inlineTemplate?: boolean;
+}
+
+export function compileScript(
+  sfc: SFCDescriptor,
+  options: SFCScriptCompileOptions
+): SFCScriptBlock {
   let { script, scriptSetup, source } = sfc;
 
   // prettier-ignore
@@ -366,18 +373,20 @@ export function compileScript(sfc: SFCDescriptor): SFCScriptBlock {
 
   // 10. generate return statement
   let returned;
-  if (sfc.template) {
-    const { code, preamble } = compileTemplate({
-      source: sfc.template.content.trim(),
-      compilerOptions: { inline: true, bindingMetadata },
-    });
-
-    if (preamble) {
-      s.prepend(preamble);
+  if (options.inlineTemplate) {
+    if (sfc.template) {
+      const { code, preamble } = compileTemplate({
+        source: sfc.template.content.trim(),
+        compilerOptions: { inline: true, bindingMetadata },
+      });
+
+      if (preamble) {
+        s.prepend(preamble);
+      }
+      returned = code;
+    } else {
+      returned = `() => {}`;
     }
-    returned = code;
-  } else {
-    returned = `() => {}`;
   }
   s.appendRight(endOffset, `\nreturn ${returned}\n`);