nuxt-component-meta icon indicating copy to clipboard operation
nuxt-component-meta copied to clipboard

Allow layers/modules to provide their meta

Open stafyniaksacha opened this issue 2 years ago • 3 comments

To speedup startup with nuxt-component-meta, we could allow modules and layers to provide their precomputed meta.

Those won't change during dev since they are external libraries, so they don't requires HMR.

stafyniaksacha avatar Mar 07 '23 10:03 stafyniaksacha

How does this look like?

atinux avatar Mar 07 '23 10:03 atinux

Dealing with module can be simple, we could generate a file in dist folder when the module is built. This file would contain the definition for components loaded by the module, and act as a cached result.

But for layers, If I get it, we don't have such build step and don't want to have one, right?

stafyniaksacha avatar Mar 07 '23 14:03 stafyniaksacha

I'm wondering about using a whitelist for modules / layers instead of blacklist (see #53)

In layers we could do something like:

export default defineNuxtConfig({
  // declare components
  components: [
    {
      prefix: 'MyLayer',
      path: resolve('./components/ui'),
      global: true,
    },
    {
      prefix: 'MyLayer',
      path: resolve('./components/form'),
    },
  ],
  // add components to meta whitelist
  // @ts-ignore - module may not be installed
  componentMeta: {
    include: [(component: any) => {
      return component?.pascalName?.startWith('MyLayer') && component.global
    }]
  },
})

In modules we could do something like:

export default defineNuxtModule<ModuleOptions>({
  meta: {
    name: 'my-module',
    configKey: 'myModule'
  },
  setup (options, nuxt) {
    addComponentsDir({
      prefix: 'MyModule',
      path: resolve('./runtime/components/ui'),
      global: true,
    })
    addComponentsDir({
      prefix: 'MyModule',
      path: resolve('./runtime/components/form'),
    })

    nuxt.options.componentMeta ??= {}
    nuxt.options.componentMeta.include ??= []
    nuxt.options.componentMeta.include.push((component: any) => {
      return component?.pascalName?.startWith('MyModule') && component.global
    })

    // could we imagine populating precomputed meta here? (ex: with a cli)
    // npx nuxt-component-meta generate --path ./src/runtime/components --out ./src/meta.json
  }
})

For better DX, we can also whitelist all global component from top layer ?

stafyniaksacha avatar Mar 13 '23 12:03 stafyniaksacha