@radishland/runtime 0.0.2 → 0.0.4

package/client/index.d.ts

@@ -1,3 +1,89 @@
-export { HandlerRegistry } from "./handler-registry.ts";
-export * from "./reactivity.ts";
-export * from "./handlers.ts";
+import { Signal } from 'signal-polyfill';
+
+interface AutonomousCustomElement {
+  /**
+   * A static getter
+   */
+  readonly observedAttributes?: string[] | undefined;
+  /**
+   * A static getter
+   */
+  readonly disabledFeatures?: ("internals" | "shadow")[] | undefined;
+  /**
+   * A static getter
+   */
+  readonly formAssociated?: boolean | undefined;
+
+  connectedCallback?(): void;
+  disconnectedCallback?(): void;
+  adoptedCallback?(): void;
+
+  attributeChangedCallback?(
+    name: string,
+    previous: string,
+    next: string,
+  ): void;
+
+  formAssociatedCallback?(): void;
+  formResetCallback?(): void;
+  formDisabledCallback?(): void;
+  formStateRestoreCallback?(): void;
+}
+
+type ReactivityOptions = { deep: boolean };
+type Destructor = () => void;
+type EffectCallback = () => Destructor | void;
+type EffectOptions = {
+  signal: AbortSignal;
+};
+
+/**
+ * A Scoped Handler Registry implements the logic for handling effect requests.
+ *
+ * Extend this class by adding new methods in your subclass to implement your own effect handlers
+ */
+declare class HandlerRegistry extends HTMLElement implements AutonomousCustomElement {
+    #private;
+    [key: string]: any;
+    /**
+     * References the handler's `AbortController`.
+     *
+     * The `abort` method of the controller is called in the `disconnectedCallback` method. It allows to cleanup event handlers and other abortable operations
+     */
+    abortController: AbortController;
+    constructor();
+    /**
+     * Creates an effect that is automatically cleaned up when the component is disconnected
+     *
+     * An optional AbortSignal can be provided to abort the effect prematurely
+     */
+    $effect(callback: EffectCallback, options?: EffectOptions): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}
+
+declare class ReactiveValue<T> extends Signal.State<T> {
+    private get;
+    private set;
+    get value(): T;
+    set value(newValue: T);
+}
+declare class ReactiveComputation<T> extends Signal.Computed<T> {
+    private get;
+    get value(): T;
+}
+declare const $object: <T extends Record<PropertyKey, any>>(init: T, options?: ReactivityOptions) => T;
+declare const $array: <T extends ArrayLike<any>>(init: T, options?: ReactivityOptions) => T;
+declare const isState: (s: unknown) => s is InstanceType<typeof ReactiveValue>;
+declare const isComputed: (s: unknown) => s is InstanceType<typeof ReactiveComputation>;
+declare const getValue: (signal: unknown) => unknown;
+declare const $state: <T>(initialValue: T, options?: Signal.Options<T | undefined>) => ReactiveValue<T>;
+declare const $computed: <T>(computation: () => T, options?: Signal.Options<T>) => ReactiveComputation<T>;
+/**
+ * Create an unowned effect that must be cleanup up manually
+ *
+ * Accept an AbortSignal to abort the effect
+ */
+declare const $effect: (cb: EffectCallback, options?: EffectOptions) => Destructor;
+
+export { $array, $computed, $effect, $object, $state, HandlerRegistry, ReactiveComputation, ReactiveValue, getValue, isComputed, isState };

package/client/index.js

