preact-hashish-router 0.0.7 → 0.0.9

package/dist/Router.js

@@ -3,7 +3,7 @@ import { useEffect, 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(get_hash_route());
+    const [path, setPath] = useState();
     const [query, setQuery] = useState("");
     const [itMatch, setItMatch] = useState(false);
     const router_type = useMemo(() => {
@@ -44,6 +44,10 @@ export const Router = (props) => {
         const [path, query] = get_hash_route().split("?");
         setQuery(query || "");
         setPath(path);
+        if (location.pathname !== "/") {
+            location.hash = location.pathname;
+            location.pathname = "";
+        }
         hashEffectHandler.effect();
         return () => hashEffectHandler.cleanUp();
     }, []);
@@ -55,15 +59,15 @@ export const Router = (props) => {
         browserEffectHandler.effect();
         return () => browserEffectHandler.cleanUp();
     }, []);
-    const handlerManualRouteChange = (r) => {
-        setPath(r);
+    const handlerManualRouteChange = (newPath) => {
+        setPath(newPath);
         setItMatch(false);
         if (router_type === "hash") {
-            location.hash = r;
+            location.hash = newPath;
             return;
         }
         if (router_type === "browser") {
-            history.pushState(null, "", new URL(r, location.origin));
+            history.pushState(null, "", new URL(newPath, location.origin));
             return;
         }
     };

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "preact-hashish-router",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "type": "module",
   "module": "dist/index.js",
   "description": "A simple router for preact",
   "scripts": {
-    "build": "tsc -p ./tsconfig.json",
+    "build": "tsc -p ./tsconfig.lib.json",
     "format": "prettier --write src --ignore-unknown",
+    "app:dev": "vite",
     "prepublishOnly": "npm run build && npm run format",
     "push": "npm version patch && git push",
     "push-minor": "npm version minor && git push",
@@ -30,6 +31,7 @@
   "author": "LiasCode",
   "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",
@@ -37,7 +39,6 @@
     "vite": "^6.1.0"
   },
   "files": [
-    "src",
     "dist",
     "LICENSE",
     "package.json",

package/src/A.tsx

@@ -1,32 +0,0 @@
-import { AnchorHTMLAttributes, forwardRef, MouseEventHandler, PropsWithChildren } from "preact/compat";
-import { useCallback, useMemo } from "preact/hooks";
-import { useRouter } from "./useRouter";
-
-export type AProps = PropsWithChildren & AnchorHTMLAttributes;
-
-export const A = forwardRef<HTMLAnchorElement, AProps>(({ href, className, ...props }) => {
-  const router = useRouter();
-
-  const isActive = useMemo(() => {
-    return router.path === href;
-  }, [router.path, href]);
-
-  const browserRouterClickAnchorHandler: MouseEventHandler<HTMLAnchorElement> = useCallback(
-    (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      router.go(href.toString());
-    },
-    [router.type]
-  );
-
-  return (
-    <a
-      href={router.type === "browser" ? href : `#${href}`}
-      className={className}
-      data-route-active={isActive}
-      {...props}
-      onClick={router.type === "browser" ? browserRouterClickAnchorHandler : undefined}
-    />
-  );
-});

package/src/ErrorRoute.tsx

@@ -1,14 +0,0 @@
-import { PropsWithChildren, Suspense } from "preact/compat";
-import { useRouter } from "./useRouter";
-
-export function ErrorRoute(props: PropsWithChildren<{ lazy?: boolean }>) {
-  const router = useRouter();
-
-  if (router.itMatch) return null;
-
-  if (props.lazy) {
-    return <Suspense fallback={<div>Loading...</div>}>{props.children}</Suspense>;
-  }
-
-  return props.children;
-}

package/src/Route.tsx

@@ -1,27 +0,0 @@
-import { VNode } from "preact";
-import { PropsWithChildren, Suspense } from "preact/compat";
-import { useRouter } from "./useRouter";
-
-type RouteProps = PropsWithChildren & { path: string; exact?: boolean; lazy?: boolean; fallback?: VNode };
-
-export function Route(props: RouteProps) {
-  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)) {
-    return null;
-  }
-
-  router.setItMatch(true);
-
-  if (props.lazy) {
-    return <Suspense fallback={props.fallback ?? <div>Loading...</div>}>{props.children}</Suspense>;
-  }
-
-  return props.children;
-}

package/src/Router.tsx

@@ -1,86 +0,0 @@
-import { PropsWithChildren } from "preact/compat";
-import { useEffect, useMemo, useState } from "preact/hooks";
-import { RouterContext, router_context } from "./context";
-
-const get_hash_route = () => location.hash.slice(1) || "/";
-
-type RouterProps = PropsWithChildren & {
-  type: RouterContext["type"];
-};
-
-export const Router = (props: RouterProps) => {
-  const [path, setPath] = useState(get_hash_route());
-  const [query, setQuery] = useState("");
-  const [itMatch, setItMatch] = useState(false);
-
-  const router_type = useMemo(() => {
-    return props.type;
-  }, [props.type]);
-
-  const hashEffectHandler = {
-    listener: () => {
-      const [path, query] = get_hash_route().split("?");
-      setQuery(query || "");
-      setPath(path);
-      setItMatch(false);
-    },
-    effect: () => {
-      if (location.hash === "") location.hash = "/";
-      window.addEventListener("hashchange", hashEffectHandler.listener);
-    },
-    cleanUp: () => {
-      window.removeEventListener("hashchange", hashEffectHandler.listener);
-    },
-  };
-
-  const browserEffectHandler = {
-    listener: () => {
-      setPath(location.pathname);
-      setQuery(location.search || "");
-      setItMatch(false);
-    },
-    effect: () => {
-      window.addEventListener("popstate", browserEffectHandler.listener);
-    },
-    cleanUp: () => {
-      window.removeEventListener("hashchange", browserEffectHandler.listener);
-    },
-  };
-
-  useEffect(() => {
-    if (router_type !== "hash") return;
-    const [path, query] = get_hash_route().split("?");
-    setQuery(query || "");
-    setPath(path);
-
-    hashEffectHandler.effect();
-    return () => hashEffectHandler.cleanUp();
-  }, []);
-
-  useEffect(() => {
-    if (router_type !== "browser") return;
-    setPath(location.pathname);
-    setQuery(location.search || "");
-    browserEffectHandler.effect();
-    return () => browserEffectHandler.cleanUp();
-  }, []);
-
-  const handlerManualRouteChange = (r: string) => {
-    setPath(r);
-    setItMatch(false);
-    if (router_type === "hash") {
-      location.hash = r;
-      return;
-    }
-    if (router_type === "browser") {
-      history.pushState(null, "", new URL(r, location.origin));
-      return;
-    }
-  };
-
-  const ProviderValue: RouterContext = useMemo(() => {
-    return { path, go: handlerManualRouteChange, itMatch, setItMatch, type: router_type, query };
-  }, [path, handlerManualRouteChange, itMatch, setItMatch, router_type]);
-
-  return <router_context.Provider value={ProviderValue}>{props.children}</router_context.Provider>;
-};

package/src/RouterErrorBoundary.tsx

@@ -1,24 +0,0 @@
-import { Component, VNode } from "preact";
-import { PropsWithChildren } from "preact/compat";
-
-export class RouterErrorBoundary extends Component<PropsWithChildren & { fallback?: VNode }> {
-  state = { error: null };
-
-  static getDerivedStateFromError(error: any) {
-    return { error: error.message };
-  }
-
-  componentDidCatch(error: any) {
-    console.error(error);
-    this.setState({ error: error.message });
-  }
-
-  render() {
-    if (this.state.error) {
-      if (this.props.fallback) return this.props.fallback;
-
-      return <p>Oh no! We ran into an error: {this.state.error}</p>;
-    }
-    return this.props.children;
-  }
-}

package/src/context.tsx

@@ -1,12 +0,0 @@
-import { createContext } from "preact";
-
-export type RouterContext = {
-  path: string;
-  query: string;
-  go: (r: string) => void;
-  itMatch: boolean;
-  setItMatch: (r: boolean) => void;
-  type: "hash" | "browser";
-};
-
-export const router_context = createContext<RouterContext>(null);

package/src/index.ts

@@ -1,6 +0,0 @@
-export * from "./A";
-export * from "./ErrorRoute";
-export * from "./Route";
-export * from "./Router";
-export * from "./RouterErrorBoundary";
-export * from "./useRouter";

package/src/useRouter.tsx

@@ -1,12 +0,0 @@
-import { useContext } from "preact/hooks";
-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");
-  }
-
-  return context;
-}