@solidjs/router 1.0.0-next.10 → 1.0.0-next.11

package/dist/fs.d.ts

@@ -0,0 +1,53 @@
+import type { RouteSectionComponent } from "./types.js";
+/** A code-split module ref: delivered as a dynamic import. */
+export interface FileRouteLazyRef<M = Record<string, unknown>> {
+    src: string;
+    import(): Promise<M>;
+}
+/** An eager module ref: its picked exports are imported statically. */
+export interface FileRouteEagerRef<M = Record<string, unknown>> {
+    require(): M;
+}
+/** The shape of a nested route-manifest entry the adapter consumes. */
+export interface FileRouteEntry {
+    path: string;
+    page?: boolean;
+    $component?: FileRouteLazyRef<any> | undefined;
+    $$route?: FileRouteEagerRef<any> | undefined;
+    children?: readonly FileRouteEntry[] | undefined;
+}
+type RouteConfigOf<E> = E extends {
+    $$route: {
+        require(): {
+            route: infer R;
+        };
+    };
+} ? R : {};
+/**
+ * One manifest entry as a route definition. `children` is a required key on
+ * purpose: an optional key infers as `C | undefined`, and that union
+ * distributes `RoutePaths` into an uncallable shape.
+ */
+export type FileRouteFrom<E> = RouteConfigOf<E> & {
+    path: E extends {
+        path: infer P extends string;
+    } ? P : never;
+    component: E extends {
+        $component: object;
+    } ? RouteSectionComponent : undefined;
+    children: E extends {
+        children: infer C extends readonly FileRouteEntry[];
+    } ? FileRoutesFrom<C> : undefined;
+};
+export type FileRoutesFrom<T extends readonly FileRouteEntry[]> = {
+    [K in keyof T]: FileRouteFrom<T[K]>;
+};
+/**
+ * Converts the nested page entries of a file-system route manifest into
+ * route definitions: `$component` refs become code-split `lazy` components
+ * (their `src` doubles as the `moduleUrl` core resolves assets and islands
+ * against), and each entry's `route` config export is spread into its
+ * definition. Pass the result to `createRouter({ routes })`.
+ */
+export declare function fileRoutes<const T extends readonly FileRouteEntry[]>(entries: T): FileRoutesFrom<T>;
+export {};

package/dist/fs.js

@@ -0,0 +1,30 @@
+import { lazy } from "solid-js";
+/**
+ * Converts the nested page entries of a file-system route manifest into
+ * route definitions: `$component` refs become code-split `lazy` components
+ * (their `src` doubles as the `moduleUrl` core resolves assets and islands
+ * against), and each entry's `route` config export is spread into its
+ * definition. Pass the result to `createRouter({ routes })`.
+ */
+export function fileRoutes(entries) {
+    const components = new Map();
+    const componentOf = (ref) => {
+        let component = components.get(ref.src);
+        if (!component) {
+            component = lazy(ref.import, ref.src);
+            components.set(ref.src, component);
+        }
+        return component;
+    };
+    const toRoute = (entry) => {
+        const config = (entry.$$route?.require().route ?? {});
+        return {
+            ...config,
+            path: entry.path,
+            component: entry.$component ? componentOf(entry.$component) : undefined,
+            info: { ...config.info, filesystem: true },
+            children: entry.children ? entry.children.map(toRoute) : undefined
+        };
+    };
+    return entries.map(toRoute);
+}

package/dist/index.js

@@ -1751,10 +1751,18 @@ const STORAGE_KEY = "solid-router:scroll";
  * scroll time (rather than at exit) stays correct through `useBeforeLeave`
  * blocked/reverted traversals. The map persists to sessionStorage on pagehide
  * so restoration survives reloads, which `scrollRestoration = "manual"`
