fix(compiler): add withAsyncContext helper import from vue when trans…

…form
tomoriny · Nov 27, 2024 · 7814986 · 7814986
1 parent dc09ca6
commit 7814986
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 5 deletions.
diff --git a/packages/compiler/src/constants.ts b/packages/compiler/src/constants.ts
@@ -9,6 +9,8 @@ export const USE_SLOT_HELPER = 'useSlots'
 export const UN_REF_HELPER = 'unref'
 export const DEFAULT_MODEL_NAME = 'modelValue'
 export const DEFAULT_MODEL_MODIFIERS_NAME = 'modelModifiers'
+export const WITH_ASYNC_CONTEXT_HELPER = 'withAsyncContext'
+
 /**
  * These macros can't be inside other expressions but just called directly.
  */

diff --git a/packages/compiler/src/transform.ts b/packages/compiler/src/transform.ts
@@ -20,6 +20,7 @@ import {
   USE_DEFAULTS_HELPER,
   USE_MODEL_HELPER,
   USE_SLOT_HELPER,
+  WITH_ASYNC_CONTEXT_HELPER,
 } from './constants'
 import { sortStyleImport } from './style/order'
 import { compileCSSVars } from './style/transform-css-var'
@@ -44,11 +45,11 @@ function wrapWithAsyncContext(
   );`
 }
 
-function mayContainAwaitExpr(targetNode: Node) {
+function mayContainAwaitExpr(vineFnBodyStmt: Node) {
   let awaitExpr: AwaitExpression | undefined
-  const isVarDecl = isVariableDeclaration(targetNode)
-  const isAssignExpr = isAssignmentExpression(targetNode)
-  const isExprStmt = isExpressionStatement(targetNode)
+  const isVarDecl = isVariableDeclaration(vineFnBodyStmt)
+  const isAssignExpr = isAssignmentExpression(vineFnBodyStmt)
+  const isExprStmt = isExpressionStatement(vineFnBodyStmt)
 
   if (!(
     isVarDecl
@@ -58,10 +59,17 @@ function mayContainAwaitExpr(targetNode: Node) {
     return null
   }
 
+  if (
+    isExprStmt
+    && vineFnBodyStmt.expression.type !== 'AwaitExpression'
+  ) {
+    return null
+  }
+
   const isNeedResult = isVarDecl || isAssignExpr
 
   try {
-    traverse(targetNode, (descendant) => {
+    traverse(vineFnBodyStmt, (descendant) => {
       if (isAwaitExpression(descendant)) {
         awaitExpr = descendant
         throw new Error(EXPECTED_ERROR)
@@ -258,6 +266,11 @@ export function transformFile(
         if (!mayContain || !mayContain.awaitExpr) {
           continue
         }
+
+        // has await expression in function body root level statements,
+        // we need to add 'withAsyncContext' helper, imported from 'vue'
+        vueImportsSpecs.set(WITH_ASYNC_CONTEXT_HELPER, `_${WITH_ASYNC_CONTEXT_HELPER}`)
+
         const { awaitExpr, isNeedResult } = mayContain
         hasAwait = true
         ms.update(

diff --git a/packages/compiler/tests/__snapshots__/transform.spec.ts.snap b/packages/compiler/tests/__snapshots__/transform.spec.ts.snap
@@ -17,6 +17,7 @@ import {
   useModel as _useModel,
   toRefs as _toRefs,
   createVNode as _createVNode,
+  withAsyncContext as _withAsyncContext,
 } from "vue";
 
 import "testTransformInlineResult?type=vine-style&scopeId=3921d7bd&comp=MyProfile&lang=css&index=0&virtual.css";
@@ -83,6 +84,13 @@ export const MyProfile = (() => {
         // ...
       };
 
+      onMounted(async () => {
+        const data = await fetch(
+          "https://api.sampleapis.com/futurama/characters",
+        );
+        console.log(data);
+      });
+
       __expose({
         age,
         bio,
@@ -216,6 +224,7 @@ import {
   useModel as _useModel,
   toRefs as _toRefs,
   createVNode as _createVNode,
+  withAsyncContext as _withAsyncContext,
 } from "vue";
 
 import "testNoHMRContentOnProduction?type=vine-style&scopeId=3b48c990&comp=MyProfile&lang=css&index=0&virtual.css";
@@ -282,6 +291,13 @@ export const MyProfile = (() => {
         // ...
       };
 
+      onMounted(async () => {
+        const data = await fetch(
+          "https://api.sampleapis.com/futurama/characters",
+        );
+        console.log(data);
+      });
+
       __expose({
         age,
         bio,
@@ -389,6 +405,7 @@ import {
   useModel as _useModel,
   toRefs as _toRefs,
   createVNode as _createVNode,
+  withAsyncContext as _withAsyncContext,
 } from "vue";
 
 import "testTransformSeparatedResult?type=vine-style&scopeId=25e4e706&comp=MyProfile&lang=css&index=0&virtual.css";
@@ -455,6 +472,13 @@ export const MyProfile = (() => {
         // ...
       };
 
+      onMounted(async () => {
+        const data = await fetch(
+          "https://api.sampleapis.com/futurama/characters",
+        );
+        console.log(data);
+      });
+
       __expose({
         age,
         bio,
@@ -602,6 +626,7 @@ import {
   useSlots as _useSlots,
   useModel as _useModel,
   toRefs as _toRefs,
+  withAsyncContext as _withAsyncContext,
 } from "vue";
 
 import "testTransformSeparatedResult?type=vine-style&scopeId=25e4e706&comp=MyProfile&lang=css&index=0&virtual.css";
@@ -667,6 +692,13 @@ export const MyProfile = (() => {
         // ...
       };
 
+      onMounted(async () => {
+        const data = await fetch(
+          "https://api.sampleapis.com/futurama/characters",
+        );
+        console.log(data);
+      });
+
       __expose({
         age,
         bio,

diff --git a/packages/compiler/tests/transform.spec.ts b/packages/compiler/tests/transform.spec.ts
@@ -58,6 +58,11 @@ function MyProfile() {
   vineStyle.import('../styles/test1.less').scoped()
   vineStyle.import(\`../styles/test2.scss\`)
 
+  onMounted(async () => {
+    const data = await fetch("https://api.sampleapis.com/futurama/characters")
+    console.log(data)
+  })
+
   return vine\`
     <div class="my-profile">
       <div>{{ name }}<span> - {{ age }}</span></div>