diff --git a/examples/naive-ui/components.d.ts b/examples/naive-ui/components.d.ts index ccf08280..c5915384 100644 --- a/examples/naive-ui/components.d.ts +++ b/examples/naive-ui/components.d.ts @@ -3,7 +3,10 @@ declare module 'vue' { export interface GlobalComponents { - + NInput: typeof import('naive-ui')['NInput'] + NDatePicker: typeof import('naive-ui')['NDatePicker'] + NSpace: typeof import('naive-ui')['NSpace'] + NConfigProvider: typeof import('naive-ui')['NConfigProvider'] } } diff --git a/examples/naive-ui/tsconfig.json b/examples/naive-ui/tsconfig.json new file mode 100644 index 00000000..3c43903c --- /dev/null +++ b/examples/naive-ui/tsconfig.json @@ -0,0 +1,3 @@ +{ + "extends": "../tsconfig.json" +} diff --git a/package.json b/package.json index 16b0d74e..73bb7faf 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,7 @@ }, "devDependencies": { "@antfu/eslint-config": "^0.6.6", - "@antfu/utils": "^0.2.0", + "@antfu/utils": "^0.2.1", "@types/debug": "^4.1.5", "@types/jest": "^26.0.23", "@types/minimatch": "^3.0.4", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3fa54b81..1c0f4086 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -5,7 +5,7 @@ importers: .: specifiers: '@antfu/eslint-config': ^0.6.6 - '@antfu/utils': ^0.2.0 + '@antfu/utils': ^0.2.1 '@types/debug': ^4.1.5 '@types/jest': ^26.0.23 '@types/minimatch': ^3.0.4 @@ -32,7 +32,7 @@ importers: minimatch: 3.0.4 devDependencies: '@antfu/eslint-config': 0.6.6_eslint@7.28.0+typescript@4.3.2 - '@antfu/utils': 0.2.0 + '@antfu/utils': 0.2.1 '@types/debug': 4.1.5 '@types/jest': 26.0.23 '@types/minimatch': 3.0.4 @@ -49,7 +49,6 @@ importers: examples/naive-ui: specifiers: - '@antfu/utils': ^0.1.7 '@vitejs/plugin-vue': ^1.2.1 '@vue/compiler-sfc': ^3.0.11 cross-env: ^7.0.3 @@ -66,7 +65,6 @@ importers: vant: 3.0.18_vue@3.1.1 vue: 3.1.1 devDependencies: - '@antfu/utils': 0.1.7 '@vitejs/plugin-vue': 1.2.3_@vue+compiler-sfc@3.1.1 '@vue/compiler-sfc': 3.1.1_vue@3.1.1 cross-env: 7.0.3 @@ -195,12 +193,8 @@ packages: - typescript dev: true - /@antfu/utils/0.1.7: - resolution: {integrity: sha512-XbmXbhrjfxQq+ishOKeUIK1VYxQV0B+ZkAQkz00bxhmQd5izdT0YRSDwkyH/KX46gFVBMd+6anvSDlciUt3L4A==} - dev: true - - /@antfu/utils/0.2.0: - resolution: {integrity: sha512-yyk/uvEVsBgakGaPw+bu6Ms8S6rpPhON3ulW1fysuNYrDfsnZLDl3vwU41kaFqjRAJA54PRhtiy8+fz35+YtnA==} + /@antfu/utils/0.2.1: + resolution: {integrity: sha512-hLgVsL94NAsGPogravj5jrc4/OwanSeKmcdE76UcAG6CeggdiAocqWmcD3DtHUash/pGid2lQ5y3ylCA8qIyZg==} dev: true /@babel/code-frame/7.12.11: @@ -5829,7 +5823,7 @@ packages: dependencies: icss-utils: 5.1.0_postcss@8.3.2 postcss: 8.3.2 - postcss-selector-parser: 6.0.6 + postcss-selector-parser: 6.0.4 postcss-value-parser: 4.1.0 dev: true @@ -5850,7 +5844,7 @@ packages: postcss: ^8.1.0 dependencies: postcss: 8.3.2 - postcss-selector-parser: 6.0.6 + postcss-selector-parser: 6.0.4 dev: true /postcss-modules-values/4.0.0_postcss@8.2.8: diff --git a/src/context.ts b/src/context.ts index cc37f1ed..d37ea449 100644 --- a/src/context.ts +++ b/src/context.ts @@ -2,6 +2,7 @@ import { relative } from 'path' import Debug from 'debug' import chokidar from 'chokidar' import { ResolvedConfig, UpdatePayload, ViteDevServer } from 'vite' +import { throttle } from '@antfu/utils' import { Options, ComponentInfo, ResolvedOptions } from './types' import { pascalCase, toArray, getNameFromFilePath, resolveAlias, resolveOptions, matchGlobs, slash } from './utils' import { searchComponents } from './fs/glob' @@ -11,6 +12,7 @@ const debug = { components: Debug('vite-plugin-components:context:components'), search: Debug('vite-plugin-components:context:search'), hmr: Debug('vite-plugin-components:context:hmr'), + decleration: Debug('vite-plugin-components:decleration'), } export class Context { @@ -19,6 +21,7 @@ export class Context { private _componentPaths = new Set() private _componentNameMap: Record = {} private _componentUsageMap: Record> = {} + private _componentCustomMap: Record = {} private _server: ViteDevServer | undefined constructor( @@ -44,6 +47,8 @@ export class Context { } }) } + + this.generateDeclaration = throttle(500, false, this.generateDeclaration.bind(this)) } get root() { @@ -80,6 +85,11 @@ export class Context { return false } + addCustomComponents(info: ComponentInfo) { + if (info.name) + this._componentCustomMap[info.name] = info + } + removeComponents(paths: string | string[]) { debug.components('remove', paths) @@ -144,7 +154,7 @@ export class Context { findComponent(name: string, excludePaths: string[] = []): ComponentInfo | undefined { // resolve from fs - const info = this._componentNameMap[name] + let info = this._componentNameMap[name] if (info && !excludePaths.includes(info.path) && !excludePaths.includes(info.path.slice(1))) return info @@ -153,16 +163,20 @@ export class Context { const result = resolver(name) if (result) { if (typeof result === 'string') { - return { + info = { name, path: result, } + this.addCustomComponents(info) + return info } else { - return { + info = { name, ...result, } + this.addCustomComponents(info) + return info } } } @@ -207,11 +221,18 @@ export class Context { } generateDeclaration() { - if (this.options.globalComponentsDeclaration) - generateDeclaration(this, this.options.root, this.options.globalComponentsDeclaration) + if (!this.options.globalComponentsDeclaration) + return + + debug.decleration('generating') + generateDeclaration(this, this.options.root, this.options.globalComponentsDeclaration) } get componentNameMap() { return this._componentNameMap } + + get componentCustomMap() { + return this._componentCustomMap + } } diff --git a/src/declaration.ts b/src/declaration.ts index 08568f23..03c595f1 100644 --- a/src/declaration.ts +++ b/src/declaration.ts @@ -4,7 +4,10 @@ import { Context } from './context' import { slash } from './utils' export async function generateDeclaration(ctx: Context, root: string, filepath: string) { - const lines = Object.values(ctx.componentNameMap) + const lines = Object.values({ + ...ctx.componentNameMap, + ...ctx.componentCustomMap, + }) .map(({ path, name, importName }) => { const related = slash(path).startsWith('/') ? `./${relative(dirname(filepath), resolve(root, path.slice(1)))}` @@ -17,6 +20,9 @@ export async function generateDeclaration(ctx: Context, root: string, filepath: return entry }) + if (!lines.length) + return + const code = `// generated by vite-plugin-components // read more https://github.com/vuejs/vue-next/pull/3399 diff --git a/src/index.ts b/src/index.ts index 34dfc4a4..497594f8 100644 --- a/src/index.ts +++ b/src/index.ts @@ -29,9 +29,11 @@ function VitePluginComponents(options: Options = {}): Plugin { configureServer(server) { ctx.setServer(server) }, - transform(code, id) { + async transform(code, id) { const { path, query } = parseId(id) - return transformer(code, id, path, query) + const result = await transformer(code, id, path, query) + ctx.generateDeclaration() + return result }, } } diff --git a/src/utils.ts b/src/utils.ts index 6ce0858f..1458b82e 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -1,20 +1,19 @@ import { join, parse, resolve } from 'path' import minimatch from 'minimatch' import { ResolvedConfig } from 'vite' +import { slash, toArray } from '@antfu/utils' import { ComponentInfo, ResolvedOptions, Options, ImportInfo } from './types' import { LibraryResolver } from './helpers/libraryResolver' import { defaultOptions } from './constants' import { Context } from './context' +export { slash, toArray } + export interface ResolveComponent { filename: string namespace?: string } -export function slash(str: string) { - return str.replace(/\\/g, '/') -} - export function pascalCase(str: string) { return capitalize(camelCase(str)) } @@ -32,12 +31,6 @@ export function capitalize(str: string) { return str.charAt(0).toUpperCase() + str.slice(1) } -export function toArray(arr: T | T[]): T[] { - if (Array.isArray(arr)) - return arr - return [arr] -} - export function parseId(id: string) { const index = id.indexOf('?') if (index < 0) {