preact-hashish-router 0.0.15 → 0.0.16

package/dist/A.js

@@ -1,16 +1,14 @@
 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();
         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);

package/dist/Router.js

@@ -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,7 +1,7 @@
 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;

package/dist/context.d.ts

@@ -1,11 +1,11 @@
 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"];

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.16",
   "type": "module",
   "module": "dist/index.js",
   "description": "A simple router for preact",