@rpcbase/client 0.290.0 → 0.292.0

package/dist/components/RouteErrorBoundary.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { SsrErrorStatePayload } from '../ssrErrorState';
+type RenderErrorExtra = (state: SsrErrorStatePayload) => ReactNode;
+type RouteErrorBoundaryProps = {
+    renderErrorExtra?: RenderErrorExtra;
+};
+export declare const RouteErrorBoundary: ({ renderErrorExtra }: RouteErrorBoundaryProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=RouteErrorBoundary.d.ts.map

package/dist/components/RouteErrorBoundary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RouteErrorBoundary.d.ts","sourceRoot":"","sources":["../../src/components/RouteErrorBoundary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAIjC,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAA;AAGvD,KAAK,gBAAgB,GAAG,CAAC,KAAK,EAAE,oBAAoB,KAAK,SAAS,CAAA;AAElE,KAAK,uBAAuB,GAAG;IAC7B,gBAAgB,CAAC,EAAE,gBAAgB,CAAA;CACpC,CAAA;AAkDD,eAAO,MAAM,kBAAkB,GAAI,sBAAsB,uBAAuB,4CAU/E,CAAA"}

package/dist/components/SsrErrorFallback.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { SsrErrorStatePayload } from '../ssrErrorState';
+type RenderErrorExtra = (state: SsrErrorStatePayload) => ReactNode;
+type SsrErrorFallbackProps = {
+    state: SsrErrorStatePayload;
+    renderErrorExtra?: RenderErrorExtra;
+};
+export declare const SsrErrorFallback: ({ state, renderErrorExtra }: SsrErrorFallbackProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SsrErrorFallback.d.ts.map

package/dist/components/SsrErrorFallback.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SsrErrorFallback.d.ts","sourceRoot":"","sources":["../../src/components/SsrErrorFallback.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAA;AAGvD,KAAK,gBAAgB,GAAG,CAAC,KAAK,EAAE,oBAAoB,KAAK,SAAS,CAAA;AAElE,KAAK,qBAAqB,GAAG;IAC3B,KAAK,EAAE,oBAAoB,CAAA;IAC3B,gBAAgB,CAAC,EAAE,gBAAgB,CAAA;CACpC,CAAA;AAKD,eAAO,MAAM,gBAAgB,GAAI,6BAA6B,qBAAqB,4CAoClF,CAAA"}

package/dist/index.d.ts

@@ -4,4 +4,7 @@ export * from './types';
 export * from './getFeatureFlag';
 export * from './RootProvider';
 export * from './hooks';
+export * from './ssrErrorState';
+export * from './components/SsrErrorFallback';
+export * from './components/RouteErrorBoundary';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,kBAAkB,CAAA;AAChC,cAAc,SAAS,CAAA;AACvB,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,kBAAkB,CAAA;AAChC,cAAc,SAAS,CAAA;AACvB,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,SAAS,CAAA;AACvB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,+BAA+B,CAAA;AAC7C,cAAc,iCAAiC,CAAA"}

package/dist/index.js

@@ -1,7 +1,7 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { StrictMode, useRef, useEffect, useCallback, useState, useSyncExternalStore } from "react";
 import posthog from "posthog-js";
-import { createRoutesFromElements, createBrowserRouter, RouterProvider, useLocation } from "@rpcbase/router";
+import { createRoutesFromElements, createBrowserRouter, RouterProvider, useLocation, useRouteError, isRouteErrorResponse } from "@rpcbase/router";
 import { hydrateRoot } from "react-dom/client";
 import { PostHogProvider } from "posthog-js/react/dist/esm/index.js";
 import useMeasure from "react-use/esm/useMeasure.js";
@@ -77,6 +77,53 @@ const cleanupURL = () => {
     document.addEventListener("DOMContentLoaded", runCleanup, { once: true });
   }
 };
+const SSR_ERROR_STATE_GLOBAL_KEY = "__RPCBASE_SSR_ERROR__";
+const ESCAPED_LT = /</g;
+const ESCAPED_U2028 = /\u2028/g;
+const ESCAPED_U2029 = /\u2029/g;
+const serializeSsrErrorState = (state) => JSON.stringify(state).replace(ESCAPED_LT, "\\u003c").replace(ESCAPED_U2028, "\\u2028").replace(ESCAPED_U2029, "\\u2029");
+const peekClientSsrErrorState = () => {
+  if (typeof window === "undefined") {
+    return null;
+  }
+  const globalScope = window;
+  const state = globalScope[SSR_ERROR_STATE_GLOBAL_KEY];
+  if (state && typeof state === "object") {
+    return state;
+  }
+  return null;
+};
+const consumeClientSsrErrorState = () => {
+  const state = peekClientSsrErrorState();
+  if (!state) {
+    return null;
+  }
+  if (typeof window !== "undefined") {
+    delete window[SSR_ERROR_STATE_GLOBAL_KEY];
+  }
+  return state;
+};
+const DEFAULT_TITLE = "Something went wrong";
+const DEFAULT_MESSAGE = "We couldn't render this page. Please try again in a few seconds.";
+const SsrErrorFallback = ({ state, renderErrorExtra }) => {
+  const {
+    statusCode = 500,
+    title = DEFAULT_TITLE,
+    message = DEFAULT_MESSAGE,
+    details
+  } = state;
+  const extra = renderErrorExtra?.(state);
+  return /* @__PURE__ */ jsx("div", { className: "bg-white min-h-screen", children: /* @__PURE__ */ jsxs("main", { className: "mx-auto flex min-h-screen max-w-2xl flex-col items-center justify-center px-6 py-12 text-center sm:py-24", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-base font-semibold text-rose-600", children: statusCode }),
+    /* @__PURE__ */ jsx("h1", { className: "mt-4 text-pretty text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl", children: title }),
+    /* @__PURE__ */ jsx("p", { className: "mt-6 text-lg text-gray-600 sm:text-xl/relaxed", children: message }),
+    details ? /* @__PURE__ */ jsxs("div", { className: "mt-10 w-full rounded-2xl bg-gray-900/95 p-5 text-left shadow-2xl", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold uppercase tracking-wide text-gray-400", children: "Debug details" }),
+      /* @__PURE__ */ jsx("pre", { className: "mt-3 max-h-64 overflow-auto whitespace-pre-wrap text-sm text-gray-100", children: details })
+    ] }) : null,
+    extra ? /* @__PURE__ */ jsx("div", { className: "mt-10 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-center", children: extra }) : null
+  ] }) });
+};
 const isProduction = globalThis.__rb_env__.MODE === "production";
 const showErrorOverlay = (err) => {
   const ErrorOverlay = customElements.get("vite-error-overlay");
@@ -98,7 +145,30 @@ const handleServerErrors = () => {
     });
   }
 };
+const getRootElement = () => {
+  const el = document.getElementById("root");
+  if (!el) {
+    throw new Error("Root element #root not found");
+  }
+  return el;
+};
+const hydrateSsrFallbackIfPresent = (rootElement, renderErrorExtra) => {
+  const ssrErrorState = peekClientSsrErrorState();
+  if (!ssrErrorState) {
+    return false;
+  }
+  consumeClientSsrErrorState();
+  hydrateRoot(
+    rootElement,
+    /* @__PURE__ */ jsx(StrictMode, { children: /* @__PURE__ */ jsx(SsrErrorFallback, { state: ssrErrorState, renderErrorExtra }) })
+  );
+  return true;
+};
 const initWithRoutes = async (routesElement, opts) => {
+  const rootElement = getRootElement();
+  if (hydrateSsrFallbackIfPresent(rootElement, opts?.renderErrorExtra)) {
+    return;
+  }
   await initApiClient();
   cleanupURL();
   handleServerErrors();
@@ -143,7 +213,7 @@ const initWithRoutes = async (routesElement, opts) => {
     }
   } : void 0;
   hydrateRoot(
-    document.getElementById("root"),
+    rootElement,
     /* @__PURE__ */ jsx(StrictMode, { children: /* @__PURE__ */ jsx(RouterProvider, { router }) }),
     hydrationOptions
   );
@@ -1514,12 +1584,70 @@ const useMediaQuery = (query) => {
   };
   return useSyncExternalStore(subscribe, getSnapshot, () => false);
 };
