stx-router 0.2.531 → 0.2.533

package/dist/client.js

@@ -188,7 +188,13 @@ function routerSource() {
     releaseScrollHold();
     var reached=function(){return Math.abs((window.pageYOffset||window.scrollY||0)-y)<2};
     if(typeof ResizeObserver!=='function')return;
-    var h={stop:releaseScrollHold,ro:null,timer:0,onScroll:null,anchor:null,win:window,root:document.documentElement};
+    var h={stop:releaseScrollHold,ro:null,timer:0,onScroll:null,anchor:null,win:window,root:document.documentElement,seen:{}};
+    // Every place the page was at while the hold kept it: where the hold put
+    // it, and where the page's own height clamped it as it grew and shrank.
+    // Their scroll events arrive a frame later, when the height they were
+    // clamped to may be gone, so they are recognised by place, not by height.
+    var note=function(){h.seen[Math.round(window.pageYOffset||window.scrollY||0)]=true};
+    note();
     // Scroll anchoring off while held: content filling in above the place
     // would otherwise carry the window down with it (Chrome keeps what is
     // on screen in view), and Back landed thousands of pixels past it.
@@ -198,8 +204,11 @@ function routerSource() {
       // Held for the whole window even once reached: a page that is tall
       // enough when it is put back is often still drawing, above the place
       // as much as below it.
-      if(scrollHold!==h||reached())return;
+      if(scrollHold!==h)return;
+      note();
+      if(reached())return;
       window.scrollTo({left:x,top:y,behavior:'instant'});
+      note();
     });
     h.ro.observe(document.body||document.documentElement);
     h.timer=setTimeout(releaseScrollHold,4000);
