@real-router/solid 0.1.2 → 0.2.0

package/README.md

@@ -192,6 +192,27 @@ Without `fallback`, no `<Suspense>` boundary is added. The prop is optional.
 
 > **Note:** `keepAlive` is not supported. Solid has no equivalent of React's `<Activity>` API. Components dispose completely when navigating away.
 
+### `<RouterErrorBoundary>`
+
+Declarative error handling for navigation errors. Shows a fallback **alongside** children (not instead of) when a guard rejects or a route is not found.
+
+```tsx
+import { RouterErrorBoundary } from "@real-router/solid";
+
+<RouterErrorBoundary
+  fallback={(error, resetError) => (
+    <div class="toast">
+      {error.code} <button onClick={resetError}>Dismiss</button>
+    </div>
+  )}
+  onError={(error) => analytics.track("nav_error", { code: error.code })}
+>
+  <Link routeName="protected">Go to Protected</Link>
+</RouterErrorBoundary>;
+```
+
+Auto-resets on next successful navigation. Works with both `<Link>` and imperative `router.navigate()`.
+
 ## Directives
 
 ### `use:link`
@@ -292,7 +313,7 @@ When enabled, a visually hidden `aria-live` region announces each navigation. Fo
 
 Full documentation: [Wiki](https://github.com/greydragon888/real-router/wiki)
 
-- [RouterProvider](https://github.com/greydragon888/real-router/wiki/RouterProvider) · [RouteView](https://github.com/greydragon888/real-router/wiki/RouteView) · [Link](https://github.com/greydragon888/real-router/wiki/Link)
+- [RouterProvider](https://github.com/greydragon888/real-router/wiki/RouterProvider) · [RouteView](https://github.com/greydragon888/real-router/wiki/RouteView) · [RouterErrorBoundary](https://github.com/greydragon888/real-router/wiki/RouterErrorBoundary) · [Link](https://github.com/greydragon888/real-router/wiki/Link)
 - [useRouter](https://github.com/greydragon888/real-router/wiki/useRouter) · [useRoute](https://github.com/greydragon888/real-router/wiki/useRoute) · [useRouteNode](https://github.com/greydragon888/real-router/wiki/useRouteNode) · [useNavigator](https://github.com/greydragon888/real-router/wiki/useNavigator) · [useRouteUtils](https://github.com/greydragon888/real-router/wiki/useRouteUtils) · [useRouterTransition](https://github.com/greydragon888/real-router/wiki/useRouterTransition)
 
 ## Examples

package/dist/cjs/index.d.ts

@@ -1,7 +1,7 @@
 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, Router, Navigator } 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';
@@ -56,6 +56,13 @@ interface LinkProps<P extends Params = Params> extends Omit<JSX.HTMLAttributes<H
 
 declare function Link<P extends Params = Params>(props: Readonly<LinkProps<P>>): JSX.Element;
 
+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;
+}
+declare function RouterErrorBoundary(props: RouterErrorBoundaryProps): JSX.Element;
+
 interface LinkDirectiveOptions<P extends Params = Params> {
     routeName: string;
     routeParams?: P;
@@ -100,5 +107,5 @@ declare function createSignalFromSource<T>(source: RouterSource<T>): Accessor<T>
 
 declare function createStoreFromSource<T extends object>(source: RouterSource<T>): T;
 
-export { Link, RouteContext, RouteView, RouterContext, RouterProvider, createSignalFromSource, createStoreFromSource, link, useNavigator, useRoute, useRouteNode, useRouteNodeStore, useRouteStore, useRouteUtils, useRouter, useRouterTransition };
-export type { LinkDirectiveOptions, LinkProps, RouteState, MatchProps as RouteViewMatchProps, NotFoundProps as RouteViewNotFoundProps, RouteViewProps };
+export { Link, RouteContext, RouteView, RouterContext, RouterErrorBoundary, RouterProvider, createSignalFromSource, createStoreFromSource, link, useNavigator, useRoute, useRouteNode, useRouteNodeStore, useRouteStore, useRouteUtils, useRouter, useRouterTransition };
+export type { LinkDirectiveOptions, LinkProps, RouteState, MatchProps as RouteViewMatchProps, NotFoundProps as RouteViewNotFoundProps, RouteViewProps, RouterErrorBoundaryProps };

package/dist/cjs/index.js

@@ -208,6 +208,37 @@ function Link(props) {
   })();
 }
 
+const cache = new WeakMap();
+function useRouterError() {
+  const router = useRouter();
+  let source = cache.get(router);
+  if (!source) {
+    source = sources.createErrorSource(router);
+    cache.set(router, source);
+  }
+  return createSignalFromSource(source);
+}
+
+function RouterErrorBoundary(props) {
+  const snapshot = useRouterError();
+  const [dismissedVersion, setDismissedVersion] = solidJs.createSignal(-1);
+  solidJs.createEffect(() => {
+    const snap = snapshot();
+    if (snap.error) {
+      props.onError?.(snap.error, snap.toRoute, snap.fromRoute);
+    }
+  });
+  const visibleError = solidJs.createMemo(() => {
+    const snap = snapshot();
+    return snap.version > dismissedVersion() ? snap.error : null;
+  });
+  const resetError = () => setDismissedVersion(snapshot().version);
+  return [web.memo(() => props.children), web.memo(() => {
+    const error = visibleError();
+    return error ? props.fallback(error, resetError) : null;
+  })];
+}
+
 function link(element, accessor) {
   const router = useRouter();
   const options = accessor();
@@ -337,6 +368,7 @@ exports.Link = Link;
 exports.RouteContext = RouteContext;
 exports.RouteView = RouteView;
 exports.RouterContext = RouterContext;
+exports.RouterErrorBoundary = RouterErrorBoundary;
 exports.RouterProvider = RouterProvider;
 exports.createSignalFromSource = createSignalFromSource;
 exports.createStoreFromSource = createStoreFromSource;

package/dist/esm/index.d.mts

@@ -1,7 +1,7 @@
 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, Router, Navigator } 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';
@@ -56,6 +56,13 @@ interface LinkProps<P extends Params = Params> extends Omit<JSX.HTMLAttributes<H
 
 declare function Link<P extends Params = Params>(props: Readonly<LinkProps<P>>): JSX.Element;
 
+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;
+}
+declare function RouterErrorBoundary(props: RouterErrorBoundaryProps): JSX.Element;
+
 interface LinkDirectiveOptions<P extends Params = Params> {
     routeName: string;
     routeParams?: P;
@@ -100,5 +107,5 @@ declare function createSignalFromSource<T>(source: RouterSource<T>): Accessor<T>
 
 declare function createStoreFromSource<T extends object>(source: RouterSource<T>): T;
 
-export { Link, RouteContext, RouteView, RouterContext, RouterProvider, createSignalFromSource, createStoreFromSource, link, useNavigator, useRoute, useRouteNode, useRouteNodeStore, useRouteStore, useRouteUtils, useRouter, useRouterTransition };
-export type { LinkDirectiveOptions, LinkProps, RouteState, MatchProps as RouteViewMatchProps, NotFoundProps as RouteViewNotFoundProps, RouteViewProps };
+export { Link, RouteContext, RouteView, RouterContext, RouterErrorBoundary, RouterProvider, createSignalFromSource, createStoreFromSource, link, useNavigator, useRoute, useRouteNode, useRouteNodeStore, useRouteStore, useRouteUtils, useRouter, useRouterTransition };
+export type { LinkDirectiveOptions, LinkProps, RouteState, MatchProps as RouteViewMatchProps, NotFoundProps as RouteViewNotFoundProps, RouteViewProps, RouterErrorBoundaryProps };

package/dist/esm/index.mjs

@@ -1,5 +1,5 @@
 import { createComponent, memo, spread, mergeProps as mergeProps$1, insert, template } from 'solid-js/web';
-import { createRouteNodeSource, createActiveRouteSource, createRouteSource, createTransitionSource } from '@real-router/sources';
+import { createRouteNodeSource, createActiveRouteSource, createErrorSource, createRouteSource, createTransitionSource } from '@real-router/sources';
 import { Suspense, createSignal, onCleanup, createContext, useContext, children, mergeProps, splitProps, createMemo, createEffect, onMount, createSelector } from 'solid-js';
 import { getPluginApi } from '@real-router/core/api';
 import { startsWithSegment, getRouteUtils } from '@real-router/route-utils';
@@ -206,6 +206,37 @@ function Link(props) {
   })();
 }
 
