refactor(framework): improve react framework

Author: Wenjie Xia

framework/react/anchor.ts

@@ -7,12 +7,10 @@ import { useRouter } from './hooks.ts'
 
 const prefetchedPages = new Set<string>()
 
-interface AnchorDataProps {
+type AnchorProps = PropsWithChildren<AnchorHTMLAttributes<{}> & {
     'data-active-className'?: string
     'data-active-style'?: CSSProperties
-}
-
-type AnchorProps = PropsWithChildren<AnchorHTMLAttributes<{}> & AnchorDataProps>
+}>
 
 /**
  * Anchor Component to link between pages.

framework/react/bootstrap.ts

@@ -3,27 +3,27 @@ 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 AlephAppRoot from './root.ts'
+import Router from './router.ts'
 import { importModule } from './util.ts'
 
-type BootstrapConfig = {
+type BootstrapOptions = {
     baseUrl: string
     defaultLocale: string
     locales: string[]
     routes: Route[]
-    preloadModules: RouteModule[],
+    sharedModules: RouteModule[],
     renderMode: 'ssr' | 'spa'
 }
 
-export default async function bootstrap({ baseUrl, defaultLocale, locales, routes, preloadModules, renderMode }: BootstrapConfig) {
+export default async function bootstrap({ baseUrl, defaultLocale, locales, routes, sharedModules, renderMode }: BootstrapOptions) {
     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 customComponents: Record<string, ComponentType> = {}
     const pageComponentTree: { url: string, Component?: ComponentType }[] = pageModuleTree.map(({ url }) => ({ url }))
+    const customComponents: Record<string, ComponentType> = {}
 
-    await Promise.all([...preloadModules, ...pageModuleTree].map(async mod => {
+    await Promise.all([...sharedModules, ...pageModuleTree].map(async mod => {
         const { default: C } = await importModule(baseUrl, mod)
         switch (mod.url.replace(reModuleExt, '')) {
             case '/404':
@@ -44,12 +44,12 @@ export default async function bootstrap({ baseUrl, defaultLocale, locales, route
     if (ssrDataEl) {
         const ssrData = JSON.parse(ssrDataEl.innerText)
         for (const key in ssrData) {
-            Object.assign(window, { [`useDeno://${url.pathname}#${key}`]: ssrData[key] })
+            Object.assign(window, { [`data://${url.pathname}#${key}`]: ssrData[key] })
         }
     }
 
     const rootEl = createElement(
-        AlephAppRoot,
+        Router,
         {
             url,
             routing,

framework/react/context.ts

@@ -10,13 +10,13 @@ export const RouterContext = createContext<RouterURL>({
 })
 RouterContext.displayName = 'RouterContext'
 
-interface RendererCache {
+interface RenderStorage {
     headElements: Map<string, { type: string, props: Record<string, any> }>
     scriptsElements: Map<string, { type: string, props: Record<string, any> }>
 }
 
-export const RendererContext = createContext<{ cache: RendererCache }>({
-    cache: {
+export const RendererContext = createContext<{ storage: RenderStorage }>({
+    storage: {
         headElements: new Map(),
         scriptsElements: new Map()
     }

framework/react/head.ts

@@ -1,5 +1,5 @@
-import type { PropsWithChildren, ReactElement, ReactNode } from 'https://esm.sh/react'
-import { Children, createElement, Fragment, isValidElement, useContext, useEffect } from 'https://esm.sh/react'
+import type { PropsWithChildren, ReactNode } from 'https://esm.sh/react'
+import { Children, Fragment, isValidElement, useContext, useEffect } from 'https://esm.sh/react'
 import util from '../../shared/util.ts'
 import { RendererContext } from './context.ts'
 import Script from './script.ts'
@@ -8,7 +8,7 @@ export default function Head(props: PropsWithChildren<{}>) {
     const renderer = useContext(RendererContext)
 
     if (window.Deno) {
-        parse(props.children).forEach(({ type, props }, key) => renderer.cache.headElements.set(key, { type, props }))
+        parse(props.children).forEach(({ type, props }, key) => renderer.storage.headElements.set(key, { type, props }))
     }
 
     useEffect(() => {
@@ -62,64 +62,6 @@ export default function Head(props: PropsWithChildren<{}>) {
     return null
 }
 
-interface SEOProps {
-    title?: string
-    description?: string
-    keywords?: string | string[]
-    url?: string
-    image?: string
-    twitter?: {
-        card?: 'summary' | 'summary_large_image' | 'app' | 'player'
-        site?: string
-        creator?: string
-    }
-}
-
-export function SEO(props: SEOProps) {
-    const { title, description, keywords, url, image, twitter } = props
-    return createElement(
-        Head,
-        undefined,
-        title && createElement('title', undefined, title),
-        description && createElement('meta', { name: 'description', content: description }),
-        keywords && createElement('meta', { name: 'keywords', content: util.isArray(keywords) ? keywords.join(',') : keywords }),
-        title && createElement('meta', { name: 'og:title', content: title }),
-        description && createElement('meta', { name: 'og:description', content: description }),
-        title && createElement('meta', { name: 'twitter:title', content: title }),
-        description && createElement('meta', { name: 'twitter:description', content: description }),
-        url && createElement('meta', { name: 'og:url', content: url }),
-        image && createElement('meta', { name: 'og:image', content: image }),
-        image && createElement('meta', { name: 'twitter:image', content: image }),
-        image && createElement('meta', { name: 'twitter:card', content: twitter?.card || 'summary_large_image' }),
-        twitter?.site && createElement('meta', { name: 'twitter:site', content: twitter.site }),
-        twitter?.creator && createElement('meta', { name: 'twitter:creator', content: twitter.creator }),
-    )
-}
-
-interface ViewportProps {
-    width?: number | 'device-width'
-    height?: number | 'device-height'
-    initialScale?: number
-    minimumScale?: number
-    maximumScale?: number
-    userScalable?: 'yes' | 'no'
-    targetDensitydpi?: number | 'device-dpi' | 'low-dpi' | 'medium-dpi' | 'high-dpi'
-}
-
-export function Viewport(props: ViewportProps) {
-    const content = Object.entries(props)
-        .map(([key, value]) => {
-            key = key.replace(/[A-Z]/g, c => '-' + c.toLowerCase())
-            return `${key}=${value}`
-        })
-        .join(',')
-    return createElement(
-        Head,
-        undefined,
-        content && createElement('meta', { name: 'viewport', content })
-    )
-}
-
 function parse(node: ReactNode, els: Map<string, { type: string, props: Record<string, any> }> = new Map()) {
     Children.forEach(node, child => {
         if (!isValidElement(child)) {
@@ -131,10 +73,6 @@ function parse(node: ReactNode, els: Map<string, { type: string, props: Record<s
             case Fragment:
                 parse(props.children, els)
                 break
-            case SEO:
-            case Viewport:
-                parse((type(props) as ReactElement).props.children, els)
-                break
             case Script:
                 type = "script"
             case 'base':
@@ -144,32 +82,30 @@ function parse(node: ReactNode, els: Map<string, { type: string, props: Record<s
             case 'style':
             case 'script':
             case 'no-script':
-                {
-                    let key = type
-                    if (type === 'meta') {
-                        const propKeys = Object.keys(props).map(k => k.toLowerCase())
-                        if (propKeys.includes('charset')) {
-                            return // ignore charset, always use utf-8
-                        }
-                        if (propKeys.includes('name')) {
-                            key += `[name=${JSON.stringify(props['name'])}]`
-                        } else if (propKeys.includes('property')) {
-                            key += `[property=${JSON.stringify(props['property'])}]`
-                        } else if (propKeys.includes('http-equiv')) {
-                            key += `[http-equiv=${JSON.stringify(props['http-equiv'])}]`
-                        } else {
-                            key += Object.keys(props).filter(k => !(/^content|children$/i.test(k))).map(k => `[${k.toLowerCase()}=${JSON.stringify(props[k])}]`).join('')
-                        }
-                    } else if (type !== 'title') {
-                        key += '-' + (els.size + 1)
+                let key = type
+                if (type === 'meta') {
+                    const propKeys = Object.keys(props).map(k => k.toLowerCase())
+                    if (propKeys.includes('charset')) {
+                        return // ignore charset, always use utf-8
                     }
-                    // remove the children prop of base/meta/link
-                    if (['base', 'meta', 'link'].includes(type) && 'children' in props) {
-                        const { children, ...rest } = props
-                        els.set(key, { type, props: rest })
+                    if (propKeys.includes('name')) {
+                        key += `[name=${JSON.stringify(props['name'])}]`
+                    } else if (propKeys.includes('property')) {
+                        key += `[property=${JSON.stringify(props['property'])}]`
+                    } else if (propKeys.includes('http-equiv')) {
+                        key += `[http-equiv=${JSON.stringify(props['http-equiv'])}]`
                     } else {
-                        els.set(key, { type, props })
+                        key += Object.keys(props).filter(k => !(/^content|children$/i.test(k))).map(k => `[${k.toLowerCase()}=${JSON.stringify(props[k])}]`).join('')
                     }
+                } else if (type !== 'title') {
+                    key += '-' + (els.size + 1)
+                }
+                // remove the children prop of base/meta/link
+                if (['base', 'meta', 'link'].includes(type) && 'children' in props) {
+                    const { children, ...rest } = props
+                    els.set(key, { type, props: rest })
+                } else {
+                    els.set(key, { type, props })
                 }
                 break
         }

framework/react/hooks.ts

@@ -8,7 +8,7 @@ import { AsyncUseDenoError } from './error.ts'
 /**
  * `useRouter` allows you to use `RouterURL` obeject of routing
  *
- * ```javascript
+ * ```tsx
  * export default function App() {
  *   const { locale, pathname, pagePath, params, query } = useRouter()
  *   return <p>{pathname}</p>
@@ -22,10 +22,10 @@ export function useRouter(): RouterURL {
 /**
  * `withRouter` allows you to use `useRouter` hook with class component.
  *
- * ```javascript
+ * ```tsx
  * class MyComponent extends React.Component {
  *   render() {
- *     return <p>{this.props.version.deno}</p>
+ *     return <p>{this.props.router.pathname}</p>
  *   }
  * }
  * export default withRouter(MyComponent)
@@ -34,72 +34,78 @@ export function useRouter(): RouterURL {
 export function withRouter<P>(Component: ComponentType<P>) {
     return function WithRouter(props: P) {
         const router = useRouter()
-        return createElement(Component, { ...props, ...router })
+        return createElement(Component, { ...props, router })
     }
 }
 
 /**
  * `useDeno` allows you to use Deno runtime in build time(SSR).
  *
- * ```javascript
+ * ```tsx
  * export default function App() {
  *   const version = useDeno(() => Deno.version)
  *   return <p>{version.deno}</p>
  * }
  * ```
+ *
+ * @param {Function} callback - hook callback.
+ * @param {number} revalidate - revalidate duration in seconds.
  */
