refactor: simplify import helper function

vue-macros · Mar 26, 2023 · 2cd0c5b · 2cd0c5b
1 parent cb3218e
commit 2cd0c5b
Show file tree

Hide file tree

Showing 9 changed files with 84 additions and 78 deletions.
diff --git a/.changeset/brave-dots-speak.md b/.changeset/brave-dots-speak.md
@@ -0,0 +1,10 @@
+---
+'@vue-macros/common': minor
+'@vue-macros/define-props-refs': patch
+'unplugin-vue-define-options': patch
+'@vue-macros/named-template': patch
+'@vue-macros/single-define': patch
+'@vue-macros/define-model': patch
+---
+
+simplify import helper function
diff --git a/packages/common/src/ast.ts b/packages/common/src/ast.ts
@@ -15,6 +15,7 @@ import type {
   TemplateLiteral,
 } from '@babel/types'
 import type { ParserOptions, ParserPlugin } from '@babel/parser'
+import type { MagicStringBase } from 'magic-string-ast'
 
 export function babelParse(
   code: string,
@@ -295,3 +296,31 @@ export function unwrapTSNode(node: Node): Node {
     return node
   }
 }
+
+const importedMap = new WeakMap<MagicStringBase, Set<string>>()
+export const HELPER_PREFIX = '__MACROS_'
+export function importHelperFn(
+  s: MagicStringBase,
+  offset: number,
+  local: string,
+  from: string,
+  isDefault = false
+) {
+  const imported = isDefault ? 'default' : local
+  const cacheKey = `${from}@${imported}`
+  if (!importedMap.get(s)?.has(cacheKey)) {
+    s.appendLeft(
+      offset,
+      `\nimport ${
+        isDefault
+          ? HELPER_PREFIX + local
+          : `{ ${imported} as ${HELPER_PREFIX + local} }`
+      } from ${JSON.stringify(from)};`
+    )
+    if (!importedMap.has(s)) {
+      importedMap.set(s, new Set([cacheKey]))
+    } else {
+      importedMap.get(s)!.add(cacheKey)
+    }
+  }
+}
diff --git a/packages/common/src/vue.ts b/packages/common/src/vue.ts
@@ -77,25 +77,3 @@ export function addNormalScript({ script, lang }: SFC, s: MagicStringBase) {
     },
   }
 }
-
-const imported = new WeakMap<MagicStringBase, Set<string>>()
-export const HELPER_PREFIX = '__MACROS_'
-export function importHelperFn(
-  s: MagicStringBase,
-  offset: number,
-  name: string,
-  from: string
-) {
-  const cacheKey = `${from}@${name}`
-  if (!imported.get(s)?.has(cacheKey)) {
-    s.appendLeft(
-      offset,
-      `\nimport { ${name} as ${HELPER_PREFIX}${name} } from '${from}';`
-    )
-    if (!imported.has(s)) {
-      imported.set(s, new Set([cacheKey]))
-    } else {
-      imported.get(s)!.add(cacheKey)
-    }
-  }
-}
diff --git a/packages/define-model/src/core/index.ts b/packages/define-model/src/core/index.ts
@@ -10,6 +10,7 @@ import {
   REPO_ISSUE_URL,
   WITH_DEFAULTS,
   getTransformResult,
+  importHelperFn,
   isCallOf,
   parseSFC,
   resolveObjectKey,
@@ -397,7 +398,7 @@ export function transformDefineModel(
           }
         }
 
