feat: auto detect route entry

Author: Daydreamer-riri

README.md

@@ -157,7 +157,7 @@ const route = {
   entry: 'src/pages/nest/[b].tsx',
   // To determine which paths will be pre-rendered
   getStaticPaths: () => ['nest/b1', 'nest/b2'],
-},
+}
 ```
 
 ## lazy

examples/lazy-pages/src/App.tsx

@@ -12,19 +12,16 @@ export const routes: RouteRecord[] = [
       {
         path: 'a',
         lazy: () => import('./pages/a'),
-        // Component: React.lazy(() => import('./pages/a')),
       },
       {
         index: true,
         lazy: () => defaultToComponent(import('./pages/index')),
-        entry: 'src/pages/index.tsx',
       },
       {
         path: 'nest/:b',
         lazy: () => defaultToComponent(import('./pages/nest/[b]')),
       },
     ],
-    entry: 'src/Layout.tsx',
   },
 ]
 

examples/multiple-pages/src/App.tsx

@@ -7,25 +7,26 @@ const Layout = React.lazy(() => import('./Layout'))
 export const routes: RouteRecord[] = [
   {
     path: '/',
-    element: <Layout />,
+    Component: Layout,
     children: [
       {
         path: 'a',
         Component: React.lazy(() => import('./pages/a')),
-        entry: 'src/pages/a.tsx',
       },
       {
         index: true,
         Component: React.lazy(() => import('./pages/index')),
-        entry: 'src/pages/index.tsx',
       },
       {
         path: 'nest/*',
-        Component: React.lazy(() => import('./pages/nest/[b]')),
-        entry: 'src/pages/nest/[b].tsx',
+        lazy: async () => {
+          await import('./components/load-comp-1')
+          return {
+            Component: (await import('./pages/nest/[b]')).Component,
+          }
+        },
         getStaticPaths: () => ['nest/b1', 'nest/b2'],
       },
     ],
-    entry: 'src/Layout.tsx',
   },
 ]

examples/multiple-pages/vite.config.ts

@@ -9,6 +9,7 @@ export default defineConfig({
     // It will cause Hydration Failed
     // formatting: 'minify',
     mock: true,
+    crittersOptions: false,
   },
   server: {
     headers: {

examples/styled-components/src/App.tsx

@@ -30,6 +30,5 @@ export const routes: RouteRecord[] = [
     path: '/',
     element: <Layout />,
     children,
-    entry: 'src/Layout.tsx',
   },
 ]

examples/with-loader/src/main.tsx

@@ -7,7 +7,6 @@ const routes: RouteRecord[] = [
   {
     index: true,
     lazy: () => import('./pages'),
-    entry: 'src/pages/index.tsx',
   },
   {
     id: 'doc?s',

src/node/assets.ts

@@ -0,0 +1,88 @@
+import { matchRoutes } from 'react-router-dom'
+import type { RouteRecord } from '../types'
+import type { Manifest, SSRManifest } from './build'
+
+export const DYNAMIC_IMPORT_REGEX = /import\("([^)]+)"\)/g
+export enum AssetType {
+  style = 'style',
+  script = 'script',
+  image = 'image',
+  font = 'font',
+}
+
+interface CollectAssetsOpts {
+  routes: RouteRecord[]
+  locationArg: string
+  base: string
+  serverManifest: Manifest
+  manifest: Manifest
+  ssrManifest: SSRManifest
+}
+
+export function collectAssets({
+  routes,
+  locationArg,
+  base,
+  serverManifest,
+  manifest,
+  ssrManifest,
+}: CollectAssetsOpts) {
+  const matches = matchRoutes([...routes], locationArg, base)
+  const dynamicImports = new Set<string>()
+  matches?.forEach(item => {
+    let lazyStr = ''
+    if (item.route.lazy) {
+      lazyStr += item.route.lazy.toString()
+    }
+    // @ts-expect-error lazy
+    if (item.route.Component?._payload?._result) {
+      // @ts-expect-error lazy
+      lazyStr += item.route.Component._payload._result.toString()
+    }
+    const match = lazyStr.matchAll(DYNAMIC_IMPORT_REGEX)
+    for (const m of match) {
+      dynamicImports.add(m[1].split('/').at(-1) ?? '')
+    }
+  })
+  const entries = new Set<string>()
+  const manifestEntries = [...Object.entries(serverManifest)]
+  dynamicImports.forEach(name => {
+    const result = manifestEntries.find(([_, value]) => value.file.endsWith(name))
+    if (result) {
+      entries.add(result[0])
+    }
+  })
+
+  const modules = collectModulesForEntries(manifest, entries)
+  const assets = new Set<string>()
+  Array.from(modules).forEach(id => {
+    const files = ssrManifest[id] || []
+    files.forEach(file => {
+      assets.add(file)
+    })
+  })
+  return assets
+}
+
+function collectModulesForEntries(manifest: Manifest, entries: Set<string> | undefined) {
+  const mods = new Set<string>()
+  if (!entries)
+    return mods
+
+  for (const entry of entries)
+    collectModules(manifest, entry, mods)
+
+  return mods
+}
+
+function collectModules(manifest: Manifest, entry: string | undefined, mods = new Set<string>()) {
+  if (!entry)
+    return mods
+
+  mods.add(entry)
+  manifest[entry]?.dynamicImports?.forEach(item => {
+    collectModules(manifest, item, mods)
+  })
+
+  return mods
+}

src/node/build.ts

@@ -16,7 +16,9 @@ import { getCritters } from './critial'
 import { render } from './server'
 import { SCRIPT_COMMENT_PLACEHOLDER, detectEntry, renderHTML } from './html'
 import { renderPreloadLinks } from './preload-links'
+import { collectAssets } from './assets'
 
+const dotVitedir = Number.parseInt(viteVersion) >= 5 ? ['.vite'] : []
 export type SSRManifest = Record<string, string[]>
 export interface ManifestItem {
   css?: string[]
@@ -111,6 +113,7 @@ export async function build(ssgOptions: Partial<ViteReactSSGOptions> = {}, viteC
   await viteBuild(mergeConfig(viteConfig, {
     build: {
       ssr: ssrEntry,
+      manifest: true,
       outDir: ssgOut,
       minify: false,
       cssCodeSplit: false,
@@ -133,6 +136,7 @@ export async function build(ssgOptions: Partial<ViteReactSSGOptions> = {}, viteC
   const prefix = (format === 'esm' && process.platform === 'win32') ? 'file://' : ''
   const ext = format === 'esm' ? '.mjs' : '.cjs'
   const serverEntry = join(prefix, ssgOut, parse(ssrEntry).name + ext)
+  const serverManifest: Manifest = JSON.parse(await fs.readFile(join(ssgOut, ...dotVitedir, 'manifest.json'), 'utf-8'))
 
   const _require = createRequire(import.meta.url)
 
@@ -142,7 +146,7 @@ export async function build(ssgOptions: Partial<ViteReactSSGOptions> = {}, viteC
   const includedRoutes = serverEntryIncludedRoutes || configIncludedRoutes
   const { routes } = await createRoot(false)
 
-  const { paths, pathToEntry } = await routesToPaths(routes)
+  const { paths } = await routesToPaths(routes)
 
   let routesPaths = includeAllRoutes
     ? paths
@@ -158,7 +162,6 @@ export async function build(ssgOptions: Partial<ViteReactSSGOptions> = {}, viteC
   if (critters)
     console.log(`${gray('[vite-react-ssg]')} ${blue('Critical CSS generation enabled via `critters`')}`)
 
-  const dotVitedir = Number.parseInt(viteVersion) >= 5 ? ['.vite'] : []
   const ssrManifest: SSRManifest = JSON.parse(await fs.readFile(join(out, ...dotVitedir, 'ssr-manifest.json'), 'utf-8'))
   const manifest: Manifest = JSON.parse(await fs.readFile(join(out, ...dotVitedir, 'manifest.json'), 'utf-8'))
   let indexHTML = await fs.readFile(join(out, 'index.html'), 'utf-8')
@@ -182,6 +185,8 @@ export async function build(ssgOptions: Partial<ViteReactSSGOptions> = {}, viteC
         const fetchUrl = `${withTrailingSlash(base)}${removeLeadingSlash(path)}`
         const request = createRequest(fetchUrl)
 
+        const assets = !app ? collectAssets({ routes: [...routes], locationArg: fetchUrl, base, serverManifest, manifest, ssrManifest }) : new Set<string>()
+
         const { appHTML, bodyAttributes, htmlAttributes, metaAttributes, styleTag, routerContext } = await render(app ?? [...routes], request, styleCollector, base)
         staticLoaderDataManifest[path] = routerContext?.loaderData
 
@@ -199,9 +204,7 @@ export async function build(ssgOptions: Partial<ViteReactSSGOptions> = {}, viteC
 
         const jsdom = new JSDOM(renderedHTML)
 
-        const modules = collectModulesForEntrys(manifest, pathToEntry?.[path])
-
-        renderPreloadLinks(jsdom.window.document, modules, ssrManifest)
+        renderPreloadLinks(jsdom.window.document, assets)
 
         const html = jsdom.serialize()
         let transformed = (await onPageRendered?.(path, html, appCtx)) || html
@@ -298,26 +301,3 @@ async function formatHtml(html: string, formatting: ViteReactSSGOptions['formatt
   }
   return html
 }
-
-function collectModulesForEntrys(manifest: Manifest, entrys: Set<string> | undefined) {
-  const mods = new Set<string>()
-  if (!entrys)
-    return mods
-
-  for (const entry of entrys)
-    collectModules(manifest, entry, mods)
-
-  return mods
-}
-
-function collectModules(manifest: Manifest, entry: string | undefined, mods = new Set<string>()) {
-  if (!entry)
-    return mods
-
-  mods.add(entry)
-  manifest[entry]?.dynamicImports?.forEach(item => {
-    collectModules(manifest, item, mods)
-  })
-
-  return mods
-}

src/node/dev.ts

@@ -88,7 +88,7 @@ export async function printServerInfo(server: ViteDevServer, onlyUrl = false) {
       { clear: !server.config.logger.hasWarned },
   )
   info(
-      `${cyan(`\n  VITE v${viteVersion}`) + dim(ssrReadyMessage)}\n`,
+        `${cyan(`\n  VITE v${viteVersion}`) + dim(ssrReadyMessage)}\n`,
   )
 
   info(

src/node/preload-links.ts

@@ -1,21 +1,8 @@
-import type { SSRManifest } from './build'
-
-export function renderPreloadLinks(document: Document, modules: Set<string>, ssrManifest: SSRManifest) {
+export function renderPreloadLinks(document: Document, assets: Set<string>) {
   const seen = new Set()
 
-  const preloadLinks: string[] = []
-
-  // preload modules
-  Array.from(modules).forEach(id => {
-    const files = ssrManifest[id] || []
-    files.forEach(file => {
-      if (!preloadLinks.includes(file))
-        preloadLinks.push(file)
-    })
-  })
-
-  if (preloadLinks) {
-    preloadLinks.forEach(file => {
+  if (assets) {
+    assets.forEach(file => {
       if (!seen.has(file)) {
         seen.add(file)
         renderPreloadLink(document, file)
@@ -39,6 +26,23 @@ function renderPreloadLink(document: Document, file: string) {
       crossOrigin: '',
     })
   }
+  else if (file.endsWith('.woff') || file.endsWith('.woff2') || file.endsWith('.ttf')) {
+    appendLink(document, {
+      rel: 'preload',
+      as: 'font',
+      type: 'font/woff2',
+      href: file,
+      crossOrigin: '',
+    })
+  }
+  else if (file.endsWith('.png') || file.endsWith('.jpg') || file.endsWith('.jpeg') || file.endsWith('.webp') || file.endsWith('.gif') || file.endsWith('.ico') || file.endsWith('.svg')) {
+    appendLink(document, {
+      rel: 'preload',
+      as: 'image',
+      href: file,
+      crossOrigin: '',
+    })
+  }
 }
 
 function createLink(document: Document) {