forked from nuxt/framework
-
Notifications
You must be signed in to change notification settings - Fork 0
/
templates.ts
111 lines (96 loc) · 4.19 KB
/
templates.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
import { isAbsolute, relative } from 'pathe'
import type { Component, Nuxt, NuxtPluginTemplate, NuxtTemplate } from '@nuxt/schema'
import { genDynamicImport, genExport, genImport, genObjectFromRawEntries } from 'knitwork'
export interface ComponentsTemplateContext {
nuxt: Nuxt
options: {
getComponents: (mode?: 'client' | 'server' | 'all') => Component[]
mode?: 'client' | 'server'
}
}
export type ImportMagicCommentsOptions = {
chunkName: string
prefetch?: boolean | number
preload?: boolean | number
}
const createImportMagicComments = (options: ImportMagicCommentsOptions) => {
const { chunkName, prefetch, preload } = options
return [
`webpackChunkName: "${chunkName}"`,
prefetch === true || typeof prefetch === 'number' ? `webpackPrefetch: ${prefetch}` : false,
preload === true || typeof preload === 'number' ? `webpackPreload: ${preload}` : false
].filter(Boolean).join(', ')
}
export const componentsPluginTemplate: NuxtPluginTemplate<ComponentsTemplateContext> = {
filename: 'components.plugin.mjs',
getContents ({ options }) {
const globalComponents = options.getComponents().filter(c => c.global === true)
return `import { defineAsyncComponent } from 'vue'
import { defineNuxtPlugin } from '#app'
const components = ${genObjectFromRawEntries(globalComponents.map((c) => {
const exp = c.export === 'default' ? 'c.default || c' : `c['${c.export}']`
const comment = createImportMagicComments(c)
return [c.pascalName, `defineAsyncComponent(${genDynamicImport(c.filePath, { comment })}.then(c => ${exp}))`]
}))}
export default defineNuxtPlugin(nuxtApp => {
for (const name in components) {
nuxtApp.vueApp.component(name, components[name])
nuxtApp.vueApp.component('Lazy' + name, components[name])
}
})
`
}
}
export const componentsTemplate: NuxtTemplate<ComponentsTemplateContext> = {
// components.[server|client].mjs'
getContents ({ options }) {
const imports = new Set<string>()
imports.add('import { defineAsyncComponent } from \'vue\'')
let num = 0
const components = options.getComponents(options.mode).flatMap((c) => {
const exp = c.export === 'default' ? 'c.default || c' : `c['${c.export}']`
const comment = createImportMagicComments(c)
const isClient = c.mode === 'client'
const definitions = []
if (isClient) {
num++
const identifier = `__nuxt_component_${num}`
imports.add(genImport('#app/components/client-only', [{ name: 'createClientOnly' }]))
imports.add(genImport(c.filePath, [{ name: c.export, as: identifier }]))
definitions.push(`export const ${c.pascalName} = /*#__PURE__*/ createClientOnly(${identifier})`)
} else {
definitions.push(genExport(c.filePath, [{ name: c.export, as: c.pascalName }]))
}
definitions.push(`export const Lazy${c.pascalName} = defineAsyncComponent(${genDynamicImport(c.filePath, { comment })}.then(c => ${isClient ? `createClientOnly(${exp})` : exp}))`)
return definitions
})
return [
...imports,
...components,
`export const componentNames = ${JSON.stringify(options.getComponents().map(c => c.pascalName))}`
].join('\n')
}
}
export const componentsTypeTemplate: NuxtTemplate<ComponentsTemplateContext> = {
filename: 'components.d.ts',
getContents: ({ options, nuxt }) => {
const buildDir = nuxt.options.buildDir
const componentTypes = options.getComponents().map(c => [
c.pascalName,
`typeof ${genDynamicImport(isAbsolute(c.filePath)
? relative(buildDir, c.filePath).replace(/(?<=\w)\.(?!vue)\w+$/g, '')
: c.filePath.replace(/(?<=\w)\.(?!vue)\w+$/g, ''), { wrapper: false })}['${c.export}']`
])
return `// Generated by components discovery
declare module '@vue/runtime-core' {
export interface GlobalComponents {
${componentTypes.map(([pascalName, type]) => ` '${pascalName}': ${type}`).join('\n')}
${componentTypes.map(([pascalName, type]) => ` 'Lazy${pascalName}': ${type}`).join('\n')}
}
}
${componentTypes.map(([pascalName, type]) => `export const ${pascalName}: ${type}`).join('\n')}
${componentTypes.map(([pascalName, type]) => `export const Lazy${pascalName}: ${type}`).join('\n')}
export const componentNames: string[]
`
}
}