stx-router 0.2.111 → 0.2.113

package/dist/client.js

@@ -76,24 +76,65 @@ export function getRouterScript() {
   // rather than a Map to keep the diff localized and the runtime
   // hand-minified shape consistent.
   var cacheOrder=[];
-  function setCache(key,html,layout,group,title){
+  function setCache(key,html,layout,group,title,cattrs){
     if(!(key in cache))cacheOrder.push(key);
     cache[key]=html;
     layoutCache[key]=layout;
     layoutGroupCache[key]=group;
     titleCache[key]=title||'';
+    attrsCache[key]=cattrs||'';
     while(cacheOrder.length>o.prefetchCacheMax){
       var oldest=cacheOrder.shift();
       delete cache[oldest];
       delete layoutCache[oldest];
       delete layoutGroupCache[oldest];
       delete titleCache[oldest];
+      delete attrsCache[oldest];
     }
   }
   // Apply a page title captured from the fragment response's X-STX-Title
   // header (URI-encoded) so SPA swaps keep document.title in sync with the
   // page \u2014 full-document swaps set the title from the <title> tag directly.
   function applyTitle(t){if(t){try{document.title=decodeURIComponent(t)}catch(e){document.title=t}}}
+  // \u2500\u2500 Container attributes \u2500\u2500
+  // A fragment carries only the container's INNER content, so any layout that
+  // lives on the destination's <main> itself (e.g. a centered auth page whose
+  // <main> carries flex + min-h-[100dvh] + items-center) would be
+  // dropped when injected into the persistent container. The server sends the
+  // destination container's attributes in X-STX-Container-Attrs (URI-encoded);
+  // we apply them here and track what we applied so navigating onward to a page
+  // with a bare <main> clears them again. Attributes the router never applied
+  // (the app's own id/data-stx-content hooks) are left untouched.
+  var pendingContainerAttrs='';
+  function parseContainerAttrs(attrStr){
+    var map={};
+    if(!attrStr)return map;
+    var probe=document.createElement('div');
+    probe.innerHTML='<i '+attrStr+'></i>';
+    var src=probe.firstChild;
+    if(src&&src.attributes){
+      Array.prototype.forEach.call(src.attributes,function(a){map[a.name]=a.value});
+    }
+    return map;
+  }
+  function setContainerAttrs(el,map){
+    if(!el)return;
+    var prev=(el.getAttribute('data-stx-cattrs')||'').split(',');
+    prev.forEach(function(n){if(n&&!(n in map))el.removeAttribute(n)});
+    var names=[];
+    for(var k in map){
+      if(Object.prototype.hasOwnProperty.call(map,k)&&k!=='data-stx-cattrs'){
+        el.setAttribute(k,map[k]);names.push(k);
+      }
+    }
+    if(names.length)el.setAttribute('data-stx-cattrs',names.join(','));
+    else el.removeAttribute('data-stx-cattrs');
+  }
+  function applyContainerAttrs(el,encoded){
+    var attrStr='';
+    if(encoded){try{attrStr=decodeURIComponent(encoded)}catch(e){attrStr=encoded}}
+    setContainerAttrs(el,parseContainerAttrs(attrStr));
+  }
   function touchCache(key){
     var i=cacheOrder.indexOf(key);
     if(i>=0){cacheOrder.splice(i,1);cacheOrder.push(key)}
@@ -105,6 +146,7 @@ export function getRouterScript() {
     delete layoutCache[key];
     delete layoutGroupCache[key];
     delete titleCache[key];
+    delete attrsCache[key];
   }
 
   // Extract top-level CSS blocks (rules AND @media blocks with nested braces).
@@ -158,6 +200,7 @@ export function getRouterScript() {
   var layoutCache={};
   var layoutGroupCache={};
   var titleCache={};
+  var attrsCache={};
   // Track executed script hashes to prevent redeclaration errors on navigation.
   // Layout-level scripts (theme, nav setup) execute on initial page load and
   // should NOT re-execute when navigating to another page with the same layout.
@@ -172,7 +215,10 @@ export function getRouterScript() {
     if(text.trim()&&!s.hasAttribute('src'))executedScriptHashes[hashScript(text)]=1;
   });
   function cacheKey(url){
-    var u=new URL(url,location.origin);
+    // Base is the CURRENT document, not the origin root: a relative key like
+    // '?status=resolved' on /dashboard must cache as /dashboard?status=resolved,
+    // not /?status=resolved (#1777).
+    var u=new URL(url,location.href);
     return u.pathname+u.search;
   }
   // Keep SPA fetches inside the active locale (/en/... when viewing English).
@@ -229,7 +275,12 @@ export function getRouterScript() {
     if(!force) url=withCurrentLocale(url);
     log('[router] navigate() called:',url,'isNavigating:',isNavigating);
     if(isNavigating)return;
-    var t=new URL(url,location.origin);
+    // Resolve against the current document URL, matching native <a> semantics.
+    // With location.origin as the base, any relative href ('?status=resolved',
+    // '#anchor', './sibling') resolved to the SITE ROOT \u2014 so filter tabs,
+    // pagination and sort links silently bounced users to the landing page once
+    // the SPA interceptor was active (#1777).
+    var t=new URL(url,location.href);
 
     if(t.origin!==location.origin){location.href=url;return}
 
@@ -277,6 +328,7 @@ export function getRouterScript() {
         }).finally(done);
         return;
       }
+      pendingContainerAttrs=attrsCache[targetPath]||'';
       swap(cache[targetPath],targetPath,pushState,targetHash);
       applyTitle(titleCache[targetPath]);
       done();
@@ -293,6 +345,7 @@ else {
         var newLayout=r.headers.get('X-STX-Layout')||'';
         var newGroup=r.headers.get('X-STX-Layout-Group')||'';
         var newTitle=r.headers.get('X-STX-Title')||'';
+        var newCAttrs=r.headers.get('X-STX-Container-Attrs')||'';
         // Layout change? Fetch the FULL page (no X-STX-Router header) and do full document swap
         if(isFragment&&checkLayoutChange(newLayout,url,newGroup)){
           log('[router] layout change \u2014 fetching full page for document swap');
@@ -305,11 +358,12 @@ else {
             });
           });
         }
