feat: on-demand importing!

Author: antfu

README.md

@@ -1,6 +1,6 @@
 <h1 align='center'>vite-plugin-components</h1>
 
-<p align='center'>Components auto importing for Vite</p>
+<p align='center'>Components auto importing for Vite (on-demand!)</p>
 
 <p align='center'>
 <a href='https://www.npmjs.com/package/vite-plugin-components'>
@@ -22,36 +22,62 @@ Add it to `vite.config.js`
 
 ```ts
 // vite.config.js
-import { VitePluginComponents } from 'vite-plugin-components'
+import ViteComponents from 'vite-plugin-components'
 
 export default {
   plugins: [
-    VitePluginComponents()
+    ViteComponents()
   ]
 }
 ```
 
-Import and install `vite-plugin-components` in your `main.js`
+That's all. 
 
-```ts
-import { createApp } from 'vue'
-import App from './App.vue'
+Use components in templates as you would usually do but NO `import` and `component registration` required anymore! It will import components on demand, code spliting is also possible.
+
+Basically, it automatically turns this
 
-import components from 'vite-plugin-components' // <-- This
+```vue
+<template>
+  <div>
+    <HelloWorld msg="Hello Vue 3.0 + Vite" />
+  </div>
+</template>
 
-const app = createApp(App)
+<script>
+export default {
+  name: 'App'
+}
+</script>
+```
 
-app.use(components) // <-- and this
+into this
 
-app.mount('#app')
+```vue
+<template>
+  <div>
+    <HelloWorld msg="Hello Vue 3.0 + Vite" />
+  </div>
+</template>
+
+<script>
+import HelloWorld from './src/components/HelloWorld.vue'
+
+export default {
+  name: 'App',
+  components: {
+    HelloWorld
+  }
+}
+</script>
 ```
 
 ## Configuration
 
 The following show the default values of the configuration
 
 ```ts
-VitePluginComponents({
+ViteComponents({
   // Relative path to the directory to search for components.
   dirs: ['src/components'],
   // Valid file extensions for components.

src/build.ts

@@ -1 +1,2 @@
 export const MODULE_NAME = 'vite-plugin-components'
+export const RESOLVER_EXT = '.vite-plugin-components'

src/constants.ts

@@ -0,0 +1,20 @@
+import { Context } from '../types'
+import { RESOLVER_EXT } from '../constants'
+
+export function isResolverPath(reqPath: string) {
+  return reqPath.endsWith(RESOLVER_EXT)
+}
+
+export function generateResolver(ctx: Context, reqPath: string) {
+  const sfcPath = reqPath.slice(0, -RESOLVER_EXT.length)
+  const names = ctx.importMap[sfcPath] || []
+  const components = ctx.components.filter(i => names.includes(i[0]) && i[1] !== sfcPath)
+
+  return `
+    ${components.map(([name, path]) => `import ${name} from "${path}"`).join('\n')}
+
+    export default (components) => { 
+      return Object.assign({}, { ${components.map(i => i[0]).join(', ')} }, components) 
+    }
+  `
+}

src/generated.ts

@@ -0,0 +1,45 @@
+import path from 'path'
+import fg from 'fast-glob'
+import { Context, ComponentsInfo } from './types'
+
+function toArray<T>(arr: T | T[]): T[] {
+  if (Array.isArray(arr))
+    return arr
+  return [arr]
+}
+
+export async function searchComponents(ctx: Context, force = false) {
+  if (force || !ctx._searchingPromise) {
+    ctx._searchingPromise = (async() => {
+      const { dirs, deep, extensions } = ctx.options
+      const exts = toArray(extensions)
+
+      if (!exts.length)
+        throw new Error('[vite-plugin-components] extensions are required to search for components')
+
+      const extsGlob = exts.length === 1 ? exts[0] : `{${exts.join(',')}}`
+      const globs = toArray(dirs).map(i =>
+        deep
+          ? `${i}/**/*.${extsGlob}`
+          : `${i}/*.${extsGlob}`,
+      )
+
+      const files = await fg(globs, {
+        ignore: [
+          'node_modules',
+        ],
+        onlyFiles: true,
+      })
+
+      if (!files.length)
+        console.warn('[vite-plugin-components] no components found')
+
+      const components: ComponentsInfo[] = files.map(f => [path.parse(f).name, `/${f}`])
+
+      ctx.components = components
+      ctx._searchingPromise = undefined
+    })()
+  }
+
+  return await ctx._searchingPromise
+}

src/generator.ts

@@ -1,5 +1,35 @@
-import { components } from './generated'
-export { Options } from './options'
-export { VitePluginComponents } from './plugin'
+import type { Plugin } from 'vite'
+import { createRollupPlugin } from './plugins/build'
+import { createServerPlugin } from './plugins/server'
+import { Options, Context } from './types'
+import { VueScriptTransformer } from './transforms/vueScript'
+import { VueTemplateTransformer } from './transforms/vueTemplate'
 
-export default components
+const defaultOptions: Options = {
+  dirs: 'src/components',
+  extensions: 'vue',
+  deep: true,
+}
+
+export type { Options }
+export function VitePluginComponents(options: Partial<Options> = {}): Plugin {
+  const resolvedOptions: Options = Object.assign({}, options, defaultOptions)
+  const ctx: Context = {
+    options: resolvedOptions,
+    importMap: {},
+    components: [],
+  }
+
+  return {
+    configureServer: createServerPlugin(ctx),
+    rollupInputOptions: {
+      plugins: [
+        createRollupPlugin(ctx),
+      ],
+    },
+    transforms: [
+      VueScriptTransformer(ctx),
+      VueTemplateTransformer(ctx),
+    ],
+  }
+}

src/generator/resolver.ts

@@ -0,0 +1,22 @@
+import type { Plugin } from 'rollup'
+import { isResolverPath, generateResolver } from '../generator/resolver'
+import { Context } from '../types'
+import { searchComponents } from '../glob'
+
+export function createRollupPlugin(ctx: Context): Plugin {
+  return {
+    name: 'vite-plugin-components',
+    resolveId(source) {
+      if (isResolverPath(source))
+        return source
+      return null
+    },
+    async load(id) {
+      if (isResolverPath(id)) {
+        await searchComponents(ctx)
+        return await generateResolver(ctx, id)
+      }
+      return null
+    },
+  }
+}

src/glob.ts

@@ -0,0 +1,27 @@
+import type { ServerPlugin } from 'vite'
+import { Context } from '../types'
+import { isResolverPath, generateResolver } from '../generator/resolver'
+import { searchComponents } from '../glob'
+
+export function createServerPlugin(context: Context): ServerPlugin {
+  return ({ app }) => {
+    app.use(async(ctx, next) => {
+      if (!isResolverPath(ctx.path))
+        return next()
+
+      try {
+        await searchComponents(context, true)
+        ctx.body = await generateResolver(context, ctx.path)
+        ctx.type = 'js'
+        ctx.status = 200
+      }
+      catch (e) {
+        ctx.body = {
+          error: e.toString(),
+        }
+        ctx.type = 'js'
+        ctx.status = 500
+      }
+    })
+  }
+}

src/index.ts

@@ -0,0 +1,3 @@
+import { ComponentsImportMap } from './types'
+
+export const importMap: ComponentsImportMap = {}