@radishland/runtime 0.4.1 → 0.5.0

package/client/index.js

@@ -128,6 +128,11 @@ var object = (init) => {
 };
 
 // src/handler-registry.ts
+var DirectiveEvent = class extends CustomEvent {
+  constructor(type2, detail) {
+    super(type2, { bubbles: true, composed: true, cancelable: true, detail });
+  }
+};
 var HandlerRegistry = class extends HTMLElement {
   #cleanup = [];
   /**
@@ -154,130 +159,139 @@ var HandlerRegistry = class extends HTMLElement {
     return this[identifier];
   }
   #handleAttr(e) {
-    if (e instanceof CustomEvent) {
-      const { identifier, attribute, target } = e.detail;
-      if (identifier in this && target instanceof HTMLElement && attribute in target) {
+    if (e instanceof DirectiveEvent) {
+      const { identifier, key, target } = e.detail;
+      if (identifier in this && target instanceof HTMLElement && key in target) {
         const ref = this.lookup(identifier);
         this.effect(() => {
-          if (booleanAttributes.includes(attribute)) {
-            target.toggleAttribute(attribute, ref.valueOf());
+          if (booleanAttributes.includes(key)) {
+            target.toggleAttribute(key, ref.valueOf());
           } else {
-            target.setAttribute(attribute, `${ref}`);
+            target.setAttribute(key, `${ref}`);
           }
         });
+        target.removeAttribute("attr:" + key);
         e.stopPropagation();
       }
     }
   }
   #handleBool(e) {
-    if (e instanceof CustomEvent) {
-      const { identifier, attribute, target } = e.detail;
+    if (e instanceof DirectiveEvent) {
+      const { identifier, key, target } = e.detail;
       if (identifier in this && target instanceof HTMLElement) {
         const ref = this.lookup(identifier);
         this.effect(() => {
-          target.toggleAttribute(attribute, ref.valueOf());
+          target.toggleAttribute(key, ref.valueOf());
         });
+        target.removeAttribute("bool:" + key);
         e.stopPropagation();
       }
     }
   }
   #handleOn(e) {
-    if (e instanceof CustomEvent) {
-      const { identifier, type: type2, target } = e.detail;
-      if (identifier in this && typeof this.lookup(identifier) === "function") {
-        target.addEventListener(type2, this.lookup(identifier).bind(this));
+    if (e instanceof DirectiveEvent) {
+      const { identifier, key, target } = e.detail;
+      if (identifier in this && target instanceof HTMLElement && typeof this.lookup(identifier) === "function") {
+        target.addEventListener(key, this.lookup(identifier).bind(this));
+        target.removeAttribute("on:" + key);
         e.stopPropagation();
       }
     }
   }
   #handleClass(e) {
-    if (e instanceof CustomEvent) {
+    if (e instanceof DirectiveEvent) {
       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();
       }
     }
   }
   #handleUse(e) {
-    if (e instanceof CustomEvent) {
-      const { identifier, target } = e.detail;
-      if (identifier in this && typeof this.lookup(identifier) === "function") {
-        const cleanup = this.lookup(identifier).bind(this)(target);
+    if (e instanceof DirectiveEvent) {
+      const { key, target } = e.detail;
+      if (key in this && typeof this.lookup(key) === "function" && target instanceof HTMLElement) {
+        const cleanup = this.lookup(key).bind(this)(target);
         if (typeof cleanup === "function") {
           this.#cleanup.push(cleanup);
         }
+        target.removeAttribute("use:" + key);
         e.stopPropagation();
       }
     }
   }
   #handleProp(e) {
-    if (e instanceof CustomEvent) {
-      const { identifier, property, target } = e.detail;
-      if (identifier in this && property in target) {
+    if (e instanceof DirectiveEvent) {
+      const { identifier, key, target } = e.detail;
+      if (identifier in this && key in target && target instanceof HTMLElement) {
         const ref = this.lookup(identifier);
         this.effect(() => {
-          if (isState(target[property])) {
-            target[property].value = ref.valueOf();
+          if (isState(target[key])) {
+            target[key].value = ref.valueOf();
           } else {
-            target[property] = ref.valueOf();
+            target[key] = ref.valueOf();
           }
         });
+        target.removeAttribute("prop:" + key);
         e.stopPropagation();
       }
     }
   }
   #handleText(e) {
-    if (e instanceof CustomEvent) {
+    if (e instanceof DirectiveEvent) {
       const { identifier, target } = e.detail;
       if (identifier in this && target instanceof HTMLElement) {
         const ref = this.lookup(identifier);
         this.effect(() => {
           target.textContent = `${ref}`;
         });
+        target.removeAttribute("text");
         e.stopPropagation();
       }
     }
   }
   #handleHTML(e) {
-    if (e instanceof CustomEvent) {
+    if (e instanceof DirectiveEvent) {
       const { identifier, target } = e.detail;
       if (identifier in this && target instanceof HTMLElement) {
         const ref = this.lookup(identifier);
         this.effect(() => {
           target.innerHTML = `${ref}`;
         });
+        target.removeAttribute("html");
         e.stopPropagation();
       }
     }
   }
   #handleBind(e) {
-    if (e instanceof CustomEvent) {
-      const { identifier, property, target } = e.detail;
-      if (identifier in this && target instanceof HTMLElement && property in target) {
+    if (e instanceof DirectiveEvent) {
+      const { identifier, key, target } = e.detail;
+      if (identifier in this && target instanceof HTMLElement && key in target) {
         const state = this.lookup(identifier);
         if (isState(state)) {
-          state.value = target[property];
-          target.addEventListener(bindingConfig[property].event, () => {
-            state.value = target[property];
-          });
+          state.value = target[key];
+          target.addEventListener(
+            bindingConfig[key].event,
+            () => {
+              state.value = target[key];
+            }
+          );
           this.effect(() => {
-            target[property] = state.value;
+            target[key] = state.value;
           });
         }
+        target.removeAttribute("bind:" + key);
         e.stopPropagation();
       }
     }
@@ -289,30 +303,20 @@ var HandlerRegistry = class extends HTMLElement {
     for (const attribute of attr) {
       const [_, key] = attribute.localName.split(":");
       if (!key) throw new Error("Missing <key> in attr:<key>");
-      const attrRequest = new CustomEvent("rad::attr", {
-        bubbles: true,
-        cancelable: true,
-        composed: true,
-        detail: {
-          attribute: key,
-          identifier: attribute.value || key,
-          target: element
-        }
+      const attrRequest = new DirectiveEvent("rad::attr", {
+        key,
+        identifier: attribute.value || key,
+        target: element
       });
       element.dispatchEvent(attrRequest);
     }
     for (const property of Object.keys(bindingConfig)) {
       if (element.hasAttribute(`bind:${property}`)) {
         const identifier = element.getAttribute(`bind:${property}`)?.trim() || property;
-        const bindRequest = new CustomEvent("rad::bind", {
-          bubbles: true,
-          cancelable: true,
-          composed: true,
-          detail: {
-            property,
-            identifier,
-            target: element
-          }
+        const bindRequest = new DirectiveEvent("rad::bind", {
+          key: property,
+          identifier,
+          target: element
         });
         element.dispatchEvent(bindRequest);
       }
@@ -322,41 +326,28 @@ var HandlerRegistry = class extends HTMLElement {
       const [_, key] = bool.localName.split(":");
       if (!key) throw new Error("Missing <key> in bool:<key>");
       element.dispatchEvent(
-        new CustomEvent("rad::bool", {
-          bubbles: true,
-          cancelable: true,
-          composed: true,
-          detail: {
-            attribute: key,
-            identifier: bool.value || key,
-            target: element
-          }
+        new DirectiveEvent("rad::bool", {
+          key,
+          identifier: bool.value || key,
+          target: element
         })
       );
     }
     const classList = element.getAttribute("classlist");
     if (classList) {
-      const classRequest = new CustomEvent("rad::classlist", {
-        bubbles: true,
-        cancelable: true,
-        composed: true,
-        detail: {
-          identifier: classList,
-          target: element
-        }
+      const classRequest = new DirectiveEvent("rad::classlist", {
+        identifier: classList,
+        key: "classList",
+        target: element
       });
       element.dispatchEvent(classRequest);
     }
     const html = element.getAttribute("html");
     if (html) {
-      const htmlRequest = new CustomEvent("rad::html", {
-        bubbles: true,
-        cancelable: true,
-        composed: true,
-        detail: {
-          identifier: html,
-          target: element
-        }
+      const htmlRequest = new DirectiveEvent("rad::html", {
+        identifier: html,
+        key: "innerHTML",
+        target: element
       });
       element.dispatchEvent(htmlRequest);
     }
@@ -364,15 +355,10 @@ var HandlerRegistry = class extends HTMLElement {
     for (const event of events) {
       const [_, type2] = event.localName.split(":");
       if (!type2) throw new Error("Missing <type> in on:<type>");
-      const onRequest = new CustomEvent("rad::on", {
-        bubbles: true,
-        cancelable: true,
-        composed: true,
-        detail: {
-          type: type2,
-          identifier: event.value || type2,
-          target: element
-        }
+      const onRequest = new DirectiveEvent("rad::on", {
+        key: type2,
+        identifier: event.value || type2,
+        target: element
       });
       element.dispatchEvent(onRequest);
     }
@@ -380,28 +366,19 @@ var HandlerRegistry = class extends HTMLElement {
     for (const prop of props) {
       const [_, key] = prop.localName.split(":");
       if (!key) throw new Error("Missing <key> in prop:<key>");
-      const propRequest = new CustomEvent("rad::prop", {
-        bubbles: true,
-        cancelable: true,
-        composed: true,
-        detail: {
-          property: key,
-          identifier: prop.value || key,
-          target: element
-        }
+      const propRequest = new DirectiveEvent("rad::prop", {
+        key,
+        identifier: prop.value || key,
+        target: element
       });
       element.dispatchEvent(propRequest);
     }
     const text = element.getAttribute("text");
     if (text) {
-      const textRequest = new CustomEvent("rad::text", {
-        bubbles: true,
-        cancelable: true,
-        composed: true,
-        detail: {
-          identifier: text,
-          target: element
-        }
+      const textRequest = new DirectiveEvent("rad::text", {
+        identifier: text,
+        key: "textContent",
+        target: element
       });
       element.dispatchEvent(textRequest);
     }
@@ -409,14 +386,10 @@ var HandlerRegistry = class extends HTMLElement {
     for (const hook of hooks) {
       const [_, identifier] = hook.localName.split(":");
       if (!identifier) throw new Error("Missing <id> in use:<id>");
-      const useRequest = new CustomEvent("rad::use", {
-        bubbles: true,
-        cancelable: true,
-        composed: true,
-        detail: {
-          identifier,
-          target: element
-        }
+      const useRequest = new DirectiveEvent("rad::use", {
+        key: identifier,
+        identifier: "",
+        target: element
       });
       element.dispatchEvent(useRequest);
     }
@@ -430,11 +403,11 @@ var HandlerRegistry = class extends HTMLElement {
         this.hydrate(node.shadowRoot);
         console.log("exiting shadow root");
       }
-      let child = node.firstElementChild;
-      while (child) {
-        this.hydrate(child);
-        child = child.nextElementSibling;
-      }
+    }
+    let child = node.firstChild;
+    while (child) {
+      this.hydrate(child);
+      child = child.nextSibling;
     }
   }
   connectedCallback() {
@@ -468,13 +441,13 @@ customElements?.whenDefined("handler-registry").then(() => {
       return node instanceof HandlerRegistry ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
     }
   );
-  let current = tw.currentNode;
-  while (current && !(current instanceof HandlerRegistry)) {
+  let current = tw.firstChild();
+  while (current) {
+    if (current instanceof HandlerRegistry) {
+      current.hydrate();
+    }
     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.1",
+  "version": "0.5.0",
   "type": "module",
   "description": "The Radish runtime",
   "author": "Frédéric Crozatier",
@@ -33,11 +33,11 @@
     "runtime"
   ],
   "dependencies": {
-    "@preact/signals-core": "^1.8.0"
+    "@preact/signals-core": "^1.10.0"
   },
   "devDependencies": {
-    "tsup": "^8.4.0",
-    "typescript": "^5.7.3"
+    "tsup": "^8.5.0",
+    "typescript": "^5.8.3"
   },
   "scripts": {
     "build": "tsup"