@pacem/pacem-ui 2.0.0-cauchy → 2.0.0-chebyshev

package/dist/browser/pacem-ui.js

@@ -1,5 +1,5 @@
 /*!
- * @pacem/pacem-ui v2.0.0-cauchy (https://js.pacem.it)
+ * @pacem/pacem-ui v2.0.0-chebyshev (https://js.pacem.it)
  * Pacem (https://pacem.it)
  * Licensed under Apache-2.0
  */
@@ -5934,6 +5934,8 @@ css-class="{{ ['hour-start-'+ (^item.hour + 1), 'hour-end-'+ (^item.hour + ^item
     let PacemViewElement = class PacemViewElement extends pacemCore.PacemEventTarget {
         constructor() {
             super(...arguments);
+            /** Bumped by every new content: a pending `render` dispatch from superseded content is dropped. */
+            this.#renderVersion = 0;
             this._templateChangeHandler = (evt) => {
                 const tmplProxy = evt.target;
                 this._setTmpl(tmplProxy.target);
@@ -5951,6 +5953,8 @@ css-class="{{ ['hour-start-'+ (^item.hour + 1), 'hour-end-'+ (^item.hour + ^item
                 }, 100 /* tenth of a second limit */);
             };
         }
+        /** Bumped by every new content: a pending `render` dispatch from superseded content is dropped. */
+        #renderVersion;
         propertyChangedCallback(name, old, val, first) {
             super.propertyChangedCallback(name, old, val, first);
             // url
@@ -6015,6 +6019,7 @@ css-class="{{ ['hour-start-'+ (^item.hour + 1), 'hour-end-'+ (^item.hour + ^item
         }
         _setTmpl(tmpl) {
             cancelAnimationFrame(this._renderHandle);
+            this.#renderVersion++;
             // this way, `this._container.innerHTML = ''` instruction will eventually let the page "scroll up"...
             this.innerHTML = '';
             this._dispatchPrerender();
@@ -6087,6 +6092,7 @@ css-class="{{ ['hour-start-'+ (^item.hour + 1), 'hour-end-'+ (^item.hour + ^item
         _manageResult(result) {
             // this way, `this._container.innerHTML = ''` instruction will eventually let the page "scroll up"...
             cancelAnimationFrame(this._renderHandle);
+            const version = ++this.#renderVersion;
             this.scrollTo({ top: 0, left: 0, behavior: 'instant' });
             this.innerHTML = '';
             this._dispatchPrerender();
@@ -6097,12 +6103,20 @@ css-class="{{ ['hour-start-'+ (^item.hour + 1), 'hour-end-'+ (^item.hour + ^item
                 // setting fetching to `false` triggers a css class change that could/should cause a css transition to happen
                 // TODO: manage to switch to native in a near future (https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API or https://youtu.be/oDcb3fvtETs)
                 pacemCore.Utils.addAnimationEndCallback(this, () => {
+                    if (version !== this.#renderVersion) {
+                        return;
+                    }
                     this._dispatchRender();
                 }, ANIM_TIMEOUT);
             });
         }
         #resizeHandle;
         _dispatchRender() {
+            // the view might have been removed meanwhile (e.g. a nested view whose container got re-rendered):
+            // no shell to host the resizer, nothing to notify.
+            if (!this.isConnected) {
+                return;
+            }
             const resizer = new pacemCore.Components.PacemResizeElement();
             resizer.target = this;
             resizer.addEventListener(pacemCore.Components.ResizeEventName, this._debounceDispatchHandler);