refactor(directive): code-spiltting

Author: sxzz

package.json

@@ -50,10 +50,10 @@
   "module": "dist/index.mjs",
   "types": "index.d.ts",
   "scripts": {
-    "build": "rimraf dist && tsup src/*.ts --format cjs,esm --dts --splitting && esno scripts/postbuild.ts",
-    "dev": "tsup src/*.ts --format cjs,esm --watch src",
-    "example:build": "npm -C examples/vue3 run build",
-    "example:dev": "npm -C examples/vue3 run dev",
+    "build": "tsup src/*.ts && esno scripts/postbuild.ts",
+    "dev": "tsup src/*.ts --watch src",
+    "example:build": "npm -C examples/vite-vue3 run build",
+    "example:dev": "npm -C examples/vite-vue3 run dev",
     "prepublishOnly": "npm run build",
     "release": "npx bumpp --commit --tag --push",
     "test": "jest",

src/core/transforms/directive/index.ts

@@ -0,0 +1,30 @@
+import Debug from 'debug'
+import type MagicString from 'magic-string'
+import { pascalCase, stringifyComponentImport } from '../../utils'
+import type { Context } from '../../context'
+import { SupportedTransformer } from '../../..'
+
+const debug = Debug('unplugin-vue-components:transform:directive')
+
+export default async(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)
+  for (const { rawName, replace } of results) {
+    debug(`| ${rawName}`)
+    const name = pascalCase(rawName)
+    ctx.updateUsageMap(sfcPath, [name])
+
+    const directive = await ctx.findComponent(name, 'directive', [sfcPath])
+    if (!directive) continue
+
+    const varName = `__unplugin_directives_${no}`
+    s.prepend(`${stringifyComponentImport({ ...directive, name: varName }, ctx)};\n`)
+    no += 1
+    replace(varName)
+  }
+
+  debug(`^ (${no})`)
+}

src/core/transforms/directive.ts renamed to src/core/transforms/directive/vue2.ts

@@ -1,16 +1,10 @@
-import Debug from 'debug'
 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 { pascalCase, stringifyComponentImport } from '../utils'
-import type { Context } from '../context'
-import { ResolveResult } from '../transformer'
-import { SupportedTransformer } from '../..'
-
-const debug = Debug('unplugin-vue-components:transform:directive')
+import { ResolveResult } from '../../transformer'
 
 /**
  * get Vue 2 render function position
@@ -20,16 +14,16 @@ const debug = Debug('unplugin-vue-components:transform:directive')
 const getRenderFnStart = (ast: ParseResult<File>): number => {
   const renderFn = ast.program.body.find((node): node is VariableDeclaration =>
     node.type === 'VariableDeclaration'
-    && node.declarations[0].id.type === 'Identifier'
-    && node.declarations[0].id.name === 'render',
+      && 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)
     throw new Error('[unplugin-vue-components:directive] Cannot find render function position.')
   return start + 1
 }
 
-const resolveVue2 = (code: string, s: MagicString): ResolveResult[] => {
+export const resolve = (code: string, s: MagicString): ResolveResult[] => {
   const ast = parse(code, {
     sourceType: 'module',
   })
@@ -51,8 +45,8 @@ const resolveVue2 = (code: string, s: MagicString): ResolveResult[] => {
     const directives = args[1].properties.find(
       (property): property is ObjectProperty =>
         property.type === 'ObjectProperty'
-        && property.key.type === 'Identifier'
-        && property.key.name === 'directives',
+          && property.key.type === 'Identifier'
+          && property.key.name === 'directives',
     )?.value
     if (!directives || directives.type !== 'ArrayExpression')
       continue
@@ -65,8 +59,8 @@ const resolveVue2 = (code: string, s: MagicString): ResolveResult[] => {
       const nameNode = directive.properties.find(
         (p): p is ObjectProperty =>
           p.type === 'ObjectProperty'
-          && p.key.type === 'Identifier'
-          && p.key.name === 'name',
+            && p.key.type === 'Identifier'
+            && p.key.name === 'name',
       )?.value
       if (nameNode?.type !== 'StringLiteral') continue
       const name = nameNode.value
@@ -82,42 +76,3 @@ const resolveVue2 = (code: string, s: MagicString): ResolveResult[] => {
 
   return results
 }
-
-const resolveVue3 = (code: string, s: MagicString): ResolveResult[] => {
-  const results: ResolveResult[] = []
-
-  for (const match of code.matchAll(/_resolveDirective\("(.+?)"\)/g)) {
-    const matchedName = match[1]
-    if (match.index != null && matchedName && !matchedName.startsWith('_')) {
-      const start = match.index
-      const end = start + match[0].length
-      results.push({
-        rawName: matchedName,
-        replace: resolved => s.overwrite(start, end, resolved),
-      })
-    }
-  }
-
-  return results
-}
-
-export default async(code: string, transformer: SupportedTransformer, s: MagicString, ctx: Context, sfcPath: string) => {
-  let no = 0
-
-  const results = transformer === 'vue2' ? resolveVue2(code, s) : resolveVue3(code, s)
-  for (const { rawName, replace } of results) {
-    debug(`| ${rawName}`)
-    const name = pascalCase(rawName)
-    ctx.updateUsageMap(sfcPath, [name])
-
-    const directive = await ctx.findComponent(name, 'directive', [sfcPath])
-    if (!directive) continue
-
-    const varName = `__unplugin_directives_${no}`
-    s.prepend(`${stringifyComponentImport({ ...directive, name: varName }, ctx)};\n`)
-    no += 1
-    replace(varName)
-  }
-
-  debug(`^ (${no})`)
-}

src/core/transforms/directive/vue3.ts

@@ -0,0 +1,20 @@
+import type MagicString from 'magic-string'
+import { ResolveResult } from '../../transformer'
+
+export const resolve = (code: string, s: MagicString): ResolveResult[] => {
+  const results: ResolveResult[] = []
+
+  for (const match of code.matchAll(/_resolveDirective\("(.+?)"\)/g)) {
+    const matchedName = match[1]
+    if (match.index != null && matchedName && !matchedName.startsWith('_')) {
+      const start = match.index
+      const end = start + match[0].length
+      results.push({
+        rawName: matchedName,
+        replace: resolved => s.overwrite(start, end, resolved),
+      })
+    }
+  }
+
+  return results
+}

tsup.config.ts

@@ -0,0 +1,8 @@
+import type { Options } from 'tsup'
+
+export const tsup: Options = {
+  format: ['cjs', 'esm'],
+  dts: true,
+  splitting: true,
+  clean: true,
+}