stx-router 0.2.383 → 0.2.385

package/dist/client.js

@@ -182,8 +182,14 @@ function routerSource() {
     log('[router] build skew: page is',loadedBuild,'server is',incoming,'\u2014 full navigation');
     location.href=url;
   }
+  // A link marked data-stx-transition="none" swaps without the cross-fade. A
+  // tab bar is the case: iOS switches tabs instantly, and the fade read as a
+  // quarter-second lag on every tap in a phone app. Set by the click that
+  // started the navigation, so programmatic and history navigations keep it.
+  var instantNext=false;
+  var instantNav=false;
   function runViewTransition(callback){
-    if(!o.viewTransitions||!document.startViewTransition)return false;
+    if(instantNav||!o.viewTransitions||!document.startViewTransition)return false;
     try{
       var transition=document.startViewTransition(callback);
       var onAbort=function(err){log('[router] view transition aborted:',err&&err.message?err.message:err)};
@@ -210,19 +216,28 @@ function routerSource() {
     progEl.style.opacity=progVal>0?'1':'0';
     progEl.style.transform='scaleX('+(progVal/100)+')';
   }
+  // Shown only for a navigation that is actually waiting. A page served from
+  // the prefetch cache swaps in a few milliseconds, and drawing then fading a
+  // bar for it made every instant navigation look like a load.
+  var progDelay=null;
   function startProgress(){
     if(!o.progress||!progEl)return;
     if(progTimer){clearInterval(progTimer);progTimer=null}
-    setProgress(8);
-    progTimer=setInterval(function(){
-      if(progVal>=90)return;
-      // Asymptotic trickle \u2014 fast at first, slower near 90%
-      var inc=Math.max(0.4,(90-progVal)*0.08);
-      setProgress(progVal+inc);
-    },160);
+    if(progDelay)clearTimeout(progDelay);
+    progDelay=setTimeout(function(){
+      progDelay=null;
+      setProgress(8);
+      progTimer=setInterval(function(){
+        if(progVal>=90)return;
+        // Asymptotic trickle \u2014 fast at first, slower near 90%
+        var inc=Math.max(0.4,(90-progVal)*0.08);
+        setProgress(progVal+inc);
+      },160);
+    },150);
   }
   function finishProgress(){
     if(!o.progress||!progEl)return;
+    if(progDelay){clearTimeout(progDelay);progDelay=null;return}
     if(progTimer){clearInterval(progTimer);progTimer=null}
     setProgress(100);
     // Fade out, then reset. Delays chosen so the "full" state is briefly
@@ -499,19 +514,13 @@ function routerSource() {
    * Column-anchored: a declaration nested inside a function is indented, and
    * is not in scope at the end of the block anyway.
    */
-  var TOP_LEVEL_DECL=/^(?:export\\s+)?(?:async\\s+)?(?:function\\s*\\*?|class|const|let|var)\\s+([A-Za-z_$][\\w$]*)/gm;
+  var TLD=/^(?:export\\s+)?(?:async\\s+)?(?:function\\s*\\*?|class|const|let|var)\\s+([$\\w]+)/gm;
   function republishTopLevel(src){
-    var names=[],m;
-    TOP_LEVEL_DECL.lastIndex=0;
-    while((m=TOP_LEVEL_DECL.exec(src))!==null){
-      if(names.indexOf(m[1])===-1)names.push(m[1]);
-    }
-    if(!names.length)return '';
-    var out='\\n;';
-    for(var i=0;i<names.length;i++){
-      out+='try{if(typeof '+names[i]+'==="function")window.'+names[i]+'='+names[i]+'}catch(e){}';
-    }
-    return out;
+    var n=[],m,o='',i;
+    TLD.lastIndex=0;
+    while((m=TLD.exec(src))!==null)if(n.indexOf(m[1])<0)n.push(m[1]);
+    for(i=0;i<n.length;i++)o+='try{typeof '+n[i]+'=="function"&&(window.'+n[i]+'='+n[i]+')}catch(e){}';
+    return o?'\\n;'+o:'';
   }
   function runsAlways(declared, code){
     if(declared==='always')return true;
@@ -824,6 +833,8 @@ function routerSource() {
     if(pushState!==false&&t.href===location.href&&!t.hash&&!force)return Promise.resolve(false);
 
     isNavigating=true;
+    instantNav=instantNext;
+    instantNext=false;
     document.body.classList.add(o.loadingClass);
     startProgress();
 
@@ -1359,6 +1370,7 @@ else {
             }catch(err){reject(err)}
           }
           if(runViewTransition(completeFragSwap)){}
+          else if(instantNav){completeFragSwap()}
           else{currentContent.style.transition='opacity 0.12s ease-out';currentContent.style.opacity='0';setTimeout(function(){completeFragSwap();currentContent.style.opacity='1';setTimeout(function(){currentContent.style.transition=''},150)},120)}
         });
       }
@@ -1809,6 +1821,10 @@ else {
         }
         if(runViewTransition(completeSwap)){
         }
+        else if(instantNav){
+          // A tab: swap at once, no fade either way.
+          completeSwap();
+        }
         else {
           // Fallback fade for browsers without View Transitions API
           currentContent.style.transition='opacity 0.12s ease-out';
@@ -1927,6 +1943,7 @@ else {
     e.preventDefault();
     e.stopPropagation();
     log('[router] navigating to:',href);
+    instantNext=link.getAttribute('data-stx-transition')==='none';
     navigate(withCurrentLocale(href));
   });
 

package/package.json

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