router-kit 0.2.5 → 1.0.2

package/README.md

@@ -41,6 +41,16 @@ npm install router-kit
 
 N.B. `react` et `react-dom` sont des peerDependencies ; installez-les dans votre projet si nécessaire.
 
+## Important
+
+⚠️ Tous les hooks et composants de router-kit doivent être utilisés à l'intérieur du `RouterProvider`. Assurez-vous de wrapper votre application avec le `RouterProvider` au plus haut niveau possible.
+
+Si vous utilisez des composants ou hooks en dehors du `RouterProvider`, vous obtiendrez une erreur explicite :
+
+```
+RouterKit: Common hooks and components must be used within the RouterProvider returned by createRouter(). Wrap your app with the RouterProvider.
+```
+
 ## Concepts clés
 
 - Route : objet avec `path` (string) et `component` (JSX.Element). Les `children` sont supportés pour construire des arborescences.
@@ -112,33 +122,29 @@ Exemple :
 - `useRouter()` : hook interne retournant le contexte `{ path, fullPathWithParams, navigate }`. Lance une erreur si utilisé hors du provider.
 - `useParams()` : renvoie un objet clé/valeur pour les segments paramétrés de la route (ex: `{ id: "42" }`). Se base sur `fullPathWithParams` et `path`.
 - `useQuery()` : parse `window.location.search` et renvoie un objet `{ [key]: value }`.
+- `useLocation()` : renvoie un objet avec les informations de localisation courante : `{ pathname, search, hash, state }`. Utile pour accéder aux détails de l'URL actuelle.
 
 ## Exemple complet
 
 ```tsx
 import React from "react";
-import { createRouter, RouterProvider, Link } from "router-kit";
+import { createRouter, RouterProvider } from "router-kit";
 
-const Home = <div>Accueil</div>;
-const About = <div>À propos</div>;
+const Home = () => <div>Accueil</div>;
+const About = () => <div>À propos</div>;
 
 const routes = createRouter([
-  { path: "/", component: Home },
-  { path: "about", component: About },
+  { path: "/", component: <Home /> },
+  { path: "about", component: <About /> },
   { path: "/404", component: <div>Not Found</div> },
 ]);
 
-export default function App() {
-  return (
-    <div>
-      <nav>
-        <Link to="/">Home</Link>
-        <Link to="/about">About</Link>
-      </nav>
-      <RouterProvider routes={routes} />
-    </div>
-  );
+// Les composants de navigation doivent être à l'intérieur du RouterProvider
+function App() {
+  return <RouterProvider routes={routes} />;
 }
+
+export default App;
 ```
 
 ## Routes et 404

package/dist/context/RouterProvider.js

@@ -3,10 +3,33 @@ import { useEffect, useState } from "react";
 import join from "url-join";
 import Page404 from "../pages/404";
 import RouterContext from "./RouterContext";
