refactor: clean up

Author: Wenjie Xia

framework/core/hmr.ts

@@ -1,4 +1,4 @@
-import { hashShort } from '../../shared/constants.ts'
+import util from '../../shared/util.ts'
 import events from './events.ts'
 
 interface Callback {
@@ -83,7 +83,7 @@ socket.addEventListener('message', ({ data: rawData }: { data?: string }) => {
                     }
                     break
             }
-            console.log(`[HMR]${hash ? ' [' + hash.slice(0, hashShort) + ']' : ''} ${type} module '${url}'`)
+            console.log(`[HMR]${hash ? ' [' + util.shortHash(hash) + ']' : ''} ${type} module '${url}'`)
         } catch (err) {
             console.warn(err)
         }

framework/core/routing.ts

@@ -1,4 +1,4 @@
-import { reModuleExt } from '../../shared/constants.ts'
+import { pageModuleExts } from '../../shared/constants.ts'
 import util from '../../shared/util.ts'
 import type { RouterURL } from '../../types.ts'
 import events from './events.ts'
@@ -51,7 +51,7 @@ export class Routing {
     }
 
     update(module: RouteModule) {
-        const newRoute: Route = { path: getPagePath(module.url), module }
+        const newRoute: Route = { path: getPagePathname(module.url), module }
         const dirtyRoutes: Set<Route[]> = new Set()
         let exists = false
         let targetRoutes = this._routes
@@ -170,11 +170,6 @@ export class Routing {
     }
 }
 
-export function getPagePath(url: string): string {
-    const pathname = url.replace(reModuleExt, '').toLowerCase().replace(/^\/pages\//, '/').replace(/\/?index$/, '/')
-    return pathname.startsWith('/api/') ? pathname : pathname.replace(/\s+/g, '-')
-}
-
 function matchPath(routePath: string, locPath: string): [Record<string, string>, boolean] {
     const params: Record<string, string> = {}
     const routeSegments = util.splitPath(routePath)
@@ -235,3 +230,17 @@ export function isHttpUrl(url: string) {
         return false
     }
 }
+
+export function getPagePathname(url: string): string {
+    const pathname = trimPageModuleExt(url).replace(/^\/pages\//, '/').replace(/\/?index$/, '/')
+    return pathname
+}
+
+export function trimPageModuleExt(url: string) {
+    for (const ext of pageModuleExts) {
+        if (url.endsWith('.' + ext)) {
+            return url.slice(0, -(ext.length + 1))
+        }
+    }
+    return url
+}

framework/react/bootstrap.ts

@@ -1,8 +1,7 @@
 import type { ComponentType } from 'https://esm.sh/react'
 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 { Route, RouteModule, Routing, trimPageModuleExt } from '../core/routing.ts'
 import Router from './router.ts'
 import { importModule } from './util.ts'
 
@@ -25,7 +24,7 @@ export default async function bootstrap({ baseUrl, defaultLocale, locales, route
 
     await Promise.all([...sharedModules, ...pageModuleTree].map(async mod => {
         const { default: C } = await importModule(baseUrl, mod)
-        switch (mod.url.replace(reModuleExt, '')) {
+        switch (trimPageModuleExt(mod.url)) {
             case '/404':
                 customComponents['E404'] = C
                 break

framework/react/renderer.ts

@@ -1,7 +1,6 @@
 import type { ComponentType, ReactElement } from 'https://esm.sh/react'
 import { createElement } from 'https://esm.sh/react'
 import { renderToString } from 'https://esm.sh/react-dom/server'
-import { hashShort } from '../../shared/constants.ts'
 import util from '../../shared/util.ts'
 import type { RenderResult, RouterURL } from '../../types.ts'
 import events from '../core/events.ts'
@@ -143,7 +142,7 @@ export async function render(
 
     // get inline-styles
     const rets = await Promise.all(styles?.filter(({ url }) => !url.startsWith('#inline-style-')).map(({ url, hash }) => {
-        const path = util.isLikelyURL(url) ? '/-/' + url.split('://')[1] : `${url}.${hash.slice(0, hashShort)}`
+        const path = util.isLikelyHttpURL(url) ? '/-/' + url.split('://')[1] : `${url}.${util.shortHash(hash)}`
         return import('file://' + util.cleanPath(`${Deno.cwd()}/.aleph/${buildMode}/${path}.js`))
     }) || [])
     rets.forEach(({ default: def }) => util.isFunction(def) && def())

framework/react/util.ts

@@ -1,8 +1,7 @@
 import type { ComponentType } from 'https://esm.sh/react'
-import { hashShort, reModuleExt } from '../../shared/constants.ts'
 import util from '../../shared/util.ts'
 import type { RouterURL } from '../../types.ts'
-import { RouteModule } from '../core/routing.ts'
+import { getPagePathname, RouteModule, trimPageModuleExt } from '../core/routing.ts'
 import { E400MissingComponent } from './error.ts'
 
 const symbolFor = typeof Symbol === 'function' && Symbol.for
@@ -17,7 +16,7 @@ export interface PageProps {
 export function importModule(baseUrl: string, mod: RouteModule, forceRefetch = false): Promise<any> {
     const { __ALEPH, document } = window as any
     if (!__ALEPH || mod.url.startsWith('/pages/')) {
-        const src = util.cleanPath(baseUrl + '/_aleph/' + mod.url.replace(reModuleExt, '') + `.${mod.hash.slice(0, hashShort)}.js`) + (forceRefetch ? `?t=${Date.now()}` : '')
+        const src = util.cleanPath(baseUrl + '/_aleph/' + trimPageModuleExt(mod.url) + `.${util.shortHash(mod.hash)}.js`) + (forceRefetch ? `?t=${Date.now()}` : '')
         if (__ALEPH) {
             return new Promise((resolve, reject) => {
                 const script = document.createElement('script')
@@ -91,19 +90,19 @@ export function createPageProps(componentTree: { url: string, Component?: Compon
         pageProps: {}
     }
     if (componentTree.length > 0) {
-        Object.assign(pageProps, _createPagePropsSegment(componentTree[0]))
+        Object.assign(pageProps, createPagePropsSegment(componentTree[0]))
     }
     if (componentTree.length > 1) {
         componentTree.slice(1).reduce((p, seg) => {
-            const c = _createPagePropsSegment(seg)
+            const c = createPagePropsSegment(seg)
             p.pageProps = c
             return c
         }, pageProps)
     }
     return pageProps
 }
 
-function _createPagePropsSegment(seg: { url: string, Component?: ComponentType<any> }): PageProps {
+function createPagePropsSegment(seg: { url: string, Component?: ComponentType<any> }): PageProps {
     const pageProps: PageProps = {
         Page: null,
         pageProps: {}
@@ -113,7 +112,7 @@ function _createPagePropsSegment(seg: { url: string, Component?: ComponentType<a
             pageProps.Page = seg.Component
         } else {
             pageProps.Page = E400MissingComponent
-            pageProps.pageProps = { name: 'Page: ' + util.trimPrefix(seg.url, '/pages').replace(reModuleExt, '') }
+            pageProps.pageProps = { name: 'Page: ' + getPagePathname(seg.url) }
         }
     }
     return pageProps