crossroad 2.0.0 → 2.0.1

package/index.min.js

@@ -1 +1 @@
-import e,{createContext as t,useState as r,useCallback as n,useEffect as o,useContext as a}from"react";var i=t();const s=e=>{if("string"!=typeof e)return e;const t={},r=new URL(e,"http://localhost:3000/");t.path=(r.pathname.replace(/\/$/,"")||"/").replaceAll("%3C","<").replaceAll("%3E",">"),t.query={};for(const[e]of r.searchParams)t.query[e]=(n=r.searchParams.getAll(e)).length>1?n:n[0];var n;return r.hash&&(t.hash=r.hash.replace(/^#/,"")),t},l=e=>{if("string"==typeof e)return e;const{path:t,query:r={},hash:n}=e||{};let o=t||"/";const a=new URLSearchParams(Object.entries(r).map(([e,t])=>(Array.isArray(t)?t:[t]).map(t=>[e,t])).flat().filter(([e,t])=>t)).toString();return a&&(o+="?"+a),n&&(o+="#"+n),o};var p=()=>"undefined"==typeof window;function u(e,t,r={}){if(e=JSON.parse(JSON.stringify(s(e))),(t=JSON.parse(JSON.stringify(s(t)))).path=t.path.replace(/\/$/,"")||"/",e.path=e.path.replace(/\/$/,"")||"/",e.path.endsWith("*")){e.path=e.path.replace(/\/?\*/,"")||"/";const r=e.path.split("/").filter(Boolean).length;t.path="/"+t.path.slice(1).split("/").slice(0,r).join("/")}if(Object.entries(e.query).length)for(let r in e.query){if(!(r in t.query))return!1;if(e.query[r]&&e.query[r]!==t.query[r])return!1}if(!e.path.includes(":"))return e.path===t.path&&r;if(e.path.split("/").length!==t.path.split("/").length)return!1;const n={},o=e.path.split("/").every((e,o)=>{const a=t.path.split("/")[o];if(e.startsWith(":")){let t=e.slice(1),o="string";t.includes("<")&&([t,o]=t.split("<"),o=o.slice(0,-1));const i=decodeURIComponent(a);return n[t]="number"===o?Number(i):"date"===o?new Date(/^\d+$/.test(i)?Number(i):i):"boolean"===o?"true"===i:i,r}return a===e});return o&&Object.assign(r,n),o&&r}var c=()=>{const e=a(i);if(!e)throw new Error("Wrap your App with <Router>");return e},h=({path:t="*",scrollUp:r,component:n,render:o,children:a})=>{const s=c(),l=u(t,s[0]);if(!l)return null;if(r&&window.scrollTo(0,0),n){const t=n;a=e.createElement(t,l)}else if(o)a=o(l);else if(!a)throw new Error("Route needs prop `component`, `render` or `children`");return e.createElement(i.Provider,{value:[{...s[0],params:l},...s.slice(1)]},a)};var f=({redirect:e,children:t})=>{const[r,n]=c(),a=(e=>(Array.isArray(e)||(e=[e]),e.filter(e=>e&&e.props)))(t).find(e=>u(e.props.path||"*",r))||null;return o(()=>{e&&(a||("function"==typeof e&&(e=e(r)),n(l(e))))},[e,a]),a},y=()=>{const[e,t]=c(),r=n((e,r)=>{t(t=>("function"==typeof e&&(e=e(t.path)),"string"!=typeof e&&(e="/"),{...t,path:e}),r)},[]);return[e.path,r]};const d=e=>l({query:e});var w=e=>e?(e=>{const[t,r]=c(),o=n((t,n)=>{r(r=>{const n=r.query[e];if((t="function"==typeof t?t(n):t)===n)return r;if(t)return{...r,query:{...r.query,[e]:t}};{const{[e]:t,...n}=r.query;return{...r,query:n}}},n)},[]);return[t.query[e],o]})(e):(()=>{const[e,t]=c(),r=n((e,r)=>{t(t=>("string"==typeof(e="function"==typeof e?e(t.query):e)&&(e=s("/?"+e.replace(/^\?/,"")).query),e=s(d(e)).query,d(e)===d(t.query)?t:{...t,query:e}),r)},[]);return[e.query,r]})(),m=()=>{const[e,t]=c(),r=n((e,r)=>{t(t=>("function"==typeof e&&(e=e(t.hash)),"string"!=typeof e&&(e=""),e=e.replace(/^#/,""),{...t,hash:e}),r)},[]);return[e.hash,r]},q=e=>{const[{params:t}]=a(i);return e?e in t?t[e]:"":t||{}};export default({scrollUp:t,url:a,children:u})=>{const c=a||(p()?"/":window.location.href),[h,f]=r(()=>s(c)),y=n((e,{mode:r="push"}={})=>{if(!history[r+"State"])throw new Error(`Invalid mode "${r}"`);f(n=>(e="function"==typeof e?e(n):e,l(n)===l(e)?n:(history[r+"State"]({},null,l(e)),t&&window.scrollTo(0,0),s(e))))},[]);return o(()=>{if(p())return;const e=()=>f(s(window.location.href)),t=e=>{const t=(e=>{if(!e)return null;const t=e.getAttribute("href");return t?/^https?:\/\//.test(t)||null!==e.getAttribute("target")?null:t:null})(e.target.closest("a"));if(!t)return!1;e.preventDefault();const[r,n]=t.split("#");r&&y(r),n&&(window.location.hash="#"+n)};return window.addEventListener("popstate",e),document.addEventListener("click",t),()=>{window.removeEventListener("popstate",e),document.removeEventListener("click",t)}},[y]),e.createElement(i.Provider,{value:[h,y]},u)};export{i as Context,h as Route,f as Switch,m as useHash,q as useParams,y as usePath,w as useQuery,c as useUrl};
+import e,{createContext as t,useState as r,useCallback as n,useEffect as o,useContext as a}from"react";var i=t();const s=e=>{if("string"!=typeof e)return e;const t={},r=new URL(e,"http://localhost:3000/");t.path=(r.pathname.replace(/\/$/,"")||"/").replaceAll("%3C","<").replaceAll("%3E",">"),t.query={};for(const[e]of r.searchParams)t.query[e]=(n=r.searchParams.getAll(e)).length>1?n:n[0];var n;return r.hash&&(t.hash=r.hash.replace(/^#/,"")),t},l=e=>{if("string"==typeof e)return e;const{path:t,query:r={},hash:n}=e||{};let o=t||"/";const a=new URLSearchParams(Object.entries(r).map(([e,t])=>(Array.isArray(t)?t:[t]).map(t=>[e,t])).flat().filter(([e,t])=>t)).toString();return a&&(o+="?"+a),n&&(o+="#"+n),o};var u=()=>"undefined"==typeof window;function p(e,t,r={}){if(e=JSON.parse(JSON.stringify(s(e))),(t=JSON.parse(JSON.stringify(s(t)))).path=t.path.replace(/\/$/,"")||"/",e.path=e.path.replace(/\/$/,"")||"/",e.path.endsWith("*")){e.path=e.path.replace(/\/?\*/,"")||"/";const r=e.path.split("/").filter(Boolean).length;t.path="/"+t.path.slice(1).split("/").slice(0,r).join("/")}if(Object.entries(e.query).length)for(let r in e.query){if(!(r in t.query))return!1;if(e.query[r]&&e.query[r]!==t.query[r])return!1}if(!e.path.includes(":"))return e.path===t.path&&r;if(e.path.split("/").length!==t.path.split("/").length)return!1;const n={},o=e.path.split("/").every((e,o)=>{const a=t.path.split("/")[o];if(e.startsWith(":")){let t=e.slice(1),o="string";t.includes("<")&&([t,o]=t.split("<"),o=o.slice(0,-1));const i=decodeURIComponent(a);return n[t]="number"===o?Number(i):"date"===o?new Date(/^\d+$/.test(i)?Number(i):i):"boolean"===o?"true"===i:i,r}return a===e});return o&&Object.assign(r,n),o&&r}var c=()=>{const e=a(i);if(!e)throw new Error("Wrap your App with <Router>");return e},h=({path:t="*",scrollUp:r,component:n,render:o,children:a})=>{const s=c(),l=p(t,s[0]);if(!l)return null;if(r&&window.scrollTo(0,0),n){const t=n;a=e.createElement(t,l)}else if(o)a=o(l);else if(!a)throw new Error("Route needs prop `component`, `render` or `children`");return e.createElement(i.Provider,{value:[{...s[0],params:l},...s.slice(1)]},a)};var f=({redirect:e,children:t})=>{const[r,n]=c(),a=(e=>(Array.isArray(e)||(e=[e]),e.filter(e=>e&&e.props)))(t).find(e=>p(e.props.path||"*",r))||null;return o(()=>{e&&(a||("function"==typeof e&&(e=e(r)),n(l(e))))},[e,a]),a},y=()=>{const[e,t]=c(),r=n((e,r)=>{t(t=>("function"==typeof e&&(e=e(t.path)),"string"!=typeof e&&(e="/"),{...t,path:e}),r)},[]);return[e.path,r]};const d=e=>l({query:e});var m=e=>e?(e=>{const[t,r]=c(),o=n((t,n)=>{r(r=>{const n=r.query[e];if((t="function"==typeof t?t(n):t)===n)return r;if(t)return{...r,query:{...r.query,[e]:t}};{const{[e]:t,...n}=r.query;return{...r,query:n}}},n)},[]);return[t.query[e],o]})(e):(()=>{const[e,t]=c(),r=n((e,r)=>{t(t=>("string"==typeof(e="function"==typeof e?e(t.query):e)&&(e=s("/?"+e.replace(/^\?/,"")).query),e=s(d(e)).query,d(e)===d(t.query)?t:{...t,query:e}),r)},[]);return[e.query,r]})(),w=()=>{const[e,t]=c(),r=n((e,r)=>{t(t=>("function"==typeof e&&(e=e(t.hash)),"string"!=typeof e&&(e=""),e=e.replace(/^#/,""),{...t,hash:e}),r)},[]);return[e.hash,r]},q=e=>{const[{params:t}]=a(i);return e?e in t?t[e]:"":t||{}};export default({scrollUp:t,url:a,children:p})=>{const c=a||(u()?"/":window.location.href),[h,f]=r(()=>s(c)),y=n((e,{mode:r="push"}={})=>{if(!history[r+"State"])throw new Error(`Invalid mode "${r}"`);f(n=>(e="function"==typeof e?e(n):e,l(n)===l(e)?n:(history[r+"State"]({},null,l(e)),t&&window.scrollTo(0,0),s(e))))},[]);return o(()=>{if(u())return;const e=()=>f(s(window.location.href)),t=e=>{const t=(e=>{if(!e)return null;const t=e.getAttribute("href");if(!t)return null;const r=t.trim();return/^[a-zA-Z][a-zA-Z0-9+\-.]*:/.test(r)||null!==e.getAttribute("target")?null:r})(e.target.closest("a"));if(!t)return!1;e.preventDefault();const[r,n]=t.split("#");r&&y(r),n&&(window.location.hash="#"+n)};return window.addEventListener("popstate",e),document.addEventListener("click",t),()=>{window.removeEventListener("popstate",e),document.removeEventListener("click",t)}},[y]),e.createElement(i.Provider,{value:[h,y]},p)};export{i as Context,h as Route,f as Switch,w as useHash,q as useParams,y as usePath,m as useQuery,c as useUrl};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "crossroad",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "A React library to handle navigation easily in your WebApp",
   "homepage": "https://crossroad.page/",
   "repository": "https://github.com/franciscop/crossroad.git",

package/readme.md

@@ -317,6 +317,7 @@ An important concept to understand is where links open, whether it's a react nav
 - `/`: plain paths will navigate within React
 - `/?abc=def`: queries, hashtags, etc. will also perform a navigation in React
 - `https://example.com/`: full URLs will trigger a browser page change
+- `tel:+1234567890`, `mailto:test@example.com`: non-HTTP protocol links will trigger a browser action (call, email, etc.)
 - `target="_self"`: will trigger a browser page change, in the same tab
 - `target="_blank"`: will open a new tab