@fluixi/core 1.0.0-alpha.83 → 1.0.0-alpha.85

package/dist/src/lib/router/transition.cjs

@@ -0,0 +1,75 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/lib/router/transition.ts
+var transition_exports = {};
+__export(transition_exports, {
+  prefersReducedMotion: () => prefersReducedMotion,
+  prepareComponents: () => prepareComponents,
+  runTransition: () => runTransition,
+  shouldAnimate: () => shouldAnimate,
+  supportsViewTransitions: () => supportsViewTransitions
+});
+module.exports = __toCommonJS(transition_exports);
+function supportsViewTransitions() {
+  return typeof document !== "undefined" && typeof document.startViewTransition === "function";
+}
+function prefersReducedMotion() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    return false;
+  }
+  try {
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  } catch {
+    return false;
+  }
+}
+function shouldAnimate(mode) {
+  return mode !== "none" && supportsViewTransitions() && !prefersReducedMotion();
+}
+function prepareComponents(components) {
+  const pending = [];
+  for (const component of components) {
+    const preload = component?.preload;
+    if (typeof preload === "function") {
+      try {
+        const result = preload();
+        if (result && typeof result.then === "function") {
+          pending.push(result.catch(() => void 0));
+        }
+      } catch {
+      }
+    }
+  }
+  return pending.length ? Promise.all(pending).then(() => void 0) : null;
+}
+function runTransition(mode, commit) {
+  if (!shouldAnimate(mode)) {
+    return Promise.resolve(commit()).then(() => void 0);
+  }
+  const start = document.startViewTransition;
+  try {
+    const transition = start.call(document, () => commit());
+    transition.finished?.catch(() => void 0);
+    transition.ready?.catch(() => void 0);
+    return transition.updateCallbackDone.catch(() => void 0);
+  } catch {
+    return Promise.resolve(commit()).then(() => void 0);
+  }
+}

package/dist/src/lib/router/transition.d.ts

@@ -0,0 +1,81 @@
+/**
+ * Navigation presentation: preparing a route before it is shown, and handing the DOM
+ * swap to the browser's View Transition API when there is one.
+ *
+ * ## The lifecycle this replaces
+ *
+ * Navigation used to be one synchronous chain. `navigate()` pushed history, the core
+ * router recomputed the match and notified, the `Router` component wrote the match
+ * signal, and the render memo rebuilt the layer at the depth that changed. The old DOM
+ * came out at that moment: whether or not the new route had anything to put in its
+ * place:
+ *
+ *   - a route with a `data` loader renders `null` until the resource resolves,
+ *   - a `lazy()` route whose chunk is not loaded suspends to the nearest fallback.
+ *
+ * Both are an empty intermediate state with the old page already gone, which is what
+ * reads as a flash. It is not a paint-timing artifact and no animation would hide it.
+ *
+ * ## The lifecycle now
+ *
+ *   navigation-start
+ *        │  the match is computed, but not committed
+ *   prepare
+ *        │  every matched layer's module is loaded (`lazy().preload()`), so the
+ *        │  component renders synchronously instead of suspending
+ *   begin transition
+ *        │  `document.startViewTransition`, when it applies
+ *   commit
+ *        │  the match signal is written and effects are flushed, inside the
+ *        │  transition's callback, so the browser snapshots a settled DOM
+ *   navigation-complete
+ *
+ * Nothing here delays anything. The commit happens as soon as preparation resolves; on
+ * a warm route that is the same tick it always was.
+ */
+/** How a navigation should be presented. */
+export type TransitionMode = 'auto' | 'none';
+/**
+ * Whether this environment can animate a route swap.
+ *
+ * Read at call time rather than cached at module load: a test swaps the API in and out,
+ * and a cached answer would make the second case unreachable.
+ */
+export declare function supportsViewTransitions(): boolean;
+/**
+ * Whether the reader asked not to be animated.
+ *
+ * A stated preference outranks the app's configuration, so this is checked on every
+ * navigation rather than once: the setting can change while the page is open.
+ */
+export declare function prefersReducedMotion(): boolean;
+/** Whether this particular commit should go through a view transition. */
+export declare function shouldAnimate(mode: TransitionMode): boolean;
+/**
+ * Load what the next route needs to render without suspending.
+ *
+ * Only the route's own modules. Data loaders are deliberately left alone: the resource
+ * belongs to the layer's owner and is created when that layer renders, so calling the
+ * loader here would either run the request twice or require a cache this router does not
+ * own. See the note in the router on what that leaves.
+ *
+ * A module that fails to load resolves anyway. Preparation is an optimisation, and a
+ * rejected import should surface through the route's own error handling when it renders,
+ * not by leaving the navigation permanently pending.
+ */
+export declare function prepareComponents(components: readonly unknown[]): Promise<void> | null;
+/**
+ * Run `commit` inside a view transition, or directly when one does not apply.
+ *
+ * The callback is async because writing the match signal only queues the work: effects
+ * are scheduled, so the DOM is not settled when the write returns. `startViewTransition`
+ * waits for the returned promise before snapshotting the new state, so flushing inside
+ * it is what makes the browser compare two finished frames rather than one finished and
+ * one half-built.
+ *
+ * The returned promise resolves when the DOM has been updated, not when the animation
+ * ends. A caller waiting on navigation wants the former; blocking on the latter would
+ * make every navigation as slow as its animation.
+ */
+export declare function runTransition(mode: TransitionMode, commit: () => void | Promise<void>): Promise<void>;
+//# sourceMappingURL=transition.d.ts.map

