feat: introduce dumpComponentsInfo option (#830)

Author: ilyaliao

.gitignore

@@ -2,4 +2,5 @@ node_modules
 .DS_Store
 dist
 .idea
+.components-info.json
 components.d.ts

examples/vite-vue2/vite.config.ts

@@ -8,6 +8,7 @@ const config: UserConfig = {
  Components({
  transformer: 'vue2',
  dts: 'src/components.d.ts',
+ dumpComponentsInfo: true,
  }),
  ],
  build: {

examples/vite-vue3/vite.config.ts

@@ -37,6 +37,7 @@ const config: UserConfig = {
  componentPrefix: 'i',
  }),
  ],
+ dumpComponentsInfo: true,
  }),
  ],
  build: {

src/core/context.ts

@@ -6,7 +6,7 @@ import process from 'node:process'
 import { slash, throttle, toArray } from '@antfu/utils'
 import Debug from 'debug'
 import { DIRECTIVE_IMPORT_PREFIX } from './constants'
-import { writeDeclaration } from './declaration'
+import { writeComponentsJson, writeDeclaration } from './declaration'
 import { searchComponents } from './fs/glob'
 import { resolveOptions } from './options'
 import transformer from './transformer'
@@ -34,13 +34,24 @@ export class Context {
  root = process.cwd()
  sourcemap: string | boolean = true
  alias: Record<string, string> = {}
+ dumpComponentsInfoPath: string | undefined
 
  constructor(
  private rawOptions: Options,
  ) {
  this.options = resolveOptions(rawOptions, this.root)
  this.sourcemap = rawOptions.sourcemap ?? true
  this.generateDeclaration = throttle(500, this._generateDeclaration.bind(this), { noLeading: false })
+
+ if (this.options.dumpComponentsInfo) {
+ const dumpComponentsInfo = this.options.dumpComponentsInfo === true
+ ? './.components-info.json'
+ : this.options.dumpComponentsInfo ?? false
+
+ this.dumpComponentsInfoPath = dumpComponentsInfo
+ this.generateComponentsJson = throttle(500, this._generateComponentsJson.bind(this), { noLeading: false })
+ }
+
  this.setTransformer(this.options.transformer)
  }
 
@@ -169,6 +180,7 @@ export class Context {
 
  onUpdate(path: string) {
  this.generateDeclaration()
+ this.generateComponentsJson()
 
  if (!this._server)
  return
@@ -288,14 +300,26 @@ export class Context {
  if (!this.options.dts)
  return
 
- debug.declaration('generating')
+ debug.declaration('generating dts')
  return writeDeclaration(this, this.options.dts, removeUnused)
  }
 
  generateDeclaration(removeUnused = !this._server): void {
  this._generateDeclaration(removeUnused)
  }
 
+ _generateComponentsJson(removeUnused = !this._server) {
+ if (!Object.keys(this._componentNameMap).length)
+ return
+
+ debug.components('generating components-info')
+ return writeComponentsJson(this, removeUnused)
+ }
+
+ generateComponentsJson(removeUnused = !this._server): void {
+ this._generateComponentsJson(removeUnused)
+ }
+
  get componentNameMap() {
  return this._componentNameMap
  }

src/core/declaration.ts

@@ -156,3 +156,22 @@ export async function writeDeclaration(ctx: Context, filepath: string, removeUnu
  if (code !== originalContent)
  await writeFile(filepath, code)
 }
+
+export async function writeComponentsJson(ctx: Context, _removeUnused = false) {
+ if (!ctx.dumpComponentsInfoPath)
+ return
+
+ const components = [
+ ...Object.entries({
+ ...ctx.componentNameMap,
+ ...ctx.componentCustomMap,
+ }).map(([_, { name, as, from }]) => ({
+ name: name || 'default',
+ as,
+ from,
+ })),
+ ...resolveTypeImports(ctx.options.types),
+ ]
+
+ await writeFile(ctx.dumpComponentsInfoPath, JSON.stringify(components, null, 2))
+}

src/core/unplugin.ts

@@ -48,6 +48,7 @@ export default createUnplugin<Options>((options = {}) => {
  try {
  const result = await ctx.transform(code, id)
  ctx.generateDeclaration()
+ ctx.generateComponentsJson()
  return result
  }
  catch (e) {
@@ -69,6 +70,11 @@ export default createUnplugin<Options>((options = {}) => {
  ctx.generateDeclaration()
  }
 
+ if (ctx.options.dumpComponentsInfo && ctx.dumpComponentsInfoPath) {
+ if (!existsSync(ctx.dumpComponentsInfoPath))
+ ctx.generateComponentsJson()
+ }
+
  if (config.build.watch && config.command === 'build')
  ctx.setupWatcher(chokidar.watch(ctx.options.globs))
  },

src/types.ts

@@ -205,6 +205,16 @@ export interface Options {
  * @default true
  */
  sourcemap?: boolean
+
+ /**
+ * Save component information into a JSON file for other tools to consume.
+ * Provide a filepath to save the JSON file.
+ *
+ * When set to `true`, it will save to `./.components-info.json`
+ *
+ * @default false
+ */
+ dumpComponentsInfo?: boolean | string
 }
 
 export type ResolvedOptions = Omit<