cross-router-svelte 1.0.1

package/LICENSE.md

@@ -0,0 +1,7 @@
+Copyright (c) 2026 Bricklou
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/dist/Form.svelte

@@ -0,0 +1,81 @@
+<script lang='ts'>
+  import type { Snippet } from 'svelte'
+  import type { HTMLFormAttributes } from 'svelte/elements'
+  import { getRouter } from './context.svelte'
+
+  // ============================================================
+  // PROPS
+  // ============================================================
+
+  interface Props extends HTMLFormAttributes {
+    // Called before submission — return false to cancel
+    onBeforeSubmit?: (formData: FormData) => boolean | Promise<boolean>
+
+    // Called after submission completes (success or error)
+    onAfterSubmit?: () => void
+
+    children: Snippet
+  }
+
+  const {
+    action,
+    class: className,
+    id,
+    enctype,
+    onBeforeSubmit,
+    onAfterSubmit,
+    children,
+  }: Props = $props()
+
+  // ============================================================
+  // ROUTER ACCESS
+  // ============================================================
+
+  const router = getRouter()
+
+  // ============================================================
+  // SUBMIT HANDLER
+  // ============================================================
+
+  async function handleSubmit(event: SubmitEvent) {
+    event.preventDefault()
+
+    const form = event.currentTarget as HTMLFormElement
+    const formData = new FormData(form)
+
+    // Include the submitter's name/value if present
+    // (e.g. multiple submit buttons with different values)
+    const submitter = event.submitter as HTMLButtonElement | null
+    if (submitter?.name) {
+      formData.set(submitter.name, submitter.value)
+    }
+
+    // Pre-submit hook — cancel if returns false
+    if (onBeforeSubmit) {
+      const shouldContinue = await onBeforeSubmit(formData)
+      if (shouldContinue === false)
+        return
+    }
+
+    // Resolve action path — defaults to current pathname
+    const actionPath = action ?? window.location.pathname
+
+    await router.submit(formData, {
+      action: actionPath,
+      method: 'POST',
+    })
+
+    onAfterSubmit?.()
+  }
+</script>
+
+<form
+  method='POST'
+  action={action ?? '#'}
+  class={className}
+  {id}
+  {enctype}
+  onsubmit={handleSubmit}
+>
+  {@render children()}
+</form>

package/dist/Form.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { HTMLFormAttributes } from 'svelte/elements';
+interface Props extends HTMLFormAttributes {
+    onBeforeSubmit?: (formData: FormData) => boolean | Promise<boolean>;
+    onAfterSubmit?: () => void;
+    children: Snippet;
+}
+declare const Form: import("svelte").Component<Props, {}, "">;
+type Form = ReturnType<typeof Form>;
+export default Form;

package/dist/Link.svelte

@@ -0,0 +1,102 @@
+<script lang='ts'>
+  import type { NavigateOptions } from '@cross-router/core'
+  import type { Snippet } from 'svelte'
+  import type { HTMLAnchorAttributes } from 'svelte/elements'
+  import { getRouter, routerState } from './context.svelte'
+
+  // ============================================================
+  // PROPS
+  // ============================================================
+
+  interface Props extends HTMLAnchorAttributes {
+    // Target path — required
+    href: string
+
+    // Navigate options
+    replace?: boolean
+    viewTransition?: boolean
+    state?: unknown
+
+    // Active link styling
+    // Applied when the current pathname starts with href
+    activeClass?: string
+    // Applied only when href matches exactly
+    exactActiveClass?: string
+
+    // Content
+    children: Snippet
+  }
+
+  const {
+    href,
+    replace = false,
+    viewTransition = false,
+    state,
+    activeClass = '',
+    exactActiveClass = '',
+    target,
+    children,
+    ...props
+  }: Props = $props()
+
+  // ============================================================
+  // ROUTER ACCESS
+  // ============================================================
+
+  const router = getRouter()
+
+  // ============================================================
+  // ACTIVE STATE
+  // ============================================================
+
+  const isActive = $derived(
+    routerState.current?.location.pathname.startsWith(href) ?? false,
+  )
+
+  const isExactActive = $derived(
+    routerState.current?.location.pathname === href,
+  )
+
+  // ============================================================
+  // CLICK HANDLER
+  // Intercepts clicks to use client-side navigation.
+  // Respects modifier keys (Ctrl, Meta, Shift) and target="_blank"
+  // so the browser handles those normally.
+  // ============================================================
+
+  function handleClick(event: MouseEvent) {
+    // Let the browser handle modified clicks and external targets
+    if (
+      event.defaultPrevented
+      || event.metaKey
+      || event.ctrlKey
+      || event.shiftKey
+      || event.altKey
+      || target === '_blank'
+    ) {
+      return
+    }
+
+    event.preventDefault()
+
+    const opts: NavigateOptions = { replace, viewTransition, state }
+
+    if (replace) {
+      router.replace(href, opts)
+    }
+    else {
+      router.navigate(href, opts)
+    }
+  }
+</script>
+
+<a
+  {href}
+  {target}
+  class={{ [activeClass]: isActive, [exactActiveClass]: isExactActive }}
+  onclick={handleClick}
+  aria-current={isExactActive ? 'page' : undefined}
+  {...props}
+>
+  {@render children()}
+</a>

