fix: Do not make side effects to sourceFile

wattanx · May 6, 2024 · 005dcbe · 005dcbe
1 parent cea4082
commit 005dcbe
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 97 deletions.
diff --git a/packages/vue-script-setup-converter/src/lib/__snapshots__/convertSrc.test.ts.snap b/packages/vue-script-setup-converter/src/lib/__snapshots__/convertSrc.test.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`snapshot > defineNuxtComponent 1`] = `
-"import { useNuxtApp } from "#imports";
+"import { useNuxtApp } from '#imports';
 definePageMeta({
   name: 'HelloWorld', layout: 'test-layout', middleware: 'test-middleware'
 });
@@ -15,7 +15,7 @@ const onSubmit = () => {
 `;
 
 exports[`snapshot > lang=js 1`] = `
-"import { toRefs, computed, ref } from "vue";
+"import { toRefs, computed, ref } from 'vue';
 const props = defineProps({
   msg: {
     type: String,
@@ -35,7 +35,7 @@ const count = ref(0);
 `;
 
 exports[`snapshot > lang=ts 1`] = `
-"import { toRefs, computed, ref } from "vue";
+"import { toRefs, computed, ref } from 'vue';
 type Props = {
   msg?: string;
   foo: string;

diff --git a/packages/vue-script-setup-converter/src/lib/convertSrc.test.ts b/packages/vue-script-setup-converter/src/lib/convertSrc.test.ts
@@ -122,7 +122,7 @@ export default defineComponent({
 </script>`);
     expect(output).toMatchInlineSnapshot(
       `
-      "import { toRefs, computed } from "vue";
+      "import { toRefs, computed } from 'vue';
       type Props = { msg?: string; }; const props = withDefaults(defineProps<Props>(), { msg: 'HelloWorld' });
 
       const { msg } = toRefs(props);
@@ -157,7 +157,7 @@ export default defineComponent({
     expect(output).toMatchInlineSnapshot(
       `
       "import type { PropType } from 'vue';
-      import { computed } from "vue";
+      import { computed } from 'vue';
       type Props = { msg?: string; }; const props = withDefaults(defineProps<Props>(), { msg: 'HelloWorld' });
 
       const newMsg = computed(() => props.msg + '- HelloWorld');

diff --git a/packages/vue-script-setup-converter/src/lib/converter/defineComponentImportConverter.ts b/packages/vue-script-setup-converter/src/lib/converter/defineComponentImportConverter.ts
@@ -1,26 +1,39 @@
-import type { SourceFile } from "ts-morph";
-import {
-  hasNamedImportIdentifier,
-  removeNamedImportIdentifier,
-} from "../helpers/module";
+import type { ImportDeclaration, SourceFile } from "ts-morph";
+import { hasNamedImportIdentifier } from "../helpers/module";
 
 export const convertDefineComponentImport = (sourceFile: SourceFile) => {
   let importDeclarationText = "";
 
   sourceFile.getImportDeclarations().forEach((importDeclaration) => {
     if (hasNamedImportIdentifier(importDeclaration, "defineComponent")) {
-      importDeclarationText = removeNamedImportIdentifier(
+      importDeclarationText = convertToImportDeclarationText(
         importDeclaration,
         "defineComponent"
-      ).getText();
+      );
     }
     if (hasNamedImportIdentifier(importDeclaration, "defineNuxtComponent")) {
-      importDeclarationText = removeNamedImportIdentifier(
+      importDeclarationText = convertToImportDeclarationText(
         importDeclaration,
         "defineNuxtComponent"
-      ).getText();
+      );
     }
   });
 
   return importDeclarationText;
 };
+
+const convertToImportDeclarationText = (
+  importDeclaration: ImportDeclaration,
+  identifier: string
+) => {
+  const filteredNamedImports = importDeclaration
+    .getNamedImports()
+    .map((namedImport) => namedImport.getText())
+    .filter((text) => text !== identifier);
+
+  if (filteredNamedImports.length === 0) return "";
+
+  return `import { ${filteredNamedImports.join(
+    ","
+  )} } from '${importDeclaration.getModuleSpecifierValue()}';`;
+};
diff --git a/packages/vue-script-setup-converter/src/lib/helpers/module.test.ts b/packages/vue-script-setup-converter/src/lib/helpers/module.test.ts
@@ -1,10 +1,7 @@
 import { expect, describe, it } from "vitest";
 import { ScriptTarget, Project, ImportDeclaration } from "ts-morph";
 import { parse } from "@vue/compiler-sfc";
-import {
-  hasNamedImportIdentifier,
-  removeNamedImportIdentifier,
-} from "./module";
+import { hasNamedImportIdentifier } from "./module";
 
 const getSourceFile = (input: string, lang: "js" | "ts" = "js") => {
   const {
@@ -53,58 +50,4 @@ describe("helpers/module", () => {
       });
     });
   });
