lightweight-router 1.0.8 → 1.0.10

package/dist/router.min.js

@@ -1 +1 @@
-(()=>{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()})();
+(()=>{let l={},n=!1,c=(...e)=>n&&console.log("🚦 Router:",...e),o=async()=>{c("Navigation triggered to:",globalThis.location.pathname),document.body.classList.add("loading");var e=globalThis.location.pathname.replace(/\/$/,""),t=document.querySelector("router");let r=t.querySelector(`route[path="${e}"]`);if(r||(c("Creating new route element for:",e),(r=document.createElement("route")).setAttribute("path",e),t.appendChild(r)),!r.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 n,o=(new DOMParser).parseFromString(e,"text/html"),a=o.querySelector("title"),a=(a&&(c("Updating page title to:",a.textContent),document.title=a.textContent),r.innerHTML=o.body.innerHTML,Array.from(r.querySelectorAll("script")));c("Executing",a.length,"scripts from fetched content");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.contentVisibility="hidden"),r.style.contentVisibility="visible",document.body.classList.remove("loading"),window.scrollTo(0,0),d&&d(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,r)=>{c("🔍 Intersection Observer triggered for",e.length,"entries"),e.forEach(e=>{var t=e.target;c(`🎯 Link ${t.href} intersection:`,{isIntersecting:e.isIntersecting,intersectionRatio:e.intersectionRatio,alreadyCached:!!l[t.href]}),e.isIntersecting&&(l[t.href]?c("📦 Content already cached for:",t.href):(a(t),c("👁️ Unobserving link after prefetch initiated:",t.href),r.unobserve(t)))})},s=e=>{var t=e.target.closest("A");t&&t.href&&h(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 h(e){if(!e||e.startsWith("#")||e.startsWith("javascript:"))return!1;if(e.startsWith("/"))return!0;try{var t=new URL(e,window.location.origin),r=new URL(window.location.href);return r.hostname.replace(/^www\./,"")!==t.hostname.replace(/^www\./,"")?!1:r.pathname!==t.pathname||!t.hash}catch{return!1}}let d,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:r}=e,e=(n=r,c("Router starting...",e),t&&(r=t,d=r),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")),r=globalThis.location.pathname,r=(t||(c("Creating new router element"),t=document.createElement("router"),(e=document.createElement("route")).setAttribute("path",r),e.innerHTML=document.body.innerHTML,t.appendChild(e),document.body.innerHTML="",document.body.appendChild(t),f=!0),globalThis.addEventListener("popstate",o),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]&&h(e.href)&&await a(e)})(e)}),new IntersectionObserver(i,{root:null,threshold:.5}));c("🎭 Created Intersection Observer with config:",{root:"viewport",threshold:.5}),(r=>{let n=navigator.connection&&navigator.connection.saveData;var e=document.querySelectorAll("a");c("🔄 Starting link observation...",{totalLinks:e.length,saveDataMode:n}),e.forEach(e=>{var t="onHover"!==e.getAttribute("prefetch")&&!n&&h(e.href);c("🔗 Link evaluation:",{href:e.href,prefetchAttr:e.getAttribute("prefetch"),isInternal:h(e.href),willObserve:t}),t&&(r.observe(e),c("👀 Now observing link:",e.href))})})(r)};"loading"===document.readyState?document.addEventListener("DOMContentLoaded",()=>e()):e()})();

package/package.json

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

package/src/router.js

@@ -55,8 +55,8 @@ const handlePopState = async () => {
   }
 
   // Display only the current route
-  router.querySelectorAll("route").forEach(route => (route.style.display = "none"));
-  currentRoute.style.display = "contents";
+  router.querySelectorAll("route").forEach(route => (route.style.contentVisibility = "hidden"));
+  currentRoute.style.contentVisibility = "visible";
 
   document.body.classList.remove("loading");
   window.scrollTo(0, 0);
@@ -76,12 +76,22 @@ const fetchAndSaveContent = async link => {
 };
 
 const handleLinkIntersection = (entries, observer) => {
+  log("🔍 Intersection Observer triggered for", entries.length, "entries");
   entries.forEach(entry => {
+    const link = entry.target;
+    log(`🎯 Link ${link.href} intersection:`, {
+      isIntersecting: entry.isIntersecting,
+      intersectionRatio: entry.intersectionRatio,
+      alreadyCached: !!linkData[link.href],
+    });
+
     if (entry.isIntersecting) {
-      const link = entry.target;
       if (!linkData[link.href]) {
         fetchAndSaveContent(link);
+        log("👁️ Unobserving link after prefetch initiated:", link.href);
         observer.unobserve(link);
+      } else {
+        log("📦 Content already cached for:", link.href);
       }
     }
   });
@@ -110,8 +120,25 @@ const observeLinks = observer => {
   const saveDataOn = navigator.connection && navigator.connection.saveData;
   const links = document.querySelectorAll("a");
 
+  log("🔄 Starting link observation...", {
+    totalLinks: links.length,
+    saveDataMode: saveDataOn,
+  });
+
   links.forEach(link => {
-    if (link.getAttribute("prefetch") !== "onHover" && !saveDataOn && !isInternalLink(link.href)) observer.observe(link);
+    const shouldObserve = link.getAttribute("prefetch") !== "onHover" && !saveDataOn && isInternalLink(link.href);
+
+    log("🔗 Link evaluation:", {
+      href: link.href,
+      prefetchAttr: link.getAttribute("prefetch"),
+      isInternal: isInternalLink(link.href),
+      willObserve: shouldObserve,
+    });
+
+    if (shouldObserve) {
+      observer.observe(link);
+      log("👀 Now observing link:", link.href);
+    }
   });
 };
 
@@ -207,7 +234,15 @@ const startRouter = (options = {}) => {
     }
   });
 
-  const observer = new IntersectionObserver(handleLinkIntersection, { root: null, threshold: 0.5 });
+  const observer = new IntersectionObserver(handleLinkIntersection, {
+    root: null,
+    threshold: 0.5,
+  });
+  log("🎭 Created Intersection Observer with config:", {
+    root: "viewport",
+    threshold: 0.5,
+  });
+
   observeLinks(observer);
 };