@solidjs/router 2.0.0-next.36 → 2.0.0-next.38

package/dist/routers/scrollRestoration.d.ts

@@ -1,4 +1,3 @@
-import type { RouterContext } from "../types.js";
 import type { RouterHistory } from "./history.js";
 /**
  * Explicit scroll restoration for back/forward navigation. The browser's
@@ -13,7 +12,7 @@ import type { RouterHistory } from "./history.js";
  * so restoration survives reloads, which `scrollRestoration = "manual"`
  * otherwise disables.
  *
- * Restoration is a single scroll once routing settles — the same strategy
+ * Restoration is a single scroll once the traversal 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
@@ -23,13 +22,38 @@ import type { RouterHistory } from "./history.js";
  * 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.
+ *
+ * A server-rendered document load is the exception: the browser restores it
+ * natively once the document — streamed boundaries included — has loaded,
+ * which a restore at the first client flush cannot match. So an entry is
+ * handed back to the browser (`auto`) whenever its document may unload
+ * (pagehide), and a hydrating router arriving on a handed-back entry leaves
+ * the restore to the browser: it does not scroll, and it takes the entry back
+ * (`manual`) only after load or at the first client navigation, whichever
+ * comes first. A programmatic scroll during the load cancels the native
+ * restore in Firefox and WebKit, and WebKit restores just after the load
+ * event, so a `manual` write before then — inside a load listener included —
+ * suppresses it; the write waits a task. Handed-back depths are tracked here
+ * rather than read from `history.scrollRestoration`, which Firefox reports as
+ * the mode before pagehide after a reload. An entry this router pushed and
+ * never handed back stays `manual` and gets no native restore, so the router
+ * restores it as on a client-rendered load.
  */
