feat(vue-script-setup-converter): Remove defineComponent from import declaration

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 { defineNuxtComponent, 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 { defineComponent, 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 { defineComponent, toRefs, computed, ref } from 'vue';
+"import { toRefs, computed, ref } from 'vue';
 type Props = {
   msg?: string;
   foo: string;

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

@@ -122,7 +122,7 @@ export default defineComponent({
 </script>`);
     expect(output).toMatchInlineSnapshot(
       `
-      "import { defineComponent, 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 { defineComponent, computed } from 'vue';
+      import { computed } from 'vue';
       type Props = { msg?: string; }; const props = withDefaults(defineProps<Props>(), { msg: 'HelloWorld' });
 
       const newMsg = computed(() => props.msg + '- HelloWorld');

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

@@ -8,6 +8,10 @@ import {
 } from "ts-morph";
 import { parse } from "@vue/compiler-sfc";
 import { getNodeByKind } from "./helper";
+import {
+  hasNamedImportIdentifier,
+  removeNamedImportIdentifier,
+} from "./helpers/module";
 import { convertPageMeta } from "./converter/pageMetaConverter";
 import { convertProps } from "./converter/propsConverter";
 import { convertSetup } from "./converter/setupConverter";
@@ -52,7 +56,17 @@ export const convertSrc = (input: string) => {
     sourceFile
       .getStatements()
       .filter((state) => !Node.isExportAssignment(state))
-      .map((x) => x.getText())
+      .map((x) => {
+        if (x.isKind(SyntaxKind.ImportDeclaration)) {
+          if (hasNamedImportIdentifier(x, "defineComponent")) {
+            removeNamedImportIdentifier(x, "defineComponent");
+          }
+          if (hasNamedImportIdentifier(x, "defineNuxtComponent")) {
+            removeNamedImportIdentifier(x, "defineNuxtComponent");
+          }
+        }
+        return x.getText();
+      })
   );
 
   if (isDefineNuxtComponent(callexpression)) {

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

@@ -1,3 +1,4 @@
+// TODO: Move to helpers/node.ts
 import { SyntaxKind, Node, PropertyAssignment, CallExpression } from "ts-morph";
 
 export const getNodeByKind = (

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

@@ -0,0 +1,90 @@
+import { expect, describe, it } from "vitest";
+import { ScriptTarget, Project, ImportDeclaration } from "ts-morph";
+import { parse } from "@vue/compiler-sfc";
+import {
+  hasNamedImportIdentifier,
+  removeNamedImportIdentifier,
+} from "./module";
+
+const getSourceFile = (input: string, lang: "js" | "ts" = "js") => {
+  const {
+    descriptor: { script },
+  } = parse(input);
+
+  const project = new Project({
+    tsConfigFilePath: "tsconfig.json",
+    compilerOptions: {
+      target: ScriptTarget.Latest,
+    },
+  });
+
+  return project.createSourceFile("s.tsx", script?.content ?? "");
+};
+
+describe("helpers/module", () => {
+  describe("hasNamedImportIdentifier", () => {
+    describe("when importDeclaration includes target namedImport", () => {
+      const source = `<script>import { defineComponent, ref } from 'vue';</script>`;
+
+      it("returns true", () => {
+        const sourceFile = getSourceFile(source);
+        const importDeclaration = sourceFile.getImportDeclaration("vue");
+        const result = hasNamedImportIdentifier(
+          importDeclaration as ImportDeclaration,
+          "defineComponent"
+        );
+
+        expect(result).toBe(true);
+      });
+    });
+
+    describe("when importDeclaration does not include target namedImport", () => {
+      const source = `<script>import { ref } from 'vue';</script>`;
+
+      it("returns true", () => {
+        const sourceFile = getSourceFile(source);
+        const importDeclaration = sourceFile.getImportDeclaration("vue");
+        const result = hasNamedImportIdentifier(
+          importDeclaration as ImportDeclaration,
+          "defineComponent"
+        );
+
+        expect(result).toBe(false);
+      });
+    });
+  });
+
+  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.");
+
+        removeNamedImportIdentifier(importDeclaration, "defineComponent");
+
+        expect(importDeclaration.getText()).toBe("import { 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.");
+
+        removeNamedImportIdentifier(importDeclaration, "defineComponent");
+
+        expect(importDeclaration.getText()).toBe("import { ref } from 'vue';");
+      });
+    });
+  });
+});

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

@@ -0,0 +1,24 @@
+import type { ImportDeclaration } from "ts-morph";
+
+export const hasNamedImportIdentifier = (
+  importDeclaration: ImportDeclaration,
+  identifier: string
+): boolean => {
+  return Boolean(
+    importDeclaration.getNamedImports().find((namedImport) => {
+      return namedImport.getName() === identifier;
+    })
+  );
+};
+
+// NOTE: This function makes a side effect
+export const removeNamedImportIdentifier = (
+  importDeclaration: ImportDeclaration,
+  identifier: string
+): void => {
+  importDeclaration.getNamedImports().forEach((namedImport) => {
+    if (namedImport.getName() === identifier) {
+      namedImport.remove();
+    }
+  });
+};