refactor: cleanup

Author: Je

app.ts

@@ -1,19 +1,11 @@
-import React, { ComponentType, createContext, useCallback, useEffect, useState } from 'https://esm.sh/react'
-import { DataContext } from './data.ts'
+import React, { ComponentType, useCallback, useEffect, useState } from 'https://esm.sh/react'
+import { AppManifestContext, DataContext, RouterContext } from './context.ts'
 import { E404Page, E501App, E501Page } from './error.ts'
 import events from './events.ts'
-import route from './route.ts'
-import { RouterContext } from './router.ts'
+import { createRouter } from './router.ts'
 import type { AppManifest, Module, RouterURL } from './types.ts'
 import util, { hashShort } from './util.ts'
 
-export const AppManifestContext = createContext<AppManifest>({
-    baseUrl: '/',
-    defaultLocale: 'en',
-    locales: {},
-})
-AppManifestContext.displayName = 'AppManifestContext'
-
 export function ALEPH({ initial }: {
     initial: {
         manifest: AppManifest
@@ -48,7 +40,7 @@ export function ALEPH({ initial }: {
     })
     const onpopstate = useCallback(async () => {
         const { baseUrl, defaultLocale, locales } = manifest
-        const url = route(
+        const url = createRouter(
             baseUrl,
             Object.keys(pageModules),
             {
@@ -167,6 +159,38 @@ export function ALEPH({ initial }: {
     )
 }
 
+export async function redirect(url: string, replace: boolean) {
+    const { location, document, history } = window as any
+
+    if (util.isHttpUrl(url)) {
+        location.href = url
+        return
+    }
+
+    url = util.cleanPath(url)
+    if (location.protocol === 'file:') {
+        const dataEl = document.getElementById('ssr-data')
+        if (dataEl) {
+            const ssrData = JSON.parse(dataEl.innerHTML)
+            if (ssrData && 'url' in ssrData) {
+                const { url: { pagePath: initialPagePath } } = ssrData
+                location.href = location.href.replace(
+                    `/${util.trimPrefix(initialPagePath, '/') || 'index'}.html`,
+                    `/${util.trimPrefix(url, '/') || 'index'}.html`
+                )
+            }
+        }
+        return
+    }
+
+    if (replace) {
+        history.replaceState(null, '', url)
+    } else {
+        history.pushState(null, '', url)
+    }
+    events.emit('popstate', { type: 'popstate' })
+}
+
 export function getModuleImportUrl(baseUrl: string, { moduleId, hash }: Module) {
     return util.cleanPath(baseUrl + '/_aleph/' + moduleId.replace(/\.js$/, `.${hash.slice(0, hashShort)}.js`))
 }

bootstrap.ts

@@ -2,7 +2,7 @@ import React from 'https://esm.sh/react'
 import { hydrate, render } from 'https://esm.sh/react-dom'
 import { ALEPH, getModuleImportUrl } from './app.ts'
 import { ErrorBoundary } from './error.ts'
-import route from './route.ts'
+import { createRouter } from './router.ts'
 import type { AppManifest, Module, RouterURL } from './types.ts'
 import util from './util.ts'
 
@@ -29,7 +29,7 @@ export default async function bootstrap({
             throw new Error("invalid ssr-data")
         }
     } else {
-        url = route(
+        url = createRouter(
             baseUrl,
             Object.keys(pageModules),
             {

context.ts

@@ -0,0 +1,33 @@
+import { createContext } from 'https://esm.sh/react'
+import type { AppManifest, RouterURL } from './types.ts'
+
+export const AppManifestContext = createNamedContext<AppManifest>(
+    'AppManifestContext',
+    {
+        baseUrl: '/',
+        defaultLocale: 'en',
+        locales: {},
+    }
+)
+
+export const DataContext = createNamedContext<Record<string, any>>(
+    'DataContext',
+    {}
+)
+
+export const RouterContext = createNamedContext<RouterURL>(
+    'RouterContext',
+    {
+        locale: 'en',
+        pagePath: '/',
+        pathname: '/',
+        params: {},
+        query: new URLSearchParams(),
+    }
+)
+
+function createNamedContext<T>(name: string, defaultValue: T) {
+    const c = createContext(defaultValue)
+    c.displayName = name
+    return c
+}

data.ts

@@ -0,0 +1,20 @@
+import React, { ComponentType, useContext } from 'https://esm.sh/react'
+import { DataContext, RouterContext } from './context.ts'
+import type { RouterURL } from './types.ts'
+
+export function useData(key: string) {
+    const data = useContext(DataContext)
+    return data[key]
+}
+
+export function useRouter() {
+    return useContext(RouterContext)
+}
+
+export function withRouter(Component: ComponentType<{ url: RouterURL }>) {
+    function WithRouter(props: any) {
+        const url = useRouter()
+        return React.createElement(Component, Object.assign({}, props, { url }))
+    }
+    return WithRouter
+}

hooks.ts

@@ -1,5 +1,6 @@
 import React, { Children, cloneElement, CSSProperties, isValidElement, MouseEvent, PropsWithChildren, useCallback, useEffect, useMemo, useRef } from 'https://esm.sh/react'
-import { redirect, useRouter } from './router.ts'
+import { redirect } from './app.ts'
+import { useRouter } from './hooks.ts'
 import util from './util.ts'
 
 interface LinkProps {

link.ts

@@ -1,7 +1,7 @@
-export { AppManifestContext } from './app.ts'
-export * from './data.ts'
+export { redirect } from './app.ts'
+export * from './context.ts'
 export { ErrorPage } from './error.ts'
 export { default as Head, SEO, Viewport } from './head.ts'
+export * from './hooks.ts'
 export { default as Link } from './link.ts'
-export * from './router.ts'
 

mod.ts

@@ -2,7 +2,7 @@ import { minify } from 'https://esm.sh/terser'
 import { EventEmitter } from './events.ts'
 import { createHtml } from './html.ts'
 import log from './log.ts'
-import route from './route.ts'
+import { createRouter } from './router.ts'
 import { colors, ensureDir, path, Sha1, walk } from './std.ts'
 import { compile } from './tsc/compile.ts'
 import type { APIHandle, Config, Location, RouterURL } from './types.ts'
@@ -140,7 +140,7 @@ export default class Project {
             modId = './data/index.js'
         }
         if (!this.#modules.has(modId)) {
-            console.warn(`can't get the module by path '${pathname}(${modId})'`)
+            log.warn(`can't get the module by path '${pathname}(${modId})'`)
         }
         return this.getModule(modId)
     }
@@ -176,7 +176,7 @@ export default class Project {
 
     async getPageHtml(location: Location): Promise<[number, string]> {
         const { baseUrl, defaultLocale } = this.config
-        const url = route(
+        const url = createRouter(
             baseUrl,
             Array.from(this.#pageModules.keys()),
             {
@@ -524,7 +524,6 @@ export default class Project {
                                         this._clearPageRenderCache(moduleId)
                                     } else {
                                         const pagePath = util.trimPrefix(moduleId, './pages').replace(reModuleExt, '').replace(/\s+/g, '-').replace(/\/index$/i, '') || '/'
-                                        console.log(">", pagePath)
                                         this.#pageModules.set(pagePath, { moduleId, rendered: new Map() })
                                     }
                                 }
@@ -556,7 +555,7 @@ export default class Project {
                                     }
                                 })
                             }).catch(err => {
-                                log.error("compile", './' + path, err.message)
+                                log.error(`compile(./${path}):`, err.message)
                             })
                         } else if (this.#modules.has(moduleId)) {
                             this.#modules.delete(moduleId)

project.ts

@@ -1,8 +1,7 @@
 import React, { ComponentType } from 'https://esm.sh/react'
 import { renderToString } from 'https://esm.sh/react-dom/server'
-import { DataContext } from './data.ts'
+import { DataContext, RouterContext } from './context.ts'
 import { E501App, E501Page, ErrorBoundary } from './error.ts'
-import { RouterContext } from './router.ts'
 import type { RouterURL } from './types.ts'
 import util from './util.ts'
 export { renderHead } from './head.ts'