package/dist/src/lib/router/transition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"transition.d.ts","sourceRoot":"","sources":["../../../../src/lib/router/transition.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAcH,4CAA4C;AAC5C,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,MAAM,CAAC;AAE7C;;;;;GAKG;AACH,wBAAgB,uBAAuB,IAAI,OAAO,CAMjD;AAED;;;;;GAKG;AACH,wBAAgB,oBAAoB,IAAI,OAAO,CAU9C;AAED,0EAA0E;AAC1E,wBAAgB,aAAa,CAAC,IAAI,EAAE,cAAc,GAAG,OAAO,CAE3D;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,iBAAiB,CAAC,UAAU,EAAE,SAAS,OAAO,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAqBtF;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,aAAa,CAC3B,IAAI,EAAE,cAAc,EACpB,MAAM,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,GACjC,OAAO,CAAC,IAAI,CAAC,CAsBf"}

package/dist/src/lib/router/transition.js

@@ -0,0 +1,136 @@
+/**
+ * Navigation presentation: preparing a route before it is shown, and handing the DOM
+ * swap to the browser's View Transition API when there is one.
+ *
+ * ## The lifecycle this replaces
+ *
+ * Navigation used to be one synchronous chain. `navigate()` pushed history, the core
+ * router recomputed the match and notified, the `Router` component wrote the match
+ * signal, and the render memo rebuilt the layer at the depth that changed. The old DOM
+ * came out at that moment: whether or not the new route had anything to put in its
+ * place:
+ *
+ *   - a route with a `data` loader renders `null` until the resource resolves,
+ *   - a `lazy()` route whose chunk is not loaded suspends to the nearest fallback.
+ *
+ * Both are an empty intermediate state with the old page already gone, which is what
+ * reads as a flash. It is not a paint-timing artifact and no animation would hide it.
+ *
+ * ## The lifecycle now
+ *
+ *   navigation-start
+ *        │  the match is computed, but not committed
+ *   prepare
+ *        │  every matched layer's module is loaded (`lazy().preload()`), so the
+ *        │  component renders synchronously instead of suspending
+ *   begin transition
+ *        │  `document.startViewTransition`, when it applies
+ *   commit
+ *        │  the match signal is written and effects are flushed, inside the
+ *        │  transition's callback, so the browser snapshots a settled DOM
+ *   navigation-complete
+ *
+ * Nothing here delays anything. The commit happens as soon as preparation resolves; on
+ * a warm route that is the same tick it always was.
+ */
+/**
+ * Whether this environment can animate a route swap.
+ *
+ * Read at call time rather than cached at module load: a test swaps the API in and out,
+ * and a cached answer would make the second case unreachable.
+ */
+export function supportsViewTransitions() {
+    return (typeof document !== 'undefined' &&
+        typeof document
+            .startViewTransition === 'function');
+}
+/**
+ * Whether the reader asked not to be animated.
+ *
+ * A stated preference outranks the app's configuration, so this is checked on every
+ * navigation rather than once: the setting can change while the page is open.
+ */
+export function prefersReducedMotion() {
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+        return false;
+    }
+    try {
+        return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    }
+    catch {
+        // A matchMedia that throws on an unknown query is not a reason to fail navigation.
+        return false;
+    }
+}
+/** Whether this particular commit should go through a view transition. */
+export function shouldAnimate(mode) {
+    return mode !== 'none' && supportsViewTransitions() && !prefersReducedMotion();
+}
+/**
+ * Load what the next route needs to render without suspending.
+ *
+ * Only the route's own modules. Data loaders are deliberately left alone: the resource
+ * belongs to the layer's owner and is created when that layer renders, so calling the
+ * loader here would either run the request twice or require a cache this router does not
+ * own. See the note in the router on what that leaves.
+ *
+ * A module that fails to load resolves anyway. Preparation is an optimisation, and a
+ * rejected import should surface through the route's own error handling when it renders,
+ * not by leaving the navigation permanently pending.
+ */
+export function prepareComponents(components) {
+    const pending = [];
+    for (const component of components) {
+        const preload = component
+            ?.preload;
+        if (typeof preload === 'function') {
+            try {
+                const result = preload();
+                if (result && typeof result.then === 'function') {
+                    pending.push(result.catch(() => undefined));
+                }
+            }
+            catch {
+                // A preload that throws synchronously is the same as one that rejects.
+            }
+        }
+    }
+    // Null rather than a resolved promise: the caller commits synchronously when there is
+    // nothing to wait for, which keeps a warm navigation on the tick it was already on.
+    return pending.length ? Promise.all(pending).then(() => undefined) : null;
+}
+/**
+ * Run `commit` inside a view transition, or directly when one does not apply.
+ *
+ * The callback is async because writing the match signal only queues the work: effects
+ * are scheduled, so the DOM is not settled when the write returns. `startViewTransition`
+ * waits for the returned promise before snapshotting the new state, so flushing inside
+ * it is what makes the browser compare two finished frames rather than one finished and
+ * one half-built.
+ *
+ * The returned promise resolves when the DOM has been updated, not when the animation
+ * ends. A caller waiting on navigation wants the former; blocking on the latter would
+ * make every navigation as slow as its animation.
+ */
+export function runTransition(mode, commit) {
+    if (!shouldAnimate(mode)) {
+        return Promise.resolve(commit()).then(() => undefined);
+    }
+    const start = document
+        .startViewTransition;
+    try {
+        const transition = start.call(document, () => commit());
+        // Swallow the rejections a skipped or interrupted transition produces. Both of
+        // these reject when the animation is cut short, by `skipTransition()`, by another
+        // navigation starting, or by the tab going to the background. The DOM update inside
+        // the callback still happened, so a navigation must not fail because an animation
+        // did not play, and an unobserved rejection here would surface as an unhandled one.
+        transition.finished?.catch(() => undefined);
+        transition.ready?.catch(() => undefined);
+        return transition.updateCallbackDone.catch(() => undefined);
+    }
+    catch {
+        // A browser that has the method but refuses the call still has to navigate.
+        return Promise.resolve(commit()).then(() => undefined);
+    }
+}

