🔀 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.

1 files changed, 4 insertions, 2 deletions

diff --git a/src/server-component.mjs b/src/server-component.mjs
index 373f4cd..ab08801 100644
--- a/src/server-component.mjs
+++ b/src/server-component.mjs
@@ -136,13 +136,15 @@ export class LustreServerComponent extends HTMLElement {
   }
 
   morph(vdom) {
-    this.#root = morph(this.#root, vdom, (msg) => {
+    this.#root = morph(this.#root, vdom, (handler) => (event) => {
+      const msg = handler(event);
       this.#socket?.send(JSON.stringify([Constants.event, msg.tag, msg.data]));
     });
   }
 
   diff([diff]) {
-    this.#root = patch(this.#root, diff, (msg) => {
+    this.#root = patch(this.#root, diff, (handler) => (event) => {
+      const msg = handler(event);
       this.#socket?.send(JSON.stringify([Constants.event, msg.tag, msg.data]));
     });
   }