lightweight-router 1.0.7 → 1.0.8

package/README.md

@@ -1,6 +1,6 @@
-# Lightweight Router
+# PageFlick
 
-A minimal lightweight client-side router with intelligent prefetching capabilities for faster websites. This tool can turn any Multi-Page Application (MPA) into a Single-Page Application (SPA) very easily and with just ~1.5KB byte (gzipped).
+PageFlick is a minimal lightweight client-side router with intelligent prefetching capabilities for faster websites. This tool can turn any Multi-Page Application (MPA) into a Single-Page Application (SPA) very easily and with just ~1.5KB byte (gzipped).
 
 ## Features
 
@@ -12,6 +12,7 @@ A minimal lightweight client-side router with intelligent prefetching capabiliti
 - 📱 Mobile-friendly with data-saver mode support
 - 🎨 Built-in loading animations
 - 🕰️ Based on History API so you can use native browser navigation
+- 🤖 Automatic title change
 
 
 ## Installation
@@ -107,11 +108,11 @@ If you have too many links at once or too many requests, you can add the `prefet
 P.S. you can easily test in your website by pasting the ultra minified version into the console.
 The minified version was created with uglify-js, clean.css and then ultra minified with https://packjs.com
 The size of the gzipped version was calculated with: https://dafrok.github.io/gzip-size-online/
-It's worth to note that nonetheless Terser give better results than uglify-js. The final uglify version packed by packjs.com was even smaller.
+It's worth to note that nonetheless Terser give better results than uglify-js. The final uglify version packed by packjs.com was the smallest.
 
 ## Browser Support
 
-The router supports all modern browsers. Required features:
+The router is intended for modern browsers. Required features:
 
 - IntersectionObserver
 - Fetch API
@@ -122,7 +123,7 @@ For older browsers, consider using the following polyfills:
 - intersection-observer
 - whatwg-fetch
 
-## Server Configuration
+## Optional Server Configuration
 
 Configuring your server to return only the route content can make the router much more efficient. Instead of returning the entire page, the server could return only the content for the requested route when it detects a request with the message "onlyRoute".
 
@@ -137,17 +138,17 @@ Once you configured your server to respond to this type of request, wrap the par
 ```html
 <-- Header menu and parts that don't change -->
 <router>
-  <route path="/" style="content-visibility: auto">home content</route>
+  <route path="/">home content</route>
 </router>
 <-- footer etc.. -->
 ```
 
-You can also prerender other important routes by rendering them inside the `router` tag in their appropriate `route` tags for faster loading times:
+You can also prerender most visited routes by rendering them inside the `router` tag in their appropriate `route` tags for faster loading times:
 
 ```html
 <router>