package/dist/src/lib/router/transition.mjs

@@ -0,0 +1,54 @@
+// src/lib/router/transition.ts
+function supportsViewTransitions() {
+  return typeof document !== "undefined" && typeof document.startViewTransition === "function";
+}
+function prefersReducedMotion() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    return false;
+  }
+  try {
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  } catch {
+    return false;
+  }
+}
+function shouldAnimate(mode) {
+  return mode !== "none" && supportsViewTransitions() && !prefersReducedMotion();
+}
+function prepareComponents(components) {
+  const pending = [];
+  for (const component of components) {
+    const preload = component?.preload;
+    if (typeof preload === "function") {
+      try {
+        const result = preload();
+        if (result && typeof result.then === "function") {
+          pending.push(result.catch(() => void 0));
+        }
+      } catch {
+      }
+    }
+  }
+  return pending.length ? Promise.all(pending).then(() => void 0) : null;
+}
+function runTransition(mode, commit) {
+  if (!shouldAnimate(mode)) {
+    return Promise.resolve(commit()).then(() => void 0);
+  }
+  const start = document.startViewTransition;
+  try {
+    const transition = start.call(document, () => commit());
+    transition.finished?.catch(() => void 0);
+    transition.ready?.catch(() => void 0);
+    return transition.updateCallbackDone.catch(() => void 0);
+  } catch {
+    return Promise.resolve(commit()).then(() => void 0);
+  }
+}
+export {
+  prefersReducedMotion,
+  prepareComponents,
+  runTransition,
+  shouldAnimate,
+  supportsViewTransitions
+};

