@radishland/runtime 0.0.7 → 0.1.0

package/client/boot.d.ts

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

package/client/boot.js

@@ -0,0 +1,150 @@
+// src/config.ts
+var bindingConfig = {
+  "checked": {
+    element: ["input"],
+    type: ["boolean"],
+    event: "change"
+  },
+  "value": {
+    element: ["input", "select", "textarea"],
+    type: ["string", "number"],
+    event: "input"
+  }
+};
+
+// src/utils.ts
+var spaces_sep_by_comma = /\s*,\s*/;
+
+// src/boot.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);

package/client/index.d.ts

@@ -1,4 +1,4 @@
-import { Signal } from 'signal-polyfill';
+import { Signal, ReadonlySignal } from '@preact/signals-core';
 
 interface AutonomousCustomElement {
   /**
@@ -30,7 +30,6 @@ interface AutonomousCustomElement {
   formStateRestoreCallback?(): void;
 }
 
-type ReactivityOptions = { deep: boolean };
 type Destructor = () => void;
 type EffectCallback = () => Destructor | void;
 type EffectOptions = {
@@ -57,33 +56,35 @@ declare class HandlerRegistry extends HTMLElement implements AutonomousCustomEle
      *
      * An optional AbortSignal can be provided to abort the effect prematurely
      */
-    $effect(callback: EffectCallback, options?: EffectOptions): void;
+    effect(callback: EffectCallback): void;
+    /**
+     * Looks up an identifier on the instance
+     */
+    lookup(identifier: string): any;
     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>;
+declare const isState: (value: unknown) => value is InstanceType<typeof Signal>;
+declare const signal: <T>(value: T) => Signal<T>;
+declare const computed: <T>(computation: () => T) => ReadonlySignal<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;
+declare const effect: (cb: EffectCallback, options?: EffectOptions) => Destructor;
+/**
+ * Creates a deeply reactive proxied object or array
+ *
+ * @example  const obj = reactive({ a: { b: { c: 1 } } });
+
+  const computation = computed(() => obj.a.b.c * 2});
+  assertEquals(computation.value, 2);
+
+  obj.a.b.c = 2;
+  assertEquals(computation.value, 4);
+ */
+declare const reactive: <T>(thing: T) => T;
 
-export { $array, $computed, $effect, $object, $state, HandlerRegistry, ReactiveComputation, ReactiveValue, getValue, isComputed, isState };
+export { HandlerRegistry, computed, effect, isState, reactive, signal };

package/client/index.js

@@ -1,6 +1,32 @@
-import { Signal } from 'signal-polyfill';
+import { effect as effect$1, Signal, signal as signal$1, computed as computed$1 } from '@preact/signals-core';
 
 // src/utils.ts
+function type(value) {
+  if (value === null) {
+    return "null";
+  }
+  if (value === void 0) {
+    return "undefined";
+  }
+  const baseType = typeof value;
+  if (!["object", "function"].includes(baseType)) {
+    return baseType;
+  }
+  if (typeof value === "object" && Symbol.toStringTag in value) {
+    const tag = value[Symbol.toStringTag];
+    if (typeof tag === "string") {
+      return tag;
+    }
+  }
+  if (baseType === "function" && Function.prototype.toString.call(value).startsWith("class")) {
+    return "class";
+  }
+  const className = value.constructor.name;
+  if (typeof className === "string" && className !== "") {
+    return className.toLowerCase();
+  }
+  return baseType;
+}
 var booleanAttributes = [
   "allowfullscreen",
   // on <iframe>
@@ -65,126 +91,47 @@ var bindingConfig = {
     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 isState = (value) => {
+  return value instanceof Signal;
 };
-var ReactiveComputation = class extends Signal.Computed {
-  // @ts-ignore see above
-  get;
-  get value() {
-    return super.get();
-  }
+var signal = (value) => {
+  return signal$1(value);
 };
-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 computed = (computation) => {
+  return computed$1(computation);
 };
-var $object = (init, options = { deep: false }) => {
-  if (options.deep === true) {
-    for (const [key, value] of Object.entries(init)) {
-      init[key] = maybeReactiveObjectType(value, options);
-    }
+var effect = (cb, options) => {
+  if (options?.signal.aborted) return () => {
+  };
+  const dispose = effect$1(cb);
+  options?.signal.addEventListener("abort", dispose);
+  return dispose;
+};
+var reactive = (thing) => {
+  if (type(thing) === "object" || type(thing) === "array") {
+    return object(thing);
   }
-  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;
+  return thing;
 };
-var $array = (init, options = { deep: false }) => {
-  if (options.deep) {
-    for (const [key, value] of Object.entries(init)) {
-      init[key] = maybeReactiveObjectType(value, options);
-    }
+var object = (init) => {
+  for (const [key, value] of Object.entries(init)) {
+    init[key] = reactive(value);
   }
-  const state = new Signal.State(init);
+  const state = signal(init);
   const proxy = new Proxy(init, {
     get(_target, p, _receiver) {
-      return state.get()[p];
+      return state.value[p];
     },
     set(_target, p, newValue, _receiver) {
-      state.set({
-        ...state.get(),
-        [p]: maybeReactiveObjectType(newValue, options)
-      });
+      state.value = {
+        ...state.value,
+        [p]: reactive(newValue)
+      };
       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 {
@@ -204,19 +151,20 @@ var HandlerRegistry = class extends HTMLElement {
    *
    * 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) });
+  effect(callback) {
+    effect(callback, { signal: this.abortController.signal });
   }
-  #get(identifier) {
+  /**
+   * Looks up an identifier on the instance
+   */
+  lookup(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));
+      const { handler, type: type2 } = e.detail;
+      if (handler in this && typeof this.lookup(handler) === "function") {
+        e.target?.addEventListener(type2, this.lookup(handler).bind(this));
         e.stopPropagation();
       }
     }
@@ -226,11 +174,11 @@ var HandlerRegistry = class extends HTMLElement {
     if (e instanceof CustomEvent && target) {
       const { identifier } = e.detail;
       if (identifier in this) {
-        this.$effect(() => {
-          const classList = getValue(this.#get(identifier));
+        this.effect(() => {
+          const classList = this.lookup(identifier)?.valueOf();
           if (classList && typeof classList === "object") {
             for (const [k, v] of Object.entries(classList)) {
-              const force = !!getValue(v);
+              const force = !!v?.valueOf();
               for (const className of k.split(" ")) {
                 target.classList.toggle(
                   className,
@@ -247,8 +195,8 @@ var HandlerRegistry = class extends HTMLElement {
   #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 (hook in this && typeof this.lookup(hook) === "function") {
+        const cleanup = this.lookup(hook).bind(this)(e.target);
         if (typeof cleanup === "function") {
           this.#cleanup.push(cleanup);
         }
@@ -261,20 +209,14 @@ var HandlerRegistry = class extends HTMLElement {
       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);
+        const ref = this.lookup(identifier);
+        this.effect(() => {
           if (booleanAttributes.includes(attribute)) {
-            value ? target.setAttribute(attribute, "") : target.removeAttribute(attribute);
+            ref.valueOf() ? target.setAttribute(attribute, "") : target.removeAttribute(attribute);
           } else {
-            target.setAttribute(attribute, `${value}`);
+            target.setAttribute(attribute, `${ref}`);
           }
-        };
-        if (isState(ref) || isComputed(ref)) {
-          this.$effect(() => setAttr());
-        } else {
-          setAttr();
-        }
+        });
         e.stopPropagation();
       }
     }
@@ -284,16 +226,10 @@ var HandlerRegistry = class extends HTMLElement {
       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();
-        }
+        const ref = this.lookup(identifier);
+        this.effect(() => {
+          target[property] = ref.valueOf();
+        });
         e.stopPropagation();
       }
     }
@@ -303,16 +239,10 @@ var HandlerRegistry = class extends HTMLElement {
       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();
-        }
+        const ref = this.lookup(identifier);
+        this.effect(() => {
+          target.textContent = `${ref}`;
+        });
         e.stopPropagation();
       }
     }
@@ -322,16 +252,10 @@ var HandlerRegistry = class extends HTMLElement {
       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();
-        }
+        const ref = this.lookup(identifier);
+        this.effect(() => {
+          target.innerHTML = `${ref}`;
+        });
         e.stopPropagation();
       }
     }
@@ -341,13 +265,13 @@ var HandlerRegistry = class extends HTMLElement {
       const { identifier, property } = e.detail;
       const target = e.target;
       if (identifier in this && target instanceof HTMLElement && property in target) {
-        const state = this.#get(identifier);
+        const state = this.lookup(identifier);
         if (isState(state)) {
           state.value = target[property];
           target.addEventListener(bindingConfig[property].event, () => {
             state.value = target[property];
           });
-          this.$effect(() => {
+          this.effect(() => {
             target[property] = state.value;
           });
         }
@@ -356,15 +280,15 @@ var HandlerRegistry = class extends HTMLElement {
     }
   }
   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 });
+    const { signal: signal2 } = this.abortController;
+    this.addEventListener("@attr-request", this.#handleAttr, { signal: signal2 });
+    this.addEventListener("@class-request", this.#handleClass, { signal: signal2 });
+    this.addEventListener("@on-request", this.#handleOn, { signal: signal2 });
+    this.addEventListener("@use-request", this.#handleUse, { signal: signal2 });
+    this.addEventListener("@prop-request", this.#handleProp, { signal: signal2 });
+    this.addEventListener("@html-request", this.#handleHTML, { signal: signal2 });
+    this.addEventListener("@text-request", this.#handleText, { signal: signal2 });
+    this.addEventListener("@bind-request", this.#handleBind, { signal: signal2 });
   }
   disconnectedCallback() {
     this.abortController.abort();
@@ -373,8 +297,6 @@ var HandlerRegistry = class extends HTMLElement {
     }
   }
 };
-if (window && !customElements?.get("handler-registry")) {
-  customElements.define("handler-registry", HandlerRegistry);
-}
+customElements?.define("handler-registry", HandlerRegistry);
 
-export { $array, $computed, $effect, $object, $state, HandlerRegistry, ReactiveComputation, ReactiveValue, getValue, isComputed, isState };
+export { HandlerRegistry, computed, effect, isState, reactive, signal };

package/package.json

@@ -1,9 +1,16 @@
 {
   "name": "@radishland/runtime",
-  "version": "0.0.7",
+  "version": "0.1.0",
   "type": "module",
   "description": "The Radish runtime",
   "author": "Frédéric Crozatier",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/radishland/radish.git"
+  },
+  "bugs": {
+    "url": "https://github.com/radishland/radish/issues"
+  },
   "license": "MIT",
   "scripts": {
     "build": "tsup",
@@ -13,6 +20,10 @@
     ".": {
       "import": "./client/index.js",
       "types": "./client/index.d.ts"
+    },
+    "./boot": {
+      "import": "./client/boot.js",
+      "types": "./client/boot.d.ts"
     }
   },
   "files": [
@@ -21,8 +32,12 @@
     "LICENCE",
     "package.json"
   ],
+  "keywords": [
+    "radish",
+    "runtime"
+  ],
   "dependencies": {
-    "signal-polyfill": "^0.2.2"
+    "@preact/signals-core": "^1.8.0"
   },
   "devDependencies": {
     "tsup": "^8.4.0",