@fictjs/router 0.17.0 → 0.17.1

package/dist/index.cjs

@@ -1600,13 +1600,13 @@ var import_jsx_runtime2 = require("fict/jsx-runtime");
 function Router(props) {
   const history2 = props.history || createBrowserHistory();
   const routes = extractRoutes(props.children);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RouterProvider, { history: history2, routes, base: props.base, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Routes, { children: props.children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RouterProvider, { history: history2, routes, base: props.base, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(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__ */ (0, import_jsx_runtime2.jsx)(RouterProvider, { history: history2, routes, base: props.base, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Routes, { children: props.children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RouterProvider, { history: history2, routes, base: props.base, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Routes, { routes, children: props.children }) });
 }
 function MemoryRouter(props) {
   const memoryOptions = {};
@@ -1620,17 +1620,17 @@ function MemoryRouter(props) {
     Object.keys(memoryOptions).length > 0 ? memoryOptions : void 0
   );
   const routes = extractRoutes(props.children);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RouterProvider, { history: history2, routes, base: props.base, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Routes, { children: props.children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RouterProvider, { history: history2, routes, base: props.base, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Routes, { routes, children: props.children }) });
 }
 function StaticRouter(props) {
   const history2 = createStaticHistory(props.url);
   const routes = extractRoutes(props.children);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RouterProvider, { history: history2, routes, base: props.base, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Routes, { children: props.children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RouterProvider, { history: history2, routes, base: props.base, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(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 = (0, import_runtime3.createMemo)(() => {
@@ -1647,11 +1647,14 @@ function Routes(props) {
     const relativePath = locationPath.startsWith(basePath) ? locationPath.slice(basePath.length) || "/" : locationPath;
     return matchRoutes(branches, relativePath) || [];
   });
-  const matches = currentMatches();
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: matches.length > 0 ? renderMatches(matches, 0) : null });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CurrentMatchesView, { matches: currentMatches });
 }
-function renderMatches(matches, index) {
-  const match = matches[index];
+function CurrentMatchesView(props) {
+  const matches = () => readAccessor(props.matches);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { 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 = (0, import_advanced3.createSignal)({
@@ -1706,27 +1709,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__ */ (0, import_jsx_runtime2.jsx)(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__ */ (0, import_jsx_runtime2.jsx)(RouteContext.Provider, { value: routeContext, children: renderContent() });
-  if (route.errorElement) {
-    content = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      import_runtime3.ErrorBoundary,
-      {
-        fallback: (err, reset) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RouteErrorContext.Provider, { value: { error: err, reset }, children: route.errorElement }),
-        children: content
-      }
-    );
-  }
-  if (route.loadingElement) {
-    content = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_runtime3.Suspense, { fallback: route.loadingElement, children: content });
-  }
-  return content;
+  const routeContent = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RouteContext.Provider, { value: routeContext, children: renderContent() });
+  const errorBoundaryContent = route.errorElement ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_runtime3.ErrorBoundary,
+    {
+      fallback: (err, reset) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RouteErrorContext.Provider, { value: { error: err, reset }, children: route.errorElement }),
+      children: routeContent
+    }
+  ) : routeContent;
+  return route.loadingElement ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_runtime3.Suspense, { fallback: route.loadingElement, children: errorBoundaryContent }) : errorBoundaryContent;
+}
+function renderMatches(matches, index) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RenderMatchesView, { matches, index });
 }
 function Route(_props) {
   return null;