From ab335bf919c145d287f778b6e2c2ad0f93708f8f Mon Sep 17 00:00:00 2001 From: Dave Mc Nicoll Date: Mon, 19 Oct 2026 19:12:41 +0000 Subject: [PATCH] - WIP on lean-live, working version --- asset/lean-live/document-manipulator.mjs | 16 ++- asset/lean-live/events.mjs | 174 +++++++++++++++++------ asset/lean-live/ui-live.mjs | 70 ++++++++- src/Live.php | 20 ++- 4 files changed, 226 insertions(+), 54 deletions(-) diff --git a/asset/lean-live/document-manipulator.mjs b/asset/lean-live/document-manipulator.mjs index 5d0bfa2..fed5e6e 100644 --- a/asset/lean-live/document-manipulator.mjs +++ b/asset/lean-live/document-manipulator.mjs @@ -30,7 +30,7 @@ class DocumentManipulator { } followUrl(event) { - this.fetchFromUrl(event.detail.url, [ event.detail.element.name ], {}, { head: false }, false); + this.fetchFromUrl(event.detail.url, [ event.detail.element.name ], {}, { includeHead: false, outerHtml: event.detail.element.action !== "replace", vars: [{ values: event.detail.element.variables, source: event.detail.element.name }] }, false); } navigateTo(event) { @@ -144,7 +144,13 @@ class DocumentManipulator { method: "GET", }, ...( options ? options : {} ) }) .then(response => { - if (response.redirected) { + if (response.status === 204) { + console.error(`Received an empty response for your header, see log for more details.`); + console.log(liveHeaders); + + return false; + } + else if (response.redirected) { this.navigateTo({detail: { url : response.url, }}); return false; @@ -163,8 +169,10 @@ class DocumentManipulator { return this.render(json) } }) - .catch((error) => { + .catch(error => { this.showErrorMessage(error) + + throw error; }); } @@ -269,6 +277,8 @@ class DocumentManipulator { Notification.requestPermission().then((result) => { }); + // console.error(error); + const n = new Notification("An error occured trying to load a page", { body: error, icon: "data:image/png;base64,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" diff --git a/asset/lean-live/events.mjs b/asset/lean-live/events.mjs index dc23b99..4090c5b 100644 --- a/asset/lean-live/events.mjs +++ b/asset/lean-live/events.mjs @@ -1,58 +1,131 @@ export class Events { #object; + #mutationObserver; + #events = []; + #uids = []; constructor(object, swapping) { this.#object = object; - if ( object.url || null === this.object.parentElement.closest('ui-live') ) { - this.attachLinks(); - this.attachForms(); - this.attachDataLiveUi(); + console.log(this.object.parentElement.closest('ui-live')) + + if ( (this.object.url && this.object.action === 'replace') || null === this.object.parentElement.closest('ui-live') ) { + this.registerEvents(this.object); + + this.#mutationObserver = new MutationObserver((mutationsList, observer) => { + for (const mutation of mutationsList) { + if (mutation.type === 'childList') { + mutation.addedNodes.forEach(node => { + if (node instanceof Element) { + this.registerEvents(node); + } + }); + + // Check for removed nodes + mutation.removedNodes.forEach(node => { + if (node.hasAttribute ? node.hasAttribute('data-ui-live-event') : false) { + + } + }); + } + } + }); + + this.#mutationObserver.observe(this.#object, { + childList:true, + subtree: true + }); } if (! swapping) { - this.autoloadUrl(); - } - } + switch(object.loading) { + case "eager": + this.autoloadUrl(); - autoloadUrl() { - this.object.url && this.object.emit("live:autoload", { - element: this.object, - url: this.object.url, - }); - } - - attachLinks() { - const links = this.object.querySelectorAll("a[href]"); + break; - for (const link of links) { - if (link.dataset.uiLive === undefined) { - const href = link.getAttribute('href'); + case "lazy": + const observer = new IntersectionObserver( + (entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + this.autoloadUrl(); + observer.disconnect(); + } + }); + }, + { + threshold: 0.1, + rootMargin: '100px' + } + ); - if (href.length && href.substring(0, 1) !== '#') { - link.addEventListener("click", (ev) => { - ev.preventDefault(); - ev.stopPropagation(); - - this.object.emit("live:navigate", { - element: this.object, - url: href, - link: link, - sourceEvent: ev - }); - }); - } + observer.observe(object); + break; } } } - attachForms() { - const forms = this.object.querySelectorAll("form"); + registerEvents(parentNode) { + parentNode = parentNode ?? document; + + this.attachLinks(parentNode); + this.attachForms(parentNode); + this.attachDataLiveUi(parentNode); + } + + unregisterEvents() { + if (this.#mutationObserver) { + this.#mutationObserver.disconnect(); + } + + this.#uids.forEach((uid) => { + console.debug("Unregistering "+ uid); + + this.#events[uid](); + }); + } + + autoloadUrl() { + if (this.object.url) { + + this.object.emit("live:autoload", { + element: this.object, + url: this.object.url, + vars: this.object.variables, + }); + } + } + + attachLinks(parentNode) { + const links = parentNode.querySelectorAll("a[href]:not([data-ui-live-event]):not([data-ui-live]):not([target='_blank'])"); + + for (const link of links) { + const href = link.getAttribute('href'); + + if (href.length && href.substring(0, 1) !== '#') { + this.registerEventFrom(link, 'click', (ev) => { + ev.preventDefault(); + ev.stopPropagation(); + + this.object.emit("live:navigate", { + element: this.object, + url: href, + link: link, + sourceEvent: ev + }); + }) + } + } + } + + attachForms(parentNode) { + const forms = parentNode.querySelectorAll("form:not([data-ui-live-event]):not([target='blank'])"); for (const form of forms) { const method = form.hasAttribute('method') ? form.getAttribute('method').toUpperCase() : "GET"; - form.addEventListener("submit", (ev) => { + this.registerEventFrom(form, 'submit', (ev) => { ev.preventDefault(); const name = ev.submitter.getAttribute('name'), @@ -67,28 +140,28 @@ export class Events { if (method === "GET") { form.querySelectorAll("input,select").forEach((ele) => { - ele.addEventListener("change", (ev) => form.requestSubmit()); + this.registerEventFrom(ele, 'change', (ev) => form.requestSubmit()); }); } } } - attachDataLiveUi() { - const elements = this.object.querySelectorAll("[data-ui-live]"); + attachDataLiveUi(parentNode) { + const elements = parentNode.querySelectorAll("[data-ui-live]"); for (const element of elements) { switch(element.tagName.toUpperCase()) { case "TEXTAREA": case "SELECT": case "INPUT": - element.addEventListener("change", (ev) => + this.registerEventFrom(element, 'change', (ev) => this.object.emit("live:input-change", { element: element, source: this.object, submitter: element, sourceEvent: ev }) ); break; default: - element.addEventListener("click", (ev) => { + this.registerEventFrom(element, 'click', (ev) => { ev.stopPropagation(); ev.preventDefault(); @@ -100,6 +173,27 @@ export class Events { } } + registerEventFrom(element, eventName, callback, reset) { + if (reset ?? false) { + const currentUid = element.getAttribute('data-ui-live-event'); + + if (currentUid) { + this.#events[currentUid](); + } + } + + const uid = eventName + ":" + Math.random().toString(16).slice(2); + + element.addEventListener(eventName, callback); + element.setAttribute('data-ui-live-event', uid); + this.#uids[uid] = eventName; + + this.#events[uid] = () => { + element.removeEventListener(eventName, callback); + element.removeAttribute('data-ui-live-event' + eventName) + }; + } + get object() { return this.#object; } diff --git a/asset/lean-live/ui-live.mjs b/asset/lean-live/ui-live.mjs index 851f68c..c568b18 100644 --- a/asset/lean-live/ui-live.mjs +++ b/asset/lean-live/ui-live.mjs @@ -8,15 +8,15 @@ export class UiLive extends HTMLElement { fetch : true } } - - #intervalId; - #connected = false; + #eventMapper; + #intervalId; disconnectedCallback() { this.intervalId && clearTimeout(this.intervalId); documentManipulatorObject.unregisterLiveElement(this); + this.#eventMapper.unregisterEvents(); console.debug("component disconnected: ", this); } @@ -24,9 +24,8 @@ export class UiLive extends HTMLElement { connectedCallback() { documentManipulatorObject.registerLiveElement(this); - this.on("live:swap", () => new Events(this, true)); - - new Events(this, false); + this.on("live:swap", () => this.mapEvents(true)); + this.mapEvents(false); if (this.pool) { const self = {}; @@ -40,6 +39,14 @@ export class UiLive extends HTMLElement { console.debug("component connected: ", this); } + mapEvents(swapping) { + if (this.#eventMapper) { + this.#eventMapper.unregisterEvents(); + } + + this.#eventMapper = new Events(this, swapping); + } + adoptedCallback() { } @@ -65,11 +72,45 @@ export class UiLive extends HTMLElement { } swapHtml(html) { - this.innerHTML = html; + switch(this.action) { + case "prepend": + case "append": + let target = this.parentElement.querySelector(`ui-live[data-name="${this.name}"]:last-child`); + + let elem = document.createElement("p"); + target.insertAdjacentElement('afterend', elem); + elem.outerHTML = html; + + break; + + case "replace": + this.innerHTML = html; + + break; + } + + Array.from(this.querySelectorAll("script")) + .forEach( oldScriptEl => { + const newScriptEl = document.createElement("script"); + + Array.from(oldScriptEl.attributes).forEach( attr => { + newScriptEl.setAttribute(attr.name, attr.value) + }); + + const scriptText = document.createTextNode(oldScriptEl.innerHTML); + newScriptEl.appendChild(scriptText); + + oldScriptEl.parentNode.replaceChild(newScriptEl, oldScriptEl); + }); this.emit("live:swap"); } + /** @return string */ + get variables() { + return this.dataset.vars ? new URLSearchParams(JSON.parse(this.dataset.vars)).toString() : ""; + } + /** @return string */ get url() { return this.dataset.src; @@ -80,6 +121,21 @@ export class UiLive extends HTMLElement { return this.dataset.src = value; } + /** @return string */ + get action() { + return this.dataset.action ?? "replace"; + } + + /** @return string */ + set action(value) { + return this.dataset.action = value; + } + + /** @return string */ + get loading() { + return this.dataset.loading ?? "eager"; + } + /** @return string */ get selector() { return this.dataset.selector; diff --git a/src/Live.php b/src/Live.php index a1baf14..9604a6c 100644 --- a/src/Live.php +++ b/src/Live.php @@ -23,7 +23,7 @@ class Live $this->params = json_decode($encodedHeader, true); foreach($this->params['vars'] ?? [] as $variables) { - parse_str(implode('&', $variables['values']), $vars); + parse_str(is_array($variables['values']) ? implode('&', $variables['values']) : $variables['values'], $vars); $this->variablesObjects[$variables['source']] = new Variables($variables['source'], $vars, true); } @@ -49,7 +49,7 @@ class Live $node = $dom->querySelector("ui-live[data-name=\"{$name}\"]"); if ($node && !$this->isAlreadyRendering($node, $list)) { - $elements[$name] = $this->renderElement($node); + $elements[$name] = $this->renderElement($node, $this->params['outerHtml'] ?? false); } } } @@ -82,8 +82,20 @@ class Live return false; } - protected function renderElement(\DOM\Element $element) : string + protected function renderElement(\DOM\Element $element, bool $outer = false) : string { - return $element->innerHTML; + return $outer ? $this->outerHtml($element) : $element->innerHTML; + } + + protected function outerHtml(\DOM\Element $element): string { + $dom = \DOM\HTMLDocument::createEmpty(); + + $cloned = $dom->importNode($element, true); + + $dom->appendChild($cloned); + + $html = $dom->saveHTML(); + + return preg_replace('/<\?xml[^?]*\?>/', '', $html); } } \ No newline at end of file