@21stware/rpui 0.4.4 → 0.5.5

package/dist/rpui.d.ts

@@ -1,3 +1,5 @@
 import { registerAll } from './registry';
 import { parseToPage, rewriteTags } from 'rpml-parser';
-export { registerAll, parseToPage, rewriteTags };
+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,8 +99605,47 @@ 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;
+  const pane = preserve ? host.querySelector(".annotation-el-pane") : null;
+  const pos = preserve ? { x: sc.scrollLeft, y: sc.scrollTop, px: (pane == null ? void 0 : pane.scrollLeft) ?? 0, py: (pane == null ? void 0 : pane.scrollTop) ?? 0 } : null;
+  try {
+    host.replaceChildren(parseToPage(source));
+    onError == null ? void 0 : onError(null);
+  } catch (e) {
+    onError == null ? void 0 : onError(e.message ?? String(e));
+    return;
+  }
+  if (pos) {
+    requestAnimationFrame(() => requestAnimationFrame(() => {
+      sc.scrollLeft = pos.x;
+      sc.scrollTop = pos.y;
+      const newPane = host.querySelector(".annotation-el-pane");
+      if (newPane) {
+        newPane.scrollLeft = pos.px;
+        newPane.scrollTop = pos.py;
+      }
+    }));
+  }
+}
 registerAll();
 export {
+  createDocRenderer,
+  liveRender,
   parseToPage,
   registerAll,
   rewriteTags