@effectweb/tanstack-router 0.8.0 → 0.9.0

package/README.md

@@ -6,7 +6,7 @@ EffectWeb adapter for TanStack Router Core.
 - `RootRoute` and `Route` expose TanStack's route constructors: matching, params, validated search, redirects, loaders and errors remain in the core.
 - `mountRouter(router)` owns the history subscription in an Effect scope and returns an EffectWeb `Source` of router state.
 - The store adapter batches publications and copies plain state before EffectWeb freezes it. It never freezes TanStack's internal match records.
-- The host program subscribes to that Source and renders its own matching views. Scope cleanup releases the Source, subscriptions and owned history.
+- The host program subscribes to that Source and renders its own matching views. Scope cleanup interrupts loaders, before-load hooks and preloads, settles pending navigation, and releases the Source, subscriptions and owned history. Mount each router only once.
 - `createLink(router)` returns a typed `<Link>`: `to`, `params` and `search` are checked against the route tree. It renders a real `<a href>` (middle-click, copy link and screen readers keep working) and navigates in place on plain left clicks. Pass `active` from your route model to set `aria-current="page"`.
 
 ```tsx
@@ -20,3 +20,5 @@ const Link = createLink(router);
 Prefer `<Link>` to buttons that call `navigate(path: string)`: string paths lose route typing, and buttons are not links for keyboard, assistive technology or new-tab navigation.
 
 Currently there is no JSX Outlet API, route-level view/error boundary system, SSR adapter or file-route generator. Those can build on this binding without introducing a second route matcher.
+
+Link preloading and automatic active matching are not exposed as link props. Call `router.preloadRoute(options)` explicitly when needed, and derive `active` from the route model.

package/dist/index.d.ts

@@ -6,5 +6,5 @@ export { createBrowserHistory, createMemoryHistory } from '@tanstack/history';
 /** TanStack supplies matching, loaders, search validation and typed navigation; EffectWeb owns publications. */
 export declare const createRouter: CreateRouterFn;
 /** Mount once per router in an Effect scope. The returned Source can drive an EffectWeb program or view. */
-export declare const mountRouter: <Router extends AnyRouter>(router: Router) => Effect.Effect<Source<RouterState<Router["routeTree"]>>, Error, Scope.Scope>;
+export declare const mountRouter: <Router extends AnyRouter>(router: Router) => Effect.Effect<Source<RouterState<Router['routeTree']>>, Error, Scope.Scope>;
 export { createLink, linkTarget, type LinkProps } from './link.js';

package/dist/index.js

@@ -1,106 +1,150 @@
-import { Effect } from 'effect';
-import { projectionSource } from 'effectweb/advanced';
-import { RouterCore, createNonReactiveMutableStore, createNonReactiveReadonlyStore, } from '@tanstack/router-core';
-export { BaseRoute as Route, BaseRootRoute as RootRoute, redirect, notFound, } from '@tanstack/router-core';
-export { createBrowserHistory, createMemoryHistory } from '@tanstack/history';
-// EffectWeb freezes published plain data. Copy it so TanStack can keep managing its mutable match resources.
-const snapshotCopy = (value, seen = new WeakMap()) => {
-    if (value === null || typeof value !== 'object')
-        return value;
-    const prototype = Object.getPrototypeOf(value);
-    if (!Array.isArray(value) && prototype !== Object.prototype && prototype !== null)
-        return value;
-    if (seen.has(value))
-        return seen.get(value);
-    const copy = Array.isArray(value) ? [] : {};
-    seen.set(value, copy);
-    for (const key of Reflect.ownKeys(value)) {
-        if (key === 'length' && Array.isArray(value))
-            continue;
-        const descriptor = Object.getOwnPropertyDescriptor(value, key);
-        if ('value' in descriptor)
-            Object.defineProperty(copy, key, {
-                value: snapshotCopy(descriptor.value, seen),
-                writable: true,
-                enumerable: descriptor.enumerable ?? false,
-                configurable: true,
-            });
-    }
-    return copy;
+import { Effect } from "effect";
+import { projectionSource } from "effectweb/advanced";
+import {
+  RouterCore,
+  createNonReactiveMutableStore,
+  createNonReactiveReadonlyStore
+} from "@tanstack/router-core";
+import {
+  BaseRoute,
+  BaseRootRoute,
+  redirect,
+  notFound
+} from "@tanstack/router-core";
+import { createBrowserHistory, createMemoryHistory } from "@tanstack/history";
+const snapshotCopy = (value, seen = /* @__PURE__ */ new WeakMap()) => {
+  if (value === null || typeof value !== "object") return value;
+  const prototype = Object.getPrototypeOf(value);
+  if (!Array.isArray(value) && prototype !== Object.prototype && prototype !== null) return value;
+  if (seen.has(value)) return seen.get(value);
+  const copy = Array.isArray(value) ? [] : {};
+  seen.set(value, copy);
+  for (const key of Reflect.ownKeys(value)) {
+    if (key === "length" && Array.isArray(value)) continue;
+    const descriptor = Object.getOwnPropertyDescriptor(value, key);
+    if ("value" in descriptor)
+      Object.defineProperty(copy, key, {
+        value: snapshotCopy(descriptor.value, seen),
+        writable: true,
+        enumerable: descriptor.enumerable ?? false,
+        configurable: true
+      });
+  }
+  return copy;
 };
-const publications = new WeakMap();
-/** TanStack supplies matching, loaders, search validation and typed navigation; EffectWeb owns publications. */
-export const createRouter = (options) => {
-    const listeners = new Set();
-    let batchDepth = 0;
-    let dirty = false;
-    const publish = () => {
-        dirty = true;
-        if (batchDepth)
-            return;
-        dirty = false;
-        for (const listener of listeners)
-            listener();
-    };
-    const instance = new RouterCore(options, () => ({
-        createMutableStore: (initial) => {
-            const store = createNonReactiveMutableStore(initial);
-            return {
-                get: store.get,
-                set: (next) => {
-                    store.set((previous) => typeof next === 'function' ? next(previous) : next);
-                    publish();
-                },
-            };
-        },
-        createReadonlyStore: createNonReactiveReadonlyStore,
-        batch: (run) => {
-            batchDepth++;
-            try {
-                run();
-            }
-            finally {
-                batchDepth--;
-                if (!batchDepth && dirty)
-                    publish();
-            }
-        },
-    }));
-    publications.set(instance, listeners);
-    return instance;
+const publications = /* @__PURE__ */ new WeakMap();
+const closedRouters = /* @__PURE__ */ new WeakSet();
+const createRouter = (options) => {
+  const listeners = /* @__PURE__ */ new Set();
+  let batchDepth = 0;
+  let dirty = false;
+  const publish = () => {
+    dirty = true;
+    if (batchDepth) return;
+    dirty = false;
+    for (const listener of listeners) listener();
+  };
+  const instance = new RouterCore(options, () => ({
+    createMutableStore: (initial) => {
+      const store = createNonReactiveMutableStore(initial);
+      return {
+        get: store.get,
+        set: (next) => {
+          store.set(
+            (previous) => typeof next === "function" ? next(previous) : next
+          );
+          publish();
+        }
+      };
+    },
+    createReadonlyStore: createNonReactiveReadonlyStore,
+    batch: (run) => {
+      batchDepth++;
+      try {
+        run();
+      } finally {
+        batchDepth--;
+        if (!batchDepth && dirty) publish();
+      }
+    }
+  }));
+  const load = instance.load;
+  const navigate = instance.navigate;
+  const preload = instance.preloadRoute;
+  const closed = () => new Error("Cannot use a disposed router");
+  instance.load = (...args) => closedRouters.has(instance) ? Promise.reject(closed()) : load(...args);
+  instance.navigate = (...args) => closedRouters.has(instance) ? Promise.reject(closed()) : navigate(...args);
+  instance.preloadRoute = (...args) => closedRouters.has(instance) ? Promise.reject(closed()) : preload(...args);
+  publications.set(instance, listeners);
+  return instance;
 };
-/** Mount once per router in an Effect scope. The returned Source can drive an EffectWeb program or view. */
-export const mountRouter = (router) => Effect.gen(function* () {
-    const source = yield* Effect.acquireRelease(Effect.sync(() => {
-        const listeners = publications.get(router);
-        const history = router.history;
-        if (!listeners)
-            throw new Error('Use @effectweb/tanstack-router.createRouter before mountRouter');
-        const source = projectionSource({
-            project: () => snapshotCopy(router.state),
-        });
-        listeners.add(source.changed);
-        source.start();
-        const unsubscribe = history.subscribe(() => {
-            void router
-                .load()
-                .catch((error) => console.error('Router navigation failed', error));
-        });
-        return {
-            source,
-            dispose: () => {
-                unsubscribe();
-                listeners.delete(source.changed);
-                source.dispose();
-                history.flush();
-                history.destroy();
-            },
-        };
-    }), (mounted) => Effect.sync(() => mounted.dispose()));
-    yield* Effect.tryPromise({
-        try: () => router.load(),
-        catch: (cause) => (cause instanceof Error ? cause : new Error(String(cause))),
-    });
-    return source.source;
+const mountedRouters = /* @__PURE__ */ new WeakSet();
+function stopRouter(router) {
+  closedRouters.add(router);
+  const transaction = router._tx;
+  const preflight = router._preflight;
+  const flights = [...router._flights?.values() ?? []];
+  delete router._tx;
+  delete router._preflight;
+  router._flights?.clear();
+  if (router._pending?.[3] !== void 0) clearTimeout(router._pending[3]);
+  delete router._pending;
+  const rendered = router._rendered;
+  delete router._rendered;
+  rendered?.[1]?.(false);
+  preflight?.abort();
+  transaction?.[0].abort();
+  for (const flight of flights) flight[1].abort();
+  router.clearCache();
+  router._commitPromise?.resolve();
+}
+const mountRouter = (router) => Effect.gen(function* () {
+  const source = yield* Effect.acquireRelease(
+    Effect.sync(() => {
+      const listeners = publications.get(router);
+      const history = router.history;
+      if (!listeners)
+        throw new Error("Use @effectweb/tanstack-router.createRouter before mountRouter");
+      if (mountedRouters.has(router)) throw new Error("A router can only be mounted once");
+      mountedRouters.add(router);
+      const source2 = projectionSource({
+        project: () => snapshotCopy(router.state)
+      });
+      listeners.add(source2.changed);
+      source2.start();
+      const unsubscribe = history.subscribe(() => {
+        void router.load().catch((error) => console.error("Router navigation failed", error));
+      });
+      return {
+        source: source2,
+        dispose: () => {
+          unsubscribe();
+          listeners.delete(source2.changed);
+          source2.dispose();
+          stopRouter(router);
+          history.flush();
+          history.destroy();
+        }
+      };
+    }),
+    (mounted) => Effect.sync(() => mounted.dispose())
+  );
+  yield* Effect.tryPromise({
+    try: () => router.load(),
+    catch: (cause) => cause instanceof Error ? cause : new Error(String(cause))
+  });
+  return source.source;
 });
-export { createLink, linkTarget } from './link.js';
+import { createLink, linkTarget } from "./link.js";
+export {
+  BaseRootRoute as RootRoute,
+  BaseRoute as Route,
+  createBrowserHistory,
+  createLink,
+  createMemoryHistory,
+  createRouter,
+  linkTarget,
+  mountRouter,
+  notFound,
+  redirect
+};

package/dist/link.d.ts

@@ -1,15 +1,21 @@
 import { type AnyRouter, type LinkOptions } from '@tanstack/router-core';
 import type { JSX } from 'effectweb';
 import { jsxComponent } from 'effectweb/jsx';
+type SupportedLinkOptions<R extends AnyRouter, F extends string, T extends string | undefined> = LinkOptions<R, F, T> & {
+    readonly preload?: never;
+    readonly preloadDelay?: never;
+    readonly preloadIntentProximity?: never;
+    readonly activeOptions?: never;
+};
 type Anchor = Omit<JSX.IntrinsicElements['a'], 'href' | 'onClick' | 'target' | 'children'>;
-export type LinkProps<Router extends AnyRouter, From extends string = string, To extends string | undefined = '.'> = LinkOptions<Router, From, To> & Anchor & {
+export type LinkProps<Router extends AnyRouter, From extends string = string, To extends string | undefined = '.'> = SupportedLinkOptions<Router, From, To> & Anchor & {
     /** Mark the link as the current page (`aria-current="page"`). Derive it from your route model. */
     readonly active?: boolean;
     readonly children?: JSX.Element;
 };
 type ClickEvent = Pick<MouseEvent, 'button' | 'metaKey' | 'altKey' | 'ctrlKey' | 'shiftKey' | 'defaultPrevented' | 'preventDefault'>;
 /** Resolve a typed destination to an href and a click handler that navigates in place. */
-export declare function linkTarget(router: AnyRouter, props: LinkOptions<AnyRouter, string, string> & Pick<Anchor, 'download'>): {
+export declare function linkTarget(router: AnyRouter, props: SupportedLinkOptions<AnyRouter, string, string> & Pick<Anchor, 'download'>): {
     href: string | undefined;
     onClick: (event: ClickEvent) => void;
 };

package/dist/link.js

@@ -1,79 +1,74 @@
 import * as _ew_dom from "effectweb/dom";
-const _ew_jsx0 = /*@__PURE__*/ _ew_dom.markup("a");
+const _ew_jsx0 = /* @__PURE__ */ _ew_dom.markup("a");
 import { getUrlScheme, isDangerousProtocol } from "@tanstack/router-core";
 import { jsxComponent } from "effectweb/jsx";
 const options = [
-    "to",
-    "from",
-    "params",
-    "search",
-    "hash",
-    "state",
-    "mask",
-    "replace",
-    "resetScroll",
-    "hashScrollIntoView",
-    "viewTransition",
-    "ignoreBlocker",
-    "reloadDocument",
-    "href",
-    "activeOptions",
-    "preload",
-    "preloadDelay",
-    "preloadIntentProximity",
-    "disabled",
-    "active",
-    "children"
+  "to",
+  "from",
+  "params",
+  "search",
+  "hash",
+  "state",
+  "mask",
+  "replace",
+  "resetScroll",
+  "hashScrollIntoView",
+  "viewTransition",
+  "ignoreBlocker",
+  "reloadDocument",
+  "href",
+  "activeOptions",
+  "preload",
+  "preloadDelay",
+  "preloadIntentProximity",
+  "disabled",
+  "active",
+  "children"
 ];
-/** Resolve a typed destination to an href and a click handler that navigates in place. */
-export function linkTarget(router, props) {
-    const explicitHref = props.href;
-    const blocked = explicitHref !== undefined && isDangerousProtocol(explicitHref, router.protocolAllowlist);
-    const absoluteHref = explicitHref !== undefined && getUrlScheme(explicitHref) ? explicitHref : undefined;
-    const location = absoluteHref || blocked ? undefined : router.buildLocation(props);
-    const external = absoluteHref !== undefined || location?.external === true;
-    const publicHref = absoluteHref ?? location?.publicHref;
-    const history = router.history;
-    const href = props.disabled || blocked ? undefined : props.reloadDocument || external ? publicHref : history.createHref(publicHref);
-    const onClick = (event) => {
-        const plain = event.button === 0 && !event.metaKey && !event.altKey && !event.ctrlKey && !event.shiftKey && !event.defaultPrevented;
-        if (props.disabled || blocked) {
-            event.preventDefault();
-            return;
-        }
-        // Let the browser handle new tabs, downloads and full reloads.
-        const download = props.download !== undefined && props.download !== false;
-        if (!plain || external || download || props.reloadDocument || props.target && props.target !== "_self")
-            return;
-        event.preventDefault();
-        router.navigate(props).catch((error) => {
-            console.error("Router navigation failed", error);
-        });
-    };
-    return {
-        href,
-        onClick
-    };
-}
-/**
-* Create a typed `<Link>` for one router. It renders a real `<a href>` (middle-click,
-* copy link and accessibility keep working) and navigates in place on plain clicks.
-*/
-export function createLink(router) {
-    function Link(props) {
-        const target = linkTarget(router, props);
-        const attributes = { ...props };
-        for (const name of options)
-            delete attributes[name];
-        return _ew_jsx0({
-            ...attributes,
-            "href": target.href,
-            "target": props.target,
-            "aria-current": props.active ? "page" : undefined,
-            "aria-disabled": props.disabled ? "true" : undefined,
-            "onClick": target.onClick,
-            children: props.children
-        });
+function linkTarget(router, props) {
+  const explicitHref = props.href;
+  const blocked = explicitHref !== void 0 && isDangerousProtocol(explicitHref, router.protocolAllowlist);
+  const absoluteHref = explicitHref !== void 0 && getUrlScheme(explicitHref) ? explicitHref : void 0;
+  const location = absoluteHref || blocked ? void 0 : router.buildLocation(props);
+  const external = absoluteHref !== void 0 || location?.external === true;
+  const publicHref = absoluteHref ?? location?.publicHref;
+  const history = router.history;
+  const href = props.disabled || blocked ? void 0 : props.reloadDocument || external ? publicHref : history.createHref(publicHref);
+  const onClick = (event) => {
+    const plain = event.button === 0 && !event.metaKey && !event.altKey && !event.ctrlKey && !event.shiftKey && !event.defaultPrevented;
+    if (props.disabled || blocked) {
+      event.preventDefault();
+      return;
     }
-    return Object.assign(Link, { [jsxComponent]: true });
+    const download = props.download !== void 0 && props.download !== false;
+    if (!plain || external || download || props.reloadDocument || props.target && props.target !== "_self") return;
+    event.preventDefault();
+    router.navigate(props).catch((error) => {
+      console.error("Router navigation failed", error);
+    });
+  };
+  return {
+    href,
+    onClick
+  };
+}
+function createLink(router) {
+  function Link(props) {
+    const target = linkTarget(router, props);
+    const attributes = { ...props };
+    for (const name of options) delete attributes[name];
+    return _ew_jsx0({
+      ...attributes,
+      "href": target.href,
+      "target": props.target,
+      "aria-current": props.active ? "page" : void 0,
+      "aria-disabled": props.disabled ? "true" : void 0,
+      "onClick": target.onClick
+    }, props.children);
+  }
+  return Object.assign(Link, { [jsxComponent]: true });
 }
+export {
+  createLink,
+  linkTarget
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effectweb/tanstack-router",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -25,10 +25,10 @@
   },
   "dependencies": {
     "@tanstack/history": "1.162.4",
-    "@tanstack/router-core": "1.171.33"
+    "@tanstack/router-core": "1.171.34"
   },
   "peerDependencies": {
-    "effect": "4.0.0-rc.112",
-    "effectweb": "^0.8.0"
+    "effect": "^4.0.0",
+    "effectweb": "0.9.0"
   }
 }