-        return r.text().then(function(html){return{html:html,isFragment:isFragment,layout:newLayout,layoutGroup:newGroup,title:newTitle}});
+        return r.text().then(function(html){return{html:html,isFragment:isFragment,layout:newLayout,layoutGroup:newGroup,title:newTitle,containerAttrs:newCAttrs}});
       }).then(function(result){
         if(!result)return;
         if(result.isFragment)result.html='<!--stx-fragment-->'+result.html;
-        if(o.cache)setCache(targetPath,result.html,result.layout,result.layoutGroup,result.title);
+        if(o.cache)setCache(targetPath,result.html,result.layout,result.layoutGroup,result.title,result.containerAttrs);
+        pendingContainerAttrs=result.isFragment?(result.containerAttrs||''):'';
         swap(result.html,targetPath,pushState,targetHash);
         // Fragment swaps carry no <head>; apply the title from the header.
         // Full-document swaps already set document.title from the <title> tag.
@@ -382,7 +436,10 @@ else {
           el.setAttribute('data-stx-page','');
           document.head.appendChild(el);
         });
-        // Swap content
+        // Swap content \u2014 apply the destination container's own attributes first
+        // so the incoming markup lands in a correctly-laid-out container instead
+        // of flashing (or sticking) unstyled.
+        applyContainerAttrs(currentContent,pendingContainerAttrs);
         currentContent.innerHTML=cleanFrag;
         // Remove old page scripts
         document.querySelectorAll('script[data-stx-page]').forEach(function(s){s.remove()});
@@ -493,6 +550,35 @@ else {
 
       incoming.forEach(function(s){s.removeAttribute('data-stx-incoming')});
 
+      // \u2500\u2500 Swap <head> stylesheet / font <link>s \u2500\u2500
+      // Without this, an SPA navigation to a page whose <link rel="stylesheet">
+      // (or font/preconnect <link>) the current page had not already loaded left
+      // the swapped-in content completely unstyled (e.g. a page that pulls in its
+      // own marketing.css, or Google Fonts). Additive and href-deduped, mirroring
+      // the external <head script[src]> reconcile below \u2014 never removes existing
+      // links, so stylesheets shared across pages simply persist.
+      // Relative asset hrefs resolve against the document that declared them:
+      // the CURRENT page for links already in <head>, and the page being
+      // navigated TO for links from the fetched document. Against location.origin
+      // both collapsed to the site root, so 'assets/app.css' on /docs/intro
+      // deduped as /assets/app.css \u2014 the wrong file, and a false cache hit that
+      // skipped the real stylesheet (#1777).
+      var docBase;
+      try{docBase=new URL(url,location.href).href}catch(e){docBase=location.href}
+      var linkSel='link[rel="stylesheet"],link[rel="preconnect"]';
+      var curLinks={};
+      document.querySelectorAll('head '+linkSel).forEach(function(l){var h=l.getAttribute('href');if(h)curLinks[new URL(h,location.href).href]=1});
+      doc.querySelectorAll('head '+linkSel).forEach(function(l){
+        var href=l.getAttribute('href');
+        if(!href)return;
+        var abs=new URL(href,docBase).href;
+        if(curLinks[abs])return;
+        curLinks[abs]=1;
+        var nl=document.createElement('link');
+        Array.from(l.attributes).forEach(function(a){nl.setAttribute(a.name,a.value)});
+        document.head.appendChild(nl);
+      });
+
       // \u2500\u2500 Swap content \u2500\u2500
       // For layout changes: swap the entire <body> to replace layout chrome (nav, footer, etc.)
       // For same-layout: swap only the container (<main>)
@@ -526,7 +612,12 @@ else {
         // Update container reference for script execution below
         currentContent=document.querySelector(containerSel)||document.querySelector('main')||document.body;
       } else {
-        // Same layout \u2014 swap only container content
+        // Same layout \u2014 swap only container content. Carry the destination
+        // container's attributes across too (same reason as the fragment path:
+        // pages whose layout lives on <main> itself would otherwise lose it).
+        var attrMap={};
+        Array.prototype.forEach.call(newContent.attributes,function(a){attrMap[a.name]=a.value});
+        setContainerAttrs(currentContent,attrMap);
         var cleanHTML=newContent.innerHTML.replace(new RegExp('<scr'+'ipt\\\\b[^>]*>[\\\\s\\\\S]*?<\\\\/scr'+'ipt\\\\s*>','gi'),'');
         currentContent.innerHTML=cleanHTML;
       }
@@ -536,7 +627,9 @@ else {
       document.querySelectorAll('head script[src]').forEach(function(s){loadedSrcs[s.src]=1});
       var extPromises=[];
       doc.querySelectorAll('head script[src]').forEach(function(s){
-        var src=new URL(s.getAttribute('src'),location.origin).href;
+        // Fetched-document script: resolve against the page being navigated to
+        // (docBase), not the origin root \u2014 same rationale as the <link> reconcile (#1777).
+        var src=new URL(s.getAttribute('src'),docBase).href;
         if(loadedSrcs[src])return;
         loadedSrcs[src]=1;
         extPromises.push(new Promise(function(resolve,reject){

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stx-router",
   "type": "module",
-  "version": "0.2.111",
+  "version": "0.2.113",
   "description": "File-based router for STX — .stx template discovery, nested layouts, typed route params, middleware, and client-side SPA navigation.",
   "author": "Chris Breuer <chris@stacksjs.org>",
   "license": "MIT",