@nifrajs/web 1.12.0 → 2.0.0

package/src/plugins/svg.ts

@@ -0,0 +1,156 @@
+/**
+ * `@nifrajs/web/plugins/svg` - import an SVG as a component: `import Icon from "./icon.svg?component"`,
+ * then `<Icon className="w-6 h-6 text-blue-500" />`. Props spread onto the root `<svg>`, matching the
+ * standard Vite `svgr` workflow. In its OWN module so the SSR preload registers it before any SVG
+ * loads; pass `"dom"` for the client bundle and preload `"ssr"` for the server (both emit the same
+ * isomorphic component).
+ *
+ * SCOPE: emits an **automatic-JSX-runtime** component, so it works out of the box for the frameworks
+ * whose build supplies a `jsxImportSource` - **React and Preact**. Solid (needs `babel-preset-solid`),
+ * Svelte, and Vue are not JSX and are intentionally out of v1; a plain `import "./icon.svg"` (asset URL)
+ * is untouched - only the `?component` marker is intercepted.
+ *
+ * Optimization is optional: pass `svgo` (or install the `svgo` peer) to minify/clean the SVG first.
+ * The transform is regex-based and targets the common icon-set shape (well-formed, self-closed tags);
+ * it camelCases hyphenated + `xlink:`/`xmlns:` attributes, maps `class` → `className`, parses an inline
+ * `style="..."` into an object, and drops XML declarations/comments so the result is valid JSX.
+ */
+import type { BunPlugin } from "bun"
+import { requirePeer } from "./kit.ts"
+
+/** The subset of the `svgo` API this plugin uses (structural, so no hard dependency on its types). */
+export interface SvgOptimizer {
+  optimize(input: string, options?: Record<string, unknown>): { readonly data: string }
+}
+
+export interface SvgPluginOptions {
+  /** Optimize each SVG first. `true` loads the `svgo` peer; pass an optimizer to inject one (or a stub). */
+  readonly svgo?: boolean | SvgOptimizer
+}
+
+/** SVG/HTML attribute names that JSX expects camelCased (the common subset on icons). */
+const CAMEL_ATTRS = new Map(
+  [
+    "clip-path",
+    "clip-rule",
+    "fill-opacity",
+    "fill-rule",
+    "stroke-width",
+    "stroke-linecap",
+    "stroke-linejoin",
+    "stroke-opacity",
+    "stroke-dasharray",
+    "stroke-dashoffset",
+    "stroke-miterlimit",
+    "font-family",
+    "font-size",
+    "font-weight",
+    "text-anchor",
+    "stop-color",
+    "stop-opacity",
+    "color-interpolation-filters",
+    "flood-color",
+    "flood-opacity",
+    "vector-effect",
+  ].map((name) => [name, name.replace(/-([a-z])/g, (_m, c) => (c as string).toUpperCase())]),
+)
+
+function styleToObject(style: string): string {
+  const entries = style
+    .split(";")
+    .map((decl) => decl.trim())
+    .filter(Boolean)
+    .map((decl) => {
+      const idx = decl.indexOf(":")
+      const prop = decl
+        .slice(0, idx)
+        .trim()
+        .replace(/-([a-z])/g, (_m, c) => (c as string).toUpperCase())
+      const value = decl.slice(idx + 1).trim()
+      return `${JSON.stringify(prop)}:${JSON.stringify(value)}`
+    })
+  return `{{${entries.join(",")}}}`
+}
+
+export interface SvgToJsxOptions {
+  /** The JSX prop name for `class`. `"className"` for React/Preact; `"class"` for Solid. */
+  readonly classProp?: string
+}
+
+/** Convert an SVG XML string into a JSX-safe `<svg>…</svg>` element with `{...props}` spread on the root. */
+export function svgToJsx(xml: string, options: SvgToJsxOptions = {}): string {
+  const classProp = options.classProp ?? "className"
+  let out = xml
+    .replace(/<\?xml[\s\S]*?\?>/g, "") // XML declaration
+    .replace(/<!--[\s\S]*?-->/g, "") // comments
+    .replace(/<!DOCTYPE[^>]*>/gi, "")
+    .trim()
+
+  // Namespaced attributes → camelCase (xlink:href → xlinkHref, xmlns:xlink → xmlnsXlink).
+  out = out.replace(/\b([a-z]+):([a-z]+)=/gi, (_m, ns: string, name: string) => {
+    return `${ns.toLowerCase()}${name.charAt(0).toUpperCase()}${name.slice(1)}=`
+  })
+  // Known hyphenated attributes → camelCase.
+  for (const [kebab, camel] of CAMEL_ATTRS) {
+    out = out.replace(new RegExp(`\\b${kebab}=`, "g"), `${camel}=`)
+  }
+  // class → the framework's prop (className for React/Preact, class for Solid).
+  if (classProp !== "class") out = out.replace(/\bclass=/g, `${classProp}=`)
+  // Inline style string → JSX object.
+  out = out.replace(/\bstyle="([^"]*)"/g, (_m, css: string) => `style=${styleToObject(css)}`)
+  // Spread props onto the root <svg> tag (after the tag name, before its attributes).
+  out = out.replace(/^<svg\b/, "<svg {...props}")
+  return out
+}
+
+/** Emit the component module source for a `?component` SVG import. Identical on dom + ssr (isomorphic). */
+export function svgComponentSource(xml: string, options: SvgToJsxOptions = {}): string {
+  return `export default function SvgComponent(props){return (${svgToJsx(xml, options)})}\n`
+}
+
+/** The Bun `onLoad` filter every adapter's SVG-component plugin matches: `*.svg?component`. */
+export const SVG_COMPONENT_FILTER = /\.svg\?component(&|$)/
+const SVG_FILTER = SVG_COMPONENT_FILTER
+
+/**
+ * The SVG-as-component Bun plugin (React/Preact). `generate` is accepted for parity with the other
+ * plugin pairs; the emitted component is the same on `"dom"` and `"ssr"`.
+ */
+export function svgComponentBunPlugin(
+  _generate: "dom" | "ssr",
+  options: SvgPluginOptions = {},
+): BunPlugin {
+  return {
+    name: "nifra-svg-component",
+    setup(build) {
+      let optimizer: SvgOptimizer | undefined =
+        typeof options.svgo === "object" ? options.svgo : undefined
+      const wantOptimize = options.svgo !== undefined && options.svgo !== false
+      const getOptimizer = async (): Promise<SvgOptimizer | undefined> => {
+        if (!wantOptimize) return undefined
+        optimizer ??= await requirePeer<SvgOptimizer>("svgo", {
+          feature: "SVG optimization (svgo)",
+          install: "bun add -d svgo",
+        })
+        return optimizer
+      }
+
+      build.onLoad({ filter: SVG_FILTER }, async (args) => {
+        const path = args.path.split("?")[0] ?? args.path
+        let xml = await Bun.file(path).text()
+        const svgo = await getOptimizer()
+        if (svgo !== undefined) {
+          try {
+            xml = svgo.optimize(xml, { path }).data
+          } catch (err) {
+            throw new Error(
+              `[nifra/web] failed to optimize ${path}: ${(err as Error)?.message ?? err}`,
+              { cause: err },
+            )
+          }
+        }
+        return { contents: svgComponentSource(xml), loader: "jsx" }
+      })
+    },
+  }
+}

