sibujs 4.5.0 → 4.7.0

package/dist/plugins.js

@@ -1,4 +1,5 @@
 import {
+  MigrationStorageError,
   VERSION,
   bundlerMetadata,
   checkCompatibility,
@@ -18,74 +19,83 @@ import {
   preloadCritical,
   prerenderRoutes,
   satisfies
-} from "./chunk-KKLW7YWL.js";
+} from "./chunk-4AWA2PVD.js";
 import {
   isUnsafeKey
 } from "./chunk-H3SRKIYX.js";
 import {
+  PluginInstallCancelledError,
   createPlugin,
   createPluginRegistry,
   inject,
+  isPluginInstallCancelledError,
   plugin,
   resetPlugins,
   setDefaultPluginRegistry,
   triggerPluginError,
   triggerPluginMount,
   triggerPluginUnmount
-} from "./chunk-WWV3SJ3L.js";
+} from "./chunk-J6FW5TV6.js";
 import {
   span
-} from "./chunk-PCT43HW3.js";
+} from "./chunk-7LUJQAOJ.js";
 import {
   escapeScriptJson,
   renderToString,
   serializeHeadEntry
-} from "./chunk-NIOYEGBQ.js";
+} from "./chunk-HURREPU2.js";
 import {
+  appendChildren,
   resolveClassValue
-} from "./chunk-KEISJXBU.js";
-import "./chunk-ONOHFDLG.js";
+} from "./chunk-UOL2ECCS.js";
+import "./chunk-FNJXNGYZ.js";
 import {
   isUrlAttribute,
   sanitizeStyleAttribute,
   sanitizeUrl,
   stripControlChars
-} from "./chunk-IXKSNWV5.js";
+} from "./chunk-2INLLLMZ.js";
 import {
   globalSingleton
 } from "./chunk-7ZHH77QA.js";
 import {
   effect
-} from "./chunk-RIXRAYIU.js";
+} from "./chunk-WEQ3DMVL.js";
 import {
   getRequestStore
-} from "./chunk-5DXA2J44.js";
-import {
-  dispose,
-  registerDisposer
-} from "./chunk-QKRPLZ2V.js";
+} from "./chunk-7XHATCIH.js";
+import "./chunk-5HZXGZ6T.js";
 import {
   signal
-} from "./chunk-XZZOBQAY.js";
+} from "./chunk-FQRUXCEE.js";
 import {
-  track
-} from "./chunk-UGRX3S57.js";
+  track,
+  untracked
+} from "./chunk-JWKYU5GV.js";
 import {
   devWarn,
-  isDev
-} from "./chunk-2WLZ6757.js";
+  dispose,
+  isDev,
+  registerDisposer
+} from "./chunk-NYNYSPK7.js";
 
 // src/plugins/i18n.ts
 var _i18n = globalSingleton(/* @__PURE__ */ Symbol.for("sibujs.i18n.v1"), () => ({
   locale: signal("en"),
-  locales: /* @__PURE__ */ Object.create(null)
+  locales: /* @__PURE__ */ Object.create(null),
+  revision: signal(0)
 }));
 var [clientLocale, setClientLocale] = _i18n.locale;
 var locales = _i18n.locales;
+var [revision, setRevision] = _i18n.revision ?? (_i18n.revision = signal(0));
 function dictionaryFor(locale) {
   return Object.hasOwn(locales, locale) ? locales[locale] : void 0;
 }
+function trackDictionaries() {
+  if (!getRequestStore()) revision();
+}
 function lookup(key) {
+  trackDictionaries();
   const dictionary = dictionaryFor(getLocale());
   if (dictionary === void 0 || !Object.hasOwn(dictionary, key)) return void 0;
   const message = dictionary[key];
@@ -115,22 +125,42 @@ function registerTranslations(locale, messages) {
     enumerable: true,
     configurable: true
   });
