intentx-react-router 0.1.1 → 0.1.2

package/README.md

@@ -39,14 +39,22 @@ navigateIntent("edit-user", 42)
 # Installation
 
 ```bash
-npm install intentx-react-router eventbus-z react-router
+npm install intentx-react-router eventbus-z react-router@^7 react-router-dom@^7
 ```
 
+## Recommended Versions
+
+- react: >=18
+- react-dom: >=18
+- react-router: >=7
+- react-router-dom: >=7
+- eventbus-z: ^2.4.0
+
 ---
 
 # Basic Setup
 
-## Define intents
+## 1. Define intents
 
 ``` ts
 import { createIntentRouter } from "intentx-react-router"
@@ -54,31 +62,124 @@ import { createIntentRouter } from "intentx-react-router"
 createIntentRouter({
   "view-user": "/users/:userId/name/:page",
   "edit-user": "/users/:userId/edit",
-  "open-cart": "/cart",
   "checkout": "/checkout"
 })
 ```
 
 ---
 
-## Bind React Router navigate
+## 2. Bind React Router navigate
 
 ``` ts
+import React from "react"
+import { useNavigate } from "react-router-dom"
 import { bindNavigate } from "intentx-react-router"
 
-import { useNavigate } from "react-router"
-
-function RouterBinder() {
+export function RouterBinder() {
   const navigate = useNavigate()
-
   bindNavigate(navigate)
-
   return null
 }
 ```
 
 ---
 
+## 3. IntentLink
+
+```ts
+import React from "react"
+import { Link } from "react-router-dom"
+import { generatePathFromIntent } from "intentx-react-router"
+
+export function IntentLink({ intent, params, query, children }) {
+  let path = generatePathFromIntent(intent, params)
+  if (query) {
+    const qs = new URLSearchParams(query).toString()
+    if (qs) path += "?" + qs
+  }
+  return <Link to={path}>{children}</Link>
+}
+```
+
+--- 
+
+## 4. IntentRoute
+
+---
+
+```ts
+import React from "react"
+import { Route } from "react-router-dom"
+import { generatePathFromIntent } from "intentx-react-router"
+
+export function IntentRoute({ intent, component: Component }) {
+  const path = generatePathFromIntent(intent)
+  return <Route path={path} render={(props) => <Component {...props} />} />
+}
+```
+
+---
+
+## 5. Use in App
+
+```ts
+import React from "react"
+import { BrowserRouter, Switch } from "react-router-dom"
+import { RouterBinder, IntentLink, IntentRoute } from "./router"
+
+import { UserPage } from "./pages/UserPage"
+import { EditUserPage } from "./pages/EditUserPage"
+import { CheckoutPage } from "./pages/CheckoutPage"
+
+export default function App() {
+  return (
+    <BrowserRouter>
+      <RouterBinder />
+
+      <nav style={{ marginBottom: 20 }}>
+        <IntentLink intent="view-user" params={[1, 2]}>View User</IntentLink>{" "}
+        | <IntentLink intent="edit-user" params={1}>Edit User</IntentLink>{" "}
+        | <IntentLink intent="checkout">Checkout</IntentLink>
+      </nav>
+
+      <Switch>
+        <IntentRoute intent="view-user" component={UserPage} />
+        <IntentRoute intent="edit-user" component={EditUserPage} />
+        <IntentRoute intent="checkout" component={CheckoutPage} />
+      </Switch>
+    </BrowserRouter>
+  )
+}
+```
+
+---
+
+## 6. useIntent Hook
+
+```ts
+import { useLocation } from "react-router-dom"
+import { resolveIntentFromUrl } from "intentx-react-router"
+
+export function useIntent() {
+  const location = useLocation()
+  const resolved = resolveIntentFromUrl(location.pathname)
+
+  const searchParams = new URLSearchParams(location.search)
+  const query = {}
+  searchParams.forEach((value, key) => {
+    query[key] = value
+  })
+
+  return {
+    intent: resolved?.intent ?? null,
+    params: resolved?.params ?? {},
+    query
+  }
+}
+```
+
+---
+
 # Navigation
 
 ## Object params

