router-kit 1.2.2 → 1.2.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +46 -0
- package/dist/index.d.ts +46 -7
- package/dist/index.js +2 -7
- package/dist/index.mjs +2 -0
- package/package.json +14 -5
- package/dist/components/Link.d.ts +0 -7
- package/dist/components/Link.js +0 -10
- package/dist/components/NavLink.d.ts +0 -8
- package/dist/components/NavLink.js +0 -14
- package/dist/context/RouterContext.d.ts +0 -3
- package/dist/context/RouterContext.js +0 -3
- package/dist/context/RouterProvider.d.ts +0 -5
- package/dist/context/RouterProvider.js +0 -115
- package/dist/core/createRouter.d.ts +0 -3
- package/dist/core/createRouter.js +0 -20
- package/dist/hooks/useLocation.d.ts +0 -2
- package/dist/hooks/useLocation.js +0 -16
- package/dist/hooks/useParams.d.ts +0 -3
- package/dist/hooks/useParams.js +0 -15
- package/dist/hooks/useQuery.d.ts +0 -3
- package/dist/hooks/useQuery.js +0 -10
- package/dist/hooks/useRouter.d.ts +0 -1
- package/dist/hooks/useRouter.js +0 -12
- package/dist/pages/404/index.d.ts +0 -2
- package/dist/pages/404/index.js +0 -56
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { ReactNode, JSX } from 'react';
|
|
3
|
+
|
|
4
|
+
declare function Link({ to, children, className, }: {
|
|
5
|
+
to: string;
|
|
6
|
+
children: ReactNode;
|
|
7
|
+
className?: string;
|
|
8
|
+
}): react_jsx_runtime.JSX.Element;
|
|
9
|
+
|
|
10
|
+
declare function NavLink({ to, children, className, activeClassName, }: {
|
|
11
|
+
to: string;
|
|
12
|
+
children: ReactNode;
|
|
13
|
+
className?: string;
|
|
14
|
+
activeClassName?: string;
|
|
15
|
+
}): react_jsx_runtime.JSX.Element;
|
|
16
|
+
|
|
17
|
+
interface Route {
|
|
18
|
+
path: string | string[];
|
|
19
|
+
component: JSX.Element;
|
|
20
|
+
children?: Route[];
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
interface Location {
|
|
24
|
+
pathname: string;
|
|
25
|
+
search: string;
|
|
26
|
+
hash: string;
|
|
27
|
+
state: any;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
declare const RouterProvider: ({ routes }: {
|
|
31
|
+
routes: Route[];
|
|
32
|
+
}) => react_jsx_runtime.JSX.Element;
|
|
33
|
+
|
|
34
|
+
declare function createRouter(inputRoutes: Route[]): Route[];
|
|
35
|
+
|
|
36
|
+
declare function useLocation(): Location;
|
|
37
|
+
|
|
38
|
+
declare const useParams: () => {
|
|
39
|
+
[key: string]: string;
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
declare const useQuery: () => {
|
|
43
|
+
[key: string]: string;
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
export { Link, NavLink, RouterProvider, createRouter, useLocation, useParams, useQuery };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,46 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { ReactNode, JSX } from 'react';
|
|
3
|
+
|
|
4
|
+
declare function Link({ to, children, className, }: {
|
|
5
|
+
to: string;
|
|
6
|
+
children: ReactNode;
|
|
7
|
+
className?: string;
|
|
8
|
+
}): react_jsx_runtime.JSX.Element;
|
|
9
|
+
|
|
10
|
+
declare function NavLink({ to, children, className, activeClassName, }: {
|
|
11
|
+
to: string;
|
|
12
|
+
children: ReactNode;
|
|
13
|
+
className?: string;
|
|
14
|
+
activeClassName?: string;
|
|
15
|
+
}): react_jsx_runtime.JSX.Element;
|
|
16
|
+
|
|
17
|
+
interface Route {
|
|
18
|
+
path: string | string[];
|
|
19
|
+
component: JSX.Element;
|
|
20
|
+
children?: Route[];
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
interface Location {
|
|
24
|
+
pathname: string;
|
|
25
|
+
search: string;
|
|
26
|
+
hash: string;
|
|
27
|
+
state: any;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
declare const RouterProvider: ({ routes }: {
|
|
31
|
+
routes: Route[];
|
|
32
|
+
}) => react_jsx_runtime.JSX.Element;
|
|
33
|
+
|
|
34
|
+
declare function createRouter(inputRoutes: Route[]): Route[];
|
|
35
|
+
|
|
36
|
+
declare function useLocation(): Location;
|
|
37
|
+
|
|
38
|
+
declare const useParams: () => {
|
|
39
|
+
[key: string]: string;
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
declare const useQuery: () => {
|
|
43
|
+
[key: string]: string;
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
export { Link, NavLink, RouterProvider, createRouter, useLocation, useParams, useQuery };
|
package/dist/index.js
CHANGED
|
@@ -1,7 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
export { default as RouterProvider } from "./context/RouterProvider";
|
|
4
|
-
export { default as createRouter } from "./core/createRouter";
|
|
5
|
-
export { useLocation } from "./hooks/useLocation";
|
|
6
|
-
export { useParams } from "./hooks/useParams";
|
|
7
|
-
export { useQuery } from "./hooks/useQuery";
|
|
1
|
+
'use strict';var react=require('react'),jsxRuntime=require('react/jsx-runtime'),F=require('url-join');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var F__default=/*#__PURE__*/_interopDefault(F);var B=react.createContext(void 0),P=B;function l(){let t=react.useContext(P);if(!t)throw typeof window=="undefined"?new Error("RouterKit: useRouter cannot be used during server side rendering"):new Error("RouterKit: useRouter must be used within RouterProvider");return t}function W({to:t,children:e,className:o}){let{navigate:s}=l();return jsxRuntime.jsx("a",{onClick:c=>{c.preventDefault(),s(t);},className:o,href:t,children:e})}var A=W;function T({to:t,children:e,className:o,activeClassName:s="active"}){let{navigate:c,path:i}=l(),f=[o,i===t?s:null].filter(Boolean).join(" ");return jsxRuntime.jsx("a",{onClick:w=>{w.preventDefault(),c(t);},className:f,href:t,children:e})}var z=T;var h={errorPage:{minHeight:"100vh",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:"#f3f4f6"},errorContainer:{textAlign:"center",padding:"0 1rem"},errorTitle:{fontSize:"9rem",fontWeight:700,color:"#1f2937",margin:0},errorSubtitle:{fontSize:"1.5rem",fontWeight:600,color:"#4b5563",marginTop:"1rem",marginBottom:0},errorMessage:{color:"#6b7280",margin:"1rem 0 2rem 0"},errorButton:{padding:"0.75rem 1.5rem",backgroundColor:"#2563eb",color:"white",border:"none",borderRadius:"0.5rem",cursor:"pointer",transition:"background-color 0.2s"},errorButtonHover:{backgroundColor:"#1d4ed8"}},G=()=>{let{navigate:t}=l(),[e,o]=react.useState(false);return jsxRuntime.jsx("div",{style:h.errorPage,children:jsxRuntime.jsxs("div",{style:h.errorContainer,children:[jsxRuntime.jsx("h1",{style:h.errorTitle,children:"404"}),jsxRuntime.jsx("h2",{style:h.errorSubtitle,children:"Page Not Found"}),jsxRuntime.jsx("p",{style:h.errorMessage,children:"Sorry, the page you are looking for does not exist or has been moved."}),jsxRuntime.jsx("button",{onClick:()=>{t("/");},onMouseEnter:()=>o(true),onMouseLeave:()=>o(false),style:{...h.errorButton,...e?h.errorButtonHover:{}},children:"Go Back Home"})]})})},C=G;var I=t=>{try{return new URL(t,window.location.origin),!0}catch{return false}},O=({routes:t})=>{let[e,o]=react.useState(""),[s,c]=react.useState(""),i=null;react.useEffect(()=>{o(window.location.pathname);let r=m=>{let u=window.history[m];return function(p,g,R){let S=u.apply(this,[p,g,R]);return window.dispatchEvent(new Event("locationchange")),S}},n=window.history.pushState,d=window.history.replaceState;window.history.pushState=r("pushState"),window.history.replaceState=r("replaceState");let a=()=>{o(window.location.pathname);};return window.addEventListener("popstate",a),window.addEventListener("locationchange",a),()=>{window.history.pushState=n,window.history.replaceState=d,window.removeEventListener("popstate",a),window.removeEventListener("locationchange",a);}},[]);let v=(r,n)=>{let d=r.split("|");for(let a of d){let m=a.split("/").filter(Boolean),u=n.split("/").filter(Boolean);if(m.length!==u.length)continue;let p=true;for(let g=0;g<m.length;g++){let R=m[g],S=u[g];if(!R.startsWith(":")&&R!==S){p=false;break}}if(p)return true}return false},f=(r,n,d="/")=>{for(let a of r){if(a.path==="404"||a.path==="/404"){i=a.component;continue}let u=F__default.default(d,`/${a.path}`);if(v(u,n))return u!==s&&c(u),a.component;if(a.children){let p=f(a.children,n,u);if(p)return p}}return null},w=(r,n)=>{if(/^https?:\/\//i.test(r)||(r=r.startsWith("/")?r:`/${r}`),!I(r)){console.error(`RouterKit: Invalid URL "${r}"`);return}try{n!=null&&n.replace?window.history.replaceState((n==null?void 0:n.state)||{},"",r):window.history.pushState((n==null?void 0:n.state)||{},"",r),o(r);}catch(d){console.error("RouterKit: Navigation failed",d);}},x=f(t,e),N=x!=null?x:i||jsxRuntime.jsx(C,{});return jsxRuntime.jsx(P.Provider,{value:{path:e,fullPathWithParams:s,navigate:w},children:N})},Q=O;function L(t){return t.map(e=>{let s=(Array.isArray(e.path)?e.path:[e.path]).map(i=>i!=null&&i.startsWith("/")?i.replace(/^\/+/,""):i!=null?i:"").join("|"),c={...e,path:s};return e.children&&(c.children=L(e.children)),c})}function q(t){return L(t)}var V=q;function j(){return typeof window=="undefined"?{pathname:"",search:"",hash:"",state:null}:{pathname:window.location.pathname,search:window.location.search,hash:window.location.hash,state:window.history.state}}var J=()=>{let{path:t,fullPathWithParams:e}=l(),o={},s=e.split("/").filter(Boolean),c=t.split("/").filter(Boolean);return s.forEach((i,v)=>{var f;if(i.startsWith(":")){let w=i.slice(1);o[w]=(f=c[v])!=null?f:"";}}),o};var X=()=>{let t={};return typeof window=="undefined"||new URLSearchParams(window.location.search).forEach((o,s)=>{t[s]=o;}),t};
|
|
2
|
+
exports.Link=A;exports.NavLink=z;exports.RouterProvider=Q;exports.createRouter=V;exports.useLocation=j;exports.useParams=J;exports.useQuery=X;
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import {createContext,useState,useEffect,useContext}from'react';import {jsx,jsxs}from'react/jsx-runtime';import F from'url-join';var B=createContext(void 0),P=B;function l(){let t=useContext(P);if(!t)throw typeof window=="undefined"?new Error("RouterKit: useRouter cannot be used during server side rendering"):new Error("RouterKit: useRouter must be used within RouterProvider");return t}function W({to:t,children:e,className:o}){let{navigate:s}=l();return jsx("a",{onClick:c=>{c.preventDefault(),s(t);},className:o,href:t,children:e})}var A=W;function T({to:t,children:e,className:o,activeClassName:s="active"}){let{navigate:c,path:i}=l(),f=[o,i===t?s:null].filter(Boolean).join(" ");return jsx("a",{onClick:w=>{w.preventDefault(),c(t);},className:f,href:t,children:e})}var z=T;var h={errorPage:{minHeight:"100vh",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:"#f3f4f6"},errorContainer:{textAlign:"center",padding:"0 1rem"},errorTitle:{fontSize:"9rem",fontWeight:700,color:"#1f2937",margin:0},errorSubtitle:{fontSize:"1.5rem",fontWeight:600,color:"#4b5563",marginTop:"1rem",marginBottom:0},errorMessage:{color:"#6b7280",margin:"1rem 0 2rem 0"},errorButton:{padding:"0.75rem 1.5rem",backgroundColor:"#2563eb",color:"white",border:"none",borderRadius:"0.5rem",cursor:"pointer",transition:"background-color 0.2s"},errorButtonHover:{backgroundColor:"#1d4ed8"}},G=()=>{let{navigate:t}=l(),[e,o]=useState(false);return jsx("div",{style:h.errorPage,children:jsxs("div",{style:h.errorContainer,children:[jsx("h1",{style:h.errorTitle,children:"404"}),jsx("h2",{style:h.errorSubtitle,children:"Page Not Found"}),jsx("p",{style:h.errorMessage,children:"Sorry, the page you are looking for does not exist or has been moved."}),jsx("button",{onClick:()=>{t("/");},onMouseEnter:()=>o(true),onMouseLeave:()=>o(false),style:{...h.errorButton,...e?h.errorButtonHover:{}},children:"Go Back Home"})]})})},C=G;var I=t=>{try{return new URL(t,window.location.origin),!0}catch{return false}},O=({routes:t})=>{let[e,o]=useState(""),[s,c]=useState(""),i=null;useEffect(()=>{o(window.location.pathname);let r=m=>{let u=window.history[m];return function(p,g,R){let S=u.apply(this,[p,g,R]);return window.dispatchEvent(new Event("locationchange")),S}},n=window.history.pushState,d=window.history.replaceState;window.history.pushState=r("pushState"),window.history.replaceState=r("replaceState");let a=()=>{o(window.location.pathname);};return window.addEventListener("popstate",a),window.addEventListener("locationchange",a),()=>{window.history.pushState=n,window.history.replaceState=d,window.removeEventListener("popstate",a),window.removeEventListener("locationchange",a);}},[]);let v=(r,n)=>{let d=r.split("|");for(let a of d){let m=a.split("/").filter(Boolean),u=n.split("/").filter(Boolean);if(m.length!==u.length)continue;let p=true;for(let g=0;g<m.length;g++){let R=m[g],S=u[g];if(!R.startsWith(":")&&R!==S){p=false;break}}if(p)return true}return false},f=(r,n,d="/")=>{for(let a of r){if(a.path==="404"||a.path==="/404"){i=a.component;continue}let u=F(d,`/${a.path}`);if(v(u,n))return u!==s&&c(u),a.component;if(a.children){let p=f(a.children,n,u);if(p)return p}}return null},w=(r,n)=>{if(/^https?:\/\//i.test(r)||(r=r.startsWith("/")?r:`/${r}`),!I(r)){console.error(`RouterKit: Invalid URL "${r}"`);return}try{n!=null&&n.replace?window.history.replaceState((n==null?void 0:n.state)||{},"",r):window.history.pushState((n==null?void 0:n.state)||{},"",r),o(r);}catch(d){console.error("RouterKit: Navigation failed",d);}},x=f(t,e),N=x!=null?x:i||jsx(C,{});return jsx(P.Provider,{value:{path:e,fullPathWithParams:s,navigate:w},children:N})},Q=O;function L(t){return t.map(e=>{let s=(Array.isArray(e.path)?e.path:[e.path]).map(i=>i!=null&&i.startsWith("/")?i.replace(/^\/+/,""):i!=null?i:"").join("|"),c={...e,path:s};return e.children&&(c.children=L(e.children)),c})}function q(t){return L(t)}var V=q;function j(){return typeof window=="undefined"?{pathname:"",search:"",hash:"",state:null}:{pathname:window.location.pathname,search:window.location.search,hash:window.location.hash,state:window.history.state}}var J=()=>{let{path:t,fullPathWithParams:e}=l(),o={},s=e.split("/").filter(Boolean),c=t.split("/").filter(Boolean);return s.forEach((i,v)=>{var f;if(i.startsWith(":")){let w=i.slice(1);o[w]=(f=c[v])!=null?f:"";}}),o};var X=()=>{let t={};return typeof window=="undefined"||new URLSearchParams(window.location.search).forEach((o,s)=>{t[s]=o;}),t};
|
|
2
|
+
export{A as Link,z as NavLink,Q as RouterProvider,V as createRouter,j as useLocation,J as useParams,X as useQuery};
|
package/package.json
CHANGED
|
@@ -5,17 +5,25 @@
|
|
|
5
5
|
"email": "mohammed.bencheikh.dev@gmail.com",
|
|
6
6
|
"url": "https://mohammedbencheikh.com/"
|
|
7
7
|
},
|
|
8
|
-
"version": "1.2.
|
|
8
|
+
"version": "1.2.4",
|
|
9
9
|
"description": "A small React routing provider library",
|
|
10
10
|
"main": "dist/index.js",
|
|
11
|
+
"module": "dist/index.mjs",
|
|
11
12
|
"types": "dist/index.d.ts",
|
|
13
|
+
"exports": {
|
|
14
|
+
".": {
|
|
15
|
+
"types": "./dist/index.d.ts",
|
|
16
|
+
"require": "./dist/index.js",
|
|
17
|
+
"import": "./dist/index.mjs"
|
|
18
|
+
}
|
|
19
|
+
},
|
|
12
20
|
"files": [
|
|
13
21
|
"dist"
|
|
14
22
|
],
|
|
15
23
|
"scripts": {
|
|
16
24
|
"clean": "rm -rf dist",
|
|
17
|
-
"build": "
|
|
18
|
-
"build:watch": "
|
|
25
|
+
"build": "tsup",
|
|
26
|
+
"build:watch": "tsup --watch",
|
|
19
27
|
"prepare": "npm run build",
|
|
20
28
|
"typecheck": "tsc -p tsconfig.json --noEmit",
|
|
21
29
|
"pack:verify": "npm pack --dry-run",
|
|
@@ -31,10 +39,11 @@
|
|
|
31
39
|
"url-join": "^5.0.0"
|
|
32
40
|
},
|
|
33
41
|
"devDependencies": {
|
|
34
|
-
"typescript": "^5.2.0",
|
|
35
42
|
"@types/react": "^19.2.2",
|
|
36
43
|
"@types/react-dom": "^19.2.2",
|
|
37
|
-
"@types/url-join": "^5.0.0"
|
|
44
|
+
"@types/url-join": "^5.0.0",
|
|
45
|
+
"tsup": "8.5.0",
|
|
46
|
+
"typescript": "^5.2.0"
|
|
38
47
|
},
|
|
39
48
|
"overrides": {
|
|
40
49
|
"minimist": "^1.2.6",
|
package/dist/components/Link.js
DELETED
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { useRouter } from "../hooks/useRouter";
|
|
3
|
-
function Link({ to, children, className, }) {
|
|
4
|
-
const { navigate } = useRouter();
|
|
5
|
-
return (_jsx("a", { onClick: (e) => {
|
|
6
|
-
e.preventDefault();
|
|
7
|
-
navigate(to);
|
|
8
|
-
}, className: className, href: to, children: children }));
|
|
9
|
-
}
|
|
10
|
-
export default Link;
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import type { ReactNode } from "react";
|
|
2
|
-
declare function NavLink({ to, children, className, activeClassName, }: {
|
|
3
|
-
to: string;
|
|
4
|
-
children: ReactNode;
|
|
5
|
-
className?: string;
|
|
6
|
-
activeClassName?: string;
|
|
7
|
-
}): import("react/jsx-runtime").JSX.Element;
|
|
8
|
-
export default NavLink;
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { useRouter } from "../hooks/useRouter";
|
|
3
|
-
function NavLink({ to, children, className, activeClassName = "active", }) {
|
|
4
|
-
const { navigate, path } = useRouter();
|
|
5
|
-
const isActive = path === to;
|
|
6
|
-
const combinedClass = [className, isActive ? activeClassName : null]
|
|
7
|
-
.filter(Boolean)
|
|
8
|
-
.join(" ");
|
|
9
|
-
return (_jsx("a", { onClick: (e) => {
|
|
10
|
-
e.preventDefault();
|
|
11
|
-
navigate(to);
|
|
12
|
-
}, className: combinedClass, href: to, children: children }));
|
|
13
|
-
}
|
|
14
|
-
export default NavLink;
|
|
@@ -1,115 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { useEffect, useState } from "react";
|
|
3
|
-
import join from "url-join";
|
|
4
|
-
import Page404 from "../pages/404";
|
|
5
|
-
import RouterContext from "./RouterContext";
|
|
6
|
-
const validateUrl = (url) => {
|
|
7
|
-
try {
|
|
8
|
-
new URL(url, window.location.origin);
|
|
9
|
-
return true;
|
|
10
|
-
}
|
|
11
|
-
catch {
|
|
12
|
-
return false;
|
|
13
|
-
}
|
|
14
|
-
};
|
|
15
|
-
const RouterProvider = ({ routes }) => {
|
|
16
|
-
const [path, setPath] = useState("");
|
|
17
|
-
const [fullPathWithParams, setFullPathWithParams] = useState("");
|
|
18
|
-
let page404 = null;
|
|
19
|
-
useEffect(() => {
|
|
20
|
-
setPath(window.location.pathname);
|
|
21
|
-
const patchHistory = (method) => {
|
|
22
|
-
const original = window.history[method];
|
|
23
|
-
return function (state, title, url) {
|
|
24
|
-
const result = original.apply(this, [state, title, url]);
|
|
25
|
-
window.dispatchEvent(new Event("locationchange"));
|
|
26
|
-
return result;
|
|
27
|
-
};
|
|
28
|
-
};
|
|
29
|
-
const originalPush = window.history.pushState;
|
|
30
|
-
const originalReplace = window.history.replaceState;
|
|
31
|
-
window.history.pushState = patchHistory("pushState");
|
|
32
|
-
window.history.replaceState = patchHistory("replaceState");
|
|
33
|
-
const handleLocationChange = () => {
|
|
34
|
-
setPath(window.location.pathname);
|
|
35
|
-
};
|
|
36
|
-
window.addEventListener("popstate", handleLocationChange);
|
|
37
|
-
window.addEventListener("locationchange", handleLocationChange);
|
|
38
|
-
return () => {
|
|
39
|
-
window.history.pushState = originalPush;
|
|
40
|
-
window.history.replaceState = originalReplace;
|
|
41
|
-
window.removeEventListener("popstate", handleLocationChange);
|
|
42
|
-
window.removeEventListener("locationchange", handleLocationChange);
|
|
43
|
-
};
|
|
44
|
-
}, []);
|
|
45
|
-
const pathValidation = (routeFullPath, currentPath) => {
|
|
46
|
-
const routePaths = routeFullPath.split("|");
|
|
47
|
-
for (const routePath of routePaths) {
|
|
48
|
-
const routeParts = routePath.split("/").filter(Boolean);
|
|
49
|
-
const pathParts = currentPath.split("/").filter(Boolean);
|
|
50
|
-
if (routeParts.length !== pathParts.length)
|
|
51
|
-
continue;
|
|
52
|
-
let isMatch = true;
|
|
53
|
-
for (let i = 0; i < routeParts.length; i++) {
|
|
54
|
-
const r = routeParts[i];
|
|
55
|
-
const p = pathParts[i];
|
|
56
|
-
if (r.startsWith(":"))
|
|
57
|
-
continue;
|
|
58
|
-
if (r !== p) {
|
|
59
|
-
isMatch = false;
|
|
60
|
-
break;
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
if (isMatch)
|
|
64
|
-
return true;
|
|
65
|
-
}
|
|
66
|
-
return false;
|
|
67
|
-
};
|
|
68
|
-
const getComponent = (routesList, currentPath, parentPath = "/") => {
|
|
69
|
-
for (const route of routesList) {
|
|
70
|
-
const is404 = route.path === "404" || route.path === "/404";
|
|
71
|
-
if (is404) {
|
|
72
|
-
page404 = route.component;
|
|
73
|
-
continue;
|
|
74
|
-
}
|
|
75
|
-
const fullPath = join(parentPath, `/${route.path}`);
|
|
76
|
-
if (pathValidation(fullPath, currentPath)) {
|
|
77
|
-
if (fullPath !== fullPathWithParams) {
|
|
78
|
-
setFullPathWithParams(fullPath);
|
|
79
|
-
}
|
|
80
|
-
return route.component;
|
|
81
|
-
}
|
|
82
|
-
if (route.children) {
|
|
83
|
-
const childMatch = getComponent(route.children, currentPath, fullPath);
|
|
84
|
-
if (childMatch)
|
|
85
|
-
return childMatch;
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
|
-
return null;
|
|
89
|
-
};
|
|
90
|
-
const navigate = (to, options) => {
|
|
91
|
-
if (!/^https?:\/\//i.test(to)) {
|
|
92
|
-
to = to.startsWith("/") ? to : `/${to}`;
|
|
93
|
-
}
|
|
94
|
-
if (!validateUrl(to)) {
|
|
95
|
-
console.error(`RouterKit: Invalid URL "${to}"`);
|
|
96
|
-
return;
|
|
97
|
-
}
|
|
98
|
-
try {
|
|
99
|
-
if (options === null || options === void 0 ? void 0 : options.replace) {
|
|
100
|
-
window.history.replaceState((options === null || options === void 0 ? void 0 : options.state) || {}, "", to);
|
|
101
|
-
}
|
|
102
|
-
else {
|
|
103
|
-
window.history.pushState((options === null || options === void 0 ? void 0 : options.state) || {}, "", to);
|
|
104
|
-
}
|
|
105
|
-
setPath(to);
|
|
106
|
-
}
|
|
107
|
-
catch (error) {
|
|
108
|
-
console.error("RouterKit: Navigation failed", error);
|
|
109
|
-
}
|
|
110
|
-
};
|
|
111
|
-
const matchedComponent = getComponent(routes, path);
|
|
112
|
-
const component = matchedComponent !== null && matchedComponent !== void 0 ? matchedComponent : (page404 || _jsx(Page404, {}));
|
|
113
|
-
return (_jsx(RouterContext.Provider, { value: { path, fullPathWithParams, navigate }, children: component }));
|
|
114
|
-
};
|
|
115
|
-
export default RouterProvider;
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
function normalizeRoutes(inputRoutes) {
|
|
2
|
-
return inputRoutes.map((route) => {
|
|
3
|
-
const pathArray = Array.isArray(route.path) ? route.path : [route.path];
|
|
4
|
-
const normalizedPath = pathArray
|
|
5
|
-
.map((path) => (path === null || path === void 0 ? void 0 : path.startsWith("/")) ? path.replace(/^\/+/, "") : path !== null && path !== void 0 ? path : "")
|
|
6
|
-
.join("|");
|
|
7
|
-
const normalized = {
|
|
8
|
-
...route,
|
|
9
|
-
path: normalizedPath,
|
|
10
|
-
};
|
|
11
|
-
if (route.children) {
|
|
12
|
-
normalized.children = normalizeRoutes(route.children);
|
|
13
|
-
}
|
|
14
|
-
return normalized;
|
|
15
|
-
});
|
|
16
|
-
}
|
|
17
|
-
function createRouter(inputRoutes) {
|
|
18
|
-
return normalizeRoutes(inputRoutes);
|
|
19
|
-
}
|
|
20
|
-
export default createRouter;
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
export function useLocation() {
|
|
2
|
-
if (typeof window === "undefined") {
|
|
3
|
-
return {
|
|
4
|
-
pathname: "",
|
|
5
|
-
search: "",
|
|
6
|
-
hash: "",
|
|
7
|
-
state: null,
|
|
8
|
-
};
|
|
9
|
-
}
|
|
10
|
-
return {
|
|
11
|
-
pathname: window.location.pathname,
|
|
12
|
-
search: window.location.search,
|
|
13
|
-
hash: window.location.hash,
|
|
14
|
-
state: window.history.state,
|
|
15
|
-
};
|
|
16
|
-
}
|
package/dist/hooks/useParams.js
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { useRouter } from "./useRouter";
|
|
2
|
-
export const useParams = () => {
|
|
3
|
-
const { path, fullPathWithParams } = useRouter();
|
|
4
|
-
const params = {};
|
|
5
|
-
const fullSegments = fullPathWithParams.split("/").filter(Boolean);
|
|
6
|
-
const pathSegments = path.split("/").filter(Boolean);
|
|
7
|
-
fullSegments.forEach((seg, idx) => {
|
|
8
|
-
var _a;
|
|
9
|
-
if (seg.startsWith(":")) {
|
|
10
|
-
const name = seg.slice(1);
|
|
11
|
-
params[name] = (_a = pathSegments[idx]) !== null && _a !== void 0 ? _a : "";
|
|
12
|
-
}
|
|
13
|
-
});
|
|
14
|
-
return params;
|
|
15
|
-
};
|
package/dist/hooks/useQuery.d.ts
DELETED
package/dist/hooks/useQuery.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare function useRouter(): import("../types").RouterContextType;
|
package/dist/hooks/useRouter.js
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { useContext } from "react";
|
|
2
|
-
import RouterContext from "../context/RouterContext";
|
|
3
|
-
export function useRouter() {
|
|
4
|
-
const ctx = useContext(RouterContext);
|
|
5
|
-
if (!ctx) {
|
|
6
|
-
if (typeof window === "undefined") {
|
|
7
|
-
throw new Error("RouterKit: useRouter cannot be used during server side rendering");
|
|
8
|
-
}
|
|
9
|
-
throw new Error("RouterKit: useRouter must be used within RouterProvider");
|
|
10
|
-
}
|
|
11
|
-
return ctx;
|
|
12
|
-
}
|
package/dist/pages/404/index.js
DELETED
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useState } from "react";
|
|
3
|
-
import { useRouter } from "../../hooks/useRouter";
|
|
4
|
-
const staile = {
|
|
5
|
-
errorPage: {
|
|
6
|
-
minHeight: "100vh",
|
|
7
|
-
display: "flex",
|
|
8
|
-
alignItems: "center",
|
|
9
|
-
justifyContent: "center",
|
|
10
|
-
backgroundColor: "#f3f4f6",
|
|
11
|
-
},
|
|
12
|
-
errorContainer: {
|
|
13
|
-
textAlign: "center",
|
|
14
|
-
padding: "0 1rem",
|
|
15
|
-
},
|
|
16
|
-
errorTitle: {
|
|
17
|
-
fontSize: "9rem",
|
|
18
|
-
fontWeight: 700,
|
|
19
|
-
color: "#1f2937",
|
|
20
|
-
margin: 0,
|
|
21
|
-
},
|
|
22
|
-
errorSubtitle: {
|
|
23
|
-
fontSize: "1.5rem",
|
|
24
|
-
fontWeight: 600,
|
|
25
|
-
color: "#4b5563",
|
|
26
|
-
marginTop: "1rem",
|
|
27
|
-
marginBottom: 0,
|
|
28
|
-
},
|
|
29
|
-
errorMessage: {
|
|
30
|
-
color: "#6b7280",
|
|
31
|
-
margin: "1rem 0 2rem 0",
|
|
32
|
-
},
|
|
33
|
-
errorButton: {
|
|
34
|
-
padding: "0.75rem 1.5rem",
|
|
35
|
-
backgroundColor: "#2563eb",
|
|
36
|
-
color: "white",
|
|
37
|
-
border: "none",
|
|
38
|
-
borderRadius: "0.5rem",
|
|
39
|
-
cursor: "pointer",
|
|
40
|
-
transition: "background-color 0.2s",
|
|
41
|
-
},
|
|
42
|
-
errorButtonHover: {
|
|
43
|
-
backgroundColor: "#1d4ed8",
|
|
44
|
-
},
|
|
45
|
-
};
|
|
46
|
-
const Page404 = () => {
|
|
47
|
-
const { navigate } = useRouter();
|
|
48
|
-
const [hover, setHover] = useState(false);
|
|
49
|
-
return (_jsx("div", { style: staile.errorPage, children: _jsxs("div", { style: staile.errorContainer, children: [_jsx("h1", { style: staile.errorTitle, children: "404" }), _jsx("h2", { style: staile.errorSubtitle, children: "Page Not Found" }), _jsx("p", { style: staile.errorMessage, children: "Sorry, the page you are looking for does not exist or has been moved." }), _jsx("button", { onClick: () => {
|
|
50
|
-
navigate("/");
|
|
51
|
-
}, onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), style: {
|
|
52
|
-
...staile.errorButton,
|
|
53
|
-
...(hover ? staile.errorButtonHover : {}),
|
|
54
|
-
}, children: "Go Back Home" })] }) }));
|
|
55
|
-
};
|
|
56
|
-
export default Page404;
|