@radishland/runtime 0.2.0 → 0.3.0

package/client/boot.js

@@ -1,5 +1,4 @@
 // src/utils.ts
-var spaces_sep_by_comma = /\s*,\s*/;
 var bindingConfig = {
   "checked": {
     type: ["boolean"],
@@ -13,25 +12,27 @@ var bindingConfig = {
 
 // src/boot.ts
 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", {
+  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: value || 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("@bind-request", {
+    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,
@@ -44,27 +45,26 @@ var hydrateElement = (element) => {
       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 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("@class");
+  const classList = element.getAttribute("classlist");
   if (classList) {
-    const classRequest = new CustomEvent("@class-request", {
+    const classRequest = new CustomEvent("rad::classlist", {
       bubbles: true,
       cancelable: true,
       composed: true,
@@ -75,9 +75,9 @@ var hydrateElement = (element) => {
     });
     element.dispatchEvent(classRequest);
   }
-  const html = element.getAttribute("@html");
+  const html = element.getAttribute("html");
   if (html) {
-    const htmlRequest = new CustomEvent("@html-request", {
+    const htmlRequest = new CustomEvent("rad::html", {
       bubbles: true,
       cancelable: true,
       composed: true,
@@ -88,43 +88,41 @@ var hydrateElement = (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
-        }
-      });
-      element.dispatchEvent(onRequest);
-    }
+  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 = 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
-        }
-      });
-      element.dispatchEvent(propRequest);
-    }
+  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");
+  const text = element.getAttribute("text");
   if (text) {
-    const textRequest = new CustomEvent("@text-request", {
+    const textRequest = new CustomEvent("rad::text", {
       bubbles: true,
       cancelable: true,
       composed: true,
@@ -135,20 +133,20 @@ var hydrateElement = (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);
-    }
+  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) => {

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";
@@ -283,15 +281,15 @@ 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 });
-    this.addEventListener("@prop-request", this.#handleProp, { signal: signal2 });
-    this.addEventListener("@html-request", this.#handleHTML, { signal: signal2 });
-    this.addEventListener("@text-request", this.#handleText, { signal: signal2 });
-    this.addEventListener("@bind-request", this.#handleBind, { signal: signal2 });
+    this.addEventListener("rad::attr", this.#handleAttr, { signal: signal2 });
+    this.addEventListener("rad::bind", this.#handleBind, { signal: signal2 });
+    this.addEventListener("rad::bool", this.#handleBool, { signal: signal2 });
+    this.addEventListener("rad::classlist", this.#handleClass, { signal: signal2 });
+    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::use", this.#handleUse, { signal: signal2 });
   }
   disconnectedCallback() {
     this.abortController.abort();

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
  */
@@ -25,4 +17,4 @@ declare const bindingConfig: {
     };
 };
 
-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";
@@ -118,4 +85,4 @@ var bindingConfig = {
   }
 };
 
-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.2.0",
+  "version": "0.3.0",
   "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"
   }
-}
+}