@radishland/runtime 0.4.0 → 0.4.1

package/client/index.d.ts

@@ -62,7 +62,7 @@ declare class HandlerRegistry extends HTMLElement implements AutonomousCustomEle
      */
     lookup(identifier: string): any;
     hydrateElement(element: Element): void;
-    walkDOM(node: Node): void;
+    hydrate(node?: Node): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
 }
@@ -104,4 +104,4 @@ declare const effect: (cb: EffectCallback, options?: EffectOptions) => Destructo
  */
 declare const reactive: <T>(thing: T) => T;
 
-export { HandlerRegistry, computed, effect, isState, reactive, signal };
+export { type AutonomousCustomElement, HandlerRegistry, computed, effect, isState, reactive, signal };

package/client/index.js

@@ -128,7 +128,7 @@ var object = (init) => {
 };
 
 // src/handler-registry.ts
-var HandlerRegistry = class _HandlerRegistry extends HTMLElement {
+var HandlerRegistry = class extends HTMLElement {
   #cleanup = [];
   /**
    * References the handler's `AbortController`.
@@ -230,7 +230,11 @@ var HandlerRegistry = class _HandlerRegistry extends HTMLElement {
       if (identifier in this && property in target) {
         const ref = this.lookup(identifier);
         this.effect(() => {
-          target[property] = ref.valueOf();
+          if (isState(target[property])) {
+            target[property].value = ref.valueOf();
+          } else {
+            target[property] = ref.valueOf();
+          }
         });
         e.stopPropagation();
       }
@@ -417,21 +421,18 @@ var HandlerRegistry = class _HandlerRegistry extends HTMLElement {
       element.dispatchEvent(useRequest);
     }
   }
-  walkDOM(node) {
+  // TODO: tree aware hydration that filters out HandlerRegistries and parallelize
+  hydrate(node = this) {
     if (node instanceof Element) {
       this.hydrateElement(node);
       if (node.shadowRoot && node.shadowRoot.mode === "open") {
         console.log("entering shadow root");
-        this.walkDOM(node.shadowRoot);
+        this.hydrate(node.shadowRoot);
         console.log("exiting shadow root");
       }
       let child = node.firstElementChild;
       while (child) {
-        if (!(child instanceof _HandlerRegistry)) {
-          this.walkDOM(child);
-        } else {
-          console.log(`skipping handler registry ${child.tagName}`);
-        }
+        this.hydrate(child);
         child = child.nextElementSibling;
       }
     }
@@ -448,7 +449,6 @@ var HandlerRegistry = class _HandlerRegistry extends HTMLElement {
     this.addEventListener("rad::prop", this.#handleProp, { signal: signal2 });
     this.addEventListener("rad::text", this.#handleText, { signal: signal2 });
     this.addEventListener("rad::use", this.#handleUse, { signal: signal2 });
-    this.walkDOM(this);
   }
   disconnectedCallback() {
     this.abortController.abort();
@@ -460,5 +460,21 @@ var HandlerRegistry = class _HandlerRegistry extends HTMLElement {
 if (window && !customElements.get("handler-registry")) {
   customElements?.define("handler-registry", HandlerRegistry);
 }
+customElements?.whenDefined("handler-registry").then(() => {
+  const tw = document.createTreeWalker(
+    document,
+    NodeFilter.SHOW_ELEMENT,
+    (node) => {
+      return node instanceof HandlerRegistry ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+    }
+  );
+  let current = tw.currentNode;
+  while (current && !(current instanceof HandlerRegistry)) {
+    current = tw.nextNode();
+  }
+  if (current) {
+    current.hydrate();
+  }
+});
 
 export { HandlerRegistry, computed, effect, isState, reactive, signal };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@radishland/runtime",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "type": "module",
   "description": "The Radish runtime",
   "author": "Frédéric Crozatier",