@real-router/solid 0.2.8 → 0.2.10

package/dist/cjs/index.d.ts

@@ -1,11 +1,11 @@
 import * as solid_js from 'solid-js';
 import { JSX, Accessor, ParentProps } from 'solid-js';
-import * as _real_router_core from '@real-router/core';
 import { Params, NavigationOptions, State, RouterError, Router, Navigator } from '@real-router/core';
 export { Navigator } from '@real-router/core';
 import { RouteUtils } from '@real-router/route-utils';
 import { RouterTransitionSnapshot, RouterSource } from '@real-router/sources';
 export { RouterTransitionSnapshot } from '@real-router/sources';
+import * as _real_router_types from '@real-router/types';
 
 interface RouteViewProps {
     readonly nodeName: string;
@@ -101,7 +101,7 @@ interface RouterContextValue {
     routeSelector: (routeName: string) => boolean;
 }
 declare const RouterContext: solid_js.Context<RouterContextValue | null>;
-declare const RouteContext: solid_js.Context<Accessor<RouteState<_real_router_core.Params>> | null>;
+declare const RouteContext: solid_js.Context<Accessor<RouteState<_real_router_types.Params>> | null>;
 
 declare function createSignalFromSource<T>(source: RouterSource<T>): Accessor<T>;
 

package/dist/esm/index.d.mts

@@ -1,11 +1,11 @@
 import * as solid_js from 'solid-js';
 import { JSX, Accessor, ParentProps } from 'solid-js';
-import * as _real_router_core from '@real-router/core';
 import { Params, NavigationOptions, State, RouterError, Router, Navigator } from '@real-router/core';
 export { Navigator } from '@real-router/core';
 import { RouteUtils } from '@real-router/route-utils';
 import { RouterTransitionSnapshot, RouterSource } from '@real-router/sources';
 export { RouterTransitionSnapshot } from '@real-router/sources';
+import * as _real_router_types from '@real-router/types';
 
 interface RouteViewProps {
     readonly nodeName: string;
@@ -101,7 +101,7 @@ interface RouterContextValue {
     routeSelector: (routeName: string) => boolean;
 }
 declare const RouterContext: solid_js.Context<RouterContextValue | null>;
-declare const RouteContext: solid_js.Context<Accessor<RouteState<_real_router_core.Params>> | null>;
+declare const RouteContext: solid_js.Context<Accessor<RouteState<_real_router_types.Params>> | null>;
 
 declare function createSignalFromSource<T>(source: RouterSource<T>): Accessor<T>;
 

package/dist/types/context.d.ts

@@ -7,5 +7,5 @@ export interface RouterContextValue {
     routeSelector: (routeName: string) => boolean;
 }
 export declare const RouterContext: import("solid-js", { with: { "resolution-mode": "import" } }).Context<RouterContextValue | null>;
-export declare const RouteContext: import("solid-js", { with: { "resolution-mode": "import" } }).Context<Accessor<RouteState<import("@real-router/core").Params>> | null>;
+export declare const RouteContext: import("solid-js", { with: { "resolution-mode": "import" } }).Context<Accessor<RouteState<import("@real-router/types").Params>> | null>;
 //# sourceMappingURL=context.d.ts.map

package/dist/types/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/context.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEzC,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,SAAS,CAAC;IACrB,aAAa,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC;CAC/C;AAED,eAAO,MAAM,aAAa,kGAAiD,CAAC;AAE5E,eAAO,MAAM,YAAY,wIAAmD,CAAC"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/context.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEzC,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,SAAS,CAAC;IACrB,aAAa,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC;CAC/C;AAED,eAAO,MAAM,aAAa,kGAAiD,CAAC;AAE5E,eAAO,MAAM,YAAY,yIAAmD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@real-router/solid",
-  "version": "0.2.8",
+  "version": "0.2.10",
   "type": "commonjs",
   "description": "Solid.js integration for Real-Router",
   "main": "./dist/cjs/index.js",
@@ -8,7 +8,6 @@
   "types": "./dist/cjs/index.d.ts",
   "exports": {
     ".": {
-      "development": "./src/index.tsx",
       "types": {
         "import": "./dist/esm/index.d.mts",
         "require": "./dist/cjs/index.d.ts"
@@ -18,7 +17,8 @@
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "homepage": "https://github.com/greydragon888/real-router",
   "repository": {
@@ -50,9 +50,9 @@
   "license": "MIT",
   "sideEffects": false,
   "dependencies": {
-    "@real-router/core": "^0.45.1",
-    "@real-router/route-utils": "^0.1.12",
-    "@real-router/sources": "^0.4.2"
+    "@real-router/core": "^0.46.0",
+    "@real-router/route-utils": "^0.1.14",
+    "@real-router/sources": "^0.4.4"
   },
   "devDependencies": {
     "@babel/core": "7.29.0",
@@ -70,8 +70,8 @@
     "solid-js": "1.9.12",
     "vite-plugin-solid": "2.11.11",
     "vitest": "4.1.0",
-    "dom-utils": "^0.2.7",
-    "@real-router/browser-plugin": "^0.11.5"
+    "dom-utils": "^0.2.8",
+    "@real-router/browser-plugin": "^0.11.7"
   },
   "peerDependencies": {
     "solid-js": ">=1.7.0"
@@ -79,10 +79,11 @@
   "scripts": {
     "build": "rimraf dist && tsc -p tsconfig.build.json && rollup -c rollup.config.mjs",
     "test": "vitest",
+    "test:properties": "vitest run --config vitest.config.properties.mts",
     "test:stress": "vitest run --config vitest.config.stress.mts",
     "type-check": "tsc --noEmit",
     "lint": "eslint --cache --ext .ts,.tsx src/ tests/ --fix --max-warnings 0",
-    "lint:package": "bash ../../scripts/publint-filter.sh",
+    "lint:package": "publint",
     "lint:types": "attw --pack .",
     "build:dist-only": "rimraf dist && tsc -p tsconfig.build.json && rollup -c rollup.config.mjs"
   }

package/src/RouterProvider.tsx

@@ -0,0 +1,60 @@
+import { getNavigator } from "@real-router/core";
+import { createRouteSource } from "@real-router/sources";
+import { createRouteAnnouncer } from "dom-utils";
+import { createSelector, onCleanup, onMount } from "solid-js";
+
+import { RouterContext, RouteContext } from "./context";
+import { createSignalFromSource } from "./createSignalFromSource";
+
+import type { Router } from "@real-router/core";
+import type { ParentProps, JSX } from "solid-js";
+
+export interface RouteProviderProps {
+  router: Router;
+  announceNavigation?: boolean;
+}
+
+function isRouteActive(
+  linkRouteName: string,
+  currentRouteName: string,
+): boolean {
+  return (
+    currentRouteName === linkRouteName ||
+    currentRouteName.startsWith(`${linkRouteName}.`)
+  );
+}
+
+export function RouterProvider(
+  props: ParentProps<RouteProviderProps>,
+): JSX.Element {
+  onMount(() => {
+    if (!props.announceNavigation) {
+      return;
+    }
+
+    const announcer = createRouteAnnouncer(props.router);
+
+    onCleanup(() => {
+      announcer.destroy();
+    });
+  });
+
+  const navigator = getNavigator(props.router);
+  const routeSource = createRouteSource(props.router);
+  const routeSignal = createSignalFromSource(routeSource);
+
+  const routeSelector = createSelector(
+    () => routeSignal().route?.name ?? "",
+    isRouteActive,
+  );
+
+  return (
+    <RouterContext.Provider
+      value={{ router: props.router, navigator, routeSelector }}
+    >
+      <RouteContext.Provider value={routeSignal}>
+        {props.children}
+      </RouteContext.Provider>
+    </RouterContext.Provider>
+  );
+}

package/src/components/Link.tsx

@@ -0,0 +1,96 @@
+import { createActiveRouteSource } from "@real-router/sources";
+import { shouldNavigate, buildHref, buildActiveClassName } from "dom-utils";
+import { createMemo, mergeProps, splitProps, useContext } from "solid-js";
+
+import { EMPTY_PARAMS, EMPTY_OPTIONS } from "../constants";
+import { RouterContext } from "../context";
+import { createSignalFromSource } from "../createSignalFromSource";
+import { useRouter } from "../hooks/useRouter";
+
+import type { LinkProps } from "../types";
+import type { Params } from "@real-router/core";
+import type { JSX } from "solid-js";
+
+export function Link<P extends Params = Params>(
+  props: Readonly<LinkProps<P>>,
+): JSX.Element {
+  const merged = mergeProps(
+    {
+      routeParams: EMPTY_PARAMS as P,
+      routeOptions: EMPTY_OPTIONS,
+      activeClassName: "active",
+      activeStrict: false,
+      ignoreQueryParams: true,
+    },
+    props,
+  );
+
+  const [local, rest] = splitProps(merged, [
+    "routeName",
+    "routeParams",
+    "routeOptions",
+    "activeClassName",
+    "activeStrict",
+    "ignoreQueryParams",
+    "onClick",
+    "target",
+    "class",
+    "children",
+  ]);
+
+  const router = useRouter();
+  const ctx = useContext(RouterContext);
+
+  const useFastPath =
+    ctx?.routeSelector &&
+    !local.activeStrict &&
+    local.ignoreQueryParams &&
+    local.routeParams === EMPTY_PARAMS;
+
+  const isActive = useFastPath
+    ? () => ctx.routeSelector(local.routeName)
+    : createSignalFromSource(
+        createActiveRouteSource(router, local.routeName, local.routeParams, {
+          strict: local.activeStrict,
+          ignoreQueryParams: local.ignoreQueryParams,
+        }),
+      );
+
+  const href = createMemo(() =>
+    buildHref(router, local.routeName, local.routeParams),
+  );
+
+  const handleClick = (evt: MouseEvent) => {
+    if (local.onClick) {
+      local.onClick(evt);
+
+      if (evt.defaultPrevented) {
+        return;
+      }
+    }
+
+    if (!shouldNavigate(evt) || local.target === "_blank") {
+      return;
+    }
+
+    evt.preventDefault();
+    router
+      .navigate(local.routeName, local.routeParams, local.routeOptions)
+      .catch(() => {});
+  };
+
+  const finalClassName = createMemo(() =>
+    buildActiveClassName(isActive(), local.activeClassName, local.class),
+  );
+
+  return (
+    <a
+      {...(rest as JSX.HTMLAttributes<HTMLAnchorElement>)}
+      href={href()}
+      class={finalClassName()}
+      onClick={handleClick}
+    >
+      {local.children}
+    </a>
+  );
+}

package/src/components/RouteView/RouteView.tsx

@@ -0,0 +1,53 @@
+import { children as resolveChildren } from "solid-js";
+
+import { Match, NotFound } from "./components";
+import { buildRenderList, collectElements } from "./helpers";
+import { useRouteNode } from "../../hooks/useRouteNode";
+
+import type { RouteViewMarker } from "./components";
+import type { RouteViewProps } from "./types";
+import type { JSX } from "solid-js";
+
+function RouteViewRoot(props: Readonly<RouteViewProps>): JSX.Element {
+  const routeState = useRouteNode(props.nodeName);
+
+  const resolved = resolveChildren(() => props.children);
+
+  return (
+    <>
+      {(() => {
+        const state = routeState();
+
+        if (!state.route) {
+          return null;
+        }
+
+        const elements: RouteViewMarker[] = [];
+
+        collectElements(resolved(), elements);
+
+        const { rendered } = buildRenderList(
+          elements,
+          state.route.name,
+          props.nodeName,
+        );
+
+        if (rendered.length > 0) {
+          return rendered;
+        }
+
+        return null;
+      })()}
+    </>
+  ) as unknown as JSX.Element;
+}
+
+RouteViewRoot.displayName = "RouteView";
+
+export const RouteView = Object.assign(RouteViewRoot, { Match, NotFound });
+
+export type {
+  RouteViewProps,
+  MatchProps as RouteViewMatchProps,
+  NotFoundProps as RouteViewNotFoundProps,
+} from "./types";

package/src/components/RouteView/components.tsx

@@ -0,0 +1,50 @@
+import type { MatchProps, NotFoundProps } from "./types";
+import type { JSX } from "solid-js";
+
+export const MATCH_MARKER = Symbol.for("RouteView.Match");
+
+export const NOT_FOUND_MARKER = Symbol.for("RouteView.NotFound");
+
+export interface MatchMarker {
+  $$type: typeof MATCH_MARKER;
+  segment: string;
+  exact: boolean;
+  fallback?: JSX.Element;
+  children: JSX.Element;
+}
+
+export interface NotFoundMarker {
+  $$type: typeof NOT_FOUND_MARKER;
+  children: JSX.Element;
+}
+
+export type RouteViewMarker = MatchMarker | NotFoundMarker;
+
+export function Match(props: MatchProps): JSX.Element {
+  const result = {
+    $$type: MATCH_MARKER,
+    segment: props.segment,
+    exact: props.exact ?? false,
+    fallback: props.fallback,
+    get children(): JSX.Element {
+      return props.children;
+    },
+  } as MatchMarker;
+
+  return result as unknown as JSX.Element;
+}
+
+Match.displayName = "RouteView.Match";
+
+export function NotFound(props: NotFoundProps): JSX.Element {
+  const result = {
+    $$type: NOT_FOUND_MARKER,
+    get children(): JSX.Element {
+      return props.children;
+    },
+  } as NotFoundMarker;
+
+  return result as unknown as JSX.Element;
+}
+
+NotFound.displayName = "RouteView.NotFound";

package/src/components/RouteView/helpers.tsx

@@ -0,0 +1,108 @@
+import { UNKNOWN_ROUTE } from "@real-router/core";
+import { startsWithSegment } from "@real-router/route-utils";
+import { Suspense } from "solid-js";
+
+import { MATCH_MARKER, NOT_FOUND_MARKER } from "./components";
+
+import type {
+  MatchMarker,
+  NotFoundMarker,
+  RouteViewMarker,
+} from "./components";
+import type { JSX } from "solid-js";
+
+function isSegmentMatch(
+  routeName: string,
+  fullSegmentName: string,
+  exact: boolean,
+): boolean {
+  if (exact) {
+    return routeName === fullSegmentName;
+  }
+
+  return startsWithSegment(routeName, fullSegmentName);
+}
+
+function isMatchMarker(value: unknown): value is MatchMarker {
+  return (
+    value != null &&
+    typeof value === "object" &&
+    "$$type" in value &&
+    value.$$type === MATCH_MARKER
+  );
+}
+
+function isNotFoundMarker(value: unknown): value is NotFoundMarker {
+  return (
+    value != null &&
+    typeof value === "object" &&
+    "$$type" in value &&
+    value.$$type === NOT_FOUND_MARKER
+  );
+}
+
+export function collectElements(
+  children: unknown,
+  result: RouteViewMarker[],
+): void {
+  if (children == null) {
+    return;
+  }
+
+  if (Array.isArray(children)) {
+    for (const child of children) {
+      collectElements(child, result);
+    }
+
+    return;
+  }
+
+  if (isMatchMarker(children) || isNotFoundMarker(children)) {
+    result.push(children);
+  }
+}
+
+export function buildRenderList(
+  elements: RouteViewMarker[],
+  routeName: string,
+  nodeName: string,
+): { rendered: JSX.Element[]; activeMatchFound: boolean } {
+  let notFoundChildren: JSX.Element | null = null;
+  let activeMatchFound = false;
+  const rendered: JSX.Element[] = [];
+
+  for (const child of elements) {
+    if (isNotFoundMarker(child)) {
+      notFoundChildren = child.children;
+      continue;
+    }
+
+    const { segment, exact, fallback } = child;
+    const fullSegmentName = nodeName ? `${nodeName}.${segment}` : segment;
+    const isActive =
+      !activeMatchFound && isSegmentMatch(routeName, fullSegmentName, exact);
+
+    if (isActive) {
+      activeMatchFound = true;
+      const matchContent = child.children;
+      const content =
+        fallback === undefined ? (
+          matchContent
+        ) : (
+          <Suspense fallback={fallback}>{matchContent}</Suspense>
+        );
+
+      rendered.push(content);
+    }
+  }
+
+  if (
+    !activeMatchFound &&
+    routeName === UNKNOWN_ROUTE &&
+    notFoundChildren !== null
+  ) {
+    rendered.push(notFoundChildren);
+  }
+
+  return { rendered, activeMatchFound };
+}

package/src/components/RouteView/index.ts

@@ -0,0 +1,7 @@
+export { RouteView } from "./RouteView";
+
+export type {
+  RouteViewProps,
+  RouteViewMatchProps,
+  RouteViewNotFoundProps,
+} from "./RouteView";

package/src/components/RouteView/types.ts

@@ -0,0 +1,17 @@
+import type { JSX } from "solid-js";
+
+export interface RouteViewProps {
+  readonly nodeName: string;
+  readonly children: JSX.Element;
+}
+
+export interface MatchProps {
+  readonly segment: string;
+  readonly exact?: boolean;
+  readonly fallback?: JSX.Element;
+  readonly children: JSX.Element;
+}
+
+export interface NotFoundProps {
+  readonly children: JSX.Element;
+}

package/src/components/RouterErrorBoundary.tsx

@@ -0,0 +1,53 @@
+import { createEffect, createMemo, createSignal } from "solid-js";
+
+import { useRouterError } from "../hooks/useRouterError";
+
+import type { RouterError, State } from "@real-router/core";
+import type { JSX } from "solid-js";
+
+export interface RouterErrorBoundaryProps {
+  readonly children: JSX.Element;
+  readonly fallback: (
+    error: RouterError,
+    resetError: () => void,
+  ) => JSX.Element;
+  readonly onError?: (
+    error: RouterError,
+    toRoute: State | null,
+    fromRoute: State | null,
+  ) => void;
+}
+
+export function RouterErrorBoundary(
+  props: RouterErrorBoundaryProps,
+): JSX.Element {
+  const snapshot = useRouterError();
+  const [dismissedVersion, setDismissedVersion] = createSignal(-1);
+
+  createEffect(() => {
+    const snap = snapshot();
+
+    if (snap.error) {
+      props.onError?.(snap.error, snap.toRoute, snap.fromRoute);
+    }
+  });
+
+  const visibleError = createMemo(() => {
+    const snap = snapshot();
+
+    return snap.version > dismissedVersion() ? snap.error : null;
+  });
+
+  const resetError = () => setDismissedVersion(snapshot().version);
+
+  return (
+    <>
+      {props.children}
+      {(() => {
+        const error = visibleError();
+
+        return error ? props.fallback(error, resetError) : null;
+      })()}
+    </>
+  );
+}

package/src/constants.ts

@@ -0,0 +1,9 @@
+/**
+ * Stable empty object for default params
+ */
+export const EMPTY_PARAMS = Object.freeze({});
+
+/**
+ * Stable empty options object
+ */
+export const EMPTY_OPTIONS = Object.freeze({});

package/src/context.ts

@@ -0,0 +1,15 @@
+import { createContext } from "solid-js";
+
+import type { RouteState } from "./types";
+import type { Router, Navigator } from "@real-router/core";
+import type { Accessor } from "solid-js";
+
+export interface RouterContextValue {
+  router: Router;
+  navigator: Navigator;
+  routeSelector: (routeName: string) => boolean;
+}
+
+export const RouterContext = createContext<RouterContextValue | null>(null);
+
+export const RouteContext = createContext<Accessor<RouteState> | null>(null);

package/src/createSignalFromSource.ts

@@ -0,0 +1,20 @@
+import { createSignal, onCleanup } from "solid-js";
+
+import type { RouterSource } from "@real-router/sources";
+import type { Accessor } from "solid-js";
+
+export function createSignalFromSource<T>(
+  source: RouterSource<T>,
+): Accessor<T> {
+  const [value, setValue] = createSignal<T>(source.getSnapshot());
+
+  const unsubscribe = source.subscribe(() => {
+    setValue(() => source.getSnapshot());
+  });
+
+  onCleanup(() => {
+    unsubscribe();
+  });
+
+  return value;
+}

package/src/createStoreFromSource.ts

@@ -0,0 +1,20 @@
+import { onCleanup } from "solid-js";
+import { createStore, reconcile } from "solid-js/store";
+
+import type { RouterSource } from "@real-router/sources";
+
+export function createStoreFromSource<T extends object>(
+  source: RouterSource<T>,
+): T {
+  const [state, setState] = createStore<T>(
+    structuredClone(source.getSnapshot()),
+  );
+
+  const unsubscribe = source.subscribe(() => {
+    setState(reconcile(source.getSnapshot()));
+  });
+
+  onCleanup(unsubscribe);
+
+  return state;
+}

package/src/directives/link.tsx

@@ -0,0 +1,86 @@
+import { createActiveRouteSource } from "@real-router/sources";
+import { shouldNavigate, applyLinkA11y, buildHref } from "dom-utils";
+import { createEffect, onCleanup } from "solid-js";
+
+import { EMPTY_PARAMS, EMPTY_OPTIONS } from "../constants";
+import { createSignalFromSource } from "../createSignalFromSource";
+import { useRouter } from "../hooks/useRouter";
+
+import type { Params } from "@real-router/core";
+
+export interface LinkDirectiveOptions<P extends Params = Params> {
+  routeName: string;
+  routeParams?: P;
+  routeOptions?: Record<string, unknown>;
+  activeClassName?: string;
+  activeStrict?: boolean;
+  ignoreQueryParams?: boolean;
+}
+
+export function link<P extends Params = Params>(
+  element: HTMLElement,
+  accessor: () => LinkDirectiveOptions<P>,
+): void {
+  const router = useRouter();
+  const options = accessor();
+
+  // Set href on <a> elements
+  if (element instanceof HTMLAnchorElement) {
+    const href = buildHref(
+      router,
+      options.routeName,
+      options.routeParams ?? (EMPTY_PARAMS as P),
+    );
+
+    if (href === undefined) {
+      element.removeAttribute("href");
+    } else {
+      element.href = href;
+    }
+  }
+
+  applyLinkA11y(element);
+
+  // Active class tracking (reactive)
+  if (options.activeClassName) {
+    const activeClassName = options.activeClassName;
+    const activeSource = createActiveRouteSource(
+      router,
+      options.routeName,
+      options.routeParams ?? (EMPTY_PARAMS as P),
+      {
+        strict: options.activeStrict ?? false,
+        ignoreQueryParams: options.ignoreQueryParams ?? true,
+      },
+    );
+    const isActive = createSignalFromSource(activeSource);
+
+    createEffect(() => {
+      element.classList.toggle(activeClassName, isActive());
+    });
+  }
+
+  // Click handler
+  function handleClick(evt: MouseEvent) {
+    if (!shouldNavigate(evt)) {
+      return;
+    }
+    if (element instanceof HTMLAnchorElement) {
+      evt.preventDefault();
+    }
+
+    router
+      .navigate(
+        options.routeName,
+        options.routeParams ?? (EMPTY_PARAMS as P),
+        options.routeOptions ?? EMPTY_OPTIONS,
+      )
+      .catch(() => {});
+  }
+
+  element.addEventListener("click", handleClick);
+
+  onCleanup(() => {
+    element.removeEventListener("click", handleClick);
+  });
+}

package/src/directives.d.ts

@@ -0,0 +1,10 @@
+import type { LinkDirectiveOptions } from "./directives/link";
+
+declare module "solid-js" {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace JSX {
+    interface Directives {
+      link: LinkDirectiveOptions | undefined;
+    }
+  }
+}

package/src/hooks/useNavigator.tsx

@@ -0,0 +1,15 @@
+import { useContext } from "solid-js";
+
+import { RouterContext } from "../context";
+
+import type { Navigator } from "@real-router/core";
+
+export const useNavigator = (): Navigator => {
+  const ctx = useContext(RouterContext);
+
+  if (!ctx) {
+    throw new Error("useNavigator must be used within a RouterProvider");
+  }
+
+  return ctx.navigator;
+};

package/src/hooks/useRoute.tsx

@@ -0,0 +1,16 @@
+import { useContext } from "solid-js";
+
+import { RouteContext } from "../context";
+
+import type { RouteState } from "../types";
+import type { Accessor } from "solid-js";
+
+export const useRoute = (): Accessor<RouteState> => {
+  const routeSignal = useContext(RouteContext);
+
+  if (!routeSignal) {
+    throw new Error("useRoute must be used within a RouterProvider");
+  }
+
+  return routeSignal;
+};

package/src/hooks/useRouteNode.tsx

@@ -0,0 +1,14 @@
+import { createRouteNodeSource } from "@real-router/sources";
+
+import { createSignalFromSource } from "../createSignalFromSource";
+import { useRouter } from "./useRouter";
+
+import type { RouteState } from "../types";
+import type { Accessor } from "solid-js";
+
+export function useRouteNode(nodeName: string): Accessor<RouteState> {
+  const router = useRouter();
+  const store = createRouteNodeSource(router, nodeName);
+
+  return createSignalFromSource(store);
+}

package/src/hooks/useRouteNodeStore.tsx

@@ -0,0 +1,12 @@
+import { createRouteNodeSource } from "@real-router/sources";
+
+import { createStoreFromSource } from "../createStoreFromSource";
+import { useRouter } from "./useRouter";
+
+import type { RouteState } from "../types";
+
+export function useRouteNodeStore(nodeName: string): RouteState {
+  const router = useRouter();
+
+  return createStoreFromSource(createRouteNodeSource(router, nodeName));
+}

package/src/hooks/useRouteStore.tsx

@@ -0,0 +1,20 @@
+import { createRouteSource } from "@real-router/sources";
+import { useContext } from "solid-js";
+
+import { RouteContext } from "../context";
+import { createStoreFromSource } from "../createStoreFromSource";
+import { useRouter } from "./useRouter";
+
+import type { RouteState } from "../types";
+
+export function useRouteStore(): RouteState {
+  const ctx = useContext(RouteContext);
+
+  if (!ctx) {
+    throw new Error("useRouteStore must be used within a RouterProvider");
+  }
+
+  const router = useRouter();
+
+  return createStoreFromSource(createRouteSource(router));
+}

package/src/hooks/useRouteUtils.tsx

@@ -0,0 +1,12 @@
+import { getPluginApi } from "@real-router/core/api";
+import { getRouteUtils } from "@real-router/route-utils";
+
+import { useRouter } from "./useRouter";
+
+import type { RouteUtils } from "@real-router/route-utils";
+
+export const useRouteUtils = (): RouteUtils => {
+  const router = useRouter();
+
+  return getRouteUtils(getPluginApi(router).getTree());
+};

package/src/hooks/useRouter.tsx

@@ -0,0 +1,15 @@
+import { useContext } from "solid-js";
+
+import { RouterContext } from "../context";
+
+import type { Router } from "@real-router/core";
+
+export const useRouter = (): Router => {
+  const ctx = useContext(RouterContext);
+
+  if (!ctx) {
+    throw new Error("useRouter must be used within a RouterProvider");
+  }
+
+  return ctx.router;
+};

package/src/hooks/useRouterError.tsx

@@ -0,0 +1,23 @@
+import { createErrorSource } from "@real-router/sources";
+
+import { createSignalFromSource } from "../createSignalFromSource";
+import { useRouter } from "./useRouter";
+
+import type { Router } from "@real-router/core";
+import type { RouterErrorSnapshot, RouterSource } from "@real-router/sources";
+import type { Accessor } from "solid-js";
+
+const cache = new WeakMap<Router, RouterSource<RouterErrorSnapshot>>();
+
+export function useRouterError(): Accessor<RouterErrorSnapshot> {
+  const router = useRouter();
+
+  let source = cache.get(router);
+
+  if (!source) {
+    source = createErrorSource(router);
+    cache.set(router, source);
+  }
+
+  return createSignalFromSource(source);
+}

package/src/hooks/useRouterTransition.tsx

@@ -0,0 +1,14 @@
+import { createTransitionSource } from "@real-router/sources";
+
+import { createSignalFromSource } from "../createSignalFromSource";
+import { useRouter } from "./useRouter";
+
+import type { RouterTransitionSnapshot } from "@real-router/sources";
+import type { Accessor } from "solid-js";
+
+export function useRouterTransition(): Accessor<RouterTransitionSnapshot> {
+  const router = useRouter();
+  const store = createTransitionSource(router);
+
+  return createSignalFromSource(store);
+}

package/src/index.tsx

@@ -0,0 +1,47 @@
+export { RouteView } from "./components/RouteView";
+
+export { Link } from "./components/Link";
+
+export { RouterErrorBoundary } from "./components/RouterErrorBoundary";
+
+export { link } from "./directives/link";
+
+export { useRouter } from "./hooks/useRouter";
+
+export { useNavigator } from "./hooks/useNavigator";
+
+export { useRouteUtils } from "./hooks/useRouteUtils";
+
+export { useRoute } from "./hooks/useRoute";
+
+export { useRouteNode } from "./hooks/useRouteNode";
+
+export { useRouteStore } from "./hooks/useRouteStore";
+
+export { useRouteNodeStore } from "./hooks/useRouteNodeStore";
+
+export { useRouterTransition } from "./hooks/useRouterTransition";
+
+export { RouterProvider } from "./RouterProvider";
+
+export { RouterContext, RouteContext } from "./context";
+
+export { createSignalFromSource } from "./createSignalFromSource";
+
+export { createStoreFromSource } from "./createStoreFromSource";
+
+export type { LinkProps, RouteState } from "./types";
+
+export type { RouterErrorBoundaryProps } from "./components/RouterErrorBoundary";
+
+export type { LinkDirectiveOptions } from "./directives/link";
+
+export type {
+  RouteViewProps,
+  RouteViewMatchProps,
+  RouteViewNotFoundProps,
+} from "./components/RouteView";
+
+export type { Navigator } from "@real-router/core";
+
+export type { RouterTransitionSnapshot } from "@real-router/sources";

package/src/types.ts

@@ -0,0 +1,21 @@
+import type { NavigationOptions, Params, State } from "@real-router/core";
+import type { JSX } from "solid-js";
+
+export interface RouteState<P extends Params = Params> {
+  route: State<P> | undefined;
+  previousRoute?: State | undefined;
+}
+
+export interface LinkProps<P extends Params = Params> extends Omit<
+  JSX.HTMLAttributes<HTMLAnchorElement>,
+  "onClick"
+> {
+  routeName: string;
+  routeParams?: P;
+  routeOptions?: NavigationOptions;
+  activeClassName?: string;
+  activeStrict?: boolean;
+  ignoreQueryParams?: boolean;
+  target?: string;
+  onClick?: (evt: MouseEvent) => void;
+}