-        s.appendLeft(
+        s.appendRight(
           setupOffset,
           `\n${text ? `${kind} ${text} = ` : ''}defineProps<{
     ${propsText}
@@ -406,10 +407,10 @@ export function transformDefineModel(
       }
 
       if (hasDefineEmits) {
-        s.appendLeft(setupOffset + emitsTypeDecl!.start! + 1, `${emitsText}\n`)
+        s.appendRight(setupOffset + emitsTypeDecl!.start! + 1, `${emitsText}\n`)
       } else {
         emitsIdentifier = `${HELPER_PREFIX}emit`
-        s.appendLeft(
+        s.appendRight(
           setupOffset,
           `\n${
             mode === 'reactivity-transform' ? `const ${emitsIdentifier} = ` : ''
@@ -421,10 +422,7 @@ export function transformDefineModel(
     }
 
     function rewriteRuntime() {
-      s.prependLeft(
-        setupOffset,
-        `\nimport ${HELPER_PREFIX}useVModel from '${useVmodelHelperId}';`
-      )
+      importHelperFn(s, setupOffset, 'useVModel', useVmodelHelperId, true)
 
       const text = `${HELPER_PREFIX}useVModel(${Object.entries(map)
         .map(([name, { options }]) => {
@@ -453,15 +451,13 @@ export function transformDefineModel(
         `Identifier of returning value of ${DEFINE_EMITS} is not found, please report this issue.\n${REPO_ISSUE_URL}`
       )
 
-    let hasTransformed = false
-
     function overwrite(
       node: Node,
       id: Identifier,
       value: string,
       original = false
     ) {
-      hasTransformed = true
+      importHelperFn(s, setupOffset, 'emitHelper', emitHelperId, true)
       const eventName = aliasMap[id.name]
       const content = `${HELPER_PREFIX}emitHelper(${emitsIdentifier}, '${getEventKey(
         String(eventName)
@@ -496,13 +492,6 @@ export function transformDefineModel(
         }
       },
     })
-
-    if (hasTransformed) {
-      s.prependLeft(
-        setupOffset,
-        `\nimport ${HELPER_PREFIX}emitHelper from '${emitHelperId}';`
-      )
-    }
   }
 
   if (!code.includes(DEFINE_MODEL)) return

diff --git a/packages/define-model/tests/__snapshots__/fixtures.test.ts.snap b/packages/define-model/tests/__snapshots__/fixtures.test.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`fixtures > ./fixtures/reactivity-transform/assignment.vue 1`] = `
 "<script setup lang=\\"ts\\">
-import __MACROS_emitHelper from '/vue-macros/define-model/emit-helper';
+import __MACROS_emitHelper from \\"/vue-macros/define-model/emit-helper\\";
 let { modelValue, title } = defineProps<{
     modelValue: string
 title: string
@@ -20,7 +20,7 @@ __MACROS_emitHelper(__MACROS_emit, 'update:modelValue', __MACROS_emitHelper(__MA
 
 exports[`fixtures > ./fixtures/reactivity-transform/assignment-update.vue 1`] = `
 "<script setup lang=\\"ts\\">
-import __MACROS_emitHelper from '/vue-macros/define-model/emit-helper';
+import __MACROS_emitHelper from \\"/vue-macros/define-model/emit-helper\\";
 let { count } = defineProps<{
     count: number
   }>();
