feat(reactivity-transform): support

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/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 (

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,
@@ -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,