lightweight-router 1.0.0 → 1.0.1

package/.vscode/settings.json

@@ -0,0 +1,11 @@
+{
+  "files.exclude": {
+    "**/.git": true,
+    "**/.svn": true,
+    "**/.hg": true,
+    "**/CVS": true,
+    "**/.DS_Store": true,
+    "**/Thumbs.db": true
+  },
+  "hide-files.files": []
+}

package/README.md

@@ -1,13 +1,18 @@
-# lightweight-router
+# Lightweight Router
 
-A lightweight client-side router with prefetching capabilities.
+A lightweight client-side router with intelligent prefetching capabilities for modern web applications.
 
-## Installation
+## Features
 
-```bash
-npm install lightweight-router
-```
+- 🚀 Zero dependencies
+- 🔄 Smooth client-side navigation
+- 📥 Intelligent link prefetching
+- 🎯 Multiple prefetching strategies
+- 🔍 SEO-friendly
+- 📱 Mobile-friendly with data-saver mode support
+- ⚡ Automatic script execution
+- 🎨 Built-in loading animations
 
-## Usage
+## Installation
 
-Refer to the documentation for more details.
+### NPM

package/build.js

@@ -0,0 +1,51 @@
+const fs = require("fs");
+const path = require("path");
+const uglifyJS = require("uglify-js");
+const CleanCSS = require("clean-css");
+
+// Read the router source
+const routerSource = fs.readFileSync(path.join(__dirname, "src/router.js"), "utf8");
+
+// Extract CSS from the source
+const cssRegex = /style\.textContent = `\s*([\s\S]*?)\s*`;/;
+const cssMatch = routerSource.match(cssRegex);
+const css = cssMatch ? cssMatch[1] : "";
+
+// Minify CSS
+const minifiedCSS = new CleanCSS({}).minify(css).styles;
+
+// Replace original CSS with minified version
+const updatedSource = routerSource.replace(cssRegex, `style.textContent = '${minifiedCSS}';`);
+
+// Convert ES module to self-initializing IIFE
+const iife = `
+(function() {
+  ${updatedSource.replace("export { startRouter };", "")}
+  
+  // Auto-initialize when DOM is ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => startRouter());
+  } else {
+    startRouter();
+  }
+})();
+`;
+
+// Minify the JavaScript
+const minified = uglifyJS.minify(iife);
+
+if (minified.error) {
+  console.error("Minification error:", minified.error);
+  process.exit(1);
+}
+
+// Create dist directory if it doesn't exist
+const distDir = path.join(__dirname, "dist");
+if (!fs.existsSync(distDir)) {
+  fs.mkdirSync(distDir);
+}
+
+// Write minified file
+fs.writeFileSync(path.join(distDir, "router.min.js"), minified.code);
+
+console.log("Build complete! Output saved to dist/router.min.js");

package/dist/router.min.js

