@effectweb/tanstack-router 0.5.1 → 0.7.0

package/README.md

@@ -7,5 +7,16 @@ EffectWeb adapter for TanStack Router 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.
+- `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"`.
 
-Currently there is no JSX Link/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.
+```tsx
+const Link = createLink(router);
+
+<Link to="/files/$name" params={{ name: file.name }} active={route.name === file.name}>
+  {file.name}
+</Link>;
+```
+
+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.

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { Effect, type Scope } from 'effect';
-import { type Source } from 'effectweb';
+import type { Source } from 'effectweb';
 import { type AnyRouter, type CreateRouterFn, type RouterState } from '@tanstack/router-core';
 export { BaseRoute as Route, BaseRootRoute as RootRoute, redirect, notFound, } from '@tanstack/router-core';
 export { createBrowserHistory, createMemoryHistory } from '@tanstack/history';
@@ -7,3 +7,4 @@ export { createBrowserHistory, createMemoryHistory } from '@tanstack/history';
 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 { createLink, linkTarget, type LinkProps } from './link.js';

package/dist/index.js

@@ -1,5 +1,5 @@
 import { Effect } from 'effect';
-import { projectionSource } from 'effectweb';
+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';
@@ -103,3 +103,4 @@ export const mountRouter = (router) => Effect.gen(function* () {
     });
     return source.source;
 });
+export { createLink, linkTarget } from './link.js';

package/dist/link.d.ts

@@ -0,0 +1,23 @@
+import { type AnyRouter, type LinkOptions } from '@tanstack/router-core';
+import type { JSX } from 'effectweb';
+import { jsxComponent } from 'effectweb/jsx';
+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 & {
+    /** 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'>): {
+    href: string | undefined;
+    onClick: (event: ClickEvent) => void;
+};
+/**
+ * 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 declare function createLink<Router extends AnyRouter>(router: Router): (<const From extends string = string, const To extends string | undefined = ".">(this: never, props: LinkProps<Router, From, To>) => JSX.Element) & {
+    [jsxComponent]: true;
+};
+export {};

package/dist/link.js

@@ -0,0 +1,79 @@
+import * as _ew_dom from "effectweb/dom";
+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"
+];
+/** 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
+        });
+    }
+    return Object.assign(Link, { [jsxComponent]: true });
+}

package/package.json

@@ -1,7 +1,12 @@
 {
   "name": "@effectweb/tanstack-router",
-  "version": "0.5.1",
+  "version": "0.7.0",
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/DerpyCrabs/EffectWeb.git",
+    "directory": "packages/tanstack-router"
+  },
   "files": [
     "dist",
     "README.md",
@@ -24,6 +29,6 @@
   },
   "peerDependencies": {
     "effect": "4.0.0-rc.112",
-    "effectweb": "^0.5.1"
+    "effectweb": "^0.7.0"
   }
 }