feat(experimental): shouldTransform for ref-transform

vuejs · Aug 23, 2021 · e565831 · e565831
1 parent 0c2ea1c
commit e565831
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 20 deletions.
diff --git a/packages/compiler-core/src/babelUtils.ts b/packages/compiler-core/src/babelUtils.ts
@@ -142,24 +142,9 @@ export function walkFunctionParams(
   onIdent: (id: Identifier) => void
 ) {
   for (const p of node.params) {
-    ;(walk as any)(p, {
-      enter(child: Node, parent: Node) {
-        if (
-          child.type === 'Identifier' &&
-          // do not record as scope variable if is a destructured key
-          !isStaticPropertyKey(child, parent) &&
-          // do not record if this is a default value
-          // assignment of a destructured variable
-          !(
-            parent &&
-            parent.type === 'AssignmentPattern' &&
-            parent.right === child
-          )
-        ) {
-          onIdent(child)
-        }
-      }
-    })
+    for (const id of extractIdentifiers(p)) {
+      onIdent(id)
+    }
   }
 }
 

diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
@@ -51,7 +51,10 @@ import { compileTemplate, SFCTemplateCompileOptions } from './compileTemplate'
 import { warnExperimental, warnOnce } from './warn'
 import { rewriteDefault } from './rewriteDefault'
 import { createCache } from './cache'
-import { transformAST as transformWithRefSugar } from '@vue/ref-transform'
+import {
+  shouldTransform,
+  transformAST as transformWithRefSugar
+} from '@vue/ref-transform'
 
 // Special compiler macros
 const DEFINE_PROPS = 'defineProps'
@@ -855,7 +858,7 @@ export function compileScript(
   }
 
   // 3. Apply ref sugar transform
-  if (enableRefSugar) {
+  if (enableRefSugar && shouldTransform(source)) {
     warnExperimental(
       `ref sugar`,
       `https://github.com/vuejs/rfcs/discussions/369`

diff --git a/packages/ref-transform/README.md b/packages/ref-transform/README.md
@@ -37,6 +37,17 @@ A few commonly used APIs have shorthands (which also removes the need to import
 
 This package is the lower-level transform that can be used standalone. Higher-level tooling (e.g. `@vitejs/plugin-vue` and `vue-loader`) will provide integration via options.
 
+### `shouldTransform`
+
+Can be used to do a cheap check to determine whether full transform should be performed.
+
+```js
+import { shouldTransform } from '@vue/ref-transform'
+
+shouldTransform(`let a = ref(0)`) // false
+shouldTransform(`let a = $ref(0)`) // true
+```
+
 ### `transform`
 
 ```js
@@ -66,6 +77,8 @@ interface RefTransformOptions {
 
 ### `transformAST`
 
+Transform with an existing Babel AST + MagicString instance. This is used internally by `@vue/compiler-sfc` to avoid double parse/transform cost.
+
 ```js
 import { transformAST } from '@vue/ref-transform'
 import { parse } from '@babel/parser'

diff --git a/packages/ref-transform/src/index.ts b/packages/ref-transform/src/index.ts
@@ -24,6 +24,11 @@ import { babelParserDefaultPlugins } from '@vue/shared'
 const TO_VAR_SYMBOL = '$'
 const TO_REF_SYMBOL = '$$'
 const shorthands = ['ref', 'computed', 'shallowRef']
+const transformCheckRE = /[^\w]\$(?:\$|ref|computed|shallowRef)?\(/
+
+export function shouldTransform(src: string): boolean {
+  return transformCheckRE.test(src)
+}
 
 export interface ReactiveDeclarator {
   node: VariableDeclarator