@@ -0,0 +1 @@
+(()=>{let c={},n=async()=>{var e=document.querySelector("router"),t=globalThis.location.pathname;let o=e.querySelector(`route[path="${t}"]`),n=(o||((o=document.createElement("route")).setAttribute("path",globalThis.location.pathname),e.appendChild(o)),document.body.classList.add("loading"),c[globalThis.location.href]);n||(n=await d(globalThis.location.href),c[globalThis.location.href]=n);var r,a=(new DOMParser).parseFromString(n,"text/html"),i=a.querySelector("title"),i=(i&&(document.title=i.textContent),o.innerHTML=a.body.innerHTML,Array.from(o.querySelectorAll("script")));for(r of i){var l=document.createElement("script");r.src?l.src=r.src:l.textContent=r.textContent,r.parentNode.replaceChild(l,r)}e.querySelectorAll("route").forEach(e=>e.style.display="none"),o.style.display="contents",document.body.classList.remove("loading"),window.scrollTo(0,0),s&&s(t)},r=async e=>{c[e.href]||(c[e.href]=await d(e.href))},a=(e,t)=>{e.forEach(e=>{e.isIntersecting&&(e=e.target,c[e.href]||(r(e),t.unobserve(e)))})},i=e=>{var t=e.target.closest("A");t&&t.href&&l(t.href)&&t.origin===location.origin&&(e.preventDefault(),globalThis.history.pushState(null,null,t.href),globalThis.dispatchEvent(new Event("popstate")))};function l(e){if(e&&!e.startsWith("#")&&!e.startsWith("javascript:")){if(e.startsWith("/"))return 1;try{var t=new URL(e,window.location.origin),o=new URL(window.location.href);return o.hostname.replace(/^www\./,"")===t.hostname.replace(/^www\./,"")?o.pathname!==t.pathname||!t.hash:void 0}catch{}}}let s,d=async e=>{e=await t(e);return e.ok?e.text():"Couldn't fetch the route - HTTP error! status: "+e.status},t=async e=>{if(!h){var t=await fetch(e,{method:"POST",body:"onlyRoute"});if(t.ok)return t}return fetch(e)},h=!1,e=(e={})=>{var t,e=e.onRouteChange,e=(e&&(e=e,s=e),document.createElement("style")),e=(e.textContent="body.loading{animation:pulseOpacity 1s infinite alternate}@keyframes pulseOpacity{from{opacity:.8}to{opacity:.3}}",document.head.appendChild(e),document.querySelector("router")),o=globalThis.location.pathname,o=(e||(e=document.createElement("router"),(t=document.createElement("route")).setAttribute("path",o),t.style.contentVisibility="auto",t.innerHTML=document.body.innerHTML,e.appendChild(t),document.body.innerHTML="",document.body.appendChild(e),h=!0),globalThis.addEventListener("popstate",n),document.addEventListener("click",i),document.body.addEventListener("mouseover",e=>{"A"===e.target.tagName&&"onHover"===e.target.getAttribute("prefetch")&&(async e=>{e=e.target;!c[e.href]&&l(e.href)&&await r(e)})(e)}),new IntersectionObserver(a,{root:null,threshold:.5}));(t=>{let o=navigator.connection&&navigator.connection.saveData;document.querySelectorAll("a").forEach(e=>{"onHover"===e.getAttribute("prefetch")||o||l(e.href)||t.observe(e)})})(o)};"loading"===document.readyState?document.addEventListener("DOMContentLoaded",()=>e()):e()})();

package/jest.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  testEnvironment: "jsdom",
+  moduleFileExtensions: ["js", "jsx"],
+  transform: {},
+  testMatch: ["**/__tests__/**/*.test.js"],
+  setupFiles: ["<rootDir>/jest.setup.js"],
+  moduleDirectories: ["node_modules", "dist"],
+};

package/jest.setup.js

@@ -0,0 +1,32 @@
+// Mock window.scrollTo
+window.scrollTo = jest.fn();
+
+// Mock IntersectionObserver
+global.IntersectionObserver = class IntersectionObserver {
+  constructor(callback) {
+    this.callback = callback;
+  }
+
+  observe = jest.fn();
+  unobserve = jest.fn();
+  disconnect = jest.fn();
+};
+
+// Mock URL API if needed
+global.URL = class URL {
+  constructor(url) {
+    this.url = url;
+    this.pathname = url;
+    this.origin = "http://localhost";
+    this.hash = "";
+    this.hostname = "localhost";
+  }
+};
+
+// Mock window.location
+const mockLocation = new URL("http://localhost/");
+delete window.location;
+window.location = mockLocation;
+
+// Mock history API
+window.history.pushState = jest.fn();

package/package.json

@@ -1,12 +1,23 @@
 {
   "name": "lightweight-router",
-  "version": "1.0.0",
-  "main": "index.js",
+  "version": "1.0.1",
+  "main": "dist/router.min.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "dev": "npx http-server src -o",
+    "build": "node build.js",
+    "deploy": "npm run build && npm version patch && git publish && npm publish",
+    "test": "jest",
+    "test:watch": "jest --watch"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
-  "description": ""
+  "description": "A lightweight client-side router with prefetching capabilities.",
+  "devDependencies": {
+    "http-server": "^14.1.1",
+    "uglify-js": "^3.17.4",
+    "clean-css": "^5.3.1",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0"
+  }
 }

package/src/__tests__/router.test.js

