fix: default to only resolve components

README.md

@@ -286,9 +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.
-  directives: true,
+  // To install Babel, run: `npm install -D @babel/parser @babel/traverse`
+  directives: false,
 
   // filters for transforming targets
   include: [/\.vue$/, /\.vue\?vue/],

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",
@@ -87,6 +97,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",

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<Required<Options>, 'include' | 'exclude' | 'transformer' | 'globs' |'directives'> = {
+export const defaultOptions: Omit<Required<Options>, 'include' | 'exclude' | 'transformer' | 'globs'> = {
   dirs: 'src/components',
   extensions: 'vue',
   deep: true,
@@ -19,6 +19,7 @@ export const defaultOptions: Omit<Required<Options>, '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
 }

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)
 

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)

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)

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<File>): number => {
   return start + 1
 }
 
-export const resolve = (code: string, s: MagicString): ResolveResult[] => {
+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"')
+
+  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)

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)) {

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
 }