From 4ddcbe7ad9156aadabf67938802f6b42cdca9990 Mon Sep 17 00:00:00 2001 From: hanlee Date: Tue, 26 Oct 2021 21:38:46 +0900 Subject: [PATCH 1/4] test: add missing deps for test --- package.json | 1 + pnpm-lock.yaml | 94 ++++++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 92 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 1f670cfa..f5261072 100644 --- a/package.json +++ b/package.json @@ -87,6 +87,7 @@ "@typescript-eslint/eslint-plugin": "^4.31.2", "bumpp": "^7.1.1", "compare-versions": "^3.6.0", + "element-plus": "^1.1.0-beta.24", "eslint": "^7.32.0", "esno": "^0.9.1", "jest": "^27.2.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 66984b5b..3e55eff4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -20,6 +20,7 @@ importers: chokidar: ^3.5.2 compare-versions: ^3.6.0 debug: ^4.3.2 + element-plus: ^1.1.0-beta.24 eslint: ^7.32.0 esno: ^0.9.1 fast-glob: ^3.2.7 @@ -58,6 +59,7 @@ importers: '@typescript-eslint/eslint-plugin': 4.31.2_eslint@7.32.0+typescript@4.4.3 bumpp: 7.1.1 compare-versions: 3.6.0 + element-plus: 1.1.0-beta.24 eslint: 7.32.0 esno: 0.9.1 jest: 27.2.1 @@ -1701,6 +1703,10 @@ packages: resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==} dev: true + /@element-plus/icons/0.0.11: + resolution: {integrity: sha512-iKQXSxXu131Ai+I9Ymtcof9WId7kaXvB1+WRfAfpQCW7UiAMYgdNDqb/u0hgTo2Yq3MwC4MWJnNuTBEpG8r7+A==} + dev: true + /@eslint/eslintrc/0.4.3: resolution: {integrity: sha512-J6KFFz5QCYUJq3pf0mjEcCJVERbzv71PUIDczuh9JkwGEzced6CO5ADLHB1rbf/+oPBtoPfMYNOpGDzCANlbXw==} engines: {node: ^10.12.0 || >=12.0.0} @@ -2047,6 +2053,10 @@ packages: resolution: {integrity: sha512-0p1rCgM3LLbAdwBnc7gqgnvjHg9KpbhcSphergHShlkWz8EdPawoMJ3/VbezI0mGC5eKCDzMaPgF9Yca6cKvrg==} dev: true + /@popperjs/core/2.10.2: + resolution: {integrity: sha512-IXf3XA7+XyN7CP9gGh/XB0UxVMlvARGEgGXLubFICsUMGz6Q+DU+i4gGlpOxTjKvXjkJDJC8YdqdKkDj9qZHEQ==} + dev: true + /@popperjs/core/2.9.2: resolution: {integrity: sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q==} dev: false @@ -3093,6 +3103,35 @@ packages: resolution: {integrity: sha512-Iu8Tbg3f+emIIMmI2ycSI8QcEuAUgPTgHwesDU1eKMLE4YC/c/sFbGc70QgMq31ijRftV0R7vCm9co6rldCeOA==} dev: true + /@vueuse/core/6.1.0: + resolution: {integrity: sha512-6KienU5QOWKuDqvHytep14274IGKyLlACzXjifOrgDQMkqvWZIUnDhpckT/1+O8n8DN59d5wzzICZI/2sfGCyg==} + peerDependencies: + '@vue/composition-api': ^1.1.0 + vue: ^2.6.0 || ^3.2.0 + peerDependenciesMeta: + '@vue/composition-api': + optional: true + vue: + optional: true + dependencies: + '@vueuse/shared': 6.1.0 + vue-demi: 0.11.4 + dev: true + + /@vueuse/shared/6.1.0: + resolution: {integrity: sha512-teW0TUQryGnEprHeOI6oH8NPVJBirknxksEiNCtdEjIi8W7JSTg8JPO+e1XlGI6ly24NDlDXUDYaHJayiaXjuw==} + peerDependencies: + '@vue/composition-api': ^1.1.0 + vue: ^2.6.0 || ^3.2.0 + peerDependenciesMeta: + '@vue/composition-api': + optional: true + vue: + optional: true + dependencies: + vue-demi: 0.11.4 + dev: true + /@webassemblyjs/ast/1.9.0: resolution: {integrity: sha512-C6wW5L+b7ogSDVqymbkkvuW9kruN//YisMED04xzeBBqjHa2FYnmvOlS6Xj68xWQRgWvI9cIglsjFowH/RJyEA==} dependencies: @@ -3558,6 +3597,10 @@ packages: resolution: {integrity: sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==} dev: true + /async-validator/4.0.3: + resolution: {integrity: sha512-LVoIbJNHPKsO7FMLamo88uxdrvayGkF3vLTMTeiN3CqAbP3qSafLRc6yx3Sq9lHkiEOLNpoA2jwwnfGDdu1SMQ==} + dev: true + /async/2.6.3: resolution: {integrity: sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==} dependencies: @@ -4418,7 +4461,6 @@ packages: resolution: {integrity: sha512-qC0E2Dxgou1IHhvJSLwGDSTvokbRovU5zZFuDY6oY8Y2lF3nGt5Ad8YZK7GMtqzY84Wu7pXTPeHQeHcXSXsRhw==} dependencies: semver: 7.3.5 - dev: false /bumpp/7.1.1: resolution: {integrity: sha512-pAGjraw9T4I4dnkiQHrKUVQb55dOM5Nj72SVtVlkjFjWjFtg0aSgipQuxDWZ0cqm8WoqtaiBPk+7jHfnZxr7lA==} @@ -5341,6 +5383,10 @@ packages: whatwg-url: 8.5.0 dev: true + /dayjs/1.10.7: + resolution: {integrity: sha512-P6twpd70BcPK34K26uJ1KT3wlhpuOAPoMwJzpsIWUxHZ7wpmbdZL/hQqBDfz7hGurYSa5PhzdhDHtt319hL3ig==} + dev: true + /de-indent/1.0.2: resolution: {integrity: sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0=} dev: false @@ -5702,6 +5748,24 @@ packages: resolution: {integrity: sha512-k7jG5oYYHxF4jx6PcqwHX3JVME/OjzolqOZiIogi9xtsfsmTjTdie4x88OakYFPEa8euciTgCCzvVNwvmjHb1Q==} dev: true + /element-plus/1.1.0-beta.24: + resolution: {integrity: sha512-dmo61e/D6mwJVacMhxOMSPb5sZPt/FPsuQQfsOs1kJWkhGDmTlny/sZvgIQr1z0zh3pjlJadGAlNS+0nySPMmw==} + peerDependencies: + vue: ^3.2.0 + dependencies: + '@element-plus/icons': 0.0.11 + '@popperjs/core': 2.10.2 + '@vueuse/core': 6.1.0 + async-validator: 4.0.3 + dayjs: 1.10.7 + lodash: 4.17.21 + memoize-one: 5.2.1 + normalize-wheel-es: 1.1.0 + resize-observer-polyfill: 1.5.1 + transitivePeerDependencies: + - '@vue/composition-api' + dev: true + /elliptic/6.5.4: resolution: {integrity: sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==} dependencies: @@ -6777,6 +6841,7 @@ packages: resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==} engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} os: [darwin] + requiresBuild: true optional: true /function-bind/1.1.1: @@ -7428,7 +7493,6 @@ packages: resolution: {integrity: sha512-JiTuIvVyPaUg11eTrNDx5bgQ/yMKMZffc7YSjvQeSMXy58DO2SQ8BtAf3xteZvmzvjYh14wnqNjL8XVeDy2o9A==} dependencies: builtins: 4.0.0 - dev: false /imurmurhash/0.1.4: resolution: {integrity: sha1-khi5srkoojixPcT7a21XbyMUU+o=} @@ -8902,6 +8966,10 @@ packages: dev: true optional: true + /memoize-one/5.2.1: + resolution: {integrity: sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==} + dev: true + /memory-fs/0.4.1: resolution: {integrity: sha1-OpoguEYlI+RHz7x+i7gO1me/xVI=} dependencies: @@ -9084,7 +9152,6 @@ packages: resolution: {integrity: sha512-11El6hDlHxGOinGkdGBkflb7ri9vIFDYMq8xBwuQyDZA43cWlKOpPdBtxQmmNG/P58SK1Otw2I4VMlAY93LJ+Q==} dependencies: import-meta-resolve: 1.1.1 - dev: false /move-concurrently/1.0.1: resolution: {integrity: sha1-viwAX9oy4LKa8fBdfEszIUxwH5I=} @@ -9287,6 +9354,10 @@ packages: engines: {node: '>=6'} dev: true + /normalize-wheel-es/1.1.0: + resolution: {integrity: sha512-gkcE5xzp8WkSGgu2HItXePGyh3qDOetgPYg0RnjclOIaWTCMB75NTrk0t6KVlbm6ShSikV3ykBFZMiR9GDkvkA==} + dev: true + /npm-run-path/2.0.2: resolution: {integrity: sha1-NakjLfo11wZ7TLLd8jV7GHFTbF8=} engines: {node: '>=4'} @@ -10711,6 +10782,10 @@ packages: resolution: {integrity: sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=} dev: true + /resize-observer-polyfill/1.5.1: + resolution: {integrity: sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==} + dev: true + /resolve-cwd/2.0.0: resolution: {integrity: sha1-AKn3OHVW4nA46uIyyqNypqWbZlo=} engines: {node: '>=4'} @@ -12547,6 +12622,19 @@ packages: resolution: {integrity: sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==} dev: true + /vue-demi/0.11.4: + resolution: {integrity: sha512-/3xFwzSykLW2HiiLie43a+FFgNOcokbBJ+fzvFXd0r2T8MYohqvphUyDQ8lbAwzQ3Dlcrb1c9ykifGkhSIAk6A==} + engines: {node: '>=12'} + hasBin: true + requiresBuild: true + peerDependencies: + '@vue/composition-api': ^1.0.0-rc.1 + vue: ^3.0.0-0 || ^2.6.0 + peerDependenciesMeta: + '@vue/composition-api': + optional: true + dev: true + /vue-eslint-parser/7.11.0_eslint@7.32.0: resolution: {integrity: sha512-qh3VhDLeh773wjgNTl7ss0VejY9bMMa0GoDG2fQVyDzRFdiU3L7fw74tWZDHNQXdZqxO3EveQroa9ct39D2nqg==} engines: {node: '>=8.10'} From 09ac2f362f40cb5227ffbbf6b9b63a68ba1beff8 Mon Sep 17 00:00:00 2001 From: hanlee Date: Thu, 28 Oct 2021 03:57:57 +0900 Subject: [PATCH 2/4] feat: use dynamic import babel as peer deps --- README.md | 1 + package.json | 10 ++++++++++ src/core/transforms/directive/index.ts | 8 ++++---- src/core/transforms/directive/vue2.ts | 11 ++++++++--- src/core/transforms/directive/vue3.ts | 2 +- 5 files changed, 24 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index ad94c729..20bdb2ef 100644 --- a/README.md +++ b/README.md @@ -288,6 +288,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` directives: true, // filters for transforming targets diff --git a/package.json b/package.json index f5261072..5c999c0c 100644 --- a/package.json +++ b/package.json @@ -60,8 +60,18 @@ "test:update": "jest --u" }, "peerDependencies": { + "@babel/parser": "^7.15.8", + "@babel/traverse": "^7.15.4", "vue": "2 || 3" }, + "peerDependenciesMeta": { + "@babel/parser": { + "optional": true + }, + "@babel/traverse": { + "optional": true + } + }, "dependencies": { "@antfu/utils": "^0.3.0", "@rollup/pluginutils": "^4.1.1", diff --git a/src/core/transforms/directive/index.ts b/src/core/transforms/directive/index.ts index 0009ab62..46de2e17 100644 --- a/src/core/transforms/directive/index.ts +++ b/src/core/transforms/directive/index.ts @@ -3,15 +3,15 @@ import type MagicString from 'magic-string' import { pascalCase, stringifyComponentImport } from '../../utils' import type { Context } from '../../context' import { SupportedTransformer } from '../../..' +import vue2Resolver from './vue2' +import vue3Resolver from './vue3' const debug = Debug('unplugin-vue-components:transform:directive') -export default async(code: string, transformer: SupportedTransformer, s: MagicString, ctx: Context, sfcPath: string) => { +export default async function transformDirective(code: string, transformer: SupportedTransformer, s: MagicString, ctx: Context, sfcPath: string) { let no = 0 - const { resolve } = await (transformer === 'vue2' ? import('./vue2') : import('./vue3')) - - const results = resolve(code, s) + const results = await (transformer === 'vue2' ? vue2Resolver(code, s) : vue3Resolver(code, s)) for (const { rawName, replace } of results) { debug(`| ${rawName}`) const name = pascalCase(rawName) diff --git a/src/core/transforms/directive/vue2.ts b/src/core/transforms/directive/vue2.ts index 8f4ff894..75566c1f 100644 --- a/src/core/transforms/directive/vue2.ts +++ b/src/core/transforms/directive/vue2.ts @@ -2,8 +2,8 @@ import type { CallExpression, ObjectProperty, File, VariableDeclaration, FunctionExpression, BlockStatement, } from '@babel/types' import type MagicString from 'magic-string' -import { parse, ParseResult } from '@babel/parser' -import traverse from '@babel/traverse' +import type { ParseResult } from '@babel/parser' +import { importModule, isPackageExists } from 'local-pkg' import { ResolveResult } from '../../transformer' /** @@ -23,11 +23,16 @@ const getRenderFnStart = (ast: ParseResult): number => { return start + 1 } -export const resolve = (code: string, s: MagicString): ResolveResult[] => { +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"') + + const { parse } = await importModule('@babel/parser') as typeof import('@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) diff --git a/src/core/transforms/directive/vue3.ts b/src/core/transforms/directive/vue3.ts index 9a62b09c..810bc118 100644 --- a/src/core/transforms/directive/vue3.ts +++ b/src/core/transforms/directive/vue3.ts @@ -1,7 +1,7 @@ import type MagicString from 'magic-string' import { ResolveResult } from '../../transformer' -export const resolve = (code: string, s: MagicString): ResolveResult[] => { +export default function resolveVue3(code: string, s: MagicString): ResolveResult[] { const results: ResolveResult[] = [] for (const match of code.matchAll(/_resolveDirective\("(.+?)"\)/g)) { From 35504f00b3a3eb617dc26aa4441976e0b9f04654 Mon Sep 17 00:00:00 2001 From: hanlee Date: Thu, 28 Oct 2021 03:58:13 +0900 Subject: [PATCH 3/4] refactor: use named function --- src/core/transformer.ts | 3 ++- src/core/transforms/component.ts | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/core/transformer.ts b/src/core/transformer.ts index feecef92..8d8a1e19 100644 --- a/src/core/transformer.ts +++ b/src/core/transformer.ts @@ -15,7 +15,7 @@ export interface ResolveResult { replace: (resolved: string) => void } -export default (ctx: Context, transformer: SupportedTransformer): Transformer => { +export default function tranformer(ctx: Context, transformer: SupportedTransformer): Transformer { return async(code, id, path) => { ctx.searchGlob() @@ -25,6 +25,7 @@ export default (ctx: Context, transformer: SupportedTransformer): Transformer => const s = new MagicString(code) await transformComponent(code, transformer, s, ctx, sfcPath) + if (ctx.options.directives) await transformDirectives(code, transformer, s, ctx, sfcPath) diff --git a/src/core/transforms/component.ts b/src/core/transforms/component.ts index d01388b5..dc365080 100644 --- a/src/core/transforms/component.ts +++ b/src/core/transforms/component.ts @@ -44,7 +44,7 @@ const resolveVue3 = (code: string, s: MagicString) => { return results } -export default async(code: string, transformer: SupportedTransformer, s: MagicString, ctx: Context, sfcPath: string) => { +export default async function transformComponent(code: string, transformer: SupportedTransformer, s: MagicString, ctx: Context, sfcPath: string) { let no = 0 const results = transformer === 'vue2' ? resolveVue2(code, s) : resolveVue3(code, s) From aa3450d443c46ae18c46291016cdae801d8a6fef Mon Sep 17 00:00:00 2001 From: hanlee Date: Thu, 28 Oct 2021 04:01:33 +0900 Subject: [PATCH 4/4] fix: set directives default to false --- README.md | 4 ++-- src/core/options.ts | 6 ++---- src/types.ts | 4 +--- 3 files changed, 5 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 20bdb2ef..0cc94b65 100644 --- a/README.md +++ b/README.md @@ -286,10 +286,10 @@ Components({ globalNamespaces: [], // auto import for directives - // default: `true` for Vue 3, `false` for Vue 2 + // default: false // 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` - directives: true, + directives: false, // filters for transforming targets include: [/\.vue$/, /\.vue\?vue/], diff --git a/src/core/options.ts b/src/core/options.ts index d89a2776..d27a2051 100644 --- a/src/core/options.ts +++ b/src/core/options.ts @@ -4,7 +4,7 @@ import { isPackageExists } from 'local-pkg' import { ResolvedOptions, Options } from '../types' import { LibraryResolver } from './helpers/libraryResolver' -export const defaultOptions: Omit, 'include' | 'exclude' | 'transformer' | 'globs' |'directives'> = { +export const defaultOptions: Omit, 'include' | 'exclude' | 'transformer' | 'globs'> = { dirs: 'src/components', extensions: 'vue', deep: true, @@ -19,6 +19,7 @@ export const defaultOptions: Omit, 'include' | 'exclude' | 'tr importPathTransform: v => v, allowOverrides: false, + directives: false, } export function resolveOptions(options: Options, root: string): ResolvedOptions { @@ -58,9 +59,6 @@ export function resolveOptions(options: Options, root: string): ResolvedOptions ) resolved.root = root resolved.transformer = options.transformer || getVueVersion() || 'vue3' - resolved.directives = (typeof options.directives === 'boolean') - ? options.directives - : getVueVersion() === 'vue3' return resolved } diff --git a/src/types.ts b/src/types.ts index d6ff3fc0..a448152b 100644 --- a/src/types.ts +++ b/src/types.ts @@ -127,10 +127,8 @@ export interface Options { /** * 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. - * @default undefined + * @default false */ directives?: boolean }