Very Popular
Latest
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369import { FetchError } from "../framework/core/error.ts";import { matchRoutes, type RouteModule, type Router } from "../framework/core/router.ts";import { cleanPath, isFilledString, isPlainObject, utf8Enc } from "../shared/util.ts";import { CUSTOM_HTML_REWRITER } from "./context.ts";import { HTMLRewriter, path } from "./deps.ts";import depGraph from "./graph.ts";import { getAlephConfig, getAppDir, getDeploymentId, getFiles, regJsxFile, toLocalPath } from "./helpers.ts";import log from "./log.ts";import { importRouteModule } from "./router.ts";import type { HTMLRewriterHandlers, SSR, SSRContext, SuspenseMarker } from "./types.ts";
export type RenderOptions = { indexHtml: Uint8Array; router: Router; ssr: SSR; isDev?: boolean;};
export default { async fetch(req: Request, ctx: Record<string, unknown>, options: RenderOptions): Promise<Response> { const { indexHtml, router, ssr, isDev } = options; const headers = new Headers(); const isFn = typeof ssr === "function"; const CSP = isFn ? undefined : ssr.CSP; const render = isFn ? ssr : ssr.render; const [url, modules, deferedData] = await initSSR(req, ctx, router); const headCollection: string[] = []; const customHTMLRewriter = Reflect.get(ctx, CUSTOM_HTML_REWRITER) as [string, HTMLRewriterHandlers][];
let status = 200; let suspenseMarker: SuspenseMarker | undefined; let nonce: string | undefined;
const ssrContext: SSRContext = { url, modules, headCollection, signal: req.signal, setStatus: (code) => { status = code; }, setSuspenseMarker: (selector, test) => { suspenseMarker = { selector, test }; }, };
if (!isDev && CSP) { const _nonce = CSP.nonce ? Date.now().toString(36) : undefined; const policy = CSP.getPolicy(url, _nonce); if (policy) { headers.append("Content-Security-Policy", policy); if (_nonce && policy.includes("nonce-" + _nonce)) { nonce = _nonce; (ssrContext as Record<string, unknown>).nonce = _nonce; } } }
let body = await render(ssrContext); if (typeof body !== "string" && !(body instanceof ReadableStream)) { log.warn("Invalid SSR body"); body = ""; }
// find inline css depGraph.shallowWalk(modules.map(({ filename }) => filename), (mod) => { const { specifier, inlineCSS } = mod; if (inlineCSS) { headCollection.push(`<style data-module-id="${specifier}" ssr>${inlineCSS}</style>`); } });
// build unocss const config = getAlephConfig(); if (config?.atomicCSS) { const { atomicCSS, build } = config; const { test = regJsxFile, resetCSS } = atomicCSS; let css = Reflect.get(globalThis, "__ALEPH_ATOMICCSS_BUILD"); if (!css) { const t = performance.now(); const appDir = getAppDir(); const files = await getFiles(appDir); const outputDir = "." + cleanPath(build?.outputDir ?? "./output"); const inputSources = await Promise.all( files.filter((name) => test.test(name) && !name.startsWith(outputDir)).map((name) => Deno.readTextFile(path.join(appDir, name)) ), ); if (inputSources.length > 0) { const ret = await atomicCSS.generate(inputSources.join("\n"), { minify: !isDev, }); if (ret.matched.size > 0) { css = ret.css; if (!isDev) { Reflect.set(globalThis, "__ALEPH_ATOMICCSS_BUILD", css); } log.debug( `Atomic CSS generated in ${(performance.now() - t).toFixed(2)}ms`, atomicCSS.name && atomicCSS.version ? `(Powered by ${atomicCSS.name}@${atomicCSS.version})` : "", ); } } } if (css) { if (resetCSS) { headCollection.push(`<link rel="stylesheet" href="${toLocalPath(resetCSS)}">`); } headCollection.push(`<style>${css}</style>`); } }
const stream = new ReadableStream({ start: (controller) => { let streamStarted = false;
const suspenseChunks: Uint8Array[] = []; const rewriter = new HTMLRewriter("utf8", (chunk: Uint8Array) => { if (streamStarted) { suspenseChunks.push(chunk); } else { controller.enqueue(chunk); } });
// apply custom html rewrite handlers defined by middlewares customHTMLRewriter.forEach(([selector, handlers]) => rewriter.on(selector, handlers));
// inject the router manifest rewriter.on("head", { element(el) { if (router.routes.length > 0) { const json = JSON.stringify({ routes: router.routes.map(([_, meta]) => meta), prefix: router.prefix, }); el.append(`<script id="router-manifest" type="application/json">${json}</script>`, { html: true, }); } }, });
rewriter.on("head", { element(el) { const ssrModules = modules.map(({ url, params, filename, withData, data, dataCacheTtl }) => { const defered = typeof data === "function" ? true : undefined; return { url: url.pathname + url.search, params, filename, withData, dataCacheTtl, data: defered ? undefined : data instanceof Error ? undefined : data, dataDefered: defered, error: data instanceof Error ? { message: data.message, stack: data.stack } : undefined, }; });
// replace "/" to "\/" to prevent xss const modulesJSON = JSON.stringify(ssrModules).replaceAll("/", "\\/"); el.append( `<script id="ssr-data" type="application/json">${modulesJSON}</script>`, { html: true }, );
// add module preload links const deployId = getDeploymentId(); const q = deployId ? `?v=${deployId}` : ""; el.append( modules.map(({ filename }) => `<link rel="modulepreload" href="${filename.slice(1)}${q}" data-module-id="${filename}" />` ).join(""), { html: true }, );
headCollection.forEach((h) => isFilledString(h) && el.append(h, { html: true })); }, });
rewriter.on("ssr-body", { element(el) { if (typeof body === "string") { el.replace(body, { html: true }); } else if (body instanceof ReadableStream) { streamStarted = true; el.remove();
const rw = new HTMLRewriter("utf8", (chunk: Uint8Array) => { controller.enqueue(chunk); });
if (suspenseMarker) { rw.on(suspenseMarker.selector, { element(el) { if (suspenseMarker!.test(el)) { suspenseChunks.splice(0, suspenseChunks.length).forEach((chunk) => controller.enqueue(chunk)); } }, }); }
const reader = body.getReader(); const send = async () => { try { while (true) { const { done, value } = await reader.read(); if (done) { break; } rw.write(value); } rw.end(); if (suspenseChunks.length > 0) { suspenseChunks.forEach((chunk) => controller.enqueue(chunk)); } if (Object.keys(deferedData).length > 0) { controller.enqueue( utf8Enc.encode( `<script type="application/json" id="defered-data">${JSON.stringify(deferedData)}</script>`, ), ); } } finally { try { controller.close(); } catch (error) { log.warn(error); } rw.free(); } }; send(); } }, });
if (nonce) { rewriter.on("script", { element(el) { const typeAttr = el.getAttribute("type"); if ((!typeAttr || typeAttr === "module") && !el.getAttribute("src")) { el.setAttribute("nonce", nonce!); } }, }); }
try { rewriter.write(indexHtml); rewriter.end(); } finally { if (!streamStarted) { controller.close(); } rewriter.free(); } }, });
if (!headers.has("Cache-Control")) { headers.append("Cache-Control", "public, max-age=0, must-revalidate"); } headers.set("Content-Type", "text/html; charset=utf-8");
return new Response(stream, { headers, status }); },};
/** import route modules and fetch data for SSR */async function initSSR( req: Request, ctx: Record<string, unknown>, router: Router,): Promise<[ url: URL, routing: RouteModule[], deferedData: Record<string, unknown>,]> { const url = new URL(req.url); const matches = matchRoutes(url, router); const deferedData: Record<string, unknown> = {};
// import module and fetch data for each matched route const modules = await Promise.all(matches.map(async ([ret, meta]) => { const mod = await importRouteModule(meta, router.appDir); const dataConfig = mod.data; const rmod: RouteModule = { url: new URL(ret.pathname.input + url.search, url.href), params: ret.pathname.groups, filename: meta.filename, exports: mod, };
let fetcher: CallableFunction | undefined; let dataDefer = false; if (typeof dataConfig === "function") { fetcher = dataConfig; } else if (isPlainObject(dataConfig)) { const { fetch, defer, cacheTtl } = dataConfig; fetcher = typeof fetch === "function" ? fetch : undefined; dataDefer = Boolean(defer); rmod.dataCacheTtl = typeof cacheTtl === "number" ? cacheTtl : undefined; }
// assign route params to context Object.assign(ctx.params as Record<string, string>, ret.pathname.groups);
if (typeof fetcher === "function") { const fetchData = async () => { let res: unknown; res = fetcher!(req, ctx); if (res instanceof Promise) { res = await res; } if (res instanceof Response) { if (res.status >= 400) { throw await FetchError.fromResponse(res); } if (res.status >= 300) { if (res.headers.has("Location")) { throw res; } throw new FetchError(500, "Missing the `Location` header"); } try { const data = await res.json(); if (dataDefer) { deferedData[rmod.url.pathname + rmod.url.search] = data; } return data; } catch (_e) { throw new FetchError(500, "Data must be valid JSON"); } } else if (res === null || isPlainObject(res) || Array.isArray(res)) { if (dataDefer) { deferedData[rmod.url.pathname + rmod.url.search] = res; } return res; } else { throw new FetchError(500, "Data must be valid JSON"); } }; rmod.withData = true; if (dataDefer) { rmod.data = fetchData; } else { try { rmod.data = await fetchData(); } catch (v) { if (v instanceof Error) { rmod.data = v; } else { throw v; } } } }
return rmod; }));
return [ url, modules.filter(({ exports }) => exports.default !== undefined), deferedData, ];}