package/dist/src/lib/server/hydration.cjs

@@ -1 +1,169 @@
-"use strict";var a=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var w=(t,n)=>{for(var e in n)a(t,e,{get:n[e],enumerable:!0})},x=(t,n,e,r)=>{if(n&&typeof n=="object"||typeof n=="function")for(let o of g(n))!m.call(t,o)&&o!==e&&a(t,o,{get:()=>n[o],enumerable:!(r=l(n,o))||r.enumerable});return t};var h=t=>x(a({},"__esModule",{value:!0}),t);var F={};w(F,{cleanupHydration:()=>y,clearHydrationData:()=>p,clearHydrationDataKey:()=>D,createHydratableResource:()=>M,deserializeHydrationData:()=>b,generateMarkerID:()=>v,getHydrationData:()=>s,hasHydrationData:()=>_,hydrationMarker:()=>E,hydrationMarkerEnd:()=>O,hydrationMarkerStart:()=>N,isClientEnvironment:()=>C,isHydrating:()=>f,isServerEnvironment:()=>k,serializeHydrationData:()=>I,setHydrating:()=>T,setHydrationData:()=>d,useHydrationData:()=>j});module.exports=h(F);var c=!1,i=new Map,H=0;function f(){return c}function T(t){c=t}function d(t,n){i.set(t,n)}function s(t){return i.get(t)}function _(t){return i.has(t)}function p(){i.clear()}function D(t){i.delete(t)}function I(){if(i.size===0)return"";let t=Object.fromEntries(i);return`<script type="application/json" id="__FLUIXI_HYDRATION__">${JSON.stringify(t)}<\/script>`}function b(){if(typeof window>"u")return!1;let t=document.getElementById("__FLUIXI_HYDRATION__");if(!t||t.getAttribute("type")!=="application/json")return!1;try{let n=t.textContent||"{}",e=JSON.parse(n);for(let[r,o]of Object.entries(e))i.set(r,o);return!0}catch(n){return console.error("Failed to deserialize hydration data:",n),!1}}function v(){return`h${H++}`}function E(t){return`<!--#${t}-->`}function N(t){return`<!--#${t}-->`}function O(t){return`<!--/${t}-->`}function M(t,n){return async()=>{if(f()||typeof window<"u"){let r=s(t);if(r!==void 0)return r}let e=await n();return typeof window>"u"&&d(t,e),e}}function j(t,n){let e=s(t);if(e!==void 0)return e;let r=typeof n=="function"?n():n;return typeof window>"u"&&d(t,r),r}function y(){if(typeof window>"u")return;let t=document.getElementById("__FLUIXI_HYDRATION__");t&&t.remove();let n=document.createTreeWalker(document.body,NodeFilter.SHOW_COMMENT,null),e=[],r;for(;r=n.nextNode();){let o=r,u=o.nodeValue||"";(u.startsWith("#")||u.startsWith("/"))&&e.push(o)}e.forEach(o=>o.remove()),p()}typeof window<"u"&&window.addEventListener("load",()=>{setTimeout(y,100)});function k(){return typeof window>"u"}function C(){return typeof window<"u"}
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/lib/server/hydration.ts
+var hydration_exports = {};
+__export(hydration_exports, {
+  cleanupHydration: () => cleanupHydration,
+  clearHydrationData: () => clearHydrationData,
+  clearHydrationDataKey: () => clearHydrationDataKey,
+  createHydratableResource: () => createHydratableResource,
+  deserializeHydrationData: () => deserializeHydrationData,
+  generateMarkerID: () => generateMarkerID,
+  getHydrationData: () => getHydrationData,
+  hasHydrationData: () => hasHydrationData,
+  hydrationMarker: () => hydrationMarker,
+  hydrationMarkerEnd: () => hydrationMarkerEnd,
+  hydrationMarkerStart: () => hydrationMarkerStart,
+  isClientEnvironment: () => isClientEnvironment,
+  isHydrating: () => isHydrating,
+  isServerEnvironment: () => isServerEnvironment,
+  serializeHydrationData: () => serializeHydrationData,
+  setHydrating: () => setHydrating,
+  setHydrationData: () => setHydrationData,
+  useHydrationData: () => useHydrationData
+});
+module.exports = __toCommonJS(hydration_exports);
+var import_dom = require("@fluixi/dom");
+var hydrating = false;
+var hydrationDataMap = /* @__PURE__ */ new Map();
+var markerCounter = 0;
+function isHydrating() {
+  return hydrating;
+}
+function setHydrating(state) {
+  hydrating = state;
+}
+function setHydrationData(key, data) {
+  hydrationDataMap.set(key, data);
+}
+function getHydrationData(key) {
+  return hydrationDataMap.get(key);
+}
+function hasHydrationData(key) {
+  return hydrationDataMap.has(key);
+}
+function clearHydrationData() {
+  hydrationDataMap.clear();
+}
+function clearHydrationDataKey(key) {
+  hydrationDataMap.delete(key);
+}
+function serializeHydrationData() {
+  if (hydrationDataMap.size === 0) {
+    return "";
+  }
+  const data = Object.fromEntries(hydrationDataMap);
+  const json = JSON.stringify(data);
+  return `<script type="application/json" id="__FLUIXI_HYDRATION__">${json}<\/script>`;
+}
+function deserializeHydrationData() {
+  if (typeof window === "undefined") {
+    return false;
+  }
+  const script = document.getElementById("__FLUIXI_HYDRATION__");
+  if (!script || script.getAttribute("type") !== "application/json") {
+    return false;
+  }
+  try {
+    const json = script.textContent || "{}";
+    const data = JSON.parse(json);
+    for (const [key, value] of Object.entries(data)) {
+      hydrationDataMap.set(key, value);
+    }
+    return true;
+  } catch (error) {
+    console.error("Failed to deserialize hydration data:", error);
+    return false;
+  }
+}
+function generateMarkerID() {
+  return `h${markerCounter++}`;
+}
+function hydrationMarker(id) {
+  return `<!--#${id}-->`;
+}
+function hydrationMarkerStart(id) {
+  return `<!--#${id}-->`;
+}
+function hydrationMarkerEnd(id) {
+  return `<!--/${id}-->`;
+}
+function createHydratableResource(key, fetcher) {
+  return async () => {
+    if (isHydrating() || typeof window !== "undefined") {
+      const cached = getHydrationData(key);
+      if (cached !== void 0) {
+        return cached;
+      }
+    }
+    const data = await fetcher();
+    if (typeof window === "undefined") {
+      setHydrationData(key, data);
+    }
+    return data;
+  };
+}
+function useHydrationData(key, value) {
+  const hydrationData = getHydrationData(key);
+  if (hydrationData !== void 0) {
+    return hydrationData;
+  }
+  const computedValue = typeof value === "function" ? value() : value;
+  if (typeof window === "undefined") {
+    setHydrationData(key, computedValue);
+  }
+  return computedValue;
+}
+function cleanupHydration() {
+  if (typeof window === "undefined") {
+    return;
+  }
+  const script = document.getElementById("__FLUIXI_HYDRATION__");
+  if (script) {
+    script.remove();
+  }
+  const walker = document.createTreeWalker(
+    document.body,
+    NodeFilter.SHOW_COMMENT,
+    null
+  );
+  const comments = [];
+  let node;
+  while (node = walker.nextNode()) {
+    const comment = node;
+    const text = comment.nodeValue || "";
+    if (text.startsWith("#") || text.startsWith("/")) {
+      comments.push(comment);
+    }
+  }
+  comments.forEach((comment) => comment.remove());
+  clearHydrationData();
+}
+if (typeof window !== "undefined") {
+  window.addEventListener("load", () => {
+    setTimeout(cleanupHydration, 100);
+  });
+}
+function isServerEnvironment() {
+  return (0, import_dom.isServer)();
+}
+function isClientEnvironment() {
+  return !(0, import_dom.isServer)();
+}