feat(compiler-sfc): support module string names syntax

tc39/ecma262#2154

Author: sxzz

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)

packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap

@@ -991,6 +991,20 @@ return { ref }
 }"
 `;
 
+exports[`SFC compile <script setup> > imports > should support module string names syntax 1`] = `
+"import { \\"😏\\" as foo } from './foo'
+      
+export default {
+  setup(__props, { expose }) {
+  expose();
+
+        
+return { get foo() { return foo } }
+}
+
+}"
+`;
+
 exports[`SFC compile <script setup> > inlineTemplate mode > avoid unref() when necessary 1`] = `
 "import { unref as _unref, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, withCtx as _withCtx, createVNode as _createVNode, createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
 

packages/compiler-sfc/__tests__/compileScript.spec.ts

@@ -471,6 +471,21 @@ defineExpose({ foo: 123 })
         })
       })
     })
+
+    test('should support module string names syntax', () => {
+      const { content, bindings } = compile(`
+      <script>
+        import { "😏" as foo } from './foo'
+      </script>
+      <script setup>
+        import { "😏" as foo } from './foo'
+      </script>
+    `)
+      assertCode(content)
+      expect(bindings).toStrictEqual({
+        foo: BindingTypes.SETUP_MAYBE_REF
+      })
+    })
   })
 
   // in dev mode, declared bindings are returned as an object from setup()

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 {
@@ -374,7 +375,7 @@ export function compileScript(
   function registerUserImport(
     source: string,
     local: string,
-    imported: string | false,
+    imported: string,
     isType: boolean,
     isFromSetup: boolean,
     needTemplateUsageCheck: boolean
@@ -394,7 +395,7 @@ export function compileScript(
 
     userImports[local] = {
       isType,
-      imported: imported || 'default',
+      imported,
       local,
       source,
       isFromSetup,
@@ -996,10 +997,7 @@ export function compileScript(
       if (node.type === 'ImportDeclaration') {
         // record imports for dedupe
         for (const specifier of node.specifiers) {
-          const imported =
-            specifier.type === 'ImportSpecifier' &&
-            specifier.imported.type === 'Identifier' &&
-            specifier.imported.name
+          const imported = getImportedName(specifier)
           registerUserImport(
             node.source.value,
             specifier.local.name,
@@ -1041,13 +1039,7 @@ export function compileScript(
       for (let i = 0; i < node.specifiers.length; i++) {
         const specifier = node.specifiers[i]
         const local = specifier.local.name
-        let imported =
-          specifier.type === 'ImportSpecifier' &&
-          specifier.imported.type === 'Identifier' &&
-          specifier.imported.name
-        if (specifier.type === 'ImportNamespaceSpecifier') {
-          imported = '*'
-        }
+        const imported = getImportedName(specifier)
         const source = node.source.value
         const existing = userImports[local]
         if (

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'
 

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(

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,
@@ -198,11 +199,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,