-
-  describe("removeNamedImportIdentifier", () => {
-    describe("when importDeclaration includes target namedImport", () => {
-      const source = `<script>import { defineComponent, ref } from "vue";</script>`;
-
-      it("removes namedImport from importDeclaration", () => {
-        const sourceFile = getSourceFile(source);
-        const importDeclaration = sourceFile.getImportDeclaration("vue");
-
-        if (!importDeclaration)
-          throw new Error("importDeclaration is not found.");
-
-        const result = removeNamedImportIdentifier(
-          importDeclaration,
-          "defineComponent"
-        );
-
-        expect(result.getText()).toBe('import { ref } from "vue";');
-      });
-
-      it("makes no change to original  importDeclaration", () => {
-        const sourceFile = getSourceFile(source);
-        const importDeclaration = sourceFile.getImportDeclaration("vue");
-
-        if (!importDeclaration)
-          throw new Error("importDeclaration is not found.");
-
-        removeNamedImportIdentifier(importDeclaration, "defineComponent");
-
-        expect(importDeclaration.getText()).toBe(
-          'import { defineComponent, ref } from "vue";'
-        );
-      });
-    });
-
-    describe("when importDeclaration does not include target namedImport", () => {
-      const source = `<script>import { ref } from "vue";</script>`;
-
-      it("makes no change to importDeclaration", () => {
-        const sourceFile = getSourceFile(source);
-        const importDeclaration = sourceFile.getImportDeclaration("vue");
-
-        if (!importDeclaration)
-          throw new Error("importDeclaration is not found.");
-
-        const result = removeNamedImportIdentifier(
-          importDeclaration,
-          "defineComponent"
-        );
-
-        expect(result.getText()).toBe('import { ref } from "vue";');
-      });
-    });
-  });
 });
diff --git a/packages/vue-script-setup-converter/src/lib/helpers/module.ts b/packages/vue-script-setup-converter/src/lib/helpers/module.ts
@@ -10,28 +10,3 @@ export const hasNamedImportIdentifier = (
     })
   );
 };
-
-export const removeNamedImportIdentifier = (
-  importDeclaration: ImportDeclaration,
-  identifier: string
-): ImportDeclaration => {
-  if (!hasNamedImportIdentifier(importDeclaration, identifier)) {
-    return importDeclaration;
-  }
-
-  const sourceFile = importDeclaration.getSourceFile();
-  const newImportDeclaration = sourceFile.addImportDeclaration({
-    moduleSpecifier: importDeclaration.getModuleSpecifierValue(),
-    namedImports: importDeclaration
-      .getNamedImports()
-      .map((namedImport) => namedImport.getText()),
-  });
-
-  newImportDeclaration.getNamedImports().forEach((namedImport) => {
-    if (namedImport.getName() === identifier) {
-      namedImport.remove();
-    }
-  });
-
-  return newImportDeclaration;
-};