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

package/LICENSE.MD

@@ -0,0 +1,21 @@
+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.

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"),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)})}))};
+"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

@@ -22,10 +22,8 @@ declare type BaseLinkProps<Params extends object | void = void> = {
 
 declare interface CreateBaseRouteViewProps<T extends object | void = void> {
     route: Route<T> | Router;
-    layout?: ComponentType<{
-        children: ReactNode;
-    }>;
-    children?: CreateBaseRouteViewProps<any>[];
+    layout?: LayoutComponent;
+    children?: RouteViewWithLayout[];
 }
 
 /**
@@ -122,6 +120,10 @@ declare type ForwardedLink = <Params extends object | void = void>(props: LinkPr
     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
@@ -198,6 +200,10 @@ export declare interface RouteView {
     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): {
@@ -258,11 +264,3 @@ export declare function withLayout(layout: ComponentType<{
 }[];
 
 export { }
-
-
-declare module 'vitest' {
-    interface Assertion<T = any> extends CustomMatchers<T> {
-    }
-    interface AsymmetricMatchersContaining extends CustomMatchers {
-    }
-}

package/dist/index.js

@@ -1,195 +1,153 @@
-import { jsx, Fragment } from "react/jsx-runtime";
-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(
+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
-);
-const RouterProvider = (props) => {
-  return /* @__PURE__ */ jsx(RouterProviderContext.Provider, { value: props.router, children: props.children });
-};
-function useRouterContext() {
-  const context = useContext(RouterProviderContext);
-  if (!context) {
+), 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());
 }
-function useLink(to, params) {
-  const { knownRoutes } = useRouterContext();
-  const target = knownRoutes.find(
-    ({ route }) => route === to
-  );
-  const { onOpen } = useUnit(to);
-  if (!target) {
-    throw new Error(
-      `[useLink] Route "${to}" 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 {
-    path: target.build(params ?? void 0),
-    onOpen
+    path: r.build(t ?? void 0),
+    onOpen: o
   };
 }
-const Link = forwardRef((props, ref) => {
-  const { to, params, onClick, replace, query, ...anchorProps } = props;
-  const { path, onOpen } = useLink(to, params);
-  return /* @__PURE__ */ jsx(
+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: path,
-      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
   };
 }
-function getStoreValue(store, scope) {
-  return scope ? scope.getState(store) : store.getState();
+function R(e, t) {
+  return t ? t.getState(e) : e.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 F(e, t) {
+  return e.map((n) => p.router(n.route) ? R(n.route.$activeRoutes, t).length > 0 : R(n.route.$isOpened, t));
 }
-function useOpenedViews(routes) {
-  const scope = useProvidedScope();
-  const [visibilities, setVisibilities] = useState(
-    getVisibilities(routes, scope)
+function x(e) {
+  const t = E(), [n, r] = P(
+    F(e, t)
   );
-  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;
+  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;
             });
           }
         });
-        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;
+        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 subscription of subscriptions) {
-        subscription.unsubscribe();
-      }
+      for (const u of o)
+        u.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
+  }, [e, t]), S(() => {
+    const o = e.filter((u, s) => n[s]);
+    return o.reduce(
+      (u, s) => u.filter(
+        (c) => c.route !== s.route.parent
       ),
-      filtered
+      o
     );
-  }, [routes, visibilities]);
+  }, [e, n]);
 }
-const createRoutesView = (props) => {
-  const { routes, otherwise: NotFound } = props;
+const U = (e) => {
+  const { routes: t, otherwise: n } = e;
   return () => {
-    const openedView = useOpenedViews(routes).at(-1);
-    if (!openedView) {
-      return NotFound ? /* @__PURE__ */ jsx(NotFound, {}) : null;
-    }
-    return /* @__PURE__ */ jsx(OutletContext.Provider, { value: { children: openedView.children ?? [] }, children: createElement(openedView.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 Outlet = () => {
-  const { children } = useContext(OutletContext) ?? { children: [] };
-  const openedView = useOpenedViews(children).at(-1);
-  if (!openedView) {
-    return null;
-  }
-  return createElement(openedView.view);
+const G = () => {
+  const { children: e } = y(g) ?? { children: [] }, t = x(e).at(-1);
+  return t ? h(t.view) : null;
 };
-function useIsOpened(route) {
-  return is.router(route) ? useUnit(route.$activeRoutes).length > 0 : useUnit(route.$isOpened);
+function H(e) {
+  return p.router(e) ? d(e.$activeRoutes).length > 0 : d(e.$isOpened);
 }
 export {
-  Link,
-  Outlet,
-  RouterProvider,
-  createLazyRouteView,
-  createRouteView,
-  createRoutesView,
-  useIsOpened,
-  useLink,
-  useOpenedViews,
-  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.12.0",
+  "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.12.0"
+    "@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": "9832d6cd282d6abd33c26ba4d03b9a1176110fc4"
-}
+  "gitHead": "9832d6cd282d6abd33c26ba4d03b9a1176110fc4",
+  "scripts": {
+    "build": "vite build",
+    "test": "vitest run"
+  }
+}