lightweight-router 1.0.5 → 1.0.7

package/dist/router.min.js

@@ -1 +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=".loading{animation:pulse 1s infinite alternate}@keyframes pulse{from{opacity:.8}to{opacity:.3}}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;!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()})();
+(()=>{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()})();

package/package.json

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

package/src/router.js

@@ -1,50 +1,55 @@
 let linkData = {};
 const handlePopState = async () => {
-  const router = document.querySelector("router");
+  document.body.classList.add("loading");
   const currentPath = globalThis.location.pathname;
+  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) {
     currentRoute = document.createElement("route");
-    currentRoute.setAttribute("path", globalThis.location.pathname);
+    currentRoute.setAttribute("path", currentPath);
     router.appendChild(currentRoute);
   }
 
-  document.body.classList.add("loading");
+  // Only fetch and render content if the route is empty
+  if (!currentRoute.innerHTML) {
+    let content = linkData[globalThis.location.href];
 
-  let content = linkData[globalThis.location.href];
-  if (!content) {
-    content = await fetchContent(globalThis.location.href);
-    linkData[globalThis.location.href] = content;
-  }
+    // Fetch content if it's not already cached
+    if (!content) {
+      content = await fetchContent(globalThis.location.href);
+      linkData[globalThis.location.href] = content;
+    }
 
-  const parser = new DOMParser();
-  const doc = parser.parseFromString(content, "text/html");
+    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;
+    // 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;
+    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;
+    // 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;
+      }
+      oldScript.parentNode.replaceChild(newScript, oldScript);
     }
-    oldScript.parentNode.replaceChild(newScript, oldScript);
   }
 
+  // Display only the current route
   router.querySelectorAll("route").forEach(route => (route.style.display = "none"));
   currentRoute.style.display = "contents";
 
   document.body.classList.remove("loading");
-  // Reset scroll position to the top
   window.scrollTo(0, 0);
 
   // Call the route change handler if it's set
@@ -152,8 +157,8 @@ const startRouter = (options = {}) => {
           animation: pulse 1s infinite alternate;
       }
       @keyframes pulse {
-          from { opacity: 0.8; }
-          to { opacity: 0.3; }
+          from { opacity: 0.6; }
+          to { opacity: 0.1; }
       }
       route {
         content-visibility: auto;
@@ -189,3 +194,11 @@ const startRouter = (options = {}) => {
 };
 
 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