@@ -50,7 +50,7 @@ const add = () => (__MACROS_emitHelper(__MACROS_emit, 'update:count', count + 1)
 
 exports[`fixtures > ./fixtures/reactivity-transform/basic.vue 1`] = `
 "<script setup lang=\\"ts\\">
-import __MACROS_emitHelper from '/vue-macros/define-model/emit-helper';
+import __MACROS_emitHelper from \\"/vue-macros/define-model/emit-helper\\";
 var { modelValue } = defineProps<{
     modelValue: string
 visible: boolean
@@ -105,7 +105,7 @@ const __MACROS_emit = defineEmits<{
 
 exports[`fixtures > ./fixtures/reactivity-transform/rename.vue 1`] = `
 "<script setup lang=\\"ts\\">
-import __MACROS_emitHelper from '/vue-macros/define-model/emit-helper';
+import __MACROS_emitHelper from \\"/vue-macros/define-model/emit-helper\\";
 let { modelValue: visible, foo } = defineProps<{
     modelValue: boolean
 foo: string
@@ -141,7 +141,7 @@ emit('change')
 
 exports[`fixtures > ./fixtures/reactivity-transform/with-define-emits-decl.vue 1`] = `
 "<script setup lang=\\"ts\\">
-import __MACROS_emitHelper from '/vue-macros/define-model/emit-helper';
+import __MACROS_emitHelper from \\"/vue-macros/define-model/emit-helper\\";
 let { modelValue } = defineProps<{
     modelValue: string
   }>();
@@ -167,7 +167,7 @@ const emit = defineEmits<{(evt: 'update:modelValue', value: string): void
 
 exports[`fixtures > ./fixtures/reactivity-transform/with-define-emits-no-decl.vue 1`] = `
 "<script setup lang=\\"ts\\">
-import __MACROS_emitHelper from '/vue-macros/define-model/emit-helper';
+import __MACROS_emitHelper from \\"/vue-macros/define-model/emit-helper\\";
 let { modelValue } = defineProps<{
     modelValue: string
   }>();
@@ -272,7 +272,7 @@ console.log(props)
 
 exports[`fixtures > ./fixtures/runtime/vue2/basic.vue 1`] = `
 "<script setup lang=\\"ts\\">
-import __MACROS_useVModel from '/vue-macros/define-model/use-vmodel';
+import __MACROS_useVModel from \\"/vue-macros/define-model/use-vmodel\\";
 let { value, title } = __MACROS_useVModel([\\"value\\", undefined, \\"input\\"], \\"title\\")
 
 const { id } = defineProps<{value: string
@@ -309,7 +309,7 @@ export default {
 }
 </script>
 <script setup lang=\\"ts\\">
-import __MACROS_useVModel from '/vue-macros/define-model/use-vmodel';
+import __MACROS_useVModel from \\"/vue-macros/define-model/use-vmodel\\";
 let { value, title } = __MACROS_useVModel([\\"value\\", undefined, \\"changeInput\\"], \\"title\\")
 
 const { id } = defineProps<{value: string
@@ -347,7 +347,7 @@ export default defineComponent({
 })
 </script>
 <script setup lang=\\"ts\\">
-import __MACROS_useVModel from '/vue-macros/define-model/use-vmodel';
+import __MACROS_useVModel from \\"/vue-macros/define-model/use-vmodel\\";
 let { value, title } = __MACROS_useVModel([\\"value\\", undefined, \\"changeInput\\"], \\"title\\")
 
 const { id } = defineProps<{value: string
@@ -376,7 +376,7 @@ const emit = defineEmits<{(evt: 'changeInput', value: string): void
 
 exports[`fixtures > ./fixtures/runtime/vue2/v-model.vue 1`] = `
 "<script setup lang=\\"ts\\">
-import __MACROS_useVModel from '/vue-macros/define-model/use-vmodel';
+import __MACROS_useVModel from \\"/vue-macros/define-model/use-vmodel\\";
 defineProps<{
     value: string
   }>();
@@ -392,7 +392,7 @@ modelValue.value = 'hello'
 
 exports[`fixtures > ./fixtures/runtime/vue3/assignment.vue 1`] = `
 "<script setup lang=\\"ts\\">
-import __MACROS_useVModel from '/vue-macros/define-model/use-vmodel';
+import __MACROS_useVModel from \\"/vue-macros/define-model/use-vmodel\\";
 defineProps<{
     modelValue: string
 title: string
@@ -410,7 +410,7 @@ modelValue.value = title.value = '123'
 
 exports[`fixtures > ./fixtures/runtime/vue3/basic.vue 1`] = `
 "<script setup lang=\\"ts\\">
-import __MACROS_useVModel from '/vue-macros/define-model/use-vmodel';
+import __MACROS_useVModel from \\"/vue-macros/define-model/use-vmodel\\";
 defineProps<{
     modelValue: string
 visible: boolean
@@ -435,7 +435,7 @@ exports[`fixtures > ./fixtures/runtime/vue3/define-props-runtime.vue 1`] = `unde
 
 exports[`fixtures > ./fixtures/runtime/vue3/empty.vue 1`] = `
 "<script setup lang=\\"ts\\">
-import __MACROS_useVModel from '/vue-macros/define-model/use-vmodel';
+import __MACROS_useVModel from \\"/vue-macros/define-model/use-vmodel\\";
 defineProps<{
     
   }>();
@@ -453,7 +453,7 @@ exports[`fixtures > ./fixtures/runtime/vue3/error-runtime.vue 1`] = `"defineProp
 
 exports[`fixtures > ./fixtures/runtime/vue3/multi-decl.vue 1`] = `
 "<script setup lang=\\"ts\\">
-import __MACROS_useVModel from '/vue-macros/define-model/use-vmodel';
+import __MACROS_useVModel from \\"/vue-macros/define-model/use-vmodel\\";
 defineProps<{
     modelValue: string
 visible: boolean
@@ -470,7 +470,7 @@ const a = 'b',
 
 exports[`fixtures > ./fixtures/runtime/vue3/no-decl.vue 1`] = `
 "<script setup lang=\\"ts\\">
-import __MACROS_useVModel from '/vue-macros/define-model/use-vmodel';
+import __MACROS_useVModel from \\"/vue-macros/define-model/use-vmodel\\";
 defineProps<{
     modelValue: string
 visible: boolean
@@ -486,7 +486,7 @@ __MACROS_useVModel(\\"modelValue\\", \\"visible\\")
 
 exports[`fixtures > ./fixtures/runtime/vue3/no-type.vue 1`] = `
 "<script setup lang=\\"ts\\">
-import __MACROS_useVModel from '/vue-macros/define-model/use-vmodel';
+import __MACROS_useVModel from \\"/vue-macros/define-model/use-vmodel\\";
 defineProps<{
     foo
 bar
@@ -502,7 +502,7 @@ __MACROS_useVModel(\\"foo\\", \\"bar\\")
 
 exports[`fixtures > ./fixtures/runtime/vue3/optional.vue 1`] = `
 "<script setup lang=\\"ts\\">
-import __MACROS_useVModel from '/vue-macros/define-model/use-vmodel';
+import __MACROS_useVModel from \\"/vue-macros/define-model/use-vmodel\\";
 defineProps<{
     foo?: string
   }>();
@@ -516,7 +516,7 @@ __MACROS_useVModel(\\"foo\\")
 
 exports[`fixtures > ./fixtures/runtime/vue3/options.vue 1`] = `
 "<script setup lang=\\"ts\\">
-import __MACROS_useVModel from '/vue-macros/define-model/use-vmodel';
+import __MACROS_useVModel from \\"/vue-macros/define-model/use-vmodel\\";
 defineProps<{
     foo?: string
 bar?: boolean
@@ -536,7 +536,7 @@ console.log(foo.value, bar.value)
 
 exports[`fixtures > ./fixtures/runtime/vue3/rename.vue 1`] = `
 "<script setup lang=\\"ts\\">
-import __MACROS_useVModel from '/vue-macros/define-model/use-vmodel';
+import __MACROS_useVModel from \\"/vue-macros/define-model/use-vmodel\\";
 defineProps<{
     modelValue: boolean
 foo: string
@@ -554,7 +554,7 @@ console.log(visible, foo)
 
 exports[`fixtures > ./fixtures/runtime/vue3/rest.vue 1`] = `
 "<script setup lang=\\"ts\\">
-import __MACROS_useVModel from '/vue-macros/define-model/use-vmodel';
+import __MACROS_useVModel from \\"/vue-macros/define-model/use-vmodel\\";
 defineProps<{
     modelValue: string
 visible: boolean
@@ -572,7 +572,7 @@ rest.modelValue.value = 'foo'
 
 exports[`fixtures > ./fixtures/runtime/vue3/with-defaults.vue 1`] = `
 "<script setup lang=\\"ts\\">
-import __MACROS_useVModel from '/vue-macros/define-model/use-vmodel';
+import __MACROS_useVModel from \\"/vue-macros/define-model/use-vmodel\\";
 defineEmits<{
     (evt: 'update:foo', value: string): void
   }>();
@@ -594,7 +594,7 @@ console.log(foo)
 
 exports[`fixtures > ./fixtures/runtime/vue3/with-define-emits.vue 1`] = `
 "<script setup lang=\\"ts\\">
-import __MACROS_useVModel from '/vue-macros/define-model/use-vmodel';
+import __MACROS_useVModel from \\"/vue-macros/define-model/use-vmodel\\";
 defineProps<{
     modelValue: string
   }>();
@@ -613,7 +613,7 @@ modelValue.value = 'hello'
 
 exports[`fixtures > ./fixtures/runtime/vue3/with-define-props.vue 1`] = `
 "<script setup lang=\\"ts\\">
-import __MACROS_useVModel from '/vue-macros/define-model/use-vmodel';
+import __MACROS_useVModel from \\"/vue-macros/define-model/use-vmodel\\";
 defineEmits<{
     (evt: 'update:modelValue', value: string): void
 (evt: 'update:visible', value: boolean): void
@@ -631,7 +631,7 @@ visible: boolean
 
 exports[`fixtures > ./fixtures/runtime/vue3/with-define-props-empty.vue 1`] = `
 "<script setup lang=\\"ts\\">
-import __MACROS_useVModel from '/vue-macros/define-model/use-vmodel';
+import __MACROS_useVModel from \\"/vue-macros/define-model/use-vmodel\\";
 defineEmits<{
     (evt: 'update:modelValue', value: string): void
 (evt: 'update:visible', value: boolean): void
@@ -647,7 +647,7 @@ visible: boolean
 
 exports[`fixtures > ./fixtures/runtime/vue3/with-define-props-ref.vue 1`] = `
 "<script setup lang=\\"ts\\">
-import __MACROS_useVModel from '/vue-macros/define-model/use-vmodel';
+import __MACROS_useVModel from \\"/vue-macros/define-model/use-vmodel\\";
 defineEmits<{
     (evt: 'update:modelValue', value: string): void
 (evt: 'update:visible', value: boolean): void