perf!: use estree-walker (#425)

Author: sxzz

README.md

@@ -339,7 +339,7 @@ Components({
   // auto import for directives
   // default: `true` for Vue 3, `false` for Vue 2
   // Babel is needed to do the transformation for Vue 2, it's disabled by default for performance concerns.
-  // To install Babel, run: `npm install -D @babel/parser @babel/traverse`
+  // To install Babel, run: `npm install -D @babel/parser`
   directives: true,
 
   // Transform path before resolving

package.json

@@ -76,15 +76,11 @@
   },
   "peerDependencies": {
     "@babel/parser": "^7.15.8",
-    "@babel/traverse": "^7.15.4",
     "vue": "2 || 3"
   },
   "peerDependenciesMeta": {
     "@babel/parser": {
       "optional": true
-    },
-    "@babel/traverse": {
-      "optional": true
     }
   },
   "dependencies": {
@@ -102,7 +98,6 @@
   "devDependencies": {
     "@antfu/eslint-config": "^0.25.1",
     "@babel/parser": "^7.18.5",
-    "@babel/traverse": "^7.18.5",
     "@babel/types": "^7.18.4",
     "@types/debug": "^4.1.7",
     "@types/minimatch": "^3.0.5",
@@ -114,6 +109,7 @@
     "element-plus": "^2.2.5",
     "eslint": "^8.17.0",
     "esno": "^0.16.3",
+    "estree-walker": "^3.0.1",
     "pathe": "^0.3.0",
     "rollup": "^2.75.6",
     "tsup": "^6.1.2",

pnpm-lock.yaml

@@ -1,5 +1,5 @@
 import type {
-  BlockStatement, CallExpression, File, FunctionExpression, ObjectProperty, VariableDeclaration,
+  BlockStatement, CallExpression, File, FunctionExpression, Node, ObjectProperty, VariableDeclaration,
 } from '@babel/types'
 import type MagicString from 'magic-string'
 import type { ParseResult } from '@babel/parser'
@@ -17,33 +17,35 @@ const getRenderFnStart = (ast: ParseResult<File>): number => {
       && node.declarations[0].id.type === 'Identifier'
       && node.declarations[0].id.name === 'render',
   )
-  const start = (((renderFn?.declarations[0].init as FunctionExpression).body) as BlockStatement).start
-  if (start === null)
+  const start = (((renderFn?.declarations[0].init as FunctionExpression)?.body) as BlockStatement)?.start
+  if (start === null || start === undefined)
     throw new Error('[unplugin-vue-components:directive] Cannot find render function position.')
   return start + 1
 }
 
 export default async function resolveVue2(code: string, s: MagicString): Promise<ResolveResult[]> {
-  if (!isPackageExists('@babel/parser') || !isPackageExists('@babel/traverse'))
-    throw new Error('[unplugin-vue-components:directive] To use Vue 2 directive you will need to install Babel first: "npm install -D @babel/parser @babel/traverse"')
+  if (!isPackageExists('@babel/parser'))
+    throw new Error('[unplugin-vue-components:directive] To use Vue 2 directive you will need to install Babel first: "npm install -D @babel/parser"')
 
-  const { parse } = await importModule('@babel/parser') as typeof import('@babel/parser')
+  const { parse } = await importModule<typeof import('@babel/parser')>('@babel/parser')
   const ast = parse(code, {
     sourceType: 'module',
   })
+
   const nodes: CallExpression[] = []
-  const { default: traverse } = await importModule('@babel/traverse') as typeof import('@babel/traverse')
-  traverse(ast, {
-    CallExpression(path) {
-      nodes.push(path.node)
+  const { walk } = await import('estree-walker')
+  walk(ast.program as any, {
+    enter(node: any) {
+      if ((node as Node).type === 'CallExpression')
+        nodes.push(node)
     },
   })
 
   const results: ResolveResult[] = []
   for (const node of nodes) {
     const { callee, arguments: args } = node
     // _c(_, {})
-    if (callee.type !== 'Identifier' || callee.name !== '_c' || args[1] == null || args[1].type !== 'ObjectExpression')
+    if (callee.type !== 'Identifier' || callee.name !== '_c' || args[1]?.type !== 'ObjectExpression')
       continue
 
     // { directives: [] }

src/core/transforms/directive/vue2.ts

@@ -162,7 +162,7 @@ export interface Options {
    * default: `true` for Vue 3, `false` for Vue 2
    *
    * Babel is needed to do the transformation for Vue 2, it's disabled by default for performance concerns.
-   * To install Babel, run: `npm install -D @babel/parser @babel/traverse`
+   * To install Babel, run: `npm install -D @babel/parser`
    * @default undefined
    */
   directives?: boolean