2021-08-09 21:54:44 +00:00
|
|
|
import { statSync } from 'fs'
|
|
|
|
import { resolve, relative } from 'upath'
|
2021-07-28 12:11:32 +00:00
|
|
|
import { defineNuxtModule, resolveAlias, addVitePlugin, addWebpackPlugin } from '@nuxt/kit'
|
2021-08-11 21:26:47 +00:00
|
|
|
import { distDir } from '../dirs'
|
2021-06-18 16:50:03 +00:00
|
|
|
import { scanComponents } from './scan'
|
2021-07-28 12:11:32 +00:00
|
|
|
import type { Component, ComponentsDir } from './types'
|
|
|
|
import { loaderPlugin } from './loader'
|
2021-06-18 16:50:03 +00:00
|
|
|
|
|
|
|
const isPureObjectOrString = (val: any) => (!Array.isArray(val) && typeof val === 'object') || typeof val === 'string'
|
2021-08-09 21:54:44 +00:00
|
|
|
const isDirectory = (p: string) => { try { return statSync(p).isDirectory() } catch (_e) { return false } }
|
2021-06-18 16:50:03 +00:00
|
|
|
|
|
|
|
export default defineNuxtModule({
|
|
|
|
name: 'components',
|
|
|
|
defaults: {
|
|
|
|
dirs: ['~/components']
|
|
|
|
},
|
|
|
|
setup (options, nuxt) {
|
|
|
|
let componentDirs = []
|
2021-07-28 12:11:32 +00:00
|
|
|
let components: Component[] = []
|
2021-06-18 16:50:03 +00:00
|
|
|
|
|
|
|
// Resolve dirs
|
|
|
|
nuxt.hook('app:resolve', async () => {
|
|
|
|
await nuxt.callHook('components:dirs', options.dirs)
|
|
|
|
|
|
|
|
componentDirs = options.dirs.filter(isPureObjectOrString).map((dir) => {
|
|
|
|
const dirOptions: ComponentsDir = typeof dir === 'object' ? dir : { path: dir }
|
2021-06-21 11:50:28 +00:00
|
|
|
const dirPath = resolveAlias(dirOptions.path, nuxt.options.alias)
|
2021-06-18 16:50:03 +00:00
|
|
|
const transpile = typeof dirOptions.transpile === 'boolean' ? dirOptions.transpile : 'auto'
|
|
|
|
const extensions = dirOptions.extensions || ['vue'] // TODO: nuxt extensions and strip leading dot
|
|
|
|
|
|
|
|
dirOptions.level = Number(dirOptions.level || 0)
|
|
|
|
|
2021-06-21 11:50:28 +00:00
|
|
|
const present = isDirectory(dirPath)
|
|
|
|
if (!present && dirOptions.path !== '~/components') {
|
2021-06-18 16:50:03 +00:00
|
|
|
// eslint-disable-next-line no-console
|
|
|
|
console.warn('Components directory not found: `' + dirPath + '`')
|
|
|
|
}
|
|
|
|
|
|
|
|
return {
|
|
|
|
...dirOptions,
|
2021-06-21 11:50:28 +00:00
|
|
|
// TODO: https://github.com/nuxt/framework/pull/251
|
|
|
|
enabled: true,
|
2021-06-18 16:50:03 +00:00
|
|
|
path: dirPath,
|
|
|
|
extensions,
|
|
|
|
pattern: dirOptions.pattern || `**/*.{${extensions.join(',')},}`,
|
|
|
|
ignore: [
|
|
|
|
'**/*.stories.{js,ts,jsx,tsx}', // ignore storybook files
|
|
|
|
'**/*{M,.m,-m}ixin.{js,ts,jsx,tsx}', // ignore mixins
|
|
|
|
'**/*.d.ts', // .d.ts files
|
|
|
|
// TODO: support nuxt ignore patterns
|
|
|
|
...(dirOptions.ignore || [])
|
|
|
|
],
|
|
|
|
transpile: (transpile === 'auto' ? dirPath.includes('node_modules') : transpile)
|
|
|
|
}
|
|
|
|
}).filter(d => d.enabled)
|
|
|
|
|
|
|
|
nuxt.options.build!.transpile!.push(...componentDirs.filter(dir => dir.transpile).map(dir => dir.path))
|
|
|
|
})
|
|
|
|
|
|
|
|
// Scan components and add to plugin
|
|
|
|
nuxt.hook('app:templates', async (app) => {
|
2021-07-28 12:11:32 +00:00
|
|
|
components = await scanComponents(componentDirs, nuxt.options.srcDir!)
|
2021-06-18 16:50:03 +00:00
|
|
|
await nuxt.callHook('components:extend', components)
|
|
|
|
if (!components.length) {
|
|
|
|
return
|
|
|
|
}
|
|
|
|
|
|
|
|
app.templates.push({
|
2021-07-28 11:35:24 +00:00
|
|
|
filename: 'components.mjs',
|
2021-08-11 21:26:47 +00:00
|
|
|
src: resolve(distDir, 'pages/runtime/components.tmpl.mjs'),
|
2021-07-28 11:35:24 +00:00
|
|
|
options: { components }
|
2021-06-18 16:50:03 +00:00
|
|
|
})
|
2021-07-28 11:35:24 +00:00
|
|
|
|
2021-06-18 16:50:03 +00:00
|
|
|
app.templates.push({
|
2021-07-28 11:35:24 +00:00
|
|
|
filename: 'components.d.ts',
|
2021-08-09 21:54:44 +00:00
|
|
|
write: true,
|
|
|
|
getContents: () => `// Generated by components discovery
|
|
|
|
declare module 'vue' {
|
|
|
|
export interface GlobalComponents {
|
|
|
|
${components.map(c => ` '${c.pascalName}': typeof import('${relative(nuxt.options.buildDir, c.filePath)}')['${c.export}']`).join(',\n')}
|
|
|
|
}\n}\n\nexport {}`
|
2021-06-18 16:50:03 +00:00
|
|
|
})
|
2021-07-28 11:35:24 +00:00
|
|
|
|
2021-06-18 16:50:03 +00:00
|
|
|
app.plugins.push({ src: '#build/components' })
|
|
|
|
})
|
|
|
|
|
2021-08-09 21:54:44 +00:00
|
|
|
nuxt.hook('prepare:types', ({ references }) => {
|
|
|
|
references.push({ path: resolve(nuxt.options.buildDir, 'components.d.ts') })
|
|
|
|
})
|
|
|
|
|
2021-06-18 16:50:03 +00:00
|
|
|
// Watch for changes
|
|
|
|
nuxt.hook('builder:watch', async (event, path) => {
|
|
|
|
if (!['add', 'unlink'].includes(event)) {
|
|
|
|
return
|
|
|
|
}
|
|
|
|
const fPath = resolve(nuxt.options.rootDir, path)
|
|
|
|
if (componentDirs.find(dir => fPath.startsWith(dir.path))) {
|
|
|
|
await nuxt.callHook('builder:generateApp')
|
|
|
|
}
|
|
|
|
})
|
2021-07-28 12:11:32 +00:00
|
|
|
|
|
|
|
if (!nuxt.options.dev) {
|
|
|
|
const options = { getComponents: () => components }
|
|
|
|
addWebpackPlugin(loaderPlugin.webpack(options))
|
|
|
|
addVitePlugin(loaderPlugin.vite(options))
|
|
|
|
}
|
2021-06-18 16:50:03 +00:00
|
|
|
}
|
|
|
|
})
|