@@ -210,7 +219,7 @@ function routerSource() {
     h.onScroll=function(){
       var at=window.pageYOffset||window.scrollY||0;
       var end=Math.max(0,(document.documentElement.scrollHeight||0)-(window.innerHeight||0));
-      if(Math.abs(at-y)<2||(at<y&&at>=end-1))return;
+      if(Math.abs(at-y)<2||(at<y&&at>=end-1)||h.seen[Math.round(at)])return;
       releaseScrollHold();
     };
     window.addEventListener('scroll',h.onScroll,{passive:true});
@@ -799,6 +808,35 @@ function routerSource() {
     var scopeId=root.getAttribute('data-stx-scope');
     return !!scopeId&&code.indexOf(scopeId)!==-1;
   }
+  // A script inside an :if (or :else) template runs when the branch is
+  // drawn: on a whole page the browser runs it as the runtime clones the
+  // template into the page, which is how a component used under :if gets its
+  // scope. A fragment's scripts are all turned into inert placeholders, and
+  // one inside template.content is out of the router's reach, so it never ran
+  // at all: the component's markup appeared with no setup behind it (an
+  // <OuraRecovery :if> on a page reached by a link stayed empty). Such a
+  // placeholder is made a live script again, so the branch runs it exactly as
+  // a whole page would. Loop templates keep theirs inert: bindFor runs those per
+  // row. Returns the slots it handed over, for runFragScripts to leave alone.
+  function armBranchScripts(root,slots){
+    if(!root||!root.querySelectorAll)return slots;
+    root.querySelectorAll('template').forEach(function(template){
+      if(hasLoopAttr(template)||!template.content)return;
+      template.content.querySelectorAll('script[type="application/stx-pending"][data-stx-route-script]').forEach(function(script){
+        if(script.hasAttribute('data-stx-scoped')&&loopOwnsScopedScript(script,script.textContent||''))return;
+        slots[script.getAttribute('data-stx-route-script')]=true;
+        // A new element, not the placeholder untyped: a script parsed by
+        // innerHTML is marked as already run, and so is every clone of it.
+        var live=script.ownerDocument.createElement('script');
+        var names=script.getAttributeNames?script.getAttributeNames():Array.prototype.map.call(script.attributes,function(a){return a.name});
+        names.forEach(function(name){if(name!=='type')live.setAttribute(name,script.getAttribute(name))});
+        live.textContent=script.textContent;
+        script.parentNode.replaceChild(live,script);
+      });
+      armBranchScripts(template.content,slots);
+    });
+    return slots;
+  }
   // A component scope script names the root it binds in data-stx-owner (#1958).
   // On navigation it runs only for a root that just ARRIVED: one swapped in
   // with the new content, which is not bound yet. A layout component that
@@ -1236,6 +1274,7 @@ function routerSource() {
       isNavigating=false;navAbort=null;
       document.body.classList.remove(o.loadingClass);finishProgress();
       settleDirection();
+      if(openingUrl&&location.pathname+location.search!==openingUrl)keepOpeningPage();
     }
     function stale(){return id!==navSeq}
     // A failed fetch keeps the app: the destination shows a way to try again
@@ -1714,6 +1753,7 @@ else {
             return '<scr'+'ipt type="application/stx-pending" data-stx-route-script="'+slot+'"'
               +(scoped?' data-stx-scoped':'')
               +(runDecl?' data-stx-run="'+runDecl.toLowerCase()+'"':'')
+              +(ownerDecl?' data-stx-owner="'+ownerDecl+'"':'')
               +'>'+code+'<\\/scr'+'ipt>';
           }
           return '';
@@ -1774,6 +1814,7 @@ else {
         if(scr)scr.cattrs=pendingContainerAttrs;
         applyContainerAttrs(host,pendingContainerAttrs);
         currentContent.innerHTML=cleanFrag;
+        var branchSlots=armBranchScripts(currentContent,{});
         // Remove old page scripts
         qsa('script[data-stx-page]').forEach(function(s){s.remove()});
         if(pushState!==false)writeHistory(pushState,url+(hash||''));
@@ -1800,6 +1841,10 @@ else {
         fragScripts.forEach(function(entry){
           var code=entry.text;
           log('[router] exec script len:', code.length, 'has __stx_setup:', code.indexOf('__stx_setup')>-1);
+          if(branchSlots&&branchSlots[entry.slot]){
+            log('[router] leaving a branch script to its :if');
+            return;
+          }
           var placeholder=qs('script[data-stx-route-script="'+entry.slot+'"]');
           var nestedScopedTemplate=false;
           var scopedLoopSetup=false;
@@ -3584,14 +3629,22 @@ else {
   // The page the app was opened on came as a whole document, so it is the
   // one page the cache never holds: Back to it went to the server and left
   // the page being read on screen under the new address until it answered
-  // (a second or more on a distant server). Once the page is idle its
-  // fragment is fetched, the same request a link to it would make, so Back
-  // is a swap like every other.
+  // (a second or more on a distant server). Once the router has taken the
+  // person somewhere else its fragment is fetched, the same request a link
+  // to it would make, so Back is a swap like every other.
+  //
+  // Not before: the fragment is answered no-store, and a document that has
+  // fetched a no-store response is kept out of the back/forward cache. Done
+  // on load, it cost the opening page its instant restore when the person
+  // left the app and came back (a full-document Back). A router navigation
+  // has already fetched one, so after it nothing more is lost.
+  var openingUrl=location.pathname+location.search;
   function keepOpeningPage(){
-    if(!o.cache||!shouldUseFragmentResponse())return;
+    var url=openingUrl;
+    openingUrl='';
+    if(!url||!o.prefetch||o.keepOpening===false||!o.cache||!shouldUseFragmentResponse())return;
     var c=navigator.connection;
     if(c&&(c.saveData||/2g/.test(c.effectiveType||'')))return;
-    var url=location.pathname+location.search;
     var key=cacheKey(url);
     // Late by design, so it can find the page gone (a test's document torn
     // down, a full navigation begun): never let that throw from a timer.
@@ -3887,8 +3940,6 @@ else {
     restoreKeptPages();
     prefetchEager();
     observeLinks();
-    // The runtime's first stx:load has usually gone by when this runs.
-    if(o.prefetch&&o.keepOpening!==false)keepOpeningPage();
   }
 
   if(document.readyState==='loading')document.addEventListener('DOMContentLoaded',init);else init();

package/package.json

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