preact-hashish-router 0.0.8 → 0.0.10

package/README.md

@@ -1 +1,93 @@
-# Preact Hashish Router
+# Preact Hashish Router
+
+## Features
+
+- `hash` and `browser` routing types.
+- Support for lazy-loaded routes (`lazy` loading).
+- Error handling integration with `ErrorRoute`.
+- Fully typed.
+- Ultra lightweight.
+- No external dependencies.
+
+## Installation
+
+```bash
+npm install preact-hashish-router@latest
+```
+
+## Usage
+
+### Context Setup
+
+First, ensure your application is wrapped within the router context. This will allow you to access routes and related functions.
+
+```tsx
+import { ErrorRoute, Route, Router, RouterErrorBoundary } from "preact-hashish-router";
+import _404 from "./routes/404";
+import AboutPage from "./routes/About";
+import HomePage from "./routes/Home";
+
+export default function App() {
+  return (
+    <Router type="hash">
+      <RouterErrorBoundary>
+        <Route path="/">
+          <HomePage />
+        </Route>
+
+        <Route path="/about">
+          <AboutPage />
+        </Route>
+
+        <ErrorRoute>
+          <_404 />
+        </ErrorRoute>
+      </RouterErrorBoundary>
+    </Router>
+  );
+}
+```
+
+### Using the `useRouter` Hook
+
+The `useRouter` hook gives you access to the router context to programmatically navigate or retrieve information about the current route.
+
+```tsx
+import { useRouter } from "preact-hashish-router";
+
+function HomePage() {
+  const router = useRouter();
+
+  function goToAbout() {
+    router.go("/about");
+  }
+
+  return (
+    <div>
+      <h1>Home Page</h1>
+      <button onClick={goToAbout}>Go to About</button>
+    </div>
+  );
+}
+```
+
+### `<A />` Component for Navigation
+
+```tsx
+import { A } from "preact-hashish-router";
+
+export default function Header() {
+  return (
+    <header>
+      <nav>
+        <A href="/">Home</A>
+        <A href="/about">About</A>
+      </nav>
+    </header>
+  );
+}
+```
+
+## Development
+
+If you have any improvements or find any issues, feel free to contribute or open an issue in the associated repository.

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.8",
+  "version": "0.0.10",
   "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",