olova-router 1.0.0 → 1.0.1

package/dist/olova-router.js

@@ -0,0 +1,249 @@
+/** @jsx Olova.createElement */
+import Olova from "Olova";
+
+const NavigationContext = Olova.createContext({
+  basename: "",
+  navigator: null,
+  static: false,
+});
+
+const LocationContext = Olova.createContext({
+  location: {
+    pathname: window.location.pathname,
+    search: window.location.search,
+    hash: window.location.hash,
+    state: null,
+    key: "",
+  },
+});
+
+const RouteContext = Olova.createContext({
+  params: {},
+});
+
+function createLocation(path) {
+  const [pathname, search] = path.split("?");
+  return {
+    pathname: pathname || "/",
+    search: search ? `?${search}` : "",
+    hash: window.location.hash || "",
+    state: null,
+    key: Math.random().toString(36).slice(2),
+  };
+}
+
+export function BrowserRouter({ children, basename = "" }) {
+  const [location, setLocation] = Olova.State(
+    createLocation(
+      window.location.pathname + window.location.search + window.location.hash
+    )
+  );
+
+  const navigator = {
+    push(to) {
+      const newLocation = createLocation(to);
+      window.history.pushState(null, "", to);
+      setLocation(newLocation);
+    },
+    replace(to) {
+      const newLocation = createLocation(to);
+      window.history.replaceState(null, "", to);
+      setLocation(newLocation);
+    },
+    go(delta) {
+      window.history.go(delta);
+    },
+    back() {
+      window.history.back();
+    },
+    forward() {
+      window.history.forward();
+    },
+  };
+
+  Olova.Effect(() => {
+    const handlePopState = () => {
+      setLocation(
+        createLocation(
+          window.location.pathname +
+            window.location.search +
+            window.location.hash
+        )
+      );
+    };
+    window.addEventListener("popstate", handlePopState);
+    return () => window.removeEventListener("popstate", handlePopState);
+  }, []);
+
+  const navigationValue = Olova.Memo(
+    () => ({ navigator, basename }),
+    [navigator, basename]
+  );
+  const locationValue = Olova.Memo(() => ({ location }), [location]);
+
+  return Olova.createElement(
+    NavigationContext.Provider,
+    { value: navigationValue },
+    Olova.createElement(
+      LocationContext.Provider,
+      { value: locationValue },
+      children
+    )
+  );
+}
+
+export function Routes({ children }) {
+  const { location } = Olova.Context(LocationContext);
+  const { basename } = Olova.Context(NavigationContext);
+
+  let element = null;
+  let matchParams = {};
+
+  const childrenArray = Array.isArray(children) ? children : [children];
+  const validChildren = childrenArray.filter((child) => child != null);
+
+  for (let i = 0; i < validChildren.length; i++) {
+    const child = validChildren[i];
+    if (child.props) {
+      const path = basename + (child.props.path || "");
+      const match = matchPath(path, location.pathname);
+      if (match) {
+        matchParams = match.params;
+        element =
+          typeof child.props.element === "function"
+            ? Olova.createElement(child.props.element, { params: match.params })
+            : child.props.element;
+        break;
+      }
+    }
+  }
+
+  return element;
+}
+
+export function Route({ path, element }) {
+  return Olova.createElement("route", { path, element });
+}
+
+export function Link({
+  to,
+  children,
+  className = "",
+  activeClassName = "",
+  ...props
+}) {
+  const { navigator, basename } = Olova.Context(NavigationContext);
+  const { location } = Olova.Context(LocationContext);
+
+  const targetPath = basename + to;
+  const isActive = location.pathname === targetPath;
+  const finalClassName = isActive
+    ? `${className} ${activeClassName}`.trim()
+    : className;
+
+  const handleClick = (event) => {
+    event.preventDefault();
+    navigator.push(targetPath);
+  };
+
+  return Olova.createElement(
+    "a",
+    {
+      href: targetPath,
+      onClick: handleClick,
+      className: finalClassName,
+      ...props,
+    },
+    children
+  );
+}
+
+function matchPath(pattern, pathname) {
+  if (pattern === pathname || pattern === "*") return { params: {} };
+  if (pattern === "/" && (pathname === "" || pathname === "/"))
+    return { params: {} };
+
+  const patternSegments = pattern.split("/").filter(Boolean);
+  const pathnameSegments = pathname.split("/").filter(Boolean);
+
+  if (patternSegments.length !== pathnameSegments.length) return null;
+
+  const params = {};
+
+  for (let i = 0; i < patternSegments.length; i++) {
+    const patternSegment = patternSegments[i];
+    const pathnameSegment = pathnameSegments[i];
+
+    if (patternSegment.startsWith(":")) {
+      const paramName = patternSegment.slice(1);
+      params[paramName] = decodeURIComponent(pathnameSegment);
+    } else if (patternSegment !== pathnameSegment) {
+      return null;
+    }
+  }
+
+  return { params };
+}
+
+export function useSearchParams() {
+  const { location } = useLocation();
+  const searchParams = new URLSearchParams(location.search);
+
+  const setSearchParams = (newParams) => {
+    const navigate = useNavigate();
+    const newSearch = new URLSearchParams(newParams).toString();
+    navigate(`${location.pathname}?${newSearch}${location.hash}`);
+  };
+
+  return [searchParams, setSearchParams];
+}
+
+export function useNavigate() {
+  const { navigator } = Olova.Context(NavigationContext);
+  return Olova.Callback(
+    (to, options = {}) => {
+      if (options.replace) {
+        navigator.replace(to);
+      } else {
+        navigator.push(to);
+      }
+    },
+    [navigator]
+  );
+}
+
+export function useLocation() {
+  const { location } = Olova.Context(LocationContext);
+  return location;
+}
+
+export function useParams() {
+  const { params } = Olova.Context(RouteContext);
+  return params;
+}
+
+export function Navigate({ to, replace = false }) {
+  const navigate = useNavigate();
+  Olova.Effect(() => {
+    navigate(to, { replace });
+  }, [navigate, to, replace]);
+  return null;
+}
+
+export function Outlet() {
+  const { outlet } = Olova.Context(RouteContext);
+  return outlet || null;
+}
+
+export default {
+  BrowserRouter,
+  Routes,
+  Route,
+  Link,
+  Navigate,
+  Outlet,
+  useNavigate,
+  useLocation,
+  useParams,
+  useSearchParams,
+};

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.1",
+  "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();