@fluixi/core 1.0.0-alpha.92 → 1.0.0-alpha.93

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

@@ -2,77 +2,113 @@
  * @module @fluixi/core/router/data
  */
 import { createResource, createSignal } from '@fluixi/reactive/signal';
-import { getHydrationData, setHydrationData, isServerEnvironment, isHydrating, } from '../server/hydration.js';
+import { currentResourceCache } from '@fluixi/reactive/signal';
 import { useContext, createContext } from '../context/context.js';
-// ============================================================================
-// CACHE (QUERY) SYSTEM
-// ============================================================================
-const globalCache = new Map();
-const inflightRequests = new Map();
+// Mounted route layers: each refetches its data when something is revalidated.
+const revalidationListeners = new Set();
+/** @internal: the router registers each layer's refetch here. */
+export function onRevalidate(listener) {
+    revalidationListeners.add(listener);
+    return () => void revalidationListeners.delete(listener);
+}
+const reloadMounted = () => {
+    for (const listener of [...revalidationListeners])
+        listener();
+};
 /**
- * Cache an async function for data fetching
+ * A function whose results are kept by name and arguments: route data that should not be
+ * fetched again on every visit.
+ *
+ * Readers of the same key share one request in flight. Entries live in the request's cache on
+ * the server, so visitors never share one, and in the page's cache in a browser.
  *
- * Supports:
- * - Deduplication
- * - Hydration (Server -> Client)
- * - Revalidation
+ * @example
+ * ```ts
+ * const organisations = cache(() => api.get('/api/v1/organizations'), 'orgs', { ttl: 30_000 });
+ * export const routeData = () => organisations();
+ * // after a change:
+ * revalidate('orgs');
+ * ```
  */
