preact-hashish-router 0.0.1

package/README.md

@@ -0,0 +1 @@
+# Preact Simple Router

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "preact-hashish-router",
+  "version": "0.0.1",
+  "type": "module",
+  "description": "A simple router for preact",
+  "scripts": {
+    "build": "tsc -p ./tsconfig.json",
+    "format": "prettier --write src --ignore-unknown"
+  },
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "peerDependencies": {
+    "preact": ">=10"
+  },
+  "keywords": [
+    "preact",
+    "router",
+    "simple",
+    "routing",
+    "browser",
+    "hash"
+  ],
+  "target": "es2020",
+  "author": "LiasCode",
+  "devDependencies": {
+    "@preact/preset-vite": "^2.10.1",
+    "prettier": "^3.4.2",
+    "prettier-plugin-organize-imports": "^4.1.0",
+    "typescript": "^5.7.3",
+    "vite": "^6.1.0"
+  },
+  "files": [
+    "src",
+    "LICENSE",
+    "package.json",
+    "README.md"
+  ]
+}

package/src/A.tsx

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

@@ -0,0 +1,18 @@
+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 className="flex flex-row w-full items-center justify-center h-fit">Loading...</div>}>
+        {props.children}
+      </Suspense>
+    );
+  }
+
+  return props.children;
+}

package/src/Route.tsx

@@ -0,0 +1,35 @@
+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 className="flex flex-row w-full items-center justify-center h-fit">Loading...</div>
+        }
+      >
+        {props.children}
+      </Suspense>
+    );
+  }
+
+  return props.children;
+}

package/src/Router.tsx

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

@@ -0,0 +1,28 @@
+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 className="flex flex-row justify-center items-center w-full h-fit text-red-500 font-bold text-pretty">
+          Oh no! We ran into an error: {this.state.error}
+        </p>
+      );
+    }
+    return this.props.children;
+  }
+}

package/src/context.tsx

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

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

package/src/useRouter.tsx

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