1 files changed, 51 insertions, 47 deletions
diff --git a/src/client-component.ffi.mjs b/src/client-component.ffi.mjs
index 0970e7f..c64527f 100644
--- a/src/client-component.ffi.mjs
+++ b/src/client-component.ffi.mjs
@@ -1,5 +1,5 @@
 import { Ok, Error, isEqual } from "./gleam.mjs";
-import { Dispatch, Shutdown } from "./lustre/runtime.mjs";
+import { Dispatch, Shutdown } from "./lustre/internals/runtime.mjs";
 import {
   ComponentAlreadyRegistered,
   BadComponentName,
@@ -16,59 +16,63 @@ export function register({ init, update, view, on_attribute_change }, name) {
 
   window.customElements.define(
     name,
-    class LustreClientComponent extends HTMLElement {
-      #root = document.createElement("div");
-      #application = null;
+    makeComponent(init, update, view, on_attribute_change),
+  );
 
-      static get observedAttributes() {
-        return on_attribute_change.entries().map(([name, _]) => name);
-      }
+  return new Ok(undefined);
+}
 
-      constructor() {
-        super();
-        on_attribute_change.forEach((decoder, name) => {
-          Object.defineProperty(this, name, {
-            get() {
-              return this[`_${name}`] || this.getAttribute(name);
-            },
+function makeComponent(init, update, view, on_attribute_change) {
+  return class LustreClientComponent extends HTMLElement {
+    #root = document.createElement("div");
+    #application = null;
 
-            set(value) {
-              const prev = this[name];
-              const decoded = decoder(value);
+    static get observedAttributes() {
+      return on_attribute_change.entries().map(([name, _]) => name);
+    }
 
-              if (decoded.isOk() && !isEqual(prev, value)) {
-                this.#application
-                  ? this.#application.send(new Dispatch(decoded[0]))
-                  : window.requestAnimationFrame(() =>
-                      this.#application.send(new Dispatch(decoded[0]))
-                    );
-              }
+    constructor() {
+      super();
+      on_attribute_change.forEach((decoder, name) => {
+        Object.defineProperty(this, name, {
+          get() {
+            return this[`_${name}`] || this.getAttribute(name);
+          },
 
-              if (typeof value === "string") {
-                this.setAttribute(name, value);
-              } else {
-                this[`_${name}`] = value;
-              }
-            },
-          });
-        });
-      }
+          set(value) {
+            const prev = this[name];
+            const decoded = decoder(value);
 
-      connectedCallback() {
-        this.#application = new LustreClientApplication(
-          init(),
-          update,
-          view,
-          this.#root
-        );
-        this.appendChild(this.#root);
-      }
+            if (decoded.isOk() && !isEqual(prev, value)) {
+              this.#application
+                ? this.#application.send(new Dispatch(decoded[0]))
+                : window.requestAnimationFrame(() =>
+                    this.#application.send(new Dispatch(decoded[0])),
+                  );
+            }
 
-      disconnectedCallback() {
-        this.#application.send(new Shutdown());
-      }
+            if (typeof value === "string") {
+              this.setAttribute(name, value);
+            } else {
+              this[`_${name}`] = value;
+            }
+          },
+        });
+      });
+    }
+
+    connectedCallback() {
+      this.#application = new LustreClientApplication(
+        init(),
+        update,
+        view,
+        this.#root,
+      );
+      this.appendChild(this.#root);
     }
-  );
 
-  return new Ok(null);
+    disconnectedCallback() {
+      this.#application.send(new Shutdown());
+    }
+  };
 }