+  setRevision((n) => n + 1);
+}
+function resolveParam(params, name) {
+  if (!Object.hasOwn(params, name)) return "";
+  const raw = params[name];
+  const value = typeof raw === "function" ? raw() : raw;
+  return value == null ? "" : String(value);
 }
 function t(key, params) {
   const message = lookup(key) ?? key;
-  return params ? message.replace(/\{(\w+)\}/g, (_, p) => String(params[p] ?? "")) : message;
+  return params ? message.replace(/\{(\w+)\}/g, (_, p) => resolveParam(params, p)) : message;
+}
+function translated(key, params) {
+  return () => t(key, params);
 }
 function Trans(key, params) {
-  return span(() => t(key, params));
+  return span(translated(key, params));
 }
 function hasTranslation(key) {
   return lookup(key) !== void 0;
 }
 function getAvailableLocales() {
+  trackDictionaries();
   return Object.keys(locales);
 }
 
 // src/plugins/router.ts
+function splitRouteUrl(url) {
+  const hashIndex = url.indexOf("#");
+  const beforeHash = hashIndex === -1 ? url : url.slice(0, hashIndex);
+  const hash = hashIndex === -1 ? "" : url.slice(hashIndex + 1);
+  const queryIndex = beforeHash.indexOf("?");
+  const path = queryIndex === -1 ? beforeHash : beforeHash.slice(0, queryIndex);
+  const query = queryIndex === -1 ? "" : beforeHash.slice(queryIndex + 1);
+  return { path, query, hash };
+}
 function classifyNavigationTarget(path) {
   if (path === "") return "internal";
   const normalized = stripControlChars(path).replace(/\\/g, "/");
@@ -849,8 +879,7 @@ var _SibuRouter = class _SibuRouter {
     return (path || "/") + window.location.search + window.location.hash;
   }
   createRouteContext(fullPath) {
-    const [pathWithQuery, hash = ""] = fullPath.split("#");
-    const [path, queryString = ""] = pathWithQuery.split("?");
+    const { path, query: queryString, hash } = splitRouteUrl(fullPath);
     const query = Object.fromEntries(new URLSearchParams(queryString));
     const match = this.matcher.match(path || "/");
     const params = match?.params || {};
@@ -1292,6 +1321,30 @@ function afterEach(hook) {
   return _routerRef.current.afterEach(hook);
 }
 var routeCleanups = [];
+var ownParamNamesCache = /* @__PURE__ */ new WeakMap();
+function ownParamNames(record) {
+  const cached = ownParamNamesCache.get(record);
+  if (cached) return cached;
+  const aliases = record.alias == null ? [] : Array.isArray(record.alias) ? record.alias : [record.alias];
+  const names = /* @__PURE__ */ new Set();
+  for (const pattern of [record.path, ...aliases]) {
+    for (const m of pattern.matchAll(/\/:([^/]+)/g)) {
+      names.add(m[1].endsWith("?") ? m[1].slice(0, -1) : m[1]);
+    }
+  }
+  const result = [...names];
+  ownParamNamesCache.set(record, result);
+  return result;
+}
+function instanceKey(owner, records, route2) {
+  const custom = owner.key;
+  if (custom) return untracked(() => String(custom(route2)));
+  const parts = [];
+  for (const record of records) {
+    for (const name of ownParamNames(record)) parts.push(name, route2.params[name] ?? null);
+  }
+  return JSON.stringify(parts);
+}
 function Route() {
   const anchor = document.createComment("route-outlet");
   let currentNode = null;
@@ -1299,6 +1352,7 @@ function Route() {
   let errorNode = null;
   let navSeq = 0;
   let currentTopRoute = null;
+  let currentKey = null;
   let routeTorn = false;
   const commitTarget = (seq) => routeTorn || seq !== navSeq ? null : anchor.parentNode;
   const release = (node) => {
@@ -1390,11 +1444,13 @@ function Route() {
       const match = _routerRef.current["matcher"].match(route2.path);
       if (!match) {
         currentTopRoute = null;
+        currentKey = null;
         cleanupNodes();
         return;
       }
       const routeDef = match.matched[0] || match.route;
-      if (routeDef === currentTopRoute && currentNode) {
+      const key = instanceKey(routeDef, [routeDef], route2);
+      if (routeDef === currentTopRoute && key === currentKey && currentNode) {
         return;
       }
       if ("redirect" in routeDef) {
@@ -1422,6 +1478,7 @@ function Route() {
           }
           if (node) {
             currentTopRoute = routeDef;
+            currentKey = key;
             cleanupNodes();
             parent.insertBefore(node, anchor.nextSibling);
             currentNode = node;
@@ -1459,6 +1516,7 @@ function Route() {
     routeTeardown();
     cleanupNodes();
     currentTopRoute = null;
+    currentKey = null;
   };
   registerDisposer(anchor, routeCleanup);
   routeCleanups.push(routeCleanup);
@@ -1597,8 +1655,7 @@ function RouterLink(props, children) {
   const rawHref = _routerRef.current["resolvePath"](to);
   const kind = classifyNavigationTarget(rawHref);
   const href = kind === "unsafe" ? "#" : rawHref;
-  const [hrefBeforeHash, hrefHash = ""] = href.split("#");
-  const [hrefPathRaw, hrefQueryRaw = ""] = hrefBeforeHash.split("?");
+  const { path: hrefPathRaw, query: hrefQueryRaw, hash: hrefHash } = splitRouteUrl(href);
   const targetPath = normalizePathname(hrefPathRaw);
   const targetQuery = normalizeQuery(hrefQueryRaw);
   const link = document.createElement("a");
@@ -1646,19 +1703,7 @@ function RouterLink(props, children) {
       }
     }
   });
-  if (typeof content === "string") {
-    link.textContent = content;
-  } else if (content instanceof Node) {
-    link.appendChild(content);
-  } else if (Array.isArray(content)) {
-    content.forEach((child) => {
-      if (typeof child === "string") {
-        link.appendChild(document.createTextNode(child));
-      } else if (child instanceof Node) {
-        link.appendChild(child);
-      }
-    });
-  }
+  if (content !== void 0) appendChildren(link, content);
   const onLinkClick = (e) => {
     if (e.defaultPrevented || target || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0) {
       return;
@@ -1820,6 +1865,7 @@ function Outlet() {
   const anchor = document.createComment("route-outlet-nested");
   let currentNode = null;
   let currentChild = null;
+  let currentKey = null;
   let navSeq = 0;
   let outletTorn = false;
   const clearCurrent = () => {
@@ -1829,6 +1875,7 @@ function Outlet() {
       currentNode = null;
     }
     currentChild = null;
+    currentKey = null;
   };
   const commitTarget = (seq) => outletTorn || seq !== navSeq ? null : anchor.parentNode;
   const release = (node) => {
@@ -1849,7 +1896,8 @@ function Outlet() {
       clearCurrent();
       return;
     }
-    if (childRoute === currentChild && currentNode) return;
+    const key = instanceKey(childRoute, route2.matched.slice(1), route2);
+    if (childRoute === currentChild && key === currentKey && currentNode) return;
     try {
       const cacheKey = `${route2.path}\0${childRoute.path}`;
       const plan = await _routerRef.current.loadPlan(childRoute, cacheKey);
@@ -1865,6 +1913,7 @@ function Outlet() {
       parent.insertBefore(node, anchor.nextSibling);
       currentNode = node;
       currentChild = childRoute;
+      currentKey = key;
     } catch (error) {
       if (outletTorn || seq !== navSeq) return;
       console.error("[Outlet] Failed to render child route:", error);
@@ -1887,6 +1936,7 @@ function Outlet() {
       currentNode = null;
     }
     currentChild = null;
+    currentKey = null;
   };
   registerDisposer(anchor, outletCleanup);
   routeCleanups.push(outletCleanup);
@@ -2193,8 +2243,8 @@ function hydrateRouter(routes, options) {
   const liveUrl = `${window.location.pathname}${window.location.search}${window.location.hash}`;
   const resolved = resolveServerRoute(liveUrl, routes);
   const bootstrapEpoch = __getNavigationEpoch();
-  import("./ssr-Y7XOEPEN.js").then(async ({ hydrate }) => {
-    const { replaceChildrenSafely } = await import("./dispose-46BOMMQJ.js");
+  import("./ssr-XOTUASDO.js").then(async ({ hydrate }) => {
+    const { replaceChildrenSafely } = await import("./dispose-GEIG2KOF.js");
     if (__getNavigationEpoch() !== bootstrapEpoch) return;
     if (resolved.component) {
       hydrate(resolved.component, container);
@@ -2228,7 +2278,9 @@ function escapeAttrLocal(str) {
 }
 export {
   KeepAliveRoute,
+  MigrationStorageError,
   Outlet,
+  PluginInstallCancelledError,
   Route,
   RouterLink,
   SibuRouter,
@@ -2272,6 +2324,7 @@ export {
   healthCheck,
   hydrateRouter,
   inject,
+  isPluginInstallCancelledError,
   lazy,
   lazyModule,
   navigate,
@@ -2300,6 +2353,7 @@ export {
   setRouteTransition,
   setRoutes,
   t,
+  translated,
   triggerPluginError,
   triggerPluginMount,
   triggerPluginUnmount

package/dist/signal-EotCj4hS.d.cts

@@ -0,0 +1,110 @@
+declare const __accessor: unique symbol;
+/**
+ * A reactive signal getter returned by signal(), derived(), and similar primitives.
+ *
+ * Pass an Accessor directly into reactive prop positions — never call it there:
+ * ```ts
+ * const [count, setCount] = signal(0);
+ *
+ * div(count)                       // ✓ reactive — Accessor passed directly
+ * div(() => count())               // ✓ reactive — explicit arrow wrapper
+ * div(count())                     // ✗ static  — evaluated once, not reactive
+ * ```
+ */
+type Accessor<T> = (() => T) & {
+    readonly [__accessor]?: never;
+};
+/**
+ * An {@link Accessor} that owns a subscription, timer or listener and must be
+ * released when its consumer goes away. Returned by helpers such as `debounce`,
+ * `throttle` and `previous`.
+ */
+type DisposableAccessor<T> = Accessor<T> & {
+    /** Stop the underlying subscription and cancel pending work. The accessor keeps its last value. */
+    dispose(): void;
+};
+type SetState<T> = (next: T | ((prev: T) => T)) => void;
+type StateTuple<T> = [Accessor<T>, SetState<T>];
+/** Options for signal */
+interface SignalOptions<T = unknown> {
+    /** Debug name for devtools inspection. Only used in development. */
+    name?: string;
+    /** Custom equality function. Defaults to Object.is(). */
+    equals?: (prev: T, next: T) => boolean;
+}
+/**
+ * signal creates a reactive signal that holds a value of type T.
+ * Returns a tuple: [getter, setter].
+ *
+ * @param initial Initial value
+ * @param options Optional config: `{ name: "count" }` for devtools labeling
+ * @returns A `[getter, setter]` tuple. Calling the getter inside a reactive
+ * context subscribes to the signal; the setter accepts a value or an updater.
+ */
+declare function signal<T>(initial: T, options?: SignalOptions<T>): StateTuple<T>;
+/**
+ * A valueless reactive token standing in for state SibuJS does not own.
+ *
+ * See {@link external}.
+ */
+interface ExternalSource {
+    /**
+     * Declare, from inside a reactive computation, that it reads the external
+     * state this source represents. Call it in the same places you would read a
+     * signal — the top of a binding getter, a `derived()` body, an `effect()`.
+     *
+     * Outside a tracking context it is a no-op, exactly like reading a signal.
+     */
+    track(): void;
+    /**
+     * Declare that the external state changed. Every consumer that called
+     * {@link ExternalSource.track} is invalidated.
+     *
+     * Participates in `batch()` like any signal write: inside a batch, consumers
+     * are notified once when the outermost batch flushes.
+     */
+    invalidate(): void;
+}
+/**
+ * Create a reactive source for state that lives outside SibuJS — a domain
+ * engine, a media element, a canvas scene, an editor document, a cache a
+ * socket writes into.
+ *
+ * The pattern is two lines: `track()` where you read, `invalidate()` after you
+ * mutate.
+ *
+ * ```ts
+ * import { Chess } from "chess.js";
+ * import { external } from "sibujs";
+ *
+ * const game = new Chess();      // owns the rules and the mutable state
+ * const moved = external();      // owns "something changed"
+ *
+ * ctx.text("@status", () => {
+ *   moved.track();               // this binding reads the engine
+ *   return game.isCheckmate() ? "Checkmate" : `${game.turn()} to move`;
+ * });
+ *
+ * game.move({ from: "e2", to: "e4" });
+ * moved.invalidate();            // every consumer above re-reads
+ * ```
+ *
+ * **One source is one invalidation domain.** Every consumer of a source
+ * re-runs on every `invalidate()`, so the granularity of your updates is
+ * exactly the granularity of your sources: one for a whole engine is the
+ * cheapest to write, several (`board`, `clock`, `history`) let an update touch
+ * only what it affects. See `docs/architecture/external-state.md` for the
+ * trade-offs and when subdividing is worth it.
+ *
+ * Ownership, disposal and error routing are the consumer's, not the source's:
+ * a disposed binding or effect is never invalidated, and a consumer that
+ * throws is reported through the normal runtime error pipeline with its own
+ * phase and node.
+ *
+ * @param options `name` labels the source in devtools (development only).
+ */
+declare function external(options?: {
+    name?: string;
+}): ExternalSource;
+
+export { type Accessor as A, type DisposableAccessor as D, type ExternalSource as E, type SignalOptions as S, external as e, signal as s };

package/dist/signal-EotCj4hS.d.ts

@@ -0,0 +1,110 @@
+declare const __accessor: unique symbol;
+/**
+ * A reactive signal getter returned by signal(), derived(), and similar primitives.
+ *
+ * Pass an Accessor directly into reactive prop positions — never call it there:
+ * ```ts
+ * const [count, setCount] = signal(0);
+ *
+ * div(count)                       // ✓ reactive — Accessor passed directly
+ * div(() => count())               // ✓ reactive — explicit arrow wrapper
+ * div(count())                     // ✗ static  — evaluated once, not reactive
+ * ```
+ */
+type Accessor<T> = (() => T) & {
+    readonly [__accessor]?: never;
+};
+/**
+ * An {@link Accessor} that owns a subscription, timer or listener and must be
+ * released when its consumer goes away. Returned by helpers such as `debounce`,
+ * `throttle` and `previous`.
+ */
+type DisposableAccessor<T> = Accessor<T> & {
+    /** Stop the underlying subscription and cancel pending work. The accessor keeps its last value. */
+    dispose(): void;
+};
+type SetState<T> = (next: T | ((prev: T) => T)) => void;
+type StateTuple<T> = [Accessor<T>, SetState<T>];
+/** Options for signal */
+interface SignalOptions<T = unknown> {
+    /** Debug name for devtools inspection. Only used in development. */
+    name?: string;
+    /** Custom equality function. Defaults to Object.is(). */
+    equals?: (prev: T, next: T) => boolean;
+}
+/**
+ * signal creates a reactive signal that holds a value of type T.
+ * Returns a tuple: [getter, setter].
+ *
+ * @param initial Initial value
+ * @param options Optional config: `{ name: "count" }` for devtools labeling
+ * @returns A `[getter, setter]` tuple. Calling the getter inside a reactive
+ * context subscribes to the signal; the setter accepts a value or an updater.
+ */
+declare function signal<T>(initial: T, options?: SignalOptions<T>): StateTuple<T>;
+/**
+ * A valueless reactive token standing in for state SibuJS does not own.
+ *
+ * See {@link external}.
+ */
+interface ExternalSource {
+    /**
+     * Declare, from inside a reactive computation, that it reads the external
+     * state this source represents. Call it in the same places you would read a
+     * signal — the top of a binding getter, a `derived()` body, an `effect()`.
+     *
+     * Outside a tracking context it is a no-op, exactly like reading a signal.
+     */
+    track(): void;
+    /**
+     * Declare that the external state changed. Every consumer that called
+     * {@link ExternalSource.track} is invalidated.
+     *
+     * Participates in `batch()` like any signal write: inside a batch, consumers
+     * are notified once when the outermost batch flushes.
+     */
+    invalidate(): void;
+}
+/**
+ * Create a reactive source for state that lives outside SibuJS — a domain
+ * engine, a media element, a canvas scene, an editor document, a cache a
+ * socket writes into.
+ *
+ * The pattern is two lines: `track()` where you read, `invalidate()` after you
+ * mutate.
+ *
+ * ```ts
+ * import { Chess } from "chess.js";
+ * import { external } from "sibujs";
+ *
+ * const game = new Chess();      // owns the rules and the mutable state
+ * const moved = external();      // owns "something changed"
+ *
+ * ctx.text("@status", () => {
+ *   moved.track();               // this binding reads the engine
+ *   return game.isCheckmate() ? "Checkmate" : `${game.turn()} to move`;
+ * });
+ *
+ * game.move({ from: "e2", to: "e4" });
+ * moved.invalidate();            // every consumer above re-reads
+ * ```
+ *
+ * **One source is one invalidation domain.** Every consumer of a source
+ * re-runs on every `invalidate()`, so the granularity of your updates is
+ * exactly the granularity of your sources: one for a whole engine is the
+ * cheapest to write, several (`board`, `clock`, `history`) let an update touch
+ * only what it affects. See `docs/architecture/external-state.md` for the
+ * trade-offs and when subdividing is worth it.
+ *
+ * Ownership, disposal and error routing are the consumer's, not the source's:
+ * a disposed binding or effect is never invalidated, and a consumer that
+ * throws is reported through the normal runtime error pipeline with its own
+ * phase and node.
+ *
+ * @param options `name` labels the source in devtools (development only).
+ */
+declare function external(options?: {
+    name?: string;
+}): ExternalSource;
+
+export { type Accessor as A, type DisposableAccessor as D, type ExternalSource as E, type SignalOptions as S, external as e, signal as s };

package/dist/{ssr-BiPRdZ6n.d.cts → ssr-Bli9XRW5.d.cts}

@@ -166,6 +166,11 @@ declare function resetSSRState(): void;
  *
  * The returned element contains the fallback UI with a `data-sibu-suspense-id`
  * marker. The promise resolves to `{ id, html }` once async content is ready.
+ *
+ * The promise never rejects. Any failure to produce the content HTML — the
+ * content factory throwing synchronously, its promise rejecting, the timeout,
+ * or rendering the resolved element throwing — resolves it with the fallback
+ * HTML, so the stream still produces a deterministic swap payload.
  */
 declare function ssrSuspense(props: {
     fallback: () => HTMLElement;

package/dist/{ssr-BiPRdZ6n.d.ts → ssr-Bli9XRW5.d.ts}

@@ -166,6 +166,11 @@ declare function resetSSRState(): void;
  *
  * The returned element contains the fallback UI with a `data-sibu-suspense-id`
  * marker. The promise resolves to `{ id, html }` once async content is ready.
+ *
+ * The promise never rejects. Any failure to produce the content HTML — the
+ * content factory throwing synchronously, its promise rejecting, the timeout,
+ * or rendering the resolved element throwing — resolves it with the fallback
+ * HTML, so the stream still produces a deterministic swap payload.
  */
 declare function ssrSuspense(props: {
     fallback: () => HTMLElement;

package/dist/{ssr-Y7XOEPEN.js → ssr-XOTUASDO.js}

@@ -17,11 +17,10 @@ import {
   ssrSuspense,
   suspenseSwapScript,
   trustHTML
-} from "./chunk-NIOYEGBQ.js";
-import "./chunk-IXKSNWV5.js";
-import "./chunk-5DXA2J44.js";
-import "./chunk-QKRPLZ2V.js";
-import "./chunk-2WLZ6757.js";
+} from "./chunk-HURREPU2.js";
+import "./chunk-2INLLLMZ.js";
+import "./chunk-7XHATCIH.js";
+import "./chunk-NYNYSPK7.js";
 export {
   collectStream,
   deserializeState,