+const cache = new WeakMap();
+function useRouterError() {
+  const router = useRouter();
+  let source = cache.get(router);
+  if (!source) {
+    source = createErrorSource(router);
+    cache.set(router, source);
+  }
+  return createSignalFromSource(source);
+}
+
+function RouterErrorBoundary(props) {
+  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 [memo(() => props.children), memo(() => {
+    const error = visibleError();
+    return error ? props.fallback(error, resetError) : null;
+  })];
+}
+
 function link(element, accessor) {
   const router = useRouter();
   const options = accessor();
@@ -331,4 +362,4 @@ function RouterProvider(props) {
   });
 }
 
-export { Link, RouteContext, RouteView, RouterContext, RouterProvider, createSignalFromSource, createStoreFromSource, link, useNavigator, useRoute, useRouteNode, useRouteNodeStore, useRouteStore, useRouteUtils, useRouter, useRouterTransition };
+export { Link, RouteContext, RouteView, RouterContext, RouterErrorBoundary, RouterProvider, createSignalFromSource, createStoreFromSource, link, useNavigator, useRoute, useRouteNode, useRouteNodeStore, useRouteStore, useRouteUtils, useRouter, useRouterTransition };

package/dist/types/components/RouterErrorBoundary.d.ts

@@ -0,0 +1,9 @@
+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 declare function RouterErrorBoundary(props: RouterErrorBoundaryProps): JSX.Element;
+//# sourceMappingURL=RouterErrorBoundary.d.ts.map

