@argon-router/react 0.11.2 → 0.12.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,replace:a,query:c,...l}=t,{mappedRoutes:p}=n(),x=p.find(({route:e})=>e===u),{onOpen:d}=r.useUnit(u);if(!x)throw new Error(`[Link] Route with path "${u.path}" not found. Maybe it is not passed into createRouter?`);return e.jsx("a",{...l,ref:o,href:x.build(s??void 0),onClick:e=>{null==i||i(e),e.defaultPrevented||l.target&&"_self"!==l.target||e.metaKey||e.altKey||e.ctrlKey||e.shiftKey||(e.preventDefault(),d({params:s||{},replace:a,query:c}))}})});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.useUnit(n.map(e=>e.route.$isOpened)),s=t.useMemo(()=>{const e=n.filter((e,t)=>o[t]);return e.reduce((e,t)=>e.filter(e=>e.route!==t.route.parent),e)},[o]).at(-1);return s?t.createElement(s.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)})}))};
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),r=require("effector-react"),n=require("@argon-router/core"),o=require("effector"),u=t.createContext(null),s=t.createContext(null);function i(){const e=t.useContext(u);if(!e)throw new Error("[useRouter] Router not found. Add RouterProvider in app root");return e}function c(e,t){const{knownRoutes:n}=i(),o=n.find(({route:t})=>t===e),{onOpen:u}=r.useUnit(e);if(!o)throw new Error(`[useLink] Route "${e}" not found. Maybe it is not passed into createRouter?`);return{path:o.build(t??void 0),onOpen:u}}const a=t.forwardRef((t,r)=>{const{to:n,params:o,onClick:u,replace:s,query:i,...a}=t,{path:l,onOpen:p}=c(n,o);return e.jsx("a",{...a,ref:r,href:l,onClick:e=>{null==u||u(e),e.defaultPrevented||a.target&&"_self"!==a.target||e.metaKey||e.altKey||e.ctrlKey||e.shiftKey||(e.preventDefault(),p({params:o||{},replace:s,query:i}))}})});function l(e,t){return t?t.getState(e):e.getState()}function p(e){const u=r.useProvidedScope(),[s,i]=t.useState(function(e,t){return e.map(e=>n.is.router(e.route)?l(e.route.$activeRoutes,t).length>0:l(e.route.$isOpened,t))}(e,u));return t.useEffect(()=>{const t=[];for(const[r,s]of e.entries())if(n.is.router(s.route)){const e=s.route,n=o.createWatch({unit:e.$activeRoutes,scope:u??void 0,fn:e=>{i(t=>{const n=[...t];return n[r]=e.length>0,n})}});t.push(n)}else t.push(o.createWatch({unit:s.route.$isOpened,scope:u??void 0,fn:e=>{i(t=>{const n=[...t];return n[r]=e,n})}}));return()=>{for(const e of t)e.unsubscribe()}},[e,u]),t.useMemo(()=>{const t=e.filter((e,t)=>s[t]);return t.reduce((e,t)=>e.filter(e=>e.route!==t.route.parent),t)},[e,s])}exports.Link=a,exports.Outlet=()=>{const{children:e}=t.useContext(s)??{children:[]},r=p(e).at(-1);return r?t.createElement(r.view):null},exports.RouterProvider=t=>e.jsx(u.Provider,{value:t.router,children:t.children}),exports.createLazyRouteView=function(r){r.route.internal.setAsyncImport(r.view);const n=t.lazy(r.view),{layout:o,fallback:u=()=>e.jsx(e.Fragment,{})}=r,s=o?()=>e.jsx(o,{children:e.jsx(t.Suspense,{fallback:e.jsx(u,{}),children:e.jsx(n,{})})}):()=>e.jsx(t.Suspense,{fallback:e.jsx(u,{}),children:e.jsx(n,{})});return{route:r.route,view:s}},exports.createRouteView=function(t){const{layout:r,view:n}=t,o=r?()=>e.jsx(r,{children:e.jsx(n,{})}):()=>e.jsx(n,{});return{route:t.route,view:o}},exports.createRoutesView=r=>{const{routes:n,otherwise:o}=r;return()=>{const r=p(n).at(-1);return r?e.jsx(s.Provider,{value:{children:r.children??[]},children:t.createElement(r.view)}):o?e.jsx(o,{}):null}},exports.useIsOpened=function(e){return n.is.router(e)?r.useUnit(e.$activeRoutes).length>0:r.useUnit(e.$isOpened)},exports.useLink=c,exports.useOpenedViews=p,exports.useRouter=function(){return r.useUnit(i())},exports.useRouterContext=i,exports.withLayout=function(r,n){const o=r;return n.map(({route:r,view:n})=>({route:r,view:()=>e.jsx(o,{children:t.createElement(n)})}))};