@@ -1,3 +1,515 @@
-export { HandlerRegistry } from "./handler-registry.js";
-export * from "./reactivity.js";
-export * from "./handlers.js";
+import { Signal } from 'signal-polyfill';
+
+// src/utils.ts
+var spaces_sep_by_comma = /\s*,\s*/;
+var booleanAttributes = [
+  "allowfullscreen",
+  // on <iframe>
+  "async",
+  // on <script>
+  "autofocus",
+  // on <button>, <input>, <select>, <textarea>
+  "autoplay",
+  // on <audio>, <video>
+  "checked",
+  // on <input type="checkbox">, <input type="radio">
+  "controls",
+  // on <audio>, <video>
+  "default",
+  // on <track>
+  "defer",
+  // on <script>
+  "disabled",
+  // on form elements like <button>, <fieldset>, <input>, <optgroup>, <option>,<select>, <textarea>
+  "formnovalidate",
+  // on <button>, <input type="submit">
+  "hidden",
+  // global
+  "inert",
+  // global
+  "ismap",
+  // on <img>
+  "itemscope",
+  // global; part of microdata
+  "loop",
+  // on <audio>, <video>
+  "multiple",
+  // on <input type="file">, <select>
+  "muted",
+  // on <audio>, <video>
+  "nomodule",
+  // on <script>
+  "novalidate",
+  // on <form>
+  "open",
+  // on <details>
+  "readonly",
+  // on <input>, <textarea>
+  "required",
+  // on <input>, <select>, <textarea>
+  "reversed",
+  // on <ol>
+  "selected"
+  // on <option>
+];
+
+// src/config.ts
+var bindingConfig = {
+  "checked": {
+    element: ["input"],
+    type: ["boolean"],
+    event: "change"
+  },
+  "value": {
+    element: ["input", "select", "textarea"],
+    type: ["string", "number"],
+    event: "input"
+  }
+};
+var ReactiveValue = class extends Signal.State {
+  // @ts-ignore see above
+  get;
+  // @ts-ignore see above
+  set;
+  get value() {
+    return super.get();
+  }
+  set value(newValue) {
+    super.set(newValue);
+  }
+};
+var ReactiveComputation = class extends Signal.Computed {
+  // @ts-ignore see above
+  get;
+  get value() {
+    return super.get();
+  }
+};
+var maybeReactiveObjectType = (thing, options) => {
+  if (typeof thing === "object") {
+    if (Array.isArray(thing)) {
+      return $array(thing, options);
+    } else if (thing) {
+      return $object(thing, options);
+    }
+  }
+  return thing;
+};
+var $object = (init, options = { deep: false }) => {
+  if (options.deep === true) {
+    for (const [key, value] of Object.entries(init)) {
+      init[key] = maybeReactiveObjectType(value, options);
+    }
+  }
+  const state = new Signal.State(init);
+  const proxy = new Proxy(init, {
+    get(_target, p, _receiver) {
+      return state.get()[p];
+    },
+    set(_target, p, newValue, _receiver) {
+      state.set({
+        ...state.get(),
+        [p]: maybeReactiveObjectType(newValue, options)
+      });
+      return true;
+    }
+  });
+  return proxy;
+};
+var $array = (init, options = { deep: false }) => {
+  if (options.deep) {
+    for (const [key, value] of Object.entries(init)) {
+      init[key] = maybeReactiveObjectType(value, options);
+    }
+  }
+  const state = new Signal.State(init);
+  const proxy = new Proxy(init, {
+    get(_target, p, _receiver) {
+      return state.get()[p];
+    },
+    set(_target, p, newValue, _receiver) {
+      state.set({
+        ...state.get(),
+        [p]: maybeReactiveObjectType(newValue, options)
+      });
+      return true;
+    }
+  });
+  return proxy;
+};
+var isState = (s) => {
+  return Signal.isState(s);
+};
+var isComputed = (s) => {
+  return Signal.isComputed(s);
+};
+var getValue = (signal) => {
+  if (isState(signal) || isComputed(signal)) {
+    return signal.value;
+  }
+  return signal;
+};
+var $state = (initialValue, options) => {
+  return new ReactiveValue(initialValue, options);
+};
+var $computed = (computation, options) => {
+  return new ReactiveComputation(computation, options);
+};
+var pending = false;
+var watcher = new Signal.subtle.Watcher(() => {
+  if (!pending) {
+    pending = true;
+    queueMicrotask(() => {
+      pending = false;
+      for (const s of watcher.getPending()) s.get();
+      watcher.watch();
+    });
+  }
+});
+var $effect = (cb, options) => {
+  if (options?.signal?.aborted) return () => {
+  };
+  let destroy;
+  const c = new Signal.Computed(() => {
+    destroy?.();
+    destroy = cb() ?? void 0;
+  });
+  watcher.watch(c);
+  c.get();
+  let cleaned = false;
+  const cleanup = () => {
+    if (cleaned) return;
+    destroy?.();
+    watcher.unwatch(c);
+    cleaned = true;
+  };
+  options?.signal.addEventListener("abort", cleanup);
+  return cleanup;
+};
+
+// src/handler-registry.ts
+var HandlerRegistry = class extends HTMLElement {
+  #cleanup = [];
+  /**
+   * References the handler's `AbortController`.
+   *
+   * The `abort` method of the controller is called in the `disconnectedCallback` method. It allows to cleanup event handlers and other abortable operations
+   */
+  abortController;
+  constructor() {
+    super();
+    this.abortController = new AbortController();
+  }
+  /**
+   * Creates an effect that is automatically cleaned up when the component is disconnected
+   *
+   * An optional AbortSignal can be provided to abort the effect prematurely
+   */
+  $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);
+}
+
+// src/handlers.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);
+          }
+        }
+        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
+              }
+            });
+            entry.dispatchEvent(bindRequest);
+          }
+        }
+      }
+    );
+  });
+}, 100);
+
+export { $array, $computed, $effect, $object, $state, HandlerRegistry, ReactiveComputation, ReactiveValue, getValue, isComputed, isState };