package/dist/Link.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes } from 'svelte/elements';
+interface Props extends HTMLAnchorAttributes {
+    href: string;
+    replace?: boolean;
+    viewTransition?: boolean;
+    state?: unknown;
+    activeClass?: string;
+    exactActiveClass?: string;
+    children: Snippet;
+}
+declare const Link: import("svelte").Component<Props, {}, "">;
+type Link = ReturnType<typeof Link>;
+export default Link;

package/dist/RouterView.svelte

@@ -0,0 +1,147 @@
+<script lang='ts' module>
+  export type SvelteRouteComponent = typeof import('svelte').SvelteComponent
+</script>
+
+<script lang='ts'>
+  import type { RouterInstance } from 'cross-router-core'
+  import type { Component } from 'svelte'
+  import { onDestroy, onMount, untrack } from 'svelte'
+  import {
+    routerState,
+    setMatchDepthContext,
+    setRouter,
+  } from './context.svelte'
+  import RouterView from './RouterView.svelte'
+
+  interface Props {
+    router?: RouterInstance
+    _depth?: number
+  }
+
+  const props: Props = $props()
+
+  const isRoot = untrack(() => props._depth === undefined)
+  const depth = untrack(() => props._depth ?? 0)
+  const nextDepth = depth + 1
+
+  // ── Reactive state ───────────────────────────────────────────
+
+  if (isRoot) {
+    const router = untrack(() => props.router)
+
+    if (!router) {
+      throw new Error(
+        '[RouterView] Root <RouterView> requires a `router` prop.\nUsage: <RouterView router={myRouter} />',
+      )
+    }
+
+    setRouter(router)
+
+    // Subscribe BEFORE initialize() so we never miss state updates.
+    const unsubscribe = router.subscribe((newState) => {
+      routerState.current = newState
+    })
+
+    routerState.current = router.state
+
+    setMatchDepthContext({
+      depth,
+      get match() { return routerState.current?.matches[depth]! },
+    })
+
+    // Initialize LAST — it fires setState({ status: 'loading' }) synchronously
+    // which immediately re-renders children. All context must be set first.
+    onMount(() => {
+      router.initialize()
+    })
+
+    onDestroy(() => {
+      unsubscribe()
+      router.destroy()
+    })
+  }
+  else {
+    // Set depth context synchronously so child hooks work on first render.
+    setMatchDepthContext({
+      depth,
+      get match() { return routerState.current?.matches[depth]! },
+    })
+  }
+
+  // ── Debug ────────────────────────────────────────────────────
+  $effect(() => {
+    try {
+      const val = localStorage.getItem('cross-router:debug')
+      if (!val)
+        return
+    }
+    catch { return }
+
+    const s = routerState.current
+    if (!s)
+      return
+    // eslint-disable-next-line no-console
+    console.log(
+      `%c[RouterView depth=${depth}] status=${s.status} matches=${s.matches.length}`,
+      'color:#a855f7;font-weight:bold',
+      s.matches.map(m => m.route.id),
+    )
+  })
+
+  // ── Derived values ───────────────────────────────────────────
+  const currentState = $derived(routerState.current)
+  const match = $derived(currentState?.matches[depth] ?? null)
+  const hasChild = $derived(currentState !== null && (currentState?.matches.length ?? 0) > nextDepth)
+
+  // --- Foreign renderer mount
+  let foreignTarget: HTMLElement | null = $state(null)
+
+  $effect(() => {
+    const renderer = match?.route.__renderer
+    const component = match?.route.component
+    if (!renderer || !component || !foreignTarget)
+      return
+
+    return renderer.mount(component, foreignTarget)
+  })
+
+  // ── View transition ──────────────────────────────────────────
+
+  $effect(() => {
+    if (currentState?.viewTransition && 'startViewTransition' in document) {
+      document.startViewTransition(() => {})
+    }
+  })
+</script>
+
+{#if currentState === null}
+  <!-- Router not yet initialized -->
+{:else if currentState.status === 'error' && !currentState.matches.length}
+  <!-- Global unhandled error — no errorComponent in tree -->
+{:else if match}
+  {@const renderer = match.route.__renderer}
+  {@const RouteComponent = match.route.component as Component | undefined}
+  {@const ErrorComponent = match.route.errorComponent as Component | undefined}
+
+  {#if match.status === 'error' && ErrorComponent}
+    <ErrorComponent error={match.error} />
+  {:else if renderer && RouteComponent}
+    <!-- Foreign framework component - mountded via its adapter renderer -->
+    <div bind:this={foreignTarget}></div>
+    {#if hasChild}
+      <RouterView _depth={nextDepth} />
+    {/if}
+  {:else if RouteComponent}
+    <RouteComponent>
+      {#snippet outlet()}
+        {#if hasChild}
+          <RouterView _depth={nextDepth} />
+        {/if}
+      {/snippet}
+    </RouteComponent>
+  {:else if hasChild}
+    <!-- Pathless/componentless layout route — no component to render,
+         just pass through to the next depth immediately -->
+    <RouterView _depth={nextDepth} />
+  {/if}
+{/if}

package/dist/RouterView.svelte.d.ts

@@ -0,0 +1,11 @@
+export type SvelteRouteComponent = typeof import('svelte').SvelteComponent;
+import type { RouterInstance } from 'cross-router-core';
+import type { Component } from 'svelte';
+import RouterView from './RouterView.svelte';
+interface Props {
+    router?: RouterInstance;
+    _depth?: number;
+}
+declare const RouterView: Component<Props, {}, "">;
+type RouterView = ReturnType<typeof RouterView>;
+export default RouterView;

package/dist/context.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { AnyRouteMatch, NavigationState, RouterInstance } from 'cross-router-core';
+declare const ROUTER_SYMBOL: unique symbol;
+declare const ROUTER_STATE_SYMBOL: unique symbol;
+declare global {
+    interface Window {
+        [ROUTER_SYMBOL]: RouterInstance | null;
+        [ROUTER_STATE_SYMBOL]: NavigationState | null;
+    }
+}
+export declare function setRouter(router: RouterInstance): void;
+export declare function getRouter(): RouterInstance;
+export declare const routerState: {
+    current: NavigationState | null;
+};
+export interface MatchDepthContext {
+    readonly depth: number;
+    readonly match: AnyRouteMatch;
+}
+export declare function setMatchDepthContext(ctx: MatchDepthContext): void;
+export declare function getMatchDepthContext(): MatchDepthContext | null;
+export {};

package/dist/context.svelte.js

@@ -0,0 +1,46 @@
+import { getContext, setContext } from 'svelte';
+// ============================================================
+// ROUTER SINGLETON
+// Module-level — works outside components (loaders, actions, ts files).
+// Set once at app startup by the framework adapter init.
+// ============================================================
+var ROUTER_SYMBOL = Symbol.for('cross-router-instance');
+var ROUTER_STATE_SYMBOL = Symbol.for('cross-router-state');
+window[ROUTER_SYMBOL] = null;
+export function setRouter(router) {
+    window[ROUTER_SYMBOL] = router;
+}
+export function getRouter() {
+    var _router = window[ROUTER_SYMBOL];
+    if (!_router) {
+        throw new Error('[router] No router instance found. Make sure you called setRouter() before using any router hooks.');
+    }
+    return _router;
+}
+// ── Router state ─────────────────────────────────────────────
+// Exported as a reactive object rather than via a getter function.
+//
+// $derived(getRouterState()) does NOT work across module boundaries:
+// Svelte's tracker only intercepts $state reads that happen during
+// the synchronous evaluation of the current reactive computation.
+// A call to getRouterState() dispatches into another module's scope;
+// the read of _state happens inside that function body, outside the
+// tracker's view — so the derived never re-runs when state changes.
+//
+// Exporting a plain object whose property IS the $state variable
+// lets consumers write `routerState` directly inside their
+// $derived / template, which Svelte does track correctly.
+export var routerState = $state({ current: null });
+// ============================================================
+// MATCH DEPTH CONTEXT
+// Set by each <RouterView> level so useLoaderData() knows
+// which match in the array it belongs to.
+// ============================================================
+var MATCH_DEPTH_KEY = 'cross-router-depth';
+export function setMatchDepthContext(ctx) {
+    setContext(MATCH_DEPTH_KEY, ctx);
+}
+export function getMatchDepthContext() {
+    var _a;
+    return (_a = getContext(MATCH_DEPTH_KEY)) !== null && _a !== void 0 ? _a : null;
+}

package/dist/hooks.d.ts

@@ -0,0 +1,12 @@
+import type { AnyRouteMatch, Location, NavigateOptions, NavigationState, SubmitOptions } from '@cross-router/core';
+export declare function useRouterState(): () => NavigationState;
+export declare function useNavigationStatus(): () => NavigationState['status'];
+export declare function useLocation(): () => Location;
+export declare function useMatch(): () => AnyRouteMatch;
+export declare function useParams<TParams extends Record<string, string> = Record<string, string>>(): () => TParams;
+export declare function useLoaderData<TData = unknown>(): () => TData;
+export declare function useActionData<TData = unknown>(): () => TData | undefined;
+export declare function useNavigate(): (to: string, opts?: NavigateOptions) => Promise<void>;
+export declare function useSubmit(): (formData: FormData, opts: SubmitOptions) => Promise<void>;
+export declare function useIsTransitioning(): () => boolean;
+export declare function useMatches(): () => AnyRouteMatch[];

package/dist/hooks.js

@@ -0,0 +1,116 @@
+import { getMatchDepthContext, getRouter, routerState, } from './context.svelte';
+// ============================================================
+// HOOKS
+//
+// All hooks must be called inside a Svelte component
+// (during component initialisation) — same rule as Svelte's
+// own getContext().
+//
+// Exception: useNavigate() and useSubmit() return stable
+// function references that can be stored and called anywhere.
+// ============================================================
+// ============================================================
+// useRouterState
+// Returns the full reactive NavigationState.
+// Use this as an escape hatch — prefer the scoped hooks below.
+// ============================================================
+export function useRouterState() {
+    return function () { return routerState.current; };
+}
+// ============================================================
+// useNavigationStatus
+// Reactive shortcut for the current navigation status.
+// Useful for global loading indicators.
+// ============================================================
+export function useNavigationStatus() {
+    return function () { return routerState.current.status; };
+}
+// ============================================================
+// useLocation
+// Reactive current location.
+// ============================================================
+export function useLocation() {
+    return function () { return routerState.current.location; };
+}
+// ============================================================
+// useMatch
+// Returns the RouteMatch for the current component's depth.
+// Throws if called outside a RouterView context.
+// ============================================================
+export function useMatch() {
+    var depthCtx = getMatchDepthContext();
+    if (!depthCtx) {
+        throw new Error('[router] useMatch() must be called inside a route component '
+            + 'rendered by <RouterView>.');
+    }
+    var depth = depthCtx.depth;
+    return function () {
+        var _a;
+        var match = (_a = routerState.current) === null || _a === void 0 ? void 0 : _a.matches[depth];
+        if (!match) {
+            throw new Error("[router] useMatch() could not find a match at depth ".concat(depth, ". ")
+                + "This is likely a bug in RouterView.");
+        }
+        return match;
+    };
+}
+// ============================================================
+// useParams
+// Reactive params for the current route.
+// Typed via generic — useParams<{ id: string }>()
+// ============================================================
+export function useParams() {
+    var getMatch = useMatch();
+    return function () { return getMatch().params; };
+}
+// ============================================================
+// useLoaderData
+// Reactive loader data for the current route.
+// Typed via generic — useLoaderData<MyLoaderReturnType>()
+// ============================================================
+export function useLoaderData() {
+    var getMatch = useMatch();
+    return function () { return getMatch().loaderData; };
+}
+// ============================================================
+// useActionData
+// Reactive action data from the last form submission.
+// Not scoped to depth — actions return a single global result.
+// ============================================================
+export function useActionData() {
+    return function () { var _a; return (_a = routerState.current) === null || _a === void 0 ? void 0 : _a.actionData; };
+}
+// ============================================================
+// useNavigate
+// Returns a stable navigate() function reference.
+// Safe to call outside component lifecycle (event handlers, etc.)
+// ============================================================
+export function useNavigate() {
+    var router = getRouter();
+    return function (to, opts) { return router.navigate(to, opts); };
+}
+// ============================================================
+// useSubmit
+// Returns a stable submit() function reference.
+// Useful for programmatic form submission outside <Form>.
+// ============================================================
+export function useSubmit() {
+    var router = getRouter();
+    return function (formData, opts) { return router.submit(formData, opts); };
+}
+// ============================================================
+// useIsTransitioning
+// True while a navigation is in flight.
+// Useful for showing route-level skeleton states.
+// ============================================================
+export function useIsTransitioning() {
+    return function () { var _a, _b; return (_b = (_a = routerState.current) === null || _a === void 0 ? void 0 : _a.isTransitioning) !== null && _b !== void 0 ? _b : false; };
+}
+// ============================================================
+// useMatches
+// Returns the full ordered match array (root → leaf).
+// Useful for breadcrumbs, tab bars, etc.
+// ============================================================
+export function useMatches() {
+    return function () { var _a, _b; return (_b = (_a = routerState.current) === null || _a === void 0 ? void 0 : _a.matches) !== null && _b !== void 0 ? _b : []; };
+}

package/dist/index.d.ts

@@ -0,0 +1,14 @@
+export { getRouter, setRouter } from './context.svelte';
+export { default as Form } from './Form.svelte';
+export { useActionData, useIsTransitioning, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigationStatus, useParams, useRouterState, useSubmit, } from './hooks';
+export { default as Link } from './Link.svelte';
+export { default as RouterView } from './RouterView.svelte';
+export { route, svelteRenderer } from './routes';
+export type { ActionArgs, ActionFn, AnyMiddleware, AnyRouteDefinition, AnyRouteMatch, History, InferSearch, LoaderArgs, LoaderFn, Location, Middleware, MiddlewareArgs, NavigateOptions, NavigationState, NavigationStatus, NextFn, ParamsFromPath, RevalidateArgs, RouteDefinition, RouteMatch, RouterContextProvider, RouteRegistry, RouterInstance, RouterOptions, SearchSchema, SubmitOptions, } from 'cross-router-core';
+export { createBrowserHistory, createBrowserRouter, createMemoryHistory, createRegistry, createRouter, defineMiddleware, isRedirect, MiddlewareError, redirect, Redirect, RegistryError, } from 'cross-router-core';
+/**
+ * Enable router debug logging in the browser console.
+ * @param scopes - 'all' or comma-separated: 'router,registry,matcher,loader,middleware'
+ */
+export declare function enableDebug(scopes?: string): void;
+export declare function disableDebug(): void;

package/dist/index.js

@@ -0,0 +1,43 @@
+// ============================================================
+// cross-router-svelte — public API
+// ============================================================
+// ============================================================
+// COMPONENTS
+// ============================================================
+export { getRouter, setRouter } from './context.svelte';
+export { default as Form } from './Form.svelte';
+export { useActionData, useIsTransitioning, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigationStatus, useParams, useRouterState, useSubmit, } from './hooks';
+// ============================================================
+// HOOKS
+// All must be called during component initialisation
+// (same constraint as Svelte's getContext)
+// ============================================================
+export { default as Link } from './Link.svelte';
+// ============================================================
+// ROUTER SINGLETON — for use outside components
+// ============================================================
+export { default as RouterView } from './RouterView.svelte';
+export { route, svelteRenderer } from './routes';
+export { createBrowserHistory, createBrowserRouter, createMemoryHistory, createRegistry, 
+// Router creation
+createRouter, 
+// Route authoring
+defineMiddleware, isRedirect, MiddlewareError, redirect, Redirect, 
+// Errors
+RegistryError, } from 'cross-router-core';
+// ── Debug ────────────────────────────────────────────────────
+/**
+ * Enable router debug logging in the browser console.
+ * @param scopes - 'all' or comma-separated: 'router,registry,matcher,loader,middleware'
+ */
+export function enableDebug(scopes) {
+    if (scopes === void 0) { scopes = 'all'; }
+    localStorage.setItem('cross-router:debug', scopes === 'all' ? 'true' : scopes);
+    // eslint-disable-next-line no-console
+    console.log('[cross-router] debug enabled:', scopes, '— reload to see logs from init');
+}
+export function disableDebug() {
+    localStorage.removeItem('cross-router:debug');
+    // eslint-disable-next-line no-console
+    console.log('[cross-router] debug disabled');
+}

package/dist/routes.d.ts

@@ -0,0 +1,25 @@
+import type { AnyRouteDefinition, RouteDefinition, RouteRenderer } from 'cross-router-core';
+import type { Component } from 'svelte';
+/**
+ * The Svelte route renderer.
+ * RouterView uses this as the default - it's exported so other adapters
+ * can detect "is this already a Svelte-tagged route?" if needed
+ */
+export declare const svelteRenderer: RouteRenderer;
+/**
+ * Tag route definitions as Svelte-rendered
+ *
+ * This is the identity function for the host adapter - Svelte routes don't
+ * strictly need tagging since RouterView handles them natively, but calling
+ * `routes()` makes the framework ownership explicit and consistent with
+ * `routes()` from other adapters
+ *
+ * @example
+ * import { routes } from 'cross-router-svelte
+ *
+ * const appRoutes = [
+ *   ...routes([{ id: 'home', path: '/', component: HomePage }]),
+ *   ...otherRouter([ id: 'widget', path: '/widget', component: OtherWidget ])
+ * ]
+ */
+export declare function route(defs: RouteDefinition<any, any, any, any, Component>[]): AnyRouteDefinition[];

package/dist/routes.js

@@ -0,0 +1,32 @@
+import { tag } from 'cross-router-core';
+import { mount, unmount } from 'svelte';
+/**
+ * The Svelte route renderer.
+ * RouterView uses this as the default - it's exported so other adapters
+ * can detect "is this already a Svelte-tagged route?" if needed
+ */
+export var svelteRenderer = {
+    mount: function (component, target) {
+        var instance = mount(component, { target: target });
+        return function () { return unmount(instance); };
+    },
+};
+/**
+ * Tag route definitions as Svelte-rendered
+ *
+ * This is the identity function for the host adapter - Svelte routes don't
+ * strictly need tagging since RouterView handles them natively, but calling
+ * `routes()` makes the framework ownership explicit and consistent with
+ * `routes()` from other adapters
+ *
+ * @example
+ * import { routes } from 'cross-router-svelte
+ *
+ * const appRoutes = [
+ *   ...routes([{ id: 'home', path: '/', component: HomePage }]),
+ *   ...otherRouter([ id: 'widget', path: '/widget', component: OtherWidget ])
+ * ]
+ */
+export function route(defs) {
+    return tag(svelteRenderer, defs);
+}

package/dist/svelte-env.d.ts

@@ -0,0 +1,6 @@
+declare module '*.svelte' {
+  import type { Component } from 'svelte'
+
+  const component: Component<any, any, any>
+  export default component
+}

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "cross-router-svelte",
+  "type": "module",
+  "version": "1.0.1",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "svelte": "^5.53.7",
+    "cross-router-core": "1.0.1"
+  },
+  "devDependencies": {
+    "@sveltejs/package": "^2.5.7",
+    "@types/node": "^24.12.0",
+    "eslint-plugin-svelte": "^3.15.0",
+    "svelte": "^5.53.7",
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.18"
+  },
+  "publishConfig": {
+    "linkDirectory": true
+  },
+  "scripts": {
+    "build": "svelte-package",
+    "typecheck": "tsc --noEmit"
+  }
+}