@nifrajs/web 0.1.0-alpha.1 → 0.1.0-alpha.3

package/src/chunk-names.ts

@@ -0,0 +1,45 @@
+/**
+ * URL-safe output chunk naming. Bun names a code-split chunk after its source file's basename, so a
+ * dynamic-route file like `[slug].tsx` emits `[slug]-<hash>.js` — the `[ ]` make a URL a static server
+ * (server-bun, CF Pages) reject with 400, so the lazy import fails and the route silently never
+ * hydrates (SSR looks perfect; all interactivity is dead). `sanitizeOutputNames` renames every output
+ * whose basename isn't URL-path-safe (`[slug]` → `_slug_`) and rewrites the references to it inside the
+ * other JS/CSS chunks (where the bootstrap's lazy `import("…/[slug]-hash.js")` lives). The returned
+ * unsafe→safe basename map lets the build manifest point at the renamed files.
+ */
+import { readFileSync, renameSync, writeFileSync } from "node:fs"
+
+const basename = (path: string): string => path.slice(path.lastIndexOf("/") + 1)
+const URL_UNSAFE_NAME = /[^A-Za-z0-9._-]/g
+
+export function sanitizeOutputNames(
+  outputs: readonly { readonly path: string }[],
+): Map<string, string> {
+  const renames = new Map<string, string>()
+  for (const out of outputs) {
+    const base = basename(out.path)
+    const safe = base.replace(URL_UNSAFE_NAME, "_")
+    if (safe !== base) renames.set(base, safe)
+  }
+  if (renames.size === 0) return renames
+  // The hashed basename is a unique token, so replacing it literally inside the other chunks is safe.
+  for (const out of outputs) {
+    if (!out.path.endsWith(".js") && !out.path.endsWith(".css")) continue
+    let text = readFileSync(out.path, "utf8")
+    let changed = false
+    for (const [from, to] of renames) {
+      if (text.includes(from)) {
+        text = text.split(from).join(to)
+        changed = true
+      }
+    }
+    if (changed) writeFileSync(out.path, text)
+  }
+  for (const out of outputs) {
+    const safe = renames.get(basename(out.path))
+    if (safe !== undefined) {
+      renameSync(out.path, out.path.slice(0, out.path.lastIndexOf("/") + 1) + safe)
+    }
+  }
+  return renames
+}

package/src/client.ts