@@ -0,0 +1,132 @@
+/**
+ * @jest-environment jsdom
+ */
+
+describe("Router", () => {
+  beforeEach(async () => {
+    // Setup a clean DOM environment before each test
+    document.body.innerHTML = `
+      <div>
+        <h1>Test Page</h1>
+        <a href="/about">About</a>
+        <a href="/contact" prefetch="onHover">Contact</a>
+      </div>
+    `;
+
+    // Mock fetch API
+    global.fetch = jest.fn(() =>
+      Promise.resolve({
+        ok: true,
+        text: () => Promise.resolve("<div>New Content</div>"),
+      })
+    );
+
+    // Load the router after DOM is set up
+    require("../../dist/router.min.js");
+
+    // Wait for next tick to allow router initialization
+    await new Promise(resolve => setTimeout(resolve, 0));
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    // Clear the require cache so we can reload the router in next test
+    jest.resetModules();
+  });
+
+  test("initializes router and wraps existing content", async () => {
+    const router = document.querySelector("router");
+    const route = document.querySelector("route");
+
+    expect(router).toBeTruthy();
+    expect(route).toBeTruthy();
+    expect(route.getAttribute("path")).toBe(window.location.pathname);
+  });
+
+  test("handles internal navigation", async () => {
+    // Mock the window.location object
+    delete window.location;
+    window.location = new URL("http://localhost/");
+
+    // Mock history.pushState to actually update the location
+    const originalPushState = window.history.pushState;
+    window.history.pushState = jest.fn((state, title, url) => {
+      window.location = new URL(url, "http://localhost");
+      originalPushState.call(window.history, state, title, url);
+    });
+
+    await new Promise(resolve => setTimeout(resolve, 0));
+
+    const link = document.querySelector('a[href="/about"]');
+    link.click();
+
+    // Wait for async operations
+    await new Promise(resolve => setTimeout(resolve, 0));
+
+    expect(window.location.pathname).toBe("/about");
+    expect(fetch).toHaveBeenCalledWith("/about", expect.any(Object));
+  });
+
+  test("prefetches content on hover for marked links", async () => {
+    await new Promise(resolve => setTimeout(resolve, 0));
+
+    const link = document.querySelector('a[prefetch="onHover"]');
+    link.dispatchEvent(new MouseEvent("mouseover"));
+
+    // Wait for async operations
+    await new Promise(resolve => setTimeout(resolve, 0));
+
+    expect(fetch).toHaveBeenCalledWith("/contact", expect.any(Object));
+  });
+
+  test("updates document title when navigating", async () => {
+    await new Promise(resolve => setTimeout(resolve, 0));
+
+    // Mock fetch to return content with a title
+    global.fetch = jest.fn(() =>
+      Promise.resolve({
+        ok: true,
+        text: () =>
+          Promise.resolve(`
+          <html>
+            <head>
+              <title>New Page</title>
+            </head>
+            <body>
+              <div>New Content</div>
+            </body>
+          </html>
+        `),
+      })
+    );
+
+    const link = document.querySelector('a[href="/about"]');
+    link.click();
+
+    // Wait for async operations
+    await new Promise(resolve => setTimeout(resolve, 0));
+
+    expect(document.title).toBe("New Page");
+  });
+
+  test("handles navigation errors gracefully", async () => {
+    await new Promise(resolve => setTimeout(resolve, 0));
+
+    // Mock fetch to simulate an error
+    global.fetch = jest.fn(() =>
+      Promise.resolve({
+        ok: false,
+        status: 404,
+      })
+    );
+
+    const link = document.querySelector('a[href="/about"]');
+    link.click();
+
+    // Wait for async operations
+    await new Promise(resolve => setTimeout(resolve, 0));
+
+    const route = document.querySelector('route[path="/about"]');
+    expect(route.innerHTML).toContain("Couldn't fetch the route - HTTP error! status: 404");
+  });
+});

package/src/about.html

@@ -0,0 +1,24 @@
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>Router manual test About</title>
+  </head>
+  <body style="background-color: bisque">
+    <menu class="flex m-0 p-0"
+      ><a prefetch="onHover" href="/">Home</a><a href="/about.html">About</a><a href="/admin" prefetch="onHover">Admin</a
+      ><a href="/irmfirmiror" prefetch="onHover">404</a> <a href="https://andreafuturi.com" prefetch="onHover">Google Test</a>
+    </menu>
+    ABOUT
+    <script type="module">
+      import { startRouter } from "./router.js";
+      // Initialize the router with a simple onRouteChange callback to test functionality
+      startRouter({
+        onRouteChange: currentRoute => {
+          console.log("Route changed:", currentRoute);
+          currentRoute.classList.add("fade-in"); // Example: simple CSS class for animation (define it in CSS if needed)
+        },
+      });
+    </script>
+  </body>
+</html>

