lightweight-router 1.0.0

package/LICENSE

@@ -0,0 +1,2 @@
+MIT License
+... (standard MIT license text here)

package/README.md

@@ -0,0 +1,13 @@
+# lightweight-router
+
+A lightweight client-side router with prefetching capabilities.
+
+## Installation
+
+```bash
+npm install lightweight-router
+```
+
+## Usage
+
+Refer to the documentation for more details.

package/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "lightweight-router",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": ""
+}

package/src/index.js

@@ -0,0 +1,7 @@
+import { initializeRouter, setRouteChangeHandler } from './router';
+
+export const startRouter = (options = {}) => {
+  const { onRouteChange } = options;
+  if (onRouteChange) setRouteChangeHandler(onRouteChange);
+  initializeRouter();
+};

package/src/router.js

@@ -0,0 +1,96 @@
+import { fetchContent } from './utils';
+
+let linkData = new Proxy({}, {
+  set: (target, property, value) => {
+    target[property] = value;
+    const router = document.querySelector("router");
+    const currentRoute = router?.querySelector(`route[path="${globalThis.location.pathname}"]`) ||
+                         router?.querySelector(`route[path="/default"]`);
+
+    if (currentRoute && !currentRoute.innerHTML && property === globalThis.location.href) {
+      currentRoute.innerHTML = value;
+      if (typeof onRouteChange === 'function') onRouteChange(currentRoute);
+    }
+    return true;
+  },
+});
+
+let onRouteChange;
+
+export const setRouteChangeHandler = (handler) => {
+  onRouteChange = handler;
+};
+
+const fetchAndSaveContent = async (link) => {
+  linkData[link.href] = "";
+  linkData[link.href] = await fetchContent(link.href);
+};
+
+const handleLinkHover = async (event) => {
+  const link = event.target;
+  if (!linkData[link.href]) await fetchAndSaveContent(link);
+};
+
+const handleLinkIntersection = (entries, observer) => {
+  entries.forEach(entry => {
+    if (entry.isIntersecting) {
+      const link = entry.target;
+      if (!linkData[link.href]) {
+        fetchAndSaveContent(link);
+        observer.unobserve(link);
+      }
+    }
+  });
+};
+
+const handlePopState = async () => {
+  const router = document.querySelector("router");
+  if (!router) return;
+  
+  const currentRoute = router.querySelector(`route[path="${globalThis.location.pathname}"]`) ||
+                       router.querySelector(`route[path="/default"]`);
+
+  router.querySelectorAll("route").forEach(route => (route.style.display = "none"));
+  currentRoute.style.display = "contents";
+  
+  if (!currentRoute.innerHTML) {
+    currentRoute.innerHTML = await linkData[globalThis.location.href];
+    if (typeof onRouteChange === 'function') onRouteChange(currentRoute);
+  }
+};
+
+const handleLinkClick = (e) => {
+  if (e.target.tagName === "A" && e.target.href) {
+    const href = new URL(e.target.href).pathname;
+    if (href.startsWith("/")) {
+      e.preventDefault();
+      globalThis.history.pushState(null, null, e.target.href);
+      globalThis.dispatchEvent(new Event("popstate"));
+    }
+  }
+};
+
+export const observeLinks = (observer) => {
+  const saveDataOn = navigator.connection && navigator.connection.saveData;
+  const links = document.querySelectorAll("a");
+  
+  links.forEach(link => {
+    if (link.getAttribute("prefetch") !== "onHover" && !saveDataOn) observer.observe(link);
+  });
+};
+
+export const initializeRouter = () => {
+  if (typeof document === "undefined") return;
+
+  globalThis.addEventListener("popstate", handlePopState);
+  document.addEventListener("click", handleLinkClick);
+  
+  document.body.addEventListener("mouseover", (event) => {
+    if (event.target.tagName === "A" && event.target.getAttribute("prefetch") === "onHover") {
+      handleLinkHover(event);
+    }
+  });
+
+  const observer = new IntersectionObserver(handleLinkIntersection, { root: null, threshold: 0.5 });
+  observeLinks(observer);
+};

package/src/utils.js

@@ -0,0 +1,20 @@
+export const getPathname = () => {
+  const { pathname } = globalThis.location;
+  return pathname.startsWith("/") ? pathname.slice(1) : pathname;
+};
+
+export const fetchContent = async (url) => {
+  const response = await fetch(url, { method: "POST", body: "onlyRoute" });
+  if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+  
+  const reader = response.body.getReader();
+  const decoder = new TextDecoder("utf-8");
+  let content = "";
+  
+  while (true) {
+    const { done, value } = await reader.read();
+    if (done) break;
+    content += decoder.decode(value);
+  }
+  return content;
+};