feat: support vue3 and nuxt 3

wattanx · Apr 11, 2024 · 8c1b35d · 8c1b35d
1 parent f205e08
commit 8c1b35d
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 33 deletions.
diff --git a/docs/vue-composition-converter/ConvertView.vue b/docs/vue-composition-converter/ConvertView.vue
@@ -1,41 +1,42 @@
 <script lang="ts" setup>
-import { ref, watch } from "vue";
-import prettier from "prettier";
-import parserTypeScript from "prettier/parser-typescript";
-import hljs from "highlight.js/lib/core";
-import typescript from "highlight.js/lib/languages/typescript";
-import "highlight.js/styles/atom-one-dark.css";
-import { convertSrc } from "@wattanx/vue-composition-converter";
+import { ref, watch } from 'vue';
+import prettier from 'prettier';
+import parserTypeScript from 'prettier/parser-typescript';
+import hljs from 'highlight.js/lib/core';
+import typescript from 'highlight.js/lib/languages/typescript';
+import 'highlight.js/styles/atom-one-dark.css';
+import { convertSrc } from '@wattanx/vue-composition-converter';
 // @ts-ignore
-import optionsApi from "./options-api.txt?raw";
+import optionsApi from './options-api.txt?raw';
 
-hljs.registerLanguage("typescript", typescript);
+hljs.registerLanguage('typescript', typescript);
 
-const outputType = new Map([
-  ["vue2", "Vue 2 / Composition API"],
-  ["nuxt2", "Nuxt 2.x / Composition API"],
+const outputType = new Map<'vue3' | 'vue2' | 'nuxt2' | 'nuxt3', string>([
+  ['vue3', 'Vue 3'],
+  ['vue2', 'Vue 2 / Composition API'],
+  ['nuxt3', 'Nuxt 3 / Nuxt Bridge'],
+  ['nuxt2', 'Nuxt 2.x / Composition API'],
 ]);
 
 const outputTypeKeys = [...outputType.keys()];
 
 const input = ref(optionsApi);
-const output = ref("");
+const output = ref('');
 const selectedOutputType = ref(outputTypeKeys[0]);
 const hasError = ref(false);
 
 watch(
   [input, selectedOutputType],
   () => {
-    const useNuxt = selectedOutputType.value === "nuxt2";
     try {
       hasError.value = false;
       const outputText = convertSrc({
         input: input.value,
-        useNuxt,
+        version: selectedOutputType.value,
       });
       const prettifiedHtml = hljs.highlightAuto(
         prettier.format(outputText, {
-          parser: "typescript",
+          parser: 'typescript',
           plugins: [parserTypeScript],
         })
       ).value;

diff --git a/packages/vue-composition-converter/src/lib/__snapshots__/converter.spec.ts.snap b/packages/vue-composition-converter/src/lib/__snapshots__/converter.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`convertSrc 1`] = `
 "import { useStore } from 'vuex';
-import { defineComponent, toRefs, ref, computed, watch, onMounted } from '@vue/composition-api';
+import { defineComponent, toRefs, ref, computed, watch, onMounted } from 'vue';
 export default defineComponent({
     name: 'CompositionApiSample',
     props: {

diff --git a/packages/vue-composition-converter/src/lib/converter.ts b/packages/vue-composition-converter/src/lib/converter.ts
@@ -12,10 +12,13 @@ import { parse } from '@vue/compiler-sfc';
 
 export type ConverterOptions = {
   input: string;
-  useNuxt?: boolean;
+  version?: 'vue2' | 'vue3' | 'nuxt2' | 'nuxt3';
 };
 
-export const convertSrc = ({ input, useNuxt }: ConverterOptions): string => {
+export const convertSrc = ({
+  input,
+  version = 'vue3',
+}: ConverterOptions): string => {
   const {
     descriptor: { script },
   } = parse(input);
@@ -36,7 +39,7 @@ export const convertSrc = ({ input, useNuxt }: ConverterOptions): string => {
   );
   if (exportAssignNode) {
     // optionsAPI
-    return convertOptionsApi(sourceFile, useNuxt);
+    return convertOptionsApi(sourceFile, version);
   }
 
   throw new Error('no convert target');

diff --git a/packages/vue-composition-converter/src/lib/converters/optionsApiConverter.ts b/packages/vue-composition-converter/src/lib/converters/optionsApiConverter.ts
@@ -19,7 +19,7 @@ import { getImportStatement } from '../utils/getImportStatement';
 
 export const convertOptionsApi = (
   sourceFile: SourceFile,
-  useNuxt?: boolean
+  version?: 'vue2' | 'vue3' | 'nuxt2' | 'nuxt3'
 ) => {
   const options = optionsConverter(sourceFile);
   if (!options) {
@@ -41,7 +41,7 @@ export const convertOptionsApi = (
 
   const statements = project.createSourceFile('new.tsx');
 
-  statements.addStatements(getImportStatement(setupProps, useNuxt));
+  statements.addStatements(getImportStatement(setupProps, version));
   statements.addStatements(
     sourceFile
       .getStatements()

diff --git a/packages/vue-composition-converter/src/lib/utils/getImportStatement.ts b/packages/vue-composition-converter/src/lib/utils/getImportStatement.ts
@@ -10,26 +10,33 @@ import { nonNull } from '@wattanx/converter-utils';
 
 export const getImportStatement = (
   setupProps: ConvertedExpression[],
-  useNuxt?: boolean
+  version?: 'vue2' | 'vue3' | 'nuxt2' | 'nuxt3'
 ) => {
   let usedFunctions = [
     'defineComponent',
     ...new Set(setupProps.map(({ use }) => use).filter(nonNull)),
   ];
 
-  const moduleName = useNuxt ? 'nuxtjs' : 'vue';
+  const getModuleName = (version?: 'vue2' | 'vue3' | 'nuxt2' | 'nuxt3') => {
+    switch (version) {
+      case 'vue2':
+        return '@vue/composition-api';
+      case 'vue3':
+        return 'vue';
+      case 'nuxt2':
+        return '@nuxtjs/composition-api';
+      case 'nuxt3':
+        return '#imports';
+      default:
+        return 'vue';
+    }
+  };
 
-  if (useNuxt) {
-    usedFunctions = [...usedFunctions, 'useStore'];
-  }
+  const vuexImportStatements = `import { useStore } from 'vuex';`;
 
   const compositionApiImportStatements = `import { ${usedFunctions.join(
     ','
-  )} } from '@${moduleName}/composition-api'`;
-
-  const vuexImportStatements = `import { useStore } from 'vuex';`;
+  )} } from '${getModuleName(version)}'`;
 
-  return useNuxt
-    ? compositionApiImportStatements
-    : vuexImportStatements + '\n' + compositionApiImportStatements;
+  return vuexImportStatements + '\n' + compositionApiImportStatements;
 };