@21stware/rpui 0.5.4 → 0.5.5

package/dist/rpui.d.ts

@@ -1,4 +1,5 @@
 import { registerAll } from './registry';
 import { parseToPage, rewriteTags } from 'rpml-parser';
-import { liveRender } from './core/live-render';
-export { registerAll, parseToPage, rewriteTags, liveRender };
+import { liveRender, createDocRenderer } from './core/live-render';
+export { registerAll, parseToPage, rewriteTags, liveRender, createDocRenderer };
+export type { LiveRenderOpts, DocRenderer } from './core/live-render';

package/dist/rpui.js

@@ -1031,8 +1031,13 @@ function activateSection(path, pane) {
   setTimeout(() => target.classList.remove("rp-section-focus"), 3e3);
 }
 class RpPage extends HTMLElement {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "_handlers");
+  }
   connectedCallback() {
     injectStyle();
+    this.wireRouting();
     if (this.dataset.rpReady) return;
     this.dataset.rpReady = "true";
     const pageTitle = attr(this, "title", "Untitled");
@@ -1069,13 +1074,29 @@ class RpPage extends HTMLElement {
       const mv = body.querySelector("main-view, main-view");
       if (mv) header.style.maxWidth = `${mv.offsetWidth}px`;
     });
+    this.wireRouting();
+    requestAnimationFrame(this._handlers[0]);
+  }
+  /** Section routing: handle URL and rp-section events. Re-queries the pane
+   *  lazily so listeners don't capture build-scope DOM (survives reconnect). */
+  wireRouting() {
+    if (this._handlers) return;
+    const pane = () => this.querySelector(".annotation-el-pane");
     const go = () => {
       const sec = new URLSearchParams(location.search).get("section");
-      if (sec) activateSection(sec, pane);
+      if (sec) activateSection(sec, pane());
     };
+    const onSection = (e) => activateSection(e.detail, pane());
+    this._handlers = [go, onSection];
     window.addEventListener("popstate", go);
-    window.addEventListener("rp-section", (e) => activateSection(e.detail, pane));
-    requestAnimationFrame(go);
+    window.addEventListener("rp-section", onSection);
+  }
+  disconnectedCallback() {
+    if (this._handlers) {
+      window.removeEventListener("popstate", this._handlers[0]);
+      window.removeEventListener("rp-section", this._handlers[1]);
+      this._handlers = void 0;
+    }
   }
 }
 class GenericElement extends HTMLElement {
@@ -99584,6 +99605,19 @@ function registerAll() {
     define(toComponentTag(suffix), ctor);
   }
 }
+function createDocRenderer(host, opts = {}) {
+  let initialized = false;
+  return {
+    render(source) {
+      liveRender(host, source, { ...opts, preserve: initialized });
+      initialized = true;
+    },
+    destroy() {
+      host.replaceChildren();
+      initialized = false;
+    }
+  };
+}
 function liveRender(host, source, opts = {}) {
   const { scroller, preserve = true, onError } = opts;
   const sc = scroller ?? document.scrollingElement ?? document.documentElement;
@@ -99610,6 +99644,7 @@ function liveRender(host, source, opts = {}) {
 }
 registerAll();
 export {
+  createDocRenderer,
   liveRender,
   parseToPage,
   registerAll,