package/build/core/index.d.ts

@@ -1,2 +1 @@
 export * from "./intentCore";
-export * from "./IntentRoute";

package/build/index.esm.js

@@ -1 +1 @@
-import{createEventBus as n}from"eventbus-z";import{jsx as t}from"react/jsx-runtime";import{useLocation as r,Link as o,useNavigate as e}from"react-router";import{useEffect as i}from"react";const c=n(),u="INTENT_NAVIGATE";let s={},f=null,a=!1;const l=[],p={},m={};function h(n){s=n}function v(n){f=n,a||(c.$onMultiple(u,E),a=!0)}function d(n,t){c.$emit(u,{intent:n,params:t})}function g(n){l.push(n)}function y(n,t){p[n]||(p[n]=[]),p[n].push(t)}function A(n,t){m[n]||(m[n]=[]),m[n].push(t)}function w(n){z(n)}function E(n){const t=s[n.intent];if(!t)return void console.warn("Unknown intent:",n.intent);const r=$(t,n.params);for(const t of l){const o=t(n.intent,r);if(!1===o)return;if("string"==typeof o)return void(null==f||f(o))}const o=p[n.intent]||[];for(const t of o){const o=t(n.intent,r);if(!1===o)return;if("string"==typeof o)return void(null==f||f(o))}z(n.intent);const e=_(t,r);null==f||f(e)}function z(n){const t=m[n];if(t)for(const n of t)try{const t=n();t instanceof Promise&&t.catch(()=>{})}catch{}}function $(n,t){const r=function(n){const t=[];return n.replace(/:([A-Za-z0-9_]+)/g,(n,r)=>(t.push(r),"")),t}(n);if(!t)return{};if(Array.isArray(t)){const n={};return r.forEach((r,o)=>{void 0===t[o]&&console.warn(`Missing param "${r}"`),n[r]=t[o]}),n}return"object"==typeof t?t:1===r.length?{[r[0]]:t}:{}}function _(n,t){return n.replace(/:([A-Za-z0-9_]+)/g,(n,r)=>{var o;return null!==(o=t[r])&&void 0!==o?o:""})}function x(n,t){const r=s[n];if(!r)return"";return _(r,$(r,t))}function N(n){for(const t in s){const r=s[t],o=[],e=new RegExp("^"+r.replace(/:([A-Za-z0-9_]+)/g,(n,t)=>(o.push(t),"([^/]+)"))+"$"),i=n.match(e);if(!i)continue;const c={};return o.forEach((n,t)=>{c[n]=i[t+1]}),{intent:t,params:c}}return null}function P(){var n,t;const o=r(),e=N(o.pathname),i=new URLSearchParams(o.search),c={};return i.forEach((n,t)=>{c[t]=n}),{intent:null!==(n=null==e?void 0:e.intent)&&void 0!==n?n:null,params:null!==(t=null==e?void 0:e.params)&&void 0!==t?t:{},query:c}}function R({intent:n,component:r}){const o=P();return o.intent!==n?null:t(r,{...o})}function S({intent:n,params:r,query:e,children:i}){let c=x(n,r);if(e){const n=new URLSearchParams(e).toString();n&&(c+="?"+n)}return t(o,{to:c,children:i})}function T(){const n=e();return i(()=>{v(n)},[n]),d}export{S as IntentLink,R as IntentRoute,g as addIntentGuard,y as addIntentGuardFor,A as addIntentPreload,v as bindNavigate,h as createIntentRouter,x as generatePathFromIntent,d as navigateIntent,w as preloadIntent,N as resolveIntentFromUrl,P as useIntent,T as useNavigateIntent};
+import{createEventBus as n}from"eventbus-z";import{jsx as t}from"react/jsx-runtime";import{Link as r,useLocation as o,useNavigate as e}from"react-router-dom";import{useEffect as i}from"react";const c=n(),u="INTENT_NAVIGATE";let s={},f=null,a=!1;const l=[],p={},m={};function h(n){s=n}function d(n){f=n,a||(c.$onMultiple(u,E),a=!0)}function v(n,t){c.$emit(u,{intent:n,params:t})}function g(n){l.push(n)}function y(n,t){p[n]||(p[n]=[]),p[n].push(t)}function A(n,t){m[n]||(m[n]=[]),m[n].push(t)}function w(n){z(n)}function E(n){const t=s[n.intent];if(!t)return void console.warn("Unknown intent:",n.intent);const r=$(t,n.params);for(const t of l){const o=t(n.intent,r);if(!1===o)return;if("string"==typeof o)return void(null==f||f(o))}const o=p[n.intent]||[];for(const t of o){const o=t(n.intent,r);if(!1===o)return;if("string"==typeof o)return void(null==f||f(o))}z(n.intent);const e=_(t,r);null==f||f(e)}function z(n){const t=m[n];if(t)for(const n of t)try{const t=n();t instanceof Promise&&t.catch(()=>{})}catch{}}function $(n,t){const r=function(n){const t=[];return n.replace(/:([A-Za-z0-9_]+)/g,(n,r)=>(t.push(r),"")),t}(n);if(!t)return{};if(Array.isArray(t)){const n={};return r.forEach((r,o)=>{void 0===t[o]&&console.warn(`Missing param "${r}"`),n[r]=t[o]}),n}return"object"==typeof t?t:1===r.length?{[r[0]]:t}:{}}function _(n,t){return n.replace(/:([A-Za-z0-9_]+)/g,(n,r)=>{var o;return null!==(o=t[r])&&void 0!==o?o:""})}function x(n,t){const r=s[n];if(!r)return"";return _(r,$(r,t))}function N(n){for(const t in s){const r=s[t],o=[],e=new RegExp("^"+r.replace(/:([A-Za-z0-9_]+)/g,(n,t)=>(o.push(t),"([^/]+)"))+"$"),i=n.match(e);if(!i)continue;const c={};return o.forEach((n,t)=>{c[n]=i[t+1]}),{intent:t,params:c}}return null}function P({intent:n,params:o,query:e,children:i}){let c=x(n,o);if(e){const n=new URLSearchParams(e).toString();n&&(c+="?"+n)}return t(r,{to:c,children:i})}function R(){var n,t;const r=o(),e=N(r.pathname),i=new URLSearchParams(r.search),c={};return i.forEach((n,t)=>{c[t]=n}),{intent:null!==(n=null==e?void 0:e.intent)&&void 0!==n?n:null,params:null!==(t=null==e?void 0:e.params)&&void 0!==t?t:{},query:c}}function S({intent:n,component:r}){const o=R();return o.intent!==n?null:t(r,{...o})}function T(n){const t=e();return d(n||t),null}function U(){const n=e();return i(()=>{d(n)},[n]),v}export{P as IntentLink,S as IntentRoute,T as RouterBinder,g as addIntentGuard,y as addIntentGuardFor,A as addIntentPreload,d as bindNavigate,h as createIntentRouter,x as generatePathFromIntent,v as navigateIntent,w as preloadIntent,N as resolveIntentFromUrl,R as useIntent,U as useNavigateIntent};

