@radishland/runtime 0.4.0 → 0.4.2

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`.
@@ -165,6 +165,7 @@ var HandlerRegistry = class _HandlerRegistry extends HTMLElement {
             target.setAttribute(attribute, `${ref}`);
           }
         });
+        target.removeAttribute("attr:" + attribute);
         e.stopPropagation();
       }
     }
@@ -177,6 +178,7 @@ var HandlerRegistry = class _HandlerRegistry extends HTMLElement {
         this.effect(() => {
           target.toggleAttribute(attribute, ref.valueOf());
         });
+        target.removeAttribute("bool:" + attribute);
         e.stopPropagation();
       }
     }
@@ -184,8 +186,9 @@ var HandlerRegistry = class _HandlerRegistry extends HTMLElement {
   #handleOn(e) {
     if (e instanceof CustomEvent) {
       const { identifier, type: type2, target } = e.detail;
-      if (identifier in this && typeof this.lookup(identifier) === "function") {
+      if (identifier in this && target instanceof HTMLElement && typeof this.lookup(identifier) === "function") {
         target.addEventListener(type2, this.lookup(identifier).bind(this));
+        target.removeAttribute("on:" + type2);
         e.stopPropagation();
       }
     }
@@ -193,21 +196,19 @@ var HandlerRegistry = class _HandlerRegistry extends HTMLElement {
   #handleClass(e) {
     if (e instanceof CustomEvent) {
       const { identifier, target } = e.detail;
-      if (identifier in this) {
+      if (identifier in this && target instanceof HTMLElement) {
         this.effect(() => {
           const classList = this.lookup(identifier)?.valueOf();
-          if (classList && typeof classList === "object") {
+          if (target instanceof HTMLElement && classList && typeof classList === "object") {
             for (const [k, v] of Object.entries(classList)) {
               const force = !!v?.valueOf();
               for (const className of k.split(" ")) {
-                target.classList.toggle(
-                  className,
-                  force
-                );
+                target.classList.toggle(className, force);
               }
             }
           }
         });
+        target.removeAttribute("classList");
         e.stopPropagation();
       }
     }
@@ -215,11 +216,12 @@ var HandlerRegistry = class _HandlerRegistry extends HTMLElement {
   #handleUse(e) {
     if (e instanceof CustomEvent) {
       const { identifier, target } = e.detail;
-      if (identifier in this && typeof this.lookup(identifier) === "function") {
+      if (identifier in this && typeof this.lookup(identifier) === "function" && target instanceof HTMLElement) {
         const cleanup = this.lookup(identifier).bind(this)(target);
         if (typeof cleanup === "function") {
           this.#cleanup.push(cleanup);
         }
+        target.removeAttribute("use:" + identifier);
         e.stopPropagation();
       }
     }
@@ -227,11 +229,16 @@ var HandlerRegistry = class _HandlerRegistry extends HTMLElement {
   #handleProp(e) {
     if (e instanceof CustomEvent) {
       const { identifier, property, target } = e.detail;
-      if (identifier in this && property in target) {
+      if (identifier in this && property in target && target instanceof HTMLElement) {
         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();
+          }
         });
+        target.removeAttribute("prop:" + property);
         e.stopPropagation();
       }
     }
@@ -244,6 +251,7 @@ var HandlerRegistry = class _HandlerRegistry extends HTMLElement {
         this.effect(() => {
           target.textContent = `${ref}`;
         });
+        target.removeAttribute("text");
         e.stopPropagation();
       }
     }
@@ -256,6 +264,7 @@ var HandlerRegistry = class _HandlerRegistry extends HTMLElement {
         this.effect(() => {
           target.innerHTML = `${ref}`;
         });
+        target.removeAttribute("html");
         e.stopPropagation();
       }
     }
@@ -274,6 +283,7 @@ var HandlerRegistry = class _HandlerRegistry extends HTMLElement {
             target[property] = state.value;
           });
         }
+        target.removeAttribute("bind:" + property);
         e.stopPropagation();
       }
     }
@@ -417,23 +427,20 @@ 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}`);
-        }
-        child = child.nextElementSibling;
-      }
+    }
+    let child = node.firstChild;
+    while (child) {
+      this.hydrate(child);
+      child = child.nextSibling;
     }
   }
   connectedCallback() {
@@ -448,7 +455,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 +466,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.firstChild();
+  while (current) {
+    if (current instanceof HandlerRegistry) {
+      current.hydrate();
+    }
+    current = tw.nextNode();
+  }
+});
 
 export { HandlerRegistry, computed, effect, isState, reactive, signal };

package/package.json

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