refactor: improve useDeno for ssr

Author: Je

aleph.ts

@@ -4,7 +4,7 @@ import { E400MissingDefaultExportAsComponent, E404Page, ErrorBoundary } from './
 import events from './events.ts'
 import { createPageProps, RouteModule, Routing } from './routing.ts'
 import type { RouterURL } from './types.ts'
-import util, { hashShort, reModuleExt } from './util.ts'
+import util, { hashShort, reModuleExt, reStyleModuleExt } from './util.ts'
 
 export function ALEPH({ initial }: {
     initial: {
@@ -46,11 +46,21 @@ export function ALEPH({ initial }: {
         if (url.pagePath !== '') {
             const ctree: { id: string, Component?: ComponentType<any> }[] = pageModuleTree.map(({ id }) => ({ id }))
             const imports = pageModuleTree.map(async mod => {
-                const { default: C } = await import(getModuleImportUrl(baseUrl, mod, e.forceFetch))
+                const { default: C } = await import(getModuleImportUrl(baseUrl, mod, e.forceRefetch))
                 if (mod.asyncDeps) {
                     // import async dependencies
-                    for (const dep of mod.asyncDeps) {
-                        await import(getModuleImportUrl(baseUrl, { id: dep.url.replace(reModuleExt, '.js'), hash: dep.hash }, e.forceFetch))
+                    for (const dep of mod.asyncDeps.filter(({ url }) => reStyleModuleExt.test(url))) {
+                        await import(getModuleImportUrl(baseUrl, { id: dep.url.replace(reModuleExt, '.js'), hash: dep.hash }, e.forceRefetch))
+                    }
+                    if (mod.asyncDeps.filter(({ url }) => url.startsWith('#useDeno.')).length > 0) {
+                        import(`/_aleph/data${[url.pathname, url.query.toString()].filter(Boolean).join('@')}/data.js` + (e.forceRefetch ? `?t=${Date.now()}` : '')).then(({ default: data }) => {
+                            if (util.isPlainObject(data)) {
+                                for (const key in data) {
+                                    const useDenoUrl = `useDeno://${url.pathname}?${url.query.toString()}#${key}`
+                                    Object.assign(window, { [useDenoUrl]: data[key] })
+                                }
+                            }
+                        })
                     }
                 }
                 const pc = ctree.find(pc => pc.id === mod.id)
@@ -105,7 +115,7 @@ export function ALEPH({ initial }: {
                     if (mod.id.startsWith('/pages/')) {
                         const { routing } = ref.current
                         routing.update(mod)
-                        events.emit('popstate', { type: 'popstate', forceFetch: true })
+                        events.emit('popstate', { type: 'popstate', forceRefetch: true })
                     }
                     break
                 }
@@ -128,16 +138,27 @@ export function ALEPH({ initial }: {
                     break
             }
         }
-        const onFetchPageModule = async ({ url: pathname }: { url: string }) => {
-            const [url, pageModuleTree] = routing.createRouter({ pathname })
+        const onFetchPageModule = async ({ href }: { href: string }) => {
+            const [pathname, search] = href.split('?')
+            const [url, pageModuleTree] = routing.createRouter({ pathname, search })
             if (url.pagePath !== '') {
                 const imports = pageModuleTree.map(async mod => {
                     await import(getModuleImportUrl(baseUrl, mod))
                     if (mod.asyncDeps) {
                         // import async dependencies
-                        for (const dep of mod.asyncDeps) {
+                        for (const dep of mod.asyncDeps.filter(({ url }) => reStyleModuleExt.test(url))) {
                             await import(getModuleImportUrl(baseUrl, { id: dep.url.replace(reModuleExt, '.js'), hash: dep.hash }))
                         }
+                        if (mod.asyncDeps.filter(({ url }) => url.startsWith('#useDeno.')).length > 0) {
+                            import(`/_aleph/data${[url.pathname, url.query.toString()].filter(Boolean).join('@')}/data.js`).then(({ default: data }) => {
+                                if (util.isPlainObject(data)) {
+                                    for (const key in data) {
+                                        const useDenoUrl = `useDeno://${url.pathname}?${url.query.toString()}#${key}`
+                                        Object.assign(window, { [useDenoUrl]: data[key] })
+                                    }
+                                }
+                            })
+                        }
                     }
                 })
                 await Promise.all(imports)
@@ -193,6 +214,6 @@ export async function redirect(url: string, replace?: boolean) {
     events.emit('popstate', { type: 'popstate', scrollTo: 0 })
 }
 
-export function getModuleImportUrl(baseUrl: string, mod: RouteModule, forceFetch = false) {
-    return util.cleanPath(baseUrl + '/_aleph/' + util.trimSuffix(mod.id, '.js') + `.${mod.hash.slice(0, hashShort)}.js` + (forceFetch ? `?t=${Date.now()}` : ''))
+export function getModuleImportUrl(baseUrl: string, mod: RouteModule, forceRefetch = false) {
+    return util.cleanPath(baseUrl + '/_aleph/' + util.trimSuffix(mod.id, '.js') + `.${mod.hash.slice(0, hashShort)}.js` + (forceRefetch ? `?t=${Date.now()}` : ''))
 }

bootstrap.ts

@@ -2,7 +2,7 @@ import React, { ComponentType } from 'https://esm.sh/react'
 import { hydrate, render } from 'https://esm.sh/react-dom'
 import { ALEPH, getModuleImportUrl } from './aleph.ts'
 import { Route, RouteModule, Routing } from './routing.ts'
-import { reModuleExt } from './util.ts'
+import { reModuleExt, reStyleModuleExt } from './util.ts'
 
 export default async function bootstrap({
     routes,
@@ -25,10 +25,10 @@ export default async function bootstrap({
     const [url, pageModuleTree] = routing.createRouter()
     const pageComponentTree: { id: string, Component?: ComponentType }[] = pageModuleTree.map(({ id }) => ({ id }))
     const imports = [...preloadModules, ...pageModuleTree].map(async mod => {
-        const { default: C, __pageProps } = await import(getModuleImportUrl(baseUrl, mod))
+        const { default: C } = await import(getModuleImportUrl(baseUrl, mod))
         if (mod.asyncDeps) {
             // import async dependencies
-            for (const dep of mod.asyncDeps) {
+            for (const dep of mod.asyncDeps.filter(({ url }) => reStyleModuleExt.test(url))) {
                 await import(getModuleImportUrl(baseUrl, { id: dep.url.replace(reModuleExt, '.js'), hash: dep.hash }))
             }
         }
@@ -49,9 +49,11 @@ export default async function bootstrap({
     })
     await Promise.all(imports)
 
-    const ssrData = JSON.parse(ssrDataEl.innerText)
-    for (const key in ssrData) {
-        Object.assign(window, { [`useDeno://${url.pathname}?${url.query.toString()}#${key}`]: ssrData[key] })
+    if (ssrDataEl) {
+        const ssrData = JSON.parse(ssrDataEl.innerText)
+        for (const key in ssrData) {
+            Object.assign(window, { [`useDeno://${url.pathname}?${url.query.toString()}#${key}`]: ssrData[key] })
+        }
     }
 
     const el = React.createElement(

link.ts

@@ -40,7 +40,7 @@ export function Link({
     }, [currentPathname, to])
     const prefetch = useCallback(() => {
         if (!util.isHttpUrl(href) && href !== currentHref && !fetchedPageModules.has(href)) {
-            events.emit('fetch-page-module', { url: href })
+            events.emit('fetch-page-module', { href })
             fetchedPageModules.add(href)
         }
     }, [href, currentHref])