refactor: improve framework loading

Author: Wenjie Xia

framework/core/hmr.ts

@@ -65,10 +65,10 @@ socket.addEventListener('close', () => {
 socket.addEventListener('message', ({ data: rawData }: { data?: string }) => {
     if (rawData) {
         try {
-            const { type, url, hash, updateUrl } = JSON.parse(rawData)
+            const { type, url, hash, asyncDeps, updateUrl } = JSON.parse(rawData)
             switch (type) {
                 case 'add':
-                    events.emit('add-module', { url, hash })
+                    events.emit('add-module', { url, hash, asyncDeps })
                     break
                 case 'update':
                     const mod = modules.get(url)

framework/core/routing.ts

@@ -1,22 +1,22 @@
 import { pageModuleExts } from '../../shared/constants.ts'
 import util from '../../shared/util.ts'
-import type { RouterURL } from '../../types.ts'
+import type { DependencyDescriptor, RouterURL } from '../../types.ts'
 import events from './events.ts'
 
-export interface Route {
+const ghostRoute: Route = { path: '', module: { url: '', hash: '' } }
+
+export type Route = {
     path: string
     module: RouteModule
     children?: Route[]
 }
 
-export interface RouteModule {
+export type RouteModule = {
     readonly url: string
     readonly hash: string
-    readonly asyncDeps?: { data?: boolean, style?: boolean }
+    readonly asyncDeps?: DependencyDescriptor[]
 }
 
-const ghostRoute: Route = { path: '', module: { url: '', hash: '' } }
-
 export class Routing {
     private _routes: Route[]
     private _baseUrl: string
@@ -113,7 +113,7 @@ export class Routing {
         let pathname = util.cleanPath(util.trimPrefix(loc.pathname, this._baseUrl))
         let pagePath = ''
         let params: Record<string, string> = {}
-        let tree: RouteModule[] = []
+        let chain: RouteModule[] = []
 
         if (pathname !== '/' && this._locales.length > 0) {
             const a = pathname.split('/')
@@ -128,18 +128,18 @@ export class Routing {
             const path = routePath.map(r => r.path).join('')
             const [p, ok] = matchPath(path, pathname)
             if (ok) {
-                tree = routePath.map(r => r.module)
+                chain = routePath.map(r => r.module)
                 const c = routePath[routePath.length - 1].children?.find(c => c.path === '/')
                 if (c) {
-                    tree.push(c.module)
+                    chain.push(c.module)
                 }
                 pagePath = path
                 params = p
                 return false
             }
         }, true)
 
-        return [{ locale, pathname, pagePath, params, query }, tree]
+        return [{ locale, pathname, pagePath, params, query }, chain]
     }
 
     lookup(callback: (path: Route[]) => Boolean | void) {
@@ -231,6 +231,15 @@ export function isHttpUrl(url: string) {
     }
 }
 
+export function isPageModule(url: string) {
+    for (const ext of pageModuleExts) {
+        if (url.endsWith('.' + ext)) {
+            return true
+        }
+    }
+    return false
+}
+
 export function getPagePathname(url: string): string {
     const pathname = trimPageModuleExt(url).replace(/^\/pages\//, '/').replace(/\/?index$/, '/')
     return pathname

framework/react/bootstrap.ts

@@ -2,10 +2,12 @@ import type { ComponentType } from 'https://esm.sh/react'
 import { createElement } from 'https://esm.sh/react'
 import { hydrate, render } from 'https://esm.sh/react-dom'
 import { Route, RouteModule, Routing, trimPageModuleExt } from '../core/routing.ts'
+import type { PageRoute } from './pageprops.ts'
+import { createPageProps } from './pageprops.ts'
 import Router from './router.ts'
-import { importModule } from './util.ts'
+import { importModule, loadPageDataFromTag } from './util.ts'
 
-type BootstrapOptions = {
+type Options = {
     baseUrl: string
     defaultLocale: string
     locales: string[]
@@ -14,15 +16,11 @@ type BootstrapOptions = {
     renderMode: 'ssr' | 'spa'
 }
 
-export default async function bootstrap({ baseUrl, defaultLocale, locales, routes, sharedModules, renderMode }: BootstrapOptions) {
+export default async function bootstrap(options: Options) {
+    const { baseUrl, defaultLocale, locales, routes, sharedModules, renderMode } = options
     const { document } = window as any
-    const ssrDataEl = document.querySelector('#ssr-data')
-    const routing = new Routing(routes, baseUrl, defaultLocale, locales)
-    const [url, pageModuleTree] = routing.createRouter()
-    const pageComponentTree: { url: string, Component?: ComponentType }[] = pageModuleTree.map(({ url }) => ({ url }))
     const customComponents: Record<string, ComponentType> = {}
-
-    await Promise.all([...sharedModules, ...pageModuleTree].map(async mod => {
+    await Promise.all(sharedModules.map(async mod => {
         const { default: C } = await importModule(baseUrl, mod)
         switch (trimPageModuleExt(mod.url)) {
             case '/404':
@@ -31,36 +29,29 @@ export default async function bootstrap({ baseUrl, defaultLocale, locales, route
             case '/app':
                 customComponents['App'] = C
                 break
-            default:
-                const pc = pageComponentTree.find(pc => pc.url === mod.url)
-                if (pc) {
-                    pc.Component = C
-                }
-                break
         }
     }))
-
-    if (ssrDataEl) {
-        const ssrData = JSON.parse(ssrDataEl.innerText)
-        for (const key in ssrData) {
-            Object.assign(window, { [`data://${url.pathname}#${key}`]: ssrData[key] })
-        }
-    }
-
-    const rootEl = createElement(
-        Router,
-        {
-            url,
-            routing,
-            customComponents,
-            pageComponentTree
+    const routing = new Routing(routes, baseUrl, defaultLocale, locales)
+    const [url, pageModuleChain] = routing.createRouter()
+    const imports = await Promise.all(pageModuleChain.map(async mod => {
+        const [{ default: Component }] = await Promise.all([
+            importModule(baseUrl, mod),
+            mod.asyncDeps?.filter(({ isData }) => !!isData).length ? loadPageDataFromTag(url) : Promise.resolve(),
+            mod.asyncDeps?.filter(({ isStyle }) => !!isStyle).map(dep => importModule(baseUrl, dep)) || Promise.resolve()
+        ].flat())
+        return {
+            url: mod.url,
+            Component,
         }
-    )
+    }))
+    const pageRoute: PageRoute = { ...createPageProps(imports), url }
+    const routerEl = createElement(Router, { customComponents, pageRoute, routing })
     const mountPoint = document.getElementById('__aleph')
+
     if (renderMode === 'ssr') {
-        hydrate(rootEl, mountPoint)
+        hydrate(routerEl, mountPoint)
     } else {
-        render(rootEl, mountPoint)
+        render(routerEl, mountPoint)
     }
 
     // remove ssr head elements, set a timmer to avoid the tab title flash

framework/react/context.ts

@@ -1,23 +1,27 @@
 import { createContext } from 'https://esm.sh/react'
 import type { RouterURL } from '../../types.ts'
+import { createNamedContext } from './util.ts'
 
-export const RouterContext = createContext<RouterURL>({
+export const RouterContext = createNamedContext<RouterURL>({
     locale: 'en',
     pagePath: '/',
     pathname: '/',
     params: {},
     query: new URLSearchParams(),
-})
-RouterContext.displayName = 'RouterContext'
+}, 'RouterContext')
+
+type SuspenseContextProps = {
+    loading: boolean
+}
+export const SuspenseContext = createNamedContext<SuspenseContextProps>({
+    loading: false
+}, 'SuspenseContext')
 
-interface RenderStorage {
+type RendererContextProps = {
     headElements: Map<string, { type: string, props: Record<string, any> }>
     scriptsElements: Map<string, { type: string, props: Record<string, any> }>
 }
-
-export const RendererContext = createContext<{ storage: RenderStorage }>({
-    storage: {
-        headElements: new Map(),
-        scriptsElements: new Map()
-    }
+export const RendererContext = createContext<RendererContextProps>({
+    headElements: new Map(),
+    scriptsElements: new Map()
 })

framework/react/head.ts

@@ -7,8 +7,8 @@ import Script from './script.ts'
 export default function Head(props: PropsWithChildren<{}>) {
     const renderer = useContext(RendererContext)
 
-    if (window.Deno) {
-        parse(props.children).forEach(({ type, props }, key) => renderer.storage.headElements.set(key, { type, props }))
+    if (util.inDeno()) {
+        parse(props.children).forEach(({ type, props }, key) => renderer.headElements.set(key, { type, props }))
     }
 
     useEffect(() => {

framework/react/hooks.ts

@@ -1,5 +1,6 @@
 import type { ComponentType } from 'https://esm.sh/react'
 import { createElement, useContext, useMemo } from 'https://esm.sh/react'
+import util from '../../shared/util.ts'
 import type { RouterURL } from '../../types.ts'
 import events from '../core/events.ts'
 import { RouterContext } from './context.ts'
@@ -58,32 +59,32 @@ export function useDeno<T = any>(callback: () => (T | Promise<T>), revalidate?:
         const global = window as any
         const dataUrl = 'data://' + pathname
         const eventName = 'useDeno-' + dataUrl
-        const { ['rendering-' + dataUrl]: renderingData } = global
         const key = dataUrl + '#' + id
         const expires = revalidate ? Date.now() + revalidate * 1000 : 0
-        if (renderingData && key in renderingData) {
-            return renderingData[key]
-        } else if (typeof Deno !== 'undefined' && Deno.version.deno) {
+        const renderingDataCache = global['rendering-' + dataUrl]
+        if (renderingDataCache && key in renderingDataCache) {
+            return renderingDataCache[key] // 2+ pass
+        } else if (util.inDeno()) {
             const v = callback()
             if (v instanceof Promise) {
                 events.emit(eventName, id, v.then(value => {
-                    if (renderingData) {
-                        renderingData[key] = value
+                    if (renderingDataCache) {
+                        renderingDataCache[key] = value
                     }
                     events.emit(eventName, id, { value, expires })
                 }))
                 // thow an `AsyncUseDenoError` to break current rendering, then re-render
                 throw new AsyncUseDenoError()
             } else {
-                if (renderingData) {
-                    renderingData[key] = v
+                if (renderingDataCache) {
+                    renderingDataCache[key] = v
                 }
                 events.emit(eventName, id, { value: v, expires })
                 return v
             }
         }
         return global[key].value || null
-    }, [pathname])
+    }, [id, pathname])
 }
 
 /**

framework/react/pageprops.ts

@@ -0,0 +1,48 @@
+import type { ComponentType } from 'https://esm.sh/react'
+import { RouterURL } from '../../types.ts'
+import { getPagePathname } from '../core/routing.ts'
+import { E400MissingComponent } from './error.ts'
+import { isLikelyReactComponent } from './util.ts'
+
+export type PageProps = {
+    Page: ComponentType<any> | null
+    pageProps: (Partial<PageProps> & { name?: string }) | null
+}
+
+export type PageRoute = PageProps & {
+    url: RouterURL
+}
+
+export function createPageProps(componentChain: { url: string, Component?: ComponentType<any> }[]): PageProps {
+    const pageProps: PageProps = {
+        Page: null,
+        pageProps: null
+    }
+    if (componentChain.length > 0) {
+        Object.assign(pageProps, createPagePropsSegment(componentChain[0]))
+    }
+    if (componentChain.length > 1) {
+        componentChain.slice(1).reduce((p, seg) => {
+            const c = createPagePropsSegment(seg)
+            p.pageProps = c
+            return c
+        }, pageProps)
+    }
+    return pageProps
+}
+
+function createPagePropsSegment(seg: { url: string, Component?: ComponentType<any> }): PageProps {
+    const pageProps: PageProps = {
+        Page: null,
+        pageProps: null
+    }
+    if (seg.Component) {
+        if (isLikelyReactComponent(seg.Component)) {
+            pageProps.Page = seg.Component
+        } else {
+            pageProps.Page = E400MissingComponent
+            pageProps.pageProps = { name: 'Page: ' + getPagePathname(seg.url) }
+        }
+    }
+    return pageProps
+}