package/build/index.js

@@ -1 +1 @@
-"use strict";var n=require("eventbus-z"),t=require("react/jsx-runtime"),e=require("react-router"),r=require("react");const o=n.createEventBus(),i="INTENT_NAVIGATE";let u={},s=null,c=!1;const a=[],f={},l={};function p(n){s=n,c||(o.$onMultiple(i,h),c=!0)}function d(n,t){o.$emit(i,{intent:n,params:t})}function h(n){const t=u[n.intent];if(!t)return void console.warn("Unknown intent:",n.intent);const e=m(t,n.params);for(const t of a){const r=t(n.intent,e);if(!1===r)return;if("string"==typeof r)return void(null==s||s(r))}const r=f[n.intent]||[];for(const t of r){const r=t(n.intent,e);if(!1===r)return;if("string"==typeof r)return void(null==s||s(r))}v(n.intent);const o=x(t,e);null==s||s(o)}function v(n){const t=l[n];if(t)for(const n of t)try{const t=n();t instanceof Promise&&t.catch(()=>{})}catch{}}function m(n,t){const e=function(n){const t=[];return n.replace(/:([A-Za-z0-9_]+)/g,(n,e)=>(t.push(e),"")),t}(n);if(!t)return{};if(Array.isArray(t)){const n={};return e.forEach((e,r)=>{void 0===t[r]&&console.warn(`Missing param "${e}"`),n[e]=t[r]}),n}return"object"==typeof t?t:1===e.length?{[e[0]]:t}:{}}function x(n,t){return n.replace(/:([A-Za-z0-9_]+)/g,(n,e)=>{var r;return null!==(r=t[e])&&void 0!==r?r:""})}function g(n,t){const e=u[n];if(!e)return"";return x(e,m(e,t))}function I(n){for(const t in u){const e=u[t],r=[],o=new RegExp("^"+e.replace(/:([A-Za-z0-9_]+)/g,(n,t)=>(r.push(t),"([^/]+)"))+"$"),i=n.match(o);if(!i)continue;const s={};return r.forEach((n,t)=>{s[n]=i[t+1]}),{intent:t,params:s}}return null}function y(){var n,t;const r=e.useLocation(),o=I(r.pathname),i=new URLSearchParams(r.search),u={};return i.forEach((n,t)=>{u[t]=n}),{intent:null!==(n=null==o?void 0:o.intent)&&void 0!==n?n:null,params:null!==(t=null==o?void 0:o.params)&&void 0!==t?t:{},query:u}}exports.IntentLink=function({intent:n,params:r,query:o,children:i}){let u=g(n,r);if(o){const n=new URLSearchParams(o).toString();n&&(u+="?"+n)}return t.jsx(e.Link,{to:u,children:i})},exports.IntentRoute=function({intent:n,component:e}){const r=y();return r.intent!==n?null:t.jsx(e,{...r})},exports.addIntentGuard=function(n){a.push(n)},exports.addIntentGuardFor=function(n,t){f[n]||(f[n]=[]),f[n].push(t)},exports.addIntentPreload=function(n,t){l[n]||(l[n]=[]),l[n].push(t)},exports.bindNavigate=p,exports.createIntentRouter=function(n){u=n},exports.generatePathFromIntent=g,exports.navigateIntent=d,exports.preloadIntent=function(n){v(n)},exports.resolveIntentFromUrl=I,exports.useIntent=y,exports.useNavigateIntent=function(){const n=e.useNavigate();return r.useEffect(()=>{p(n)},[n]),d};
+"use strict";var n=require("eventbus-z"),t=require("react/jsx-runtime"),e=require("react-router-dom"),r=require("react");const o=n.createEventBus(),i="INTENT_NAVIGATE";let u={},s=null,c=!1;const a=[],f={},l={};function p(n){s=n,c||(o.$onMultiple(i,v),c=!0)}function d(n,t){o.$emit(i,{intent:n,params:t})}function v(n){const t=u[n.intent];if(!t)return void console.warn("Unknown intent:",n.intent);const e=m(t,n.params);for(const t of a){const r=t(n.intent,e);if(!1===r)return;if("string"==typeof r)return void(null==s||s(r))}const r=f[n.intent]||[];for(const t of r){const r=t(n.intent,e);if(!1===r)return;if("string"==typeof r)return void(null==s||s(r))}h(n.intent);const o=x(t,e);null==s||s(o)}function h(n){const t=l[n];if(t)for(const n of t)try{const t=n();t instanceof Promise&&t.catch(()=>{})}catch{}}function m(n,t){const e=function(n){const t=[];return n.replace(/:([A-Za-z0-9_]+)/g,(n,e)=>(t.push(e),"")),t}(n);if(!t)return{};if(Array.isArray(t)){const n={};return e.forEach((e,r)=>{void 0===t[r]&&console.warn(`Missing param "${e}"`),n[e]=t[r]}),n}return"object"==typeof t?t:1===e.length?{[e[0]]:t}:{}}function x(n,t){return n.replace(/:([A-Za-z0-9_]+)/g,(n,e)=>{var r;return null!==(r=t[e])&&void 0!==r?r:""})}function g(n,t){const e=u[n];if(!e)return"";return x(e,m(e,t))}function I(n){for(const t in u){const e=u[t],r=[],o=new RegExp("^"+e.replace(/:([A-Za-z0-9_]+)/g,(n,t)=>(r.push(t),"([^/]+)"))+"$"),i=n.match(o);if(!i)continue;const s={};return r.forEach((n,t)=>{s[n]=i[t+1]}),{intent:t,params:s}}return null}function y(){var n,t;const r=e.useLocation(),o=I(r.pathname),i=new URLSearchParams(r.search),u={};return i.forEach((n,t)=>{u[t]=n}),{intent:null!==(n=null==o?void 0:o.intent)&&void 0!==n?n:null,params:null!==(t=null==o?void 0:o.params)&&void 0!==t?t:{},query:u}}exports.IntentLink=function({intent:n,params:r,query:o,children:i}){let u=g(n,r);if(o){const n=new URLSearchParams(o).toString();n&&(u+="?"+n)}return t.jsx(e.Link,{to:u,children:i})},exports.IntentRoute=function({intent:n,component:e}){const r=y();return r.intent!==n?null:t.jsx(e,{...r})},exports.RouterBinder=function(n){const t=e.useNavigate();return p(n||t),null},exports.addIntentGuard=function(n){a.push(n)},exports.addIntentGuardFor=function(n,t){f[n]||(f[n]=[]),f[n].push(t)},exports.addIntentPreload=function(n,t){l[n]||(l[n]=[]),l[n].push(t)},exports.bindNavigate=p,exports.createIntentRouter=function(n){u=n},exports.generatePathFromIntent=g,exports.navigateIntent=d,exports.preloadIntent=function(n){h(n)},exports.resolveIntentFromUrl=I,exports.useIntent=y,exports.useNavigateIntent=function(){const n=e.useNavigate();return r.useEffect(()=>{p(n)},[n]),d};

package/build/router/RouterBinder.d.ts

@@ -0,0 +1 @@
+export declare function RouterBinder(navigate?: any): null;

package/build/router/index.d.ts

@@ -1,3 +1,5 @@
 export * from "./IntentLink";
+export * from "./IntentRoute";
+export * from "./RouterBinder";
 export * from "./useIntent";
 export * from "./useNavigateIntent";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intentx-react-router",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Intent-based routing for React. Navigate by intent instead of URLs.",
   "author": "Delpi.Kye",
   "license": "MIT",
@@ -55,7 +55,9 @@
 
   "peerDependencies": {
     "react": ">=18",
-    "react-router": ">=6"
+    "react-dom": ">=18",
+    "react-router": "^7.0.0",
+    "react-router-dom": "^7.0.0"
   },
   "dependencies": {
     "eventbus-z": "^2.4.0"
@@ -68,6 +70,8 @@
     "@types/react-dom": "^18.0.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
+    "react-router": "^7.13.1",
+    "react-router-dom": "^7.13.1",
     "rimraf": "^5.0.5",
     "rollup": "^3.29.4",
     "rollup-plugin-peer-deps-external": "^2.2.4",