stx-router 0.2.113 → 0.2.115

package/dist/client.js

@@ -16,6 +16,7 @@ export function getRouterScript() {
     try{
       var transition=document.startViewTransition(callback);
       var onAbort=function(err){log('[router] view transition aborted:',err&&err.message?err.message:err)};
+      if(transition&&transition.ready&&transition.ready.catch)transition.ready.catch(onAbort);
       if(transition&&transition.finished&&transition.finished.catch)transition.finished.catch(onAbort);
       if(transition&&transition.updateCallbackDone&&transition.updateCallbackDone.catch)transition.updateCallbackDone.catch(onAbort);
       return true;
@@ -209,6 +210,18 @@ export function getRouterScript() {
     var h=0;for(var i=0;i<code.length;i++){h=((h<<5)-h)+code.charCodeAt(i);h|=0}
     return h;
   }
+  function hasStaticImport(code){
+    return /(?:^|\\n)[ \\t]*import(?:[ \\t]+|[{*'"])/.test(code);
+  }
+  function generatedSetupName(code){
+    var match=code.match(/function (__stx_setup_[A-Za-z0-9_]+)\\s*\\(/);
+    return match?match[1]:'';
+  }
+  function isSignalsRuntimeScript(script,code){
+    return !!(script&&script.hasAttribute&&script.hasAttribute('data-stx-runtime'))
+      ||(code.indexOf('_cleanupContainer')!==-1&&code.indexOf('signals runtime loading')!==-1)
+      ||code.indexOf("'use strict';var cloakStyle")!==-1;
+  }
   // Record scripts from the initial page load
   document.querySelectorAll('script').forEach(function(s){
     var text=s.textContent||'';
@@ -400,10 +413,15 @@ else {
       function doFragSwap(){
         // Extract scripts from fragment before injecting HTML
         var fragScripts=[];
+        var fragScriptId=0;
         var fragStyles=[];
         var fragCrosswindCSS=null;
-        var cleanFrag=html.replace(new RegExp('<scr'+'ipt\\\\b[^>]*>([\\\\s\\\\S]*?)<\\\\/scr'+'ipt>','gi'),function(m,code){
-          if(code&&code.trim())fragScripts.push(code);
+        var cleanFrag=html.replace(new RegExp('<scr'+'ipt\\\\b([^>]*)>([\\\\s\\\\S]*?)<\\\\/scr'+'ipt>','gi'),function(m,attrs,code){
+          if(code&&code.trim()&&!isSignalsRuntimeScript({hasAttribute:function(name){return name==='data-stx-runtime'&&attrs.indexOf('data-stx-runtime')!==-1}},code)){
+            var slot='fragment-'+(++fragScriptId);
+            fragScripts.push({text:code,slot:slot,setupName:generatedSetupName(code)});
+            return '<scr'+'ipt type="application/stx-pending" data-stx-route-script="'+slot+'"></scr'+'ipt>';
+          }
           return '';
         });
         cleanFrag=cleanFrag.replace(new RegExp('<sty'+'le\\\\b([^>]*)>([\\\\s\\\\S]*?)<\\\\/sty'+'le>','gi'),function(m,attrs,css){
@@ -452,7 +470,9 @@ else {
         // Execute page scripts FIRST \u2014 they define setup functions and set _latestSetup
         log('[router] frag scripts:', fragScripts.length);
         document.querySelectorAll('script[data-stx-page]').forEach(function(s){s.remove()});
-        fragScripts.forEach(function(code){
+        fragScripts.sort(function(a,b){return (a.setupName?1:0)-(b.setupName?1:0)});
+        fragScripts.forEach(function(entry){
+          var code=entry.text;
           log('[router] exec script len:', code.length, 'has __stx_setup:', code.indexOf('__stx_setup')>-1);
           // Skip scripts that were already executed (layout-level partials
           // like theme.stx, stores.stx, nav.stx). Their top-level const/let
@@ -478,13 +498,19 @@ else {
           }
           executedScriptHashes[h]=1;
           var ns=document.createElement('script');
-          var hasImport=code.indexOf('import ')!==-1;
+          var hasImport=hasStaticImport(code);
           if(hasImport){
             ns.type='module';
           }
           ns.textContent=(hasImport||isAlreadyScoped)?code:'{'+code+'}';
           ns.setAttribute('data-stx-page','');
-          document.body.appendChild(ns);
+          var placeholder=document.querySelector('script[data-stx-route-script="'+entry.slot+'"]');
+          if(placeholder&&placeholder.parentNode){
+            ns.setAttribute('data-stx-positioned','');
+            placeholder.parentNode.replaceChild(ns,placeholder);
+          }else{
+            document.body.appendChild(ns);
+          }
         });
         log('[router] scripts done. _latestSetup:', !!window.stx._latestSetup);
         // THEN fire stx:load \u2014 now _latestSetup is set and processElement has the right scope
@@ -593,10 +619,35 @@ else {
         var newGroup=getDocLayoutGroup(doc,newLayout);
         isLayoutChange=curGroup!==newGroup||(curLayout&&newLayout&&curLayout!==newLayout);
       }
+      var incomingSetupName=newBody?(newBody.getAttribute('data-stx')||''):'';
+      // Scripts assigned through innerHTML are inert. Preserve executable
+      // scripts as placeholders so re-execution keeps document.currentScript
+      // beside the component template it owns.
+      var routedBodyScripts=[];
+      var routedBodyScriptId=0;
+      function prepareRoutedBodyScripts(root){
+        if(!root)return;
+        root.querySelectorAll('script').forEach(function(s){
+          var text=s.textContent||'';
+          if(s.hasAttribute('src')){s.remove();return}
+          var type=(s.getAttribute('type')||'').trim().toLowerCase();
+          var executable=!type||type==='text/javascript'||type==='application/javascript'||type==='module';
+          if(!executable||!text.trim())return;
+          if(isSignalsRuntimeScript(s,text)||text.indexOf('__stxRouter')!==-1){s.remove();return}
+          var slot='document-'+(++routedBodyScriptId);
+          var setupName=generatedSetupName(text);
+          if(setupName)incomingSetupName=setupName;
+          routedBodyScripts.push({text:text,runAlways:true,slot:slot,setupName:setupName});
+          s.textContent='';
+          s.setAttribute('type','application/stx-pending');
+          s.setAttribute('data-stx-route-script',slot);
+        });
+      }
+      prepareRoutedBodyScripts(isLayoutChange?newBody:newContent);
       if(isLayoutChange&&newBody){
         log('[router] full body swap for layout change');
         // Replace entire body content \u2014 layout chrome and all
-        var bodyHTML=newBody.innerHTML.replace(new RegExp('<scr'+'ipt\\\\b[^>]*>[\\\\s\\\\S]*?<\\\\/scr'+'ipt\\\\s*>','gi'),'');
+        var bodyHTML=newBody.innerHTML;
         document.body.innerHTML=bodyHTML;
         // Copy body attributes (class, data-stx, etc.)
         Array.from(newBody.attributes).forEach(function(attr){document.body.setAttribute(attr.name,attr.value)});
@@ -618,8 +669,9 @@ else {
         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'),'');
+        var cleanHTML=newContent.innerHTML;
         currentContent.innerHTML=cleanHTML;
+        if(incomingSetupName)document.body.setAttribute('data-stx',incomingSetupName);
       }
 
       // \u2500\u2500 Load new external <head> scripts \u2500\u2500
@@ -645,40 +697,20 @@ else {
       // Remove previously injected page scripts
       document.querySelectorAll('script[data-stx-page]').forEach(function(s){s.remove()});
 
-      var scripts=[];
-      function addScript(text, runAlways){
-        scripts.push({text:text,runAlways:!!runAlways});
+      var scripts=routedBodyScripts.slice();
+      function addScript(text, runAlways, slot){
+        scripts.push({text:text,runAlways:!!runAlways,slot:slot||''});
       }
       if(isLayoutChange){
-        // Layout change: collect ALL scripts from the new document body
-        // (layout scripts, component mounts, setup functions \u2014 everything)
-        var newBodyEl=doc.querySelector('body');
-        if(newBodyEl){
-          newBodyEl.querySelectorAll('script').forEach(function(s){
-            var text=s.textContent||'';
-            if(s.hasAttribute('src'))return;
-            if(!text.trim())return;
-            // Skip the signals runtime IIFE \u2014 it's already loaded
-            if(text.indexOf("'use strict';var cloakStyle")!==-1)return;
-            if(text.indexOf('__stxRouter')!==-1)return;
-            addScript(text,true);
-          });
-        }
         // Also collect setup functions from <head>
         doc.querySelectorAll('head script').forEach(function(s){
           var text=s.textContent||'';
           if(s.hasAttribute('src'))return;
           if(!text.trim())return;
+          if(isSignalsRuntimeScript(s,text))return;
           if(text.indexOf('__stx_setup_')!==-1)addScript(text,true);
         });
       } else {
-        // Same layout: collect scripts from the container
-        newContent.querySelectorAll('script').forEach(function(s){
-          var text=s.textContent||'';
-          if(s.hasAttribute('src'))return;
-          if(!text.trim())return;
-          addScript(text,true);
-        });
         // Collect page scripts from <head> AND <body> (outside container).
         // SSG builds place the setup function in <body> before <main>, not
         // in <head>. Without this, SPA navigation on static sites never
@@ -690,16 +722,26 @@ else {
           if(s.hasAttribute('src'))return;
           if(!text.trim())return;
           // Skip signals runtime and router (they contain __stx_setup references but aren't setup functions)
-          if(text.indexOf("'use strict';var cloakStyle")!==-1)return;
+          if(isSignalsRuntimeScript(s,text))return;
           if(text.indexOf('__stxRouter')!==-1)return;
           if(newContent.contains(s))return;
-          if(text.indexOf('__stx_setup_')===-1&&!s.hasAttribute('data-stx-scoped')&&!s.hasAttribute('data-stx-page'))return;
+          if(text.indexOf('__stx_setup_')===-1&&!s.hasAttribute('data-stx-scoped')&&!s.hasAttribute('data-stx-page')&&!s.hasAttribute('data-stx-route-params'))return;
           var key=text.substring(0,80);
           if(seenSetups[key])return;
           seenSetups[key]=1;
           addScript(text,true);
         });
       }
+      // Component setup scripts also assign window.stx._latestSetup. Run the
+      // destination page setup last so stx:load hydrates with the page scope,
+      // not whichever nested component happened to render last.
+      if(incomingSetupName){
+        scripts.sort(function(a,b){
+          var aPage=(a.setupName||generatedSetupName(a.text))===incomingSetupName?1:0;
+          var bPage=(b.setupName||generatedSetupName(b.text))===incomingSetupName?1:0;
+          return aPage-bPage;
+        });
+      }
 
       // Push history state (before active link updates so location.pathname is current)
       if(pushState!==false)history.pushState({},'',url+(hash||''));
@@ -738,7 +780,7 @@ else {
           // need special handling.
           var h=hashScript(text);
           var isSetup=text.indexOf('__stx_setup_')!==-1;
-          var hasImport=text.indexOf('import ')!==-1;
+          var hasImport=hasStaticImport(text);
           if(!runAlways&&!isSetup&&executedScriptHashes[h])return;
           executedScriptHashes[h]=1;
           // Wrap scripts with import statements as modules (Bug 3 fix)
@@ -755,7 +797,13 @@ else {
           var alreadyScoped=text.trimStart().charAt(0)==='('||text.trimStart().charAt(0)===';'||text.indexOf('window.stx.mount')>-1;
           ns.textContent=(hasImport||alreadyScoped)?text:'{'+text+'}';
           ns.setAttribute('data-stx-page','');
-          document.body.appendChild(ns);
+          var placeholder=entry.slot?document.querySelector('script[data-stx-route-script="'+entry.slot+'"]'):null;
+          if(placeholder&&placeholder.parentNode){
+            ns.setAttribute('data-stx-positioned','');
+            placeholder.parentNode.replaceChild(ns,placeholder);
+          }else{
+            document.body.appendChild(ns);
+          }
         });
         // THEN fire stx:load \u2014 now _latestSetup is set and processElement has the right scope
         window.dispatchEvent(new Event('stx:load'));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stx-router",
   "type": "module",
-  "version": "0.2.113",
+  "version": "0.2.115",
   "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",