From f45179f9124fb002e910afb618911c79a4a1549f Mon Sep 17 00:00:00 2001 From: Hayleigh Thompson Date: Sun, 31 Mar 2024 10:56:36 +0100 Subject: =?UTF-8?q?=F0=9F=94=80=20Refactor=20vdom=20and=20add=20support=20?= =?UTF-8?q?for=20keyed=20vnodes.=20(#83)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * :truck: Keep around old vdom implementation for reference. * :sparkles: Add a keyed vdom node. * :alembic: Experiment with a different approach for handling component children. * :construction: Here be scary works in progress. * :sparkles: Implement keyed node diffing. * :recycle: Don't use deprecated 'isOk' checks. * :recycle: Remove separate Keyed node and add 'key' field to Element node. * :sparkles: Add support for server components into new vdom. * :bug: Fix broken build script. * :recycle: Don't emit data-lustre-key attributes for server component patches. * :package: Generate server component runtime. * :bug: Fixed a bug where server component keys were ambiguous when double digit. * :package: Generate server component runtime. * :recycle: Refactor 'keyed' element to force all children of a node to be keyed. * :memo: Consistently format '**Note**:'. * :bug: Fixed bug with falsey className/style/innerHTML attributes. * :bug: Fixed a bug not handling undefined 'prev' nodes correctly. * :package: Generate server component runtime. --- src/client-component.ffi.mjs | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'src/client-component.ffi.mjs') diff --git a/src/client-component.ffi.mjs b/src/client-component.ffi.mjs index 2337f92..89e3470 100644 --- a/src/client-component.ffi.mjs +++ b/src/client-component.ffi.mjs @@ -27,6 +27,8 @@ function makeComponent(init, update, view, on_attribute_change) { #root = document.createElement("div"); #application = null; + slotContent = []; + static get observedAttributes() { return on_attribute_change[0]?.entries().map(([name, _]) => name) ?? []; } @@ -43,7 +45,7 @@ function makeComponent(init, update, view, on_attribute_change) { const prev = this[name]; const decoded = decoder(value); - if (decoded.isOk() && !isEqual(prev, value)) { + if (decoded instanceof Ok && !isEqual(prev, value)) { this.#application ? this.#application.send(new Dispatch(decoded[0])) : window.requestAnimationFrame(() => @@ -67,6 +69,7 @@ function makeComponent(init, update, view, on_attribute_change) { update, view, this.#root, + true, ); this.appendChild(this.#root); } -- cgit v1.2.3