fix: lifecycle order

Author: antfu

src/context.ts

@@ -0,0 +1,34 @@
+import { ComponentsInfo, ComponentsImportMap, Options } from './types'
+
+export class Context {
+  importMap: ComponentsImportMap = {}
+  components: ComponentsInfo[] = []
+  _searchingPromise?: Promise<any>
+
+  private importMapPromises: Record<string, [(null | Promise<string[]>), (null | ((result: string[]) => void))]> = {}
+
+  constructor(
+    public readonly options: Options,
+  ) {}
+
+  async getImportMap(key: string) {
+    if (this.importMap[key])
+      return this.importMap[key]
+
+    if (!this.importMapPromises[key]) {
+      this.importMapPromises[key] = [null, null]
+      const p = new Promise<string[]>((resolve) => {
+        this.importMapPromises[key][1] = resolve
+      })
+      this.importMapPromises[key][0] = p
+    }
+
+    return await Promise.resolve(this.importMapPromises[key][0])
+  }
+
+  setImportMap(key: string, names: string[]) {
+    this.importMap[key] = names
+    if (this.importMapPromises[key])
+      this.importMapPromises[key][1]?.(names)
+  }
+}

src/generator/resolver.ts

@@ -1,5 +1,5 @@
 import Debug from 'debug'
-import { Context } from '../types'
+import { Context } from '../context'
 import { RESOLVER_EXT } from '../constants'
 
 const debug = Debug('vite-plugin-components:resolver')
@@ -8,13 +8,13 @@ export function isResolverPath(reqPath: string) {
   return reqPath.endsWith(RESOLVER_EXT)
 }
 
-export function generateResolver(ctx: Context, reqPath: string) {
+export async function generateResolver(ctx: Context, reqPath: string) {
   const sfcPath = reqPath.slice(0, -RESOLVER_EXT.length)
-  const names = ctx.importMap[sfcPath] || []
+  const names = await ctx.getImportMap(sfcPath) || []
   const components = ctx.components.filter(i => names.includes(i[0]) && i[1] !== sfcPath)
 
-  debug(`resolving ${sfcPath}`)
-  debug(`components [${names.join(', ')}]`)
+  debug(sfcPath)
+  debug('using', names, 'imported', components.map(i => i[0]))
 
   return `
     ${components.map(([name, path]) => `import ${name} from "${path}"`).join('\n')}

src/glob.ts

@@ -1,7 +1,8 @@
 import path from 'path'
 import fg from 'fast-glob'
 import Debug from 'debug'
-import { Context, ComponentsInfo } from './types'
+import { ComponentsInfo } from './types'
+import { Context } from './context'
 
 const debug = Debug('vite-plugin-components:glob')
 
@@ -52,11 +53,11 @@ export async function searchComponents(ctx: Context, force = false) {
       const components: ComponentsInfo[] = files.map(f => [path.parse(f).name, `/${f}`])
 
       debug(`${components.length} components found.`)
-      debug(`[${components.map(i => i).join(', ')}]`)
+      debug(components.map(i => i[0]))
 
       ctx.components = components
     })()
   }
 
-  return await ctx._searchingPromise
+  await Promise.resolve(ctx._searchingPromise)
 }

src/index.ts

@@ -1,9 +1,10 @@
 import type { Plugin } from 'vite'
 import { createRollupPlugin } from './plugins/build'
 import { createServerPlugin } from './plugins/server'
-import { Options, Context } from './types'
+import { Options } from './types'
 import { VueScriptTransformer } from './transforms/vueScript'
 import { VueTemplateTransformer } from './transforms/vueTemplate'
+import { Context } from './context'
 
 const defaultOptions: Options = {
   dirs: 'src/components',
@@ -13,11 +14,7 @@ const defaultOptions: Options = {
 
 function VitePluginComponents(options: Partial<Options> = {}): Plugin {
   const resolvedOptions: Options = Object.assign({}, options, defaultOptions)
-  const ctx: Context = {
-    options: resolvedOptions,
-    importMap: {},
-    components: [],
-  }
+  const ctx: Context = new Context(resolvedOptions)
 
   return {
     configureServer: createServerPlugin(ctx),

src/state.ts

@@ -1,5 +1,5 @@
 import { Transform } from 'vite'
-import { Context } from '../types'
+import { Context } from '../context'
 import { RESOLVER_EXT } from '../constants'
 
 /**

src/transforms/vueScript.ts

@@ -1,5 +1,8 @@
-import { Transform } from 'vite'
-import { Context } from '../types'
+import Debug from 'debug'
+import type { Transform } from 'vite'
+import { Context } from '../context'
+
+const debug = Debug('vite-plugin-components:transform:template')
 
 /**
  * This transformer does not actually change the code,
@@ -15,7 +18,9 @@ export function VueTemplateTransformer(ctx: Context): Transform {
     },
     transform({ code, path }) {
       const imports = Array.from(code.matchAll(/_resolveComponent\("(.*)"\)/g)).map(i => i[1])
-      ctx.importMap[path] = imports
+      ctx.setImportMap(path, imports)
+      debug(path)
+      debug(imports)
       return code
     },
   }

src/transforms/vueTemplate.ts

@@ -21,10 +21,3 @@ export interface Options {
 
 export type ComponentsInfo = [string, string]
 export type ComponentsImportMap = Record<string, string[] | undefined>
-
-export interface Context {
-  options: Options
-  importMap: ComponentsImportMap
-  components: ComponentsInfo[]
-  _searchingPromise?: Promise<any>
-}