preact-hashish-router 0.0.13 → 0.0.15

package/README.md

@@ -26,6 +26,7 @@ import { ErrorRoute, Route, Router, RouterErrorBoundary } from "preact-hashish-r
 import _404 from "./routes/404";
 import AboutPage from "./routes/About";
 import HomePage from "./routes/Home";
+import ProductPage from "./routes/Product";
 
 export default function App() {
   return (
@@ -39,6 +40,10 @@ export default function App() {
           <AboutPage />
         </Route>
 
+        <Route path="/product/:id">
+          <ProductPage />
+        </Route>
+
         <ErrorRoute>
           <_404 />
         </ErrorRoute>

package/dist/Route.js

@@ -1,18 +1,29 @@
 import { jsx as _jsx } from "preact/jsx-runtime";
-import { Suspense } from "preact/compat";
+import { Suspense, useLayoutEffect, useState } from "preact/compat";
+import { matchRoute } from "./match";
 import { useRouter } from "./useRouter";
 export function Route(props) {
     const router = useRouter();
-    if (props.exact === undefined) {
-        props.exact = true;
-    }
-    if (props.exact && router.path !== props.path) {
-        return null;
-    }
-    else if (!router.path.includes(props.path)) {
+    const [render, setRender] = useState(false);
+    useLayoutEffect(() => {
+        setRender(false);
+        if (props.exact === undefined) {
+            props.exact = false;
+        }
+        if (props.exact === true && router.path !== props.path) {
+            return;
+        }
+        const matches = matchRoute(router.path || "/", props.path);
+        if (props.exact === false && matches === undefined) {
+            return;
+        }
+        router.setParams(matches.params);
+        router.setRest(matches.rest);
+        router.setItMatch(true);
+        setRender(true);
+    }, [router.path]);
+    if (!render)
         return null;
-    }
-    router.setItMatch(true);
     if (props.lazy) {
         return _jsx(Suspense, { fallback: props.fallback ?? _jsx("div", { children: "Loading..." }), children: props.children });
     }

package/dist/Router.js

@@ -1,10 +1,12 @@
 import { jsx as _jsx } from "preact/jsx-runtime";
-import { useEffect, useMemo, useState } from "preact/hooks";
+import { useLayoutEffect, useMemo, useState } from "preact/hooks";
 import { router_context } from "./context";
 const get_hash_route = () => location.hash.slice(1) || "/";
 export const Router = (props) => {
     const [path, setPath] = useState();
     const [query, setQuery] = useState("");
+    const [params, setParams] = useState({});
+    const [rest, setRest] = useState("");
     const [itMatch, setItMatch] = useState(false);
     const router_type = useMemo(() => {
         return props.type;
@@ -35,10 +37,10 @@ export const Router = (props) => {
             window.addEventListener("popstate", browserEffectHandler.listener);
         },
         cleanUp: () => {
-            window.removeEventListener("hashchange", browserEffectHandler.listener);
+            window.removeEventListener("popstate", browserEffectHandler.listener);
         },
     };
-    useEffect(() => {
+    useLayoutEffect(() => {
         if (router_type !== "hash")
             return;
         const [path, query] = get_hash_route().split("?");
@@ -53,7 +55,7 @@ export const Router = (props) => {
         hashEffectHandler.effect();
         return () => hashEffectHandler.cleanUp();
     }, []);
-    useEffect(() => {
+    useLayoutEffect(() => {
         if (router_type !== "browser")
             return;
         setPath(location.pathname);
@@ -62,6 +64,8 @@ export const Router = (props) => {
         return () => browserEffectHandler.cleanUp();
     }, []);
     const handlerManualRouteChange = (newPath) => {
+        if (path === newPath)
+            return;
         setPath(newPath);
         setItMatch(false);
         if (router_type === "hash") {
@@ -74,7 +78,18 @@ export const Router = (props) => {
         }
     };
     const ProviderValue = useMemo(() => {
-        return { path, go: handlerManualRouteChange, itMatch, setItMatch, type: router_type, query };
+        return {
+            path,
+            go: handlerManualRouteChange,
+            itMatch,
+            setItMatch,
+            type: router_type,
+            query,
+            params,
+            rest,
+            setParams,
+            setRest,
+        };
     }, [path, handlerManualRouteChange, itMatch, setItMatch, router_type]);
     return _jsx(router_context.Provider, { value: ProviderValue, children: props.children });
 };

package/dist/context.d.ts

@@ -1,3 +1,4 @@
+import { Matches } from "./match";
 export type RouterContext = {
     path: string;
     query: string;
@@ -5,5 +6,9 @@ export type RouterContext = {
     itMatch: boolean;
     setItMatch: (r: boolean) => void;
     type: "hash" | "browser";
+    params: Matches["params"];
+    setParams: (p: Matches["params"]) => void;
+    rest: Matches["rest"];
+    setRest: (r: Matches["rest"]) => void;
 };
 export declare const router_context: import("preact").Context<RouterContext>;

package/dist/match.d.ts

@@ -0,0 +1,12 @@
+export type Matches = {
+    params: Record<string, string>;
+    rest?: string;
+};
+/**
+ * Compara una URL contra un patrón definido y extrae parámetros.
+ * @param url - La URL a analizar (ejemplo: "/user/12345").
+ * @param route - El patrón de URL (ejemplo: "/user/:id").
+ * @param matches - Objeto opcional para acumular coincidencias, inicializado por defecto.
+ * @returns Un objeto Matches si la URL coincide con el patrón; de lo contrario, undefined.
+ */
+export declare const matchRoute: (url: string, route: string, matches?: Matches) => Matches | undefined;

package/dist/match.js

@@ -0,0 +1,44 @@
+/**
+ * Compara una URL contra un patrón definido y extrae parámetros.
+ * @param url - La URL a analizar (ejemplo: "/user/12345").
+ * @param route - El patrón de URL (ejemplo: "/user/:id").
+ * @param matches - Objeto opcional para acumular coincidencias, inicializado por defecto.
+ * @returns Un objeto Matches si la URL coincide con el patrón; de lo contrario, undefined.
+ */
+export const matchRoute = (url, route, matches = { params: {} }) => {
+    // Separa la URL y el patrón en segmentos, eliminando elementos vacíos para facilitar la comparación.
+    const urlSegments = url.split("/").filter(Boolean);
+    const routeSegments = route.split("/").filter(Boolean);
+    // Se itera hasta el máximo número de segmentos entre la URL y el patrón para cubrir ambos casos.
+    for (let i = 0; i < Math.max(urlSegments.length, routeSegments.length); i++) {
+        // Extrae y desestructura el segmento actual del patrón:
+        // - isParam: indica si el segmento es un parámetro (comienza con ":").
+        // - paramName: nombre del parámetro o valor literal.
+        // - modifier: puede ser '+', '*' o '?' para modificar el comportamiento de captura.
+        const [, isParam, paramName, modifier] = (routeSegments[i] || "").match(/^(:)?(.*?)([+*?]?)$/) || [];
+        // Si el segmento del patrón no es un parámetro y coincide exactamente con el de la URL, continúa.
+        if (!isParam && paramName === urlSegments[i])
+            continue;
+        // Si no es parámetro y el modificador es '*' se captura el resto de la URL.
+        if (!isParam && modifier === "*") {
+            matches.rest = `/${urlSegments.slice(i).map(decodeURIComponent).join("/")}`;
+            break;
+        }
+        // Valida que el segmento sea un parámetro y que, si es obligatorio, exista en la URL.
+        if (!isParam || (!urlSegments[i] && modifier !== "?" && modifier !== "*"))
+            return;
+        // Determina si el modificador indica la captura del resto de la URL ('+' o '*').
+        const isRest = modifier === "+" || modifier === "*";
+        // Asigna el valor del parámetro:
+        // - Si es una captura 'rest', se unen todos los segmentos restantes.
+        // - De lo contrario, se decodifica el segmento individual.
+        matches.params[paramName] = isRest
+            ? urlSegments.slice(i).map(decodeURIComponent).join("/")
+            : decodeURIComponent(urlSegments[i]);
+        // Si se capturaron múltiples segmentos (caso de 'rest'), se interrumpe la iteración.
+        if (isRest)
+            break;
+    }
+    // Retorna el objeto con los parámetros y/o resto capturados.
+    return matches;
+};

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "preact-hashish-router",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "type": "module",
   "module": "dist/index.js",
   "description": "A simple router for preact",
   "scripts": {
     "build": "tsc -p ./tsconfig.lib.json",
-    "format": "prettier --write src --ignore-unknown",
+    "format": "prettier --write src app --ignore-unknown",
     "app:dev": "vite",
     "prepublishOnly": "npm run build && npm run format",
     "push": "npm version patch && git push",
@@ -39,7 +39,6 @@
   "devDependencies": {
     "@preact/preset-vite": "^2.10.1",
     "@types/node": "^22.13.4",
-    "preact-hashish-router": "^0.0.6",
     "prettier": "^3.5.1",
     "prettier-plugin-organize-imports": "^4.1.0",
     "typescript": "^5.7.3",