refactor: improve react framework for bundle mode

Author: ije

framework/react/bootstrap.ts

@@ -3,23 +3,19 @@ import { createElement } from 'https://esm.sh/react'
 import { hydrate, render } from 'https://esm.sh/react-dom'
 import { reModuleExt } from '../../shared/constants.ts'
 import { Route, RouteModule, Routing } from '../core/routing.ts'
-import { AlephRoot, importModule } from './root.ts'
+import AlephAppRoot from './root.ts'
+import { importModule } from './util.ts'
 
-export default async function bootstrap({
-    baseUrl,
-    defaultLocale,
-    locales,
-    routes,
-    preloadModules,
-    renderMode
-}: {
+type BootstrapConfig = {
     baseUrl: string
     defaultLocale: string
     locales: string[]
     routes: Route[]
     preloadModules: RouteModule[],
     renderMode: 'ssr' | 'spa'
-}) {
+}
+
+export default async function bootstrap({ baseUrl, defaultLocale, locales, routes, preloadModules, renderMode }: BootstrapConfig) {
     const { document } = window as any
     const ssrDataEl = document.querySelector('#ssr-data')
     const routing = new Routing(routes, baseUrl, defaultLocale, locales)
@@ -53,7 +49,7 @@ export default async function bootstrap({
     }
 
     const rootEl = createElement(
-        AlephRoot,
+        AlephAppRoot,
         {
             url,
             routing,

framework/react/root.ts

@@ -1,15 +1,14 @@
 import type { ComponentType } from 'https://esm.sh/react'
 import { createElement, useCallback, useEffect, useState } from 'https://esm.sh/react'
-import { hashShort, reModuleExt } from '../../shared/constants.ts'
 import util from '../../shared/util.ts'
 import type { RouterURL } from '../../types.ts'
 import events from '../core/events.ts'
 import { RouteModule, Routing } from '../core/routing.ts'
 import { RouterContext } from './context.ts'
 import { E400MissingDefaultExportAsComponent, E404Page, ErrorBoundary } from './error.ts'
-import { createPageProps, isLikelyReactComponent } from './util.ts'
+import { createPageProps, importModule, isLikelyReactComponent } from './util.ts'
 
-export function AlephRoot({
+export default function AlephAppRoot({
     url,
     routing,
     sysComponents,
@@ -192,23 +191,3 @@ export function AlephRoot({
         )
     )
 }
-
-export function importModule(baseUrl: string, mod: RouteModule, forceRefetch = false): Promise<any> {
-    const { __ALEPH, document } = window as any
-    const src = util.cleanPath(baseUrl + '/_aleph/' + mod.url.replace(reModuleExt, '') + `.${mod.hash.slice(0, hashShort)}.js`) + (forceRefetch ? `?t=${Date.now()}` : '')
-    if (__ALEPH) {
-        return new Promise((resolve, reject) => {
-            const script = document.createElement('src')
-            script.src = src
-            script.onload = () => {
-                resolve(__ALEPH.pack[mod.url])
-            }
-            script.onerror = (err: Error) => {
-                reject(err)
-            }
-            document.body.appendChild(script)
-        })
-    } else {
-        return import(src)
-    }
-}

framework/react/util.ts

@@ -1,6 +1,7 @@
 import type { ComponentType } from 'https://esm.sh/react'
-import { reModuleExt } from '../../shared/constants.ts'
+import { hashShort, reModuleExt } from '../../shared/constants.ts'
 import util from '../../shared/util.ts'
+import { RouteModule } from '../core/routing.ts'
 import { E400MissingDefaultExportAsComponent } from './error.ts'
 
 const symbolFor = typeof Symbol === 'function' && Symbol.for
@@ -12,14 +13,40 @@ export interface PageProps {
     pageProps: Partial<PageProps> & { name?: string }
 }
 
+export function importModule(baseUrl: string, mod: RouteModule, forceRefetch = false): Promise<any> {
+    const { __ALEPH, document } = window as any
+    if (!__ALEPH || mod.url.startsWith('/pages/')) {
+        const src = util.cleanPath(baseUrl + '/_aleph/' + mod.url.replace(reModuleExt, '') + `.${mod.hash.slice(0, hashShort)}.js`) + (forceRefetch ? `?t=${Date.now()}` : '')
+        if (__ALEPH) {
+            return new Promise((resolve, reject) => {
+                const script = document.createElement('script')
+                script.onload = () => {
+                    resolve(__ALEPH.pack[mod.url])
+                }
+                script.onerror = (err: Error) => {
+                    reject(err)
+                }
+                script.src = src
+                document.body.appendChild(script)
+            })
+        } else {
+            return import(src)
+        }
+    } else if (__ALEPH && mod.url in __ALEPH.pack) {
+        return Promise.resolve(__ALEPH.pack[mod.url])
+    } else {
+        return Promise.reject(new Error(`Module '${mod.url}' not found`))
+    }
+}
+
 export function isLikelyReactComponent(type: any): Boolean {
     switch (typeof type) {
         case 'function':
             if (type.prototype != null) {
                 if (type.prototype.isReactComponent) {
                     return true
                 }
-                const ownNames = Object.getOwnPropertyNames(type.prototype);
+                const ownNames = Object.getOwnPropertyNames(type.prototype)
                 if (ownNames.length > 1 || ownNames[0] !== 'constructor') {
                     return false
                 }