@radishland/runtime 0.0.7 → 1.0.0-alpha.1

package/src/handler-registry.ts

@@ -0,0 +1,274 @@
+import { booleanAttributes } from "./utils.ts";
+import { bindingConfig } from "./config.ts";
+
+import { $effect, getValue, isComputed, isState } from "./reactivity.ts";
+import type {
+  AttrRequestDetail,
+  AutonomousCustomElement,
+  BindRequestDetail,
+  ClassRequestDetail,
+  Destructor,
+  EffectCallback,
+  EffectOptions,
+  HTMLRequestDetail,
+  OnRequestDetail,
+  PropRequestDetail,
+  TextRequestDetail,
+  UseRequestDetail,
+} 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 class HandlerRegistry extends HTMLElement
+  implements AutonomousCustomElement {
+  [key: string]: any;
+
+  #cleanup: Destructor[] = [];
+
+  /**
+   * 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() {
+    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: EffectCallback, options?: EffectOptions) {
+    const signals = [this.abortController.signal];
+    if (options?.signal) signals.push(options.signal);
+
+    $effect(callback, { ...options, signal: AbortSignal.any(signals) });
+  }
+
+  #get(identifier: string) {
+    return this[identifier];
+  }
+
+  #handleOn(e: Event) {
+    if (e instanceof CustomEvent) {
+      const { handler, type }: OnRequestDetail = e.detail;
+
+      if (handler in this && typeof this.#get(handler) === "function") {
+        e.target?.addEventListener(type, this.#get(handler).bind(this));
+        e.stopPropagation();
+      }
+    }
+  }
+
+  #handleClass(e: Event) {
+    const target = e.target;
+    if (e instanceof CustomEvent && target) {
+      const { identifier }: ClassRequestDetail = 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: Event) {
+    if (e instanceof CustomEvent) {
+      const { hook }: UseRequestDetail = 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: Event) {
+    if (e instanceof CustomEvent) {
+      const { identifier, attribute }: AttrRequestDetail = 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: Event) {
+    if (e instanceof CustomEvent) {
+      const { identifier, property }: PropRequestDetail = 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: Event) {
+    if (e instanceof CustomEvent) {
+      const target = e.target;
+
+      const { identifier }: TextRequestDetail = 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: Event) {
+    if (e instanceof CustomEvent) {
+      const { identifier }: HTMLRequestDetail = 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: Event) {
+    if (e instanceof CustomEvent) {
+      const { identifier, property }: BindRequestDetail = 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/src/handlers.ts

@@ -0,0 +1,174 @@
+import { bindingConfig } from "./config.ts";
+import { spaces_sep_by_comma } from "./utils.ts";
+
+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/src/index.ts

@@ -0,0 +1,3 @@
+export { HandlerRegistry } from "./handler-registry.ts";
+export * from "./reactivity.ts";
+export * from "./handlers.ts";

package/src/reactivity.ts

@@ -0,0 +1,179 @@
+import { Signal } from "signal-polyfill";
+import type {
+  Destructor,
+  EffectCallback,
+  EffectOptions,
+  ReactivityOptions,
+} from "./types.d.ts";
+
+// @ts-ignore we're hiding get and set
+export class ReactiveValue<T> extends Signal.State<T> {
+  // @ts-ignore see above
+  private override get;
+  // @ts-ignore see above
+  private override set;
+
+  get value(): T {
+    return super.get();
+  }
+
+  set value(newValue: T) {
+    super.set(newValue);
+  }
+}
+
+// @ts-ignore we're hiding get and set
+export class ReactiveComputation<T> extends Signal.Computed<T> {
+  // @ts-ignore see above
+  private override get;
+
+  get value(): T {
+    return super.get();
+  }
+}
+
+const maybeReactiveObjectType = <T>(thing: T, options: ReactivityOptions) => {
+  if (typeof thing === "object") {
+    if (Array.isArray(thing)) {
+      return $array(thing, options);
+    } else if (thing) {
+      return $object(thing, options);
+    }
+  }
+  return thing;
+};
+
+export const $object = <T extends Record<PropertyKey, any>>(
+  init: T,
+  options: ReactivityOptions = { deep: false },
+): T => {
+  if (options.deep === true) {
+    for (const [key, value] of Object.entries(init)) {
+      init[key as keyof T] = 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 = <T extends ArrayLike<any>>(
+  init: T,
+  options: ReactivityOptions = { deep: false },
+): T => {
+  if (options.deep) {
+    for (const [key, value] of Object.entries(init)) {
+      init[key as keyof T] = 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: unknown,
+): s is InstanceType<typeof ReactiveValue> => {
+  return Signal.isState(s);
+};
+
+export const isComputed = (
+  s: unknown,
+): s is InstanceType<typeof ReactiveComputation> => {
+  return Signal.isComputed(s);
+};
+
+export const getValue = (signal: unknown): unknown => {
+  if (isState(signal) || isComputed(signal)) {
+    return signal.value;
+  }
+  return signal;
+};
+
+export const $state = <T>(
+  initialValue: T,
+  options?: Signal.Options<T | undefined>,
+): ReactiveValue<T> => {
+  return new ReactiveValue(initialValue, options);
+};
+
+export const $computed = <T>(
+  computation: () => T,
+  options?: Signal.Options<T>,
+): ReactiveComputation<T> => {
+  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: EffectCallback,
+  options?: EffectOptions,
+): Destructor => {
+  if (options?.signal?.aborted) return () => {};
+
+  let destroy: Destructor | undefined;
+  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/src/types.d.ts

@@ -0,0 +1,75 @@
+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;
+};