Skip to content

Commit 1328be1

Browse files
sxzzsxzz
authored
feat: support directives (unplugin#179)
1 parent 495ce5d commit 1328be1

File tree

16 files changed

+466
-135
lines changed

16 files changed

+466
-135
lines changed

‎README.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ On-demand components auto importing for Vue.
77
###### Features
88

99
- 💚 Supports both Vue 2 and Vue 3 out-of-the-box.
10+
- ✨ Supports both components and directives.
1011
- ⚡️ Supports Vite, Webpack, Vue CLI, Rollup and more, powered by <a href="https://github.com/unjs/unplugin">unplugin</a>.
1112
- 🏝 Tree-shakable, only registers the components you use.
1213
- 🪐 Folder names as namespaces.
@@ -284,6 +285,11 @@ Components({
284285
// works when `directoryAsNamespace: true`
285286
globalNamespaces: [],
286287

288+
// auto import for directives
289+
// default: `true` for Vue 3, `false` for Vue 2
290+
// Babel is needed to do the transformation for Vue 2, it's disabled by default for performance concerns.
291+
directives: true,
292+
287293
// filters for transforming targets
288294
include: [/\.vue$/, /\.vue\?vue/],
289295
exclude: [/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/, /[\\/]\.nuxt[\\/]/],

‎package.json

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,17 @@
44
"description": "Components auto importing for Vue",
55
"homepage": "https://github.com/antfu/unplugin-vue-components",
66
"bugs": "https://github.com/antfu/unplugin-vue-components/issues",
7+
"license": "MIT",
78
"repository": {
89
"type": "git",
910
"url": "https://github.com/antfu/unplugin-vue-components"
1011
},
1112
"funding": "https://github.com/sponsors/antfu",
12-
"license": "MIT",
1313
"author": "antfu <anthonyfu117@hotmail.com>",
14+
"files": [
15+
"dist",
16+
"*.d.ts"
17+
],
1418
"exports": {
1519
".": {
1620
"require": "./dist/index.js",
@@ -45,20 +49,19 @@
4549
"main": "dist/index.js",
4650
"module": "dist/index.mjs",
4751
"types": "index.d.ts",
48-
"files": [
49-
"dist",
50-
"*.d.ts"
51-
],
5252
"scripts": {
53-
"build": "rimraf dist && tsup src/*.ts --format cjs,esm --dts --splitting && esno scripts/postbuild.ts",
54-
"dev": "tsup src/*.ts --format cjs,esm --watch src",
55-
"example:build": "npm -C examples/vue3 run build",
56-
"example:dev": "npm -C examples/vue3 run dev",
53+
"build": "tsup src/*.ts && esno scripts/postbuild.ts",
54+
"dev": "tsup src/*.ts --watch src",
55+
"example:build": "npm -C examples/vite-vue3 run build",
56+
"example:dev": "npm -C examples/vite-vue3 run dev",
5757
"prepublishOnly": "npm run build",
5858
"release": "npx bumpp --commit --tag --push",
5959
"test": "jest",
6060
"test:update": "jest --u"
6161
},
62+
"peerDependencies": {
63+
"vue": "2 || 3"
64+
},
6265
"dependencies": {
6366
"@antfu/utils": "^0.3.0",
6467
"@rollup/pluginutils": "^4.1.1",
@@ -73,6 +76,9 @@
7376
},
7477
"devDependencies": {
7578
"@antfu/eslint-config": "^0.9.0",
79+
"@babel/parser": "^7.15.8",
80+
"@babel/traverse": "^7.15.4",
81+
"@babel/types": "^7.15.6",
7682
"@types/debug": "^4.1.7",
7783
"@types/jest": "^27.0.2",
7884
"@types/minimatch": "^3.0.5",
@@ -90,9 +96,6 @@
9096
"typescript": "^4.4.3",
9197
"vite": "^2.5.10"
9298
},
93-
"peerDependencies": {
94-
"vue": "2 || 3"
95-
},
9699
"engines": {
97100
"node": ">=14"
98101
}

‎pnpm-lock.yaml

Lines changed: 85 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/core/context.ts

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,7 @@ import { pascalCase, getNameFromFilePath, resolveAlias, matchGlobs, parseId } fr
88
import { resolveOptions } from './options'
99
import { searchComponents } from './fs/glob'
1010
import { generateDeclaration } from './declaration'
11-
import { Vue2Transformer } from './transforms/vue2'
12-
import { Vue3Transformer } from './transforms/vue3'
11+
import transformer from './transformer'
1312

1413
const debug = {
1514
components: Debug('unplugin-vue-components:context:components'),
@@ -51,9 +50,7 @@ export class Context {
5150

5251
setTransformer(name: Options['transformer']) {
5352
debug.env('transformer', name)
54-
this.transformer = name === 'vue2'
55-
? Vue2Transformer(this)
56-
: Vue3Transformer(this)
53+
this.transformer = transformer(this, name || 'vue3')
5754
}
5855

5956
transform(code: string, id: string) {
@@ -181,15 +178,15 @@ export class Context {
181178
})
182179
}
183180

184-
async findComponent(name: string, excludePaths: string[] = [], rawName?: string): Promise<ComponentInfo | undefined> {
181+
async findComponent(name: string, type: 'component' | 'directive', excludePaths: string[] = []): Promise<ComponentInfo | undefined> {
185182
// resolve from fs
186183
let info = this._componentNameMap[name]
187184
if (info && !excludePaths.includes(info.path) && !excludePaths.includes(info.path.slice(1)))
188185
return info
189186

190187
// custom resolvers
191188
for (const resolver of this.options.resolvers) {
192-
const result = await resolver(name)
189+
const result = await resolver(name, type)
193190
if (result) {
194191
if (typeof result === 'string') {
195192
info = {

‎src/core/options.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { isPackageExists } from 'local-pkg'
44
import { ResolvedOptions, Options } from '../types'
55
import { LibraryResolver } from './helpers/libraryResolver'
66

7-
export const defaultOptions: Omit<Required<Options>, 'include' | 'exclude' | 'transformer' | 'globs'> = {
7+
export const defaultOptions: Omit<Required<Options>, 'include' | 'exclude' | 'transformer' | 'globs' |'directives'> = {
88
dirs: 'src/components',
99
extensions: 'vue',
1010
deep: true,
@@ -58,6 +58,9 @@ export function resolveOptions(options: Options, root: string): ResolvedOptions
5858
)
5959
resolved.root = root
6060
resolved.transformer = options.transformer || getVueVersion() || 'vue3'
61+
resolved.directives = (typeof options.directives === 'boolean')
62+
? options.directives
63+
: getVueVersion() === 'vue3'
6164

6265
return resolved
6366
}

‎src/core/transformer.ts

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import Debug from 'debug'
2+
import MagicString from 'magic-string'
3+
import { TransformResult } from 'unplugin'
4+
import { SupportedTransformer } from '..'
5+
import type { Transformer } from '../types'
6+
import { DISABLE_COMMENT } from './constants'
7+
import { Context } from './context'
8+
import transformComponent from './transforms/component'
9+
import transformDirectives from './transforms/directive'
10+
11+
const debug = Debug('unplugin-vue-components:transformer')
12+
13+
export interface ResolveResult {
14+
rawName: string
15+
replace: (resolved: string) => void
16+
}
17+
18+
export default (ctx: Context, transformer: SupportedTransformer): Transformer => {
19+
return async(code, id, path) => {
20+
ctx.searchGlob()
21+
22+
const sfcPath = ctx.normalizePath(path)
23+
debug(sfcPath)
24+
25+
const s = new MagicString(code)
26+
27+
await transformComponent(code, transformer, s, ctx, sfcPath)
28+
if (ctx.options.directives)
29+
await transformDirectives(code, transformer, s, ctx, sfcPath)
30+
31+
s.prepend(DISABLE_COMMENT)
32+
33+
const result: TransformResult = { code: s.toString() }
34+
if (ctx.sourcemap)
35+
result.map = s.generateMap({ source: id, includeContent: true })
36+
return result
37+
}
38+
}

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy