@btst/stack 2.12.2 → 3.0.0-rc.2

package/dist/packages/stack/src/plugins/ui-builder/client/plugin.cjs

@@ -4,9 +4,8 @@ const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 const client = require('@btst/stack/plugins/client');
 const yar = require('@btst/yar');
-const plugins_cms_queryKeys = require('../../../../../../plugins/cms/query-keys.cjs');
 const utils = require('../../utils.cjs');
-const schemas = require('../schemas.cjs');
+const plugins_uiBuilder_queryKeys = require('../../../../../../plugins/ui-builder/query-keys.cjs');
 
 const PageListPageComponent = React.lazy(
   () => import('./components/pages/page-list-page.cjs').then((m) => ({
@@ -22,7 +21,6 @@ function createPageListLoader(config) {
   return async () => {
     if (typeof window === "undefined") {
       const { queryClient, apiBasePath, apiBaseURL, headers, hooks } = config;
-      const typeSlug = schemas.UI_BUILDER_TYPE_SLUG;
       const context = {
         path: "/ui-builder",
         isSSR: true,
@@ -34,43 +32,20 @@ function createPageListLoader(config) {
         baseURL: apiBaseURL,
         basePath: apiBasePath
       });
-      const queries = plugins_cms_queryKeys.createCMSQueryKeys(client$1, headers);
-      const limit = 20;
-      const listQuery = queries.cmsContent.list({
-        typeSlug,
-        limit,
-        offset: 0
-      });
-      const uiBuilderListQueryKey = [...listQuery.queryKey, "ui-builder"];
+      const queries = plugins_uiBuilder_queryKeys.createUIBuilderQueryKeys(client$1, headers);
+      const listQuery = queries.cmsContent.list({ limit: 10, offset: 0 });
       try {
         if (hooks?.beforeLoadPageList) {
-          await client.runClientHookWithShim(
-            () => hooks.beforeLoadPageList(context),
-            "Load prevented by beforeLoadPageList hook"
-          );
+          await hooks.beforeLoadPageList(context);
         }
         await queryClient.prefetchInfiniteQuery({
-          queryKey: uiBuilderListQueryKey,
-          queryFn: async ({ pageParam = 0 }) => {
-            const response = await client$1("/content/:typeSlug", {
-              method: "GET",
-              params: { typeSlug },
-              query: { limit, offset: pageParam },
-              headers
-            });
-            if (typeof response === "object" && response !== null && "error" in response && response.error) {
-              throw new Error(String(response.error));
-            }
-            return response.data;
-          },
+          ...listQuery,
           initialPageParam: 0
         });
         if (hooks?.afterLoadPageList) {
           await hooks.afterLoadPageList(context);
         }
-        const queryState = queryClient.getQueryState([
-          ...uiBuilderListQueryKey
-        ]);
+        const queryState = queryClient.getQueryState(listQuery.queryKey);
         if (queryState?.error && hooks?.onLoadError) {
           const error = queryState.error instanceof Error ? queryState.error : new Error(String(queryState.error));
           await hooks.onLoadError(error, context);
@@ -78,12 +53,12 @@ function createPageListLoader(config) {
       } catch (error) {
         if (client.isConnectionError(error)) {
           console.warn(
-            "[btst/ui-builder] route.loader() failed \u2014 no server running at build time. Use myStack.api.uiBuilder.prefetchForRoute() for SSG data prefetching."
+            "[btst/ui-builder] route.loader() failed \u2014 no server running at build time. Use myStack.api.cms.prefetchForRoute() for SSG data prefetching."
           );
         } else {
           const errToStore = utils.createSanitizedSSRLoaderError();
           await queryClient.prefetchInfiniteQuery({
-            queryKey: uiBuilderListQueryKey,
+            queryKey: listQuery.queryKey,
             queryFn: () => {
               throw errToStore;
             },
@@ -102,7 +77,6 @@ function createPageBuilderLoader(id, config) {
   return async () => {
     if (typeof window === "undefined") {
       const { queryClient, apiBasePath, apiBaseURL, headers, hooks } = config;
-      const typeSlug = schemas.UI_BUILDER_TYPE_SLUG;
       const context = {
         path: id ? `/ui-builder/${id}/edit` : "/ui-builder/new",
         params: id ? { id } : {},
@@ -115,14 +89,11 @@ function createPageBuilderLoader(id, config) {
         baseURL: apiBaseURL,
         basePath: apiBasePath
       });
-      const queries = plugins_cms_queryKeys.createCMSQueryKeys(client$1, headers);
-      const pageQuery = id ? queries.cmsContent.detail(typeSlug, id) : void 0;
+      const queries = plugins_uiBuilder_queryKeys.createUIBuilderQueryKeys(client$1, headers);
+      const pageQuery = id ? queries.cmsContent.detail(id) : void 0;
       try {
         if (hooks?.beforeLoadPageBuilder) {
-          await client.runClientHookWithShim(
-            () => hooks.beforeLoadPageBuilder(id, context),
-            "Load prevented by beforeLoadPageBuilder hook"
-          );
+          await hooks.beforeLoadPageBuilder(id, context);
         }
         if (id) {
           await queryClient.prefetchQuery(pageQuery);
@@ -140,7 +111,7 @@ function createPageBuilderLoader(id, config) {
       } catch (error) {
         if (client.isConnectionError(error)) {
           console.warn(
-            "[btst/ui-builder] route.loader() failed \u2014 no server running at build time. Use myStack.api.uiBuilder.prefetchForRoute() for SSG data prefetching."
+            "[btst/ui-builder] route.loader() failed \u2014 no server running at build time. Use myStack.api.cms.prefetchForRoute() for SSG data prefetching."
           );
         } else if (pageQuery) {
           const errToStore = utils.createSanitizedSSRLoaderError();
@@ -172,16 +143,15 @@ function createPageListMeta() {
 function createPageBuilderMeta(id, config) {
   return () => {
     const { queryClient, apiBasePath, apiBaseURL, headers } = config;
-    const typeSlug = schemas.UI_BUILDER_TYPE_SLUG;
     let pageSlug = "";
     if (id) {
       const client$1 = client.createApiClient({
         baseURL: apiBaseURL,
         basePath: apiBasePath
       });
-      const queries = plugins_cms_queryKeys.createCMSQueryKeys(client$1, headers);
+      const queries = plugins_uiBuilder_queryKeys.createUIBuilderQueryKeys(client$1, headers);
       const page = queryClient.getQueryData(
-        queries.cmsContent.detail(typeSlug, id).queryKey
+        queries.cmsContent.detail(id).queryKey
       );
       pageSlug = page?.slug || "";
     }
@@ -195,32 +165,26 @@ function createPageBuilderMeta(id, config) {
 }
 const uiBuilderClientPlugin = (config) => client.defineClientPlugin({
   name: "ui-builder",
-  routes: () => ({
-    pageList: yar.createRoute("/ui-builder", () => {
-      const CustomPageList = config.pageComponents?.pageList;
-      return {
-        PageComponent: CustomPageList ?? (() => /* @__PURE__ */ jsxRuntime.jsx(PageListPageComponent, {})),
+  routes: () => yar.defineRoutes(
+    {
+      pageList: yar.defineRoute("/ui-builder", {
+        page: PageListPageComponent,
         loader: createPageListLoader(config),
         meta: createPageListMeta()
-      };
-    }),
-    newPage: yar.createRoute("/ui-builder/new", () => {
-      const CustomNewPage = config.pageComponents?.newPage;
-      return {
-        PageComponent: CustomNewPage ?? (() => /* @__PURE__ */ jsxRuntime.jsx(PageBuilderPageComponent, {})),
+      }),
+      newPage: yar.defineRoute("/ui-builder/new", {
+        page: () => /* @__PURE__ */ jsxRuntime.jsx(PageBuilderPageComponent, {}),
         loader: createPageBuilderLoader(void 0, config),
         meta: createPageBuilderMeta(void 0, config)
-      };
-    }),
-    editPage: yar.createRoute("/ui-builder/:id/edit", ({ params }) => {
-      const CustomEditPage = config.pageComponents?.editPage;
-      return {
-        PageComponent: CustomEditPage ? () => /* @__PURE__ */ jsxRuntime.jsx(CustomEditPage, { id: params.id }) : () => /* @__PURE__ */ jsxRuntime.jsx(PageBuilderPageComponent, { id: params.id }),
-        loader: createPageBuilderLoader(params.id, config),
-        meta: createPageBuilderMeta(params.id, config)
-      };
-    })
-  }),
+      }),
+      editPage: yar.defineRoute("/ui-builder/:id/edit", {
+        page: ({ params }) => /* @__PURE__ */ jsxRuntime.jsx(PageBuilderPageComponent, { id: params.id }),
+        loader: ({ params }) => createPageBuilderLoader(params.id, config)(),
+        meta: ({ params }) => createPageBuilderMeta(params.id, config)()
+      })
+    },
+    { pages: config.pageComponents }
+  ),
   sitemap: async () => {
     return [];
   }

package/dist/packages/stack/src/plugins/ui-builder/client/plugin.mjs

@@ -1,10 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
 import { lazy } from 'react';
-import { defineClientPlugin, createApiClient, runClientHookWithShim, isConnectionError } from '@btst/stack/plugins/client';
-import { createRoute } from '@btst/yar';
-import { createCMSQueryKeys } from '../../../../../../plugins/cms/query-keys.mjs';
+import { defineClientPlugin, createApiClient, isConnectionError } from '@btst/stack/plugins/client';
+import { defineRoutes, defineRoute } from '@btst/yar';
 import { createSanitizedSSRLoaderError } from '../../utils.mjs';
-import { UI_BUILDER_TYPE_SLUG } from '../schemas.mjs';
+import { createUIBuilderQueryKeys } from '../../../../../../plugins/ui-builder/query-keys.mjs';
 
 const PageListPageComponent = lazy(
   () => import('./components/pages/page-list-page.mjs').then((m) => ({
@@ -20,7 +19,6 @@ function createPageListLoader(config) {
   return async () => {
     if (typeof window === "undefined") {
       const { queryClient, apiBasePath, apiBaseURL, headers, hooks } = config;
-      const typeSlug = UI_BUILDER_TYPE_SLUG;
       const context = {
         path: "/ui-builder",
         isSSR: true,
@@ -32,43 +30,20 @@ function createPageListLoader(config) {
         baseURL: apiBaseURL,
         basePath: apiBasePath
       });
-      const queries = createCMSQueryKeys(client, headers);
-      const limit = 20;
-      const listQuery = queries.cmsContent.list({
-        typeSlug,
-        limit,
-        offset: 0
-      });
-      const uiBuilderListQueryKey = [...listQuery.queryKey, "ui-builder"];
+      const queries = createUIBuilderQueryKeys(client, headers);
+      const listQuery = queries.cmsContent.list({ limit: 10, offset: 0 });
       try {
         if (hooks?.beforeLoadPageList) {
-          await runClientHookWithShim(
-            () => hooks.beforeLoadPageList(context),
-            "Load prevented by beforeLoadPageList hook"
-          );
+          await hooks.beforeLoadPageList(context);
         }
         await queryClient.prefetchInfiniteQuery({
-          queryKey: uiBuilderListQueryKey,
-          queryFn: async ({ pageParam = 0 }) => {
-            const response = await client("/content/:typeSlug", {
-              method: "GET",
-              params: { typeSlug },
-              query: { limit, offset: pageParam },
-              headers
-            });
-            if (typeof response === "object" && response !== null && "error" in response && response.error) {
-              throw new Error(String(response.error));
-            }
-            return response.data;
-          },
+          ...listQuery,
           initialPageParam: 0
         });
         if (hooks?.afterLoadPageList) {
           await hooks.afterLoadPageList(context);
         }
-        const queryState = queryClient.getQueryState([
-          ...uiBuilderListQueryKey
-        ]);
+        const queryState = queryClient.getQueryState(listQuery.queryKey);
         if (queryState?.error && hooks?.onLoadError) {
           const error = queryState.error instanceof Error ? queryState.error : new Error(String(queryState.error));
           await hooks.onLoadError(error, context);
@@ -76,12 +51,12 @@ function createPageListLoader(config) {
       } catch (error) {
         if (isConnectionError(error)) {
           console.warn(
-            "[btst/ui-builder] route.loader() failed \u2014 no server running at build time. Use myStack.api.uiBuilder.prefetchForRoute() for SSG data prefetching."
+            "[btst/ui-builder] route.loader() failed \u2014 no server running at build time. Use myStack.api.cms.prefetchForRoute() for SSG data prefetching."
           );
         } else {
           const errToStore = createSanitizedSSRLoaderError();
           await queryClient.prefetchInfiniteQuery({
-            queryKey: uiBuilderListQueryKey,
+            queryKey: listQuery.queryKey,
             queryFn: () => {
               throw errToStore;
             },
@@ -100,7 +75,6 @@ function createPageBuilderLoader(id, config) {
   return async () => {
     if (typeof window === "undefined") {
       const { queryClient, apiBasePath, apiBaseURL, headers, hooks } = config;
-      const typeSlug = UI_BUILDER_TYPE_SLUG;
       const context = {
         path: id ? `/ui-builder/${id}/edit` : "/ui-builder/new",
         params: id ? { id } : {},
@@ -113,14 +87,11 @@ function createPageBuilderLoader(id, config) {
         baseURL: apiBaseURL,
         basePath: apiBasePath
       });
-      const queries = createCMSQueryKeys(client, headers);
-      const pageQuery = id ? queries.cmsContent.detail(typeSlug, id) : void 0;
+      const queries = createUIBuilderQueryKeys(client, headers);
+      const pageQuery = id ? queries.cmsContent.detail(id) : void 0;
       try {
         if (hooks?.beforeLoadPageBuilder) {
-          await runClientHookWithShim(
-            () => hooks.beforeLoadPageBuilder(id, context),
-            "Load prevented by beforeLoadPageBuilder hook"
-          );
+          await hooks.beforeLoadPageBuilder(id, context);
         }
         if (id) {
           await queryClient.prefetchQuery(pageQuery);
@@ -138,7 +109,7 @@ function createPageBuilderLoader(id, config) {
       } catch (error) {
         if (isConnectionError(error)) {
           console.warn(
-            "[btst/ui-builder] route.loader() failed \u2014 no server running at build time. Use myStack.api.uiBuilder.prefetchForRoute() for SSG data prefetching."
+            "[btst/ui-builder] route.loader() failed \u2014 no server running at build time. Use myStack.api.cms.prefetchForRoute() for SSG data prefetching."
           );
         } else if (pageQuery) {
           const errToStore = createSanitizedSSRLoaderError();
@@ -170,16 +141,15 @@ function createPageListMeta() {
 function createPageBuilderMeta(id, config) {
   return () => {
     const { queryClient, apiBasePath, apiBaseURL, headers } = config;
-    const typeSlug = UI_BUILDER_TYPE_SLUG;
     let pageSlug = "";
     if (id) {
       const client = createApiClient({
         baseURL: apiBaseURL,
         basePath: apiBasePath
       });
-      const queries = createCMSQueryKeys(client, headers);
+      const queries = createUIBuilderQueryKeys(client, headers);
       const page = queryClient.getQueryData(
-        queries.cmsContent.detail(typeSlug, id).queryKey
+        queries.cmsContent.detail(id).queryKey
       );
       pageSlug = page?.slug || "";
     }
@@ -193,32 +163,26 @@ function createPageBuilderMeta(id, config) {
 }
 const uiBuilderClientPlugin = (config) => defineClientPlugin({
   name: "ui-builder",
-  routes: () => ({
-    pageList: createRoute("/ui-builder", () => {
-      const CustomPageList = config.pageComponents?.pageList;
-      return {
-        PageComponent: CustomPageList ?? (() => /* @__PURE__ */ jsx(PageListPageComponent, {})),
+  routes: () => defineRoutes(
+    {
+      pageList: defineRoute("/ui-builder", {
+        page: PageListPageComponent,
         loader: createPageListLoader(config),
         meta: createPageListMeta()
-      };
-    }),
-    newPage: createRoute("/ui-builder/new", () => {
-      const CustomNewPage = config.pageComponents?.newPage;
-      return {
-        PageComponent: CustomNewPage ?? (() => /* @__PURE__ */ jsx(PageBuilderPageComponent, {})),
+      }),
+      newPage: defineRoute("/ui-builder/new", {
+        page: () => /* @__PURE__ */ jsx(PageBuilderPageComponent, {}),
         loader: createPageBuilderLoader(void 0, config),
         meta: createPageBuilderMeta(void 0, config)
-      };
-    }),
-    editPage: createRoute("/ui-builder/:id/edit", ({ params }) => {
-      const CustomEditPage = config.pageComponents?.editPage;
-      return {
-        PageComponent: CustomEditPage ? () => /* @__PURE__ */ jsx(CustomEditPage, { id: params.id }) : () => /* @__PURE__ */ jsx(PageBuilderPageComponent, { id: params.id }),
-        loader: createPageBuilderLoader(params.id, config),
-        meta: createPageBuilderMeta(params.id, config)
-      };
-    })
-  }),
+      }),
+      editPage: defineRoute("/ui-builder/:id/edit", {
+        page: ({ params }) => /* @__PURE__ */ jsx(PageBuilderPageComponent, { id: params.id }),
+        loader: ({ params }) => createPageBuilderLoader(params.id, config)(),
+        meta: ({ params }) => createPageBuilderMeta(params.id, config)()
+      })
+    },
+    { pages: config.pageComponents }
+  ),
   sitemap: async () => {
     return [];
   }

package/dist/packages/stack/src/plugins/utils.cjs

@@ -2,45 +2,14 @@
 
 const client = require('better-call/client');
 
-async function runHookWithShim(hookFn, createError, defaultMessage, errorStatus = 403) {
-  let result;
+async function runHook(hookFn, createError, defaultMessage, errorStatus = 403) {
   try {
-    result = await hookFn();
+    return await hookFn();
   } catch (e) {
     throw createError(errorStatus, {
       message: e instanceof Error ? e.message : defaultMessage
     });
   }
-  if (typeof result === "boolean") {
-    if (process.env.NODE_ENV !== "production") {
-      console.warn(
-        `[btst] A lifecycle hook returned a boolean (${result}). Boolean returns are deprecated \u2014 throw an Error to deny access instead. IMPORTANT: any code path in this hook that falls through to undefined now ALLOWS access (previously denied). Update the hook to throw new Error("Unauthorized") to deny.`
-      );
-    }
-    if (!result) {
-      throw createError(errorStatus, { message: defaultMessage });
-    }
-  }
-  return result;
-}
-async function runClientHookWithShim(hookFn, defaultMessage) {
-  let result;
-  try {
-    result = await hookFn();
-  } catch (e) {
-    throw e instanceof Error ? e : new Error(defaultMessage);
-  }
-  if (typeof result === "boolean") {
-    if (process.env.NODE_ENV !== "production") {
-      console.warn(
-        `[btst] A lifecycle hook returned a boolean (${result}). Boolean returns are deprecated \u2014 throw an Error to deny access instead. IMPORTANT: any code path in this hook that falls through to undefined now ALLOWS access (previously denied). Update the hook to throw new Error("Unauthorized") to deny.`
-      );
-    }
-    if (!result) {
-      throw new Error(defaultMessage);
-    }
-  }
-  return result;
 }
 function isConnectionError(err) {
   if (!(err instanceof Error)) return false;
@@ -66,5 +35,4 @@ exports.SSR_LOADER_ERROR_MESSAGE = SSR_LOADER_ERROR_MESSAGE;
 exports.createApiClient = createApiClient;
 exports.createSanitizedSSRLoaderError = createSanitizedSSRLoaderError;
 exports.isConnectionError = isConnectionError;
-exports.runClientHookWithShim = runClientHookWithShim;
-exports.runHookWithShim = runHookWithShim;
+exports.runHook = runHook;

package/dist/packages/stack/src/plugins/utils.mjs

@@ -1,44 +1,13 @@
 import { createClient } from 'better-call/client';
 
-async function runHookWithShim(hookFn, createError, defaultMessage, errorStatus = 403) {
-  let result;
+async function runHook(hookFn, createError, defaultMessage, errorStatus = 403) {
   try {
-    result = await hookFn();
+    return await hookFn();
   } catch (e) {
     throw createError(errorStatus, {
       message: e instanceof Error ? e.message : defaultMessage
     });
   }
-  if (typeof result === "boolean") {
-    if (process.env.NODE_ENV !== "production") {
-      console.warn(
-        `[btst] A lifecycle hook returned a boolean (${result}). Boolean returns are deprecated \u2014 throw an Error to deny access instead. IMPORTANT: any code path in this hook that falls through to undefined now ALLOWS access (previously denied). Update the hook to throw new Error("Unauthorized") to deny.`
-      );
-    }
-    if (!result) {
-      throw createError(errorStatus, { message: defaultMessage });
-    }
-  }
-  return result;
-}
-async function runClientHookWithShim(hookFn, defaultMessage) {
-  let result;
-  try {
-    result = await hookFn();
-  } catch (e) {
-    throw e instanceof Error ? e : new Error(defaultMessage);
-  }
-  if (typeof result === "boolean") {
-    if (process.env.NODE_ENV !== "production") {
-      console.warn(
-        `[btst] A lifecycle hook returned a boolean (${result}). Boolean returns are deprecated \u2014 throw an Error to deny access instead. IMPORTANT: any code path in this hook that falls through to undefined now ALLOWS access (previously denied). Update the hook to throw new Error("Unauthorized") to deny.`
-      );
-    }
-    if (!result) {
-      throw new Error(defaultMessage);
-    }
-  }
-  return result;
 }
 function isConnectionError(err) {
   if (!(err instanceof Error)) return false;
@@ -60,4 +29,4 @@ function createApiClient(options) {
   });
 }
 
-export { SSR_LOADER_ERROR_MESSAGE, createApiClient, createSanitizedSSRLoaderError, isConnectionError, runClientHookWithShim, runHookWithShim };
+export { SSR_LOADER_ERROR_MESSAGE, createApiClient, createSanitizedSSRLoaderError, isConnectionError, runHook };

package/dist/packages/stack/src/react-router/handlers.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+function toReactRouterHandlers(handler) {
+  return {
+    loader: ({ request }) => handler(request),
+    action: ({ request }) => handler(request)
+  };
+}
+
+exports.toReactRouterHandlers = toReactRouterHandlers;

package/dist/packages/stack/src/react-router/handlers.mjs

@@ -0,0 +1,8 @@
+function toReactRouterHandlers(handler) {
+  return {
+    loader: ({ request }) => handler(request),
+    action: ({ request }) => handler(request)
+  };
+}
+
+export { toReactRouterHandlers };

package/dist/packages/stack/src/react-router/page.cjs

@@ -0,0 +1,63 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const reactQuery = require('@tanstack/react-query');
+const React = require('react');
+const reactRouter = require('react-router');
+const pathUtils = require('../client/path-utils.cjs');
+const entryFactories = require('../shared/entry-factories.cjs');
+
+function createReactRouterPage(options) {
+  const {
+    getStackClient,
+    getQueryClient,
+    NotFound,
+    ErrorBoundary: CustomErrorBoundary,
+    wrapPage,
+    dehydrateOptions = entryFactories.stackDehydrateOptions
+  } = options;
+  function createLoader(getLoaderStackClient) {
+    return async function loader2(loaderArgs) {
+      const { params } = loaderArgs;
+      const queryClient = getQueryClient();
+      const path = pathUtils.normalizePath(params["*"]);
+      const stackClient = getLoaderStackClient ? await getLoaderStackClient(queryClient, loaderArgs) : getStackClient(queryClient);
+      const route = stackClient.router.getRoute(path);
+      if (route?.loader) {
+        await route.loader();
+      }
+      return {
+        path,
+        dehydratedState: reactQuery.dehydrate(queryClient, dehydrateOptions),
+        meta: await route?.meta?.()
+      };
+    };
+  }
+  const loader = createLoader();
+  function meta(args) {
+    return (args.loaderData ?? args.data)?.meta;
+  }
+  function Component() {
+    const data = reactRouter.useLoaderData();
+    const queryClient = reactQuery.useQueryClient();
+    const route = React.useMemo(
+      () => getStackClient(queryClient).router.getRoute(data.path),
+      [queryClient, data.path]
+    );
+    const page = route?.PageComponent ? /* @__PURE__ */ jsxRuntime.jsx(route.PageComponent, {}) : NotFound ? /* @__PURE__ */ jsxRuntime.jsx(NotFound, {}) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Route not found" });
+    return /* @__PURE__ */ jsxRuntime.jsx(reactQuery.HydrationBoundary, { state: data.dehydratedState, children: wrapPage ? wrapPage(page) : page });
+  }
+  function DefaultErrorBoundary() {
+    const error = reactRouter.useRouteError();
+    return /* @__PURE__ */ jsxRuntime.jsx("pre", { children: String(error) });
+  }
+  return {
+    loader,
+    createLoader,
+    meta,
+    Component,
+    ErrorBoundary: CustomErrorBoundary ?? DefaultErrorBoundary
+  };
+}
+
+exports.createReactRouterPage = createReactRouterPage;

package/dist/packages/stack/src/react-router/page.mjs

@@ -0,0 +1,61 @@
+import { jsx } from 'react/jsx-runtime';
+import { useQueryClient, HydrationBoundary, dehydrate } from '@tanstack/react-query';
+import { useMemo } from 'react';
+import { useRouteError, useLoaderData } from 'react-router';
+import { normalizePath } from '../client/path-utils.mjs';
+import { stackDehydrateOptions } from '../shared/entry-factories.mjs';
+
+function createReactRouterPage(options) {
+  const {
+    getStackClient,
+    getQueryClient,
+    NotFound,
+    ErrorBoundary: CustomErrorBoundary,
+    wrapPage,
+    dehydrateOptions = stackDehydrateOptions
+  } = options;
+  function createLoader(getLoaderStackClient) {
+    return async function loader2(loaderArgs) {
+      const { params } = loaderArgs;
+      const queryClient = getQueryClient();
+      const path = normalizePath(params["*"]);
+      const stackClient = getLoaderStackClient ? await getLoaderStackClient(queryClient, loaderArgs) : getStackClient(queryClient);
+      const route = stackClient.router.getRoute(path);
+      if (route?.loader) {
+        await route.loader();
+      }
+      return {
+        path,
+        dehydratedState: dehydrate(queryClient, dehydrateOptions),
+        meta: await route?.meta?.()
+      };
+    };
+  }
+  const loader = createLoader();
+  function meta(args) {
+    return (args.loaderData ?? args.data)?.meta;
+  }
+  function Component() {
+    const data = useLoaderData();
+    const queryClient = useQueryClient();
+    const route = useMemo(
+      () => getStackClient(queryClient).router.getRoute(data.path),
+      [queryClient, data.path]
+    );
+    const page = route?.PageComponent ? /* @__PURE__ */ jsx(route.PageComponent, {}) : NotFound ? /* @__PURE__ */ jsx(NotFound, {}) : /* @__PURE__ */ jsx("div", { children: "Route not found" });
+    return /* @__PURE__ */ jsx(HydrationBoundary, { state: data.dehydratedState, children: wrapPage ? wrapPage(page) : page });
+  }
+  function DefaultErrorBoundary() {
+    const error = useRouteError();
+    return /* @__PURE__ */ jsx("pre", { children: String(error) });
+  }
+  return {
+    loader,
+    createLoader,
+    meta,
+    Component,
+    ErrorBoundary: CustomErrorBoundary ?? DefaultErrorBoundary
+  };
+}
+
+export { createReactRouterPage };

package/dist/packages/stack/src/react-router/router.cjs

@@ -0,0 +1,42 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const reactRouter$1 = require('react-router');
+
+function ReactRouterLinkWrapper({
+  href,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(reactRouter$1.Link, { to: href || "", ...props, children });
+}
+function useReactRouterStackRouter() {
+  const navigate = reactRouter$1.useNavigate();
+  const { revalidate } = reactRouter$1.useRevalidator();
+  const [searchParams, setSearchParams] = reactRouter$1.useSearchParams();
+  return React.useMemo(
+    () => ({
+      navigate: (path) => {
+        void navigate(path);
+      },
+      refresh: () => {
+        void revalidate();
+      },
+      getSearchParams: () => new URLSearchParams(searchParams),
+      setSearchParams: (next, opts) => {
+        setSearchParams(next, { replace: opts?.replace });
+      }
+    }),
+    [navigate, revalidate, searchParams, setSearchParams]
+  );
+}
+function reactRouter() {
+  return {
+    Link: ReactRouterLinkWrapper,
+    useRouter: useReactRouterStackRouter
+  };
+}
+
+exports.reactRouter = reactRouter;