-export function useDeno<T = any>(callback: () => (T | Promise<T>)): T {
-    const id = arguments[1] // generated by compiler
+export function useDeno<T = any>(callback: () => (T | Promise<T>), revalidate?: number): T {
+    const id = arguments[2] // generated by compiler
     const { pathname } = useRouter()
     return useMemo(() => {
         const global = window as any
-        const useDenoUrl = `useDeno://${pathname}`
-        const { [`__asyncData_${useDenoUrl}`]: asyncData } = global
-        const key = `${useDenoUrl}#${id}`
-        if (asyncData && key in asyncData) {
-            return asyncData[key]
+        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 ret = callback()
-            if (ret instanceof Promise) {
-                events.emit(useDenoUrl, id, ret.then(data => {
-                    if (asyncData) {
-                        asyncData[key] = data
+            const v = callback()
+            if (v instanceof Promise) {
+                events.emit(eventName, id, v.then(value => {
+                    if (renderingData) {
+                        renderingData[key] = value
                     }
-                    events.emit(useDenoUrl, id, data)
-                }), true)
-                throw new AsyncUseDenoError('async useDeno')
+                    events.emit(eventName, id, { value, expires })
+                }))
+                // thow an `AsyncUseDenoError` to break current rendering, then re-render
+                throw new AsyncUseDenoError()
             } else {
-                if (asyncData) {
-                    asyncData[key] = ret
+                if (renderingData) {
+                    renderingData[key] = v
                 }
-                events.emit(useDenoUrl, id, ret)
-                return ret
+                events.emit(eventName, id, { value: v, expires })
+                return v
             }
         }
-        return global[key] || null
+        return global[key].value || null
     }, [pathname])
 }
 
 /**
  * `withDeno` allows you to use `useDeno` hook with class component.
  *
- * ```javascript
+ * ```tsx
  * class MyComponent extends React.Component {
  *   render() {
- *     return <p>{this.props.version.deno}</p>
+ *     return <p>{this.props.deno.version}</p>
  *   }
  * }
- * export default withDeno(() => Deno.version)(MyComponent)
+ * 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>)) {
+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 denoProps = useDeno(callback)
-            if (typeof denoProps === 'object') {
-                return createElement(Component, { ...props, ...denoProps })
-            }
-            return createElement(Component, props)
+            const deno = useDeno<T>(callback, revalidate)
+            return createElement(Component, { ...props, deno })
         }
     }
 }