Very Popular
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356import type { Component, Ref, ShallowRef } from "vue";import { createSSRApp, defineComponent, h, ref, shallowRef, watch } from "vue";import type { Route, RouteMeta, RouteModule, Router } from "../core/routes.ts";import { matchRoutes } from "../core/routes.ts";import events from "../core/events.ts";import { FetchError } from "../core/error.ts";import { URLPatternCompat } from "../core/url_pattern.ts";import type { SSRContext } from "../../server/types.ts";import { RouterContext } from "./context.ts";import { Link } from "./link.ts";import { Head } from "./head.ts";import { Err } from "./error.ts";
export type RouteData = { data?: unknown; dataCacheTtl?: number; dataExpires?: number;};
type RootProps = { ssrContext?: SSRContext;};
type RouterProps = { modules: ShallowRef<RouteModule[]>; url: Ref<URL>; dataCache: Map<string, RouteData>; dataUrl: Ref<string>;};
type RouterRootProps = { modules: ShallowRef<RouteModule[]>; dataCache: Map<string, RouteData>; ssrContext?: SSRContext;};
const createRouter = ({ modules, url, dataCache, dataUrl }: RouterProps) => { const router = loadRouterFromTag(); const _dataUrl = url.value.pathname + url.value.search;
modules.value.forEach((module) => { const { data, dataCacheTtl } = module; dataCache.set(_dataUrl, { data, dataCacheTtl, dataExpires: Date.now() + (dataCacheTtl || 1) * 1000, }); });
watch(() => modules.value, () => { const params: Record<string, string> = {}; modules.value.forEach((m) => Object.assign(params, m.params)); dataUrl.value = url.value.pathname + url.value.search; RouterContext.value = { url: url.value, params }; }, { immediate: true });
const prefetchData = async (dataUrl: string) => { const rd: RouteData = {}; const fetchData = async () => { const res = await fetch(dataUrl + (dataUrl.includes("?") ? "&" : "?") + "_data_"); if (!res.ok) { const err = await FetchError.fromResponse(res); const details = err.details as { redirect?: { location: string } }; if (err.status === 501 && typeof details.redirect?.location === "string") { location.href = details.redirect?.location; return; } throw err; } try { const data = await res.json(); const cc = res.headers.get("Cache-Control"); rd.dataCacheTtl = cc?.includes("max-age=") ? parseInt(cc.split("max-age=")[1]) : undefined; rd.dataExpires = Date.now() + (rd.dataCacheTtl || 1) * 1000; return data; } catch (_e) { throw new FetchError(500, "Data must be valid JSON"); } }; rd.data = await fetchData(); dataCache.set(dataUrl, rd); };
const onmoduleprefetch = (e: Record<string, unknown>) => { const deployId = document.body.getAttribute("data-deployment-id"); const pageUrl = new URL(e.href as string, location.href); const matches = matchRoutes(pageUrl, router); matches.map(([_, meta]) => { const { filename } = meta; try { __aleph.getRouteModule(filename); } catch (_e) { const link = document.createElement("link"); let href = meta.filename.slice(1); if (deployId) { href += `?v=${deployId}`; } link.setAttribute("rel", "modulepreload"); link.setAttribute("href", href); document.head.appendChild(link); } }); };
const onpopstate = async (e: Record<string, unknown>) => { const next_url = (e.url as URL | undefined) || new URL(window.location.href); const matches = matchRoutes(next_url, router); const loadingBar = getLoadingBar(); let loading: number | null = setTimeout(() => { loading = null; loadingBar.style.opacity = "1"; loadingBar.style.width = "50%"; }, 300); const next_modules = await Promise.all(matches.map(async ([ret, meta]) => { const { filename } = meta; const rmod: RouteModule = { url: new URL(ret.pathname.input + next_url.search, next_url.href), params: ret.pathname.groups, filename, exports: await __aleph.importRouteModule(filename), }; const dataUrl = rmod.url.pathname + rmod.url.search; const dataConfig = rmod.exports.data as undefined | Record<string, boolean>; rmod.withData = Boolean(dataConfig?.get || dataConfig?.GET); if (rmod.withData && !dataCache.has(dataUrl)) { await prefetchData(dataUrl); } return rmod; })); modules.value = next_modules; url.value = next_url; setTimeout(() => { if (loading) { clearTimeout(loading); loadingBar.remove(); } else { const moveOutTime = 0.7; const fadeOutTime = 0.3; const t1 = setTimeout(() => { loadingBar.style.opacity = "0"; }, moveOutTime * 1000); const t2 = setTimeout(() => { clearLoadingBar = null; loadingBar.remove(); }, (moveOutTime + fadeOutTime) * 1000); clearLoadingBar = () => { clearTimeout(t1); clearTimeout(t2); }; loadingBar.style.transition = `opacity ${fadeOutTime}s ease-out, width ${moveOutTime}s ease-in-out`; setTimeout(() => { loadingBar.style.width = "100%"; }, 0); } }, 0); if (e.url) { window.scrollTo(0, 0); } };
addEventListener("popstate", onpopstate as unknown as EventListener); events.on("popstate", onpopstate); events.on("moduleprefetch", onmoduleprefetch); events.emit("routerready", { type: "routerready" });
// todo: update routes by hmr const Router = defineComponent({ name: "Router", beforeUnmount() { removeEventListener("popstate", onpopstate as unknown as EventListener); events.off("popstate", onpopstate); events.off("moduleprefetch", onmoduleprefetch); }, render() { if (modules.value.length > 0) { const defaultExport = modules.value[0].exports.default; if (modules.value.length > 1) { return h( defaultExport as Component, null, () => h(createRouterRoot({ modules: shallowRef(modules.value.slice(1)), dataCache })), ); } return h(defaultExport as Component); } return h(Err, { status: 404, message: "page not found" }); }, });
return Router;};
const createRouterRoot = (props: RouterRootProps) => { const { modules, dataCache } = props;
const RouterRoot = defineComponent({ name: "RouterRoot", render() { if (modules.value.length > 0) { const defaultExport = modules.value[0].exports.default; if (modules.value.length > 1) { return h( defaultExport as Component, null, () => h(createRouterRoot({ modules: shallowRef(modules.value.slice(1)), dataCache })), ); } if (defaultExport && typeof defaultExport === "object") { return h(defaultExport as Component); } return h(Err, { status: 400, message: "missing default export as a valid Vue component" }); } throw new Error("modules must be non-empty array"); }, });
return RouterRoot;};
const createApp = (props?: RootProps) => { const { ssrContext } = props || {}; const modules = shallowRef(ssrContext?.routing || loadSSRModulesFromTag());
if (modules.value.length === 0) { return createSSRApp(Err, { status: 404, message: "page not found" }); }
const url = ref(ssrContext?.url || new URL(window.location?.href)); const dataCache = new Map<string, RouteData>(); const dataUrl = ref(url.value.pathname + url.value.search);
const defaultRouteModules = modules.value[0]; const { exports } = defaultRouteModules;
if (exports.default) { const Router = createRouter({ modules, url, dataCache, dataUrl }); const app = createSSRApp(defineComponent({ name: "App", render() { return [h(Router)]; }, }));
app.provide("modules", modules); app.provide("dataCache", dataCache); app.provide("ssrContext", ssrContext); app.provide("ssrHeadCollection", ssrContext?.headCollection); app.provide("dataUrl", dataUrl);
// registe aleph/vue component app.component("Link", Link); app.component("Head", Head);
return app; }
return createSSRApp(Err);};
function loadSSRModulesFromTag(): RouteModule[] { const el = window.document?.getElementById("ssr-data"); if (el) { try { const data = JSON.parse(el.innerText); if (Array.isArray(data)) { let deferedData: Record<string, unknown> | null | undefined = undefined; return data.map(({ url, filename, dataDefered, ...rest }) => { const mod = __aleph.getRouteModule(filename); if (dataDefered) { if (deferedData === undefined) { const el = window.document?.getElementById("defered-data"); if (el) { deferedData = JSON.parse(el.innerText); } else { deferedData = null; } } if (deferedData) { rest.data = deferedData[url]; } } return <RouteModule> { url: new URL(url, location.href), filename, exports: mod, ...rest, }; }); } } catch (e) { throw new Error(`loadSSRModulesFromTag: ${e.message}`); } } return [];}
let clearLoadingBar: CallableFunction | null = null;
function getLoadingBar(): HTMLDivElement { if (typeof clearLoadingBar === "function") { clearLoadingBar(); clearLoadingBar = null; } let bar = (document.getElementById("loading-bar") as HTMLDivElement | null); if (!bar) { bar = document.createElement("div"); bar.id = "loading-bar"; document.body.appendChild(bar); } Object.assign(bar.style, { position: "fixed", top: "0", left: "0", zIndex: "9999", width: "0", height: "1px", opacity: "0", background: "rgba(128, 128, 128, 0.9)", transition: "opacity 0.6s ease-in, width 3s ease-in", }); return bar;}
function loadRouterFromTag(): Router { const el = window.document?.getElementById("router-manifest"); if (el) { try { const manifest = JSON.parse(el.innerText); if (Array.isArray(manifest.routes)) { let _app: Route | undefined = undefined; let _404: Route | undefined = undefined; const routes = manifest.routes.map((meta: RouteMeta) => { const { pattern } = meta; const route: Route = [new URLPatternCompat(pattern), meta]; if (pattern.pathname === "/_app") { _app = route; } else if (pattern.pathname === "/_404") { _404 = route; } return route; }); return { routes, prefix: manifest.prefix, _app, _404 }; } } catch (e) { throw new Error(`loadRouterFromTag: ${e.message}`); } } return { routes: [], prefix: "" };}
const useRouter = () => { return RouterContext;};
export { createApp, useRouter };