diff options
| author | Hayleigh Thompson <me@hayleigh.dev> | 2024-03-31 10:56:36 +0100 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2024-03-31 10:56:36 +0100 |
| commit | f45179f9124fb002e910afb618911c79a4a1549f (patch) | |
| tree | 64aa1190458124a5556481c4d4b0bcb8db7c1c6b /src/client-component.ffi.mjs | |
| parent | b6aea6702d762986a69f5660df78459ef81a2e9b (diff) | |
| download | lustre-f45179f9124fb002e910afb618911c79a4a1549f.tar.gz lustre-f45179f9124fb002e910afb618911c79a4a1549f.zip | |
🔀 Refactor vdom and add support for keyed vnodes. (#83)
* :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.
Diffstat (limited to 'src/client-component.ffi.mjs')
| -rw-r--r-- | src/client-component.ffi.mjs | 5 |
1 files changed, 4 insertions, 1 deletions
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); } |