@fictjs/router 0.16.0 → 0.17.1

package/dist/index.d.cts

@@ -419,6 +419,7 @@ declare function StaticRouter(props: StaticRouterProps & {
 }): FictNode;
 interface RoutesProps {
     children?: FictNode;
+    routes?: RouteDefinition[];
 }
 /**
  * Routes component - renders the matched route

package/dist/index.d.ts

@@ -419,6 +419,7 @@ declare function StaticRouter(props: StaticRouterProps & {
 }): FictNode;
 interface RoutesProps {
     children?: FictNode;
+    routes?: RouteDefinition[];
 }
 /**
  * Routes component - renders the matched route

package/dist/index.js

@@ -1504,13 +1504,13 @@ import { Fragment as Fragment2, jsx as jsx2 } from "fict/jsx-runtime";
 function Router(props) {
   const history2 = props.history || createBrowserHistory();
   const routes = extractRoutes(props.children);
-  return /* @__PURE__ */ jsx2(RouterProvider, { history: history2, routes, base: props.base, children: /* @__PURE__ */ jsx2(Routes, { children: props.children }) });
+  return /* @__PURE__ */ jsx2(RouterProvider, { history: history2, routes, base: props.base, children: /* @__PURE__ */ jsx2(Routes, { routes, children: props.children }) });
 }
 function HashRouter(props) {
   const hashOptions = props.hashType ? { hashType: props.hashType } : void 0;
   const history2 = createHashHistory(hashOptions);
   const routes = extractRoutes(props.children);
-  return /* @__PURE__ */ jsx2(RouterProvider, { history: history2, routes, base: props.base, children: /* @__PURE__ */ jsx2(Routes, { children: props.children }) });
+  return /* @__PURE__ */ jsx2(RouterProvider, { history: history2, routes, base: props.base, children: /* @__PURE__ */ jsx2(Routes, { routes, children: props.children }) });
 }
 function MemoryRouter(props) {
   const memoryOptions = {};
@@ -1524,17 +1524,17 @@ function MemoryRouter(props) {
     Object.keys(memoryOptions).length > 0 ? memoryOptions : void 0
   );
   const routes = extractRoutes(props.children);
-  return /* @__PURE__ */ jsx2(RouterProvider, { history: history2, routes, base: props.base, children: /* @__PURE__ */ jsx2(Routes, { children: props.children }) });
+  return /* @__PURE__ */ jsx2(RouterProvider, { history: history2, routes, base: props.base, children: /* @__PURE__ */ jsx2(Routes, { routes, children: props.children }) });
 }
 function StaticRouter(props) {
   const history2 = createStaticHistory(props.url);
   const routes = extractRoutes(props.children);
-  return /* @__PURE__ */ jsx2(RouterProvider, { history: history2, routes, base: props.base, children: /* @__PURE__ */ jsx2(Routes, { children: props.children }) });
+  return /* @__PURE__ */ jsx2(RouterProvider, { history: history2, routes, base: props.base, children: /* @__PURE__ */ jsx2(Routes, { routes, children: props.children }) });
 }
 function Routes(props) {
   const router = useRouter();
   const parentRoute = useRoute();
-  const routes = extractRoutes(props.children);
+  const routes = props.routes ?? extractRoutes(props.children);
   const compiledRoutes = routes.map((r) => compileRoute(r));
   const branches = createBranches(compiledRoutes);
   const currentMatches = createMemo(() => {
@@ -1551,11 +1551,14 @@ function Routes(props) {
     const relativePath = locationPath.startsWith(basePath) ? locationPath.slice(basePath.length) || "/" : locationPath;
     return matchRoutes(branches, relativePath) || [];
   });
-  const matches = currentMatches();
-  return /* @__PURE__ */ jsx2(Fragment2, { children: matches.length > 0 ? renderMatches(matches, 0) : null });
+  return /* @__PURE__ */ jsx2(CurrentMatchesView, { matches: currentMatches });
 }
-function renderMatches(matches, index) {
-  const match = matches[index];
+function CurrentMatchesView(props) {
+  const matches = () => readAccessor(props.matches);
+  return /* @__PURE__ */ jsx2(Fragment2, { children: matches().length > 0 ? renderMatches(matches(), 0) : null });
+}
+function RenderMatchesView(props) {
+  const match = props.matches[props.index];
   const route = match.route;
   const router = useRouter();
   const dataState = createSignal3({
@@ -1610,27 +1613,25 @@ function renderMatches(matches, index) {
     match: () => match,
     data: () => dataState().data,
     error: () => dataState().error,
-    outlet: () => index + 1 < matches.length ? renderMatches(matches, index + 1) : null,
+    outlet: () => props.index + 1 < props.matches.length ? /* @__PURE__ */ jsx2(RenderMatchesView, { matches: props.matches, index: props.index + 1 }) : null,
     resolvePath: wrapAccessor((to) => {
       const basePath = match.pathname;
       const targetPath = typeof to === "string" ? to : to.pathname || "/";
       return resolvePath(basePath, targetPath);
     })
   };
-  let content = /* @__PURE__ */ jsx2(RouteContext.Provider, { value: routeContext, children: renderContent() });
-  if (route.errorElement) {
-    content = /* @__PURE__ */ jsx2(
-      ErrorBoundary,
-      {
-        fallback: (err, reset) => /* @__PURE__ */ jsx2(RouteErrorContext.Provider, { value: { error: err, reset }, children: route.errorElement }),
-        children: content
-      }
-    );
-  }
-  if (route.loadingElement) {
-    content = /* @__PURE__ */ jsx2(Suspense, { fallback: route.loadingElement, children: content });
-  }
-  return content;
+  const routeContent = /* @__PURE__ */ jsx2(RouteContext.Provider, { value: routeContext, children: renderContent() });
+  const errorBoundaryContent = route.errorElement ? /* @__PURE__ */ jsx2(
+    ErrorBoundary,
+    {
+      fallback: (err, reset) => /* @__PURE__ */ jsx2(RouteErrorContext.Provider, { value: { error: err, reset }, children: route.errorElement }),
+      children: routeContent
+    }
+  ) : routeContent;
+  return route.loadingElement ? /* @__PURE__ */ jsx2(Suspense, { fallback: route.loadingElement, children: errorBoundaryContent }) : errorBoundaryContent;
+}
+function renderMatches(matches, index) {
+  return /* @__PURE__ */ jsx2(RenderMatchesView, { matches, index });
 }
 function Route(_props) {
   return null;