chore(dx): generate list of discovered components (#145)

Author: pi0

src/index.ts

@@ -155,6 +155,7 @@ const componentsModule: Module<Options> = function () {
     const templates = [
       'components/index.js',
       'components/plugin.js',
+      'components/readme.md',
       'vetur/tags.json'
     ]
     for (const t of templates) {
@@ -164,6 +165,11 @@ const componentsModule: Module<Options> = function () {
         options: { getComponents }
       })
     }
+
+    // Add CLI info to inspect discovered components
+    const componentsListFile = path.resolve(nuxt.options.buildDir, 'components/readme.md')
+    // eslint-disable-next-line no-console
+    console.info('Discovered Components:', path.relative(process.cwd(), componentsListFile))
   })
 }
 

src/scan.ts

@@ -65,7 +65,7 @@ export async function scanComponents (dirs: ScanDir[], srcDir: string): Promise<
 
       const pascalName = pascalCase(componentName)
       const kebabName = kebabCase(componentName)
-      const shortPath = filePath.replace(srcDir, '')
+      const shortPath = relative(srcDir, filePath)
       const chunkName = 'components/' + kebabName
 
       let _c = prefixComponent(prefix, {

templates/components/readme.md

@@ -0,0 +1,16 @@
+# Discovered Components
+
+This is an auto-generated list of components discovered by [nuxt/components](https://github.com/nuxt/components).
+
+You can directly use them in pages and other components without the need to import them.
+
+**Tip:** If a component is conditionally rendered with `v-if` and is big, it is better to use `Lazy` or `lazy-` prefix to lazy load.
+
+<%
+const components = options.getComponents()
+const list = components.map(c => {
+  const pascalName = c.pascalName.replace(/^Lazy/, '')
+  const kebabName = c.kebabName.replace(/^lazy-/, '')
+  return `- \`<${pascalName}>\` | \`<${kebabName}>\` (${c.shortPath})`
+})
+%><%= list.join('\n') %>