package/dist/index.d.ts

@@ -1,27 +1,31 @@
 import { AnchorHTMLAttributes } from 'react';
 import { ComponentType } from 'react';
+import { Equal } from 'effector-react';
 import { FC } from 'react';
 import { ForwardedRef } from 'react';
+import { FunctionComponentElement } from 'react';
 import { JSX } from 'react/jsx-runtime';
 import { NavigatePayload } from '@argon-router/core';
 import { OpenPayloadBase } from '@argon-router/core';
 import { Query } from '@argon-router/core';
 import { ReactNode } from 'react';
 import { Route } from '@argon-router/core';
+import { RouteOpenedPayload } from '@argon-router/core';
 import { Router } from '@argon-router/core';
 
 declare type AnchorProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>;
 
-declare type BaseLinkProps<Params> = {
+declare type BaseLinkProps<Params extends object | void = void> = {
     to: Route<Params>;
     children?: ReactNode;
 } & AnchorProps & OpenPayloadBase;
 
-declare interface CreateBaseRouteViewProps<T> {
-    route: Route<T>;
+declare interface CreateBaseRouteViewProps<T extends object | void = void> {
+    route: Route<T> | Router;
     layout?: ComponentType<{
         children: ReactNode;
     }>;
+    children?: CreateBaseRouteViewProps<any>[];
 }
 
 /**
@@ -48,9 +52,9 @@ declare interface CreateBaseRouteViewProps<T> {
  * });
  * ```
  */
-export declare function createLazyRouteView<T>(props: CreateLazyRouteViewProps<T>): RouteView;
+export declare function createLazyRouteView<T extends object | void = void>(props: CreateLazyRouteViewProps<T>): RouteView;
 
-export declare interface CreateLazyRouteViewProps<T> extends CreateBaseRouteViewProps<T> {
+export declare interface CreateLazyRouteViewProps<T extends object | void = void> extends CreateBaseRouteViewProps<T> {
     view: () => Promise<{
         default: ComponentType;
     }>;
@@ -108,13 +112,13 @@ declare interface CreateRoutesViewProps {
  * });
  * ```
  */
-export declare function createRouteView<T>(props: CreateRouteViewProps<T>): RouteView;
+export declare function createRouteView<T extends object | void = void>(props: CreateRouteViewProps<T>): RouteView;
 
-export declare interface CreateRouteViewProps<T> extends CreateBaseRouteViewProps<T> {
+export declare interface CreateRouteViewProps<T extends object | void = void> extends CreateBaseRouteViewProps<T> {
     view: ComponentType;
 }
 
-declare type ForwardedLink = <Params = void>(props: LinkProps<Params> & {
+declare type ForwardedLink = <Params extends object | void = void>(props: LinkProps<Params> & {
     ref?: ForwardedRef<HTMLAnchorElement>;
 }) => ReactNode;
 
@@ -142,12 +146,41 @@ declare type ForwardedLink = <Params = void>(props: LinkProps<Params> & {
  */
 export declare const Link: ForwardedLink;
 
-export declare type LinkProps<Params> = Params extends Record<string, never> | void | undefined ? BaseLinkProps<Params> & {
+export declare type LinkProps<Params extends object | void = void> = Params extends Record<string, never> | void | undefined ? BaseLinkProps<Params> & {
     params?: Params;
 } : BaseLinkProps<Params> & {
     params: Params;
 };
 
+/**
+ * @description Outlet component for nested routes
+ * @link https://movpushmov.dev/argon-router/react/outlet.html
+ * @example ```ts
+ * export const RoutesView = createRoutesView([
+ *   createRouteView({
+ *     route: routes.profile,
+ *     view: ProfileScreen,
+ *     children: [
+ *      createRouteView({ route: routes.settings, view: SettingsScreen }),
+ *     ]
+ *   }),
+ * ]);
+ *
+ * // profile.tsx
+ * export const ProfileScreen = () => {
+ *   // will render settings screen when profile route is opened
+ *   // and settings route is active
+ *   return (
+ *     <>
+ *       <div>Profile</div>
+ *       <Outlet />
+ *     </>
+ *   );
+ * };
+ * ```
+ */
+export declare const Outlet: () => FunctionComponentElement<{}> | null;
+
 /**
  * @description Provides router in React tree
  * @param props Router provider config
@@ -160,10 +193,20 @@ declare interface RouterProviderProps {
 }
 
 export declare interface RouteView {
-    route: Route<any>;
+    route: Route<any> | Router;
     view: FC;
+    children?: RouteView[];
 }
 
+export declare function useIsOpened(route: Route | Router): boolean;
+
+export declare function useLink<T extends object | void = void>(to: Route<T>, params: T): {
+    path: string;
+    onOpen: Equal<RouteOpenedPayload<T>, void> extends true ? () => void : (payload: RouteOpenedPayload<T>) => RouteOpenedPayload<T>;
+};
+
+export declare function useOpenedViews(routes: RouteView[]): RouteView[];
+
 /**
  * @description Use router from provider
  * @returns Router
@@ -210,8 +253,16 @@ export declare function useRouterContext(): Router;
 export declare function withLayout(layout: ComponentType<{
     children: ReactNode;
 }>, views: RouteView[]): {
-    route: Route<any>;
+    route: Router | Route<any>;
     view: () => JSX.Element;
 }[];
 
 export { }
+
+
+declare module 'vitest' {
+    interface Assertion<T = any> extends CustomMatchers<T> {
+    }
+    interface AsymmetricMatchersContaining extends CustomMatchers {
+    }
+}

package/dist/index.js

@@ -1,7 +1,12 @@
 import { jsx, Fragment } from "react/jsx-runtime";
-import { createContext, useContext, forwardRef, useMemo, createElement, lazy, Suspense } from "react";
-import { useUnit } from "effector-react";
+import { createContext, useContext, forwardRef, useState, useEffect, useMemo, createElement, lazy, Suspense } from "react";
+import { useUnit, useProvidedScope } from "effector-react";
+import { is } from "@argon-router/core";
+import { createWatch } from "effector";
 const RouterProviderContext = createContext(null);
+const OutletContext = createContext(
+  null
+);
 const RouterProvider = (props) => {
   return /* @__PURE__ */ jsx(RouterProviderContext.Provider, { value: props.router, children: props.children });
 };
@@ -17,22 +22,31 @@ function useRouterContext() {
 function useRouter() {
   return useUnit(useRouterContext());
 }
-const Link = forwardRef((props, ref) => {
-  const { to, params, onClick, replace, query, ...anchorProps } = props;
-  const { mappedRoutes } = useRouterContext();
-  const target = mappedRoutes.find(({ route }) => route === to);
+function useLink(to, params) {
+  const { knownRoutes } = useRouterContext();
+  const target = knownRoutes.find(
+    ({ route }) => route === to
+  );
   const { onOpen } = useUnit(to);
   if (!target) {
     throw new Error(
-      `[Link] Route with path "${to.path}" not found. Maybe it is not passed into createRouter?`
+      `[useLink] Route "${to}" not found. Maybe it is not passed into createRouter?`
     );
   }
+  return {
+    path: target.build(params ?? void 0),
+    onOpen
+  };
+}
+const Link = forwardRef((props, ref) => {
+  const { to, params, onClick, replace, query, ...anchorProps } = props;
+  const { path, onOpen } = useLink(to, params);
   return /* @__PURE__ */ jsx(
     "a",
     {
       ...anchorProps,
       ref,
-      href: target.build(params ?? void 0),
+      href: path,
       onClick: (e) => {
         onClick == null ? void 0 : onClick(e);
         if (e.defaultPrevented) {
@@ -45,7 +59,11 @@ const Link = forwardRef((props, ref) => {
           return;
         }
         e.preventDefault();
-        onOpen({ params: params || {}, replace, query });
+        onOpen({
+          params: params || {},
+          replace,
+          query
+        });
       }
     }
   );
@@ -58,24 +76,79 @@ function createRouteView(props) {
     view
   };
 }
+function getStoreValue(store, scope) {
+  return scope ? scope.getState(store) : store.getState();
+}
+function getVisibilities(routes, scope) {
+  return routes.map((view) => {
+    if (is.router(view.route)) {
+      return getStoreValue(view.route.$activeRoutes, scope).length > 0;
+    }
+    return getStoreValue(view.route.$isOpened, scope);
+  });
+}
+function useOpenedViews(routes) {
+  const scope = useProvidedScope();
+  const [visibilities, setVisibilities] = useState(
+    getVisibilities(routes, scope)
+  );
+  useEffect(() => {
+    const subscriptions = [];
+    for (const [index, view] of routes.entries()) {
+      if (is.router(view.route)) {
+        const router = view.route;
+        const subscription = createWatch({
+          unit: router.$activeRoutes,
+          scope: scope ?? void 0,
+          fn: (routes2) => {
+            setVisibilities((prev) => {
+              const newVisibilities = [...prev];
+              newVisibilities[index] = routes2.length > 0;
+              return newVisibilities;
+            });
+          }
+        });
+        subscriptions.push(subscription);
+      } else {
+        subscriptions.push(
+          createWatch({
+            unit: view.route.$isOpened,
+            scope: scope ?? void 0,
+            fn: (isOpened) => {
+              setVisibilities((prev) => {
+                const newVisibilities = [...prev];
+                newVisibilities[index] = isOpened;
+                return newVisibilities;
+              });
+            }
+          })
+        );
+      }
+    }
+    return () => {
+      for (const subscription of subscriptions) {
+        subscription.unsubscribe();
+      }
+    };
+  }, [routes, scope]);
+  return useMemo(() => {
+    const filtered = routes.filter((_, i) => visibilities[i]);
+    return filtered.reduce(
+      (filtered2, view) => filtered2.filter(
+        (r) => r.route !== view.route.parent
+      ),
+      filtered
+    );
+  }, [routes, visibilities]);
+}
 const createRoutesView = (props) => {
   const { routes, otherwise: NotFound } = props;
   return () => {
-    const visibilities = useUnit(routes.map((view) => view.route.$isOpened));
-    const openedViews = useMemo(() => {
-      const filtered = routes.filter((_, i) => visibilities[i]);
-      return filtered.reduce(
-        (filtered2, view) => filtered2.filter(
-          (r) => r.route !== view.route.parent
-        ),
-        filtered
-      );
-    }, [visibilities]);
-    const lastRoute = openedViews.at(-1);
-    if (!lastRoute) {
+    const openedView = useOpenedViews(routes).at(-1);
+    if (!openedView) {
       return NotFound ? /* @__PURE__ */ jsx(NotFound, {}) : null;
     }
-    return createElement(lastRoute.view);
+    return /* @__PURE__ */ jsx(OutletContext.Provider, { value: { children: openedView.children ?? [] }, children: createElement(openedView.view) });
   };
 };
 function createLazyRouteView(props) {
@@ -95,12 +168,27 @@ function withLayout(layout, views) {
     view: () => /* @__PURE__ */ jsx(Layout, { children: createElement(view) })
   }));
 }
+const Outlet = () => {
+  const { children } = useContext(OutletContext) ?? { children: [] };
+  const openedView = useOpenedViews(children).at(-1);
+  if (!openedView) {
+    return null;
+  }
+  return createElement(openedView.view);
+};
+function useIsOpened(route) {
+  return is.router(route) ? useUnit(route.$activeRoutes).length > 0 : useUnit(route.$isOpened);
+}
 export {
   Link,
+  Outlet,
   RouterProvider,
   createLazyRouteView,
   createRouteView,
   createRoutesView,
+  useIsOpened,
+  useLink,
+  useOpenedViews,
   useRouter,
   useRouterContext,
   withLayout

package/package.json

@@ -5,7 +5,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "private": false,
-  "version": "0.11.2",
+  "version": "0.12.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.11.1"
+    "@argon-router/core": "^0.12.0"
   },
   "devDependencies": {
     "@babel/preset-react": "^7.26.3",
@@ -59,5 +59,5 @@
     "effector-react": ">=23",
     "react": "18 || 19"
   },
-  "gitHead": "f63bf945db57a29b96028a96aaef81cc79bc4320"
+  "gitHead": "9832d6cd282d6abd33c26ba4d03b9a1176110fc4"
 }

package/LICENSE.MD

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2024 Edward Gigolaev
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.