Nuxt/packages/nuxt3/src/core/templates.ts

202 lines
6.4 KiB
TypeScript
Raw Normal View History

import { templateUtils } from '@nuxt/kit'
import type { Nuxt, NuxtApp, NuxtTemplate } from '@nuxt/schema'
import { genArrayFromRaw, genDynamicImport, genExport, genImport, genObjectFromRawEntries, genString } from 'knitwork'
import { isAbsolute, join, relative } from 'pathe'
import { resolveSchema, generateTypes } from 'untyped'
import escapeRE from 'escape-string-regexp'
export interface TemplateContext {
nuxt: Nuxt
app: NuxtApp
}
export const vueShim = {
filename: 'types/vue-shim.d.ts',
getContents: () =>
[
'declare module \'*.vue\' {',
' import { DefineComponent } from \'@vue/runtime-core\'',
' const component: DefineComponent<{}, {}, any>',
' export default component',
'}'
].join('\n')
}
// TODO: Use an alias
export const appComponentTemplate = {
filename: 'app-component.mjs',
getContents: (ctx: TemplateContext) => genExport(ctx.app.mainComponent, ['default'])
}
// TODO: Use an alias
export const rootComponentTemplate = {
filename: 'root-component.mjs',
getContents: (ctx: TemplateContext) => genExport(ctx.app.rootComponent, ['default'])
}
// TODO: Use an alias
export const errorComponentTemplate = {
filename: 'error-component.mjs',
getContents: (ctx: TemplateContext) => genExport(ctx.app.errorComponent, ['default'])
}
export const cssTemplate = {
filename: 'css.mjs',
getContents: (ctx: TemplateContext) => ctx.nuxt.options.css.map(i => genImport(i)).join('\n')
}
export const clientPluginTemplate = {
filename: 'plugins/client.mjs',
getContents (ctx: TemplateContext) {
const clientPlugins = ctx.app.plugins.filter(p => !p.mode || p.mode !== 'server')
return [
templateUtils.importSources(clientPlugins.map(p => p.src)),
`export default ${genArrayFromRaw(clientPlugins.map(p => templateUtils.importName(p.src)))}`
].join('\n')
}
}
export const serverPluginTemplate = {
filename: 'plugins/server.mjs',
getContents (ctx: TemplateContext) {
const serverPlugins = ctx.app.plugins.filter(p => !p.mode || p.mode !== 'client')
return [
"import preload from '#app/plugins/preload.server'",
templateUtils.importSources(serverPlugins.map(p => p.src)),
`export default ${genArrayFromRaw([
'preload',
...serverPlugins.map(p => templateUtils.importName(p.src))
])}`
].join('\n')
}
}
export const appViewTemplate = {
filename: 'views/app.template.html',
getContents () {
return `<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
<head {{ HEAD_ATTRS }}>
{{ HEAD }}
</head>
<body {{ BODY_ATTRS }}>{{ BODY_PREPEND }}
{{ APP }}
</body>
</html>
`
}
}
export const pluginsDeclaration = {
filename: 'types/plugins.d.ts',
getContents: (ctx: TemplateContext) => {
const EXTENSION_RE = new RegExp(`(?<=\\w)(${ctx.nuxt.options.extensions.map(e => escapeRE(e)).join('|')})$`, 'g')
const tsImports = ctx.app.plugins.map(p => (isAbsolute(p.src) ? relative(join(ctx.nuxt.options.buildDir, 'types'), p.src) : p.src).replace(EXTENSION_RE, ''))
return `// Generated by Nuxt3'
import type { Plugin } from '#app'
type Decorate<T extends Record<string, any>> = { [K in keyof T as K extends string ? \`$\${K}\` : never]: T[K] }
type InjectionType<A extends Plugin> = A extends Plugin<infer T> ? Decorate<T> : unknown
type NuxtAppInjections = \n ${tsImports.map(p => `InjectionType<typeof ${genDynamicImport(p, { wrapper: false })}.default>`).join(' &\n ')}
declare module '#app' {
interface NuxtApp extends NuxtAppInjections { }
}
declare module '@vue/runtime-core' {
interface ComponentCustomProperties extends NuxtAppInjections { }
}
export { }
`
}
}
const adHocModules = ['router', 'pages', 'auto-imports', 'meta', 'components']
export const schemaTemplate = {
filename: 'types/schema.d.ts',
getContents: ({ nuxt }: TemplateContext) => {
const moduleInfo = nuxt.options._installedModules.map(m => ({
...m.meta || {},
importName: m.entryPath || m.meta?.name
})).filter(m => m.configKey && m.name && !adHocModules.includes(m.name))
return [
"import { NuxtModule } from '@nuxt/schema'",
"declare module '@nuxt/schema' {",
' interface NuxtConfig {',
...moduleInfo.filter(Boolean).map(meta =>
` [${genString(meta.configKey)}]?: typeof ${genDynamicImport(meta.importName, { wrapper: false })}.default extends NuxtModule<infer O> ? Partial<O> : Record<string, any>`
),
' }',
generateTypes(resolveSchema(nuxt.options.publicRuntimeConfig),
{
interfaceName: 'PublicRuntimeConfig',
addExport: false,
addDefaults: false,
allowExtraKeys: false,
indentation: 2
}),
generateTypes(resolveSchema(nuxt.options.privateRuntimeConfig), {
interfaceName: 'PrivateRuntimeConfig',
addExport: false,
addDefaults: false,
indentation: 2,
allowExtraKeys: false,
defaultDescrption: 'This value is only accessible from server-side.'
}),
'}'
].join('\n')
}
}
// Add layouts template
export const layoutTemplate: NuxtTemplate = {
filename: 'layouts.mjs',
getContents ({ app }) {
const layoutsObject = genObjectFromRawEntries(Object.values(app.layouts).map(({ name, file }) => {
return [name, `defineAsyncComponent(${genDynamicImport(file)})`]
}))
return [
'import { defineAsyncComponent } from \'vue\'',
`export default ${layoutsObject}`
].join('\n')
}
}
export const clientConfigTemplate: NuxtTemplate = {
filename: 'nitro.client.mjs',
getContents: () => `
export const useRuntimeConfig = () => window?.__NUXT__?.config || {}
`
}
export const publicPathTemplate: NuxtTemplate = {
filename: 'paths.mjs',
getContents ({ nuxt }) {
return [
'import { joinURL } from \'ufo\'',
!nuxt.options.dev && 'import { useRuntimeConfig } from \'#nitro\'',
nuxt.options.dev
? `const appConfig = ${JSON.stringify(nuxt.options.app)}`
: 'const appConfig = useRuntimeConfig().app',
'export const baseURL = () => appConfig.baseURL',
'export const buildAssetsDir = () => appConfig.buildAssetsDir',
'export const buildAssetsURL = (...path) => joinURL(publicAssetsURL(), buildAssetsDir(), ...path)',
'export const publicAssetsURL = (...path) => {',
' const publicBase = appConfig.cdnURL || appConfig.baseURL',
' return path.length ? joinURL(publicBase, ...path) : publicBase',
'}'
].filter(Boolean).join('\n')
}
}