feat: updated stringify for async importmode

hannoeru · Mar 18, 2022 · 33c043a · 33c043a
1 parent 46e526b
commit 33c043a
Showing 1 changed file with 38 additions and 33 deletions.
diff --git 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,40 +48,35 @@ 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))
 
     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;`
 }