router-kit 0.1.1

package/dist/Link.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+declare function Link({ to, children, className, }: {
+    to: string;
+    children: ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export default Link;

package/dist/Link.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRouter } from "./useRouter";
+function Link({ to, children, className, }) {
+    const { navigate } = useRouter();
+    return (_jsx("a", { onClick: (e) => {
+            e.preventDefault();
+            navigate(to);
+        }, className: className, href: to, children: children }));
+}
+export default Link;

package/dist/NavLink.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+declare function NavLink({ to, children, className, activeClassName, }: {
+    to: string;
+    children: ReactNode;
+    className?: string;
+    activeClassName?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export default NavLink;

package/dist/NavLink.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRouter } from "./useRouter";
+function NavLink({ to, children, className, activeClassName = "active", }) {
+    const { navigate, path } = useRouter();
+    const isActive = path === to;
+    const combinedClass = [className, isActive ? activeClassName : null]
+        .filter(Boolean)
+        .join(" ");
+    return (_jsx("a", { onClick: (e) => {
+            e.preventDefault();
+            navigate(to);
+        }, className: combinedClass, href: to, children: children }));
+}
+export default NavLink;

package/dist/RouterContext.d.ts

@@ -0,0 +1,3 @@
+import type { RouterContextType } from "./types";
+declare const RouterContext: import("react").Context<RouterContextType | undefined>;
+export default RouterContext;

package/dist/RouterContext.js

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+const RouterContext = createContext(undefined);
+export default RouterContext;

package/dist/RouterProvider.d.ts

@@ -0,0 +1,5 @@
+import type { Route } from "./types";
+declare const RouterProvider: ({ routes }: {
+    routes: Route[];
+}) => import("react/jsx-runtime").JSX.Element;
+export default RouterProvider;

package/dist/RouterProvider.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import join from "url-join";
+import Page404 from "./pages/404";
+import RouterContext from "./RouterContext";
+const RouterProvider = ({ routes }) => {
+    const [path, setPath] = useState(window.location.pathname);
+    let fullPathWithParams = "";
+    const pathValidation = (fullPath, path) => {
+        const fakePathArr = path.split("/");
+        let fakePath = "/";
+        fullPath.split("/").forEach((e, index) => {
+            if (e.startsWith(":")) {
+                fakePathArr[index] = e;
+            }
+        });
+        fakePathArr.forEach((e) => {
+            fakePath = join(fakePath, `/${e}`);
+        });
+        if (fullPath === fakePath) {
+            fakePath = "";
+            return true;
+        }
+        fakePath = "";
+        return false;
+    };
+    const getComponent = (routes, currentPath, parentPath = "/") => {
+        let component = _jsx(Page404, {});
+        for (const route of routes) {
+            if (route.path === "/404" && route.component)
+                component = route.component;
+            const fullPath = join(parentPath, `/${route.path}`);
+            if (pathValidation(fullPath, currentPath)) {
+                fullPathWithParams = fullPath;
+                component = route.component;
+                break;
+            }
+            if (route.children) {
+                component = getComponent(route.children, currentPath, fullPath);
+            }
+        }
+        return component;
+    };
+    const component = getComponent(routes, path);
+    const navigate = (to, options) => {
+        if (options && options.replace) {
+            window.history.replaceState({}, "", to);
+        }
+        else {
+            window.history.pushState({}, "", to);
+        }
+        setPath(to);
+    };
+    useEffect(() => {
+        const handlePop = () => setPath(window.location.pathname);
+        window.addEventListener("popstate", handlePop);
+        return () => window.removeEventListener("popstate", handlePop);
+    }, []);
+    return (_jsx(RouterContext.Provider, { value: { path, fullPathWithParams, navigate }, children: component }));
+};
+export default RouterProvider;

package/dist/createRouter.d.ts

@@ -0,0 +1,3 @@
+import type { Route } from "./types";
+declare function createRouter(routes: Route[]): Route[];
+export default createRouter;

package/dist/createRouter.js

@@ -0,0 +1,20 @@
+// Normalize routes: remove leading slashes from paths and normalize children recursively
+function normalizeRoutes(routes) {
+    return routes.map((route) => {
+        const normalizedPath = route.path.startsWith("/")
+            ? route.path.replace(/^\/+/, "")
+            : route.path;
+        const normalized = {
+            ...route,
+            path: normalizedPath,
+        };
+        if (route.children) {
+            normalized.children = normalizeRoutes(route.children);
+        }
+        return normalized;
+    });
+}
+function createRouter(routes) {
+    return normalizeRoutes(routes);
+}
+export default createRouter;

package/dist/hook.d.ts

@@ -0,0 +1,6 @@
+export declare const useParams: () => {
+    [key: string]: string;
+};
+export declare const useQuery: () => {
+    [key: string]: string;
+};

package/dist/hook.js

@@ -0,0 +1,27 @@
+import { useRouter } from "./useRouter";
+// Retourne un objet { [paramName]: value }
+export const useParams = () => {
+    const { path, fullPathWithParams } = useRouter();
+    const params = {};
+    const fullSegments = fullPathWithParams.split("/").filter(Boolean);
+    const pathSegments = path.split("/").filter(Boolean);
+    fullSegments.forEach((seg, idx) => {
+        var _a;
+        if (seg.startsWith(":")) {
+            const name = seg.slice(1);
+            params[name] = (_a = pathSegments[idx]) !== null && _a !== void 0 ? _a : "";
+        }
+    });
+    return params;
+};
+// Parse la query string proprement (ex: ?a=1&b=2)
+export const useQuery = () => {
+    const query = {};
+    if (typeof window === "undefined")
+        return query;
+    const usp = new URLSearchParams(window.location.search);
+    usp.forEach((value, key) => {
+        query[key] = value;
+    });
+    return query;
+};

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { default as createRouter } from "./createRouter";
+export { useParams, useQuery } from "./hook";
+export { default as Link } from "./Link";
+export { default as NavLink } from "./NavLink";
+export { default as RouterProvider } from "./RouterProvider";

package/dist/index.js

@@ -0,0 +1,5 @@
+export { default as createRouter } from "./createRouter";
+export { useParams, useQuery } from "./hook";
+export { default as Link } from "./Link";
+export { default as NavLink } from "./NavLink";
+export { default as RouterProvider } from "./RouterProvider";

package/dist/pages/404/index.d.ts

@@ -0,0 +1,3 @@
+import "./styles.css";
+declare const Page404: () => import("react/jsx-runtime").JSX.Element;
+export default Page404;

package/dist/pages/404/index.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRouter } from "../../useRouter";
+import "./styles.css";
+const Page404 = () => {
+    const { navigate } = useRouter();
+    return (_jsx("div", { className: "error-page", children: _jsxs("div", { className: "error-container", children: [_jsx("h1", { className: "error-title", children: "404" }), _jsx("h2", { className: "error-subtitle", children: "Page Not Found" }), _jsx("p", { className: "error-message", children: "Sorry, the page you are looking for does not exist or has been moved." }), _jsx("button", { onClick: () => {
+                        navigate("/");
+                    }, className: "error-button", children: "Go Back Home" })] }) }));
+};
+export default Page404;

package/dist/useRouter.d.ts

@@ -0,0 +1 @@
+export declare function useRouter(): import("./types").RouterContextType;

package/dist/useRouter.js

@@ -0,0 +1,8 @@
+import { useContext } from "react";
+import RouterContext from "./RouterContext";
+export function useRouter() {
+    const ctx = useContext(RouterContext);
+    if (!ctx)
+        throw new Error("useRouter must be used within a RouterProvider");
+    return ctx;
+}

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "router-kit",
+  "author": {
+    "name": "Mohammed Ben Cheikh",
+    "email": "mohammed.bencheikh.dev@gmail.com",
+    "url": "https://mohammedbencheikh.com/"
+  },
+  "version": "0.1.1",
+  "description": "A small React routing provider library",
+  "main": "dist/index.js",
+  "types": "dist/*.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "clean": "rm -rf dist",
+    "build": "tsc -p tsconfig.json",
+    "build:watch": "tsc -p tsconfig.json --watch",
+    "prepare": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=17 <19",
+    "react-dom": ">=17 <19"
+  },
+  "dependencies": {
+    "url-join": "^5.0.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.2.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@types/url-join": "^4.0.3"
+  },
+  "keywords": [
+    "react",
+    "route",
+    "provider",
+    "routing",
+    "route-provider"
+  ],
+  "license": "MIT"
+}