:bug: Implement a workaround for a weird edge case with components not rendering.

1 files changed, 12 insertions, 3 deletions

diff --git a/lib/src/lustre.ffi.mjs b/lib/src/lustre.ffi.mjs
index 520a3ae..51a6e26 100644
--- a/lib/src/lustre.ffi.mjs
+++ b/lib/src/lustre.ffi.mjs
@@ -72,6 +72,7 @@ export class App {
     if (!this.#root) return new Error(new AppNotYetStarted());
 
     this.#root.remove();
+    this.#root = null;
     this.#state = null;
     this.#queue = [];
     this.#effects = [];
@@ -84,7 +85,7 @@ export class App {
     const node = this.#view(this.#state);
     const vdom = map(node, (msg) => this.dispatch(msg));
 
-    this.#root = morph(this.#root, vdom, this.#root.parentNode);
+    this.#root = morph(this.#root, vdom);
   }
 
   #tick() {
@@ -164,7 +165,15 @@ export const setup_component = (
         super();
 
         this.#app = new App(init, update, render);
-        const dispatch = this.#app.start(this.#container);
+        // This is necessary for ✨ reasons ✨. Clearly there's a bug in the
+        // implementation of either the `App` or the runtime but I con't work it
+        // out.
+        //
+        // If we pass the container to the app directly then the component fails
+        // to render anything to the ODM.
+        this.#container.appendChild(document.createElement("div"));
+
+        const dispatch = this.#app.start(this.#container.firstChild);
         this.#dispatch = dispatch[0];
 
         on_attribute_change.forEach((decoder, name) => {
@@ -196,7 +205,7 @@ export const setup_component = (
       }
 
       connectedCallback() {
-        this.appendChild(this.#container);
+        this.appendChild(this.#container.firstElementChild);
       }
 
       attributeChangedCallback(name, prev, next) {