package/package.json

@@ -1,21 +1,26 @@
 {
   "name": "@radishland/runtime",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "type": "module",
   "description": "The Radish runtime",
   "author": "Frédéric Crozatier",
   "license": "MIT",
   "scripts": {
-    "build": "tsc",
-    "prepublishOnly": "pnpm build && cp src/types.d.ts client/"
+    "build": "tsup",
+    "prepublishOnly": "pnpm build"
   },
   "main": "./client/index.js",
   "exports": {
     ".": "./client/index.js"
   },
-  "files": ["./client", "README.md", "LICENCE"],
+  "files": [
+    "./client",
+    "README.md",
+    "LICENCE"
+  ],
   "dependencies": {
-    "signal-polyfill": "^0.2.2"
+    "signal-polyfill": "^0.2.2",
+    "tsup": "^8.4.0"
   },
   "devDependencies": {
     "typescript": "^5.7.3"

package/client/config.d.ts

@@ -1,12 +0,0 @@
-export declare const bindingConfig: {
-    checked: {
-        element: string[];
-        type: string[];
-        event: string;
-    };
-    value: {
-        element: string[];
-        type: string[];
-        event: string;
-    };
-};

package/client/config.js

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

package/client/handler-registry.d.ts

@@ -1,25 +0,0 @@
-import type { AutonomousCustomElement, EffectCallback, EffectOptions } from "./types.d.ts";
-/**
- * A Scoped Handler Registry implements the logic for handling effect requests.
- *
- * Extend this class by adding new methods in your subclass to implement your own effect handlers
- */
-export declare class HandlerRegistry extends HTMLElement implements AutonomousCustomElement {
-    #private;
-    [key: string]: any;
-    /**
-     * References the handler's `AbortController`.
-     *
-     * The `abort` method of the controller is called in the `disconnectedCallback` method. It allows to cleanup event handlers and other abortable operations
-     */
-    abortController: AbortController;
-    constructor();
-    /**
-     * Creates an effect that is automatically cleaned up when the component is disconnected
-     *
-     * An optional AbortSignal can be provided to abort the effect prematurely
-     */
-    $effect(callback: EffectCallback, options?: EffectOptions): void;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-}

package/client/handler-registry.js

@@ -1,211 +0,0 @@
-import { booleanAttributes } from "./utils.js";
-import { bindingConfig } from "./config.js";
-import { $effect, getValue, isComputed, isState } from "./reactivity.js";
-/**
- * A Scoped Handler Registry implements the logic for handling effect requests.
- *
- * Extend this class by adding new methods in your subclass to implement your own effect handlers
- */
-export class HandlerRegistry extends HTMLElement {
-    #cleanup = [];
-    /**
-     * References the handler's `AbortController`.
-     *
-     * The `abort` method of the controller is called in the `disconnectedCallback` method. It allows to cleanup event handlers and other abortable operations
-     */
-    abortController;
-    constructor() {
-        super();
-        this.abortController = new AbortController();
-    }
-    /**
-     * Creates an effect that is automatically cleaned up when the component is disconnected
-     *
-     * An optional AbortSignal can be provided to abort the effect prematurely
-     */
-    $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(" ")) {
-                                // @ts-ignore target is an HTMLElement
-                                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);
-                    // @ts-ignore property is in target
-                    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)) {
-                    // @ts-ignore property is in target
-                    state.value = target[property];
-                    // Add change listener
-                    target.addEventListener(bindingConfig[property].event, () => {
-                        // @ts-ignore property is in target
-                        state.value = target[property];
-                    });
-                    // Sync
-                    this.$effect(() => {
-                        // @ts-ignore property is in target
-                        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.d.ts

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

package/client/handlers.js

@@ -1,136 +0,0 @@
-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);

package/client/reactivity.d.ts

@@ -1,25 +0,0 @@
-import { Signal } from "signal-polyfill";
-import type { Destructor, EffectCallback, EffectOptions, ReactivityOptions } from "./types.d.ts";
-export declare class ReactiveValue<T> extends Signal.State<T> {
-    private get;
-    private set;
-    get value(): T;
-    set value(newValue: T);
-}
-export declare class ReactiveComputation<T> extends Signal.Computed<T> {
-    private get;
-    get value(): T;
-}
-export declare const $object: <T extends Record<PropertyKey, any>>(init: T, options?: ReactivityOptions) => T;
-export declare const $array: <T extends ArrayLike<any>>(init: T, options?: ReactivityOptions) => T;
-export declare const isState: (s: unknown) => s is InstanceType<typeof ReactiveValue>;
-export declare const isComputed: (s: unknown) => s is InstanceType<typeof ReactiveComputation>;
-export declare const getValue: (signal: unknown) => unknown;
-export declare const $state: <T>(initialValue: T, options?: Signal.Options<T | undefined>) => ReactiveValue<T>;
-export declare const $computed: <T>(computation: () => T, options?: Signal.Options<T>) => ReactiveComputation<T>;
-/**
- * Create an unowned effect that must be cleanup up manually
- *
- * Accept an AbortSignal to abort the effect
- */
-export declare const $effect: (cb: EffectCallback, options?: EffectOptions) => Destructor;

package/client/reactivity.js

@@ -1,132 +0,0 @@
-import { Signal } from "signal-polyfill";
-// @ts-ignore we're hiding get and set
-export class ReactiveValue extends Signal.State {
-    // @ts-ignore see above
-    get;
-    // @ts-ignore see above
-    set;
-    get value() {
-        return super.get();
-    }
-    set value(newValue) {
-        super.set(newValue);
-    }
-}
-// @ts-ignore we're hiding get and set
-export class ReactiveComputation extends Signal.Computed {
-    // @ts-ignore see above
-    get;
-    get value() {
-        return super.get();
-    }
-}
-const maybeReactiveObjectType = (thing, options) => {
-    if (typeof thing === "object") {
-        if (Array.isArray(thing)) {
-            return $array(thing, options);
-        }
-        else if (thing) {
-            return $object(thing, options);
-        }
-    }
-    return thing;
-};
-export const $object = (init, options = { deep: false }) => {
-    if (options.deep === true) {
-        for (const [key, value] of Object.entries(init)) {
-            init[key] = maybeReactiveObjectType(value, options);
-        }
-    }
-    const state = new Signal.State(init);
-    const proxy = new Proxy(init, {
-        get(_target, p, _receiver) {
-            return state.get()[p];
-        },
-        set(_target, p, newValue, _receiver) {
-            state.set({
-                ...state.get(),
-                [p]: maybeReactiveObjectType(newValue, options),
-            });
-            return true;
-        },
-    });
-    return proxy;
-};
-export const $array = (init, options = { deep: false }) => {
-    if (options.deep) {
-        for (const [key, value] of Object.entries(init)) {
-            init[key] = maybeReactiveObjectType(value, options);
-        }
-    }
-    const state = new Signal.State(init);
-    const proxy = new Proxy(init, {
-        get(_target, p, _receiver) {
-            // @ts-ignore state has p
-            return state.get()[p];
-        },
-        set(_target, p, newValue, _receiver) {
-            state.set({
-                ...state.get(),
-                [p]: maybeReactiveObjectType(newValue, options),
-            });
-            return true;
-        },
-    });
-    return proxy;
-};
-export const isState = (s) => {
-    return Signal.isState(s);
-};
-export const isComputed = (s) => {
-    return Signal.isComputed(s);
-};
-export const getValue = (signal) => {
-    if (isState(signal) || isComputed(signal)) {
-        return signal.value;
-    }
-    return signal;
-};
-export const $state = (initialValue, options) => {
-    return new ReactiveValue(initialValue, options);
-};
-export const $computed = (computation, options) => {
-    return new ReactiveComputation(computation, options);
-};
-let pending = false;
-const watcher = new Signal.subtle.Watcher(() => {
-    if (!pending) {
-        pending = true;
-        queueMicrotask(() => {
-            pending = false;
-            for (const s of watcher.getPending())
-                s.get();
-            watcher.watch();
-        });
-    }
-});
-/**
- * Create an unowned effect that must be cleanup up manually
- *
- * Accept an AbortSignal to abort the effect
- */
-export const $effect = (cb, options) => {
-    if (options?.signal?.aborted)
-        return () => { };
-    let destroy;
-    const c = new Signal.Computed(() => {
-        destroy?.();
-        destroy = cb() ?? undefined;
-    });
-    watcher.watch(c);
-    c.get();
-    let cleaned = false;
-    const cleanup = () => {
-        if (cleaned)
-            return;
-        destroy?.();
-        watcher.unwatch(c);
-        cleaned = true;
-    };
-    options?.signal.addEventListener("abort", cleanup);
-    return cleanup;
-};

package/client/types.d.ts

@@ -1,75 +0,0 @@
-export type OnRequestDetail = {
-  type: string;
-  handler: string;
-};
-
-export type UseRequestDetail = {
-  hook: string;
-};
-
-export type AttrRequestDetail = {
-  attribute: string;
-  identifier: string;
-};
-
-export type PropRequestDetail = {
-  property: string;
-  identifier: string;
-};
-
-export type TextRequestDetail = {
-  identifier: string;
-};
-
-export type HTMLRequestDetail = {
-  identifier: string;
-};
-
-export type ClassRequestDetail = {
-  identifier: string;
-};
-
-type BindableProperty = "checked" | "value";
-
-export type BindRequestDetail = {
-  property: BindableProperty;
-  identifier: string;
-  handled: boolean;
-};
-
-export interface AutonomousCustomElement {
-  /**
-   * A static getter
-   */
-  readonly observedAttributes?: string[] | undefined;
-  /**
-   * A static getter
-   */
-  readonly disabledFeatures?: ("internals" | "shadow")[] | undefined;
-  /**
-   * A static getter
-   */
-  readonly formAssociated?: boolean | undefined;
-
-  connectedCallback?(): void;
-  disconnectedCallback?(): void;
-  adoptedCallback?(): void;
-
-  attributeChangedCallback?(
-    name: string,
-    previous: string,
-    next: string,
-  ): void;
-
-  formAssociatedCallback?(): void;
-  formResetCallback?(): void;
-  formDisabledCallback?(): void;
-  formStateRestoreCallback?(): void;
-}
-
-export type ReactivityOptions = { deep: boolean };
-export type Destructor = () => void;
-export type EffectCallback = () => Destructor | void;
-export type EffectOptions = {
-  signal: AbortSignal;
-};

package/client/utils.d.ts

@@ -1,10 +0,0 @@
-export declare const spaces_sep_by_comma: RegExp;
-/**
- * Idempotent string conversion to kebab-case
- */
-export declare const toKebabCase: (str: string) => string;
-/**
- * Idempotent string conversion to PascalCase
- */
-export declare const toPascalCase: (str: string) => string;
-export declare const booleanAttributes: string[];

package/client/utils.js

@@ -1,66 +0,0 @@
-const is_upper = /[A-Z]/;
-export const spaces_sep_by_comma = /\s*,\s*/;
-/**
- * Idempotent string conversion to kebab-case
- */
-export const 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;
-};
-/**
- * Idempotent string conversion to PascalCase
- */
-export const 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;
-};
-export const booleanAttributes = [
-    "allowfullscreen", // on <iframe>
-    "async", // on <script>
-    "autofocus", // on <button>, <input>, <select>, <textarea>
-    "autoplay", // on <audio>, <video>
-    "checked", // on <input type="checkbox">, <input type="radio">
-    "controls", // on <audio>, <video>
-    "default", // on <track>
-    "defer", // on <script>
-    "disabled", // on form elements like <button>, <fieldset>, <input>, <optgroup>, <option>,<select>, <textarea>
-    "formnovalidate", // on <button>, <input type="submit">
-    "hidden", // global
-    "inert", // global
-    "ismap", // on <img>
-    "itemscope", // global; part of microdata
-    "loop", // on <audio>, <video>
-    "multiple", // on <input type="file">, <select>
-    "muted", // on <audio>, <video>
-    "nomodule", // on <script>
-    "novalidate", // on <form>
-    "open", // on <details>
-    "readonly", // on <input>, <textarea>
-    "required", // on <input>, <select>, <textarea>
-    "reversed", // on <ol>
-    "selected", // on <option>
-];