@@ -186,14 +186,31 @@ export function installHistory(
 export function applyHead(head: Meta): void {
   if (head.title !== undefined) document.title = head.title
   for (const el of document.head.querySelectorAll("[data-nifra]")) el.remove()
-  const add = (tag: "meta" | "link", attrs: Record<string, string>): void => {
+  // Values follow the same HTML attribute conventions as the SSR `tagAttrs`: a string sets the value,
+  // `true` sets the bare boolean attribute, `false`/`undefined` skip it — so a soft-nav head matches
+  // the server-rendered one exactly (no hydration drift on the managed tags).
+  const add = (tag: "meta" | "link", attrs: Record<string, string | boolean | undefined>): void => {
     const el = document.createElement(tag)
-    for (const [name, value] of Object.entries(attrs)) el.setAttribute(name, value)
+    for (const [name, value] of Object.entries(attrs)) {
+      if (value === undefined || value === false) continue
+      el.setAttribute(name, value === true ? "" : value)
+    }
     el.setAttribute("data-nifra", "")
     document.head.appendChild(el)
   }
   for (const m of head.meta ?? []) add("meta", m)
   for (const l of head.link ?? []) add("link", l)
+  // `<script>` slot (JSON-LD etc.) — soft-nav parity with the SSR `headTags` script render. Set the body
+  // via `textContent`, NOT `innerHTML`: `textContent` assigns the raw string without HTML re-parsing, so
+  // a `</script>` (or `<!--`/`]]>`) payload in the JSON-LD can't break out — the DOM-native equivalent of
+  // the server's `escapeScriptContent`. `type` defaults to `application/ld+json` (matching the SSR side).
+  for (const s of head.script ?? []) {
+    const el = document.createElement("script")
+    el.setAttribute("type", s.type ?? "application/ld+json")
+    el.textContent = s.content
+    el.setAttribute("data-nifra", "")
+    document.head.appendChild(el)
+  }
 }
 
 export function installForms(router: ClientRouter): () => void {

package/src/dev.ts

@@ -7,6 +7,7 @@
  */
 import { readdirSync, unwatchFile, watchFile } from "node:fs"
 import { type BuildClientOptions, buildClient } from "./build.ts"
+import { DEFAULT_DEV_PORT } from "./index.ts"
 
 /** Minimal app surface the dev server needs — `createWebApp(...)` satisfies it. */
 interface FetchApp {
@@ -22,7 +23,7 @@ export interface DevServerOptions extends Omit<BuildClientOptions, "minify"> {
   readonly createApp: (clientEntry: string, importQuery: string) => FetchApp | Promise<FetchApp>
   /** Directories to watch (default: `[routesDir]`). */
   readonly watch?: readonly string[]
-  /** Port to listen on (default 3000). */
+  /** Port to listen on (default {@link DEFAULT_DEV_PORT}). */
   readonly port?: number
 }
 
@@ -38,7 +39,7 @@ const reloadClient = `<script>(()=>{const x=()=>{const w=new WebSocket((location
 
 /** Start the dev server: build → serve → watch → rebuild + reload on change. */
 export async function createDevServer(options: DevServerOptions): Promise<DevServer> {
-  const { createApp, port = 3000, outDir, routesDir } = options
+  const { createApp, port = DEFAULT_DEV_PORT, outDir, routesDir } = options
   const publicPath = options.publicPath ?? "/assets/"
   let version = 0
   const rebuild = async (): Promise<FetchApp> => {

package/src/fonts-google.ts

@@ -24,6 +24,7 @@
 import { writeFile as fsWriteFile, mkdir } from "node:fs/promises"
 import { dirname, join } from "node:path"
 import { type FontDisplay, fontFace, fontPreload } from "./fonts.ts"
+import type { LinkDescriptor } from "./manifest.ts"
 
 /** Options describing the Google font to fetch + self-host. */
 export interface GoogleFontOptions {
@@ -82,7 +83,7 @@ export interface LoadGoogleFontResult {
   readonly assets: readonly FontAsset[]
   /** `fontPreload()` link-attribute sets — spread the ones you want into a layout's `meta.link`.
    * Preloading *every* weight/subset is wasteful; usually preload just the primary subset + weight. */
-  readonly preloads: readonly Record<string, string>[]
+  readonly preloads: readonly LinkDescriptor[]
 }
 
 export interface LoadGoogleFontIO {
@@ -340,7 +341,7 @@ export async function loadGoogleFont(
 
   const assets: FontAsset[] = []
   const rules: string[] = []
-  const preloads: Record<string, string>[] = []
+  const preloads: LinkDescriptor[] = []
 
   for (const face of faces) {
     // Prefer woff2; the CSS2 endpoint with a Chrome UA only ever returns woff2, but be defensive.

package/src/fonts.ts

@@ -14,6 +14,7 @@
  *   // a root layout's meta — becomes a <link rel="preload" as="font"> in <head>
  *   export const meta = { link: [fontPreload({ href: "/fonts/inter.woff2" })] }
  */
+import type { LinkDescriptor } from "./manifest.ts"
 
 /** `font-display` strategy. `swap` (the default here) paints fallback text immediately, then swaps. */
 export type FontDisplay = "auto" | "block" | "swap" | "fallback" | "optional"
@@ -135,7 +136,7 @@ export interface FontPreloadInput {
  * escaped at injection by the head renderer. Preloading the font file removes a render-blocking round
  * trip (the browser would otherwise discover the font only after parsing the CSS).
  */
-export function fontPreload(input: FontPreloadInput): Record<string, string> {
+export function fontPreload(input: FontPreloadInput): LinkDescriptor {
   const type = input.type ?? MIME_BY_EXT[extOf(input.href)]
   return {
     rel: "preload",