Validation failed

${errors}

Go back

{ let msg: { type?: unknown; path?: unknown }; try { msg = JSON.parse(typeof message === "string" ? message : new TextDecoder().decode(message)); } catch { return; } if (msg.type !== "sync") return; const path = typeof msg.path === "string" ? msg.path : "/"; let url: URL; try { url = new URL(path, ws.data.kind === "hmr" ? ws.data.baseUrl : "http://localhost"); } catch { ws.send(JSON.stringify({ type: "error", message: "Invalid HMR sync path" })); return; } if ( url.origin !== (ws.data.kind === "hmr" ? ws.data.baseUrl : url.origin) || !url.pathname.startsWith("/") || url.pathname.startsWith("/__wrnexus/") || !isSafeRequestPath(url.pathname) ) { ws.send(JSON.stringify({ type: "error", message: "Unsafe HMR sync path" })); return; } try { const headers = new Headers(ws.data.kind === "hmr" ? ws.data.headers : undefined); headers.set("accept", "text/html"); headers.set("x-wrnexus-hmr", "1"); const req = new Request(url, { headers }); const ctx = createContext(req, url); initializeRequestCache(ctx); ctx.locals.cspNonce = randomNonce(); if (deps.i18n) { ctx.lang = resolveLang( deps.i18n, ctx.cookies.get(deps.i18n.cookie.name), req.headers.get("accept-language"), ); ctx.t = makeT(deps.i18n, ctx.lang); } const res = withContextHeaders( ctx, await runMiddleware(await resolveMiddleware(), ctx, () => dispatch(ctx)), ); const html = await res.text(); ws.send(JSON.stringify({ type: "html", html })); } catch (err) { if (mode === "development") console.error(err); ws.send( JSON.stringify({ type: "error", message: err instanceof Error ? err.message : "Unknown HMR sync error", }), ); } } return { fetch: fetchHandler, websocket: { open(ws) { if (ws.data?.kind === "hmr") hub?.add(ws); else if (ws.data?.kind === "room") void realtime.open(ws, ws.data.meta); else ws.data?.handler?.open?.(ws); }, message(ws, message) { if (ws.data?.kind === "hmr") { void handleHmrMessage(ws, message); return; } if (ws.data?.kind === "room") void realtime.message(ws, message); else ws.data?.handler?.message?.(ws, message); }, close(ws, code, reason) { if (ws.data?.kind === "hmr") hub?.remove(ws); else if (ws.data?.kind === "room") void realtime.close(ws); else ws.data?.handler?.close?.(ws, code, reason); }, drain(ws) { if (ws.data?.kind === "hmr" || ws.data?.kind === "room") return; ws.data?.handler?.drain?.(ws); }, }, }; } /** * Decode the handful of HTML entities the page compiler emits when escaping * attribute values, so component props arrive as the author wrote them. */ function decodeHtmlEntities(value: string): string { let decoded = value; // Static page attributes can be escaped by their author/generator and then // escaped again by the page compiler. Decode both layers so structured // component props arrive as valid JSON instead of `"` text. for (let pass = 0; pass < 2; pass += 1) { const next = decoded .replace(/"/g, '"') .replace(/'/g, "'") .replace(/</g, "<") .replace(/>/g, ">") .replace(/&/g, "&"); if (next === decoded) break; decoded = next; } return decoded; } /** Content types worth gzipping (text + text-like application types). */ const COMPRESSIBLE_TYPE = /^(?:text\/|application\/(?:json|xml|javascript|manifest\+json)|image\/svg\+xml)/i; /** Below this size gzip's overhead isn't worth it. */ const COMPRESS_MIN_BYTES = 1024; const COMPRESSED_RESPONSE_CACHE_MAX = 256; const compressedResponseCache = new Map< string, { body: Uint8Array; headers: [string, string][]; status: number; statusText: string } >(); function rememberCompressedResponse( key: string, value: { body: Uint8Array; headers: [string, string][]; status: number; statusText: string }, ) { compressedResponseCache.delete(key); compressedResponseCache.set(key, value); if (compressedResponseCache.size > COMPRESSED_RESPONSE_CACHE_MAX) { const oldest = compressedResponseCache.keys().next().value; if (oldest) compressedResponseCache.delete(oldest); } } /** * Gzip a response when the client accepts it and the body is a compressible, * buffered (non-streaming) payload. Streaming/SSE responses opt out via * `Cache-Control: no-transform`, so they are never buffered here. */ async function compressResponse(req: Request, res: Response): Promise { if (req.method.toUpperCase() === "HEAD") return res; const accept = (req.headers.get("accept-encoding") ?? "").toLowerCase(); const acceptsBrotli = /(?:^|,)\s*br(?:\s*;|\s*,|$)/.test(accept); const acceptsGzip = /(?:^|,)\s*gzip(?:\s*;|\s*,|$)/.test(accept); if (!acceptsBrotli && !acceptsGzip) return res; if (res.headers.get("content-encoding")) return res; if (res.status === 204 || res.status === 304) return res; if (!COMPRESSIBLE_TYPE.test(res.headers.get("content-type") ?? "")) return res; if ((res.headers.get("cache-control") ?? "").includes("no-transform")) return res; const immutable = (res.headers.get("cache-control") ?? "").includes("immutable"); // Brotli is ideal for immutable assets because the result is cached. Prefer // substantially faster gzip for per-request HTML/JSON when the client allows // both, avoiding synchronous Brotli work on the request hot path. const preferredEncoding = acceptsBrotli && (immutable || !acceptsGzip) ? "br" : "gzip"; const cacheKey = immutable ? `${req.url}\n${preferredEncoding}` : ""; if (cacheKey) { const cached = compressedResponseCache.get(cacheKey); if (cached) { compressedResponseCache.delete(cacheKey); compressedResponseCache.set(cacheKey, cached); return new Response(cached.body.slice(), { status: cached.status, statusText: cached.statusText, headers: cached.headers, }); } } const body = new Uint8Array(await res.arrayBuffer()); if (body.length < COMPRESS_MIN_BYTES) { return new Response(body, { status: res.status, statusText: res.statusText, headers: res.headers, }); } let encoded: Uint8Array; let encoding: "br" | "gzip"; if (preferredEncoding === "br") { encoded = new Uint8Array( brotliCompressSync(body, { params: { [zlibConstants.BROTLI_PARAM_QUALITY]: 4 }, }), ); encoding = "br"; } else { encoded = Bun.gzipSync(body); encoding = "gzip"; } const headers = new Headers(res.headers); headers.set("content-encoding", encoding); headers.set("content-length", String(encoded.length)); const vary = headers.get("Vary"); if (!vary) headers.set("Vary", "Accept-Encoding"); else if (!/\baccept-encoding\b/i.test(vary)) headers.set("Vary", `${vary}, Accept-Encoding`); const responseBody = new ArrayBuffer(encoded.byteLength); new Uint8Array(responseBody).set(encoded); if (cacheKey) { rememberCompressedResponse(cacheKey, { body: encoded.slice(), headers: [...headers.entries()], status: res.status, statusText: res.statusText, }); } return new Response(responseBody, { status: res.status, statusText: res.statusText, headers, }); } /** Opening tag of a component mount: captures tag, attrs, name, self-close. */ const MOUNT_OPEN_RE = /<([A-Za-z][A-Za-z0-9-]*)\b([^>]*?\bdata-component="([A-Za-z0-9_-]+)"[^>]*?)(\/?)>/; /** * From `from` (just past a mount's opening `>`), return the element's inner HTML * and the index just past its matching close tag. Counts same-tag nesting so a * `

` may contain other `

`s. */ /** Cache of per-tag "open tag" regexes so we don't recompile one per call. */ const OPEN_TAG_RE = new Map(); function openTagRe(tag: string): RegExp { let re = OPEN_TAG_RE.get(tag); if (!re) { re = new RegExp(`<${tag}\\b`, "g"); OPEN_TAG_RE.set(tag, re); } return re; } export function readElementBody( html: string, tag: string, from: number, ): { inner: string; end: number } { const openRe = openTagRe(tag); const closeTag = ``; let depth = 1; let i = from; while (i < html.length) { const nextClose = html.indexOf(closeTag, i); if (nextClose === -1) return { inner: html.slice(from), end: html.length }; openRe.lastIndex = i; const openMatch = openRe.exec(html); if (openMatch && openMatch.index < nextClose) { const gt = html.indexOf(">", openMatch.index); if (gt !== -1 && html[gt - 1] === "/") { i = gt + 1; // self-closing child: no depth change } else { depth++; i = gt === -1 ? html.length : gt + 1; } } else { depth--; if (depth === 0) return { inner: html.slice(from, nextClose), end: nextClose + closeTag.length }; i = nextClose + closeTag.length; } } return { inner: html.slice(from), end: html.length }; } /** * Split a mount's children into named slots and the default slot. Content inside * `…` goes to that named slot (the wrapper element is * dropped); everything else is the default slot. */ function extractSlots(inner: string): { named: Record; def: string } { const named: Record = {}; if (!inner.includes("data-slot=")) return { named, def: inner }; const SLOT_MOUNT_RE = /<([A-Za-z][A-Za-z0-9-]*)\b([^>]*?\bdata-slot="([A-Za-z0-9_-]+)"[^>]*?)(\/?)>/; let def = ""; let i = 0; for (;;) { const m = SLOT_MOUNT_RE.exec(inner.slice(i)); if (!m) { def += inner.slice(i); break; } const tagStart = i + m.index; def += inner.slice(i, tagStart); const [open, tag, , name, selfClose] = m; const openEnd = tagStart + open.length; const { inner: content, end } = selfClose === "/" ? { inner: "", end: openEnd } : readElementBody(inner, tag!, openEnd); named[name!] = content; i = end; } return { named, def }; } /** * Replace `` elements in a component's output with the mount's children: * … ← content from `data-slot="x"` on the mount * … ← everything else (the default slot) * A `fallback` keeps its fallback when nothing is provided. */ export function fillSlots(html: string, inner: string, markOwner = false): string { if (!/ gives the runtime an ownership * boundary to walk back out of, so the markup is hydrated by the scope that * actually wrote it. The wrapper is display: contents, so it adds an * ownership marker without adding a box to the layout. * * Only component mounts pass markOwner. Layouts also go through fillSlots, * but a layout wraps the whole page rather than being mounted inside a * parent scope, so there is no outer scope to hand its content back to. */ const wrap = (content: string): string => markOwner && content.trim() ? `${content}` : content; return html .replace(/]*?\bname="([A-Za-z0-9_-]+)"[^>]*?\/>/g, (_m, name: string) => wrap(named[name] ?? ""), ) .replace( /]*?\bname="([A-Za-z0-9_-]+)"[^>]*?>([\s\S]*?)<\/slot>/g, (_m, name: string, fallback: string) => named[name] != null && named[name]!.trim() ? wrap(named[name]!) : fallback, ) .replace(//g, defTrimmed ? wrap(def) : "") .replace(/]*>([\s\S]*?)<\/slot>/g, (_m, fallback: string) => defTrimmed ? wrap(def) : fallback, ); } /** * Extract props from a `data-component` mount's attribute string. Every quoted * attribute other than `data-component` becomes a (string) prop; the component's * declared defaults coerce them to their final types. */ export function parseComponentProps(attrStr: string): Record { const props: Record = {}; for (const m of attrStr.matchAll(/([A-Za-z_][\w-]*)(?:="([^"]*)")?/g)) { const key = m[1]!; if (key === "data-component") continue; props[key] = decodeHtmlEntities(m[2] ?? ""); } return props; } /** * Resolve `{t:key}` i18n markers inside component prop values against the active * language, so authors can pass localized text into a component: * `

`. */ export function resolveTProps( props: Record, translate: TFunction, ): Record { for (const key of Object.keys(props)) { const value = props[key]!; if (value.includes("{t:")) { props[key] = value.replace(/\{t:\s*([^}]+?)\s*\}/g, (_m, tkey: string) => translate(tkey.trim()), ); } } return props; } /** * Normalize component identifiers for registry lookup. * * WRN declarations use PascalCase (`PublicHeader`) while explicit * `data-component` mounts commonly use kebab-case (`public-header`) or * snake_case (`public_header`). All three forms identify the same component. */ export function normalizeComponentName(name: string): string { return name.toLowerCase().replace(/[-_]/g, ""); } function safeLanguageTag(value: string): string { return /^[A-Za-z]{2,3}(?:-[A-Za-z0-9]{2,8})*$/.test(value) ? value : "en"; } function cacheDuration(value: string | undefined, fallback: number): number { if (!value) return fallback; const match = /^(\d+(?:\.\d+)?)\s*(ms|s|m|h|d)?$/i.exec(value.trim()); if (!match) return fallback; const scale = { ms: 1, s: 1_000, m: 60_000, h: 3_600_000, d: 86_400_000 }[ (match[2]?.toLowerCase() ?? "ms") as "ms" | "s" | "m" | "h" | "d" ]; return Math.max(0, Number(match[1]) * scale); } function cacheList(value: string | undefined): string[] { if (!value) return []; try { const parsed = JSON.parse(value) as unknown; if (Array.isArray(parsed)) return parsed.filter((item): item is string => typeof item === "string"); } catch { // Fall through to a convenient comma-separated form. } return value .split(",") .map((item) => item.trim()) .filter(Boolean); } function cacheIdentity(ctx: Context, vary: string[]): string { const user = ctx.user as { id?: unknown } | undefined; const values = new Map(); if (ctx.tenant?.id) values.set("tenant", String(ctx.tenant.id)); if (user?.id !== undefined) values.set("user", String(user.id)); for (const item of vary) { if (item === "tenant") values.set(item, String(ctx.tenant?.id ?? "")); else if (item === "user") values.set(item, String(user?.id ?? "")); else if (item === "language") values.set(item, ctx.lang); else if (item.startsWith("cookie:")) values.set(item, ctx.cookies.get(item.slice(7)) ?? ""); else values.set(`header:${item}`, ctx.req.headers.get(item) ?? ""); } return [...values.entries()] .sort() .map(([key, value]) => `${key}=${value}`) .join("|"); } function versionAssetUrl(src: string, version?: string): string { if (!version) return src; return `${src}${src.includes("?") ? "&" : "?"}v=${encodeURIComponent(version)}`; } function versionRenderScript(script: RenderScript, version?: string): RenderScript { if (typeof script === "string") return versionAssetUrl(script, version); return { ...script, src: versionAssetUrl(script.src, version) } satisfies ScriptAsset; } function escapeStyleContent(css: string): string { return css.replace(/<\/style/gi, "<\\/style"); }