From 382b122fcd8e47dea6ec07b18e13ca54ba069b67 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90?= Date: Sat, 18 Jun 2022 02:32:19 +0800 Subject: [PATCH 1/2] perf!: use estree-walker --- README.md | 2 +- package.json | 6 +++--- pnpm-lock.yaml | 10 +++++----- src/core/transforms/directive/vue2.ts | 24 +++++++++++++----------- src/types.ts | 2 +- 5 files changed, 23 insertions(+), 21 deletions(-) diff --git a/README.md b/README.md index 1aed10b8..dce81314 100644 --- a/README.md +++ b/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 estree-walker` directives: true, // Transform path before resolving diff --git a/package.json b/package.json index 363d978c..58864e14 100644 --- a/package.json +++ b/package.json @@ -76,14 +76,14 @@ }, "peerDependencies": { "@babel/parser": "^7.15.8", - "@babel/traverse": "^7.15.4", + "estree-walker": "^2.0.2", "vue": "2 || 3" }, "peerDependenciesMeta": { "@babel/parser": { "optional": true }, - "@babel/traverse": { + "estree-walker": { "optional": true } }, @@ -102,7 +102,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 +113,7 @@ "element-plus": "^2.2.5", "eslint": "^8.17.0", "esno": "^0.16.3", + "estree-walker": "^2.0.2", "pathe": "^0.3.0", "rollup": "^2.75.6", "tsup": "^6.1.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a80329c4..497f8c31 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -7,7 +7,6 @@ importers: '@antfu/eslint-config': ^0.25.1 '@antfu/utils': ^0.5.2 '@babel/parser': ^7.18.5 - '@babel/traverse': ^7.18.5 '@babel/types': ^7.18.4 '@rollup/pluginutils': ^4.2.1 '@types/debug': ^4.1.7 @@ -22,6 +21,7 @@ importers: element-plus: ^2.2.5 eslint: ^8.17.0 esno: ^0.16.3 + estree-walker: ^2.0.2 fast-glob: ^3.2.11 local-pkg: ^0.4.1 magic-string: ^0.26.2 @@ -49,7 +49,6 @@ importers: devDependencies: '@antfu/eslint-config': 0.25.1_ud6rd4xtew5bv4yhvkvu24pzm4 '@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 @@ -61,6 +60,7 @@ importers: element-plus: 2.2.5_vue@3.2.37 eslint: 8.17.0 esno: 0.16.3 + estree-walker: 2.0.2 pathe: 0.3.0 rollup: 2.75.6 tsup: 6.1.2_typescript@4.7.3 @@ -2763,7 +2763,7 @@ packages: dependencies: '@babel/core': 7.18.5 '@vue/babel-preset-app': 5.0.4_vue@3.2.37 - '@vue/cli-service': 5.0.4 + '@vue/cli-service': 5.0.4_@babel+core@7.18.5 '@vue/cli-shared-utils': 5.0.4 babel-loader: 8.2.3_o7sdmn6una4l5qvkwlgctgywly thread-loader: 3.0.4_webpack@5.70.0 @@ -2783,7 +2783,7 @@ packages: peerDependencies: '@vue/cli-service': ^3.0.0 || ^4.0.0 || ^5.0.0-0 dependencies: - '@vue/cli-service': 5.0.4 + '@vue/cli-service': 5.0.4_@babel+core@7.18.5 '@vue/cli-shared-utils': 5.0.4 transitivePeerDependencies: - encoding @@ -2831,7 +2831,7 @@ packages: peerDependencies: '@vue/cli-service': ^3.0.0 || ^4.0.0 || ^5.0.0-0 dependencies: - '@vue/cli-service': 5.0.4 + '@vue/cli-service': 5.0.4_@babel+core@7.18.5 dev: true /@vue/cli-service/5.0.4: diff --git a/src/core/transforms/directive/vue2.ts b/src/core/transforms/directive/vue2.ts index e2ab0403..76a34909 100644 --- a/src/core/transforms/directive/vue2.ts +++ b/src/core/transforms/directive/vue2.ts @@ -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,25 +17,27 @@ const getRenderFnStart = (ast: ParseResult): 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 { - 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') || !isPackageExists('estree-walker')) + throw new Error('[unplugin-vue-components:directive] To use Vue 2 directive you will need to install Babel first: "npm install -D @babel/parser estree-walker"') - const { parse } = await importModule('@babel/parser') as typeof import('@babel/parser') + const { parse } = await importModule('@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 importModule('estree-walker') + walk(ast.program as any, { + enter(node: any) { + if ((node as Node).type === 'CallExpression') + nodes.push(node) }, }) @@ -43,7 +45,7 @@ export default async function resolveVue2(code: string, s: MagicString): Promise 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: [] } diff --git a/src/types.ts b/src/types.ts index ff68ab52..f92d4e06 100644 --- a/src/types.ts +++ b/src/types.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 estree-walker` * @default undefined */ directives?: boolean From 704c321fb3800f61bb397fe13a494ac89c4f678a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90?= Date: Sat, 18 Jun 2022 13:51:12 +0800 Subject: [PATCH 2/2] refactor: move to dep --- README.md | 2 +- package.json | 6 +----- pnpm-lock.yaml | 8 ++++++-- src/core/transforms/directive/vue2.ts | 6 +++--- src/types.ts | 2 +- 5 files changed, 12 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index dce81314..1e017831 100644 --- a/README.md +++ b/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 estree-walker` + // To install Babel, run: `npm install -D @babel/parser` directives: true, // Transform path before resolving diff --git a/package.json b/package.json index 58864e14..f3b30b33 100644 --- a/package.json +++ b/package.json @@ -76,15 +76,11 @@ }, "peerDependencies": { "@babel/parser": "^7.15.8", - "estree-walker": "^2.0.2", "vue": "2 || 3" }, "peerDependenciesMeta": { "@babel/parser": { "optional": true - }, - "estree-walker": { - "optional": true } }, "dependencies": { @@ -113,7 +109,7 @@ "element-plus": "^2.2.5", "eslint": "^8.17.0", "esno": "^0.16.3", - "estree-walker": "^2.0.2", + "estree-walker": "^3.0.1", "pathe": "^0.3.0", "rollup": "^2.75.6", "tsup": "^6.1.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 497f8c31..2a379763 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -21,7 +21,7 @@ importers: element-plus: ^2.2.5 eslint: ^8.17.0 esno: ^0.16.3 - estree-walker: ^2.0.2 + estree-walker: ^3.0.1 fast-glob: ^3.2.11 local-pkg: ^0.4.1 magic-string: ^0.26.2 @@ -60,7 +60,7 @@ importers: element-plus: 2.2.5_vue@3.2.37 eslint: 8.17.0 esno: 0.16.3 - estree-walker: 2.0.2 + estree-walker: 3.0.1 pathe: 0.3.0 rollup: 2.75.6 tsup: 6.1.2_typescript@4.7.3 @@ -6323,6 +6323,10 @@ packages: /estree-walker/2.0.2: resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==} + /estree-walker/3.0.1: + resolution: {integrity: sha512-woY0RUD87WzMBUiZLx8NsYr23N5BKsOMZHhu2hoNRVh6NXGfoiT1KOL8G3UHlJAnEDGmfa5ubNA/AacfG+Kb0g==} + dev: true + /esutils/2.0.3: resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==} engines: {node: '>=0.10.0'} diff --git a/src/core/transforms/directive/vue2.ts b/src/core/transforms/directive/vue2.ts index 76a34909..98fbeaad 100644 --- a/src/core/transforms/directive/vue2.ts +++ b/src/core/transforms/directive/vue2.ts @@ -24,8 +24,8 @@ const getRenderFnStart = (ast: ParseResult): number => { } export default async function resolveVue2(code: string, s: MagicString): Promise { - if (!isPackageExists('@babel/parser') || !isPackageExists('estree-walker')) - throw new Error('[unplugin-vue-components:directive] To use Vue 2 directive you will need to install Babel first: "npm install -D @babel/parser estree-walker"') + 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') const ast = parse(code, { @@ -33,7 +33,7 @@ export default async function resolveVue2(code: string, s: MagicString): Promise }) const nodes: CallExpression[] = [] - const { walk } = await importModule('estree-walker') + const { walk } = await import('estree-walker') walk(ast.program as any, { enter(node: any) { if ((node as Node).type === 'CallExpression') diff --git a/src/types.ts b/src/types.ts index f92d4e06..476688a0 100644 --- a/src/types.ts +++ b/src/types.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 estree-walker` + * To install Babel, run: `npm install -D @babel/parser` * @default undefined */ directives?: boolean