-export declare function createScrollRestoration(): {
-    /** When the adapter notifies a traversal: mark the target for restoration. */
+export declare function createScrollRestoration(hydrating?: boolean): {
+    /**
+     * When the adapter notifies a traversal: mark the target and restore once
+     * the transition carrying it settles. The adapter notifies right before
+     * the location write, in the same tick, so the settle is that write's —
+     * a same-URL traversal included, which no location key would see.
+     */
     onPop(): void;
+    /** The initial page settled: restore a reload/back_forward arrival. */
+    settled: () => void;
+    /** Before a client navigation writes history: the entry it creates copies the current mode. */
+    beforeWrite: () => void;
     /** After a push: forward entries died, and this depth may be reused. */
     onPush(): void;
-    create(router: RouterContext): void;
+    create(): void;
 };
 export type ScrollRestoration = ReturnType<typeof createScrollRestoration>;
 /**

package/dist/routers/scrollRestoration.js

@@ -1,6 +1,7 @@
-import { createEffect, onCleanup } from "solid-js";
+import { onCleanup, onSettled, runWithOwner } from "solid-js";
 import { bindEvent, saveCurrentDepth } from "./history.js";
 const STORAGE_KEY = "solid-router:scroll";
+const AUTO_KEY = "solid-router:scroll-auto";
 /**
  * Explicit scroll restoration for back/forward navigation. The browser's
  * native same-document heuristic is unreliable for suspense-driven rendering:
@@ -14,7 +15,7 @@ const STORAGE_KEY = "solid-router:scroll";
  * so restoration survives reloads, which `scrollRestoration = "manual"`
  * otherwise disables.
  *
- * Restoration is a single scroll once routing settles — the same strategy
+ * Restoration is a single scroll once the traversal 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
@@ -24,18 +25,53 @@ const STORAGE_KEY = "solid-router:scroll";
  * 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.
+ *
+ * A server-rendered document load is the exception: the browser restores it
+ * natively once the document — streamed boundaries included — has loaded,
+ * which a restore at the first client flush cannot match. So an entry is
+ * handed back to the browser (`auto`) whenever its document may unload
+ * (pagehide), and a hydrating router arriving on a handed-back entry leaves
+ * the restore to the browser: it does not scroll, and it takes the entry back
+ * (`manual`) only after load or at the first client navigation, whichever
+ * comes first. A programmatic scroll during the load cancels the native
+ * restore in Firefox and WebKit, and WebKit restores just after the load
+ * event, so a `manual` write before then — inside a load listener included —
+ * suppresses it; the write waits a task. Handed-back depths are tracked here
+ * rather than read from `history.scrollRestoration`, which Firefox reports as
+ * the mode before pagehide after a reload. An entry this router pushed and
+ * never handed back stays `manual` and gets no native restore, so the router
+ * restores it as on a client-rendered load.
  */
-export function createScrollRestoration() {
-    window.history.scrollRestoration = "manual";
+export function createScrollRestoration(hydrating) {
+    const h = window.history;
     // the current entry needs its depth stamp for captures to have a key, even
     // if something replaced history.state after the adapter stamped it
     saveCurrentDepth();
+    const depth = () => window.history.state && window.history.state._depth;
     let positions = {};
+    let handedBack = {};
     try {
         positions = JSON.parse(sessionStorage.getItem(STORAGE_KEY)) || {};
+        handedBack = JSON.parse(sessionStorage.getItem(AUTO_KEY)) || {};
     }
     catch { }
-    const depth = () => window.history.state && window.history.state._depth;
+    const manual = () => {
+        h.scrollRestoration = "manual";
+        const d = depth();
+        if (d != null)
+            delete handedBack[d];
+    };
+    const d = depth();
+    let deferred = !!hydrating && (h.scrollRestoration === "auto" || (d != null && !!handedBack[d]));
+    if (!deferred)
+        manual();
+    const claim = () => {
+        if (!deferred)
+            return;
+        deferred = false;
+        manual();
+    };
+    let timer;
     let programmatic = false;
     let pending;
     const unbind = [
@@ -48,11 +84,22 @@ export function createScrollRestoration() {
                 pending = undefined;
         }),
         bindEvent(window, "pagehide", () => {
+            h.scrollRestoration = "auto";
+            const d = depth();
+            if (d != null)
+                handedBack[d] = 1;
             try {
                 sessionStorage.setItem(STORAGE_KEY, JSON.stringify(positions));
+                sessionStorage.setItem(AUTO_KEY, JSON.stringify(handedBack));
             }
             catch { }
-        })
+        }),
+        bindEvent(window, "pageshow", e => {
+            if (e.persisted)
+                manual();
+        }),
+        bindEvent(window, "load", () => deferred && (timer = setTimeout(claim))),
+        () => clearTimeout(timer)
     ];
     const restore = () => {
         if (pending == null)
@@ -68,43 +115,40 @@ export function createScrollRestoration() {
         programmatic = false;
     };
     return {
-        /** When the adapter notifies a traversal: mark the target for restoration. */
+        /**
+         * When the adapter notifies a traversal: mark the target and restore once
+         * the transition carrying it settles. The adapter notifies right before
+         * the location write, in the same tick, so the settle is that write's —
+         * a same-URL traversal included, which no location key would see.
+         */
         onPop() {
+            claim();
             pending = depth();
+            runWithOwner(null, () => onSettled(restore));
         },
+        /** The initial page settled: restore a reload/back_forward arrival. */
+        settled: () => restore(),
+        /** Before a client navigation writes history: the entry it creates copies the current mode. */
+        beforeWrite: claim,
         /** After a push: forward entries died, and this depth may be reused. */
         onPush() {
             const d = depth();
-            if (d != null)
+            if (d != null) {
                 for (const k in positions)
                     +k >= d && delete positions[k];
+                for (const k in handedBack)
+                    +k >= d && delete handedBack[k];
+            }
         },
-        create(router) {
-            // Restore once the traversal has settled: key on the location (a fully
-            // synchronous pop commits without isRouting ever flipping) and on
-            // 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 });
+        create() {
             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
+            // navigation starts a new one and belongs at the top); the router calls
+            // `settled` once the initial page has; a deferred arrival is the browser's
+            if (deferred) {
+                document.readyState === "complete" && claim();
+                return;
+            }
             const [nav] = performance.getEntriesByType?.("navigation");
             if (nav && nav.type !== "navigate")
                 pending = depth();
@@ -121,6 +165,7 @@ export function withScrollRestoration(history, restoration) {
     return {
         ...history,
         set(next) {
+            restoration.beforeWrite();
             history.set(next);
             next.replace || restoration.onPush();
         },

package/dist/routing.d.ts

@@ -54,6 +54,8 @@ export declare const useLocation: <S = unknown>() => Location<S>;
 /**
  * Retrieves a signal that indicates whether the router is currently processing a navigation.
  * Useful for showing pending navigation state while the next route and its data settle.
+ * This is the way to read routing state: `RouterContext` doesn't carry `isRouting`.
+ * For the in-flight destination, read the location with Solid's `isPending`/`latest`.
  *
  * @example
  * ```js
@@ -102,21 +104,6 @@ export declare const useMatch: <S extends string | TypedPath>(path: () => S, mat
  * ```
  */
 export declare const useRouteMatches: () => () => RouteMatch[];
-/**
- * `usePreloadRoute` returns a function for warming a route by hand — the same
- * work link hover/focus intent triggers automatically: the matched routes'
- * lazy components load, and with `preloadData` their `preload` functions run.
- *
- * @example
- * ```js
- * const preload = usePreloadRoute();
- *
- * preload(paths.users(2).settings, { preloadData: true });
- * ```
- */
-export declare const usePreloadRoute: () => (url: string | URL | TypedPath, options?: {
-    preloadData?: boolean;
-}) => void;
 /**
  * Retrieves a reactive, store-like object containing the current route path parameters as defined in the Route.
  *
@@ -177,7 +164,11 @@ export interface LinkState {
      * parameter order and hash aside — what `aria-current="page"` reflects.
      */
     current: () => boolean;
-    /** This link is the target of an in-flight navigation. Styling: `data-pending`. */
+    /**
+     * This link is the target of an in-flight navigation (back/forward
+     * excluded). Works without the `pendingLinks` plugin, which only adds
+     * `data-pending` to plain anchors.
+     */
     pending: () => boolean;
 }
 /**
@@ -250,6 +241,7 @@ export declare function provideFlightConsumer(factory: (router: RouterContext) =
 type FlashDecoder = (cookieHeader: string | null) => Promise<FlashSubmission | undefined>;
 export declare function provideFlashDecoder(decoder: FlashDecoder): void;
 export declare function getIntent(): Intent | undefined;
+export declare function setPreloadIntent(intent: Intent | undefined): Intent | undefined;
 export declare function getInPreloadFn(): boolean;
 export declare function setInPreloadFn(value: boolean): void;
 export declare function createRouterContext(integration: RouterIntegration, branches: () => Branch[], getContext?: () => any, options?: {

package/dist/routing.js

@@ -2,10 +2,11 @@ import { runWithOwner } from "solid-js";
 // standalone import: `DEV` is undefined in solid's production build, so app
 // bundlers fold `DEV &&` diagnostics out of shipped bundles
 import { DEV } from "solid-js";
-import { createComponent, createContext, createMemo, createSignal, getOwner, isPending, latest, NotReadyError, untrack, useContext } from "solid-js";
+import { createComponent, createContext, createMemo, createSignal, getOwner, NotReadyError, untrack, useContext } from "solid-js";
 import { clearFlashCookie, getRequestEvent, hasFlashCookie, isServer } from "@solidjs/web";
-import { mockBase, createMemoObject, extractSearchParams, invariant, matchLink, resolvePath, createMatcher, joinPaths, scoreRoute, mergeSearchString, expandOptionals, validateSearch } from "./utils.js";
+import { mockBase, createMemoObject, extractSearchParams, invariant, linkMatcher, resolvePath, createMatcher, joinPaths, scoreRoute, mergeSearchString, expandOptionals, validateSearch } from "./utils.js";
 import { HREF } from "./paths.js";
+import { linkPending, routingState } from "./pending.js";
 import { serverRouteOf, serverRouteArgs, serverRouteArgsEqual } from "./serverRouteShared.js";
 const MAX_REDIRECTS = 100;
 /**
@@ -81,6 +82,8 @@ export const useLocation = () => useRouter().location;
 /**
  * Retrieves a signal that indicates whether the router is currently processing a navigation.
  * Useful for showing pending navigation state while the next route and its data settle.
+ * This is the way to read routing state: `RouterContext` doesn't carry `isRouting`.
+ * For the in-flight destination, read the location with Solid's `isPending`/`latest`.
  *
  * @example
  * ```js
@@ -93,7 +96,7 @@ export const useLocation = () => useRouter().location;
  * );
  * ```
  */
-export const useIsRouting = () => useRouter().isRouting;
+export const useIsRouting = () => routingState(useRouter());
 /**
  * `useMatch` takes an accessor that returns the path and creates a `Memo` that returns match information if the current path matches the provided path.
  * Useful for determining if a given path matches the current route.
@@ -145,22 +148,6 @@ export const useRouteMatches = () => {
     // return a copy so user mutations (eg. `.reverse()`) can't corrupt router state
     return () => router.matches().slice();
 };
-/**
- * `usePreloadRoute` returns a function for warming a route by hand — the same
- * work link hover/focus intent triggers automatically: the matched routes'
- * lazy components load, and with `preloadData` their `preload` functions run.
- *
- * @example
- * ```js
- * const preload = usePreloadRoute();
- *
- * preload(paths.users(2).settings, { preloadData: true });
- * ```
- */
-export const usePreloadRoute = () => {
-    const pre = useRouter().preloadRoute;
-    return (url, options = {}) => pre(url instanceof URL ? url : new URL(String(url), mockBase), options.preloadData);
-};
 export function useParams(_path) {
     return useRoute().params;
 }
@@ -228,7 +215,7 @@ export const useLinkState = (href, options = {}) => {
     const location = router.location;
     const to = useResolvedPath(() => String(href()));
     const base = router.base.path();
-    const state = createMemo(() => matchLink(location, to(), base, options.end));
+    const state = createMemo(() => linkMatcher(location, base, options.end)(to()));
     return {
         active: createMemo(() => state().active),
         current: createMemo(() => state().current),
@@ -237,10 +224,7 @@ export const useLinkState = (href, options = {}) => {
         // observe the committed location during a transition
         pending: createMemo(() => {
             state(); // location dependency: mid-flight target swaps recompute
-            return (router.isRouting() &&
-                !!router.pendingTarget &&
-                matchLink({ pathname: router.pendingTarget.value, search: "" }, to(), base, options.end)
-                    .active);
+            return linkPending(router, to(), base, options.end);
         })
     };
 };
@@ -551,6 +535,11 @@ let preloadIntent;
 export function getIntent() {
     return preloadIntent || useOptionalContext(RouterContextObj)?.intent?.();
 }
+export function setPreloadIntent(intent) {
+    const prev = preloadIntent;
+    preloadIntent = intent;
+    return prev;
+}
 let inPreloadFn = false;
 export function getInPreloadFn() {
     return inPreloadFn;
@@ -577,7 +566,11 @@ export function createRouterContext(integration, branches, getContext, options =
             _navigation: isServer ? undefined : 1
         });
     }
-    const location = createLocation(() => source().value, () => source().state, utils.queryWrapper);
+    // The flushed world — what `latest(source)` answers — as the location's own
+    // memo sees it: it recomputes under the transition that carries a write,
+    // never for a write of this same tick (A28).
+    let flushed = initialSource;
+    const location = createLocation(() => (flushed = source()).value, () => source().state, utils.queryWrapper);
     // The flash cookie is consumed eagerly: its one-shot clear (Set-Cookie)
     // must be appended before streaming flushes the response headers, and an
     // unread outcome must not haunt a later request's render. Only detection
@@ -643,7 +636,9 @@ export function createRouterContext(integration, branches, getContext, options =
     // NotReadyError's source must be a reactive async node, not the raw
     // Promise. Keep one reader per boundary for this router owner so rejection
     // is delivered through the graph's error channel and resolution wakes the
-    // parked matches computation.
+    // parked matches computation. `transparent`: the reader exists on the
+    // client only (the server parks `matches` on the promise directly), so it
+    // must not take a hydration id the server never allocated.
     const routerOwner = getOwner();
     const lazyReaders = new WeakMap();
     const readLazySubtree = (record) => {
@@ -652,16 +647,14 @@ export function createRouterContext(integration, branches, getContext, options =
             read = runWithOwner(routerOwner, () => createMemo(() => {
                 const result = resolveLazySubtree(record);
                 return result instanceof Promise ? result.then(() => undefined) : undefined;
-            }, DEV && { name: "lazyRoutes" }));
+            }, { transparent: true, ...(DEV && { name: "lazyRoutes" }) }));
             lazyReaders.set(record, read);
         }
         return read();
     };
+    const matchPath = (pathname) => getRouteMatches(branches(), options.transformUrl ? options.transformUrl(pathname) : pathname);
     const matches = createMemo(() => {
-        const pathname = typeof options.transformUrl === "function"
-            ? options.transformUrl(location.pathname)
-            : location.pathname;
-        const m = getRouteMatches(branches(), pathname);
+        const m = matchPath(location.pathname);
         // An unresolved lazy subtree parks readers on not-ready semantics — the
         // navigation transition (or the SSR stream) holds until the table lands.
         // NotReadyError (not a returned promise) because a match chain is full
@@ -688,30 +681,16 @@ export function createRouterContext(integration, branches, getContext, options =
         }
         return m;
     }, DEV && { name: "matches" });
-    const routingPending = createMemo(() => isPending(() => {
-        try {
-            matches();
-        }
-        catch (e) {
-            if (e instanceof NotReadyError)
-                throw e;
-        }
-        location.search;
-        location.hash;
-    }), DEV && { name: "routingPending" });
-    const isRouting = () => routingPending() || isPending(source);
+    const headedLocation = () => (isServer ? untrack(source) : flushed);
+    // A flushed navigation write whose settle has not run is still in flight.
+    const unsettled = (change) => change._navigation !== undefined && !!integration.settled && !integration.settled(change);
     const transitionIntent = () => {
-        if (!isPending(source))
+        const head = headedLocation();
+        if (!unsettled(head))
             return;
-        const navigation = latest(source)._navigation;
+        const navigation = head._navigation;
         return navigation === -1 ? "native" : navigation && navigation > 0 ? "navigate" : undefined;
     };
-    const pendingNavigation = () => {
-        if (!isRouting())
-            return;
-        const target = latest(source);
-        return target._navigation && target._navigation > 0 ? target : undefined;
-    };
     const buildParams = () => mergeParams(matches());
     const wrapParams = utils.paramsWrapper
         ? (getParams) => utils.paramsWrapper(getParams, branches)
@@ -731,17 +710,16 @@ export function createRouterContext(integration, branches, getContext, options =
         location,
         params,
         wrapParams,
-        isRouting,
         intent: transitionIntent,
-        get pendingTarget() {
-            return pendingNavigation();
-        },
+        _source: source,
+        _owner: routerOwner,
+        _routeOwner: getContext,
+        _match: matchPath,
         renderPath,
         parsePath,
         navigatorFactory,
         matches,
         beforeLeave,
-        preloadRoute,
         singleFlight: options.singleFlight === undefined ? true : options.singleFlight,
         get submissions() {
             return (submissions ||= createSignal(isServer ? initSubmissions() : [], { ownedWrite: true }));
@@ -795,10 +773,10 @@ export function createRouterContext(integration, branches, getContext, options =
             // the destination the leave guard is told all read it. A write of this
             // same tick is not in it (A28) — see `compose` below.
             //
-            // A redirect hop: the previous navigation is still pending, or has landed
-            // but not yet reached history (a guard redirecting in the landing flush
-            // — its destination was never shown either way).
-            const headed = latest(source);
+            // A redirect hop: the previous navigation's write has not settled — it
+            // is still held, or a guard is redirecting in its landing flush — so its
+            // destination was never shown.
+            const headed = headedLocation();
             // A composed target (`setSearchParams`) is a function of where the
             // router is heading, an unflushed write of this tick included. Only
             // the integration's functional updater serves that value, so the
@@ -834,7 +812,7 @@ export function createRouterContext(integration, branches, getContext, options =
             const navigationDepth = !isServer &&
                 headed._navigation !== undefined &&
                 headed._navigation > 0 &&
-                (isPending(source) || integration.inflight?.() === headed)
+                unsettled(headed)
                 ? headed._navigation
                 : 0;
             if (navigationDepth >= MAX_REDIRECTS) {
@@ -870,72 +848,6 @@ export function createRouterContext(integration, branches, getContext, options =
         route = route || useOptionalContext(RouteContextObj) || baseRoute;
         return ((to, options) => navigateFromRoute(route, to, options));
     }
-    function preloadRoute(url, preloadData) {
-        const next = getRouteMatches(branches(), url.pathname);
-        // An unresolved lazy subtree in the chain: the placeholder's
-        // component.preload (below) kicks the table load; once it lands,
-        // preload again so the real inner routes warm too. Preloads are
-        // speculative: a failed load (held sync throw or rejection) is ignored
-        // here — the real navigation surfaces and retries it.
-        const boundary = next.find(m => m.route.lazy && !m.route.lazy.resolved);
-        if (boundary) {
-            try {
-                resolveLazySubtree(boundary.route.lazy).then(() => preloadRoute(url, preloadData), () => { });
-            }
-            catch { }
-        }
-        // Data preloads run only for levels a navigation would mount fresh or
-        // reuse with changed inputs: this level's params, and search as the
-        // declared schema's output or else the raw string. Navigation itself is
-        // already this selective (a matching level is reused and re-reads through
-        // tracked params), so an unchanged level has nothing new to warm.
-        let current;
-        try {
-            current = untrack(matches);
-        }
-        catch { }
-        const query = extractSearchParams(url);
-        const inputs = (p, q, s, r) => {
-            const a = serverRouteArgs(r, p, q);
-            a.search === undefined && (a.search = s);
-            return a;
-        };
-        const prevIntent = preloadIntent;
-        preloadIntent = "preload";
-        for (let match in next) {
-            const { route, params } = next[match];
-            const { preload, component } = route;
-            component?.preload?.();
-            const now = current && current[match];
-            const unchanged = now &&
-                now.route.key === route.key &&
-                serverRouteArgsEqual(inputs(params, query, url.search, route), inputs(now.params, location.query, location.search, route));
-            inPreloadFn = true;
-            preloadData &&
-                !unchanged &&
-                runWithOwner(getContext(), () => {
-                    // A server component route's data IS its call: warm the same
-                    // query entry the render will read, under the same derived args.
-                    const server = serverRouteOf(component);
-                    server && server.call(serverRouteArgs(route, params, query));
-                    preload &&
-                        preload({
-                            params,
-                            location: {
-                                pathname: url.pathname,
-                                search: url.search,
-                                hash: url.hash,
-                                query,
-                                state: null,
-                                key: ""
-                            },
-                            intent: "preload"
-                        });
-                });
-            inPreloadFn = false;
-        }
-        preloadIntent = prevIntent;
-    }
     // Seeds the initial submission from a no-JS form post: the server
     // function runtime redirected back with the outcome in a one-shot flash
     // cookie (its default no-JS convention), consumed eagerly above and

package/dist/serverRouteComponent.js

@@ -8,7 +8,7 @@
 //   // before: a client component exists only to make the call
 //   const getStory = query(storyView, "story");
 //   component: props => {
-//     const View = dynamic(() => getStory(props.params.id));
+//     const View = dynamicComponent(() => getStory(props.params.id));
 //     return <View>{props.children}</View>;
 //   }
 //   // after
@@ -36,7 +36,7 @@
 // A server component that takes other client positions — handlers, refs,
 // named slots — has a client half, and that half is a client component; the
 // helper does not pretend otherwise. Write the wrapper for that route.
-import { dynamic } from "@solidjs/web";
+import { dynamicComponent } from "@solidjs/web";
 import { createComponent, DEV } from "solid-js";
 import { SERVER_ROUTE } from "./serverRouteShared.js";
 /**
@@ -77,8 +77,9 @@ source) {
     };
     function render(args, routeProps) {
         // The source may answer a component, a promise of one, or (a live query)
-        // successive components; `dynamic`'s memo lands each the same way.
-        const View = dynamic(() => call(args()));
+        // successive components; `dynamicComponent`'s memo lands each the same
+        // way. Never a tag, so the element runtime `dynamic` retains stays out.
+        const View = dynamicComponent(() => call(args()));
         return createComponent(View, {
             get children() {
                 return routeProps.children;