@radishland/runtime 0.0.7 → 1.0.0-alpha.1

package/build.ts

@@ -0,0 +1,14 @@
+import { emptyDirSync, walkSync } from "@std/fs";
+import stripTypes from "@fcrozatier/type-strip";
+import { join } from "@std/path";
+
+console.log("Building client runtime...");
+emptyDirSync("client");
+
+for (const entry of walkSync("src", { exts: [".ts"] })) {
+  const content = Deno.readTextFileSync(entry.path);
+  const dest = join("client", entry.name.replace(/\.ts$/, ".js"));
+  const js = stripTypes(content, { pathRewriting: true, removeComments: true });
+  Deno.writeTextFileSync(dest, js);
+}
+console.log("Done!");

package/client/config.js

@@ -0,0 +1,12 @@
+export const bindingConfig = {
+  "checked": {
+    element: ["input"],
+    type: ["boolean"],
+    event: "change",
+  },
+  "value": {
+    element: ["input", "select", "textarea"],
+    type: ["string", "number"],
+    event: "input",
+  },
+};

package/client/handler-registry.js

@@ -0,0 +1,236 @@
+import { booleanAttributes } from "./utils.js";
+import { bindingConfig } from "./config.js";
+
+import { $effect, getValue, isComputed, isState } from "./reactivity.js";
+
+export class HandlerRegistry extends HTMLElement {
+
+  #cleanup = [];
+
+    abortController;
+
+  constructor() {
+    super();
+    this.abortController = new AbortController();
+  }
+
+    $effect(callback, options) {
+    const signals = [this.abortController.signal];
+    if (options?.signal) signals.push(options.signal);
+
+    $effect(callback, { ...options, signal: AbortSignal.any(signals) });
+  }
+
+  #get(identifier) {
+    return this[identifier];
+  }
+
+  #handleOn(e) {
+    if (e instanceof CustomEvent) {
+      const { handler, type } = e.detail;
+
+      if (handler in this && typeof this.#get(handler) === "function") {
+        e.target?.addEventListener(type, this.#get(handler).bind(this));
+        e.stopPropagation();
+      }
+    }
+  }
+
+  #handleClass(e) {
+    const target = e.target;
+    if (e instanceof CustomEvent && target) {
+      const { identifier } = e.detail;
+
+      if (identifier in this) {
+        this.$effect(() => {
+          const classList = getValue(this.#get(identifier));
+          if (classList && typeof classList === "object") {
+            for (const [k, v] of Object.entries(classList)) {
+              const force = !!getValue(v);
+              for (const className of k.split(" ")) {
+                                target.classList.toggle(
+                  className,
+                  force,
+                );
+              }
+            }
+          }
+        });
+
+        e.stopPropagation();
+      }
+    }
+  }
+
+  #handleUse(e) {
+    if (e instanceof CustomEvent) {
+      const { hook } = e.detail;
+
+      if (hook in this && typeof this.#get(hook) === "function") {
+        const cleanup = this.#get(hook).bind(this)(e.target);
+        if (typeof cleanup === "function") {
+          this.#cleanup.push(cleanup);
+        }
+        e.stopPropagation();
+      }
+    }
+  }
+
+  #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.#get(identifier);
+
+        const setAttr = () => {
+          const value = getValue(ref);
+          if (booleanAttributes.includes(attribute)) {
+            value
+              ? target.setAttribute(attribute, "")
+              : target.removeAttribute(attribute);
+          } else {
+            target.setAttribute(attribute, `${value}`);
+          }
+        };
+
+        if (isState(ref) || isComputed(ref)) {
+          this.$effect(() => setAttr());
+        } else {
+          setAttr();
+        }
+
+        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 ref = this.#get(identifier);
+
+        const setProp = () => {
+          const value = getValue(ref);
+                    target[property] = value;
+        };
+
+        if (isState(ref) || isComputed(ref)) {
+          this.$effect(() => setProp());
+        } else {
+          setProp();
+        }
+
+        e.stopPropagation();
+      }
+    }
+  }
+
+  #handleText(e) {
+    if (e instanceof CustomEvent) {
+      const target = e.target;
+
+      const { identifier } = e.detail;
+
+      if (identifier in this && target instanceof HTMLElement) {
+        const ref = this.#get(identifier);
+
+        const setTextContent = () => {
+          const value = getValue(ref);
+          target.textContent = `${value}`;
+        };
+
+        if (isState(ref) || isComputed(ref)) {
+          this.$effect(() => setTextContent());
+        } else {
+          setTextContent();
+        }
+
+        e.stopPropagation();
+      }
+    }
+  }
+
+  #handleHTML(e) {
+    if (e instanceof CustomEvent) {
+      const { identifier } = e.detail;
+      const target = e.target;
+
+      if (identifier in this && target instanceof HTMLElement) {
+        const ref = this.#get(identifier);
+
+        const setInnerHTML = () => {
+          const value = getValue(ref);
+          target.innerHTML = `${value}`;
+        };
+
+        if (isState(ref) || isComputed(ref)) {
+          this.$effect(() => setInnerHTML());
+        } else {
+          setInnerHTML();
+        }
+
+        e.stopPropagation();
+      }
+    }
+  }
+
+  #handleBind(e) {
+    if (e instanceof CustomEvent) {
+      const { identifier, property } = e.detail;
+      const target = e.target;
+
+      if (
+        identifier in this && target instanceof HTMLElement &&
+        property in target
+      ) {
+        const state = this.#get(identifier);
+        if (isState(state)) {
+                    state.value = target[property];
+
+                    target.addEventListener(bindingConfig[property].event, () => {
+                        state.value = target[property];
+          });
+
+                    this.$effect(() => {
+                        target[property] = state.value;
+          });
+        }
+
+        e.stopPropagation();
+      }
+    }
+  }
+
+  connectedCallback() {
+    const { signal } = this.abortController;
+
+    this.addEventListener("@attr-request", this.#handleAttr, { signal });
+    this.addEventListener("@class-request", this.#handleClass, { signal });
+    this.addEventListener("@on-request", this.#handleOn, { signal });
+    this.addEventListener("@use-request", this.#handleUse, { signal });
+    this.addEventListener("@prop-request", this.#handleProp, { signal });
+    this.addEventListener("@html-request", this.#handleHTML, { signal });
+    this.addEventListener("@text-request", this.#handleText, { signal });
+    this.addEventListener("@bind-request", this.#handleBind, { signal });
+  }
+
+  disconnectedCallback() {
+    this.abortController.abort();
+
+    for (const cleanup of this.#cleanup) {
+      cleanup();
+    }
+  }
+}
+
+if (window && !customElements.get("handler-registry")) {
+  customElements.define("handler-registry", HandlerRegistry);
+}

package/client/handlers.js

@@ -0,0 +1,174 @@
+import { bindingConfig } from "./config.js";
+import { spaces_sep_by_comma } from "./utils.js";
+
+const 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);
+            }
+          }
+
+          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);
+            }
+          }
+
+          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);
+            }
+          }
+
+          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,
+                  handled: false,
+                },
+              });
+
+              entry.dispatchEvent(bindRequest);
+            }
+          }
+        },
+      );
+  });
+}, 100);