stx-router 0.2.382 → 0.2.384

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
@@ -472,6 +487,47 @@ function routerSource() {
   function isComposablesScript(s){
     return !!s&&((s.hasAttribute&&s.hasAttribute('data-stx-composables'))||COMPOSABLES_TEXT.test(s.textContent||''));
   }
+  /*
+   * What the block wrap below would otherwise hide (stacksjs/stx#2041).
+   *
+   * A re-executed script is wrapped in a bare block so that top-level const
+   * and let cannot collide across navigations. That wrap is invisible for a
+   * plain function declaration -- Annex B.3.3 still hoists its binding to the
+   * enclosing scope in sloppy mode -- and NOT invisible for anything else.
+   * async function, function*, class, const and let are all block-scoped, so
+   * the same source published a global when the browser parsed the script and
+   * published nothing when the router re-ran it.
+   *
+   * The effect is a divergence between development and a built app, because
+   * only the built one reaches a route as a fragment: a page served whole runs
+   * its script natively. An inline onclick that names such a declaration then
+   * worked in dev and threw ReferenceError in the packaged app, where there is
+   * no console, so it read as a button that does nothing.
+   *
+   * So: re-publish what the browser would have published. Only values that are
+   * functions, which is what an inline handler calls -- assigning every
+   * top-level const would otherwise write over window.name and friends, which
+   * a lexical global shadows rather than overwrites. Each name is guarded on
+   * its own so an unmatched one cannot take the rest down, and typeof is safe
+   * on a name that was never declared.
+   *
+   * 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;
+  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;
+  }
   function runsAlways(declared, code){
     if(declared==='always')return true;
     if(declared==='once')return false;
@@ -783,6 +839,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();
 
@@ -1318,6 +1376,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)}
         });
       }
@@ -1732,7 +1791,7 @@ else {
           // ESM, and top-level 'import' is illegal inside a block, which
           // would throw SyntaxError before the script ever runs.
           var alreadyScoped=runsAlways(typeof entry==='string'?'':entry.run,text);
-          ns.textContent=(hasImport||alreadyScoped)?text:'{'+text+'}';
+          ns.textContent=(hasImport||alreadyScoped)?text:'{'+text+republishTopLevel(text)+'}';
           ns.setAttribute('data-stx-page','');
           var placeholder=entry.slot?qs('script[data-stx-route-script="'+entry.slot+'"]'):null;
           if(placeholder&&placeholder.parentNode){
@@ -1768,6 +1827,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';
@@ -1886,6 +1949,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.382",
+  "version": "0.2.384",
   "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",