Function: connectRouter()

Documentation / @xmachines/play-router / connectRouter

function connectRouter(options): () => void;

Defined in: connect-router.ts:58

Connect vanilla router to actor (pure browser integration).

This is the LOW-LEVEL API for maximum control. No JSX, no rendering, just actor ↔ router synchronization.

Use this when:

• You want manual control over rendering
• Using non-JSX framework (jQuery, Alpine, HTMX, etc.)
• Building custom integration

For JSX frameworks, use framework adapters instead:

• @xmachines/play-react (React components)
• Future: @xmachines/play-preact, @xmachines/play-solid, @xmachines/play-vue

Architecture:

• Subscribes to history changes → sends play.route to actor
• Watches actor.currentRoute signal → updates browser URL
• Prevents circular updates (history change triggers actor, actor triggers history)
• Returns cleanup function

Usage:

import { createBrowserHistory, createRouter, connectRouter } from "@xmachines/play-router";

const history = createBrowserHistory({ window });
const router = createRouter({ routeTree, history });

// Connect router to actor
const disconnect = connectRouter({ actor, router, routeMap });

// User handles rendering (vanilla JS)
const watcher = new Signal.subtle.Watcher(() => {
  queueMicrotask(() => {
    const view = actor.currentView.get();
    document.getElementById("app").innerHTML = render(view);
  });
});
watcher.watch(actor.currentView);

// Later: cleanup
disconnect();
watcher.unwatch(actor.currentView);

Parameters

Parameter	Type
options	ConnectRouterOptions

Returns

() => void