package/src/index.html

@@ -0,0 +1,24 @@
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>Router manual test Index</title>
+  </head>
+  <body>
+    <menu class="flex m-0 p-0"
+      ><a prefetch="onHover" href="/">Home</a><a preFetch="onHover" href="/about.html">About</a><a href="/admin" prefetch="onHover">Admin</a
+      ><a href="/irmfirmiror" prefetch="onHover">404</a> <a href="https://andreafuturi.com" prefetch="onHover">Google Test</a>
+    </menu>
+    HOME
+    <script type="module">
+      import { startRouter } from "./router.js";
+      // Initialize the router with a simple onRouteChange callback to test functionality
+      startRouter({
+        onRouteChange: currentRoute => {
+          console.log("Route changed:", currentRoute);
+          currentRoute.classList.add("fade-in"); // Example: simple CSS class for animation (define it in CSS if needed)
+        },
+      });
+    </script>
+  </body>
+</html>

package/src/router.html

@@ -0,0 +1,25 @@
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>Router manual test About</title>
+  </head>
+  <body style="background-color: bisque">
+    <menu class="flex m-0 p-0"
+      ><a prefetch="onHover" href="/">Home</a><a href="/about.html">About</a><a href="/admin" prefetch="onHover">Admin</a
+      ><a href="/irmfirmiror" prefetch="onHover">404</a> <a href="https://andreafuturi.com" prefetch="onHover">Google Test</a> </menu
+    ><router>
+      <route path="/about.html" style="content-visibility: auto"><h1>About</h1></route><route path="/onlyServer" style="content-visibility: auto"></route
+    ></router>
+    <script type="module">
+      import { startRouter } from "./router.js";
+      // Initialize the router with a simple onRouteChange callback to test functionality
+      startRouter({
+        onRouteChange: currentRoute => {
+          console.log("Route changed:", currentRoute);
+          currentRoute.classList.add("fade-in"); // Example: simple CSS class for animation (define it in CSS if needed)
+        },
+      });
+    </script>
+  </body>
+</html>

package/src/router.js

@@ -1,34 +1,62 @@
-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);
+let linkData = {};
+const handlePopState = async () => {
+  const router = document.querySelector("router");
+  const currentPath = globalThis.location.pathname;
+
+  let currentRoute = router.querySelector(`route[path="${currentPath}"]`);
+
+  if (!currentRoute) {
+    currentRoute = document.createElement("route");
+    currentRoute.setAttribute("path", globalThis.location.pathname);
+    router.appendChild(currentRoute);
+  }
+
+  document.body.classList.add("loading");
+
+  let content = linkData[globalThis.location.href];
+  if (!content) {
+    content = await fetchContent(globalThis.location.href);
+    linkData[globalThis.location.href] = content;
+  }
+
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(content, "text/html");
+
+  // Update the page title with the new content's title
+  const newTitle = doc.querySelector("title");
+  if (newTitle) document.title = newTitle.textContent;
+
+  currentRoute.innerHTML = doc.body.innerHTML;
+
+  // Execute scripts from the fetched content
+  const scripts = Array.from(currentRoute.querySelectorAll("script"));
+  for (const oldScript of scripts) {
+    const newScript = document.createElement("script");
+    if (oldScript.src) {
+      newScript.src = oldScript.src;
+    } else {
+      newScript.textContent = oldScript.textContent;
     }
-    return true;
-  },
-});
+    oldScript.parentNode.replaceChild(newScript, oldScript);
+  }
 
-let onRouteChange;
+  router.querySelectorAll("route").forEach(route => (route.style.display = "none"));
+  currentRoute.style.display = "contents";
 
-export const setRouteChangeHandler = (handler) => {
-  onRouteChange = handler;
-};
+  document.body.classList.remove("loading");
+  // Reset scroll position to the top
+  window.scrollTo(0, 0);
 
-const fetchAndSaveContent = async (link) => {
-  linkData[link.href] = "";
-  linkData[link.href] = await fetchContent(link.href);
+  // Call the route change handler if it's set
+  if (onRouteChange) onRouteChange(currentPath);
 };
 
