@radishland/runtime 0.0.1

package/LICENCE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2025 Frédéric Crozatier
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,3 @@
+# Radish runtime
+
+This package contains the runtime of the Radish WebComponents framework

package/client/config.d.ts

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

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.d.ts

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,211 @@
+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

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

package/client/handlers.js

@@ -0,0 +1,136 @@
+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/index.d.ts

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

package/client/index.js

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

package/client/reactivity.d.ts

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,132 @@
+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/utils.d.ts

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,66 @@
+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>
+];

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@radishland/runtime",
+  "version": "0.0.1",
+  "type": "module",
+  "description": "The Radish runtime",
+  "author": "Frédéric Crozatier",
+  "license": "MIT",
+  "scripts": {
+    "build": "tsc",
+    "prepublishOnly": "pnpm build"
+  },
+  "main": "./client/index.js",
+  "exports": {
+    ".": "./client/index.js"
+  },
+  "files": ["./client", "README.md", "LICENCE"],
+  "dependencies": {
+    "signal-polyfill": "^0.2.2"
+  },
+  "devDependencies": {
+    "typescript": "^5.7.3"
+  }
+}