Remove withDeno hoc

Author: ije

framework/react/context.ts

@@ -2,16 +2,16 @@ import { createContext, ReactNode } from 'https://esm.sh/[email protected]'
 import type { RouterURL } from '../../types.ts'
 import { createBlankRouterURL } from '../core/routing.ts'
 import { createNamedContext } from './helper.ts'
-import type { RendererStorage } from './renderer.ts'
+import type { RendererStore } from './renderer.ts'
 
 export const RouterContext = createNamedContext<RouterURL>(createBlankRouterURL(), 'RouterContext')
 
-export const SSRContext = createContext<RendererStorage>({
+export const FallbackContext = createNamedContext<{ to: ReactNode }>({
+  to: null
+}, 'FallbackContext')
+
+export const SSRContext = createContext<RendererStore>({
   headElements: new Map(),
-  scripts: new Map(),
   inlineStyles: new Map(),
-})
-
-export const FallbackContext = createContext<{ to: ReactNode }>({
-  to: null
+  scripts: new Map(),
 })

framework/react/hoc.ts

@@ -9,10 +9,10 @@ import {
 } from 'https://esm.sh/[email protected]'
 import { FallbackContext } from './context.ts'
 import { isLikelyReactComponent } from './helper.ts'
-import { useDeno, useRouter } from './hooks.ts'
+import { useRouter } from './hooks.ts'
 
 /**
- * `withRouter` allows you to use `useRouter` hook with class component.
+ * `withRouter` injects the prop as current `RouterURL` of page routing.
  *
  * ```tsx
  * class MyComponent extends React.Component {
@@ -31,31 +31,7 @@ export function withRouter<P>(Component: ComponentType<P>) {
 }
 
 /**
- * `withDeno` allows you to use `useDeno` hook with class component.
- *
- * ```tsx
- * class MyComponent extends React.Component {
- *   render() {
- *     return <p>{this.props.version}</p>
- *   }
- * }
- * export default withDeno(() => ({ version: Deno.version.deno }))(MyComponent)
- * ```
- *
- * @param {Function} callback - hook callback.
- * @param {number} revalidate - revalidate duration in seconds.
- */
-export function withDeno<T>(callback: () => (T | Promise<T>), revalidate?: number) {
-  return function <P extends T>(Component: ComponentType<P>): ComponentType<Exclude<P, keyof T>> {
-    return function WithDeno(props: Exclude<P, keyof T>) {
-      const deno = useDeno<T>(callback, revalidate)
-      return createElement(Component, { ...props, ...deno })
-    }
-  }
-}
-
-/**
- * `dynamic` allows you to load a component asynchronously with SSR support.
+ * `dynamic` loads a component asynchronously that is ignored at build time(SSR).
  *
  * ```jsx
  * const MyLogo = dynamic(() => import('~/components/logo.tsx'))
@@ -67,8 +43,6 @@ export function withDeno<T>(callback: () => (T | Promise<T>), revalidate?: numbe
  *   )
  * }
  * ```
- *
- * @param {Function} factory - dynamic loading factory.
  */
 export function dynamic<T extends ComponentType<any>>(
   factory: () => Promise<{ default: T }>

framework/react/hooks.ts

@@ -7,7 +7,7 @@ import { inDeno } from './helper.ts'
 export class AsyncUseDenoError extends Error { }
 
 /**
- * `useRouter` allows you to use `RouterURL` obeject of routing
+ * `useRouter` returns current `RouterURL` of page routing.
  *
  * ```tsx
  * export default function App() {
@@ -21,7 +21,7 @@ export function useRouter(): RouterURL {
 }
 
 /**
- * `useDeno` allows you to use Deno runtime in build time(SSR).
+ * `useDeno` hacks in Deno runtime at build time(SSR).
  *
  * ```tsx
  * export default function App() {
@@ -33,11 +33,12 @@ export function useRouter(): RouterURL {
 export function useDeno<T = any>(callback: () => (T | Promise<T>), options?: { key?: string | number, revalidate?: number }): T {
   const { key, revalidate } = options || {}
   const uuid = arguments[2] // generated by compiler
+  const router = useRouter()
   const id = useMemo(() => uuid + (key ? '-' + key : ''), [key])
-  const url = useRouter().toString()
 
   return useMemo(() => {
     const store = globalThis as any
+    const url = router.toString()
     const dataUrl = 'pagedata://' + url
     const expires = typeof revalidate === 'number' && !isNaN(revalidate) ? Date.now() + revalidate * 1000 : 0
 
@@ -62,5 +63,5 @@ export function useDeno<T = any>(callback: () => (T | Promise<T>), options?: { k
 
     const data = store[dataUrl + '#' + id]
     return data ? data.value ?? null : null
-  }, [id, url])
+  }, [id, router])
 }

framework/react/renderer.ts

@@ -10,10 +10,10 @@ import { AsyncUseDenoError } from './hooks.ts'
 import { isLikelyReactComponent } from './helper.ts'
 import { createPageProps } from './pageprops.ts'
 
-export type RendererStorage = {
+export type RendererStore = {
   headElements: Map<string, { type: string, props: Record<string, any> }>
-  scripts: Map<string, { props: Record<string, any> }>
   inlineStyles: Map<string, string>
+  scripts: Map<string, { props: Record<string, any> }>
 }
 
 export async function render(
@@ -29,10 +29,10 @@ export async function render(
     scripts: [],
     data: null,
   }
-  const rendererStorage: RendererStorage = {
+  const rendererStore: RendererStore = {
     headElements: new Map(),
-    scripts: new Map(),
     inlineStyles: new Map(),
+    scripts: new Map(),
   }
   const dataUrl = 'pagedata://' + url.toString()
   const asyncCalls: Array<[string, number, Promise<any>]> = []
@@ -87,9 +87,10 @@ export async function render(
           data[id] = { value, expires }
         })
       }
+      Object.keys(rendererStore).forEach(key => rendererStore[key as keyof typeof rendererStore].clear())
       ret.body = renderToString(createElement(
         SSRContext.Provider,
-        { value: rendererStorage },
+        { value: rendererStore },
         createElement(
           RouterContext.Provider,
           { value: url },
@@ -111,7 +112,7 @@ export async function render(
   }
 
   // insert head child tags
-  rendererStorage.headElements.forEach(({ type, props }) => {
+  rendererStore.headElements.forEach(({ type, props }) => {
     const { children, ...rest } = props
     if (type === 'title') {
       if (util.isNEString(children)) {
@@ -134,7 +135,7 @@ export async function render(
   })
 
   // insert script tags
-  rendererStorage.scripts.forEach(({ props }) => {
+  rendererStore.scripts.forEach(({ props }) => {
     const { children, dangerouslySetInnerHTML, ...attrs } = props
     if (dangerouslySetInnerHTML && util.isNEString(dangerouslySetInnerHTML.__html)) {
       ret.scripts.push({ ...attrs, innerText: dangerouslySetInnerHTML.__html })
@@ -155,7 +156,7 @@ export async function render(
       ret.head.push(`<link rel="stylesheet" href=${JSON.stringify(href)} data-module-id=${JSON.stringify(url)} ssr />`)
     }
   })
-  for (const [url, css] of rendererStorage.inlineStyles.entries()) {
+  for (const [url, css] of rendererStore.inlineStyles.entries()) {
     ret.head.push(`<style type="text/css" data-module-id=${JSON.stringify(url)} ssr>${css}</style>`)
   }