🔀 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, 15 insertions, 6 deletions

diff --git a/src/client-runtime.ffi.mjs b/src/client-runtime.ffi.mjs
index ab80fbf..51c2eef 100644
--- a/src/client-runtime.ffi.mjs
+++ b/src/client-runtime.ffi.mjs
@@ -8,6 +8,7 @@ export class LustreClientApplication {
   #queue = [];
   #effects = [];
   #didUpdate = false;
+  #isComponent = false;
 
   #model = null;
   #update = null;
@@ -25,13 +26,20 @@ export class LustreClientApplication {
     return new Ok((msg) => app.send(msg));
   }
 
-  constructor([model, effects], update, view, root = document.body) {
+  constructor(
+    [model, effects],
+    update,
+    view,
+    root = document.body,
+    isComponent = false,
+  ) {
     this.#model = model;
     this.#update = update;
     this.#view = view;
     this.#root = root;
     this.#effects = effects.all.toArray();
     this.#didUpdate = true;
+    this.#isComponent = isComponent;
 
     window.requestAnimationFrame(() => this.#tick());
   }
@@ -69,15 +77,16 @@ export class LustreClientApplication {
     this.#flush_queue();
 
     const vdom = this.#view(this.#model);
-
-    this.#didUpdate = false;
-    this.#root = morph(this.#root, vdom, (handler) => (e) => {
+    const dispatch = (handler) => (e) => {
       const result = handler(e);
 
-      if (result.isOk()) {
+      if (result instanceof Ok) {
         this.send(new Dispatch(result[0]));
       }
-    });
+    };
+
+    this.#didUpdate = false;
+    this.#root = morph(this.#root, vdom, dispatch, this.#isComponent);
   }
 
   #flush_queue(iterations = 0) {