@fluixi/core 1.0.0-alpha.94 → 1.0.0-alpha.96

package/dist/src/cdn/{chunk-7XM7Q5VR.mjs → chunk-RKBFEFZP.mjs}

@@ -84,6 +84,64 @@ import {
 import { createContext as createContext2, useContext as useContext2 } from "@fluixi/reactive/signal";
 import { get } from "@fluixi/utils/object";
 import { deepEqual } from "@fluixi/utils/compare";
+
+// src/lib/router/scroll.ts
+var STORE = "fx:scroll";
+var KEEP = 100;
+function keepScroll(initial) {
+  const read2 = () => {
+    try {
+      return JSON.parse(sessionStorage.getItem(STORE) ?? "{}");
+    } catch {
+      return {};
+    }
+  };
+  const positions = read2();
+  const write = () => {
+    const keys = Object.keys(positions);
+    for (const key of keys.slice(0, Math.max(0, keys.length - KEEP))) delete positions[key];
+    try {
+      sessionStorage.setItem(STORE, JSON.stringify(positions));
+    } catch {
+    }
+  };
+  let current = initial.key;
+  const save = () => {
+    if (current === void 0) return;
+    delete positions[current];
+    positions[current] = window.scrollY;
+    write();
+  };
+  const restoration = history.scrollRestoration;
+  history.scrollRestoration = "manual";
+  window.addEventListener("pagehide", save);
+  const to = (top) => window.scrollTo({ top, left: 0, behavior: "instant" });
+  const toHash = (hash) => {
+    if (!hash || hash === "#") return false;
+    const target = document.getElementById(decodeURIComponent(hash.slice(1)));
+    target?.scrollIntoView({ behavior: "instant" });
+    return target !== null;
+  };
+  return {
+    leave: save,
+    arrive(location, from) {
+      current = location.key;
+      if (location.action === "pop" || from === void 0) {
+        const y = location.key === void 0 ? void 0 : positions[location.key];
+        if (y !== void 0) to(y);
+        return;
+      }
+      if (location.action === "replace" && location.pathname === from.pathname) return;
+      if (!toHash(location.hash)) to(0);
+    },
+    dispose() {
+      window.removeEventListener("pagehide", save);
+      history.scrollRestoration = restoration;
+    }
+  };
+}
+
+// src/lib/router/index.ts
 import {
   createRouter as createCoreRouter,
   createBrowserHistory,
@@ -245,7 +303,8 @@ function getSubmissionsSignal(url) {
 }
 function action(fn, name, options = {}) {
   const actionUrl = name || fn.name || "action";
-  const submit = async (input) => {
+  const submit = async (...args) => {
+    const input = args.length > 1 ? args : args[0];
     const [, setSubmission] = getSubmissionSignal(actionUrl);
     const [, setSubmissions] = getSubmissionsSignal(actionUrl);
     let entry;
@@ -260,11 +319,10 @@ function action(fn, name, options = {}) {
     };
     const retry = () => {
       drop2();
-      return submit(input);
+      return submit(...args);
     };
     entry = {
       input,
-      // Approximate type for tracking
       pending: true,
       clear,
       retry
@@ -272,7 +330,7 @@ function action(fn, name, options = {}) {
     setSubmission(entry);
     setSubmissions((list) => [...list, entry]);
     try {
-      const result = await fn(input);
+      const result = await fn(...args);
       setSubmission({
         input,
         result,
@@ -400,14 +458,49 @@ function renderLayer(m, depth, base) {
         });
       });
     };
+    let readsLocation;
     const [resource, { refetch }] = createResource3(() => {
-      const result = loader({ params: base.params, location: base.location }, owner, () => cancelled, trackDeps);
+      const params = untrack2(base.params);
+      const location = untrack2(base.location);
+      readsLocation = false;
+      const result = loader(
+        {
+          params: () => params,
+          location: () => {
+            readsLocation = true;
+            return location;
+          }
+        },
+        owner,
+        () => cancelled,
+        trackDeps
+      );
       return router ? router.trackLoad(result) : result;
     });
-    onCleanup(onRevalidate(() => void refetch()));
+    onCleanup(
+      onRevalidate(() => {
+        if (untrack2(() => base.matched()[depth]?.route) !== m.route) return;
+        void refetch();
+      })
+    );
+    let loadedFor = untrack2(() => JSON.stringify(base.matched()[depth]?.params ?? {}));
+    let searchedFor = untrack2(() => base.location().search);
+    createEffect(() => {
+      const now = base.matched()[depth];
+      const search = base.location().search;
+      if (now?.route !== m.route) return;
+      const params = JSON.stringify(now.params ?? {});
+      const paramsMoved = params !== loadedFor;
+      const searchMoved = readsLocation !== false && search !== searchedFor;
+      loadedFor = params;
+      searchedFor = search;
+      if (paramsMoved || searchMoved) untrack2(() => void refetch());
+    });
     data = () => {
       const error = resource.error;
       if (error !== void 0 && error !== null) throw error;
+      const r = resource;
+      if (r.state === "refreshing") return r.latest;
       return resource();
     };
     Object.defineProperty(data, "loading", { get: () => resource.loading });
@@ -512,16 +605,19 @@ function buildDefaultNotFound() {
 }
 var pendingTransitionMode;
 function Router(props) {
-  const history = props.history ?? createBrowserHistory();
+  const history2 = props.history ?? createBrowserHistory();
   const router = createCoreRouter({
     routes: props.routes,
     base: props.base,
-    history
+    history: history2
   });
   const [state, setState] = createSignal2(router.state());
   const [navigating, setNavigating] = createSignal2(false);
   const [loads, setLoads] = createSignal2(0);
   let navigationId = 0;
+  const scroll = history2.window ? keepScroll(router.state().location) : void 0;
+  let arriving = scroll ? { id: 0, location: router.state().location, from: void 0 } : null;
+  const [arrived, setArrived] = createSignal2(0);
   const takeMode = () => {
     const mode = pendingTransitionMode ?? (props.transition ?? "auto");
     pendingTransitionMode = void 0;
@@ -531,6 +627,10 @@ function Router(props) {
     const id = ++navigationId;
     const mode = takeMode();
     setNavigating(true);
+    if (scroll) {
+      scroll.leave();
+      arriving = { id, location: next.location, from: untrack2(state).location };
+    }
     const prepared = prepareComponents(
       (next.match?.matched ?? []).map((m) => m.component).filter(Boolean)
     );
@@ -538,6 +638,7 @@ function Router(props) {
       setState(next);
       const flushed = flush();
       if (id === navigationId) setNavigating(false);
+      if (scroll) setArrived(id);
       return flushed;
     };
     if (!prepared) {
@@ -551,6 +652,7 @@ function Router(props) {
   });
   onCleanup(() => {
     unsub();
+    scroll?.dispose();
     router.destroy();
     navigationId++;
   });
@@ -573,6 +675,19 @@ function Router(props) {
       return result;
     }
   };
+  if (scroll) {
+    const nextFrame = typeof requestAnimationFrame === "function" ? requestAnimationFrame : (fn) => setTimeout(fn, 0);
+    createEffect(() => {
+      const id = arrived();
+      if (ctx.isRouting()) return;
+      const next = arriving;
+      if (!next || next.id !== id || id !== navigationId) return;
+      arriving = null;
+      nextFrame(() => {
+        if (id === navigationId) scroll.arrive(next.location, next.from);
+      });
+    });
+  }
   const root = {
     depth: -1,
     matched,
@@ -788,7 +903,7 @@ function Link(props) {
   return a;
 }
 var A = Link;
-function Form(props) {
+function ActionForm(props) {
   const action2 = props.action;
   const cls = props.className ?? props.class;
   const url = action2.url ?? "";
@@ -862,7 +977,7 @@ export {
   useRouteData,
   Link,
   A,
-  Form,
+  ActionForm,
   preloadRoutes,
   createMemoryHistory,
   createBrowserHistory2 as createBrowserHistory,

package/dist/src/cdn/core.cjs

@@ -184,6 +184,68 @@ var init_transition = __esm({
   }
 });
 
+// src/lib/router/scroll.ts
+function keepScroll(initial) {
+  const read2 = () => {
+    try {
+      return JSON.parse(sessionStorage.getItem(STORE) ?? "{}");
+    } catch {
+      return {};
+    }
+  };
+  const positions = read2();
+  const write = () => {
+    const keys = Object.keys(positions);
+    for (const key of keys.slice(0, Math.max(0, keys.length - KEEP))) delete positions[key];
+    try {
+      sessionStorage.setItem(STORE, JSON.stringify(positions));
+    } catch {
+    }
+  };
+  let current = initial.key;
+  const save = () => {
+    if (current === void 0) return;
+    delete positions[current];
+    positions[current] = window.scrollY;
+    write();
+  };
+  const restoration = history.scrollRestoration;
+  history.scrollRestoration = "manual";
+  window.addEventListener("pagehide", save);
+  const to = (top) => window.scrollTo({ top, left: 0, behavior: "instant" });
+  const toHash = (hash) => {
+    if (!hash || hash === "#") return false;
+    const target = document.getElementById(decodeURIComponent(hash.slice(1)));
+    target?.scrollIntoView({ behavior: "instant" });
+    return target !== null;
+  };
+  return {
+    leave: save,
+    arrive(location, from) {
+      current = location.key;
+      if (location.action === "pop" || from === void 0) {
+        const y = location.key === void 0 ? void 0 : positions[location.key];
+        if (y !== void 0) to(y);
+        return;
+      }
+      if (location.action === "replace" && location.pathname === from.pathname) return;
+      if (!toHash(location.hash)) to(0);
+    },
+    dispose() {
+      window.removeEventListener("pagehide", save);
+      history.scrollRestoration = restoration;
+    }
+  };
+}
+var STORE, KEEP;
+var init_scroll = __esm({
+  "src/lib/router/scroll.ts"() {
+    "use strict";
+    STORE = "fx:scroll";
+    KEEP = 100;
+  }
+});
+
 // src/lib/router/data.ts
 function onRevalidate(listener) {
   revalidationListeners.add(listener);
@@ -255,7 +317,8 @@ function getSubmissionsSignal(url) {
 }
 function action(fn, name, options = {}) {
   const actionUrl = name || fn.name || "action";
-  const submit = async (input) => {
+  const submit = async (...args) => {
+    const input = args.length > 1 ? args : args[0];
     const [, setSubmission] = getSubmissionSignal(actionUrl);
     const [, setSubmissions] = getSubmissionsSignal(actionUrl);
     let entry;
@@ -270,11 +333,10 @@ function action(fn, name, options = {}) {
     };
     const retry = () => {
       drop2();
-      return submit(input);
+      return submit(...args);
     };
     entry = {
       input,
-      // Approximate type for tracking
       pending: true,
       clear,
       retry
@@ -282,7 +344,7 @@ function action(fn, name, options = {}) {
     setSubmission(entry);
     setSubmissions((list) => [...list, entry]);
     try {
-      const result = await fn(input);
+      const result = await fn(...args);
       setSubmission({
         input,
         result,
@@ -356,7 +418,7 @@ var init_data = __esm({
 var router_exports = {};
 __export(router_exports, {
   A: () => A,
-  Form: () => Form,
+  ActionForm: () => ActionForm,
   Link: () => Link,
   Outlet: () => Outlet,
   Redirect: () => Redirect,
@@ -414,14 +476,49 @@ function renderLayer(m, depth, base) {
         });
       });
     };
+    let readsLocation;
     const [resource, { refetch }] = (0, import_signal14.createResource)(() => {
-      const result = loader({ params: base.params, location: base.location }, owner, () => cancelled, trackDeps);
+      const params = (0, import_signal14.untrack)(base.params);
+      const location = (0, import_signal14.untrack)(base.location);
+      readsLocation = false;
+      const result = loader(
+        {
+          params: () => params,
+          location: () => {
+            readsLocation = true;
+            return location;
+          }
+        },
+        owner,
+        () => cancelled,
+        trackDeps
+      );
       return router ? router.trackLoad(result) : result;
     });
-    (0, import_signal14.onCleanup)(onRevalidate(() => void refetch()));
+    (0, import_signal14.onCleanup)(
+      onRevalidate(() => {
+        if ((0, import_signal14.untrack)(() => base.matched()[depth]?.route) !== m.route) return;
+        void refetch();
+      })
+    );
+    let loadedFor = (0, import_signal14.untrack)(() => JSON.stringify(base.matched()[depth]?.params ?? {}));
+    let searchedFor = (0, import_signal14.untrack)(() => base.location().search);
+    (0, import_signal14.createEffect)(() => {
+      const now = base.matched()[depth];
+      const search = base.location().search;
+      if (now?.route !== m.route) return;
+      const params = JSON.stringify(now.params ?? {});
+      const paramsMoved = params !== loadedFor;
+      const searchMoved = readsLocation !== false && search !== searchedFor;
+      loadedFor = params;
+      searchedFor = search;
+      if (paramsMoved || searchMoved) (0, import_signal14.untrack)(() => void refetch());
+    });
     data = () => {
       const error = resource.error;
       if (error !== void 0 && error !== null) throw error;
+      const r = resource;
+      if (r.state === "refreshing") return r.latest;
       return resource();
     };
     Object.defineProperty(data, "loading", { get: () => resource.loading });
@@ -525,16 +622,19 @@ function buildDefaultNotFound() {
   return el;
 }
 function Router(props) {
-  const history = props.history ?? (0, import_router.createBrowserHistory)();
+  const history2 = props.history ?? (0, import_router.createBrowserHistory)();
   const router = (0, import_router.createRouter)({
     routes: props.routes,
     base: props.base,
-    history
+    history: history2
   });
   const [state, setState] = (0, import_signal14.createSignal)(router.state());
   const [navigating, setNavigating] = (0, import_signal14.createSignal)(false);
   const [loads, setLoads] = (0, import_signal14.createSignal)(0);
   let navigationId = 0;
+  const scroll = history2.window ? keepScroll(router.state().location) : void 0;
+  let arriving = scroll ? { id: 0, location: router.state().location, from: void 0 } : null;
+  const [arrived, setArrived] = (0, import_signal14.createSignal)(0);
   const takeMode = () => {
     const mode = pendingTransitionMode ?? (props.transition ?? "auto");
     pendingTransitionMode = void 0;
@@ -544,6 +644,10 @@ function Router(props) {
     const id = ++navigationId;
     const mode = takeMode();
     setNavigating(true);
+    if (scroll) {
+      scroll.leave();
+      arriving = { id, location: next.location, from: (0, import_signal14.untrack)(state).location };
+    }
     const prepared = prepareComponents(
       (next.match?.matched ?? []).map((m) => m.component).filter(Boolean)
     );
@@ -551,6 +655,7 @@ function Router(props) {
       setState(next);
       const flushed = (0, import_signal14.flush)();
       if (id === navigationId) setNavigating(false);
+      if (scroll) setArrived(id);
       return flushed;
     };
     if (!prepared) {
@@ -564,6 +669,7 @@ function Router(props) {
   });
   (0, import_signal14.onCleanup)(() => {
     unsub();
+    scroll?.dispose();
     router.destroy();
     navigationId++;
   });
@@ -586,6 +692,19 @@ function Router(props) {
       return result;
     }
   };
+  if (scroll) {
+    const nextFrame = typeof requestAnimationFrame === "function" ? requestAnimationFrame : (fn) => setTimeout(fn, 0);
+    (0, import_signal14.createEffect)(() => {
+      const id = arrived();
+      if (ctx.isRouting()) return;
+      const next = arriving;
+      if (!next || next.id !== id || id !== navigationId) return;
+      arriving = null;
+      nextFrame(() => {
+        if (id === navigationId) scroll.arrive(next.location, next.from);
+      });
+    });
+  }
   const root = {
     depth: -1,
     matched,
@@ -781,7 +900,7 @@ function Link(props) {
   if (linkChildren != null) (0, import_dom16.insert)(a, linkChildren);
   return a;
 }
-function Form(props) {
+function ActionForm(props) {
   const action2 = props.action;
   const cls = props.className ?? props.class;
   const url = action2.url ?? "";
@@ -829,6 +948,7 @@ var init_router = __esm({
     import_signal15 = require("@fluixi/reactive/signal");
     import_object = require("@fluixi/utils/object");
     import_compare = require("@fluixi/utils/compare");
+    init_scroll();
     import_router = require("@fluixi/router");
     init_data();
     import_router2 = require("@fluixi/router");
@@ -976,7 +1096,7 @@ var import_signal6 = require("@fluixi/reactive/signal");
 var import_dom = require("@fluixi/dom");
 
 // src/version.generated.ts
-var VERSION = "1.0.0-alpha.94";
+var VERSION = "1.0.0-alpha.96";
 
 // src/lib/render/versions.ts
 var import_dom2 = require("@fluixi/dom");
@@ -1432,7 +1552,7 @@ async function startClient(App, options = {}) {
       }
       deserializeHydrationData();
       setHydrating(true);
-      (0, import_dom17.hydrate)(rootOf(App), container);
+      (0, import_dom17.hydrate)(() => rootOf(App), container);
       replayEvents();
     } finally {
       (0, import_dom17.endAppHydration)();

package/dist/src/cdn/core.mjs

@@ -20,7 +20,7 @@ import {
   useParams,
   useRouter,
   useSearchParams
-} from "./chunk-7XM7Q5VR.mjs";
+} from "./chunk-RKBFEFZP.mjs";
 
 // src/lib/index.ts
 import {
@@ -54,7 +54,7 @@ import { createRoot as createRoot2 } from "@fluixi/reactive/signal";
 import { registerCoreVersion } from "@fluixi/dom";
 
 // src/version.generated.ts
-var VERSION = "1.0.0-alpha.94";
+var VERSION = "1.0.0-alpha.96";
 
 // src/lib/render/versions.ts
 import { stampVersions, warnOnVersionSkew, versions } from "@fluixi/dom";
@@ -574,12 +574,12 @@ async function startClient(App, options = {}) {
     beginAppHydration();
     try {
       if (options.routes && options.routes.length) {
-        const { preloadRoutes } = await import("./router-VOY43YNM.mjs");
+        const { preloadRoutes } = await import("./router-V2THK27H.mjs");
         await preloadRoutes(options.routes, window.location.pathname);
       }
       deserializeHydrationData();
       setHydrating(true);
-      domHydrate(rootOf(App), container);
+      domHydrate(() => rootOf(App), container);
       replayEvents();
     } finally {
       endAppHydration();

package/dist/src/cdn/{router-VOY43YNM.mjs → router-V2THK27H.mjs}

@@ -1,6 +1,6 @@
 import {
   A,
-  Form,
+  ActionForm,
   Link,
   Outlet,
   Redirect,
@@ -34,10 +34,10 @@ import {
   useSearchParams,
   useSubmission,
   useSubmissions
-} from "./chunk-7XM7Q5VR.mjs";
+} from "./chunk-RKBFEFZP.mjs";
 export {
   A,
-  Form,
+  ActionForm,
   Link,
   Outlet,
   Redirect,