@argon-router/react 0.9.0 → 0.10.0

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),r=require("effector-react"),o=t.createContext(null);function n(){const e=t.useContext(o);if(!e)throw new Error("[useRouter] Router not found. Add RouterProvider in app root");return e}const u=t.forwardRef((t,o)=>{const{to:u,params:s,onClick:i,...a}=t,{mappedRoutes:c}=n(),l=c.find(({route:e})=>e===u),{onOpen:d}=r.useUnit(u);if(!l)throw new Error(`[Link] Route with path "${u.path}" not found. Maybe it is not passed into createRouter?`);return e.jsx("a",{...a,ref:o,href:l.build(s??void 0),onClick:e=>{null==i||i(e),e.defaultPrevented||a.target&&"_self"!==a.target||e.metaKey||e.altKey||e.ctrlKey||e.shiftKey||(e.preventDefault(),d({params:s||{}}))}})});exports.Link=u,exports.RouterProvider=t=>e.jsx(o.Provider,{value:t.router,children:t.children}),exports.createLazyRouteView=function(r){r.route.internal.setAsyncImport(r.view);const o=t.lazy(r.view);return{route:r.route,view:()=>{const{layout:n,fallback:u=()=>e.jsx(e.Fragment,{})}=r;return n?e.jsx(n,{children:e.jsx(t.Suspense,{fallback:e.jsx(u,{}),children:e.jsx(o,{})})}):e.jsx(t.Suspense,{fallback:e.jsx(u,{}),children:e.jsx(o,{})})}}},exports.createRouteView=function(t){return{route:t.route,view:()=>{const{view:r,layout:o}=t;return o?e.jsx(o,{children:e.jsx(r,{})}):e.jsx(r,{})}}},exports.createRoutesView=o=>{const{routes:n,otherwise:u}=o;return()=>{const o=r.useProvidedScope(),s=r.useUnit(n.map(e=>e.route.$isOpened)),i=t.useMemo(()=>{const e=n.filter(e=>Boolean(function(e,t){return t?t.getState(e):e.getState()}(e.route.$isOpened,o)));return e.reduce((e,t)=>e.filter(e=>e.route!==t.route.parent),e)},[s]),a=i.at(-1);return a?t.createElement(a.view):u?e.jsx(u,{}):null}},exports.useRouter=function(){return r.useUnit(n())},exports.useRouterContext=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),r=require("effector-react"),o=t.createContext(null);function n(){const e=t.useContext(o);if(!e)throw new Error("[useRouter] Router not found. Add RouterProvider in app root");return e}const u=t.forwardRef((t,o)=>{const{to:u,params:s,onClick:i,...a}=t,{mappedRoutes:c}=n(),l=c.find(({route:e})=>e===u),{onOpen:p}=r.useUnit(u);if(!l)throw new Error(`[Link] Route with path "${u.path}" not found. Maybe it is not passed into createRouter?`);return e.jsx("a",{...a,ref:o,href:l.build(s??void 0),onClick:e=>{null==i||i(e),e.defaultPrevented||a.target&&"_self"!==a.target||e.metaKey||e.altKey||e.ctrlKey||e.shiftKey||(e.preventDefault(),p({params:s||{}}))}})});exports.Link=u,exports.RouterProvider=t=>e.jsx(o.Provider,{value:t.router,children:t.children}),exports.createLazyRouteView=function(r){r.route.internal.setAsyncImport(r.view);const o=t.lazy(r.view),{layout:n,fallback:u=()=>e.jsx(e.Fragment,{})}=r,s=n?()=>e.jsx(n,{children:e.jsx(t.Suspense,{fallback:e.jsx(u,{}),children:e.jsx(o,{})})}):()=>e.jsx(t.Suspense,{fallback:e.jsx(u,{}),children:e.jsx(o,{})});return{route:r.route,view:s}},exports.createRouteView=function(t){const{layout:r,view:o}=t,n=r?()=>e.jsx(r,{children:e.jsx(o,{})}):()=>e.jsx(o,{});return{route:t.route,view:n}},exports.createRoutesView=o=>{const{routes:n,otherwise:u}=o;return()=>{const o=r.useProvidedScope(),s=r.useUnit(n.map(e=>e.route.$isOpened)),i=t.useMemo(()=>{const e=n.filter(e=>Boolean(function(e,t){return t?t.getState(e):e.getState()}(e.route.$isOpened,o)));return e.reduce((e,t)=>e.filter(e=>e.route!==t.route.parent),e)},[s]),a=i.at(-1);return a?t.createElement(a.view):u?e.jsx(u,{}):null}},exports.useRouter=function(){return r.useUnit(n())},exports.useRouterContext=n,exports.withLayout=function(r,o){const n=r;return o.map(({route:r,view:o})=>({route:r,view:()=>e.jsx(n,{children:t.createElement(o)})}))};

