diff --git a/src/stringify.ts b/src/stringify.ts index c8078c3e..3784dd03 100644 --- a/src/stringify.ts +++ b/src/stringify.ts @@ -1,7 +1,4 @@ -import { - pathToName, - resolveImportMode, -} from './utils' +import { pathToName, resolveImportMode } from './utils' import type { ResolvedOptions } from './types' @@ -13,7 +10,8 @@ const singlelineCommentsRE = /\/\/.*/g function replaceFunction(_: any, value: any) { if (value instanceof Function || typeof value === 'function') { - const fnBody = value.toString() + const fnBody = value + .toString() .replace(multilineCommentsRE, '') .replace(singlelineCommentsRE, '') .replace(/(\t|\n|\r|\s)/g, '') @@ -28,6 +26,17 @@ function replaceFunction(_: any, value: any) { return value } +function getAsyncImportFunctionForResoler(resolver: string, path: string) { + switch (resolver) { + case 'react': + return `React.lazy(() => import('${path}'))` + case 'solid': + return `Solid.lazy(() => import('${path}'))` + default: + return `() => import('${path}')` + } +} + /** * Creates a stringified Vue Router route definition. */ @@ -39,31 +48,27 @@ export function stringifyRoutes( function componentReplacer(str: string, replaceStr: string, path: string) { const mode = resolveImportMode(path, options) - if (mode === 'sync') { - const importName = pathToName(path) - const importStr = `import ${importName} from "${path}"` - - // Only add import to array if it hasn't beed added before. - if (!imports.includes(importStr)) - imports.push(importStr) - - if (options.resolver === 'react') - return str.replace(replaceStr, `React.createElement(${importName})`) - else - return str.replace(replaceStr, importName) - } else { - if (options.resolver === 'react') - return str.replace(replaceStr, `React.createElement(React.lazy(() => import('${path}')))`) - else if (options.resolver === 'solid') - return str.replace(replaceStr, `Solid.lazy(() => import('${path}'))`) - else - return str.replace(replaceStr, `() => import('${path}')`) - } + const importName = pathToName(path) + + const importStr + = mode === 'sync' + ? `import ${importName} from "${path}"` + : `const ${importName} = ${getAsyncImportFunctionForResoler( + options.resolver, + path, + )}` + + // Only add import to array if it hasn't beed added before. + if (!imports.includes(importStr)) imports.push(importStr) + + if (options.resolver === 'react') + return str.replace(replaceStr, `React.createElement(${importName})`) + else + return str.replace(replaceStr, importName) } function functionReplacer(str: string, replaceStr: string, content: string) { - if (content.startsWith('function')) - return str.replace(replaceStr, content) + if (content.startsWith('function')) return str.replace(replaceStr, content) if (content.startsWith('_NuFrRa_')) return str.replace(replaceStr, content.slice(8)) @@ -71,8 +76,7 @@ export function stringifyRoutes( return str } - const stringRoutes = JSON - .stringify(preparedRoutes, replaceFunction) + const stringRoutes = JSON.stringify(preparedRoutes, replaceFunction) .replace(componentRE, componentReplacer) .replace(hasFunctionRE, functionReplacer) @@ -85,10 +89,11 @@ export function stringifyRoutes( export function generateClientCode(routes: any[], options: ResolvedOptions) { const { imports, stringRoutes } = stringifyRoutes(routes, options) - if (options.resolver === 'react') - imports.push('import React from \"react\"') + if (options.resolver === 'react') imports.unshift('import React from "react"') if (options.resolver === 'solid') - imports.push('import * as Solid from \"solid-js\"') + imports.unshift('import * as Solid from "solid-js"') - return `${imports.join(';\n')};\n\nconst routes = ${stringRoutes};\n\nexport default routes;` + return `${imports.join( + ';\n', + )};\n\nconst routes = ${stringRoutes};\n\nexport default routes;` }