+const validateUrl = (url) => {
+    try {
+        new URL(url, window.location.origin);
+        return true;
+    }
+    catch {
+        return false;
+    }
+};
 const RouterProvider = ({ routes }) => {
-    const [path, setPath] = useState(window.location.pathname);
-    let fullPathWithParams = "";
+    const [path, setPath] = useState("");
+    const [fullPathWithParams, setFullPathWithParams] = useState("");
     let page404 = null;
+    useEffect(() => {
+        setPath(window.location.pathname);
+        const handleLocationChange = () => {
+            setPath(window.location.pathname);
+        };
+        window.addEventListener("popstate", handleLocationChange);
+        window.addEventListener("pushState", handleLocationChange);
+        window.addEventListener("replaceState", handleLocationChange);
+        return () => {
+            window.removeEventListener("popstate", handleLocationChange);
+            window.removeEventListener("pushState", handleLocationChange);
+            window.removeEventListener("replaceState", handleLocationChange);
+        };
+    }, []);
     const pathValidation = (routeFullPath, currentPath) => {
         const routePaths = routeFullPath.split("|");
         for (const routePath of routePaths) {
@@ -39,7 +62,9 @@ const RouterProvider = ({ routes }) => {
             }
             const fullPath = join(parentPath, `/${route.path}`);
             if (pathValidation(fullPath, currentPath)) {
-                fullPathWithParams = fullPath;
+                if (fullPath !== fullPathWithParams) {
+                    setFullPathWithParams(fullPath);
+                }
                 return route.component;
             }
             if (route.children) {
@@ -50,23 +75,26 @@ const RouterProvider = ({ routes }) => {
         }
         return null;
     };
-    fullPathWithParams = "";
-    const matchedComponent = getComponent(routes, path);
-    const component = matchedComponent !== null && matchedComponent !== void 0 ? matchedComponent : (page404 || _jsx(Page404, {}));
     const navigate = (to, options) => {
-        if (options === null || options === void 0 ? void 0 : options.replace) {
-            window.history.replaceState({}, "", to);
+        if (!validateUrl(to)) {
+            console.error(`RouterKit: Invalid URL "${to}"`);
+            return;
         }
-        else {
-            window.history.pushState({}, "", to);
+        try {
+            if (options === null || options === void 0 ? void 0 : options.replace) {
+                window.history.replaceState((options === null || options === void 0 ? void 0 : options.state) || {}, "", to);
+            }
+            else {
+                window.history.pushState((options === null || options === void 0 ? void 0 : options.state) || {}, "", to);
+            }
+            setPath(to);
+        }
+        catch (error) {
+            console.error("RouterKit: Navigation failed", error);
         }
-        setPath(to);
     };
-    useEffect(() => {
-        const handlePop = () => setPath(window.location.pathname);
-        window.addEventListener("popstate", handlePop);
-        return () => window.removeEventListener("popstate", handlePop);
-    }, []);
+    const matchedComponent = getComponent(routes, path);
+    const component = matchedComponent !== null && matchedComponent !== void 0 ? matchedComponent : (page404 || _jsx(Page404, {}));
     return (_jsx(RouterContext.Provider, { value: { path, fullPathWithParams, navigate }, children: component }));
 };
 export default RouterProvider;

package/dist/hooks/useLocation.d.ts

@@ -0,0 +1,2 @@
+import type { Location } from "../types";
+export declare function useLocation(): Location;

package/dist/hooks/useLocation.js

@@ -0,0 +1,16 @@
+export function useLocation() {
+    if (typeof window === "undefined") {
+        return {
+            pathname: "",
+            search: "",
+            hash: "",
+            state: null,
+        };
+    }
+    return {
+        pathname: window.location.pathname,
+        search: window.location.search,
+        hash: window.location.hash,
+        state: window.history.state,
+    };
+}

package/dist/hooks/{hook.d.ts → useParams.d.ts}

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

package/dist/hooks/{hook.js → useParams.js}

@@ -1,5 +1,4 @@
 import { useRouter } from "./useRouter";
-// Retourne un objet { [paramName]: value }
 export const useParams = () => {
     const { path, fullPathWithParams } = useRouter();
     const params = {};
@@ -14,14 +13,3 @@ export const useParams = () => {
     });
     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/hooks/useQuery.d.ts

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

package/dist/hooks/useQuery.js

@@ -0,0 +1,10 @@
+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/hooks/useRouter.js

@@ -27,14 +27,10 @@ import RouterContext from "../context/RouterContext";
 export function useRouter() {
     const ctx = useContext(RouterContext);
     if (!ctx) {
-        const message = "Common hooks and components must be used within the RouterProvider returned by createRouter(). Wrap your app with the RouterProvider.";
-        if (typeof window !== "undefined" && window.console && console.error) {
-            console.error("%cRouterKit%c " + message, "color: #fff; background: #d9534f; font-weight: 700; padding: 2px 6px; border-radius: 3px;", "color: #d9534f;");
+        if (typeof window === "undefined") {
+            throw new Error("RouterKit: useRouter cannot be used during server side rendering");
         }
-        else {
-            console.error("RouterKit: " + message);
-        }
-        throw new Error("RouterKit: " + message);
+        throw new Error("RouterKit: useRouter must be used within RouterProvider");
     }
     return ctx;
 }

package/dist/index.d.ts

@@ -2,4 +2,6 @@ export { default as Link } from "./components/Link";
 export { default as NavLink } from "./components/NavLink";
 export { default as RouterProvider } from "./context/RouterProvider";
 export { default as createRouter } from "./core/createRouter";
-export { useParams, useQuery } from "./hooks/hook";
+export { useLocation } from "./hooks/useLocation";
+export { useParams } from "./hooks/useParams";
+export { useQuery } from "./hooks/useQuery";

package/dist/index.js

@@ -2,4 +2,6 @@ export { default as Link } from "./components/Link";
 export { default as NavLink } from "./components/NavLink";
 export { default as RouterProvider } from "./context/RouterProvider";
 export { default as createRouter } from "./core/createRouter";
-export { useParams, useQuery } from "./hooks/hook";
+export { useLocation } from "./hooks/useLocation";
+export { useParams } from "./hooks/useParams";
+export { useQuery } from "./hooks/useQuery";

package/package.json

@@ -5,7 +5,7 @@
     "email": "mohammed.bencheikh.dev@gmail.com",
     "url": "https://mohammedbencheikh.com/"
   },
-  "version": "0.2.5",
+  "version": "1.0.2",
   "description": "A small React routing provider library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",