@radishland/runtime 0.1.2 → 0.2.1

package/client/boot.js

@@ -2,147 +2,170 @@
 var spaces_sep_by_comma = /\s*,\s*/;
 var bindingConfig = {
   "checked": {
-    element: ["input"],
     type: ["boolean"],
     event: "change"
   },
   "value": {
-    element: ["input", "select", "textarea"],
     type: ["string", "number"],
     event: "input"
   }
 };
 
 // src/boot.ts
-var bindingsQueryString = Object.keys(bindingConfig).map(
-  (property) => `[\\@bind\\:${property}]`
-).join(",");
-setTimeout(() => {
-  customElements?.whenDefined("handler-registry").then(() => {
-    document.querySelectorAll(
-      `[\\@on],[\\@use],[\\@attr],[\\@attr\\|client],[\\@prop],${bindingsQueryString},[\\@text],[\\@html]`
-    ).forEach(
-      (entry) => {
-        const events = entry.getAttribute("@on")?.trim()?.split(spaces_sep_by_comma);
-        if (events) {
-          for (const event of events) {
-            const [type, handler] = event.split(":");
-            const onRequest = new CustomEvent("@on-request", {
-              bubbles: true,
-              cancelable: true,
-              composed: true,
-              detail: {
-                type,
-                handler: handler || type
-              }
-            });
-            entry.dispatchEvent(onRequest);
-          }
-        }
-        const hooks = entry.getAttribute("@use")?.trim()?.split(spaces_sep_by_comma);
-        if (hooks) {
-          for (const hook of hooks) {
-            const useRequest = new CustomEvent("@use-request", {
-              bubbles: true,
-              cancelable: true,
-              composed: true,
-              detail: {
-                hook
-              }
-            });
-            entry.dispatchEvent(useRequest);
-          }
+var hydrateElement = (element) => {
+  const attributes = ["@attr", "@attr|client"].map((item) => element?.getAttribute(item)).filter((attr) => attr !== null && attr !== void 0).flatMap((attr) => attr.trim().split(spaces_sep_by_comma));
+  for (const attribute of attributes) {
+    const [key, value] = attribute.split(":");
+    const attrRequest = new CustomEvent("@attr-request", {
+      bubbles: true,
+      cancelable: true,
+      composed: true,
+      detail: {
+        attribute: key,
+        identifier: 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("@bind-request", {
+        bubbles: true,
+        cancelable: true,
+        composed: true,
+        detail: {
+          property,
+          identifier,
+          target: element
         }
-        const props = entry.getAttribute("@prop")?.trim().split(spaces_sep_by_comma);
-        if (props) {
-          for (const prop of props) {
-            const [key, value] = prop.split(":");
-            const propRequest = new CustomEvent("@prop-request", {
-              bubbles: true,
-              cancelable: true,
-              composed: true,
-              detail: {
-                property: key,
-                identifier: value || key
-              }
-            });
-            entry.dispatchEvent(propRequest);
+      });
+      element.dispatchEvent(bindRequest);
+    }
+  }
+  const booleanAttributes = element.getAttribute("@bool")?.trim().split(spaces_sep_by_comma);
+  if (booleanAttributes) {
+    for (const bool of booleanAttributes) {
+      const [key, value] = bool.split(":");
+      element.dispatchEvent(
+        new CustomEvent("@bool-request", {
+          bubbles: true,
+          cancelable: true,
+          composed: true,
+          detail: {
+            attribute: key,
+            identifier: value || key,
+            target: element
           }
+        })
+      );
+    }
+  }
+  const classList = element.getAttribute("@class");
+  if (classList) {
+    const classRequest = new CustomEvent("@class-request", {
+      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("@html-request", {
+      bubbles: true,
+      cancelable: true,
+      composed: true,
+      detail: {
+        identifier: html,
+        target: element
+      }
+    });
+    element.dispatchEvent(htmlRequest);
+  }
+  const events = element.getAttribute("@on")?.trim().split(spaces_sep_by_comma);
+  if (events) {
+    for (const event of events) {
+      const [type, handler] = event.split(":");
+      const onRequest = new CustomEvent("@on-request", {
+        bubbles: true,
+        cancelable: true,
+        composed: true,
+        detail: {
+          type,
+          identifier: handler || type,
+          target: element
         }
-        const text = entry.hasAttribute("@text");
-        if (text) {
-          const identifier = entry.getAttribute("@text") || "text";
-          const textRequest = new CustomEvent("@text-request", {
-            bubbles: true,
-            cancelable: true,
-            composed: true,
-            detail: {
-              identifier
-            }
-          });
-          entry.dispatchEvent(textRequest);
-        }
-        const html = entry.hasAttribute("@html");
-        if (html) {
-          const identifier = entry.getAttribute("@html") || "html";
-          const htmlRequest = new CustomEvent("@html-request", {
-            bubbles: true,
-            cancelable: true,
-            composed: true,
-            detail: {
-              identifier
-            }
-          });
-          entry.dispatchEvent(htmlRequest);
-        }
-        const classList = entry.hasAttribute("@class");
-        if (classList) {
-          const identifier = entry.getAttribute("@class") || "class";
-          const classRequest = new CustomEvent("@class-request", {
-            bubbles: true,
-            cancelable: true,
-            composed: true,
-            detail: {
-              identifier
-            }
-          });
-          entry.dispatchEvent(classRequest);
-        }
-        const attributes = [
-          ...entry.getAttribute("@attr")?.trim().split(spaces_sep_by_comma) ?? [],
-          ...entry.getAttribute("@attr|client")?.trim().split(spaces_sep_by_comma) ?? []
-        ];
-        if (attributes.length > 0) {
-          for (const attribute of attributes) {
-            const [key, value] = attribute.split(":");
-            const attrRequest = new CustomEvent("@attr-request", {
-              bubbles: true,
-              cancelable: true,
-              composed: true,
-              detail: {
-                attribute: key,
-                identifier: value || key
-              }
-            });
-            entry.dispatchEvent(attrRequest);
-          }
+      });
+      element.dispatchEvent(onRequest);
+    }
+  }
+  const props = element.getAttribute("@prop")?.trim().split(spaces_sep_by_comma);
+  if (props) {
+    for (const prop of props) {
+      const [key, value] = prop.split(":");
+      const propRequest = new CustomEvent("@prop-request", {
+        bubbles: true,
+        cancelable: true,
+        composed: true,
+        detail: {
+          property: key,
+          identifier: value || key,
+          target: element
         }
-        for (const property of Object.keys(bindingConfig)) {
-          if (entry.hasAttribute(`@bind:${property}`)) {
-            const identifier = entry.getAttribute(`@bind:${property}`)?.trim() || property;
-            const bindRequest = new CustomEvent("@bind-request", {
-              bubbles: true,
-              cancelable: true,
-              composed: true,
-              detail: {
-                property,
-                identifier
-              }
-            });
-            entry.dispatchEvent(bindRequest);
-          }
+      });
+      element.dispatchEvent(propRequest);
+    }
+  }
+  const text = element.getAttribute("@text");
+  if (text) {
+    const textRequest = new CustomEvent("@text-request", {
+      bubbles: true,
+      cancelable: true,
+      composed: true,
+      detail: {
+        identifier: text,
+        target: element
+      }
+    });
+    element.dispatchEvent(textRequest);
+  }
+  const hooks = element.getAttribute("@use")?.trim().split(spaces_sep_by_comma);
+  if (hooks) {
+    for (const hook of hooks) {
+      const useRequest = new CustomEvent("@use-request", {
+        bubbles: true,
+        cancelable: true,
+        composed: true,
+        detail: {
+          identifier: hook,
+          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");
       }
-    );
-  });
-}, 100);
+    }
+  } while (node = walker.nextNode());
+};
+customElements?.whenDefined("handler-registry").then(() => {
+  hydrate(document.body);
+});

package/client/index.js

@@ -12,11 +12,9 @@ function type(value) {
   if (!["object", "function"].includes(baseType)) {
     return baseType;
   }
-  if (typeof value === "object" && Symbol.toStringTag in value) {
-    const tag = value[Symbol.toStringTag];
-    if (typeof tag === "string") {
-      return tag;
-    }
+  const tag = value[Symbol.toStringTag];
+  if (typeof tag === "string") {
+    return tag;
   }
   if (baseType === "function" && Function.prototype.toString.call(value).startsWith("class")) {
     return "class";
@@ -79,12 +77,10 @@ var booleanAttributes = [
 ];
 var bindingConfig = {
   "checked": {
-    element: ["input"],
     type: ["boolean"],
     event: "change"
   },
   "value": {
-    element: ["input", "select", "textarea"],
     type: ["string", "number"],
     event: "input"
   }
@@ -139,10 +135,9 @@ var HandlerRegistry = class extends HTMLElement {
    *
    * The `abort` method of the controller is called in the `disconnectedCallback` method. It allows to cleanup event handlers and other abortable operations
    */
-  abortController;
+  abortController = new AbortController();
   constructor() {
     super();
-    this.abortController = new AbortController();
   }
   /**
    * Creates an effect that is automatically cleaned up when the component is disconnected
@@ -150,7 +145,7 @@ var HandlerRegistry = class extends HTMLElement {
    * An optional AbortSignal can be provided to abort the effect prematurely
    */
   effect(callback) {
-    effect(callback, { signal: this.abortController.signal });
+    effect(callback, this.abortController);
   }
   /**
    * Looks up an identifier on the instance
@@ -158,19 +153,46 @@ var HandlerRegistry = class extends HTMLElement {
   lookup(identifier) {
     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) {
+        const ref = this.lookup(identifier);
+        this.effect(() => {
+          if (booleanAttributes.includes(attribute)) {
+            target.toggleAttribute(attribute, ref.valueOf());
+          } else {
+            target.setAttribute(attribute, `${ref}`);
+          }
+        });
+        e.stopPropagation();
+      }
+    }
+  }
+  #handleBool(e) {
+    if (e instanceof CustomEvent) {
+      const { identifier, attribute, target } = e.detail;
+      if (identifier in this && target instanceof HTMLElement) {
+        const ref = this.lookup(identifier);
+        this.effect(() => {
+          target.toggleAttribute(attribute, ref.valueOf());
+        });
+        e.stopPropagation();
+      }
+    }
+  }
   #handleOn(e) {
     if (e instanceof CustomEvent) {
-      const { handler, type: type2 } = e.detail;
-      if (handler in this && typeof this.lookup(handler) === "function") {
-        e.target?.addEventListener(type2, this.lookup(handler).bind(this));
+      const { identifier, type: type2, target } = e.detail;
+      if (identifier in this && typeof this.lookup(identifier) === "function") {
+        target.addEventListener(type2, this.lookup(identifier).bind(this));
         e.stopPropagation();
       }
     }
   }
   #handleClass(e) {
-    const target = e.target;
-    if (e instanceof CustomEvent && target) {
-      const { identifier } = e.detail;
+    if (e instanceof CustomEvent) {
+      const { identifier, target } = e.detail;
       if (identifier in this) {
         this.effect(() => {
           const classList = this.lookup(identifier)?.valueOf();
@@ -192,9 +214,9 @@ var HandlerRegistry = class extends HTMLElement {
   }
   #handleUse(e) {
     if (e instanceof CustomEvent) {
-      const { hook } = e.detail;
-      if (hook in this && typeof this.lookup(hook) === "function") {
-        const cleanup = this.lookup(hook).bind(this)(e.target);
+      const { identifier, target } = e.detail;
+      if (identifier in this && typeof this.lookup(identifier) === "function") {
+        const cleanup = this.lookup(identifier).bind(this)(target);
         if (typeof cleanup === "function") {
           this.#cleanup.push(cleanup);
         }
@@ -202,28 +224,10 @@ var HandlerRegistry = class extends HTMLElement {
       }
     }
   }
-  #handleAttr(e) {
-    if (e instanceof CustomEvent) {
-      const { identifier, attribute } = e.detail;
-      const target = e.target;
-      if (identifier in this && target instanceof HTMLElement && attribute in target) {
-        const ref = this.lookup(identifier);
-        this.effect(() => {
-          if (booleanAttributes.includes(attribute)) {
-            ref.valueOf() ? target.setAttribute(attribute, "") : target.removeAttribute(attribute);
-          } else {
-            target.setAttribute(attribute, `${ref}`);
-          }
-        });
-        e.stopPropagation();
-      }
-    }
-  }
   #handleProp(e) {
     if (e instanceof CustomEvent) {
-      const { identifier, property } = e.detail;
-      const target = e.target;
-      if (identifier in this && target && property in target) {
+      const { identifier, property, target } = e.detail;
+      if (identifier in this && property in target) {
         const ref = this.lookup(identifier);
         this.effect(() => {
           target[property] = ref.valueOf();
@@ -234,8 +238,7 @@ var HandlerRegistry = class extends HTMLElement {
   }
   #handleText(e) {
     if (e instanceof CustomEvent) {
-      const target = e.target;
-      const { identifier } = e.detail;
+      const { identifier, target } = e.detail;
       if (identifier in this && target instanceof HTMLElement) {
         const ref = this.lookup(identifier);
         this.effect(() => {
@@ -247,8 +250,7 @@ var HandlerRegistry = class extends HTMLElement {
   }
   #handleHTML(e) {
     if (e instanceof CustomEvent) {
-      const { identifier } = e.detail;
-      const target = e.target;
+      const { identifier, target } = e.detail;
       if (identifier in this && target instanceof HTMLElement) {
         const ref = this.lookup(identifier);
         this.effect(() => {
@@ -260,8 +262,7 @@ var HandlerRegistry = class extends HTMLElement {
   }
   #handleBind(e) {
     if (e instanceof CustomEvent) {
-      const { identifier, property } = e.detail;
-      const target = e.target;
+      const { identifier, property, target } = e.detail;
       if (identifier in this && target instanceof HTMLElement && property in target) {
         const state = this.lookup(identifier);
         if (isState(state)) {
@@ -278,8 +279,10 @@ var HandlerRegistry = class extends HTMLElement {
     }
   }
   connectedCallback() {
+    console.log(`${this.tagName} connected`);
     const { signal: signal2 } = this.abortController;
     this.addEventListener("@attr-request", this.#handleAttr, { signal: signal2 });
+    this.addEventListener("@bool-request", this.#handleBool, { signal: signal2 });
     this.addEventListener("@class-request", this.#handleClass, { signal: signal2 });
     this.addEventListener("@on-request", this.#handleOn, { signal: signal2 });
     this.addEventListener("@use-request", this.#handleUse, { signal: signal2 });

package/client/utils.d.ts

@@ -1,14 +1,6 @@
 declare const spaces_sep_by_comma: RegExp;
-/**
- * Idempotent string conversion to kebab-case
- */
-declare const toKebabCase: (str: string) => string;
-/**
- * Idempotent string conversion to PascalCase
- */
-declare const toPascalCase: (str: string) => string;
 type LooseAutocomplete<T extends string> = T | Omit<string, T>;
-type Types = LooseAutocomplete<"null" | "undefined" | "boolean" | "number" | "bigint" | "string" | "symbol" | "function" | "class" | "array" | "date" | "error" | "regexp" | "object">;
+type Types = LooseAutocomplete<"null" | "undefined" | "boolean" | "number" | "bigint" | "string" | "symbol" | "function" | "AsyncFunction" | "class" | "array" | "date" | "error" | "regexp" | "object">;
 /**
  * A more reliable `typeof` function
  */
@@ -16,15 +8,13 @@ declare function type(value: unknown): Types;
 declare const booleanAttributes: string[];
 declare const bindingConfig: {
     checked: {
-        element: string[];
         type: string[];
         event: string;
     };
     value: {
-        element: string[];
         type: string[];
         event: string;
     };
 };
 
-export { bindingConfig, booleanAttributes, spaces_sep_by_comma, toKebabCase, toPascalCase, type };
+export { bindingConfig, booleanAttributes, spaces_sep_by_comma, type };

package/client/utils.js

@@ -1,36 +1,5 @@
 // src/utils.ts
-var is_upper = /[A-Z]/;
 var spaces_sep_by_comma = /\s*,\s*/;
-var toKebabCase = (str) => {
-  let kebab = "";
-  for (let index = 0; index < str.length; index++) {
-    const char = str[index];
-    if (index !== 0 && is_upper.test(char)) {
-      kebab += `-${char.toLowerCase()}`;
-    } else {
-      kebab += char.toLowerCase();
-    }
-  }
-  return kebab;
-};
-var toPascalCase = (str) => {
-  let pascal = "";
-  let toUpper = true;
-  for (let index = 0; index < str.length; index++) {
-    const char = str[index];
-    if (char === "-") {
-      toUpper = true;
-      continue;
-    }
-    if (toUpper) {
-      pascal += char.toUpperCase();
-      toUpper = false;
-    } else {
-      pascal += char.toLowerCase();
-    }
-  }
-  return pascal;
-};
 function type(value) {
   if (value === null) {
     return "null";
@@ -42,11 +11,9 @@ function type(value) {
   if (!["object", "function"].includes(baseType)) {
     return baseType;
   }
-  if (typeof value === "object" && Symbol.toStringTag in value) {
-    const tag = value[Symbol.toStringTag];
-    if (typeof tag === "string") {
-      return tag;
-    }
+  const tag = value[Symbol.toStringTag];
+  if (typeof tag === "string") {
+    return tag;
   }
   if (baseType === "function" && Function.prototype.toString.call(value).startsWith("class")) {
     return "class";
@@ -109,15 +76,13 @@ var booleanAttributes = [
 ];
 var bindingConfig = {
   "checked": {
-    element: ["input"],
     type: ["boolean"],
     event: "change"
   },
   "value": {
-    element: ["input", "select", "textarea"],
     type: ["string", "number"],
     event: "input"
   }
 };
 
-export { bindingConfig, booleanAttributes, spaces_sep_by_comma, toKebabCase, toPascalCase, type };
+export { bindingConfig, booleanAttributes, spaces_sep_by_comma, type };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@radishland/runtime",
-  "version": "0.1.2",
+  "version": "0.2.1",
   "type": "module",
   "description": "The Radish runtime",
   "author": "Frédéric Crozatier",
@@ -12,10 +12,6 @@
     "url": "https://github.com/radishland/radish/issues"
   },
   "license": "MIT",
-  "scripts": {
-    "build": "tsup",
-    "prepublishOnly": "pnpm build"
-  },
   "exports": {
     ".": {
       "import": "./client/index.js",
@@ -46,5 +42,8 @@
   "devDependencies": {
     "tsup": "^8.4.0",
     "typescript": "^5.7.3"
+  },
+  "scripts": {
+    "build": "tsup"
   }
-}
+}