package/dist/types/components/RouterErrorBoundary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RouterErrorBoundary.d.ts","sourceRoot":"","sources":["../../../src/components/RouterErrorBoundary.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAEpC,MAAM,WAAW,wBAAwB;IACvC,QAAQ,CAAC,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;IAC/B,QAAQ,CAAC,QAAQ,EAAE,CACjB,KAAK,EAAE,WAAW,EAClB,UAAU,EAAE,MAAM,IAAI,KACnB,GAAG,CAAC,OAAO,CAAC;IACjB,QAAQ,CAAC,OAAO,CAAC,EAAE,CACjB,KAAK,EAAE,WAAW,EAClB,OAAO,EAAE,KAAK,GAAG,IAAI,EACrB,SAAS,EAAE,KAAK,GAAG,IAAI,KACpB,IAAI,CAAC;CACX;AAED,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,wBAAwB,GAC9B,GAAG,CAAC,OAAO,CA8Bb"}

package/dist/types/hooks/useRouterError.d.ts

@@ -0,0 +1,4 @@
+import type { RouterErrorSnapshot } from "@real-router/sources";
+import type { Accessor } from "solid-js";
+export declare function useRouterError(): Accessor<RouterErrorSnapshot>;
+//# sourceMappingURL=useRouterError.d.ts.map

package/dist/types/hooks/useRouterError.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRouterError.d.ts","sourceRoot":"","sources":["../../../src/hooks/useRouterError.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,mBAAmB,EAAgB,MAAM,sBAAsB,CAAC;AAC9E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAIzC,wBAAgB,cAAc,IAAI,QAAQ,CAAC,mBAAmB,CAAC,CAW9D"}

package/dist/types/index.d.ts

@@ -1,5 +1,6 @@
 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";
@@ -14,6 +15,7 @@ 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";

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAEnD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAE9C,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEpD,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEtD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEpD,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAE9D,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAElE,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAExD,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,YAAY,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErD,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE9D,YAAY,EACV,cAAc,EACd,mBAAmB,EACnB,sBAAsB,GACvB,MAAM,wBAAwB,CAAC;AAEhC,YAAY,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEnD,YAAY,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAEnD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAEvE,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAE9C,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEpD,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEtD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEpD,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAE9D,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAElE,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAExD,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,YAAY,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErD,YAAY,EAAE,wBAAwB,EAAE,MAAM,kCAAkC,CAAC;AAEjF,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE9D,YAAY,EACV,cAAc,EACd,mBAAmB,EACnB,sBAAsB,GACvB,MAAM,wBAAwB,CAAC;AAEhC,YAAY,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEnD,YAAY,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@real-router/solid",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "type": "commonjs",
   "description": "Solid.js integration for Real-Router",
   "main": "./dist/cjs/index.js",
@@ -51,9 +51,9 @@
   "license": "MIT",
   "sideEffects": false,
   "dependencies": {
-    "@real-router/core": "^0.40.0",
     "@real-router/route-utils": "^0.1.6",
-    "@real-router/sources": "^0.2.7",
+    "@real-router/core": "^0.40.1",
+    "@real-router/sources": "^0.3.0",
     "dom-utils": "^0.2.2"
   },
   "devDependencies": {
@@ -72,7 +72,7 @@
     "solid-js": "1.9.5",
     "vite-plugin-solid": "2.11.11",
     "vitest": "4.1.0",
-    "@real-router/browser-plugin": "^0.10.5"
+    "@real-router/browser-plugin": "^0.10.6"
   },
   "peerDependencies": {
     "solid-js": ">=1.7.0"
@@ -84,6 +84,7 @@
     "type-check": "tsc --noEmit",
     "lint": "eslint --cache --ext .ts,.tsx src/ tests/ --fix --max-warnings 0",
     "lint:package": "publint",
-    "lint:types": "attw --pack ."
+    "lint:types": "attw --pack .",
+    "build:dist-only": "rimraf dist && tsc -p tsconfig.build.json && rollup -c rollup.config.mjs"
   }
 }

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/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/index.tsx

@@ -2,6 +2,8 @@ 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";
@@ -30,6 +32,8 @@ export { createStoreFromSource } from "./createStoreFromSource";
 
 export type { LinkProps, RouteState } from "./types";
 
+export type { RouterErrorBoundaryProps } from "./components/RouterErrorBoundary";
+
 export type { LinkDirectiveOptions } from "./directives/link";
 
 export type {