package/dist/index.d.ts

@@ -179,4 +179,38 @@ export declare function useRouter(): {
 
 export declare function useRouterContext(): Router;
 
+/**
+ * @description Group routes by layout, so you don't need to pass `layout` property manually in all routes. Works for `createRouteView` and `createLazyRouteView`.
+ * @link https://movpushmov.dev/argon-router/react/with-layout.html
+ * @example ```tsx
+ * import {
+ *   createRoutesView,
+ *   createRouteView,
+ *   withLayout,
+ * } from '@argon-router/react';
+ *
+ * import { ProfileScreen } from './profile';
+ * import { SignInScreen } from './sign-in';
+ * import { SignUpScreen } from './sign-up';
+ *
+ * import { routes } from '@shared/routing';
+ *
+ * import { AuthLayout } from '@layouts/auth';
+ *
+ * export const RoutesView = createRoutesView([
+ *   ...withLayout(AuthLayout, [
+ *     createRouteView({ route: routes.signIn, view: SignInScreen }),
+ *     createRouteView({ route: routes.signUp, view: SignUpScreen }),
+ *   ]),
+ *   createRouteView({ route: routes.profile, view: ProfileScreen }),
+ * ]);
+ * ```
+ */
+export declare function withLayout(layout: ComponentType<{
+    children: ReactNode;
+}>, views: RouteView[]): {
+    route: Route<any>;
+    view: () => JSX.Element;
+}[];
+
 export { }

package/dist/index.js

@@ -51,12 +51,11 @@ const Link = forwardRef((props, ref) => {
   );
 });
 function createRouteView(props) {
+  const { layout: Layout, view: View } = props;
+  const view = Layout ? () => /* @__PURE__ */ jsx(Layout, { children: /* @__PURE__ */ jsx(View, {}) }) : () => /* @__PURE__ */ jsx(View, {});
   return {
     route: props.route,
-    view: () => {
-      const { view: View, layout: Layout } = props;
-      return Layout ? /* @__PURE__ */ jsx(Layout, { children: /* @__PURE__ */ jsx(View, {}) }) : /* @__PURE__ */ jsx(View, {});
-    }
+    view
   };
 }
 function getStoreValue(store, scope) {
@@ -88,14 +87,20 @@ const createRoutesView = (props) => {
 function createLazyRouteView(props) {
   props.route.internal.setAsyncImport(props.view);
   const View = lazy(props.view);
+  const { layout: Layout, fallback: Fallback = () => /* @__PURE__ */ jsx(Fragment, {}) } = props;
+  const view = Layout ? () => /* @__PURE__ */ jsx(Layout, { children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Fallback, {}), children: /* @__PURE__ */ jsx(View, {}) }) }) : () => /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Fallback, {}), children: /* @__PURE__ */ jsx(View, {}) });
   return {
     route: props.route,
-    view: () => {
-      const { layout: Layout, fallback: Fallback = () => /* @__PURE__ */ jsx(Fragment, {}) } = props;
-      return Layout ? /* @__PURE__ */ jsx(Layout, { children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Fallback, {}), children: /* @__PURE__ */ jsx(View, {}) }) }) : /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Fallback, {}), children: /* @__PURE__ */ jsx(View, {}) });
-    }
+    view
   };
 }
+function withLayout(layout, views) {
+  const Layout = layout;
+  return views.map(({ route, view }) => ({
+    route,
+    view: () => /* @__PURE__ */ jsx(Layout, { children: createElement(view) })
+  }));
+}
 export {
   Link,
   RouterProvider,
@@ -103,5 +108,6 @@ export {
   createRouteView,
   createRoutesView,
   useRouter,
-  useRouterContext
+  useRouterContext,
+  withLayout
 };

package/package.json

@@ -5,7 +5,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "private": false,
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "React bindings for argon router",
   "keywords": [
     "effector",
@@ -44,7 +44,7 @@
     "url": "https://github.com/movpushmov/argon-router/issues"
   },
   "dependencies": {
-    "@argon-router/core": "^0.9.0"
+    "@argon-router/core": "^0.10.0"
   },
   "devDependencies": {
     "@babel/preset-react": "^7.26.3",
@@ -59,5 +59,5 @@
     "effector-react": ">=23",
     "react": "18 || 19"
   },
-  "gitHead": "fab0cd752c30cf142c168308596b2dcf2c664da2"
+  "gitHead": "7f8d946c9b6d11a4a828bdf2bafcf012970aa4d7"
 }