diff --git a/packages/compiler-core/src/babelUtils.ts b/packages/compiler-core/src/babelUtils.ts index e773015f90f..52b53bd208c 100644 --- a/packages/compiler-core/src/babelUtils.ts +++ b/packages/compiler-core/src/babelUtils.ts @@ -6,7 +6,10 @@ import type { Function, ObjectProperty, BlockStatement, - Program + Program, + ImportDefaultSpecifier, + ImportNamespaceSpecifier, + ImportSpecifier } from '@babel/types' import { walk } from 'estree-walker' @@ -245,6 +248,17 @@ export const isStaticProperty = (node: Node): node is ObjectProperty => export const isStaticPropertyKey = (node: Node, parent: Node) => isStaticProperty(parent) && parent.key === node +export function getImportedName( + specifier: ImportSpecifier | ImportDefaultSpecifier | ImportNamespaceSpecifier +) { + if (specifier.type === 'ImportSpecifier') + return specifier.imported.type === 'Identifier' + ? specifier.imported.name + : specifier.imported.value + else if (specifier.type === 'ImportNamespaceSpecifier') return '*' + return 'default' +} + /** * Copied from https://github.com/babel/babel/blob/main/packages/babel-types/src/validators/isReferenced.ts * To avoid runtime dependency on @babel/types (which includes process references) diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts index 22b3f8f046e..757151177af 100644 --- a/packages/compiler-sfc/src/compileScript.ts +++ b/packages/compiler-sfc/src/compileScript.ts @@ -9,7 +9,8 @@ import { UNREF, SimpleExpressionNode, isFunctionType, - walkIdentifiers + walkIdentifiers, + getImportedName } from '@vue/compiler-dom' import { DEFAULT_FILENAME, SFCDescriptor, SFCScriptBlock } from './parse' import { @@ -378,20 +379,6 @@ export function compileScript( s.move(start, end, 0) } - function getImported( - specifier: - | ImportSpecifier - | ImportDefaultSpecifier - | ImportNamespaceSpecifier - ) { - if (specifier.type === 'ImportSpecifier') - return specifier.imported.type === 'Identifier' - ? specifier.imported.name - : specifier.imported.value - else if (specifier.type === 'ImportNamespaceSpecifier') return '*' - return 'default' - } - function registerUserImport( source: string, local: string, @@ -968,7 +955,7 @@ export function compileScript( if (node.type === 'ImportDeclaration') { // record imports for dedupe for (const specifier of node.specifiers) { - const imported = getImported(specifier) + const imported = getImportedName(specifier) registerUserImport( node.source.value, specifier.local.name, @@ -1010,7 +997,7 @@ export function compileScript( for (let i = 0; i < node.specifiers.length; i++) { const specifier = node.specifiers[i] const local = specifier.local.name - const imported = getImported(specifier) + const imported = getImportedName(specifier) const source = node.source.value const existing = userImports[local] if ( diff --git a/packages/reactivity-transform/__tests__/__snapshots__/reactivityTransform.spec.ts.snap b/packages/reactivity-transform/__tests__/__snapshots__/reactivityTransform.spec.ts.snap index 26490ac9d9d..fc6ffb03945 100644 --- a/packages/reactivity-transform/__tests__/__snapshots__/reactivityTransform.spec.ts.snap +++ b/packages/reactivity-transform/__tests__/__snapshots__/reactivityTransform.spec.ts.snap @@ -280,6 +280,15 @@ const props = defineProps<{msg: string; ids?: string[]}>() let ids = _ref([])" `; +exports[`should support module string names syntax 1`] = ` +" + + + let a = (ref(0)); + console.log((a)) + " +`; + exports[`using ref binding in property shorthand 1`] = ` "import { ref as _ref } from 'vue' diff --git a/packages/reactivity-transform/__tests__/reactivityTransform.spec.ts b/packages/reactivity-transform/__tests__/reactivityTransform.spec.ts index 5255be6ba8b..344f0b4a77d 100644 --- a/packages/reactivity-transform/__tests__/reactivityTransform.spec.ts +++ b/packages/reactivity-transform/__tests__/reactivityTransform.spec.ts @@ -460,6 +460,22 @@ test('macro import alias and removal', () => { assertCode(code) }) +test('should support module string names syntax', () => { + const { code } = transform( + ` + import { "$" as fromRefs, "$$" as escapeRefs } from 'vue/macros' + + let a = fromRefs(ref(0)); + console.log(escapeRefs(a)) + ` + ) + // should remove imports + expect(code).not.toMatch(`from 'vue/macros'`) + expect(code).toMatch(`let a = (ref(0))`) + expect(code).toMatch(`console.log((a))`) + assertCode(code) +}) + // #6838 test('should not overwrite importing', () => { const { code } = transform( diff --git a/packages/reactivity-transform/src/reactivityTransform.ts b/packages/reactivity-transform/src/reactivityTransform.ts index f1d5d8916fd..c7689398e38 100644 --- a/packages/reactivity-transform/src/reactivityTransform.ts +++ b/packages/reactivity-transform/src/reactivityTransform.ts @@ -18,6 +18,7 @@ import MagicString, { SourceMap } from 'magic-string' import { walk } from 'estree-walker' import { extractIdentifiers, + getImportedName, isFunctionType, isInDestructureAssignment, isReferencedIdentifier, @@ -199,11 +200,7 @@ export function transformAST( for (const specifier of node.specifiers) { const local = specifier.local.name - const imported = - (specifier.type === 'ImportSpecifier' && - specifier.imported.type === 'Identifier' && - specifier.imported.name) || - 'default' + const imported = getImportedName(specifier) userImports[local] = { source, local,