+const defaultState = {
+  statusCode: 500,
+  title: "Something went wrong",
+  message: "We couldn't render this route. Please try again shortly."
+};
+const toSsrErrorState = (error) => {
+  if (isRouteErrorResponse(error)) {
+    const data = error.data;
+    const message = typeof data === "string" ? data : data?.message || defaultState.message;
+    let details;
+    if (globalThis.__rb_env__.DEV && data && typeof data !== "string") {
+      try {
+        details = JSON.stringify(data, null, 2);
+      } catch {
+        details = void 0;
+      }
+    }
+    return {
+      statusCode: error.status ?? defaultState.statusCode,
+      title: error.statusText || defaultState.title,
+      message,
+      details
+    };
+  }
+  if (error instanceof Error) {
+    return {
+      statusCode: defaultState.statusCode,
+      title: defaultState.title,
+      message: error.message || defaultState.message,
+      details: globalThis.__rb_env__.DEV ? error.stack ?? error.message : void 0
+    };
+  }
+  if (typeof error === "string") {
+    return {
+      statusCode: defaultState.statusCode,
+      title: defaultState.title,
+      message: error
+    };
+  }
+  return defaultState;
+};
+const RouteErrorBoundary = ({ renderErrorExtra }) => {
+  const routeError = useRouteError();
+  const state = toSsrErrorState(routeError);
+  return /* @__PURE__ */ jsx(
+    SsrErrorFallback,
+    {
+      state,
+      renderErrorExtra
+    }
+  );
+};
 export {
   RootProvider,
+  RouteErrorBoundary,
+  SSR_ERROR_STATE_GLOBAL_KEY,
+  SsrErrorFallback,
   apiClient,
+  consumeClientSsrErrorState,
   getFeatureFlag,
   initApiClient,
   initWithRoutes,
+  peekClientSsrErrorState,
+  serializeSsrErrorState,
   useMediaQuery,
   useThrottledMeasure
 };

package/dist/initWithRoutes.d.ts

@@ -1,6 +1,9 @@
+import { ReactNode } from 'react';
 import { createRoutesFromElements } from '../../router/src';
+import { SsrErrorStatePayload } from './ssrErrorState';
 type InitWithRoutesOptions = {
     devThrowsOnHydrationErrors?: boolean;
+    renderErrorExtra?: (state: SsrErrorStatePayload) => ReactNode;
 };
 type RoutesElement = Parameters<typeof createRoutesFromElements>[0];
 export declare const initWithRoutes: (routesElement: RoutesElement, opts?: InitWithRoutesOptions) => Promise<void>;

package/dist/initWithRoutes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"initWithRoutes.d.ts","sourceRoot":"","sources":["../src/initWithRoutes.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAsB,wBAAwB,EAAiB,MAAM,iBAAiB,CAAA;AAqC7F,KAAK,qBAAqB,GAAG;IAC3B,0BAA0B,CAAC,EAAE,OAAO,CAAA;CACrC,CAAA;AAED,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,wBAAwB,CAAC,CAAC,CAAC,CAAC,CAAA;AAEnE,eAAO,MAAM,cAAc,GACzB,eAAe,aAAa,EAC5B,OAAO,qBAAqB,kBA0E7B,CAAA"}
+{"version":3,"file":"initWithRoutes.d.ts","sourceRoot":"","sources":["../src/initWithRoutes.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAc,MAAM,OAAO,CAAA;AAE7C,OAAO,EAAsB,wBAAwB,EAAiB,MAAM,iBAAiB,CAAA;AAK7F,OAAO,EAGL,oBAAoB,EACrB,MAAM,iBAAiB,CAAA;AAkCxB,KAAK,qBAAqB,GAAG;IAC3B,0BAA0B,CAAC,EAAE,OAAO,CAAA;IACpC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,SAAS,CAAA;CAC9D,CAAA;AAED,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,wBAAwB,CAAC,CAAC,CAAC,CAAC,CAAA;AA8BnE,eAAO,MAAM,cAAc,GACzB,eAAe,aAAa,EAC5B,OAAO,qBAAqB,kBA+E7B,CAAA"}

package/dist/ssrErrorState.d.ts

@@ -0,0 +1,11 @@
+export declare const SSR_ERROR_STATE_GLOBAL_KEY = "__RPCBASE_SSR_ERROR__";
+export type SsrErrorStatePayload = {
+    statusCode?: number;
+    title?: string;
+    message?: string;
+    details?: string;
+};
+export declare const serializeSsrErrorState: (state: SsrErrorStatePayload) => string;
+export declare const peekClientSsrErrorState: () => SsrErrorStatePayload | null;
+export declare const consumeClientSsrErrorState: () => SsrErrorStatePayload | null;
+//# sourceMappingURL=ssrErrorState.d.ts.map

package/dist/ssrErrorState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ssrErrorState.d.ts","sourceRoot":"","sources":["../src/ssrErrorState.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,0BAA0B,0BAA0B,CAAA;AAEjE,MAAM,MAAM,oBAAoB,GAAG;IACjC,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CAAA;AAMD,eAAO,MAAM,sBAAsB,GAAI,OAAO,oBAAoB,KAAG,MAI/B,CAAA;AAEtC,eAAO,MAAM,uBAAuB,QAAO,oBAAoB,GAAG,IAUjE,CAAA;AAED,eAAO,MAAM,0BAA0B,QAAO,oBAAoB,GAAG,IASpE,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpcbase/client",
-  "version": "0.290.0",
+  "version": "0.292.0",
   "type": "module",
   "files": [
     "dist"