@radishland/runtime 0.4.2 → 0.6.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,47 +159,47 @@ 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:" + attribute);
+        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:" + attribute);
+        target.removeAttribute("bool:" + key);
         e.stopPropagation();
       }
     }
   }
   #handleOn(e) {
-    if (e instanceof CustomEvent) {
-      const { identifier, type: type2, target } = e.detail;
+    if (e instanceof DirectiveEvent) {
+      const { identifier, key, target } = e.detail;
       if (identifier in this && target instanceof HTMLElement && typeof this.lookup(identifier) === "function") {
-        target.addEventListener(type2, this.lookup(identifier).bind(this));
-        target.removeAttribute("on:" + type2);
+        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 && target instanceof HTMLElement) {
         this.effect(() => {
@@ -214,50 +219,50 @@ var HandlerRegistry = class extends HTMLElement {
     }
   }
   #handleUse(e) {
-    if (e instanceof CustomEvent) {
-      const { identifier, target } = e.detail;
-      if (identifier in this && typeof this.lookup(identifier) === "function" && target instanceof HTMLElement) {
-        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:" + identifier);
+        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 && target instanceof HTMLElement) {
+    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:" + property);
+        target.removeAttribute("prop:" + key);
         e.stopPropagation();
       }
     }
   }
-  #handleText(e) {
-    if (e instanceof CustomEvent) {
+  #handleTextContent(e) {
+    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");
+        target.removeAttribute("textContent");
         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);
@@ -270,20 +275,23 @@ var HandlerRegistry = class extends HTMLElement {
     }
   }
   #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:" + property);
+        target.removeAttribute("bind:" + key);
         e.stopPropagation();
       }
     }
@@ -295,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);
       }
@@ -328,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);
     }
@@ -370,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);
     }
@@ -386,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 textContent = element.getAttribute("textContent");
+    if (textContent) {
+      const textRequest = new DirectiveEvent("rad::textContent", {
+        identifier: textContent,
+        key: "textContent",
+        target: element
       });
       element.dispatchEvent(textRequest);
     }
@@ -415,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);
     }
@@ -453,7 +420,9 @@ var HandlerRegistry = class extends HTMLElement {
     this.addEventListener("rad::html", this.#handleHTML, { signal: signal2 });
     this.addEventListener("rad::on", this.#handleOn, { signal: signal2 });
     this.addEventListener("rad::prop", this.#handleProp, { signal: signal2 });
-    this.addEventListener("rad::text", this.#handleText, { signal: signal2 });
+    this.addEventListener("rad::textContent", this.#handleTextContent, {
+      signal: signal2
+    });
     this.addEventListener("rad::use", this.#handleUse, { signal: signal2 });
   }
   disconnectedCallback() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@radishland/runtime",
-  "version": "0.4.2",
+  "version": "0.6.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"