olova-router 1.0.0 → 1.0.2

package/dist/olova-router.js

@@ -0,0 +1,51 @@
+import { State, Effect, Component, h, Memo } from "olova";
+
+const [currentRoute, setCurrentRoute] = State(window.location.pathname);
+
+function Router(props) {
+  Effect(() => {
+    const handlePopState = () => {
+      setCurrentRoute(window.location.pathname);
+    };
+
+    window.addEventListener("popstate", handlePopState);
+    return () => window.removeEventListener("popstate", handlePopState);
+  });
+
+  return h("div", { class: "router" }, props?.children);
+}
+
+function Route({ path, component: RouteComponent }) {
+  const matches = Memo(() => {
+    return currentRoute() === path;
+  });
+
+  const routeContent = document.createElement("div");
+
+  Effect(() => {
+    if (matches()) {
+      routeContent.innerHTML = "";
+      routeContent.appendChild(h(RouteComponent, null));
+    } else {
+      routeContent.innerHTML = "";
+    }
+  });
+
+  return routeContent;
+}
+
+function Link({ to, children }) {
+  const handleClick = (e) => {
+    e.preventDefault();
+    navigate(to);
+  };
+
+  return h("a", { href: to, onClick: handleClick }, children);
+}
+
+function navigate(to) {
+  window.history.pushState({}, "", to);
+  setCurrentRoute(to);
+}
+
+export { Router, Route, Link, navigate };

package/dist/router.d.ts

@@ -1 +1 @@
-declare module "router";
+declare module "olova-router";

package/package.json

@@ -1,18 +1,15 @@
-{
-  "name": "olova-router",
-  "version": "1.0.0",
-  "description": " olova-router for olovaJs",
-  "main": "dist/router.js",
-  "keywords": [
-    "javascript",
-    "framework",
-    "reactive",
-    "olova",
-    "olovajs"
-  ],
-  "author": "Nazmul Hossain",
-  "license": "MIT",
-  "dependencies": {
-    "olova": "latest"
-  }
-}
+{
+  "name": "olova-router",
+  "version": "1.0.2",
+  "main": "dist/olova-router.js",
+  "keywords": [
+    "javascript",
+    "framework",
+    "router",
+    "olova-router",
+    "olovajs"
+  ],
+  "author": "Nazmul Hossain",
+  "license": "ISC",
+  "description": "olova-router for olovaJs"
+}

package/README.md

@@ -1,18 +0,0 @@
-# olova
-
-```html
-<div id="app">
-  <template>
-    <div i-data="{count : 0}">
-      <div>{ count }</div>
-      <button @click="count++">Increment</button>
-    </div>
-  </template>
-</div>
-
-<script type="module">
-  import { createApp } from "//unpkg.com/olova";
-  const app = createApp();
-  app.mount("#app");
-</script>
-```

package/dist/router.js

@@ -1,40 +0,0 @@
-import { createApp } from "olova";
-class Router {
-  constructor() {
-    (this.routes = new Map()), (this.currentApp = null), this.init();
-  }
-  init() {
-    window.addEventListener("popstate", () => this.handleRoute()),
-      document.addEventListener("click", (t) => {
-        if (t.target.matches("a")) {
-          t.preventDefault();
-          const e = t.target.getAttribute("href");
-          this.navigate(e);
-        }
-      }),
-      window.addEventListener("load", () => {
-        this.handleRoute();
-      });
-  }
-  add(t, e) {
-    return this.routes.set(t, e), this;
-  }
-  navigate(t) {
-    window.history.pushState(null, "", t), this.handleRoute();
-  }
-  handleRoute() {
-    const t = window.location.pathname,
-      e = this.routes.get(t),
-      n = document.querySelector("[i-view]");
-    if (n)
-      if (e) {
-        this.currentApp && (n.innerHTML = "");
-        const t = document.createElement("div");
-        (t.id = "route-container"),
-          n.appendChild(t),
-          (this.currentApp = createApp({ ...e })),
-          this.currentApp.mount("#route-container");
-      } else n.innerHTML = "<h1>404 Not Found</h1>";
-  }
-}
-export const router = new Router();