@pacem/pacem-ui 2.0.0-kepler → 2.0.0-lyapunov

package/dist/bundle/pacem-ui.mjs

@@ -1,5 +1,5 @@
 /*!
- * @pacem/pacem-ui v2.0.0-kepler (https://js.pacem.it)
+ * @pacem/pacem-ui v2.0.0-lyapunov (https://js.pacem.it)
  * Pacem (https://pacem.it)
  * Licensed under Apache-2.0
  */
@@ -5968,9 +5968,93 @@ var PacemViewElement = class PacemViewElement2 extends PacemEventTarget6 {
       this._manageRef();
     }
   }
+  disconnectedCallback() {
+    this._dispose(this.url);
+    super.disconnectedCallback();
+  }
   _isReference(url) {
     return url instanceof HTMLElement || typeof url === "string" && url.trim().startsWith("#");
   }
+  /**
+   * Resolves a reference source to its element, as {@link _manageRef} does: the element itself, or the
+   * `<template>` a `#id` string points to; `null` for anything else.
+   */
+  _resolveRef(source) {
+    if (source instanceof HTMLElement) {
+      return source;
+    }
+    if (typeof source !== "string" || !this._isReference(source)) {
+      return null;
+    }
+    return document.querySelector("template" + source);
+  }
+  /**
+   * Whether `url` is the source of the initial content ({@link initialContentUrl}): urls match by their string,
+   * references by the element they resolve to. Any other source consumes it.
+   */
+  _isInitialContent(url) {
+    const initial = this.initialContentUrl;
+    if (Utils32.isNull(initial)) {
+      return false;
+    }
+    let matches = false;
+    if (!this._isReference(url)) {
+      matches = typeof url === "string" && url === initial;
+    } else if (this._isReference(initial)) {
+      const target = this._resolveRef(url);
+      matches = !Utils32.isNull(target) && target === this._resolveRef(initial);
+    }
+    if (!matches) {
+      this.initialContentUrl = null;
+    }
+    return matches;
+  }
+  /**
+   * Keeps the initial content: announced once, as a fresh content would be (a reference may be managed twice on
+   * activation: the second time, it was announced already).
+   */
+  _adoptInitialContent() {
+    clearTimeout(this._fetchHandle);
+    if (this.#renderVersion > 0) {
+      return;
+    }
+    this._render(null);
+  }
+  /**
+   * The rendering pipeline of every content: a new version, `prerender`, the content on the next frame, `render`
+   * (dropped when newer content came meanwhile).
+   * @param fill Writes the new content (the former one is cleared first); `null` keeps the content already there
+   * (the initial content), which also leaves {@link initialContentUrl} in place.
+   * @param waitForAnimation Whether `render` waits for the view's css transition (see `fetching`) instead of
+   * following the content right away.
+   */
+  _render(fill, waitForAnimation = false) {
+    cancelAnimationFrame(this._renderHandle);
+    const version = ++this.#renderVersion;
+    const replacing = !Utils32.isNull(fill);
+    if (replacing) {
+      this.initialContentUrl = null;
+      this.innerHTML = "";
+    }
+    this._dispatchPrerender();
+    this._renderHandle = requestAnimationFrame(() => {
+      if (replacing) {
+        fill();
+      }
+      if (!waitForAnimation) {
+        this._dispatchRenderOf(version);
+        return;
+      }
+      Utils32.addAnimationEndCallback(this, () => this._dispatchRenderOf(version), ANIM_TIMEOUT);
+    });
+  }
+  /** Dispatches `render` for the content of `version`, unless newer content superseded it. */
+  _dispatchRenderOf(version) {
+    if (version !== this.#renderVersion) {
+      return;
+    }
+    this._dispatchRender();
+  }
   _dispose(url) {
     if (url instanceof Components33.PacemTemplateProxyElement) {
       url.removeEventListener("templatechange", this._templateChangeHandler);
@@ -5981,22 +6065,32 @@ var PacemViewElement = class PacemViewElement2 extends PacemEventTarget6 {
       return;
     }
     const debounce = this.debounce || 0, url = this.url;
-    ;
     if (this._isReference(url)) {
       clearTimeout(this._fetchHandle);
       this._fetchHandle = setTimeout((() => this._manageRef()), debounce);
     } else if (typeof url === "string" && !Utils32.isNullOrEmpty(url)) {
+      if (this._isInitialContent(url)) {
+        this._adoptInitialContent();
+        return;
+      }
       this.fetching = true;
       clearTimeout(this._fetchHandle);
       this._fetchHandle = setTimeout((() => this._manageUrl(url)), debounce);
     } else {
       this.innerHTML = "";
+      this.initialContentUrl = null;
     }
   }
   _manageRef() {
-    const url = this.url, tmpl = url instanceof HTMLElement ? url : document.querySelector("template" + url);
+    const url = this.url, tmpl = this._resolveRef(url);
     if (tmpl instanceof Components33.PacemTemplateProxyElement) {
       tmpl.addEventListener("templatechange", this._templateChangeHandler, false);
+    }
+    if (this._isInitialContent(url)) {
+      this._adoptInitialContent();
+      return;
+    }
+    if (tmpl instanceof Components33.PacemTemplateProxyElement) {
       this._setTmpl(tmpl.target);
     } else if (tmpl instanceof HTMLTemplateElement) {
       this._setTmpl(tmpl);
@@ -6007,17 +6101,13 @@ var PacemViewElement = class PacemViewElement2 extends PacemEventTarget6 {
     }
   }
   _setTmpl(tmpl) {
-    cancelAnimationFrame(this._renderHandle);
-    this.#renderVersion++;
-    this.innerHTML = "";
-    this._dispatchPrerender();
-    this._renderHandle = requestAnimationFrame(() => {
-      if (Utils32.isNull(tmpl)) {
-        this.log(Logging4.LogLevel.Error, `Template element not found.`);
-        return;
-      }
-      this.appendChild(tmpl.cloneNode(true).content);
-      this._dispatchRender();
+    if (Utils32.isNull(tmpl)) {
+      this.log(Logging4.LogLevel.Error, `Template element not found.`);
+      return;
+    }
+    this._render(() => {
+      const clone = tmpl.cloneNode(true);
+      this.appendChild(clone.content);
     });
   }
   #aborter;
@@ -6070,22 +6160,12 @@ var PacemViewElement = class PacemViewElement2 extends PacemEventTarget6 {
     });
   }
   _manageResult(result) {
-    cancelAnimationFrame(this._renderHandle);
-    const version = ++this.#renderVersion;
     this.scrollTo({ top: 0, left: 0, behavior: "instant" });
-    this.innerHTML = "";
-    this._dispatchPrerender();
-    this._renderHandle = requestAnimationFrame(() => {
+    this._render(() => {
       this.innerHTML = result;
       this.fetching = false;
       this.progress = Number.NaN;
-      Utils32.addAnimationEndCallback(this, () => {
-        if (version !== this.#renderVersion) {
-          return;
-        }
-        this._dispatchRender();
-      }, ANIM_TIMEOUT);
-    });
+    }, true);
   }
   #resizeHandle;
   _dispatchRender() {
@@ -6120,6 +6200,9 @@ __decorate37([
 __decorate37([
   Watch34({ emit: false, converter: PropertyConverters32.Number })
 ], PacemViewElement.prototype, "debounce", void 0);
+__decorate37([
+  Watch34({ emit: false, converter: ElementOrStringPropertyConverter })
+], PacemViewElement.prototype, "initialContentUrl", void 0);
 PacemViewElement = __decorate37([
   CustomElement35({
     tagName: P36 + "-view"