-  <route path="/" style="content-visibility: auto">home content</route>
-  <route path="/about" style="content-visibility: auto; display:none;">about content</route>
+  <route path="/">home content</route>
+  <route path="/about" style="display:none;">about content</route>
 </router>
 ```
 
@@ -155,10 +156,23 @@ In the future you will also be able to pre-render a default route that will be u
 
 Right now errors are shown without styling as the content of the page.
 
-Soon there will be a DenoJS library that will help you deal with all these routes stuff. It will also come with api routes functionality 🔥
+If you like to use Preact and Deno for easy server config consider using the server side router present in [Singularity](https://github.com/andreafuturi/Singularity/) framework.
+It does exactly what we're talking about automatically by returning full html renders on normal request (sorrounded by an Index.jsx) and returing only partial route html when route is requested from inside the page (with onlyRoute param).
 
-## Performance Tips
 
-- Use `content-visibility: auto` on route elements to improve rendering performance
+## Performance Tips
 - Implement server-side partial responses for better bandwidth usage
 - Consider using the `prefetch="onHover"` attribute for less important links
+
+## Future Development
+- Delay router intialization on first link hover for better performances?
+- Implement html streaming for faster page load
+- Cooler Error handling
+- Disable caching on certain links/routes (that needs to be always up to date)
+- Cache limiting
+
+
+
+
+
+

package/dist/router.min.js

@@ -1 +1 @@
-(()=>{let l={},n=async()=>{document.body.classList.add("loading");var e=globalThis.location.pathname,t=document.querySelector("router");let o=t.querySelector(`route[path="${e}"]`);if(o||((o=document.createElement("route")).setAttribute("path",e),t.appendChild(o)),!o.innerHTML){let e=l[globalThis.location.href];e||(e=await d(globalThis.location.href),l[globalThis.location.href]=e);var n,r=(new DOMParser).parseFromString(e,"text/html"),a=r.querySelector("title"),a=(a&&(document.title=a.textContent),o.innerHTML=r.body.innerHTML,Array.from(o.querySelectorAll("script")));for(n of a){var i=document.createElement("script");n.src?i.src=n.src:i.textContent=n.textContent,n.parentNode.replaceChild(i,n)}}t.querySelectorAll("route").forEach(e=>e.style.display="none"),o.style.display="contents",document.body.classList.remove("loading"),window.scrollTo(0,0),s&&s(e)},r=async e=>{l[e.href]||(l[e.href]=await d(e.href))},a=(e,t)=>{e.forEach(e=>{e.isIntersecting&&(e=e.target,l[e.href]||(r(e),t.unobserve(e)))})},i=e=>{var t=e.target.closest("A");t&&t.href&&c(t.href)&&t.origin===location.origin&&(e.preventDefault(),globalThis.history.pushState(null,null,t.href),globalThis.dispatchEvent(new Event("popstate")))};function c(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=".loading{animation:pulse 1s infinite alternate}@keyframes pulse{from{opacity:.6}to{opacity:.1}}route{content-visibility:auto}",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.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;!l[e.href]&&c(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||c(e.href)||t.observe(e)})})(o)};"loading"===document.readyState?document.addEventListener("DOMContentLoaded",()=>e()):e()})();
+(()=>{let l={},o=!1,c=(...e)=>o&&console.log("🚦 Router:",...e),r=async()=>{c("Navigation triggered to:",globalThis.location.pathname),document.body.classList.add("loading");var e=globalThis.location.pathname,t=document.querySelector("router");let n=t.querySelector(`route[path="${e}"]`);if(n||(c("Creating new route element for:",e),(n=document.createElement("route")).setAttribute("path",e),t.appendChild(n)),!n.innerHTML){c("Fetching content for:",globalThis.location.href);let e=l[globalThis.location.href];e||(e=await u(globalThis.location.href),l[globalThis.location.href]=e);var o,r=(new DOMParser).parseFromString(e,"text/html"),a=r.querySelector("title"),a=(a&&(c("Updating page title to:",a.textContent),document.title=a.textContent),n.innerHTML=r.body.innerHTML,Array.from(n.querySelectorAll("script")));c("Executing",a.length,"scripts from fetched content");for(o of a){var i=document.createElement("script");o.src?i.src=o.src:i.textContent=o.textContent,o.parentNode.replaceChild(i,o)}}t.querySelectorAll("route").forEach(e=>e.style.display="none"),n.style.display="contents",document.body.classList.remove("loading"),window.scrollTo(0,0),h&&h(e),c("Route change completed")},a=async e=>{l[e.href]||(c("Prefetching content for:",e.href),l[e.href]=await u(e.href))},i=(e,t)=>{e.forEach(e=>{e.isIntersecting&&(e=e.target,l[e.href]||(a(e),t.unobserve(e)))})},s=e=>{var t=e.target.closest("A");t&&t.href&&d(t.href)&&t.origin===location.origin?(c("Internal link clicked:",t.href),e.preventDefault(),globalThis.history.pushState(null,null,t.href),globalThis.dispatchEvent(new Event("popstate"))):c("Invalid link click:",t?.href)};function d(e){if(e&&!e.startsWith("#")&&!e.startsWith("javascript:")){if(e.startsWith("/"))return 1;try{var t=new URL(e,window.location.origin),n=new URL(window.location.href);return n.hostname.replace(/^www\./,"")===t.hostname.replace(/^www\./,"")?n.pathname!==t.pathname||!t.hash:void 0}catch{}}}let h,u=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(!f){var t=await fetch(e,{method:"POST",body:"onlyRoute"});if(t.ok)return t}return fetch(e)},f=!1,e=(e={})=>{var{onRouteChange:t,debug:n}=e,e=(o=n,c("Router starting...",e),t&&(n=t,h=n),document.createElement("style")),t=(e.textContent=".loading{animation:pulse 1s infinite alternate}@keyframes pulse{from{opacity:.6}to{opacity:.1}}route{content-visibility:auto}",document.head.appendChild(e),document.querySelector("router")),n=globalThis.location.pathname,n=(t||(c("Creating new router element"),t=document.createElement("router"),(e=document.createElement("route")).setAttribute("path",n),e.innerHTML=document.body.innerHTML,t.appendChild(e),document.body.innerHTML="",document.body.appendChild(t),f=!0),globalThis.addEventListener("popstate",r),document.addEventListener("click",s),document.body.addEventListener("mouseover",e=>{"A"===e.target.tagName&&"onHover"===e.target.getAttribute("prefetch")&&(async e=>{e=e.target;!l[e.href]&&d(e.href)&&await a(e)})(e)}),new IntersectionObserver(i,{root:null,threshold:.5}));(t=>{let n=navigator.connection&&navigator.connection.saveData;document.querySelectorAll("a").forEach(e=>{"onHover"===e.getAttribute("prefetch")||n||d(e.href)||t.observe(e)})})(n)};"loading"===document.readyState?document.addEventListener("DOMContentLoaded",()=>e()):e()})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lightweight-router",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "main": "src/router.js",
   "scripts": {
     "dev": "npx http-server src -o",

package/src/__tests__/router.test.js

@@ -129,4 +129,30 @@ describe("Router", () => {
     const route = document.querySelector('route[path="/about"]');
     expect(route.innerHTML).toContain("Couldn't fetch the route - HTTP error! status: 404");
   });
+
+  test("considers paths with and without trailing slashes as the same route", 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 linkWithSlash = document.createElement("a");
+    linkWithSlash.href = "/about/";
+    document.body.appendChild(linkWithSlash);
+    linkWithSlash.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));
+  });
 });

package/src/router.js

@@ -1,13 +1,17 @@
 let linkData = {};
+let debugMode = false;
+const log = (...args) => debugMode && console.log("🚦 Router:", ...args);
 const handlePopState = async () => {
+  log("Navigation triggered to:", globalThis.location.pathname);
   document.body.classList.add("loading");
-  const currentPath = globalThis.location.pathname;
+  const currentPath = globalThis.location.pathname.replace(/\/$/, ""); // Normalize path by removing trailing slash
   const router = document.querySelector("router");
 
   let currentRoute = router.querySelector(`route[path="${currentPath}"]`);
 
   // If the route doesn't exist in DOM, create and append it
   if (!currentRoute) {
+    log("Creating new route element for:", currentPath);
     currentRoute = document.createElement("route");
     currentRoute.setAttribute("path", currentPath);
     router.appendChild(currentRoute);
@@ -15,6 +19,7 @@ const handlePopState = async () => {
 
   // Only fetch and render content if the route is empty
   if (!currentRoute.innerHTML) {
+    log("Fetching content for:", globalThis.location.href);
     let content = linkData[globalThis.location.href];
 
     // Fetch content if it's not already cached
@@ -28,12 +33,16 @@ const handlePopState = async () => {
 
     // Update the page title with the new content's title
     const newTitle = doc.querySelector("title");
-    if (newTitle) document.title = newTitle.textContent;
+    if (newTitle) {
+      log("Updating page title to:", newTitle.textContent);
+      document.title = newTitle.textContent;
+    }
 
     currentRoute.innerHTML = doc.body.innerHTML;
 
     // Execute scripts from the fetched content
     const scripts = Array.from(currentRoute.querySelectorAll("script"));
+    log("Executing", scripts.length, "scripts from fetched content");
     for (const oldScript of scripts) {
       const newScript = document.createElement("script");
       if (oldScript.src) {
@@ -54,12 +63,14 @@ const handlePopState = async () => {
 
   // Call the route change handler if it's set
   if (onRouteChange) onRouteChange(currentPath);
+  log("Route change completed");
 };
 
 //link management
 
 const fetchAndSaveContent = async link => {
   if (!linkData[link.href]) {
+    log("Prefetching content for:", link.href);
     linkData[link.href] = await fetchContent(link.href);
   }
 };
@@ -85,8 +96,12 @@ const handleLinkHover = async event => {
 
 const handleLinkClick = e => {
   const link = e.target.closest("A");
-  if (!link || !link.href || !isInternalLink(link.href) || link.origin !== location.origin) return;
-  else e.preventDefault();
+  if (!link || !link.href || !isInternalLink(link.href) || link.origin !== location.origin) {
+    log("Invalid link click:", link?.href);
+    return;
+  }
+  log("Internal link clicked:", link.href);
+  e.preventDefault();
   globalThis.history.pushState(null, null, link.href);
   globalThis.dispatchEvent(new Event("popstate"));
 };
@@ -149,7 +164,9 @@ const fetchWithFallback = async url => {
 
 let routerCreatedManually = false;
 const startRouter = (options = {}) => {
-  const { onRouteChange } = options;
+  const { onRouteChange, debug } = options;
+  debugMode = debug;
+  log("Router starting...", options);
   if (onRouteChange) setRouteChangeHandler(onRouteChange);
   const style = document.createElement("style");
   style.textContent = `
@@ -170,6 +187,7 @@ const startRouter = (options = {}) => {
   const currentPath = globalThis.location.pathname;
 
   if (!router) {
+    log("Creating new router element");
     router = document.createElement("router");
     const route = document.createElement("route");
     route.setAttribute("path", currentPath);
@@ -197,8 +215,3 @@ export { startRouter };
 
 // TODO: create ultra minified version or deploy
 // TODO: write proper automated tests
-// - add support for prefetching on hover
-// - add support for prefetching on click
-// - add support for prefetching on scroll
-// - add support for prefetching on focus
-// - add support for prefetching on touch