fix(vue-script-setup-converter): Components converter fails if dynami…

…c imports contain newlines (#60)

* fix typo

* test: Conversion fails if dynamic imports contain newlines

* fix: Conversion fails if dynamic imports contain newlines

* Revert "fix: Conversion fails if dynamic imports contain newlines"

This reverts commit 8bdd5b4.

* fix: Conversion fails if dynamic imports contain newlines

* test: Add test case which dynamic imports contain newlines

* The insertion of defineAsyncComponent should be done before definePageMeta because defineAsyncComponent is similar to an import declaration

packages/vue-script-setup-converter/src/lib/convertSrc.ts

@@ -89,12 +89,12 @@ export const convertSrc = (input: string) => {
       })
   );
 
+  statements.addStatements(components);
+
   if (isDefineNuxtComponent(callexpression)) {
     statements.addStatements(pageMeta);
   }
 
-  statements.addStatements(components);
-
   statements.addStatements(props);
   statements.addStatements(emits);
   statements.addStatements(statement);

packages/vue-script-setup-converter/src/lib/converter/componentsConverter.spec.ts

@@ -35,7 +35,8 @@ test("should be converted to defineAsyncComponent", () => {
     components: {
       HelloWorld,
       MyComp: () => import('./MyComp.vue'),
-      Foo: () => import('./Foo.vue'),
+      Foo: () =>
+        import('./Foo.vue'),
     }
   })
   `;
@@ -44,7 +45,8 @@ test("should be converted to defineAsyncComponent", () => {
   expect(output).toMatchInlineSnapshot(
     `
     "const MyComp = defineAsyncComponent(() => import('./MyComp.vue'))
-    const Foo = defineAsyncComponent(() => import('./Foo.vue'))"
+    const Foo = defineAsyncComponent(() =>
+            import('./Foo.vue'))"
   `
   );
 });
@@ -58,14 +60,16 @@ test("should be output as is", () => {
     components: {
       HelloWorld,
       MyComp: defineAsyncComponent(() => import('./MyComp.vue')),
-      Foo: defineAsyncComponent(() => import('./Foo.vue')),
+      Foo: defineAsyncComponent(() =>
+        import('./Foo.vue')),
     }
   })
   `;
   const output = parseScript(source);
 
   expect(output).toMatchInlineSnapshot(`
     "const MyComp = defineAsyncComponent(() => import('./MyComp.vue'))
-    const Foo = defineAsyncComponent(() => import('./Foo.vue'))"
+    const Foo = defineAsyncComponent(() =>
+            import('./Foo.vue'))"
   `);
 });

packages/vue-script-setup-converter/src/lib/converter/componentsConverter.ts

@@ -24,11 +24,11 @@ const convertToDefineAsyncComponent = (node: PropertyAssignment) => {
 
   const properties = child.getProperties();
 
-  const filterdProperties = properties.filter(filterDynamicImport);
+  const filteredProperties = properties.filter(filterDynamicImport);
 
-  if (filterdProperties.length === 0) return "";
+  if (filteredProperties.length === 0) return "";
 
-  const value = filterdProperties
+  const value = filteredProperties
     .map((x) => {
       const propertyName = x.getName();
       const initializer = x.getInitializer();

packages/vue-script-setup-converter/src/lib/helpers/module.ts

@@ -23,5 +23,5 @@ export const filterDynamicImport = (
 };
 
 export const hasDynamicImport = (node: ObjectLiteralElementLike) => {
-  return node.getText().includes("() => import(");
+  return node.getText().includes("import(");
 };