perf: use fs/promises to improve the performance (#46)

Author: antfu

src/module.ts

@@ -1,5 +1,4 @@
 import { existsSync, readFileSync } from 'fs'
-import type { MetaCheckerOptions } from 'vue-component-meta'
 import {
   addServerHandler,
   createResolver,
@@ -9,25 +8,12 @@ import {
   addTemplate
 } from '@nuxt/kit'
 import { join } from 'pathe'
-import type { ComponentsDir, ComponentsOptions } from '@nuxt/schema'
-import createJITI from 'jiti'
+import type { ComponentsDir } from '@nuxt/schema'
 import { withoutLeadingSlash } from 'ufo'
-import type { HookData } from './types'
 import { metaPlugin } from './unplugin'
+import { ModuleOptions } from './options'
 
-export interface ModuleOptions {
-  outputDir?: string
-  rootDir?: string
-  silent?: boolean
-  componentDirs: (string | ComponentsDir)[]
-  components?: ComponentsOptions[]
-  checkerOptions?: MetaCheckerOptions
-  transformers?: ((component: any, code: string) => ({ component: any, code: string }))[]
-}
-
-export interface ModuleHooks {
-  'component-meta:transformers'(data: HookData): void
-}
+export * from './options'
 
 export default defineNuxtModule<ModuleOptions>({
   meta: {
@@ -115,7 +101,7 @@ export default defineNuxtModule<ModuleOptions>({
     // Vite plugin
     nuxt.hook('vite:extend', (vite: any) => {
       vite.config.plugins = vite.config.plugins || []
-      vite.config.plugins.push(metaPlugin.vite(options))
+      vite.config.plugins.push(metaPlugin.vite(options as Required<ModuleOptions>))
     })
 
     // Inject output alias

src/options.ts

@@ -0,0 +1,17 @@
+import { MetaCheckerOptions } from 'vue-component-meta'
+import { ComponentsDir, ComponentsOptions } from '@nuxt/schema'
+import { HookData } from './types'
+
+export interface ModuleOptions {
+  outputDir?: string
+  rootDir?: string
+  silent?: boolean
+  componentDirs: (string | ComponentsDir)[]
+  components?: ComponentsOptions[]
+  checkerOptions?: MetaCheckerOptions
+  transformers?: ((component: any, code: string) => ({ component: any; code: string }))[]
+}
+
+export interface ModuleHooks {
+  'component-meta:transformers'(data: HookData): void
+}

src/unplugin.ts

@@ -1,11 +1,11 @@
-import { readFileSync, writeFileSync } from 'fs'
+import fsp from 'fs/promises'
 import { createUnplugin } from 'unplugin'
 import { createComponentMetaCheckerByJsonConfig } from 'vue-component-meta'
 import { resolveModule } from '@nuxt/kit'
 import { join } from 'pathe'
-import { defu } from 'defu'
+import { ModuleOptions } from './options'
 
-export const metaPlugin = createUnplugin<any>(
+export const metaPlugin = createUnplugin<Required<ModuleOptions>>(
   (options) => {
     const outputPath = join(options.outputDir, 'component-meta')
 
@@ -60,16 +60,16 @@ export const metaPlugin = createUnplugin<any>(
     /**
      * Output is needed for Nitro
      */
-    const updateOutput = () => {
-      // Main export of comopnent datas
-      writeFileSync(
+    const updateOutput = async () => {
+      // Main export of component data
+      await fsp.writeFile(
         outputPath + '.mjs',
         getVirtualModuleContent(),
         'utf-8'
       )
     }
 
-    const fetchComponent = (component: string | any) => {
+    const fetchComponent = async (component: string | any) => {
       try {
         if (typeof component === 'string') {
           if (components[component]) {
@@ -88,7 +88,7 @@ export const metaPlugin = createUnplugin<any>(
         if (!component?.fullPath || !component?.pascalName) { return }
 
         // Read component code
-        let code = readFileSync(component.fullPath, 'utf-8')
+        let code = await fsp.readFile(component.fullPath, 'utf-8')
 
         // Support transformers
         if (options?.transformers && options.transformers.length > 0) {
@@ -104,41 +104,29 @@ export const metaPlugin = createUnplugin<any>(
 
         const { props, slots, events, exposed } = checker.getComponentMeta(component.fullPath)
 
-        component.meta.slots = [
-          ...component.meta.slots,
-          ...slots
-        ]
-        component.meta.events = [
-          ...component.meta.events,
-          ...events
-        ]
-        component.meta.exposed = [
-          ...component.meta.exposed,
-          ...exposed
-        ]
-        component.meta.props = [
-          ...component.meta.props,
-          ...props
-            .filter(prop => !prop.global)
-            .sort((a, b) => {
-              // sort required properties first
-              if (!a.required && b.required) {
-                return 1
-              }
-              if (a.required && !b.required) {
-                return -1
-              }
-              // then ensure boolean properties are sorted last
-              if (a.type === 'boolean' && b.type !== 'boolean') {
-                return 1
-              }
-              if (a.type !== 'boolean' && b.type === 'boolean') {
-                return -1
-              }
-
-              return 0
-            })
-        ]
+        component.meta.slots = slots
+        component.meta.events = events
+        component.meta.exposed = exposed
+        component.meta.props = props
+          .filter(prop => !prop.global)
+          .sort((a, b) => {
+            // sort required properties first
+            if (!a.required && b.required) {
+              return 1
+            }
+            if (a.required && !b.required) {
+              return -1
+            }
+            // then ensure boolean properties are sorted last
+            if (a.type === 'boolean' && b.type !== 'boolean') {
+              return 1
+            }
+            if (a.type !== 'boolean' && b.type === 'boolean') {
+              return -1
+            }
+
+            return 0
+          })
 
         components[component.pascalName] = component
       } catch (e) {
@@ -147,22 +135,20 @@ export const metaPlugin = createUnplugin<any>(
       }
     }
 
-    const fetchComponents = () => Object.values(components).forEach(fetchComponent)
-
-    fetchComponents()
-
-    updateOutput()
+    const fetchComponents = () => Promise.all(Object.values(components).map(fetchComponent))
 
     return {
       name: 'vite-plugin-nuxt-component-meta',
-
       enforce: 'post',
-
+      async buildStart () {
+        await fetchComponents()
+        await updateOutput()
+      },
       vite: {
-        handleHotUpdate ({ file }) {
+        async handleHotUpdate ({ file }) {
           if (Object.entries(components).some(([, comp]: any) => comp.fullPath === file)) {
-            fetchComponent(file)
-            updateOutput()
+            await fetchComponent(file)
+            await updateOutput()
           }
         }
       }