preact-hashish-router 0.0.15 → 0.0.17

package/README.md

@@ -30,7 +30,7 @@ import ProductPage from "./routes/Product";
 
 export default function App() {
   return (
-    <Router type="hash">
+    <Router type="hash"> {/* <-- or browser */}
       <RouterErrorBoundary>
         <Route path="/">
           <HomePage />

package/dist/A.d.ts

@@ -1,5 +1,5 @@
 import { AnchorHTMLAttributes, PropsWithChildren } from "preact/compat";
 export type AProps = PropsWithChildren & AnchorHTMLAttributes;
 export declare const A: import("preact").FunctionalComponent<import("preact/compat").PropsWithoutRef<AProps> & {
-    ref?: import("preact").Ref<HTMLAnchorElement>;
+    ref?: import("preact").Ref<HTMLAnchorElement> | undefined;
 }>;

package/dist/A.js

@@ -1,16 +1,16 @@
 import { jsx as _jsx } from "preact/jsx-runtime";
 import { forwardRef } from "preact/compat";
-import { useCallback, useMemo } from "preact/hooks";
-import { useRouter } from "./useRouter";
+import { useMemo } from "preact/hooks";
+import { useInternalRouter } from "./useInternalRouter";
 export const A = forwardRef(({ href, className, ...props }) => {
-    const router = useRouter();
-    const isActive = useMemo(() => {
-        return router.path === href;
-    }, [router.path, href]);
-    const browserRouterClickAnchorHandler = useCallback((e) => {
+    const router = useInternalRouter();
+    const isActive = useMemo(() => router.path === href?.split("?")[0], [router.path, href]);
+    const browserRouterClickAnchorHandler = (e) => {
         e.preventDefault();
         e.stopPropagation();
+        if (!href)
+            return;
         router.go(href.toString());
-    }, [router.type]);
+    };
     return (_jsx("a", { href: router.type === "browser" ? href : `#${href}`, className: className, "data-route-active": isActive, ...props, onClick: router.type === "browser" ? browserRouterClickAnchorHandler : undefined }));
 });

package/dist/ErrorRoute.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "preact/jsx-runtime";
 import { Suspense } from "preact/compat";
-import { useRouter } from "./useRouter";
+import { useInternalRouter } from "./useInternalRouter";
 export function ErrorRoute(props) {
-    const router = useRouter();
+    const router = useInternalRouter();
     if (router.itMatch)
         return null;
     if (props.lazy) {

package/dist/Redirect.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "preact/jsx-runtime";
 import { Fragment, useLayoutEffect } from "preact/compat";
-import { useRouter } from "./useRouter";
+import { useInternalRouter } from "./useInternalRouter";
 export const Redirect = (props) => {
-    const router = useRouter();
+    const router = useInternalRouter();
     useLayoutEffect(() => {
         router.go(props.to);
     }, []);

package/dist/Route.d.ts

@@ -1,10 +1,9 @@
 import { VNode } from "preact";
 import { PropsWithChildren } from "preact/compat";
-type RouteProps = PropsWithChildren & {
+export type RouteProps = PropsWithChildren & {
     path: string;
     exact?: boolean;
     lazy?: boolean;
     fallback?: VNode;
 };
 export declare function Route(props: RouteProps): import("preact").ComponentChildren;
-export {};

package/dist/Route.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "preact/jsx-runtime";
 import { Suspense, useLayoutEffect, useState } from "preact/compat";
 import { matchRoute } from "./match";
-import { useRouter } from "./useRouter";
+import { useInternalRouter } from "./useInternalRouter";
 export function Route(props) {
-    const router = useRouter();
+    const router = useInternalRouter();
     const [render, setRender] = useState(false);
     useLayoutEffect(() => {
         setRender(false);
@@ -17,8 +17,8 @@ export function Route(props) {
         if (props.exact === false && matches === undefined) {
             return;
         }
-        router.setParams(matches.params);
-        router.setRest(matches.rest);
+        router.setParams(matches?.params || {});
+        router.setRest(matches?.rest);
         router.setItMatch(true);
         setRender(true);
     }, [router.path]);

package/dist/Router.js

@@ -3,7 +3,7 @@ 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 [path, setPath] = useState("");
     const [query, setQuery] = useState("");
     const [params, setParams] = useState({});
     const [rest, setRest] = useState("");
@@ -13,14 +13,14 @@ export const Router = (props) => {
     }, [props.type]);
     const hashEffectHandler = {
         listener: () => {
-            const [path, query] = get_hash_route().split("?");
+            const [newPath, query] = get_hash_route().split("?");
             setQuery(query || "");
-            setPath(path);
-            setItMatch(false);
+            setPath(newPath);
+            if (newPath !== path) {
+                setItMatch(false);
+            }
         },
         effect: () => {
-            if (location.hash === "")
-                location.hash = "/";
             window.addEventListener("hashchange", hashEffectHandler.listener);
         },
         cleanUp: () => {
@@ -30,8 +30,10 @@ export const Router = (props) => {
     const browserEffectHandler = {
         listener: () => {
             setPath(location.pathname);
-            setQuery(location.search || "");
-            setItMatch(false);
+            setQuery(location.search.split("?")[1] || "");
+            if (path !== location.pathname) {
+                setItMatch(false);
+            }
         },
         effect: () => {
             window.addEventListener("popstate", browserEffectHandler.listener);
@@ -59,20 +61,24 @@ export const Router = (props) => {
         if (router_type !== "browser")
             return;
         setPath(location.pathname);
-        setQuery(location.search || "");
+        setQuery(location.search.split("?")[1] || "");
         browserEffectHandler.effect();
         return () => browserEffectHandler.cleanUp();
     }, []);
     const handlerManualRouteChange = (newPath) => {
-        if (path === newPath)
+        const [np, nq] = newPath.split("?");
+        if (path === np && query === nq)
             return;
-        setPath(newPath);
-        setItMatch(false);
         if (router_type === "hash") {
             location.hash = newPath;
             return;
         }
         if (router_type === "browser") {
+            setPath(np);
+            setQuery(nq || "");
+            if (path !== np) {
+                setItMatch(false);
+            }
             history.pushState(null, "", new URL(newPath, location.origin));
             return;
         }

package/dist/RouterErrorBoundary.d.ts

@@ -1,10 +1,10 @@
 import { Component, VNode } from "preact";
 import { PropsWithChildren } from "preact/compat";
 export declare class RouterErrorBoundary extends Component<PropsWithChildren & {
-    fallback?: VNode;
+    fallback?: VNode<any>;
 }> {
     state: {
-        error: any;
+        error: null;
     };
     static getDerivedStateFromError(error: any): {
         error: any;

package/dist/context.d.ts

@@ -1,14 +1,14 @@
 import { Matches } from "./match";
 export type RouterContext = {
+    type: "hash" | "browser";
     path: string;
     query: string;
     go: (r: string) => void;
     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>;
+export declare const router_context: import("preact").Context<RouterContext | null>;

package/dist/match.js

@@ -6,7 +6,6 @@
  * @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.
@@ -39,6 +38,5 @@ export const matchRoute = (url, route, matches = { params: {} }) => {
         if (isRest)
             break;
     }
-    // Retorna el objeto con los parámetros y/o resto capturados.
     return matches;
 };

package/dist/useInternalRouter .d.ts

@@ -0,0 +1 @@
+export declare function useInternalRouter(): import("./context").RouterContext;

package/dist/useInternalRouter .js

@@ -0,0 +1,9 @@
+import { useContext } from "preact/hooks";
+import { router_context } from "./context";
+export function useInternalRouter() {
+    const context = useContext(router_context);
+    if (!context) {
+        throw new Error("useInternalRouter should be used within a Router");
+    }
+    return context;
+}

package/dist/useInternalRouter.d.ts

@@ -0,0 +1 @@
+export declare function useInternalRouter(): import("./context").RouterContext;

package/dist/useInternalRouter.js

@@ -0,0 +1,9 @@
+import { useContext } from "preact/hooks";
+import { router_context } from "./context";
+export function useInternalRouter() {
+    const context = useContext(router_context);
+    if (!context) {
+        throw new Error("useInternalRouter should be used within a Router");
+    }
+    return context;
+}

package/dist/useRouter.d.ts

@@ -1 +1,3 @@
-export declare function useRouter(): import("./context").RouterContext;
+import { RouterContext } from "./context";
+export type PublicRouterContext = Pick<RouterContext, "go" | "path" | "params" | "rest" | "query">;
+export declare function useRouter(): PublicRouterContext;

package/dist/useRouter.js

@@ -3,7 +3,14 @@ import { router_context } from "./context";
 export function useRouter() {
     const context = useContext(router_context);
     if (!context) {
-        throw new Error("useRoute should be used within a Router");
+        throw new Error("useRouter should be used within a Router");
     }
-    return context;
+    const { go, path, params, rest, query } = context;
+    return {
+        go,
+        path,
+        params,
+        rest,
+        query,
+    };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "preact-hashish-router",
-  "version": "0.0.15",
+  "version": "0.0.17",
   "type": "module",
   "module": "dist/index.js",
   "description": "A simple router for preact",