@argon-router/react 0.6.0 → 0.6.2

package/README.md

@@ -3,7 +3,7 @@
 Router without a headache
 
 > [!WARNING]
-> argon-router is extermely unstable & maybe buggy. DO NOT USE IN PRODUCTION!
+> 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
 
@@ -13,6 +13,7 @@ For additional information, guides and api reference visit [documentation site](
 
 - [@argon-router/core](https://www.npmjs.com/package/@argon-router/core)
 - [@argon-router/react](https://www.npmjs.com/package/@argon-router/react)
+- [@argon-router/paths](https://www.npmjs.com/package/@argon-router/paths)
 
 ## Installation
 

package/dist/index.cjs

@@ -28,4 +28,4 @@ React keys must be passed directly to JSX without using spread:
 
 Check the render method of \``+t+"`."),r||(e=a(e))&&(r=`
 
-Check the top-level render call using <`+e+">."),r}var he=y,Y=Symbol.for("react.transitional.element"),Te=Symbol.for("react.portal"),M=Symbol.for("react.fragment"),B=Symbol.for("react.strict_mode"),K=Symbol.for("react.profiler"),I=Symbol.for("react.consumer"),Z=Symbol.for("react.context"),$=Symbol.for("react.forward_ref"),V=Symbol.for("react.suspense"),W=Symbol.for("react.suspense_list"),U=Symbol.for("react.memo"),q=Symbol.for("react.lazy"),ke=Symbol.for("react.offscreen"),Q=Symbol.iterator,pe=Symbol.for("react.client.reference"),_=he.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,D=Object.prototype.hasOwnProperty,h=Object.assign,Ce=Symbol.for("react.client.reference"),z=Array.isArray,p=0,ee,re,te,oe,ne,ae,ue;b.__reactDisabledLog=!0;var J,se,L=!1,G=new(typeof WeakMap=="function"?WeakMap:Map),Se=Symbol.for("react.client.reference"),le,ie={},ce={},fe={};O.Fragment=M,O.jsx=function(e,r,t,n,c){return F(e,r,t,!1,n,c)},O.jsxs=function(e,r,t,n,c){return F(e,r,t,!0,n,c)}}()),O}var Ee;function Ne(){return Ee||(Ee=1,process.env.NODE_ENV==="production"?N.exports=Oe():N.exports=Ae()),N.exports}var d=Ne();const ge=y.createContext(null),Pe=a=>d.jsx(ge.Provider,{value:a.router,children:a.children});function me(){const a=y.useContext(ge);if(!a)throw new Error("[useRouter] Router not found. Add RouterProvider in app root");return a}function Re(){return be.useUnit(me())}const Ye=y.forwardRef((a,v)=>{const{to:s,params:b,onClick:l,...i}=a,{mappedRoutes:E}=me(),m=E.find(({route:g})=>g===s),{onOpen:j}=be.useUnit(s);if(!m)throw new Error(`[Link] Route with path "${s.path}" not found. Maybe it is not passed into createRouter?`);return d.jsx("a",{...i,ref:v,href:m.build(b??void 0),onClick:g=>{l==null||l(g),!g.defaultPrevented&&(i.target&&i.target!=="_self"||g.metaKey||g.altKey||g.ctrlKey||g.shiftKey||(g.preventDefault(),j({params:b||{}})))}})}),Me=a=>({route:a.route,view:()=>{const{view:v,layout:s}=a;return s?d.jsx(s,{children:d.jsx(v,{})}):d.jsx(v,{})}}),$e=a=>{const{routes:v,otherwise:s}=a;return()=>{const{activeRoutes:b}=Re(),l=b.reduce((E,m)=>E.filter(j=>j!==m.internal.parent),b),i=v.find(E=>E.route===l.at(-1));return i?y.createElement(i.view):s?d.jsx(s,{}):null}},Ve=a=>{a.route.internal.setAsyncImport(a.view);const v=y.lazy(a.view);return{route:a.route,view:()=>{const{layout:s,fallback:b=()=>d.jsx(d.Fragment,{})}=a;return s?d.jsx(s,{children:d.jsx(y.Suspense,{fallback:d.jsx(b,{}),children:d.jsx(v,{})})}):d.jsx(y.Suspense,{fallback:d.jsx(b,{}),children:d.jsx(v,{})})}}};exports.Link=Ye;exports.RouterProvider=Pe;exports.createLazyRouteView=Ve;exports.createRouteView=Me;exports.createRoutesView=$e;exports.useRouter=Re;
+Check the top-level render call using <`+e+">."),r}var he=y,Y=Symbol.for("react.transitional.element"),Te=Symbol.for("react.portal"),M=Symbol.for("react.fragment"),B=Symbol.for("react.strict_mode"),K=Symbol.for("react.profiler"),I=Symbol.for("react.consumer"),Z=Symbol.for("react.context"),$=Symbol.for("react.forward_ref"),V=Symbol.for("react.suspense"),W=Symbol.for("react.suspense_list"),U=Symbol.for("react.memo"),q=Symbol.for("react.lazy"),ke=Symbol.for("react.offscreen"),Q=Symbol.iterator,pe=Symbol.for("react.client.reference"),_=he.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,D=Object.prototype.hasOwnProperty,h=Object.assign,Ce=Symbol.for("react.client.reference"),z=Array.isArray,p=0,ee,re,te,oe,ne,ae,ue;b.__reactDisabledLog=!0;var J,se,L=!1,G=new(typeof WeakMap=="function"?WeakMap:Map),Se=Symbol.for("react.client.reference"),le,ie={},ce={},fe={};O.Fragment=M,O.jsx=function(e,r,t,n,c){return F(e,r,t,!1,n,c)},O.jsxs=function(e,r,t,n,c){return F(e,r,t,!0,n,c)}}()),O}var Ee;function Ne(){return Ee||(Ee=1,process.env.NODE_ENV==="production"?N.exports=Oe():N.exports=Ae()),N.exports}var d=Ne();const ge=y.createContext(null),Pe=a=>d.jsx(ge.Provider,{value:a.router,children:a.children});function me(){const a=y.useContext(ge);if(!a)throw new Error("[useRouter] Router not found. Add RouterProvider in app root");return a}function Re(){return be.useUnit(me())}const Ye=y.forwardRef((a,v)=>{const{to:s,params:b,onClick:l,...i}=a,{mappedRoutes:E}=me(),m=E.find(({route:g})=>g===s),{onOpen:j}=be.useUnit(s);if(!m)throw new Error(`[Link] Route with path "${s.path}" not found. Maybe it is not passed into createRouter?`);return d.jsx("a",{...i,ref:v,href:m.build(b??void 0),onClick:g=>{l==null||l(g),!g.defaultPrevented&&(i.target&&i.target!=="_self"||g.metaKey||g.altKey||g.ctrlKey||g.shiftKey||(g.preventDefault(),j({params:b||{}})))}})}),Me=a=>({route:a.route,view:()=>{const{view:v,layout:s}=a;return s?d.jsx(s,{children:d.jsx(v,{})}):d.jsx(v,{})}}),$e=a=>{const{routes:v,otherwise:s}=a;return()=>{const{activeRoutes:b}=Re(),l=b.reduce((E,m)=>E.filter(j=>j!==m.parent),b),i=v.find(E=>E.route===l.at(-1));return i?y.createElement(i.view):s?d.jsx(s,{}):null}},Ve=a=>{a.route.internal.setAsyncImport(a.view);const v=y.lazy(a.view);return{route:a.route,view:()=>{const{layout:s,fallback:b=()=>d.jsx(d.Fragment,{})}=a;return s?d.jsx(s,{children:d.jsx(y.Suspense,{fallback:d.jsx(b,{}),children:d.jsx(v,{})})}):d.jsx(y.Suspense,{fallback:d.jsx(b,{}),children:d.jsx(v,{})})}}};exports.Link=Ye;exports.RouterProvider=Pe;exports.createLazyRouteView=Ve;exports.createRouteView=Me;exports.createRoutesView=$e;exports.useRouter=Re;

package/dist/index.d.ts

@@ -19,10 +19,34 @@ declare type BaseLinkProps<Params> = {
 declare interface CreateBaseRouteViewProps {
     route: Route<any>;
     layout?: ComponentType<{
-        children?: ReactNode;
+        children: ReactNode;
     }>;
 }
 
+/**
+ * @description Creates Lazy route view with async bundle load
+ * @link https://movpushmov.dev/argon-router/react/create-lazy-route-view.html
+ * @param props Lazy route view props
+ * @returns RouteView
+ * @example ```ts
+ * // profile.tsx
+ * export default function () {
+ *   return <>...</>;
+ * }
+ *
+ * // index.ts
+ * import { createLazyRouteView } from '@argon-router/react';
+ * import { routes } from '@shared/routing';
+ * import { MainLayout } from '@layouts';
+ *
+ * export const ProfileScreen = createLazyRouteView({
+ *   route: routes.profile,
+ *   view: () => import('./profile'),
+ *   fallback: () => ':(',
+ *   layout: MainLayout,
+ * });
+ * ```
+ */
 export declare const createLazyRouteView: (props: CreateLazyRouteViewProps) => RouteView;
 
 export declare interface CreateLazyRouteViewProps extends CreateBaseRouteViewProps {
@@ -32,6 +56,29 @@ export declare interface CreateLazyRouteViewProps extends CreateBaseRouteViewPro
     fallback?: ComponentType;
 }
 
+/**
+ * @description Create routes view which renders current opened route. `Don't forget add <RouterProvider>`!
+ * @param props Routes view config
+ * @link https://movpushmov.dev/argon-router/react/create-routes-view.html
+ * @returns RoutesView
+ * @example ```tsx
+ * import { createRoutesView } from '@argon-router/react';
+ * import { router } from './router';
+ * // feed screen & profile screen must be created with createRouteView!
+ * import { FeedScreen, ProfileScreen } from './screens';
+ *
+ * const RoutesView = createRoutesView({ routes: [FeedScreen, ProfileScreen] });
+ *
+ * // then you can use it like react component:
+ * function App() {
+ *   return (
+ *     <RouterProvider router={router}>
+ *       <RoutesView />
+ *     </RouterProvider>
+ *   );
+ * }
+ * ```
+ */
 export declare const createRoutesView: (props: CreateRoutesViewProps) => () => JSX.Element | null;
 
 declare interface CreateRoutesViewProps {
@@ -39,6 +86,27 @@ declare interface CreateRoutesViewProps {
     otherwise?: ComponentType;
 }
 
+/**
+ * @description Creates Route view without async bundle load
+ * @link https://movpushmov.dev/argon-router/react/create-route-view.html
+ * @param props Route view props
+ * @returns RouteView
+ * @example ```ts
+ * import { createRouteView } from '@argon-router/react';
+ * import { routes } from '@shared/routing';
+ * import { MainLayout } from '@layouts';
+ *
+ * function Profile() {
+ *   return <>...</>;
+ * }
+ *
+ * export const ProfileScreen = createRouteView({
+ *   route: routes.profile,
+ *   view: Profile,
+ *   layout: MainLayout,
+ * });
+ * ```
+ */
 export declare const createRouteView: (props: CreateRouteViewProps) => RouteView;
 
 export declare interface CreateRouteViewProps extends CreateBaseRouteViewProps {
@@ -49,6 +117,28 @@ declare type ForwardedLink = <Params = void>(props: LinkProps<Params> & {
     ref?: ForwardedRef<HTMLAnchorElement>;
 }) => ReactNode;
 
+/**
+ * @description Navigates user to provided route on click
+ * @link https://movpushmov.dev/argon-router/react/link.html
+ * @example ```tsx
+ * import { Link } from '@argon-router/react';
+ * import { routes } from '@shared/routing';
+ *
+ * function Profile({ user }) {
+ *   return (
+ *     <>
+ *       <Link to={routes.settings}>Settings</Link>
+ *
+ *       {user.posts.map((post) => (
+ *         <Link to={routes.editPost} params={{ id: post.id }}>
+ *           Edit post
+ *         </Link>
+ *       ))}
+ *     </>
+ *   );
+ * }
+ * ```
+ */
 export declare const Link: ForwardedLink;
 
 export declare type LinkProps<Params> = Params extends Record<string, never> | void | undefined ? BaseLinkProps<Params> & {
@@ -57,6 +147,10 @@ export declare type LinkProps<Params> = Params extends Record<string, never> | v
     params: Params;
 };
 
+/**
+ * @description Provides router in React tree
+ * @param props Router provider config
+ */
 export declare const RouterProvider: (props: RouterProviderProps) => JSX.Element;
 
 declare interface RouterProviderProps {
@@ -69,6 +163,11 @@ export declare interface RouteView {
     view: FC;
 }
 
+/**
+ * @description Use router from provider
+ * @returns Router
+ * @link https://movpushmov.dev/argon-router/react/use-router.html
+ */
 export declare function useRouter(): {
     query: Query;
     path: string;

package/dist/index.js

@@ -15,22 +15,22 @@ function Me() {
   if (de) return C;
   de = 1;
   var a = Symbol.for("react.transitional.element"), v = Symbol.for("react.fragment");
-  function l(b, s, i) {
+  function s(b, l, i) {
     var E = null;
-    if (i !== void 0 && (E = "" + i), s.key !== void 0 && (E = "" + s.key), "key" in s) {
+    if (i !== void 0 && (E = "" + i), l.key !== void 0 && (E = "" + l.key), "key" in l) {
       i = {};
-      for (var g in s)
-        g !== "key" && (i[g] = s[g]);
-    } else i = s;
-    return s = i.ref, {
+      for (var g in l)
+        g !== "key" && (i[g] = l[g]);
+    } else i = l;
+    return l = i.ref, {
       $$typeof: a,
       type: b,
       key: E,
-      ref: s !== void 0 ? s : null,
+      ref: l !== void 0 ? l : null,
       props: i
     };
   }
-  return C.Fragment = v, C.jsx = l, C.jsxs = l, C;
+  return C.Fragment = v, C.jsx = s, C.jsxs = s, C;
 }
 var A = {};
 /**
@@ -89,7 +89,7 @@ function $e() {
     function v(e) {
       return "" + e;
     }
-    function l(e) {
+    function s(e) {
       try {
         v(e);
         var r = !1;
@@ -108,7 +108,7 @@ function $e() {
     }
     function b() {
     }
-    function s() {
+    function l() {
       if (p === 0) {
         D = console.log, ee = console.info, re = console.warn, te = console.error, oe = console.group, ne = console.groupCollapsed, ae = console.groupEnd;
         var e = {
@@ -164,7 +164,7 @@ function $e() {
       if (t !== void 0) return t;
       J = !0, t = Error.prepareStackTrace, Error.prepareStackTrace = void 0;
       var n = null;
-      n = j.H, j.H = null, s();
+      n = j.H, j.H = null, l();
       try {
         var c = {
           DetermineComponentFrameRoot: function() {
@@ -299,7 +299,7 @@ function $e() {
     }
     function we(e, r) {
       function t() {
-        le || (le = !0, console.error(
+        se || (se = !0, console.error(
           "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
           r
         ));
@@ -311,7 +311,7 @@ function $e() {
     }
     function Re() {
       var e = a(this.type);
-      return se[e] || (se[e] = !0, console.error(
+      return le[e] || (le[e] = !0, console.error(
         "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
       )), e = this.props.ref, e !== void 0 ? e : null;
     }
@@ -375,7 +375,7 @@ React keys must be passed directly to JSX without using spread:
           o
         ), ie[o + n] = !0);
       }
-      if (o = null, t !== void 0 && (l(t), o = "" + t), xe(r) && (l(r.key), o = "" + r.key), "key" in r) {
+      if (o = null, t !== void 0 && (s(t), o = "" + t), xe(r) && (s(r.key), o = "" + r.key), "key" in r) {
         t = {};
         for (var T in r)
           T !== "key" && (t[T] = r[T]);
@@ -428,7 +428,7 @@ Check the top-level render call using <` + e + ">."), r;
     }
     var _e = Ae, P = Symbol.for("react.transitional.element"), he = Symbol.for("react.portal"), Y = Symbol.for("react.fragment"), X = Symbol.for("react.strict_mode"), B = Symbol.for("react.profiler"), K = Symbol.for("react.consumer"), I = Symbol.for("react.context"), M = Symbol.for("react.forward_ref"), $ = Symbol.for("react.suspense"), W = Symbol.for("react.suspense_list"), U = Symbol.for("react.memo"), V = Symbol.for("react.lazy"), Te = Symbol.for("react.offscreen"), Z = Symbol.iterator, pe = Symbol.for("react.client.reference"), j = _e.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, Q = Object.prototype.hasOwnProperty, _ = Object.assign, ke = Symbol.for("react.client.reference"), z = Array.isArray, p = 0, D, ee, re, te, oe, ne, ae;
     b.__reactDisabledLog = !0;
-    var q, ue, J = !1, G = new (typeof WeakMap == "function" ? WeakMap : Map)(), Ce = Symbol.for("react.client.reference"), le, se = {}, ie = {}, ce = {};
+    var q, ue, J = !1, G = new (typeof WeakMap == "function" ? WeakMap : Map)(), Ce = Symbol.for("react.client.reference"), se, le = {}, ie = {}, ce = {};
     A.Fragment = Y, A.jsx = function(e, r, t, n, c) {
       return L(e, r, t, !1, n, c);
     }, A.jsxs = function(e, r, t, n, c) {
@@ -454,10 +454,10 @@ function Ue() {
   return be(ge());
 }
 const Je = Ne((a, v) => {
-  const { to: l, params: b, onClick: s, ...i } = a, { mappedRoutes: E } = ge(), g = E.find(({ route: m }) => m === l), { onOpen: y } = be(l);
+  const { to: s, params: b, onClick: l, ...i } = a, { mappedRoutes: E } = ge(), g = E.find(({ route: m }) => m === s), { onOpen: y } = be(s);
   if (!g)
     throw new Error(
-      `[Link] Route with path "${l.path}" not found. Maybe it is not passed into createRouter?`
+      `[Link] Route with path "${s.path}" not found. Maybe it is not passed into createRouter?`
     );
   return /* @__PURE__ */ d.jsx(
     "a",
@@ -466,25 +466,23 @@ const Je = Ne((a, v) => {
       ref: v,
       href: g.build(b ?? void 0),
       onClick: (m) => {
-        s == null || s(m), !m.defaultPrevented && (i.target && i.target !== "_self" || m.metaKey || m.altKey || m.ctrlKey || m.shiftKey || (m.preventDefault(), y({ params: b || {} })));
+        l == null || l(m), !m.defaultPrevented && (i.target && i.target !== "_self" || m.metaKey || m.altKey || m.ctrlKey || m.shiftKey || (m.preventDefault(), y({ params: b || {} })));
       }
     }
   );
 }), Ge = (a) => ({
   route: a.route,
   view: () => {
-    const { view: v, layout: l } = a;
-    return l ? /* @__PURE__ */ d.jsx(l, { children: /* @__PURE__ */ d.jsx(v, {}) }) : /* @__PURE__ */ d.jsx(v, {});
+    const { view: v, layout: s } = a;
+    return s ? /* @__PURE__ */ d.jsx(s, { children: /* @__PURE__ */ d.jsx(v, {}) }) : /* @__PURE__ */ d.jsx(v, {});
   }
 }), Le = (a) => {
-  const { routes: v, otherwise: l } = a;
+  const { routes: v, otherwise: s } = a;
   return () => {
-    const { activeRoutes: b } = Ue(), s = b.reduce((E, g) => E.filter(
-      (y) => y !== g.internal.parent
-    ), b), i = v.find(
-      (E) => E.route === s.at(-1)
+    const { activeRoutes: b } = Ue(), l = b.reduce((E, g) => E.filter((y) => y !== g.parent), b), i = v.find(
+      (E) => E.route === l.at(-1)
     );
-    return i ? Pe(i.view) : l ? /* @__PURE__ */ d.jsx(l, {}) : null;
+    return i ? Pe(i.view) : s ? /* @__PURE__ */ d.jsx(s, {}) : null;
   };
 }, Fe = (a) => {
   a.route.internal.setAsyncImport(a.view);
@@ -492,8 +490,8 @@ const Je = Ne((a, v) => {
   return {
     route: a.route,
     view: () => {
-      const { layout: l, fallback: b = () => /* @__PURE__ */ d.jsx(d.Fragment, {}) } = a;
-      return l ? /* @__PURE__ */ d.jsx(l, { children: /* @__PURE__ */ d.jsx(fe, { fallback: /* @__PURE__ */ d.jsx(b, {}), children: /* @__PURE__ */ d.jsx(v, {}) }) }) : /* @__PURE__ */ d.jsx(fe, { fallback: /* @__PURE__ */ d.jsx(b, {}), children: /* @__PURE__ */ d.jsx(v, {}) });
+      const { layout: s, fallback: b = () => /* @__PURE__ */ d.jsx(d.Fragment, {}) } = a;
+      return s ? /* @__PURE__ */ d.jsx(s, { children: /* @__PURE__ */ d.jsx(fe, { fallback: /* @__PURE__ */ d.jsx(b, {}), children: /* @__PURE__ */ d.jsx(v, {}) }) }) : /* @__PURE__ */ d.jsx(fe, { fallback: /* @__PURE__ */ d.jsx(b, {}), children: /* @__PURE__ */ d.jsx(v, {}) });
     }
   };
 };

package/package.json

@@ -5,7 +5,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "private": false,
-  "version": "0.6.0",
+  "version": "0.6.2",
   "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.6.0"
+    "@argon-router/core": "^0.6.1"
   },
   "devDependencies": {
     "@babel/preset-react": "^7.26.3",
@@ -59,5 +59,5 @@
     "effector-react": ">=23",
     "react": "18 || 19"
   },
-  "gitHead": "02a833234ffa6ca8a6d4704634f73d2451e573d0"
+  "gitHead": "8e6614b1ef46d6a67cdad7d2843e102dca189976"
 }