crossroad 3.0.2 → 3.0.4

package/index.d.ts

@@ -1,102 +1,95 @@
-import React from "react";
+import * as React from 'react';
+import React__default, { ReactNode, ReactElement } from 'react';
 
-// Helper type to parse parameter types from path string
-type ParseParamType<T extends string> = T extends `${infer Name}<${infer Type}>`
-  ? Type extends "number"
-    ? { [K in Name]: number }
-    : Type extends "string"
-      ? { [K in Name]: string }
-      : Type extends "date"
-        ? { [K in Name]: Date }
-        : Type extends "boolean"
-          ? { [K in Name]: boolean }
-          : { [K in Name]: string } // default to string
-  : T extends `${infer Name}`
-    ? { [K in Name]: string }
-    : never;
-
-// Extracts all params from path and combines them
-type ExtractParams<T extends string> =
-  T extends `${infer Prefix}/:${infer Param}/${infer Rest}`
-    ? ParseParamType<Param> & ExtractParams<`/${Rest}`>
-    : T extends `${infer Prefix}/:${infer Param}`
-      ? ParseParamType<Param>
-      : {};
-
-// Main Route component with type inference
-interface RouteProps<
-  T extends Record<string, string | number | boolean | Date> = {},
-> extends Omit<
-    {
-      path?: string;
-      scrollUp?: boolean;
-      component?: React.FunctionComponent<T>;
-      render?: (params: T) => React.ReactNode;
-      children?: React.ReactNode;
-    },
-    "component" | "render"
-  > {
-  path?: string;
+interface RouterProps {
+    scrollUp?: boolean;
+    url?: string;
+    children?: React__default.ReactNode;
 }
+declare const _default$6: ({ scrollUp, url: baseUrl, children }: RouterProps) => React__default.JSX.Element;
 
-// Infer params from path string literal
-type InferParamsFromPath<T extends string> = T extends `${string}/:${string}`
-  ? ExtractParams<T>
-  : {};
-
-// Modified Route declaration with path-based inference
-declare const Route: <P extends string = string>(
-  props: RouteProps<InferParamsFromPath<P>> & { path?: P } & (
-      | {
-          component: React.FunctionComponent<InferParamsFromPath<P>>;
-          render?: never;
-        }
-      | {
-          render: (params: InferParamsFromPath<P>) => React.ReactNode;
-          component?: never;
-        }
-      | {}
-    ),
-) => React.ReactNode;
+type ParseParamType<T extends string> = T extends `${infer Name}<${infer Type}>` ? Type extends "number" ? {
+    [K in Name]: number;
+} : Type extends "string" ? {
+    [K in Name]: string;
+} : Type extends "date" ? {
+    [K in Name]: Date;
+} : Type extends "boolean" ? {
+    [K in Name]: boolean;
+} : {
+    [K in Name]: string;
+} : {
+    [K in T]: string;
+};
+type ExtractParams<T extends string> = T extends `${infer _Prefix}/:${infer Param}/${infer Rest}` ? ParseParamType<Param> & ExtractParams<`/${Rest}`> : T extends `${infer _Prefix}/:${infer Param}` ? ParseParamType<Param> : {};
+type InferParamsFromPath<T extends string> = T extends `${string}/:${string}` ? ExtractParams<T> : {};
+interface RoutePropsBase {
+    path?: string;
+    scrollUp?: boolean;
+    children?: React__default.ReactNode;
+}
+type RouteProps<T extends Record<string, string | number | boolean | Date> = {}> = RoutePropsBase & ({
+    component: React__default.FunctionComponent<T>;
+    render?: never;
+} | {
+    render: (params: T) => React__default.ReactNode;
+    component?: never;
+} | {
+    component?: never;
+    render?: never;
+});
+type RouteType = <P extends string = string>(props: RouteProps<InferParamsFromPath<P>> & {
+    path?: P;
+}) => React__default.ReactNode;
+declare const _default$5: RouteType;
 
-// Rest of your original declarations remain the same
-type FC<T = {}> = React.FC<React.PropsWithChildren<T>>;
-declare const Router: FC<{ scrollUp?: boolean; url?: string }>;
-declare const Switch: FC<{
-  redirect?: string | { path: string } | (() => string);
-}>;
-type Query = Record<string, string>;
-type Url = URL & {
-  path: string;
-  query: Query;
-  hash?: string;
+type Query = Record<string, string | string[]>;
+type Url = {
+    path: string;
+    query: Query;
+    hash?: string;
+    params?: Params;
 };
 type UrlSet = {
-  path?: string;
-  query?: Query;
-  hash?: string;
+    path?: string;
+    query?: Query;
+    hash?: string;
 };
 type Params = Record<string, string | number | boolean | Date>;
-type Callable<T = string> = React.Dispatch<React.SetStateAction<T>>;
-declare const Context: React.Context<[Url, Callable<UrlSet | string>]>;
-declare function useUrl(): [Url, Callable<UrlSet | string>];
-declare function usePath(): [string, Callable<string>];
-declare function useQuery(): [Query, Callable<Query>];
-declare function useQuery(key: string): [string, Callable<string>];
-declare function useHash(): [string, Callable<string>];
-declare function useParams<T = Params>(): T;
-declare function useParams<T = string | number | boolean | Date>(
-  key: string,
-): T;
-
-export default Router;
-export {
-  Route,
-  Switch,
-  useUrl,
-  usePath,
-  useQuery,
-  useHash,
-  useParams,
-  Context,
+type SetUrlOptions = {
+    mode?: "push" | "replace";
 };
+type NewUrlValue = Url | UrlSet | string;
+type SetUrl = (newUrl: NewUrlValue | ((prev: Url) => NewUrlValue), opts?: SetUrlOptions) => void;
+
+interface SwitchProps {
+    redirect?: string | {
+        path: string;
+    } | ((url: Url) => string);
+    children?: ReactNode;
+}
+declare const _default$4: ({ redirect, children }: SwitchProps) => ReactElement | null;
+
+declare const _default$3: React.Context<[Url, SetUrl] | undefined>;
+
+declare const _default$2: () => [Url, SetUrl];
+
+type PathUpdater = (path: string) => string;
+type SetPath = (path: string | PathUpdater, opts?: SetUrlOptions) => void;
+declare const _default$1: () => [string, SetPath];
+
+type QueryValue = string | string[] | undefined;
+type SetQueryProp = (value: string | ((prev: QueryValue) => string), opts?: SetUrlOptions) => void;
+type QueryUpdater = (query: Query) => Query | string;
+type SetQuery = (newQuery: Query | string | QueryUpdater, opts?: SetUrlOptions) => void;
+declare function useQuery(key: string): [QueryValue, SetQueryProp];
+declare function useQuery(): [Query, SetQuery];
+
+type HashUpdater = (hash: string | undefined) => string;
+type SetHash = (hash: string | HashUpdater, opts?: SetUrlOptions) => void;
+declare const _default: () => [string | undefined, SetHash];
+
+declare function useParams(): Params;
+declare function useParams<T = string | number | boolean | Date>(key: string): T;
+
+export { _default$3 as Context, _default$5 as Route, _default$4 as Switch, _default$6 as default, _default as useHash, useParams, _default$1 as usePath, useQuery, _default$2 as useUrl };

package/index.min.js

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

package/package.json

@@ -1,12 +1,19 @@
 {
   "name": "crossroad",
-  "version": "3.0.2",
+  "version": "3.0.4",
   "description": "A React library to handle navigation easily in your WebApp",
   "homepage": "https://crossroad.page/",
-  "repository": "https://github.com/franciscop/crossroad.git",
-  "bugs": "https://github.com/franciscop/crossroad/issues",
+  "repository": "github:franciscop/crossroad",
   "funding": "https://www.paypal.me/franciscopresencia/19",
   "author": "Francisco Presencia <public@francisco.io> (https://francisco.io/)",
+  "license": "MIT",
+  "keywords": [
+    "react",
+    "router",
+    "routing",
+    "javascript",
+    "hooks"
+  ],
   "documentation": {
     "home": "assets/home.html",
     "menu": {
@@ -16,21 +23,13 @@
       "Github": "https://github.com/franciscop/crossroad"
     }
   },
-  "license": "MIT",
   "scripts": {
-    "build": "rollup -c",
-    "typecheck": "tsc",
+    "build": "tsc -p tsconfig.build.json && rollup -c",
+    "lint": "tsc",
     "size": "echo $(gzip -c index.min.js | wc -c) bytes",
     "start": "jest --watch",
     "test": "jest --coverage"
   },
-  "keywords": [
-    "react",
-    "router",
-    "routing",
-    "javascript",
-    "hooks"
-  ],
   "main": "index.min.js",
   "type": "module",
   "types": "index.d.ts",
@@ -42,19 +41,18 @@
     "@babel/preset-env": "^7.29.2",
     "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.28.5",
+    "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-terser": "^1.0.0",
     "@types/jest": "^30.0.0",
     "@types/node": "^25.5.2",
     "@types/react": "^18.3.4",
-    "babel-loader": "^10.1.1",
-    "babel-polyfill": "^6.26.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-test": "^0.22.1",
+    "react-test": "^0.23.2",
     "rollup": "^4.60.1",
-    "rollup-plugin-babel": "^4.4.0",
+    "rollup-plugin-dts": "^6.4.1",
     "typescript": "^6.0.2"
   },
   "peerDependencies": {

package/readme.md

@@ -6,7 +6,7 @@ A React library to handle navigation in your WebApp. Built with simple component
 - Very useful hooks like [`useUrl`](#useurl), [`useQuery`](#usequery), etc. Follow [the rules of hooks](https://reactjs.org/docs/hooks-rules.html).
 - Links are plain `<a>` instead of custom components. [Read more](#a).
 - The `<Route>` path is `exact` by default and can match query parameters.
-- It's [just ~1.5kb](https://bundlephobia.com/package/crossroad) (min+gzip) instead of the 17kb of React Router(+Dom).
+- It's [just ~1.8kb](https://bundlephobia.com/package/crossroad) (min+gzip) instead of the 17kb of React Router(+Dom).
 - Add `scrollUp` to `<Router>` o `<Route>` to automatically scroll up on a route change.
 
 [**🔗 Demo on CodeSandbox**](https://codesandbox.io/s/recursing-wozniak-uftyo?file=/src/App.js)