-const handleLinkHover = async (event) => {
-  const link = event.target;
-  if (!linkData[link.href]) await fetchAndSaveContent(link);
+//link management
+
+const fetchAndSaveContent = async link => {
+  if (!linkData[link.href]) {
+    linkData[link.href] = await fetchContent(link.href);
+  }
 };
 
 const handleLinkIntersection = (entries, observer) => {
@@ -43,49 +71,113 @@ const handleLinkIntersection = (entries, observer) => {
   });
 };
 
-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 handleLinkHover = async event => {
+  const link = event.target;
+  if (!linkData[link.href] && isInternalLink(link.href)) {
+    await fetchAndSaveContent(link);
   }
 };
 
-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"));
-    }
-  }
+const handleLinkClick = e => {
+  const link = e.target.closest("A");
+  if (!link || !link.href || !isInternalLink(link.href) || link.origin !== location.origin) return;
+  else e.preventDefault();
+  globalThis.history.pushState(null, null, link.href);
+  globalThis.dispatchEvent(new Event("popstate"));
 };
 
-export const observeLinks = (observer) => {
+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);
+    if (link.getAttribute("prefetch") !== "onHover" && !saveDataOn && !isInternalLink(link.href)) observer.observe(link);
   });
 };
 
-export const initializeRouter = () => {
-  if (typeof document === "undefined") return;
+function isInternalLink(href) {
+  if (!href || href.startsWith("#") || href.startsWith("javascript:")) return false;
+  if (href.startsWith("/")) return true;
+
+  try {
+    const url = new URL(href, window.location.origin);
+    const currentUrl = new URL(window.location.href);
+
+    const currentHost = currentUrl.hostname.replace(/^www\./, "");
+    const targetHost = url.hostname.replace(/^www\./, "");
+
+    // Compare hosts
+    if (currentHost !== targetHost) return false;
+
+    // Compare paths (ignoring parameters and fragments)
+    const currentPath = currentUrl.pathname;
+    const targetPath = url.pathname;
+
+    return currentPath !== targetPath || !url.hash;
+  } catch {
+    return false;
+  }
+}
+
+let onRouteChange;
+
+const setRouteChangeHandler = handler => {
+  onRouteChange = handler;
+};
+
+const fetchContent = async url => {
+  const response = await fetchWithFallback(url);
+  if (!response.ok) {
+    return `Couldn't fetch the route - HTTP error! status: ${response.status}`;
+  }
+  return await response.text();
+};
+
+// Updated fetchWithFallback to check the flag
+const fetchWithFallback = async url => {
+  if (!routerCreatedManually) {
+    const res = await fetch(url, { method: "POST", body: "onlyRoute" });
+    if (res.ok) return res;
+  }
+  return await fetch(url);
+};
+
+let routerCreatedManually = false;
+const startRouter = (options = {}) => {
+  const { onRouteChange } = options;
+  if (onRouteChange) setRouteChangeHandler(onRouteChange);
+  const style = document.createElement("style");
+  style.textContent = `
+      body.loading {
+          animation: pulseOpacity 1s infinite alternate;
+      }
+
+      @keyframes pulseOpacity {
+          from { opacity: 0.8; }
+          to { opacity: 0.3; }
+      }
+  `;
+  document.head.appendChild(style);
+
+  let router = document.querySelector("router");
+  const currentPath = globalThis.location.pathname;
+
+  if (!router) {
+    router = document.createElement("router");
+    const route = document.createElement("route");
+    route.setAttribute("path", currentPath);
+    route.style.contentVisibility = "auto";
+    route.innerHTML = document.body.innerHTML;
+    router.appendChild(route);
+    document.body.innerHTML = "";
+    document.body.appendChild(router);
+    routerCreatedManually = true;
+  }
 
   globalThis.addEventListener("popstate", handlePopState);
   document.addEventListener("click", handleLinkClick);
-  
-  document.body.addEventListener("mouseover", (event) => {
+
+  document.body.addEventListener("mouseover", event => {
     if (event.target.tagName === "A" && event.target.getAttribute("prefetch") === "onHover") {
       handleLinkHover(event);
     }
@@ -94,3 +186,5 @@ export const initializeRouter = () => {
   const observer = new IntersectionObserver(handleLinkIntersection, { root: null, threshold: 0.5 });
   observeLinks(observer);
 };
+
+export { startRouter };

package/src/index.js

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

package/src/utils.js

@@ -1,20 +0,0 @@
-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;
-};