@radishland/runtime 0.3.1 → 0.4.1

package/README.md

@@ -1,3 +1,3 @@
 # Radish runtime
 
-This package contains the runtime of the Radish WebComponents framework
+This package contains the runtime of the Radish WebComponents framework

package/client/index.d.ts

@@ -61,6 +61,8 @@ declare class HandlerRegistry extends HTMLElement implements AutonomousCustomEle
      * Looks up an identifier on the instance
      */
     lookup(identifier: string): any;
+    hydrateElement(element: Element): void;
+    hydrate(node?: Node): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
 }
@@ -102,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

@@ -230,7 +230,11 @@ var HandlerRegistry = class 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();
       }
@@ -278,8 +282,163 @@ var HandlerRegistry = class extends HTMLElement {
       }
     }
   }
+  hydrateElement(element) {
+    console.log(`hydrating element ${element.nodeName}`);
+    const attributes = [...element.attributes];
+    const attr = attributes.filter((a) => a.localName.startsWith("attr:"));
+    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
+        }
+      });
+      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
+          }
+        });
+        element.dispatchEvent(bindRequest);
+      }
+    }
+    const bools = attributes.filter((a) => a.localName.startsWith("bool:"));
+    for (const bool of bools) {
+      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
+          }
+        })
+      );
+    }
+    const classList = element.getAttribute("classlist");
+    if (classList) {
+      const classRequest = new CustomEvent("rad::classlist", {
+        bubbles: true,
+        cancelable: true,
+        composed: true,
+        detail: {
+          identifier: 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
+        }
+      });
+      element.dispatchEvent(htmlRequest);
+    }
+    const events = attributes.filter((a) => a.localName.startsWith("on:"));
+    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
+        }
+      });
+      element.dispatchEvent(onRequest);
+    }
+    const props = attributes.filter((a) => a.localName.startsWith("prop:"));
+    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
+        }
+      });
+      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
+        }
+      });
+      element.dispatchEvent(textRequest);
+    }
+    const hooks = attributes.filter((a) => a.localName.startsWith("use:"));
+    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
+        }
+      });
+      element.dispatchEvent(useRequest);
+    }
+  }
+  // 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.hydrate(node.shadowRoot);
+        console.log("exiting shadow root");
+      }
+      let child = node.firstElementChild;
+      while (child) {
+        this.hydrate(child);
+        child = child.nextElementSibling;
+      }
+    }
+  }
   connectedCallback() {
-    console.log(`${this.tagName} connected`);
+    console.log(`[connectedCallback]: ${this.tagName}`);
     const { signal: signal2 } = this.abortController;
     this.addEventListener("rad::attr", this.#handleAttr, { signal: signal2 });
     this.addEventListener("rad::bind", this.#handleBind, { signal: signal2 });
@@ -298,6 +457,24 @@ var HandlerRegistry = class extends HTMLElement {
     }
   }
 };
-customElements?.define("handler-registry", HandlerRegistry);
+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.3.1",
+  "version": "0.4.1",
   "type": "module",
   "description": "The Radish runtime",
   "author": "Frédéric Crozatier",
@@ -17,10 +17,6 @@
       "import": "./client/index.js",
       "types": "./client/index.d.ts"
     },
-    "./boot": {
-      "import": "./client/boot.js",
-      "types": "./client/boot.d.ts"
-    },
     "./utils": {
       "import": "./client/utils.js",
       "types": "./client/utils.d.ts"

package/client/boot.d.ts

@@ -1,2 +0,0 @@
-
-export {  }

package/client/boot.js

@@ -1,169 +0,0 @@
-// src/utils.ts
-var bindingConfig = {
-  "checked": {
-    type: ["boolean"],
-    event: "change"
-  },
-  "value": {
-    type: ["string", "number"],
-    event: "input"
-  }
-};
-
-// src/boot.ts
-var hydrateElement = (element) => {
-  const attributes = [...element.attributes];
-  const attr = attributes.filter((a) => a.localName.startsWith("attr:"));
-  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
-      }
-    });
-    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
-        }
-      });
-      element.dispatchEvent(bindRequest);
-    }
-  }
-  const bools = attributes.filter((a) => a.localName.startsWith("bool:"));
-  for (const bool of bools) {
-    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
-        }
-      })
-    );
-  }
-  const classList = element.getAttribute("classlist");
-  if (classList) {
-    const classRequest = new CustomEvent("rad::classlist", {
-      bubbles: true,
-      cancelable: true,
-      composed: true,
-      detail: {
-        identifier: 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
-      }
-    });
-    element.dispatchEvent(htmlRequest);
-  }
-  const events = attributes.filter((a) => a.localName.startsWith("on:"));
-  for (const event of events) {
-    const [_, type] = event.localName.split(":");
-    if (!type) throw new Error("Missing <type> in on:<type>");
-    const onRequest = new CustomEvent("rad::on", {
-      bubbles: true,
-      cancelable: true,
-      composed: true,
-      detail: {
-        type,
-        identifier: event.value || type,
-        target: element
-      }
-    });
-    element.dispatchEvent(onRequest);
-  }
-  const props = attributes.filter((a) => a.localName.startsWith("prop:"));
-  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
-      }
-    });
-    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
-      }
-    });
-    element.dispatchEvent(textRequest);
-  }
-  const hooks = attributes.filter((a) => a.localName.startsWith("use:"));
-  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
-      }
-    });
-    element.dispatchEvent(useRequest);
-  }
-};
-var hydrate = (root) => {
-  const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
-  let node = walker.currentNode;
-  do {
-    if (node instanceof Element) {
-      console.log(node.tagName);
-      hydrateElement(node);
-      if (node.shadowRoot) {
-        console.log("entering shadow root");
-        hydrate(node.shadowRoot);
-        console.log("exiting shadow root");
-      }
-    }
-  } while (node = walker.nextNode());
-};
-customElements?.whenDefined("handler-registry").then(() => {
-  hydrate(document.body);
-});