- * otherwise disables. Restoration runs once routing settles; if the document
- * is still shorter than the target (a boundary below the fold hasn't
- * resolved), a ResizeObserver retries as content grows, cancelled by the
- * first user scroll.
+ * otherwise disables.
+ *
+ * Restoration is a single scroll once routing settles — the same strategy
+ * SvelteKit, TanStack Router and React Router use. Settling after the
+ * transition commits is what makes the offset reachable; chasing a still-
+ * growing document afterwards (a ResizeObserver re-asserting the offset as
+ * content arrives) was tried and removed: no peer router does it, an
+ * unbounded observer re-clamps the viewport to the bottom when the target is
+ * never reachable (a list that is genuinely shorter now), and scroll-induced
+ * layout changes can feed it back into itself. Content that commits after the
+ * transition settles — an image without reserved space, a boundary below the
+ * fold — keeps whatever offset the document can hold.
  */
 function createScrollRestoration() {
   window.history.scrollRestoration = "manual";
@@ -1768,19 +1776,11 @@ function createScrollRestoration() {
   const depth = () => window.history.state && window.history.state._depth;
   let programmatic = false;
   let pending;
-  let disconnect;
-  const cancelGuard = () => {
-    disconnect && disconnect();
-    disconnect = undefined;
-  };
   const unbind = [bindEvent(window, "scroll", () => {
     const d = depth();
     if (d != null) positions[d] = window.scrollY;
-    if (!programmatic) {
-      // the user took over — a pending or chasing restore would yank them
-      pending = undefined;
-      cancelGuard();
-    }
+    // the user took over — a pending restore would yank them
+    if (!programmatic) pending = undefined;
   }), bindEvent(window, "pagehide", () => {
     try {
       sessionStorage.setItem(STORAGE_KEY, JSON.stringify(positions));
@@ -1791,19 +1791,11 @@ function createScrollRestoration() {
     const y = positions[pending];
     pending = undefined;
     if (y == null) return;
-    cancelGuard();
-    const attempt = () => {
-      programmatic = true;
-      window.scrollTo(0, y);
-      programmatic = false;
-      // reachable once the document is tall enough to hold the offset
-      return document.documentElement.scrollHeight - window.innerHeight >= y;
-    };
-    if (!attempt() && typeof ResizeObserver !== "undefined") {
-      const observer = new ResizeObserver(() => attempt() && cancelGuard());
-      observer.observe(document.documentElement);
-      disconnect = () => observer.disconnect();
-    }
+    // flagged so the resulting scroll event is not mistaken for the user
+    // taking over (which cancels a pending restore)
+    programmatic = true;
+    window.scrollTo(0, y);
+    programmatic = false;
   };
   return {
     /** When the adapter notifies a traversal: mark the target for restoration. */
@@ -1821,16 +1813,24 @@ function createScrollRestoration() {
       // isRouting, which reports in-flight transitions — native pops
       // included — and holds the restore until they commit. restore() no-ops
       // unless a traversal marked a target, so push navigations are inert.
+      // `transparent` keeps the effect invisible to the hydration id scheme —
+      // same reasoning as the link-claims effect (claims.ts): this setup is
+      // client-only, so an id-consuming node here has no server counterpart
+      // and every hydration id allocated after it shifts by one child slot.
+      // The visible failure is any <Loading> content that settled before the
+      // shell flush (a cache hit, a preloaded query): its serialized value and
+      // inlined markup are keyed under the server's ids, the shifted client
+      // misses both, recomputes, and re-renders the route fresh — duplicating
+      // the server DOM and leaving it inert.
       createEffect(() => ({
         url: router.location.pathname + router.location.search + router.location.hash,
         routing: router.isRouting()
       }), current => {
         if (!current.routing) restore();
+      }, {
+        transparent: true
       });
-      onCleanup(() => {
-        unbind.forEach(u => u());
-        cancelGuard();
-      });
+      onCleanup(() => unbind.forEach(u => u()));
       // reload/back_forward document loads land on an existing entry (a fresh
       // navigation starts a new one and belongs at the top); the effect's
       // initial run performs the restore after first render

package/dist/routers/scrollRestoration.d.ts

@@ -11,10 +11,18 @@ import type { RouterHistory } from "./history.js";
  * scroll time (rather than at exit) stays correct through `useBeforeLeave`
  * blocked/reverted traversals. The map persists to sessionStorage on pagehide
  * so restoration survives reloads, which `scrollRestoration = "manual"`
- * otherwise disables. Restoration runs once routing settles; if the document
- * is still shorter than the target (a boundary below the fold hasn't
- * resolved), a ResizeObserver retries as content grows, cancelled by the
- * first user scroll.
+ * otherwise disables.
+ *
+ * Restoration is a single scroll once routing settles — the same strategy
+ * SvelteKit, TanStack Router and React Router use. Settling after the
+ * transition commits is what makes the offset reachable; chasing a still-
+ * growing document afterwards (a ResizeObserver re-asserting the offset as
+ * content arrives) was tried and removed: no peer router does it, an
+ * unbounded observer re-clamps the viewport to the bottom when the target is
+ * never reachable (a list that is genuinely shorter now), and scroll-induced
+ * layout changes can feed it back into itself. Content that commits after the
+ * transition settles — an image without reserved space, a boundary below the
+ * fold — keeps whatever offset the document can hold.
  */
 export declare function createScrollRestoration(): {
     /** When the adapter notifies a traversal: mark the target for restoration. */

package/dist/routers/scrollRestoration.js

@@ -12,10 +12,18 @@ const STORAGE_KEY = "solid-router:scroll";
  * scroll time (rather than at exit) stays correct through `useBeforeLeave`
  * blocked/reverted traversals. The map persists to sessionStorage on pagehide
  * so restoration survives reloads, which `scrollRestoration = "manual"`
- * otherwise disables. Restoration runs once routing settles; if the document
- * is still shorter than the target (a boundary below the fold hasn't
- * resolved), a ResizeObserver retries as content grows, cancelled by the
- * first user scroll.
+ * otherwise disables.
+ *
+ * Restoration is a single scroll once routing settles — the same strategy
+ * SvelteKit, TanStack Router and React Router use. Settling after the
+ * transition commits is what makes the offset reachable; chasing a still-
+ * growing document afterwards (a ResizeObserver re-asserting the offset as
+ * content arrives) was tried and removed: no peer router does it, an
+ * unbounded observer re-clamps the viewport to the bottom when the target is
+ * never reachable (a list that is genuinely shorter now), and scroll-induced
+ * layout changes can feed it back into itself. Content that commits after the
+ * transition settles — an image without reserved space, a boundary below the
+ * fold — keeps whatever offset the document can hold.
  */
 export function createScrollRestoration() {
     window.history.scrollRestoration = "manual";
@@ -30,21 +38,14 @@ export function createScrollRestoration() {
     const depth = () => window.history.state && window.history.state._depth;
     let programmatic = false;
     let pending;
-    let disconnect;
-    const cancelGuard = () => {
-        disconnect && disconnect();
-        disconnect = undefined;
-    };
     const unbind = [
         bindEvent(window, "scroll", () => {
             const d = depth();
             if (d != null)
                 positions[d] = window.scrollY;
-            if (!programmatic) {
-                // the user took over — a pending or chasing restore would yank them
+            // the user took over — a pending restore would yank them
+            if (!programmatic)
                 pending = undefined;
-                cancelGuard();
-            }
         }),
         bindEvent(window, "pagehide", () => {
             try {
@@ -60,19 +61,11 @@ export function createScrollRestoration() {
         pending = undefined;
         if (y == null)
             return;
-        cancelGuard();
-        const attempt = () => {
-            programmatic = true;
-            window.scrollTo(0, y);
-            programmatic = false;
-            // reachable once the document is tall enough to hold the offset
-            return document.documentElement.scrollHeight - window.innerHeight >= y;
-        };
-        if (!attempt() && typeof ResizeObserver !== "undefined") {
-            const observer = new ResizeObserver(() => attempt() && cancelGuard());
-            observer.observe(document.documentElement);
-            disconnect = () => observer.disconnect();
-        }
+        // flagged so the resulting scroll event is not mistaken for the user
+        // taking over (which cancels a pending restore)
+        programmatic = true;
+        window.scrollTo(0, y);
+        programmatic = false;
     };
     return {
         /** When the adapter notifies a traversal: mark the target for restoration. */
@@ -92,17 +85,23 @@ export function createScrollRestoration() {
             // isRouting, which reports in-flight transitions — native pops
             // included — and holds the restore until they commit. restore() no-ops
             // unless a traversal marked a target, so push navigations are inert.
+            // `transparent` keeps the effect invisible to the hydration id scheme —
+            // same reasoning as the link-claims effect (claims.ts): this setup is
+            // client-only, so an id-consuming node here has no server counterpart
+            // and every hydration id allocated after it shifts by one child slot.
+            // The visible failure is any <Loading> content that settled before the
+            // shell flush (a cache hit, a preloaded query): its serialized value and
+            // inlined markup are keyed under the server's ids, the shifted client
+            // misses both, recomputes, and re-renders the route fresh — duplicating
+            // the server DOM and leaving it inert.
             createEffect(() => ({
                 url: router.location.pathname + router.location.search + router.location.hash,
                 routing: router.isRouting()
             }), current => {
                 if (!current.routing)
                     restore();
-            });
-            onCleanup(() => {
-                unbind.forEach(u => u());
-                cancelGuard();
-            });
+            }, { transparent: true });
+            onCleanup(() => unbind.forEach(u => u()));
             // reload/back_forward document loads land on an existing entry (a fresh
             // navigation starts a new one and belongs at the top); the effect's
             // initial run performs the restore after first render

package/package.json

@@ -6,7 +6,7 @@
     "Ryan Turnquist"
   ],
   "license": "MIT",
-  "version": "1.0.0-next.10",
+  "version": "1.0.0-next.11",
   "homepage": "https://github.com/solidjs/solid-router#readme",
   "repository": {
     "type": "git",
@@ -23,7 +23,8 @@
       "solid": "./dist/index.jsx",
       "default": "./dist/index.js"
     },
-    "./server": "./dist/server.js"
+    "./server": "./dist/server.js",
+    "./fs": "./dist/fs.js"
   },
   "files": [
     "dist"