olova-router 1.0.1 → 1.0.2

package/dist/olova-router.js

@@ -1,249 +1,51 @@
-/** @jsx Olova.createElement */
-import Olova from "Olova";
+import { State, Effect, Component, h, Memo } from "olova";
 
-const NavigationContext = Olova.createContext({
-  basename: "",
-  navigator: null,
-  static: false,
-});
+const [currentRoute, setCurrentRoute] = State(window.location.pathname);
 
-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(() => {
+function Router(props) {
+  Effect(() => {
     const handlePopState = () => {
-      setLocation(
-        createLocation(
-          window.location.pathname +
-            window.location.search +
-            window.location.hash
-        )
-      );
+      setCurrentRoute(window.location.pathname);
     };
+
     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
-    )
-  );
+  return h("div", { class: "router" }, props?.children);
 }
 
-export function Routes({ children }) {
-  const { location } = Olova.Context(LocationContext);
-  const { basename } = Olova.Context(NavigationContext);
+function Route({ path, component: RouteComponent }) {
+  const matches = Memo(() => {
+    return currentRoute() === path;
+  });
 
-  let element = null;
-  let matchParams = {};
+  const routeContent = document.createElement("div");
 
-  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;
-      }
+  Effect(() => {
+    if (matches()) {
+      routeContent.innerHTML = "";
+      routeContent.appendChild(h(RouteComponent, null));
+    } else {
+      routeContent.innerHTML = "";
     }
-  }
-
-  return element;
-}
+  });
 
-export function Route({ path, element }) {
-  return Olova.createElement("route", { path, element });
+  return routeContent;
 }
 
-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);
+function Link({ to, children }) {
+  const handleClick = (e) => {
+    e.preventDefault();
+    navigate(to);
   };
 
-  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;
+  return h("a", { href: to, onClick: handleClick }, children);
 }
 
-export function Outlet() {
-  const { outlet } = Olova.Context(RouteContext);
-  return outlet || null;
+function navigate(to) {
+  window.history.pushState({}, "", to);
+  setCurrentRoute(to);
 }
 
-export default {
-  BrowserRouter,
-  Routes,
-  Route,
-  Link,
-  Navigate,
-  Outlet,
-  useNavigate,
-  useLocation,
-  useParams,
-  useSearchParams,
-};
+export { Router, Route, Link, navigate };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "olova-router",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "main": "dist/olova-router.js",
   "keywords": [
     "javascript",