From 49fd8057c7b8cdf7d431b04b0096b6d8636ab41a Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Tue, 30 Nov 2021 14:51:09 +0000 Subject: [PATCH] refactor: use `mlly` utilities https://github.com/unjs/mlly/pull/24 --- packages/bridge/src/vite/templates.ts | 13 ++++----- packages/kit/src/components.ts | 3 ++- packages/kit/src/internal/template.ts | 5 ++-- packages/nitro/src/build.ts | 3 ++- packages/nitro/src/rollup/config.ts | 4 +-- packages/nitro/src/rollup/plugins/assets.ts | 10 ++++--- .../src/rollup/plugins/dynamic-require.ts | 13 ++++----- .../nitro/src/rollup/plugins/middleware.ts | 16 ++++++----- packages/nitro/src/rollup/plugins/storage.ts | 3 ++- packages/nuxt3/src/auto-imports/module.ts | 3 ++- packages/nuxt3/src/auto-imports/utils.ts | 5 ++-- packages/nuxt3/src/components/loader.ts | 3 ++- packages/nuxt3/src/components/templates.ts | 13 +++++---- packages/nuxt3/src/core/templates.ts | 27 +++++++------------ packages/nuxt3/src/pages/module.ts | 11 ++++---- packages/nuxt3/src/pages/utils.ts | 9 ++++--- packages/vite/src/dev-bundler.ts | 8 +++--- 17 files changed, 77 insertions(+), 72 deletions(-) diff --git a/packages/bridge/src/vite/templates.ts b/packages/bridge/src/vite/templates.ts index ff69af9d865..1e08c2353db 100644 --- a/packages/bridge/src/vite/templates.ts +++ b/packages/bridge/src/vite/templates.ts @@ -2,6 +2,7 @@ import hash from 'hash-sum' import { resolve } from 'pathe' import type { Nuxt, NuxtApp } from '@nuxt/schema' +import { genImport, genObjectFromRawEntries } from 'mlly' type TemplateContext = { nuxt: Nuxt; @@ -18,10 +19,8 @@ export const middlewareTemplate = { filePath: resolve(srcDir, dir.middleware, m.src), id: m.name || m.src.replace(/[\\/]/g, '/').replace(/\.(js|ts)$/, '') })) - return `${_middleware.map(m => `import $${hash(m.id)} from ${JSON.stringify(m.filePath)}`).join('\n')} -const middleware = { -${_middleware.map(m => ` [${JSON.stringify(m.id)}]: $${hash(m.id)}`).join(',\n')} -} + return `${_middleware.map(m => genImport(m.filePath, `$${hash(m.id)}`)).join('\n')} +const middleware = ${genObjectFromRawEntries(_middleware.map(m => [m.id, `$${hash(m.id)}`]))} export default middleware` } } @@ -43,14 +42,12 @@ export const storeTemplate = { return `import Vue from 'vue' import Vuex from 'vuex' -${_storeModules.map(s => `import * as $${hash(s.id)} from ${JSON.stringify(s.filePath)}`).join('\n')} +${_storeModules.map(s => genImport(s.filePath, { name: '*', as: `$${hash(s.id)}` })).join('\n')} Vue.use(Vuex) const VUEX_PROPERTIES = ['state', 'getters', 'actions', 'mutations'] -const storeModules = { -${_storeModules.map(m => ` [${JSON.stringify(m.id)}]: $${hash(m.id)}`).join(',\n')} -} +const storeModules = ${genObjectFromRawEntries(_storeModules.map(m => [m.id, `$${hash(m.id)}`]))} export function createStore() { let store = normalizeRoot(storeModules.root || {}) diff --git a/packages/kit/src/components.ts b/packages/kit/src/components.ts index e81582dc563..f812980d29b 100644 --- a/packages/kit/src/components.ts +++ b/packages/kit/src/components.ts @@ -1,5 +1,6 @@ import { pascalCase, kebabCase } from 'scule' import type { ComponentsDir, Component } from '@nuxt/schema' +import { genDynamicImport } from 'mlly' import { useNuxt } from './context' import { ensureNuxtCompatibility } from './compatibility' @@ -43,7 +44,7 @@ export function addComponent (opts: AddComponentOptions) { shortPath: opts.filePath, async: false, level: 0, - asyncImport: `() => import(${JSON.stringify(opts.filePath)}).then(r => r['${opts.export || 'default'}'])`, + asyncImport: `${genDynamicImport(opts.filePath)}.then(r => r['${opts.export || 'default'}'])`, import: `require(${JSON.stringify(opts.filePath)})['${opts.export || 'default'}']`, ...opts diff --git a/packages/kit/src/internal/template.ts b/packages/kit/src/internal/template.ts index 1dda65b655a..6eabf35de87 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 hash from 'hash-sum' import { camelCase } from 'scule' import { basename, extname } from 'pathe' +import { genDynamicImport, genImport } from 'mlly' import type { NuxtTemplate } from '@nuxt/schema' @@ -33,9 +34,9 @@ const importSources = (sources: string | string[], { lazy = false } = {}) => { } return sources.map((src) => { if (lazy) { - return `const ${importName(src)} = () => import(${JSON.stringify(src)} /* webpackChunkName: ${JSON.stringify(src)} */)` + return `const ${importName(src)} = ${genDynamicImport(src, { comment: `webpackChunkName: ${JSON.stringify(src)}` })}` } - return `import ${importName(src)} from ${JSON.stringify(src)}` + return genImport(src, importName(src)) }).join('\n') } diff --git a/packages/nitro/src/build.ts b/packages/nitro/src/build.ts index e90f36bb0ca..5f166392241 100644 --- a/packages/nitro/src/build.ts +++ b/packages/nitro/src/build.ts @@ -2,6 +2,7 @@ import { relative, resolve, join } from 'pathe' import consola from 'consola' import * as rollup from 'rollup' import fse from 'fs-extra' +import { genDynamicImport } from 'mlly' import { printFSTree } from './utils/tree' import { getRollupConfig } from './rollup/config' import { hl, prettyPath, serializeTemplate, writeFile, isDirectory, readDirRecursively } from './utils' @@ -76,7 +77,7 @@ async function writeTypes (nitroContext: NitroContext) { if (typeof mw.handle !== 'string') { continue } const relativePath = relative(nitroContext._nuxt.buildDir, mw.handle).replace(/\.[a-z]+$/, '') routeTypes[mw.route] = routeTypes[mw.route] || [] - routeTypes[mw.route].push(`Awaited>`) + routeTypes[mw.route].push(`Awaited>`) } const lines = [ diff --git a/packages/nitro/src/rollup/config.ts b/packages/nitro/src/rollup/config.ts index 2b4b2d6da8d..ec9bd2e7c75 100644 --- a/packages/nitro/src/rollup/config.ts +++ b/packages/nitro/src/rollup/config.ts @@ -16,7 +16,7 @@ import { visualizer } from 'rollup-plugin-visualizer' import * as unenv from 'unenv' import type { Preset } from 'unenv' -import { sanitizeFilePath } from 'mlly' +import { sanitizeFilePath, genImport } from 'mlly' import { NitroContext } from '../context' import { resolvePath } from '../utils' import { pkgDir } from '../dirs' @@ -216,7 +216,7 @@ export const getRollupConfig = (nitroContext: NitroContext) => { // Polyfill rollupConfig.plugins.push(virtual({ - '#polyfill': env.polyfill.map(p => `import '${p}';`).join('\n') + '#polyfill': env.polyfill.map(p => genImport(p)).join('\n') })) // https://github.com/rollup/plugins/tree/master/packages/alias diff --git a/packages/nitro/src/rollup/plugins/assets.ts b/packages/nitro/src/rollup/plugins/assets.ts index 5e4ed0611c9..3b4104649d3 100644 --- a/packages/nitro/src/rollup/plugins/assets.ts +++ b/packages/nitro/src/rollup/plugins/assets.ts @@ -4,6 +4,7 @@ import createEtag from 'etag' import mime from 'mime' import { resolve } from 'pathe' import globby from 'globby' +import { genDynamicImport, genObjectFromRawEntries } from 'mlly' import virtual from './virtual' export interface AssetOptions { @@ -81,9 +82,12 @@ function normalizeKey (key) { function getAssetProd (assets: Record) { return ` -const _assets = {\n${Object.entries(assets).map(([id, asset]) => - ` ['${normalizeKey(id)}']: {\n import: () => import(${JSON.stringify(asset.fsPath)}).then(r => r.default || r),\n meta: ${JSON.stringify(asset.meta)}\n }` -).join(',\n')}\n} +const _assets = ${genObjectFromRawEntries( + Object.entries(assets).map(([id, asset]) => [normalizeKey(id), { + import: genDynamicImport(asset.fsPath, { interopDefault: true }), + meta: asset.meta + }]) +)} ${normalizeKey.toString()} diff --git a/packages/nitro/src/rollup/plugins/dynamic-require.ts b/packages/nitro/src/rollup/plugins/dynamic-require.ts index 9a209ac439c..62f28a9e57a 100644 --- a/packages/nitro/src/rollup/plugins/dynamic-require.ts +++ b/packages/nitro/src/rollup/plugins/dynamic-require.ts @@ -2,6 +2,7 @@ import { pathToFileURL } from 'url' import { resolve } from 'pathe' import globby from 'globby' import type { Plugin } from 'rollup' +import { genDynamicImport, genObjectFromRawEntries, genImport } from 'mlly' import { serializeImportName } from '../../utils' const PLUGIN_NAME = 'dynamic-require' @@ -36,7 +37,7 @@ export function dynamicRequire ({ dir, ignore, inline }: Options): Plugin { name: PLUGIN_NAME, transform (code: string, _id: string) { return { - code: code.replace(DYNAMIC_REQUIRE_RE, `import(${JSON.stringify(HELPER_DYNAMIC)}).then(r => r.default || r).then(dynamicRequire => dynamicRequire($1)).then`), + code: code.replace(DYNAMIC_REQUIRE_RE, `${genDynamicImport(HELPER_DYNAMIC, { wrapper: false, interopDefault: true })}.then(dynamicRequire => dynamicRequire($1)).then`), map: null } }, @@ -89,10 +90,8 @@ async function getWebpackChunkMeta (src: string) { } function TMPL_INLINE ({ chunks }: TemplateContext) { - return `${chunks.map(i => `import * as ${i.name} from ${JSON.stringify(i.src)}`).join('\n')} -const dynamicChunks = { - ${chunks.map(i => ` ['${i.id}']: ${i.name}`).join(',\n')} -}; + return `${chunks.map(i => genImport(i.src, { name: '*', as: i.name }))}.join('\n')} +const dynamicChunks = ${genObjectFromRawEntries(chunks.map(i => [i.id, i.name]))}; export default function dynamicRequire(id) { return Promise.resolve(dynamicChunks[id]); @@ -101,9 +100,7 @@ export default function dynamicRequire(id) { function TMPL_LAZY ({ chunks }: TemplateContext) { return ` -const dynamicChunks = { -${chunks.map(i => ` ['${i.id}']: () => import(${JSON.stringify(i.src)})`).join(',\n')} -}; +const dynamicChunks = ${genObjectFromRawEntries(chunks.map(i => [i.id, genDynamicImport(i.src)]))}; export default function dynamicRequire(id) { return dynamicChunks[id](); diff --git a/packages/nitro/src/rollup/plugins/middleware.ts b/packages/nitro/src/rollup/plugins/middleware.ts index cf6b960cdc8..e3cbf4c39ec 100644 --- a/packages/nitro/src/rollup/plugins/middleware.ts +++ b/packages/nitro/src/rollup/plugins/middleware.ts @@ -3,6 +3,7 @@ import { relative } from 'pathe' import table from 'table' import isPrimitive from 'is-primitive' import { isDebug } from 'std-env' +import { genArrayFromRaw, genDynamicImport, genImport } from 'mlly' import type { ServerMiddleware } from '../../server/middleware' import virtual from './virtual' @@ -35,15 +36,18 @@ export function middleware (getMiddleware: () => ServerMiddleware[]) { const lazyImports = unique(middleware.filter(m => m.lazy !== false && !imports.includes(m.handle)).map(m => m.handle)) return ` - ${imports.map(handle => `import ${getImportId(handle)} from ${JSON.stringify(handle)};`).join('\n')} +${imports.map(handle => `${genImport(handle, getImportId(handle))};`).join('\n')} - ${lazyImports.map(handle => `const ${getImportId(handle)} = () => import(${JSON.stringify(handle)});`).join('\n')} +${lazyImports.map(handle => `const ${getImportId(handle)} = ${genDynamicImport(handle)};`).join('\n')} - const middleware = [ - ${middleware.map(m => `{ route: '${m.route}', handle: ${getImportId(m.handle)}, lazy: ${m.lazy || true}, promisify: ${m.promisify !== undefined ? m.promisify : true} }`).join(',\n')} - ]; +const middleware = ${genArrayFromRaw(middleware.map(m => ({ + route: JSON.stringify(m.route), + handle: getImportId(m.handle), + lazy: m.lazy || true, + promisify: m.promisify !== undefined ? m.promisify : true +})))}; - export default middleware +export default middleware ` } } diff --git a/packages/nitro/src/rollup/plugins/storage.ts b/packages/nitro/src/rollup/plugins/storage.ts index 85441c1b5c5..d508c60ad2b 100644 --- a/packages/nitro/src/rollup/plugins/storage.ts +++ b/packages/nitro/src/rollup/plugins/storage.ts @@ -1,4 +1,5 @@ import virtual from '@rollup/plugin-virtual' +import { genImport } from 'mlly' import { serializeImportName } from '../../utils' export interface StorageOptions { @@ -35,7 +36,7 @@ export function storage (opts: StorageOptions) { import { createStorage } from 'unstorage' import { assets } from '#assets' -${driverImports.map(i => `import ${serializeImportName(i)} from ${JSON.stringify(i)}`).join('\n')} +${driverImports.map(i => genImport(i, serializeImportName(i))).join('\n')} export const storage = createStorage({}) diff --git a/packages/nuxt3/src/auto-imports/module.ts b/packages/nuxt3/src/auto-imports/module.ts index 4602e88a6bd..8e0bad0aea7 100644 --- a/packages/nuxt3/src/auto-imports/module.ts +++ b/packages/nuxt3/src/auto-imports/module.ts @@ -1,6 +1,7 @@ import { addVitePlugin, addWebpackPlugin, defineNuxtModule, addTemplate, resolveAlias, addPluginTemplate, useNuxt } from '@nuxt/kit' import type { AutoImportsOptions } from '@nuxt/schema' import { isAbsolute, join, relative, resolve, normalize } from 'pathe' +import { genDynamicImport } from 'mlly' import { TransformPlugin } from './transform' import { Nuxt3AutoImports } from './imports' import { scanForComposables } from './composables' @@ -126,7 +127,7 @@ function generateDts (ctx: AutoImportContext) { write: true, getContents: () => `// Generated by auto imports declare global { -${ctx.autoImports.map(i => ` const ${i.as}: typeof import(${JSON.stringify(r(i.from))})['${i.name}']`).join('\n')} +${ctx.autoImports.map(i => ` const ${i.as}: typeof ${genDynamicImport(r(i.from), { wrapper: false })}['${i.name}']`).join('\n')} } export {} diff --git a/packages/nuxt3/src/auto-imports/utils.ts b/packages/nuxt3/src/auto-imports/utils.ts index 1c073558ca2..c73da253a35 100644 --- a/packages/nuxt3/src/auto-imports/utils.ts +++ b/packages/nuxt3/src/auto-imports/utils.ts @@ -1,4 +1,5 @@ import type { AutoImport } from '@nuxt/schema' +import { genExport, genImport } from 'mlly' export function toImportModuleMap (autoImports: AutoImport[], isCJS = false) { const aliasKeyword = isCJS ? ' : ' : ' as ' @@ -24,7 +25,7 @@ export function toImports (autoImports: AutoImport[], isCJS = false) { .join('\n') } else { return Object.entries(map) - .map(([name, imports]) => `import { ${Array.from(imports).join(', ')} } from ${JSON.stringify(name)};`) + .map(([name, imports]) => genImport(name, Array.from(imports))) .join('\n') } } @@ -32,7 +33,7 @@ export function toImports (autoImports: AutoImport[], isCJS = false) { export function toExports (autoImports: AutoImport[]) { const map = toImportModuleMap(autoImports, false) return Object.entries(map) - .map(([name, imports]) => `export { ${Array.from(imports).join(', ')} } from '${name}';`) + .map(([name, imports]) => genExport(name, imports)) .join('\n') } diff --git a/packages/nuxt3/src/components/loader.ts b/packages/nuxt3/src/components/loader.ts index 7477d178552..573c8223f2a 100644 --- a/packages/nuxt3/src/components/loader.ts +++ b/packages/nuxt3/src/components/loader.ts @@ -1,6 +1,7 @@ import { createUnplugin } from 'unplugin' import { parseQuery, parseURL } from 'ufo' import { Component } from '@nuxt/schema' +import { genImport } from 'mlly' interface LoaderOptions { getComponents(): Component[] @@ -36,7 +37,7 @@ function transform (content: string, components: Component[]) { if (component) { const identifier = map.get(component) || `__nuxt_component_${num++}` map.set(component, identifier) - imports += `import ${identifier} from "${component.filePath}";` + imports += genImport(component.filePath, identifier) return ` ${identifier}` } // no matched diff --git a/packages/nuxt3/src/components/templates.ts b/packages/nuxt3/src/components/templates.ts index 2e8df9576c7..52a4bc98786 100644 --- a/packages/nuxt3/src/components/templates.ts +++ b/packages/nuxt3/src/components/templates.ts @@ -1,6 +1,7 @@ import { relative } from 'pathe' import type { Component } from '@nuxt/schema' +import { genDynamicImport, genObjectFromRawEntries } from 'mlly' export type ComponentsTemplateOptions = { buildDir?: string @@ -27,14 +28,12 @@ export const componentsTemplate = { getContents ({ options }: { options: ComponentsTemplateOptions }) { return `import { defineAsyncComponent } from 'vue' -const components = { -${options.components.filter(c => c.global !== false).map((c) => { +const components = ${genObjectFromRawEntries(options.components.filter(c => c.global !== false).map((c) => { const exp = c.export === 'default' ? 'c.default || c' : `c['${c.export}']` - const magicComments = createImportMagicComments(c) + const comment = createImportMagicComments(c) - return ` '${c.pascalName}': defineAsyncComponent(() => import(${JSON.stringify(c.filePath)} /* ${magicComments} */).then(c => ${exp}))` -}).join(',\n')} -} + return [c.pascalName, `defineAsyncComponent(${genDynamicImport(c.filePath, { comment })}.then(c => ${exp}))`] +}))} export default function (nuxtApp) { for (const name in components) { @@ -52,7 +51,7 @@ export const componentsTypeTemplate = { getContents: ({ options }: { options: ComponentsTemplateOptions }) => `// Generated by components discovery declare module 'vue' { export interface GlobalComponents { -${options.components.map(c => ` '${c.pascalName}': typeof import(${JSON.stringify(relative(options.buildDir, c.filePath))})['${c.export}']`).join(',\n')} +${options.components.map(c => ` '${c.pascalName}': typeof ${genDynamicImport(relative(options.buildDir, c.filePath), { wrapper: false })}['${c.export}']`).join(',\n')} } } export {} diff --git a/packages/nuxt3/src/core/templates.ts b/packages/nuxt3/src/core/templates.ts index 9d021ec1168..911bd6fb567 100644 --- a/packages/nuxt3/src/core/templates.ts +++ b/packages/nuxt3/src/core/templates.ts @@ -1,5 +1,6 @@ import { templateUtils } from '@nuxt/kit' import type { Nuxt, NuxtApp } from '@nuxt/schema' +import { genArrayFromRaw, genDynamicImport, genExport, genImport } from 'mlly' import { relative } from 'pathe' @@ -11,23 +12,17 @@ type TemplateContext = { // TODO: Use an alias export const appComponentTemplate = { filename: 'app-component.mjs', - getContents (ctx: TemplateContext) { - return `export { default } from ${JSON.stringify(ctx.app.mainComponent)}` - } + getContents: (ctx: TemplateContext) => genExport(ctx.app.mainComponent, ['default']) } // TODO: Use an alias export const rootComponentTemplate = { filename: 'root-component.mjs', - getContents (ctx: TemplateContext) { - return `export { default } from ${JSON.stringify(ctx.app.rootComponent)}` - } + getContents: (ctx: TemplateContext) => genExport(ctx.app.rootComponent, ['default']) } export const cssTemplate = { filename: 'css.mjs', - getContents (ctx: TemplateContext) { - return ctx.nuxt.options.css.map(i => `import ${JSON.stringify(i.src || i)};`).join('\n') - } + getContents: (ctx: TemplateContext) => ctx.nuxt.options.css.map(i => genImport(i.src || i)).join('\n') } export const clientPluginTemplate = { @@ -36,9 +31,7 @@ export const clientPluginTemplate = { const clientPlugins = ctx.app.plugins.filter(p => !p.mode || p.mode !== 'server') return [ templateUtils.importSources(clientPlugins.map(p => p.src)), - 'export default [', - clientPlugins.map(p => templateUtils.importName(p.src)).join(',\n '), - ']' + `export default ${genArrayFromRaw(clientPlugins.map(p => templateUtils.importName(p.src)))}` ].join('\n') } } @@ -50,10 +43,10 @@ export const serverPluginTemplate = { return [ "import preload from '#app/plugins/preload.server'", templateUtils.importSources(serverPlugins.map(p => p.src)), - 'export default [', - ' preload,', - serverPlugins.map(p => templateUtils.importName(p.src)).join(',\n '), - ']' + `export default ${genArrayFromRaw([ + 'preload', + ...serverPlugins.map(p => templateUtils.importName(p.src)) + ])}` ].join('\n') } } @@ -91,7 +84,7 @@ type Decorate> = { [K in keyof T as K extends stri type InjectionType = A extends Plugin ? Decorate : unknown -type NuxtAppInjections = \n ${tsImports.map(p => `InjectionType`).join(' &\n ')} +type NuxtAppInjections = \n ${tsImports.map(p => `InjectionType`).join(' &\n ')} declare module '#app' { interface NuxtApp extends NuxtAppInjections { } diff --git a/packages/nuxt3/src/pages/module.ts b/packages/nuxt3/src/pages/module.ts index 2955848fb30..0c6585b2297 100644 --- a/packages/nuxt3/src/pages/module.ts +++ b/packages/nuxt3/src/pages/module.ts @@ -1,6 +1,7 @@ import { existsSync } from 'fs' import { defineNuxtModule, addTemplate, addPlugin, templateUtils } from '@nuxt/kit' import { resolve } from 'pathe' +import { genDynamicImport, genObjectFromRawEntries } from 'mlly' import { distDir } from '../dirs' import { resolveLayouts, resolvePagesRoutes, addComponentToRoutes } from './utils' @@ -44,8 +45,8 @@ export default defineNuxtModule({ async getContents () { const pages = await resolvePagesRoutes(nuxt) await nuxt.callHook('pages:extend', pages) - const serializedRoutes = addComponentToRoutes(pages) - return `export default ${templateUtils.serialize(serializedRoutes)}` + const routeString = addComponentToRoutes(pages) + return `export default ${routeString}` } }) @@ -54,12 +55,12 @@ export default defineNuxtModule({ filename: 'layouts.mjs', async getContents () { const layouts = await resolveLayouts(nuxt) - const layoutsObject = Object.fromEntries(layouts.map(({ name, file }) => { - return [name, `{defineAsyncComponent({ suspensible: false, loader: () => import(${JSON.stringify(file)}) })}`] + const layoutsObject = genObjectFromRawEntries(layouts.map(({ name, file }) => { + return [name, `defineAsyncComponent({ suspensible: false, loader: ${genDynamicImport(file)} })`] })) return [ 'import { defineAsyncComponent } from \'vue\'', - `export default ${templateUtils.serialize(layoutsObject)}` + `export default ${layoutsObject}` ].join('\n') } }) diff --git a/packages/nuxt3/src/pages/utils.ts b/packages/nuxt3/src/pages/utils.ts index 90f9ee22373..3b7ade0739e 100644 --- a/packages/nuxt3/src/pages/utils.ts +++ b/packages/nuxt3/src/pages/utils.ts @@ -3,6 +3,7 @@ import { encodePath } from 'ufo' import type { Nuxt, NuxtRoute } from '@nuxt/schema' import { resolveFiles } from '@nuxt/kit' import { kebabCase } from 'scule' +import { genDynamicImport, genArrayFromRaw } from 'mlly' enum SegmentParserState { initial, @@ -226,9 +227,9 @@ export async function resolveLayouts (nuxt: Nuxt) { } export function addComponentToRoutes (routes: NuxtRoute[]) { - return routes.map(route => ({ - ...route, + return genArrayFromRaw(routes.map(route => ({ + ...Object.fromEntries(Object.entries(route).map(([key, value]) => [key, JSON.stringify(value)])), children: route.children ? addComponentToRoutes(route.children) : [], - component: `{() => import(${JSON.stringify(route.file)})}` - })) + component: genDynamicImport(route.file) + }))) } diff --git a/packages/vite/src/dev-bundler.ts b/packages/vite/src/dev-bundler.ts index c9126e4a253..2db5216626c 100644 --- a/packages/vite/src/dev-bundler.ts +++ b/packages/vite/src/dev-bundler.ts @@ -3,6 +3,7 @@ import { existsSync } from 'fs' import { resolve } from 'pathe' import * as vite from 'vite' import { ExternalsOptions, isExternal as _isExternal, ExternalsDefaults } from 'externality' +import { genDynamicImport, genObjectFromRawEntries } from 'mlly' import { hashId } from './utils' export interface TransformChunk { @@ -73,7 +74,7 @@ async function transformRequest (opts: TransformOptions, id: string) { if (await isExternal(opts, id)) { return { - code: `(global, exports, importMeta, ssrImport, ssrDynamicImport, ssrExportAll) => import(${JSON.stringify((pathToFileURL(id)))}).then(r => { exports.default = r.default; ssrExportAll(r) }).catch(e => { console.error(e); throw new Error(${JSON.stringify(`[vite dev] Error loading external "${id}".`)}) })`, + code: `(global, exports, importMeta, ssrImport, ssrDynamicImport, ssrExportAll) => ${genDynamicImport(pathToFileURL(id).toString(), { wrapper: false })}.then(r => { exports.default = r.default; ssrExportAll(r) }).catch(e => { console.error(e); throw new Error(${JSON.stringify(`[vite dev] Error loading external "${id}".`)}) })`, deps: [], dynamicDeps: [] } @@ -146,8 +147,9 @@ export async function bundleRequest (opts: TransformOptions, entryURL: string) { const ${hashId(chunk.id)} = ${chunk.code} `).join('\n') - const manifestCode = 'const __modules__ = {\n' + - chunks.map(chunk => ` ${JSON.stringify(chunk.id)}: ${hashId(chunk.id)}`).join(',\n') + '\n}' + const manifestCode = `const __modules__ = ${ + genObjectFromRawEntries(chunks.map(chunk => [chunk.id, hashId(chunk.id)])) + }` // https://github.com/vitejs/vite/blob/main/packages/vite/src/node/ssr/ssrModuleLoader.ts const ssrModuleLoader = `