fix(core): fix onUpdated missing {} in vue (#1242)

BuilderIO · Jul 27, 2023 · 36a2cd8 · 36a2cd8 · vercel · Jul 27, 2023
1 parent 1dea517
commit 36a2cd8
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 15 deletions.
diff --git a/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap b/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
@@ -2018,8 +2018,12 @@ exports[`Vue > jsx > Javascript Test > multipleOnUpdate 1`] = `
 <script setup>
 import { onUpdated } from \\"vue\\";
 
-onUpdated(() => console.log(\\"Runs on every update/rerender\\"));
-onUpdated(() => console.log(\\"Runs on every update/rerender as well\\"));
+onUpdated(() => {
+  console.log(\\"Runs on every update/rerender\\");
+});
+onUpdated(() => {
+  console.log(\\"Runs on every update/rerender as well\\");
+});
 </script>"
 `;
 
@@ -2193,7 +2197,9 @@ exports[`Vue > jsx > Javascript Test > onUpdate 1`] = `
 <script setup>
 import { onUpdated } from \\"vue\\";
 
-onUpdated(() => console.log(\\"Runs on every update/rerender\\"));
+onUpdated(() => {
+  console.log(\\"Runs on every update/rerender\\");
+});
 </script>"
 `;
 
@@ -2287,11 +2293,11 @@ exports[`Vue > jsx > Javascript Test > referencingFunInsideHook 1`] = `
 <script setup>
 import { onUpdated } from \\"vue\\";
 
-onUpdated(() =>
+onUpdated(() => {
   foo({
     someOption: bar,
-  })
-);
+  });
+});
 
 function foo(params) {}
 function bar() {}
@@ -5175,8 +5181,12 @@ exports[`Vue > jsx > Typescript Test > multipleOnUpdate 1`] = `
 <script setup lang=\\"ts\\">
 import { onUpdated } from \\"vue\\";
 
-onUpdated(() => console.log(\\"Runs on every update/rerender\\"));
-onUpdated(() => console.log(\\"Runs on every update/rerender as well\\"));
+onUpdated(() => {
+  console.log(\\"Runs on every update/rerender\\");
+});
+onUpdated(() => {
+  console.log(\\"Runs on every update/rerender as well\\");
+});
 </script>"
 `;
 
@@ -5359,7 +5369,9 @@ exports[`Vue > jsx > Typescript Test > onUpdate 1`] = `
 <script setup lang=\\"ts\\">
 import { onUpdated } from \\"vue\\";
 
-onUpdated(() => console.log(\\"Runs on every update/rerender\\"));
+onUpdated(() => {
+  console.log(\\"Runs on every update/rerender\\");
+});
 </script>"
 `;
 
@@ -5495,11 +5507,11 @@ exports[`Vue > jsx > Typescript Test > referencingFunInsideHook 1`] = `
 <script setup lang=\\"ts\\">
 import { onUpdated } from \\"vue\\";
 
-onUpdated(() =>
+onUpdated(() => {
   foo({
     someOption: bar,
-  })
-);
+  });
+});
 
 function foo(params) {}
 function bar() {}
@@ -6382,7 +6394,9 @@ onUnmounted(() => {
   console.log(\\"onDestroy\\");
 });
 
-onUpdated(() => console.log(\\"onAfterUpdate\\"));
+onUpdated(() => {
+  console.log(\\"onAfterUpdate\\");
+});
 </script>"
 `;
 
@@ -6702,7 +6716,9 @@ onUnmounted(() => {
   console.log(\\"onDestroy\\");
 });
 
-onUpdated(() => console.log(\\"onAfterUpdate\\"));
+onUpdated(() => {
+  console.log(\\"onAfterUpdate\\");
+});
 </script>"
 `;
 

diff --git a/packages/core/src/generators/vue/compositionApi.ts b/packages/core/src/generators/vue/compositionApi.ts
@@ -132,7 +132,7 @@ export function generateCompositionApiScript(
         .join('\n') || ''
     }
 
-    ${onUpdateWithoutDeps?.map((hook) => `onUpdated(() => ${hook.code})`).join('\n') || ''}
+    ${onUpdateWithoutDeps?.map((hook) => `onUpdated(() => {${hook.code}})`).join('\n') || ''}
 
     ${
       onUpdateWithDeps