@nifrajs/web 5.0.0 → 5.2.0

package/src/router.ts

@@ -10,7 +10,7 @@ import type { StandardSchemaV1 } from "@nifrajs/core/server"
 import type { BoundaryDescriptor, BoundaryStates } from "./boundary.ts"
 import { parseNdjsonData } from "./deferred.ts"
 import { parsePageData } from "./internal/revive-dates.ts"
-import { requestPattern } from "./internal/route-path.ts"
+import { appUrl, requestPattern } from "./internal/route-path.ts"
 import type { ClientActionResult, ClientRequestBody, ClientRouteHooks } from "./manifest.ts"
 import type { MatchChain } from "./render-seam.ts"
 import { isClientOnlySearchChange } from "./search.ts"
@@ -310,8 +310,9 @@ export interface ClientRouterOptions {
   /** Override the loader-data fetch (tests inject a stub; defaults to a same-origin JSON GET). */
   readonly fetchData?: FetchRouteData
   /** Ensure a route's code chunk is loaded before rendering (code-splitting). Awaited in parallel
-   * with the loader data, so `pending` covers both. Omit when the bundle isn't split. */
-  readonly loadModule?: (routeId: string) => Promise<void>
+   * with the loader data, so `pending` covers both. Omit when the bundle isn't split. `path` is the URL
+   * the route is about to render, for code loaded per URL (a production build's copy chunks). */
+  readonly loadModule?: (routeId: string, path?: string) => Promise<void>
   /** Terminal status → client route id. Generated entries populate this from `_404` and
    * `_<status>` files so soft navigation renders the same boundary as a hard request. */
   readonly statusRoutes?: Readonly<Record<number, string>>
@@ -429,7 +430,7 @@ const defaultFetchData: FetchRouteData = async (path, _match, signal, navigation
     const cut = query === -1 ? hash : hash === -1 ? query : Math.min(query, hash)
     const pathname = cut === -1 ? path : path.slice(0, cut)
     if (prerenderedSetOf(prerendered).has(pathname)) {
-      const staticRes = await fetch(dataUrlFor(pathname), { signal: signal ?? null })
+      const staticRes = await fetch(appUrl(dataUrlFor(pathname)), { signal: signal ?? null })
       if (staticRes.ok) return readResponseData(staticRes, signal)
     }
   }
@@ -438,7 +439,7 @@ const defaultFetchData: FetchRouteData = async (path, _match, signal, navigation
     headers.set(RETAIN_HEADER, navigation.retain.join(","))
     headers.set(NAV_FROM_HEADER, navigation.from)
   }
-  const res = await fetch(path, { headers, signal: signal ?? null })
+  const res = await fetch(appUrl(path), { headers, signal: signal ?? null })
   const redirectTo = res.headers.get(REDIRECT_HEADER)
   if (redirectTo !== null) throw redirected(redirectTo)
   const status = Number(res.headers.get(STATUS_HEADER))
@@ -667,7 +668,7 @@ export function createClientRouter(options: ClientRouterOptions): ClientRouter {
     )
     if (mine !== generation) return
     if (loaded.terminalRouteId !== undefined) {
-      await loadModule?.(loaded.terminalRouteId)
+      await loadModule?.(loaded.terminalRouteId, state.path)
       state = { ...state, routeId: loaded.terminalRouteId, params: {}, data: null }
     } else {
       state = {
@@ -788,7 +789,7 @@ export function createClientRouter(options: ClientRouterOptions): ClientRouter {
         state = { ...state, pendingPath: at }
         emit()
       }
-      await loadModule?.(route.routeId)
+      await loadModule?.(route.routeId, at)
       // Prefetched server data is one-shot; a clientLoader still runs over it without another request.
       const prefetchedData = usePrefetch ? freshPrefetch(at) : undefined
       if (usePrefetch) prefetched.delete(at)
@@ -801,7 +802,7 @@ export function createClientRouter(options: ClientRouterOptions): ClientRouter {
           prefetchedData,
         )
         if (loaded.terminalRouteId !== undefined) {
-          await loadModule?.(loaded.terminalRouteId)
+          await loadModule?.(loaded.terminalRouteId, at)
           if (options.layoutStatusRoutes?.[loaded.terminalRouteId] === true) {
             throw new Error(
               `[nifra/web] ${loaded.terminalRouteId} renders inside layouts; loading ${at} as a document`,
@@ -943,7 +944,11 @@ export function createClientRouter(options: ClientRouterOptions): ClientRouter {
         }
         fEmit()
         try {
-          const res = await fetch(action, { method: "POST", body, headers: { [DATA_HEADER]: "1" } })
+          const res = await fetch(appUrl(action), {
+            method: "POST",
+            body,
+            headers: { [DATA_HEADER]: "1" },
+          })
           if (!res.ok)
             throw new Error(`[nifra/web] fetcher action failed (${res.status}): ${action}`)
           const actionData = res.status === 204 ? undefined : await readResponseData(res, ac.signal)
@@ -1094,7 +1099,7 @@ export function createClientRouter(options: ClientRouterOptions): ClientRouter {
           state = { ...state, actionData: prepared.optimisticData }
           emit()
         }
-        const res = await fetch(action, {
+        const res = await fetch(appUrl(action), {
           method: "POST",
           body: prepared.body,
           headers: { [DATA_HEADER]: "1" },
@@ -1211,7 +1216,7 @@ export function createClientRouter(options: ClientRouterOptions): ClientRouter {
         // Unwrapped here, so a prefetched entry is the same shape `navigate` builds state from -
         // otherwise a prefetch hit would publish an envelope where a miss publishes loader data.
         const [, loaded] = await Promise.all([
-          loadModule?.(matched.routeId),
+          loadModule?.(matched.routeId, path),
           loadRouteData(path, matched),
         ])
         prefetched.delete(path) // a stale entry re-enters as the newest

package/src/seo.ts

@@ -0,0 +1,68 @@
+/**
+ * Head helpers for a route's `meta`: `canonical()`, `openGraph()` and `jsonLd()`. `meta()` runs on the
+ * server and in the browser, and this entry imports nothing at runtime, so browser code can take the
+ * helpers from here without bundling the server modules the package root also exports.
+ */
+import type { LinkDescriptor, MetaDescriptor, ScriptDescriptor } from "./manifest.ts"
+
+/**
+ * A `<link rel="canonical">` descriptor for a route's `meta.link`. The canonical URL tells search
+ * engines which URL is authoritative for a page (deduping query-string / tracking variants).
+ *
+ * ```ts
+ * export const meta = (a) => ({ link: [canonical(`https://site.com/posts/${a.params.slug}`)] })
+ * ```
+ */
+export function canonical(href: string): LinkDescriptor {
+  return { rel: "canonical", href }
+}
+
+/** Inputs for {@link openGraph} - the common Open Graph properties. All optional; only the provided
+ * ones become tags. `type` defaults to `"website"`. */
+export interface OpenGraphInput {
+  readonly title?: string
+  readonly description?: string
+  /** Absolute URL of the share image (`og:image`). */
+  readonly image?: string
+  /** Canonical URL of the page (`og:url`). */
+  readonly url?: string
+  /** Object type (`og:type`) - `"website"`, `"article"`, … Default `"website"`. */
+  readonly type?: string
+}
+
+/**
+ * Build the Open Graph `<meta property="og:*">` entries for a route's `meta.meta`. Returns only the
+ * properties you supplied (plus `og:type`, defaulting to `"website"`), so it composes with other meta.
+ *
+ * ```ts
+ * export const meta = { meta: [...openGraph({ title: "Nifra", image: "https://site.com/og.png" })] }
+ * ```
+ */
+export function openGraph(input: OpenGraphInput): MetaDescriptor[] {
+  const tags: MetaDescriptor[] = []
+  const add = (property: string, content: string | undefined): void => {
+    if (content !== undefined) tags.push({ property, content })
+  }
+  add("og:title", input.title)
+  add("og:description", input.description)
+  add("og:image", input.image)
+  add("og:url", input.url)
+  // `og:type` always present (the spec's required property) - default "website" when unset.
+  tags.push({ property: "og:type", content: input.type ?? "website" })
+  return tags
+}
+
+/**
+ * Build a JSON-LD `<script type="application/ld+json">` entry for a route's `meta.script` from a plain
+ * object. `JSON.stringify` produces the body; the head renderer breakout-escapes it (see
+ * `escapeScriptContent`), so a string field containing `</script>` is embedded safely.
+ *
+ * ```ts
+ * export const meta = {
+ *   script: [jsonLd({ "@context": "https://schema.org", "@type": "Article", headline: "Hi" })],
+ * }
+ * ```
+ */
+export function jsonLd(data: Record<string, unknown>): ScriptDescriptor {
+  return { type: "application/ld+json", content: JSON.stringify(data) }
+}

package/src/server-components/typescript.ts

@@ -1,18 +1,10 @@
 import { createRequire } from "node:module"
 import type * as TS from "typescript"
+import { isTypeScriptCompiler } from "../internal/typescript-api.ts"
 
 /** The code of the error a TypeScript without the in-process compiler API raises here. */
 export const UNSUPPORTED_TYPESCRIPT = "NIFRA_TS_UNSUPPORTED"
 
-function isCompiler(value: unknown): value is typeof TS {
-  return (
-    typeof value === "object" &&
-    value !== null &&
-    "createSourceFile" in value &&
-    typeof value.createSourceFile === "function"
-  )
-}
-
 /**
  * The TypeScript compiler API, resolved from `from` the way `import "typescript"` there would be.
  * TypeScript 7's package ships no in-process compiler API (its root export is only `version`), so
@@ -20,7 +12,7 @@ function isCompiler(value: unknown): value is typeof TS {
  */
 export function loadTypeScript(from: string = import.meta.url): typeof TS {
   const loaded: unknown = createRequire(from)("typescript")
-  if (isCompiler(loaded)) return loaded
+  if (isTypeScriptCompiler(loaded)) return loaded
   const version =
     typeof loaded === "object" &&
     loaded !== null &&

package/src/vite.ts

@@ -35,6 +35,7 @@ import {
 } from "./internal/parity.ts"
 import { vitePublicEnvPrefix } from "./internal/server-boundary.ts"
 import { importVite } from "./internal/vite-import.ts"
+import { normalizeRolldownPlugins } from "./internal/vite-plugin-compat.ts"
 import { scopedName } from "./plugins/css-modules.ts"
 import {
   DEV_ROOT_ENV,
@@ -168,6 +169,7 @@ export interface ViteDevServer {
 
 export type { DevAppHooks } from "./dev-session.ts"
 export { LAST_ERROR_PATH } from "./diagnostic.ts"
+export { normalizeRolldownPlugins } from "./internal/vite-plugin-compat.ts"
 
 // The codegen'd client entry is written here (at the Vite root) so Vite serves + HMRs it.
 const DEV_ENTRY = ".nifra-vite-entry.tsx"
@@ -247,19 +249,6 @@ function toWebRequest(req: IncomingMessage, body: Buffer | undefined): Request {
   return new Request(url, init as unknown as ConstructorParameters<typeof Request>[1])
 }
 
-// A Vite `config` hook: a plain function, OR the object form `{ handler, order }` Vite accepts for hook
-// ordering (`order: "pre" | "post"`). We wrap the handler in either shape - see normalizeRolldownPlugins.
-type ConfigFn = (config: unknown, env: unknown) => unknown
-type ConfigHook = ConfigFn | { readonly handler: ConfigFn; readonly order?: unknown }
-
-// A Vite plugin - the only hook we wrap is `config`. Typed structurally (no `vite` type dep). Everything
-// else on the plugin object is preserved by spread, so wrapping is transparent to Vite.
-interface VitePluginLike {
-  readonly name?: string
-  config?: ConfigHook
-  readonly [key: string]: unknown
-}
-
 /** The bits of a Node ServerResponse `pipeWebBodyToNode` touches - structural, to avoid a node:http dep here. */
 interface NodeResLike {
   flushHeaders?(): void
@@ -317,72 +306,6 @@ export async function pipeWebBodyToNode(
   res.end()
 }
 
-/**
- * Strip `optimizeDeps.rollupOptions.jsx` from a plugin's `config` hook output when running under
- * rolldown-vite - the source of the scary, harmless `Warning: Invalid input options … "jsx" Invalid
- * key: Expected never but received "jsx"` on `nifra dev`.
- *
- * Why it happens: `@vitejs/plugin-react@4.x` (and peers) target an *older* rolldown-vite optimizeDeps
- * API - they inject `optimizeDeps.rollupOptions.jsx` to tell the dep pre-bundler to transform JSX. Vite
- * 8's rolldown dep-optimizer renamed that surface to `optimizeDeps.rolldownOptions` (and moved jsx under
- * `transform.jsx`), so the stale `rollupOptions.jsx` is an unrecognized input option → the warning. It's
- * a version-skew artifact, not a real misconfig: the route source JSX transform runs through the
- * plugin's own `transform` hook (untouched here), and node_modules deps that get pre-bundled almost
- * never contain raw JSX - so dropping the dead key changes no behavior and keeps HMR/Fast Refresh
- * intact. We *strip* (rather than translate to `rolldownOptions`) so the fix is version-agnostic: a
- * plugin already emitting the correct `rolldownOptions` is left untouched, and a future plugin bump that
- * stops emitting `rollupOptions.jsx` makes this a no-op.
- *
- * Scoped narrowly: only the `optimizeDeps.rollupOptions.jsx` key is removed, only under rolldown-vite,
- * and only from the value a plugin's `config` hook returns. Non-rolldown Vite is passed through verbatim.
- *
- * FLATTEN FIRST: a Vite plugin factory may return an ARRAY of plugins - `@vitejs/plugin-react`'s `react()`
- * returns `[vite:react-babel, vite:react-refresh]`, and it's `react:react-babel`'s `config` hook that emits
- * the offending `optimizeDeps.rollupOptions.jsx`. `nifra.config.ts` writes `vitePlugins = [react()]`, so the
- * plugin list arrives NESTED (`[[babel, refresh]]`). Without flattening, `.map` sees the inner array (which
- * has no `config`), leaves it untouched, and Vite - which flattens plugin arrays itself before running them
- * - then executes the un-stripped babel hook, so the warning survives. Flattening here (Vite accepts a flat
- * list identically) is what lets the strip reach every real plugin.
- */
-export function normalizeRolldownPlugins(
-  plugins: readonly unknown[],
-  isRolldown: boolean,
-): readonly unknown[] {
-  if (!isRolldown) return plugins
-  const stripJsxKey = (returned: unknown): unknown => {
-    // Only touch a plain-object config carrying optimizeDeps.rollupOptions.jsx; leave anything else as-is.
-    if (returned === null || typeof returned !== "object") return returned
-    const cfg = returned as { optimizeDeps?: { rollupOptions?: Record<string, unknown> } }
-    const rollupOptions = cfg.optimizeDeps?.rollupOptions
-    if (rollupOptions === undefined || !("jsx" in rollupOptions)) return returned
-    // Clone the affected branch (never mutate the plugin's own return value) and drop the dead key.
-    const { jsx: _dropped, ...restRollup } = rollupOptions
-    return {
-      ...cfg,
-      optimizeDeps: { ...cfg.optimizeDeps, rollupOptions: restRollup },
-    }
-  }
-  return plugins.flat(Number.POSITIVE_INFINITY).map((plugin) => {
-    if (plugin === null || typeof plugin !== "object") return plugin
-    const p = plugin as VitePluginLike
-    // `config` may be a plain function or the object form `{ handler, order }`. Wrap the handler either way.
-    const hook = p.config
-    const handler = typeof hook === "function" ? hook : hook?.handler
-    if (typeof handler !== "function") return plugin
-    const wrappedHandler: ConfigFn = (config, env) => {
-      const returned = handler(config, env)
-      // The hook may return a promise - normalize both shapes.
-      return returned instanceof Promise ? returned.then(stripJsxKey) : stripJsxKey(returned)
-    }
-    // Preserve the ORIGINAL shape: a function stays a function; the object form keeps its `order`
-    // (collapsing `{ handler, order }` to a bare function would silently drop the hook ordering).
-    return {
-      ...p,
-      config: typeof hook === "function" ? wrappedHandler : { ...hook, handler: wrappedHandler },
-    }
-  })
-}
-
 /**
  * The npm package a bare module specifier belongs to (`@nifrajs/web-react/client` →
  * `@nifrajs/web-react`, `some-adapter/client` → `some-adapter`), or `undefined` for a path-shaped
@@ -614,8 +537,7 @@ export async function createViteDevServer(options: ViteDevServerOptions): Promis
   // server importing vite unguarded is precisely what poisoned the module for the whole process.
   const viteModule = await importVite<ViteModule>()
   const { createServer } = viteModule
-  // Under rolldown-vite (Vite 8+), strip the stale `optimizeDeps.rollupOptions.jsx` some framework
-  // plugins still emit - it triggers a noisy "Invalid key … jsx" warning but does nothing useful here.
+  // Under rolldown-vite (Vite 8+), framework plugins' stale `optimizeDeps.rollupOptions` warns on every start.
   const plugins = normalizeRolldownPlugins(
     options.plugins ?? [],
     viteModule.rolldownVersion !== undefined,