bun-plugin-stx 0.2.110 → 0.2.112

package/dist/{chunk-0kwywfp1.js → chunk-atra2pxg.js}

@@ -657,24 +657,65 @@ 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)}
@@ -686,6 +727,7 @@ 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).
@@ -739,6 +781,7 @@ 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.
@@ -753,7 +796,10 @@ 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).
@@ -810,7 +856,12 @@ 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}
 
@@ -858,6 +909,7 @@ function getRouterScript() {
         }).finally(done);
         return;
       }
+      pendingContainerAttrs=attrsCache[targetPath]||'';
       swap(cache[targetPath],targetPath,pushState,targetHash);
       applyTitle(titleCache[targetPath]);
       done();
@@ -874,6 +926,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');
@@ -886,11 +939,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.
@@ -963,7 +1017,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()});
@@ -1074,6 +1131,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>)
@@ -1107,7 +1193,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;
       }
@@ -1117,7 +1208,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/dist/serve.js

@@ -8702,6 +8702,7 @@ var defaultGeneratedDir4 = resolve12(process20.cwd(), "src/generated");
 // src/serve.ts
 import { stateDir, stateDirName } from "@stacksjs/stx";
 var defaultStxModule = import("@stacksjs/stx");
+var REACTIVE_TEMPLATE_DIRECTIVE_RE = /@for|:for|@if|:if|@else|:else|x-for|x-if|x-else/;
 function buildDynamicRouteRegexes(fileRouteBase) {
   const toPattern = (p) => p.replace(/\[([^\]]+)\]/g, "([^/]+)").replace(/\//g, "\\/");
   const patterns = [new RegExp(`^${toPattern(fileRouteBase)}$`)];
@@ -9289,7 +9290,7 @@ After installing: bun add bun-plugin-stx`);
     pageMiddlewarePatterns.length = 0;
     await Promise.all(files.map((f) => detectPageMiddleware(f)));
     try {
-      const { Router } = await import("./chunk-0kwywfp1.js");
+      const { Router } = await import("./chunk-atra2pxg.js");
       const pagesDirs = patterns.map((p) => p.replace(/\/$/, "")).filter(Boolean);
       const router = new Router(process19.cwd(), { pagesDirs, stateDir: stateDirName() });
       if (!options.quiet)
@@ -9518,8 +9519,8 @@ After installing: bun add bun-plugin-stx`);
     const dependencies = new Set;
     output = await processDirectives(output, context, filePath, config5, dependencies);
     output = await injectRouterScript(output, getRouterInjectOptions());
-    const directiveTemplateRe = /@for|:for|@if|:if|x-for|x-if/;
-    const hasDirectiveTemplates = /<template\s[^>]*(?:@for|:for|@if|:if|x-for|x-if)/.test(output);
+    const directiveTemplateRe = REACTIVE_TEMPLATE_DIRECTIVE_RE;
+    const hasDirectiveTemplates = new RegExp(`<template\\s[^>]*(?:${REACTIVE_TEMPLATE_DIRECTIVE_RE.source})`).test(output);
     if (hasDirectiveTemplates) {
       output = output.replace(/<template(?:\s[^>]*)?>|<\/template>/gi, (match) => {
         if (directiveTemplateRe.test(match))
@@ -9702,7 +9703,7 @@ ${output}`;
       }
     }
     output = await injectRouter(output, getRouterInjectOptions());
-    const directiveTemplateRe2 = /@for|:for|@if|:if|x-for|x-if/;
+    const directiveTemplateRe2 = REACTIVE_TEMPLATE_DIRECTIVE_RE;
     output = output.replace(/<template(?:\s[^>]*)?>|<\/template>/gi, (match) => {
       if (directiveTemplateRe2.test(match))
         return match;
@@ -10103,6 +10104,7 @@ ${html}`;
                   const groupMetaMatch = content.match(/<meta\b[^>]*name=["']stx-layout-group["'][^>]*content=["']([^"']+)["'][^>]*>/i);
                   const pageLayoutGroup = i18nConfig && i18nLocale ? `i18n:${i18nLocale}` : groupMetaMatch?.[1] || deriveLayoutGroup(pageLayout);
                   let fragment = content;
+                  let containerAttrs = "";
                   const headStyles = [];
                   const headMatch = content.match(/<head\b[^>]*>([\s\S]*?)<\/head>/i);
                   if (headMatch) {
@@ -10139,6 +10141,7 @@ ${html}`;
                         headStyles.push(bodyStyleMatch[0]);
                       }
                     }
+                    containerAttrs = mainOpenMatch[0].replace(/^<main\b/i, "").replace(/\/?>$/, "").trim();
                     const mainStart = mainOpenMatch.index + mainOpenMatch[0].length;
                     fragment = fragment.slice(mainStart, mainCloseIdx).trim();
                   }
@@ -10174,6 +10177,7 @@ ${pageSetupScripts.join(`
                       "X-STX-Layout": pageLayout,
                       "X-STX-Layout-Group": pageLayoutGroup,
                       ...pageTitle && { "X-STX-Title": encodeURIComponent(pageTitle) },
+                      ...containerAttrs && { "X-STX-Container-Attrs": encodeURIComponent(containerAttrs) },
                       "Cache-Control": "no-store",
                       ...corsHeaders
                     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bun-plugin-stx",
   "type": "module",
-  "version": "0.2.110",
+  "version": "0.2.112",
   "description": "A Bun plugin that allows for using Laravel Blade-like syntax.",
   "author": "Chris Breuer <chris@stacksjs.org>",
   "license": "MIT",