From 07b9b12a8b0f56b9aef213bf17f112439feef4c4 Mon Sep 17 00:00:00 2001 From: Anthony Fu Date: Thu, 21 Jul 2022 17:55:53 +0800 Subject: [PATCH 1/4] fix(nuxt): use relative path to generate plugin variables --- packages/kit/src/internal/template.ts | 24 +++++++++++++++++------- packages/nuxt/src/core/templates.ts | 12 ++++++++---- 2 files changed, 25 insertions(+), 11 deletions(-) diff --git a/packages/kit/src/internal/template.ts b/packages/kit/src/internal/template.ts index 86b97d74834..a200a654551 100644 --- a/packages/kit/src/internal/template.ts +++ b/packages/kit/src/internal/template.ts @@ -3,6 +3,7 @@ import lodashTemplate from 'lodash.template' import { genSafeVariableName, genDynamicImport, genImport } from 'knitwork' import type { NuxtTemplate } from '@nuxt/schema' +import { relative } from 'pathe' export async function compileTemplate (template: NuxtTemplate, ctx: any) { const data = { ...ctx, options: template.options } @@ -23,16 +24,25 @@ export async function compileTemplate (template: NuxtTemplate, ctx: any) { const serialize = (data: any) => JSON.stringify(data, null, 2).replace(/"{(.+)}"(?=,?$)/gm, r => JSON.parse(r).replace(/^{(.*)}$/, '$1')) -const importSources = (sources: string | string[], { lazy = false } = {}) => { +const importSources = (sources: string | string[], root: string, { lazy = false } = {}) => { if (!Array.isArray(sources)) { sources = [sources] } - return sources.map((src) => { - if (lazy) { - return `const ${genSafeVariableName(src)} = ${genDynamicImport(src, { comment: `webpackChunkName: ${JSON.stringify(src)}` })}` - } - return genImport(src, genSafeVariableName(src)) - }).join('\n') + const variables: string[] = [] + const imports: string[] = [] + sources.forEach((src) => { + const path = relative(root, src) + const variable = genSafeVariableName(path) + variables.push(variable) + imports.push(lazy + ? `const ${variable} = ${genDynamicImport(src, { comment: `webpackChunkName: ${JSON.stringify(src)}` })}` + : genImport(src, variable) + ) + }) + return { + variables, + imports + } } export const templateUtils = { serialize, importName: genSafeVariableName, importSources } diff --git a/packages/nuxt/src/core/templates.ts b/packages/nuxt/src/core/templates.ts index 81a5e95b4e7..ea460d919f6 100644 --- a/packages/nuxt/src/core/templates.ts +++ b/packages/nuxt/src/core/templates.ts @@ -48,9 +48,11 @@ export const clientPluginTemplate = { filename: 'plugins/client.mjs', getContents (ctx: TemplateContext) { const clientPlugins = ctx.app.plugins.filter(p => !p.mode || p.mode !== 'server') + const rootDir = ctx.nuxt.options.rootDir + const { variables, imports } = templateUtils.importSources(clientPlugins.map(p => p.src), rootDir) return [ - templateUtils.importSources(clientPlugins.map(p => p.src)), - `export default ${genArrayFromRaw(clientPlugins.map(p => genSafeVariableName(p.src)))}` + ...imports, + `export default ${genArrayFromRaw(variables)}` ].join('\n') } } @@ -59,12 +61,14 @@ export const serverPluginTemplate = { filename: 'plugins/server.mjs', getContents (ctx: TemplateContext) { const serverPlugins = ctx.app.plugins.filter(p => !p.mode || p.mode !== 'client') + const rootDir = ctx.nuxt.options.rootDir + const { variables, imports } = templateUtils.importSources(serverPlugins.map(p => p.src), rootDir) return [ "import preload from '#app/plugins/preload.server'", - templateUtils.importSources(serverPlugins.map(p => p.src)), + ...imports, `export default ${genArrayFromRaw([ 'preload', - ...serverPlugins.map(p => genSafeVariableName(p.src)) + ...variables ])}` ].join('\n') } From c2ad0e7c2598ef8afd76348098c1fd5c625407cb Mon Sep 17 00:00:00 2001 From: Anthony Fu Date: Thu, 21 Jul 2022 23:24:52 +0800 Subject: [PATCH 2/4] chore: update --- packages/kit/src/internal/template.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/kit/src/internal/template.ts b/packages/kit/src/internal/template.ts index a200a654551..60ee9778c20 100644 --- a/packages/kit/src/internal/template.ts +++ b/packages/kit/src/internal/template.ts @@ -4,6 +4,7 @@ import { genSafeVariableName, genDynamicImport, genImport } from 'knitwork' import type { NuxtTemplate } from '@nuxt/schema' import { relative } from 'pathe' +import { hash } from 'ohash' export async function compileTemplate (template: NuxtTemplate, ctx: any) { const data = { ...ctx, options: template.options } @@ -30,15 +31,15 @@ const importSources = (sources: string | string[], root: string, { lazy = false } const variables: string[] = [] const imports: string[] = [] - sources.forEach((src) => { + for (const src of sources) { const path = relative(root, src) - const variable = genSafeVariableName(path) + const variable = genSafeVariableName(path) + hash(path) variables.push(variable) imports.push(lazy ? `const ${variable} = ${genDynamicImport(src, { comment: `webpackChunkName: ${JSON.stringify(src)}` })}` : genImport(src, variable) ) - }) + } return { variables, imports From 18d4d1ec122ee4247cc621d776edcc8db53c33ed Mon Sep 17 00:00:00 2001 From: Pooya Parsa Date: Thu, 21 Jul 2022 20:03:29 +0200 Subject: [PATCH 3/4] use more human friendly name --- packages/kit/src/internal/template.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/kit/src/internal/template.ts b/packages/kit/src/internal/template.ts index 60ee9778c20..46780b9dc23 100644 --- a/packages/kit/src/internal/template.ts +++ b/packages/kit/src/internal/template.ts @@ -33,7 +33,7 @@ const importSources = (sources: string | string[], root: string, { lazy = false const imports: string[] = [] for (const src of sources) { const path = relative(root, src) - const variable = genSafeVariableName(path) + hash(path) + const variable = genSafeVariableName(path).replace(/_(45|46|47)/g, '_') + '_' + hash(path) variables.push(variable) imports.push(lazy ? `const ${variable} = ${genDynamicImport(src, { comment: `webpackChunkName: ${JSON.stringify(src)}` })}` From f49c7c88397129b9a5030700d36c729adc43ed7d Mon Sep 17 00:00:00 2001 From: Pooya Parsa Date: Thu, 21 Jul 2022 20:08:02 +0200 Subject: [PATCH 4/4] refactor: variables => exports --- packages/kit/src/internal/template.ts | 6 +++--- packages/nuxt/src/core/templates.ts | 8 ++++---- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/kit/src/internal/template.ts b/packages/kit/src/internal/template.ts index 46780b9dc23..9be902eb7ec 100644 --- a/packages/kit/src/internal/template.ts +++ b/packages/kit/src/internal/template.ts @@ -29,19 +29,19 @@ const importSources = (sources: string | string[], root: string, { lazy = false if (!Array.isArray(sources)) { sources = [sources] } - const variables: string[] = [] + const exports: string[] = [] const imports: string[] = [] for (const src of sources) { const path = relative(root, src) const variable = genSafeVariableName(path).replace(/_(45|46|47)/g, '_') + '_' + hash(path) - variables.push(variable) + exports.push(variable) imports.push(lazy ? `const ${variable} = ${genDynamicImport(src, { comment: `webpackChunkName: ${JSON.stringify(src)}` })}` : genImport(src, variable) ) } return { - variables, + exports, imports } } diff --git a/packages/nuxt/src/core/templates.ts b/packages/nuxt/src/core/templates.ts index ea460d919f6..c92f3010faf 100644 --- a/packages/nuxt/src/core/templates.ts +++ b/packages/nuxt/src/core/templates.ts @@ -49,10 +49,10 @@ export const clientPluginTemplate = { getContents (ctx: TemplateContext) { const clientPlugins = ctx.app.plugins.filter(p => !p.mode || p.mode !== 'server') const rootDir = ctx.nuxt.options.rootDir - const { variables, imports } = templateUtils.importSources(clientPlugins.map(p => p.src), rootDir) + const { imports, exports } = templateUtils.importSources(clientPlugins.map(p => p.src), rootDir) return [ ...imports, - `export default ${genArrayFromRaw(variables)}` + `export default ${genArrayFromRaw(exports)}` ].join('\n') } } @@ -62,13 +62,13 @@ export const serverPluginTemplate = { getContents (ctx: TemplateContext) { const serverPlugins = ctx.app.plugins.filter(p => !p.mode || p.mode !== 'client') const rootDir = ctx.nuxt.options.rootDir - const { variables, imports } = templateUtils.importSources(serverPlugins.map(p => p.src), rootDir) + const { imports, exports } = templateUtils.importSources(serverPlugins.map(p => p.src), rootDir) return [ "import preload from '#app/plugins/preload.server'", ...imports, `export default ${genArrayFromRaw([ 'preload', - ...variables + ...exports ])}` ].join('\n') }