Skip to content
XMachines

@xmachines/play-tanstack-router

API / @xmachines/play-tanstack-router

Shared, framework-agnostic TanStack Router bridge base for XMachines Play.

License: MIT Version

TanStack Router gives React and Solid the same navigate, load, and history surface. Therefore the complete bridge implementation lives here, in TanStackRouterBridgeBase. That class extends RouterBridgeBase from @xmachines/play-router. Each framework adapter package makes a subclass of it, and binds its own router type.

This package has no TanStack runtime dependency. TanStackRouterLike is a type-only interface. It describes the small router surface that the bridge uses.

Who consumes it

Usage

import { createMachine } from "xstate";
import { definePlayer, formatPlayRouteTransitions } from "@xmachines/play-xstate";
import { createRouteMap } from "@xmachines/play-router";
import { TanStackRouterBridgeBase } from "@xmachines/play-tanstack-router";


const machine = createMachine(
  formatPlayRouteTransitions({
    id: "app",
    initial: "home",
    states: {
      home: { id: "home", meta: { route: "/" } },
      about: { id: "about", meta: { route: "/about" } },
    },
  }),
);


const actor = definePlayer({ machine })();
actor.start();


const routeMap = createRouteMap(machine);


export class MyTanStackBridge extends TanStackRouterBridgeBase {}


// router: your TanStack Router instance (from the React or Solid createRouter)
const bridge = new MyTanStackBridge(router, actor, routeMap);
bridge.connect();
// Disconnect the bridge at teardown
bridge.disconnect();

Exports

  • TanStackRouterBridgeBase — the concrete bridge base class. Use it directly, or make a subclass of it
  • TanStackRouterLike — the TanStack router surface, as a type-only interface
  • TanStackRouteMapLike — the narrow route-map surface that the bridge requires

License

MIT

@xmachines/play-tanstack-router

The shared, framework-agnostic TanStack Router bridge base for XMachines Play. @xmachines/play-tanstack-react-router and @xmachines/play-tanstack-solid-router use it. Each of them makes a subclass of TanStackRouterBridgeBase, and the subclass binds its own router type.

Classes

Type Aliases