package/src/router.ts

@@ -4,6 +4,11 @@
  * browser-only `installHistory` (history + link interception) wires on top. Kept DOM-free so it
  * unit-tests without a browser and is safe to import from the SSR core's main entry.
  */
+import {
+  compareRoutePatternSpecificity,
+  compileRoutePattern,
+  matchRoutePattern,
+} from "@nifrajs/core/pattern"
 import { parseNdjsonData } from "./deferred.ts"
 
 /**
@@ -59,6 +64,9 @@ export interface RouterState {
   readonly actionData?: unknown
   /** True while a navigation or submit is in flight (drives loading UI). */
   readonly pending: boolean
+  /** The path a navigation is transitioning TO while `pending` (cleared when it settles). Lets a
+   * `NavLink` know whether its own `to` is the one loading; `undefined` when idle. */
+  readonly pendingPath?: string | undefined
   /** The in-flight submit (set during a `submit`, cleared when it settles) — for optimistic UI. */
   readonly submission?: Submission
 }
@@ -69,29 +77,6 @@ export interface RoutePattern {
   readonly pattern: string
 }
 
-function compile(pattern: string): { regex: RegExp; keys: string[] } {
-  const keys: string[] = []
-  const src = pattern
-    .split("/")
-    .map((seg) => {
-      if (seg.startsWith(":")) {
-        keys.push(seg.slice(1))
-        return "([^/]+)"
-      }
-      if (seg.startsWith("*")) {
-        // Catch-all (`*slug`, or bare `*` → key "*"): capture the rest of the path, slashes included.
-        // Always the final segment (the manifest/core enforce it), so the greedy `.` is safe.
-        keys.push(seg.length === 1 ? "*" : seg.slice(1))
-        return "(.+)"
-      }
-      // Escape regex-special chars. `$`/`{`/`}` are ordered so no literal `${` appears (it can
-      // trip tooling that scans for template-literal interpolation, e.g. coverage sourcemaps).
-      return seg.replace(/[.*+?^()|[\]\\{}$]/g, "\\$&")
-    })
-    .join("/")
-  return { regex: new RegExp(`^${src}/?$`), keys }
-}
-
 /**
  * Build a matcher from route patterns (built from the SAME manifest the server routes from, so
  * client and server agree). Returns the first matching route + decoded params, or null. The
@@ -100,22 +85,20 @@ function compile(pattern: string): { regex: RegExp; keys: string[] } {
 export function createMatcher(
   patterns: readonly RoutePattern[],
 ): (path: string) => RouteMatch | null {
-  const compiled = patterns.map((p) => ({ routeId: p.routeId, ...compile(p.pattern) }))
+  const compiled = patterns
+    .map((pattern) => ({ routeId: pattern.routeId, pattern: compileRoutePattern(pattern.pattern) }))
+    .sort((left, right) => compareRoutePatternSpecificity(left.pattern, right.pattern))
   return (path) => {
     // Strip the query without allocating a `split("?")` array — matcher runs per match.
     const q = path.indexOf("?")
     const clean = q === -1 ? path : path.slice(0, q)
     for (const c of compiled) {
-      const m = c.regex.exec(clean)
-      if (m === null) continue
-      const params: Record<string, string> = {}
-      // for-of (no per-match `forEach` closure); `i` indexes the capture groups (`m[0]` is the match).
-      let i = 0
-      for (const k of c.keys) {
-        params[k] = decodeURIComponent(m[i + 1] ?? "")
-        i++
+      const match = matchRoutePattern(c.pattern, clean)
+      if (!match.matched) {
+        if (match.reason === "malformed") return null
+        continue
       }
-      return { routeId: c.routeId, params }
+      return { routeId: c.routeId, params: match.params }
     }
     return null
   }
@@ -500,7 +483,7 @@ export function createClientRouter(options: ClientRouterOptions): ClientRouter {
       navAbort?.abort() // abandon any in-flight navigation's stream
       const ac = new AbortController()
       navAbort = ac
-      state = { ...state, pending: true }
+      state = { ...state, pending: true, pendingPath: path }
       emit()
       try {
         // Use prefetched data when present (one-shot — drop it); else fetch. The chunk is loaded
@@ -523,10 +506,10 @@ export function createClientRouter(options: ClientRouterOptions): ClientRouter {
         }
         emit()
       } catch (err) {
-        // Clear our pending flag (only if still current) and rethrow — the caller decides how to
-        // recover (the history layer falls back to a full-page navigation).
+        // Clear our pending flag + target (only if still current) and rethrow — the caller decides how
+        // to recover (the history layer falls back to a full-page navigation).
         if (mine === token) {
-          state = { ...state, pending: false }
+          state = { ...state, pending: false, pendingPath: undefined }
           emit()
         }
         throw err