-export function cache(fn, name) {
-    return async (...args) => {
+export function cache(fn, name, options = {}) {
+    const { ttl = Infinity, staleWhileRevalidate = true } = options;
+    return (...args) => {
+        const store = options.cache ?? currentResourceCache();
         const key = name + ':' + JSON.stringify(args);
-        // 1. Check Hydration Data (Client-side hydration)
-        if (isHydrating() || typeof window !== 'undefined') {
-            const hydrated = getHydrationData(key);
-            if (hydrated !== undefined) {
-                return hydrated;
-            }
-        }
-        // 2. Check Memory Cache
-        if (globalCache.has(key)) {
-            return globalCache.get(key);
-        }
-        // 3. Request Deduplication
-        if (inflightRequests.has(key)) {
-            return inflightRequests.get(key);
+        const fetchFresh = () => {
+            const running = store.inflight.get(key);
+            if (running)
+                return running;
+            const promise = Promise.resolve(fn(...args)).then((value) => {
+                store.set(key, { value, timestamp: Date.now() });
+                store.inflight.delete(key);
+                return value;
+            }, (error) => {
+                store.inflight.delete(key);
+                throw error;
+            });
+            store.inflight.set(key, promise);
+            return promise;
+        };
+        const hit = store.get(key);
+        if (hit && (ttl === Infinity || Date.now() - hit.timestamp <= ttl))
+            return Promise.resolve(hit.value);
+        if (hit && staleWhileRevalidate) {
+            // The page gets the old value now; when the new one lands, the routes load again from it.
+            fetchFresh().then(reloadMounted, () => undefined);
+            return Promise.resolve(hit.value);
         }
-        // 4. Execute
-        const promise = Promise.resolve(fn(...args)).then((val) => {
-            globalCache.set(key, val);
-            inflightRequests.delete(key);
-            // Save for hydration if on server
-            if (isServerEnvironment()) {
-                setHydrationData(key, val);
-            }
-            return val;
-        }, (err) => {
-            inflightRequests.delete(key);
-            throw err;
-        });
-        inflightRequests.set(key, promise);
-        return promise;
+        return fetchFresh();
     };
 }
 /**
- * Global revalidation signal. Tracked by createAsync so that
- * when a key is revalidated, matching resources re-fetch.
+ * Drops cached entries, by name (`'orgs'` matches every `orgs:` key), several names, or a
+ * predicate, then loads the data of the routes on screen again. What is still cached is
+ * served from the cache, so only the dropped entries are fetched.
  */
-const [revalidationVersion, setRevalidationVersion] = createSignal(0);
-const revalidationKeys = new Set();
-/**
- * Revalidate a cache key. Clears the memory cache and triggers
- * reactive invalidation so resources using createAsync re-fetch.
- */
-export function revalidate(key) {
-    const predicate = typeof key === 'string' ? (k) => k.startsWith(key) : key;
-    for (const k of globalCache.keys()) {
-        if (predicate(k)) {
-            globalCache.delete(k);
-            revalidationKeys.add(k);
-        }
+export function revalidate(key, store) {
+    const names = typeof key === 'string' ? [key] : Array.isArray(key) ? key : null;
+    drop(names ?? key, store ?? currentResourceCache());
+    // The other tabs of this site cache the same data in their own pages. A predicate cannot
+    // travel, and a cache passed in by hand is not theirs, so only names on the page cache go.
+    if (names && !store)
+        tellOtherTabs(names);
+}
+function drop(what, store) {
+    const matches = Array.isArray(what) ? (k) => what.some((n) => k === n || k.startsWith(n + ':')) : what;
+    for (const k of [...store.keys()])
+        if (matches(k))
+            store.delete(k);
+    reloadMounted();
+}
+// Other tabs hear a write to this key through the `storage` event, which a browser fires in
+// every other tab of the origin and never in the one that wrote. The value changes each time
+// (`at`), or a repeat of the same names would not fire.
+const TABS_KEY = 'fluixi:revalidate';
+function tellOtherTabs(names) {
+    try {
+        localStorage.setItem(TABS_KEY, JSON.stringify({ names, at: Date.now() + Math.random() }));
+    }
+    catch {
+        /* no storage here (server, private mode): the other tabs refresh on their own schedule */
     }
-    // Bump version to trigger reactive refresh in createAsync consumers
-    setRevalidationVersion((v) => v + 1);
 }
+if (typeof window !== 'undefined') {
+    window.addEventListener('storage', (event) => {
+        if (event.key !== TABS_KEY || !event.newValue)
+            return;
+        try {
+            const names = JSON.parse(event.newValue).names;
+            if (Array.isArray(names) && names.every((n) => typeof n === 'string'))
+                drop(names, currentResourceCache());
+        }
+        catch {
+            /* not ours */
+        }
+    });
+}
+// `@fluixi/api/client` applies `x-fx-revalidate` through this, without importing the router.
+globalThis[Symbol.for('fluixi.revalidate')] = (names) => revalidate(names);
 // ============================================================================
 // ASYNC DATA PRIMITIVES
 // ============================================================================
@@ -95,21 +131,45 @@ function getSubmissionSignal(url) {
     return submissionState.get(url);
 }
 /**
- * Create a server action
+ * Every call of an action, by action name: the ones in flight and the ones that failed.
+ * `submissionState` above keeps only the latest call, so two calls at once overwrote each
+ * other; this list is what an optimistic UI renders from.
  */
-export function action(fn, name) {
+const submissionsState = new Map();
+function getSubmissionsSignal(url) {
+    if (!submissionsState.has(url))
+        submissionsState.set(url, createSignal([]));
+    return submissionsState.get(url);
+}
+export function action(fn, name, options = {}) {
     const actionUrl = name || fn.name || 'action';
     const submit = async (input) => {
         const [, setSubmission] = getSubmissionSignal(actionUrl);
+        const [, setSubmissions] = getSubmissionsSignal(actionUrl);
+        // This call's entry in the list: replaced, never mutated, so readers see each change.
+        let entry;
+        const drop = () => setSubmissions((list) => list.filter((s) => s !== entry));
+        const settle = (next) => {
+            setSubmissions((list) => list.map((s) => (s === entry ? next : s)));
+            entry = next;
+        };
         // Reset state
-        const clear = () => setSubmission(undefined);
-        const retry = () => submit(input);
-        setSubmission({
+        const clear = () => {
+            setSubmission(undefined);
+            drop();
+        };
+        const retry = () => {
+            drop();
+            return submit(input);
+        };
+        entry = {
             input: input, // Approximate type for tracking
             pending: true,
             clear,
             retry,
-        });
+        };
+        setSubmission(entry);
+        setSubmissions((list) => [...list, entry]);
         try {
             // Cast to any to handle potential argument mismatch in generic types
             // fn expects tuple Args, input is single value or FormData
@@ -121,21 +181,29 @@ export function action(fn, name) {
                 clear,
                 retry,
             });
+            // Done: the result is in whatever the page reads now, so the call leaves the list.
+            drop();
+            const stale = typeof options.invalidates === 'function' ? options.invalidates(result) : options.invalidates;
+            for (const key of stale ?? [])
+                revalidate(key);
             return result;
         }
         catch (error) {
-            setSubmission({
+            const failed = {
                 input: input,
                 error,
                 pending: false,
                 clear,
                 retry,
-            });
+            };
+            setSubmission(failed);
+            // Failed: it stays, with its error, until retried or cleared.
+            settle(failed);
             throw error;
         }
     };
     submit.url = actionUrl;
-    submit.with = (args) => action((...a) => fn(args, ...a), name);
+    submit.with = (args) => action((...a) => fn(args, ...a), name, options);
     return submit;
 }
 /**
@@ -145,6 +213,28 @@ export function useSubmission(actionFn) {
     const [submission] = getSubmissionSignal(actionFn.url);
     return submission;
 }
+/**
+ * Every call of `actionFn` still in flight, and the ones that failed, oldest first. One entry
+ * per call, so concurrent calls do not overwrite each other. A call that succeeds leaves the
+ * list; one that fails stays with its `error` until `retry()` or `clear()`.
+ *
+ * The optimistic pattern: render the server's rows, then the pending entries mapped to the
+ * same shape. When a call succeeds its entry goes and the server row takes its place; when it
+ * fails it stops being pending, so it leaves the optimistic rows by itself.
+ *
+ * @example
+ * ```tsx
+ * const moves = useSubmissions(moveDeal);
+ * const rows = $memo(() => [
+ *   ...deals(),
+ *   ...moves().filter((s) => s.pending).map((s) => ({ ...s.input, pending: true })),
+ * ]);
+ * ```
+ */
+export function useSubmissions(actionFn) {
+    const [submissions] = getSubmissionsSignal(actionFn.url);
+    return submissions;
+}
 /**
  * Hook to get action executor
  */

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

@@ -3,80 +3,29 @@ import {
   createResource,
   createSignal
 } from "@fluixi/reactive/signal";
-
-// src/lib/server/hydration.ts
-import { isServer as domIsServer } from "@fluixi/dom";
-var hydrating = false;
-var hydrationDataMap = /* @__PURE__ */ new Map();
-function isHydrating() {
-  return hydrating;
-}
-function setHydrationData(key, data) {
-  hydrationDataMap.set(key, data);
-}
-function getHydrationData(key) {
-  return hydrationDataMap.get(key);
-}
-function clearHydrationData() {
-  hydrationDataMap.clear();
-}
-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 domIsServer();
-}
+import { currentResourceCache } from "@fluixi/reactive/signal";
 
 // src/lib/context/context.ts
 import { asProvider } from "@fluixi/dom";
-import { createContext as createReactiveContext, useContext as useReactiveContext } from "@fluixi/reactive/signal";
 import {
-  readChildren
+  createContext as createReactiveContext,
+  getOwner,
+  useContext as useReactiveContext
 } from "@fluixi/reactive/signal";
 function createContext(defaultValue, name) {
   const context = createReactiveContext(defaultValue, name);
-  const Provider = (props) => {
-    if (props.debug === true) {
-    }
-    return context.Provider({
+  const Provider = (props) => (
+    // Children stay a getter: the reactive Provider reads them after stamping the value on
+    // its owner. Reading `props.children` here would render them, and any <Outlet/> in them,
+    // before the context exists.
+    context.Provider({
       value: props.value,
       get children() {
         return props.children;
       },
       debug: props.debug
-    });
-  };
-  if (typeof Symbol !== "undefined" && Symbol.for) {
-    Provider.$$typeof = /* @__PURE__ */ Symbol.for("react.provider");
-  }
-  Provider.$$typeof = /* @__PURE__ */ Symbol.for("react.provider");
+    })
+  );
   return {
     id: context.id,
     Provider: asProvider(Provider),
@@ -89,53 +38,73 @@ function useContext(context) {
 }
 
 // src/lib/router/data.ts
-var globalCache = /* @__PURE__ */ new Map();
-var inflightRequests = /* @__PURE__ */ new Map();
-function cache(fn, name) {
-  return async (...args) => {
+var revalidationListeners = /* @__PURE__ */ new Set();
+function onRevalidate(listener) {
+  revalidationListeners.add(listener);
+  return () => void revalidationListeners.delete(listener);
+}
+var reloadMounted = () => {
+  for (const listener of [...revalidationListeners]) listener();
+};
+function cache(fn, name, options = {}) {
+  const { ttl = Infinity, staleWhileRevalidate = true } = options;
+  return (...args) => {
+    const store = options.cache ?? currentResourceCache();
     const key = name + ":" + JSON.stringify(args);
-    if (isHydrating() || typeof window !== "undefined") {
-      const hydrated = getHydrationData(key);
-      if (hydrated !== void 0) {
-        return hydrated;
-      }
-    }
-    if (globalCache.has(key)) {
-      return globalCache.get(key);
-    }
-    if (inflightRequests.has(key)) {
-      return inflightRequests.get(key);
-    }
-    const promise = Promise.resolve(fn(...args)).then(
-      (val) => {
-        globalCache.set(key, val);
-        inflightRequests.delete(key);
-        if (isServerEnvironment()) {
-          setHydrationData(key, val);
+    const fetchFresh = () => {
+      const running = store.inflight.get(key);
+      if (running) return running;
+      const promise = Promise.resolve(fn(...args)).then(
+        (value) => {
+          store.set(key, { value, timestamp: Date.now() });
+          store.inflight.delete(key);
+          return value;
+        },
+        (error) => {
+          store.inflight.delete(key);
+          throw error;
         }
-        return val;
-      },
-      (err) => {
-        inflightRequests.delete(key);
-        throw err;
-      }
-    );
-    inflightRequests.set(key, promise);
-    return promise;
+      );
+      store.inflight.set(key, promise);
+      return promise;
+    };
+    const hit = store.get(key);
+    if (hit && (ttl === Infinity || Date.now() - hit.timestamp <= ttl)) return Promise.resolve(hit.value);
+    if (hit && staleWhileRevalidate) {
+      fetchFresh().then(reloadMounted, () => void 0);
+      return Promise.resolve(hit.value);
+    }
+    return fetchFresh();
   };
 }
-var [revalidationVersion, setRevalidationVersion] = createSignal(0);
-var revalidationKeys = /* @__PURE__ */ new Set();
-function revalidate(key) {
-  const predicate = typeof key === "string" ? (k) => k.startsWith(key) : key;
-  for (const k of globalCache.keys()) {
-    if (predicate(k)) {
-      globalCache.delete(k);
-      revalidationKeys.add(k);
-    }
+function revalidate(key, store) {
+  const names = typeof key === "string" ? [key] : Array.isArray(key) ? key : null;
+  drop(names ?? key, store ?? currentResourceCache());
+  if (names && !store) tellOtherTabs(names);
+}
+function drop(what, store) {
+  const matches = Array.isArray(what) ? (k) => what.some((n) => k === n || k.startsWith(n + ":")) : what;
+  for (const k of [...store.keys()]) if (matches(k)) store.delete(k);
+  reloadMounted();
+}
+var TABS_KEY = "fluixi:revalidate";
+function tellOtherTabs(names) {
+  try {
+    localStorage.setItem(TABS_KEY, JSON.stringify({ names, at: Date.now() + Math.random() }));
+  } catch {
   }
-  setRevalidationVersion((v) => v + 1);
 }
+if (typeof window !== "undefined") {
+  window.addEventListener("storage", (event) => {
+    if (event.key !== TABS_KEY || !event.newValue) return;
+    try {
+      const names = JSON.parse(event.newValue).names;
+      if (Array.isArray(names) && names.every((n) => typeof n === "string")) drop(names, currentResourceCache());
+    } catch {
+    }
+  });
+}
+globalThis[/* @__PURE__ */ Symbol.for("fluixi.revalidate")] = (names) => revalidate(names);
 function createAsync(fetcher, source) {
   const [data] = createResource(source || (() => true), fetcher);
   return data;
@@ -150,19 +119,39 @@ function getSubmissionSignal(url) {
   }
   return submissionState.get(url);
 }
-function action(fn, name) {
+var submissionsState = /* @__PURE__ */ new Map();
+function getSubmissionsSignal(url) {
+  if (!submissionsState.has(url)) submissionsState.set(url, createSignal([]));
+  return submissionsState.get(url);
+}
+function action(fn, name, options = {}) {
   const actionUrl = name || fn.name || "action";
   const submit = async (input) => {
     const [, setSubmission] = getSubmissionSignal(actionUrl);
-    const clear = () => setSubmission(void 0);
-    const retry = () => submit(input);
-    setSubmission({
+    const [, setSubmissions] = getSubmissionsSignal(actionUrl);
+    let entry;
+    const drop2 = () => setSubmissions((list) => list.filter((s) => s !== entry));
+    const settle = (next) => {
+      setSubmissions((list) => list.map((s) => s === entry ? next : s));
+      entry = next;
+    };
+    const clear = () => {
+      setSubmission(void 0);
+      drop2();
+    };
+    const retry = () => {
+      drop2();
+      return submit(input);
+    };
+    entry = {
       input,
       // Approximate type for tracking
       pending: true,
       clear,
       retry
-    });
+    };
+    setSubmission(entry);
+    setSubmissions((list) => [...list, entry]);
     try {
       const result = await fn(input);
       setSubmission({
@@ -172,26 +161,35 @@ function action(fn, name) {
         clear,
         retry
       });
+      drop2();
+      const stale = typeof options.invalidates === "function" ? options.invalidates(result) : options.invalidates;
+      for (const key of stale ?? []) revalidate(key);
       return result;
     } catch (error) {
-      setSubmission({
+      const failed = {
         input,
         error,
         pending: false,
         clear,
         retry
-      });
+      };
+      setSubmission(failed);
+      settle(failed);
       throw error;
     }
   };
   submit.url = actionUrl;
-  submit.with = (args) => action((...a) => fn(args, ...a), name);
+  submit.with = (args) => action((...a) => fn(args, ...a), name, options);
   return submit;
 }
 function useSubmission(actionFn) {
   const [submission] = getSubmissionSignal(actionFn.url);
   return submission;
 }
+function useSubmissions(actionFn) {
+  const [submissions] = getSubmissionsSignal(actionFn.url);
+  return submissions;
+}
 function useAction(actionFn) {
   return actionFn;
 }
@@ -207,8 +205,10 @@ export {
   action,
   cache,
   createAsync,
+  onRevalidate,
   revalidate,
   useAction,
   useRouteData,
-  useSubmission
+  useSubmission,
+  useSubmissions
 };