Improve useDeno rendering

Author: ije

framework/react/components/ErrorBoundary.ts

@@ -117,5 +117,3 @@ export function StatusError({ status, message }: { status: number, message: stri
     )
   )
 }
-
-export class AsyncUseDenoError extends Error { }

framework/react/hooks.ts

@@ -3,7 +3,8 @@ import util from '../../shared/util.ts'
 import type { RouterURL } from '../../types.ts'
 import events from '../core/events.ts'
 import { RouterContext } from './context.ts'
-import { AsyncUseDenoError } from './components/ErrorBoundary.ts'
+
+export class AsyncUseDenoError extends Error { }
 
 /**
  * `useRouter` allows you to use `RouterURL` obeject of routing
@@ -39,34 +40,26 @@ export function useDeno<T = any>(callback: () => (T | Promise<T>), revalidate?:
     const global = globalThis as any
     const qs = query.toString()
     const dataUrl = 'pagedata://' + [pathname, qs].filter(Boolean).join('?')
-    const eventName = 'useDeno-' + dataUrl
-    const key = dataUrl + '#' + id
     const expires = typeof revalidate === 'number' && !isNaN(revalidate) ? Date.now() + revalidate * 1000 : 0
-    const renderingDataCache = global['rendering-' + dataUrl]
-    if (renderingDataCache && key in renderingDataCache) {
-      return renderingDataCache[key] // 2+ pass
-    } else if (util.inDeno) {
+
+    if (util.inDeno) {
+      const renderingData = global['rendering-' + dataUrl]
+
+      if (renderingData && id in renderingData) {
+        return renderingData[id]  // 2+ pass
+      }
+
       const v = callback()
+      events.emit('useDeno-' + dataUrl, { id, value: v, expires })
+      // thow an `AsyncUseDenoError` to break current rendering, then re-render
       if (v instanceof Promise) {
-        events.emit(eventName, id, v.then(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 (renderingDataCache) {
-          renderingDataCache[key] = v
-        }
-        events.emit(eventName, id, { value: v, expires })
-        return v
       }
+
+      renderingData[id] = v
+      return v
     }
-    if (key in global) {
-      return global[key].value
-    }
-    return null
+
+    return global[dataUrl + '#' + id].value ?? null
   }, [id, pathname, query])
 }

framework/react/renderer.ts

@@ -5,7 +5,8 @@ import type { FrameworkRenderResult } from '../../server/renderer.ts'
 import type { RouterURL } from '../../types.ts'
 import events from '../core/events.ts'
 import { RouterContext, SSRContext } from './context.ts'
-import { AsyncUseDenoError, E400MissingComponent, E404Page } from './components/ErrorBoundary.ts'
+import { E400MissingComponent, E404Page } from './components/ErrorBoundary.ts'
+import { AsyncUseDenoError } from './hooks.ts'
 import { isLikelyReactComponent } from './helper.ts'
 import { createPageProps } from './pageprops.ts'
 
@@ -35,23 +36,24 @@ export async function render(
   }
   const qs = url.query.toString()
   const dataUrl = 'pagedata://' + [url.pathname, qs].filter(Boolean).join('?')
-  const asyncCalls: Array<Promise<any>> = []
+  const asyncCalls: Array<[string, number, Promise<any>]> = []
   const data: Record<string, any> = {}
+  const renderingData: Record<string, any> = {}
   const pageProps = createPageProps(nestedPageComponents)
   const defer = () => {
     delete global['rendering-' + dataUrl]
     events.removeAllListeners('useDeno-' + dataUrl)
   }
 
-  // rendering data cache
-  global['rendering-' + dataUrl] = {}
+  // share rendering data
+  global['rendering-' + dataUrl] = renderingData
 
   // listen `useDeno-*` events to get hooks callback result.
-  events.on('useDeno-' + dataUrl, (id: string, v: any) => {
-    if (v instanceof Promise) {
-      asyncCalls.push(v)
+  events.on('useDeno-' + dataUrl, ({ id, value, expires }: { id: string, value: any, expires: number }) => {
+    if (value instanceof Promise) {
+      asyncCalls.push([id, expires, value])
     } else {
-      data[id] = v
+      data[id] = { value, expires }
     }
   })
 
@@ -78,7 +80,13 @@ export async function render(
   while (true) {
     try {
       if (asyncCalls.length > 0) {
-        await Promise.all(asyncCalls.splice(0, asyncCalls.length))
+        const calls = asyncCalls.splice(0, asyncCalls.length)
+        const datas = await Promise.all(calls.map(a => a[2]))
+        calls.forEach(([id, expires], i) => {
+          const value = datas[i]
+          renderingData[id] = value
+          data[id] = { value, expires }
+        })
       }
       ret.body = renderToString(createElement(
         SSRContext.Provider,