Skip to main content
Module

x/aleph/server/renderer.ts

The Full-stack Framework in Deno.
Go to Latest
File
import { FetchError } from "../runtime/core/error.ts";import { matchRoutes } from "../runtime/core/route.ts";import util from "../lib/util.ts";import { fromFileUrl, HTMLRewriter, join } from "./deps.ts";import depGraph from "./graph.ts";import { getAlephConfig, getDeploymentId, getFiles, getUnoGenerator, regUseUnocss } from "./helpers.ts";import { importRouteModule } from "./routing.ts";import type { Element, HTMLRewriterHandlers, RouteModule, Router, SSR, SSRContext, SSRResult, UnoConfig,} from "./types.ts";
export type RenderOptions = { indexHtml: Uint8Array; customHTMLRewriter: [selector: string, handlers: HTMLRewriterHandlers][]; router: Router | null; ssr: SSR; isDev?: boolean;};
/** The virtual `bootstrapScript` to mark the ssr streaming initial UI is ready */const bootstrapScript = `data:text/javascript;charset=utf-8;base64,${btoa("/* stage ready */")}`;
export default { async fetch(req: Request, ctx: Record<string, unknown>, options: RenderOptions): Promise<Response> { const { indexHtml, router, customHTMLRewriter, ssr, isDev } = options; const headers = new Headers(ctx.headers as Headers); const isFn = typeof ssr === "function"; const dataDefer = isFn ? false : !!ssr.dataDefer; const cc = !isFn ? ssr.cacheControl : "public"; const CSP = isFn ? undefined : ssr.CSP; const render = isFn ? ssr : ssr.render; const [url, routeModules, deferedData] = await initSSR(req, ctx, router, dataDefer); const headCollection: string[] = []; const ssrContext: SSRContext = { url, routeModules, headCollection, dataDefer, signal: req.signal, bootstrapScripts: [bootstrapScript], onError: (_error: unknown) => { // todo: handle suspense ssr error }, };
let body = await render(ssrContext); if (typeof body !== "string" && !(body instanceof ReadableStream)) { body = ""; }
// find inline css depGraph.shallowWalk(routeModules.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?.unocss) { const unoGenerator = getUnoGenerator(); if (unoGenerator) { const t = performance.now(); const { test = regUseUnocss, resetCSS = "tailwind", } = config.unocss === "preset" ? {} as UnoConfig : config.unocss; let css = Reflect.get(globalThis, "__ALEPH_UNOCSS_BUILD"); if (!css) { const dir = config?.baseUrl ? fromFileUrl(new URL(".", config.baseUrl)) : Deno.cwd(); const files = await getFiles(dir); const outputDir = "." + util.cleanPath(config.optimization?.outputDir ?? "./output"); const inputSources = await Promise.all( files.filter((name) => test.test(name) && !name.startsWith(outputDir)).map((name) => Deno.readTextFile(join(dir, name)) ), ); if (inputSources.length > 0) { const ret = await unoGenerator.generate(inputSources.join("\n"), { minify: !isDev, }); if (ret.matched.size > 0) { css = ret.css; if (!isDev) { Reflect.set(globalThis, "__ALEPH_UNOCSS_BUILD", css); } } } } if (css) { const buildTime = (performance.now() - t).toFixed(2); headCollection.push( `<link rel="stylesheet" href="/-/esm.sh/@unocss/reset@0.45.1/${resetCSS}.css">`, `<style data-unocss="${unoGenerator.version}" data-build-time="${buildTime}ms">${css}</style>`, ); } } }
const ssrRes: SSRResult = { context: ssrContext, body, deferedData, is404: router !== null && (routeModules.length === 0 || routeModules.at(-1)?.url.pathname === "/_404"), }; 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 (policy.includes("nonce-" + nonce)) { ssrRes.nonce = nonce; } } }
const stream = new ReadableStream({ start: (controller) => { let ssrStreaming = false; const suspenseChunks: Uint8Array[] = []; const rewriter = new HTMLRewriter("utf8", (chunk: Uint8Array) => { if (ssrStreaming) { 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 roures manifest rewriter.on("head", { element(el: Element) { if (router && router.routes.length > 0) { const json = JSON.stringify({ routes: router.routes.map(([_, meta]) => meta), prefix: router.prefix, }); el.append(`<script id="routes-manifest" type="application/json">${json}</script>`, { html: true, }); } }, });
const { context, body, deferedData, nonce } = ssrRes; const { routeModules, headCollection } = context;
rewriter.on("head", { element(el: Element) { headCollection.forEach((h) => util.isFilledString(h) && el.append(h, { html: true })); if (routeModules.length > 0) { const ssrModules = routeModules.map(({ url, params, filename, withData, data, dataCacheTtl }) => { const defered = typeof data === "function" ? true : undefined; return { url: url.pathname + url.search, params, filename, withData, error: data instanceof Error ? { message: data.message, stack: data.stack } : undefined, data: defered ? undefined : data instanceof Error ? undefined : data, dataCacheTtl, dataDefered: defered, }; });
// replace "/" to "\/" to prevent xss const modulesJSON = JSON.stringify(ssrModules).replaceAll("/", "\\/"); el.append( `<script id="ssr-modules" type="application/json">${modulesJSON}</script>`, { html: true }, );
const deployId = getDeploymentId(); const importStmts = routeModules.map(({ filename }, idx) => `import $${idx} from ${JSON.stringify(filename.slice(1) + (deployId ? `?v=${deployId}` : ""))} ;` ).join(""); const kvs = routeModules.map(({ filename, data }, idx) => `${JSON.stringify(filename)}:{defaultExport:$${idx}${data !== undefined ? ",withData:true" : ""}}` ).join(","); const nonceAttr = nonce ? ` nonce="${nonce}"` : ""; el.append( `<script type="module"${nonceAttr}>${importStmts}window.__ROUTE_MODULES={${kvs}};</script>`, { html: true }, ); } }, });
rewriter.on("ssr-body", { element(el: Element) { if (typeof body === "string") { el.replace(body, { html: true }); } else if (body instanceof ReadableStream) { el.remove(); ssrStreaming = true;
const rw = new HTMLRewriter("utf8", (chunk: Uint8Array) => { controller.enqueue(chunk); }); rw.on("script", { element(el: Element) { if (el.getAttribute("src") === bootstrapScript) { suspenseChunks.splice(0, suspenseChunks.length).forEach((chunk) => controller.enqueue(chunk)); el.remove(); } }, }); const send = async () => { try { const reader = body.getReader(); 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( util.utf8TextEncoder.encode( `<script type="application/json" id="defered-data">${JSON.stringify(deferedData)}</script>`, ), ); } } finally { controller.close(); rw.free(); } }; send(); } }, });
if (nonce) { rewriter.on("script", { element(el: Element) { const typeAttr = el.getAttribute("type"); if ((!typeAttr || typeAttr === "module") && !el.getAttribute("src")) { el.setAttribute("nonce", nonce); } }, }); }
try { rewriter.write(indexHtml); rewriter.end(); } finally { if (!ssrStreaming) { controller.close(); } rewriter.free(); } }, });
if (routeModules.every(({ dataCacheTtl: ttl }) => typeof ttl === "number" && !Number.isNaN(ttl) && ttl > 0)) { const ttls = routeModules.map(({ dataCacheTtl }) => Number(dataCacheTtl)); headers.append("Cache-Control", `${cc}, max-age=${Math.min(...ttls)}`); } else { headers.append("Cache-Control", `${cc}, max-age=0, must-revalidate`); } headers.set("Content-Type", "text/html; charset=utf-8"); return new Response(stream, { headers, status: ssrRes.is404 ? 404 : 200 }); },};
/** import route modules and fetch data for SSR */async function initSSR( req: Request, ctx: Record<string, unknown>, router: Router | null, dataDefer: boolean,): Promise<[ url: URL, routeModules: RouteModule[], deferedData: Record<string, unknown>,]> { const url = new URL(req.url); if (!router) { return [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 = util.isPlainObject(mod.data) ? mod.data : mod; const rmod: RouteModule = { url: new URL(ret.pathname.input + url.search, url.href), params: ret.pathname.groups, filename: meta.filename, defaultExport: mod.default, dataCacheTtl: dataConfig?.cacheTtl as (number | undefined), };
// assign route params to context Object.assign(ctx.params as Record<string, string>, ret.pathname.groups);
// check the `get` method of data, if `suspense` is enabled then return a promise instead const fetcher = dataConfig.get ?? dataConfig.GET; if (typeof fetcher === "function") { const fetchData = async () => { let res: unknown; // check the `any` method of data, throw the response object if it returns one const anyFetcher = dataConfig.any ?? dataConfig.ANY; if (typeof anyFetcher === "function") { const res = await anyFetcher(req, ctx); if (res instanceof Response) { throw res; } } 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 || util.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 (error) { if (error instanceof Error) { rmod.data = error; } else { throw error; } } } }
return rmod; }));
return [ url, modules.filter(({ defaultExport }) => defaultExport !== undefined), deferedData, ];}