@argon-router/react 0.11.2 → 1.0.0-rc.0

package/README.md

@@ -2,9 +2,6 @@
 
 Router without a headache
 
-> [!WARNING]
-> argon-router is not production ready yet and still may have bugs and unstable API. If you found bug — please report it on GitHub.
-
 ## Documentation
 
 For additional information, guides and api reference visit [documentation site](https://movpushmov.dev/argon-router/)

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

package/dist/index.d.ts

@@ -1,27 +1,29 @@
 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>;
-    layout?: ComponentType<{
-        children: ReactNode;
-    }>;
+declare interface CreateBaseRouteViewProps<T extends object | void = void> {
+    route: Route<T> | Router;
+    layout?: LayoutComponent;
+    children?: RouteViewWithLayout[];
 }
 
 /**
@@ -48,9 +50,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,16 +110,20 @@ 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;
 
+declare type LayoutComponent = ComponentType<{
+    children: ReactNode;
+}>;
+
 /**
  * @description Navigates user to provided route on click
  * @link https://movpushmov.dev/argon-router/react/link.html
@@ -142,12 +148,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 +195,24 @@ declare interface RouterProviderProps {
 }
 
 export declare interface RouteView {
-    route: Route<any>;
+    route: Route<any> | Router;
     view: FC;
+    children?: RouteView[];
 }
 
+declare type RouteViewWithLayout = RouteView & {
+    layout?: LayoutComponent;
+};
+
+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,7 +259,7 @@ 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;
 }[];
 

package/dist/index.js

@@ -1,107 +1,153 @@
-import { jsx, Fragment } from "react/jsx-runtime";
-import { createContext, useContext, forwardRef, useMemo, createElement, lazy, Suspense } from "react";
-import { useUnit } from "effector-react";
-const RouterProviderContext = createContext(null);
-const RouterProvider = (props) => {
-  return /* @__PURE__ */ jsx(RouterProviderContext.Provider, { value: props.router, children: props.children });
-};
-function useRouterContext() {
-  const context = useContext(RouterProviderContext);
-  if (!context) {
+import { jsx as i, Fragment as L } from "react/jsx-runtime";
+import { createContext as b, useContext as y, forwardRef as O, useState as P, useEffect as C, useMemo as S, createElement as h, lazy as $, Suspense as v } from "react";
+import { useUnit as d, useProvidedScope as E } from "effector-react";
+import { is as p } from "@argon-router/core";
+import { createWatch as m } from "effector";
+const V = b(null), g = b(
+  null
+), j = (e) => /* @__PURE__ */ i(V.Provider, { value: e.router, children: e.children });
+function k() {
+  const e = y(V);
+  if (!e)
     throw new Error(
       "[useRouter] Router not found. Add RouterProvider in app root"
     );
-  }
-  return context;
+  return e;
 }
-function useRouter() {
-  return useUnit(useRouterContext());
+function q() {
+  return d(k());
 }
-const Link = forwardRef((props, ref) => {
-  const { to, params, onClick, replace, query, ...anchorProps } = props;
-  const { mappedRoutes } = useRouterContext();
-  const target = mappedRoutes.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?`
+function K(e, t) {
+  const { knownRoutes: n } = k(), r = n.find(
+    ({ route: u }) => u === e
+  ), { onOpen: o } = d(e);
+  if (!r)
+    throw console.error("[useLink route log]", e), new Error(
+      "[useLink] Route not found. Maybe it is not passed into createRouter?"
     );
-  }
-  return /* @__PURE__ */ jsx(
+  return {
+    path: r.build(t ?? void 0),
+    onOpen: o
+  };
+}
+const D = O((e, t) => {
+  const { to: n, params: r, onClick: o, replace: u, query: s, ...c } = e, { path: f, onOpen: a } = K(n, r);
+  return /* @__PURE__ */ i(
     "a",
     {
-      ...anchorProps,
-      ref,
-      href: target.build(params ?? void 0),
-      onClick: (e) => {
-        onClick == null ? void 0 : onClick(e);
-        if (e.defaultPrevented) {
-          return;
-        }
-        if (anchorProps.target && anchorProps.target !== "_self") {
-          return;
-        }
-        if (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) {
-          return;
-        }
-        e.preventDefault();
-        onOpen({ params: params || {}, replace, query });
+      ...c,
+      ref: t,
+      href: f,
+      onClick: (l) => {
+        o?.(l), !l.defaultPrevented && (c.target && c.target !== "_self" || l.metaKey || l.altKey || l.ctrlKey || l.shiftKey || (l.preventDefault(), a({
+          params: r || {},
+          replace: u,
+          query: s
+        })));
       }
     }
   );
 });
-function createRouteView(props) {
-  const { layout: Layout, view: View } = props;
-  const view = Layout ? () => /* @__PURE__ */ jsx(Layout, { children: /* @__PURE__ */ jsx(View, {}) }) : () => /* @__PURE__ */ jsx(View, {});
+function N(e) {
+  const { layout: t, view: n, children: r } = e, o = t ? () => /* @__PURE__ */ i(t, { children: /* @__PURE__ */ i(n, {}) }) : () => /* @__PURE__ */ i(n, {});
   return {
-    route: props.route,
-    view
+    route: e.route,
+    view: o,
+    children: r
   };
 }
-const createRoutesView = (props) => {
-  const { routes, otherwise: NotFound } = props;
+function R(e, t) {
+  return t ? t.getState(e) : e.getState();
+}
+function F(e, t) {
+  return e.map((n) => p.router(n.route) ? R(n.route.$activeRoutes, t).length > 0 : R(n.route.$isOpened, t));
+}
+function x(e) {
+  const t = E(), [n, r] = P(
+    F(e, t)
+  );
+  return C(() => {
+    const o = [];
+    for (const [u, s] of e.entries())
+      if (p.router(s.route)) {
+        const c = s.route, f = m({
+          unit: c.$activeRoutes,
+          scope: t ?? void 0,
+          fn: (a) => {
+            r((l) => {
+              const w = [...l];
+              return w[u] = a.length > 0, w;
+            });
+          }
+        });
+        o.push(f);
+      } else
+        o.push(
+          m({
+            unit: s.route.$isOpened,
+            scope: t ?? void 0,
+            fn: (c) => {
+              r((f) => {
+                const a = [...f];
+                return a[u] = c, a;
+              });
+            }
+          })
+        );
+    return () => {
+      for (const u of o)
+        u.unsubscribe();
+    };
+  }, [e, t]), S(() => {
+    const o = e.filter((u, s) => n[s]);
+    return o.reduce(
+      (u, s) => u.filter(
+        (c) => c.route !== s.route.parent
+      ),
+      o
+    );
+  }, [e, n]);
+}
+const U = (e) => {
+  const { routes: t, otherwise: n } = e;
   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) {
-      return NotFound ? /* @__PURE__ */ jsx(NotFound, {}) : null;
-    }
-    return createElement(lastRoute.view);
+    const r = x(t).at(-1);
+    return r ? /* @__PURE__ */ i(g.Provider, { value: { children: r.children ?? [] }, children: h(r.view) }) : n ? /* @__PURE__ */ i(n, {}) : null;
   };
 };
-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, {}) });
+function W(e) {
+  e.route.internal.setAsyncImport(e.view);
+  const t = $(e.view), { layout: n, fallback: r = () => /* @__PURE__ */ i(L, {}) } = e, o = n ? () => /* @__PURE__ */ i(n, { children: /* @__PURE__ */ i(v, { fallback: /* @__PURE__ */ i(r, {}), children: /* @__PURE__ */ i(t, {}) }) }) : () => /* @__PURE__ */ i(v, { fallback: /* @__PURE__ */ i(r, {}), children: /* @__PURE__ */ i(t, {}) });
   return {
-    route: props.route,
-    view
+    route: e.route,
+    view: o
   };
 }
-function withLayout(layout, views) {
-  const Layout = layout;
-  return views.map(({ route, view }) => ({
-    route,
-    view: () => /* @__PURE__ */ jsx(Layout, { children: createElement(view) })
+function B(e, t) {
+  const n = e;
+  return t.map(({ route: r, view: o }) => ({
+    route: r,
+    view: () => /* @__PURE__ */ i(n, { children: h(o) })
   }));
 }
+const G = () => {
+  const { children: e } = y(g) ?? { children: [] }, t = x(e).at(-1);
+  return t ? h(t.view) : null;
+};
+function H(e) {
+  return p.router(e) ? d(e.$activeRoutes).length > 0 : d(e.$isOpened);
+}
 export {
-  Link,
-  RouterProvider,
-  createLazyRouteView,
-  createRouteView,
-  createRoutesView,
-  useRouter,
-  useRouterContext,
-  withLayout
+  D as Link,
+  G as Outlet,
+  j as RouterProvider,
+  W as createLazyRouteView,
+  N as createRouteView,
+  U as createRoutesView,
+  H as useIsOpened,
+  K as useLink,
+  x as useOpenedViews,
+  q as useRouter,
+  k as useRouterContext,
+  B as withLayout
 };

package/package.json

@@ -5,7 +5,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "private": false,
-  "version": "0.11.2",
+  "version": "1.0.0-rc.0",
   "description": "React bindings for argon router",
   "keywords": [
     "effector",
@@ -36,15 +36,11 @@
     "type": "git",
     "url": "git+https://github.com/movpushmov/argon-router.git"
   },
-  "scripts": {
-    "build": "vite build",
-    "test": "vitest run"
-  },
   "bugs": {
     "url": "https://github.com/movpushmov/argon-router/issues"
   },
   "dependencies": {
-    "@argon-router/core": "^0.11.1"
+    "@argon-router/core": "1.0.0-rc.0"
   },
   "devDependencies": {
     "@babel/preset-react": "^7.26.3",
@@ -52,6 +48,7 @@
     "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^14.6.1",
     "@vitejs/plugin-react": "^4.3.4",
+    "happy-dom": "^20.8.3",
     "jsdom": "^25.0.1"
   },
   "peerDependencies": {
@@ -59,5 +56,9 @@
     "effector-react": ">=23",
     "react": "18 || 19"
   },
-  "gitHead": "f63bf945db57a29b96028a96aaef81cc79bc4320"
-}
+  "gitHead": "9832d6cd282d6abd33c26ba4d03b9a1176110fc4",
+  "scripts": {
+    "build": "vite build",
+    "test": "vitest run"
+  }
+}