@radishland/runtime 0.0.7 → 1.0.0-alpha.1

package/client/index.js

@@ -1,380 +1,3 @@
-import { Signal } from 'signal-polyfill';
-
-// src/utils.ts
-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);
-}
-
-export { $array, $computed, $effect, $object, $state, HandlerRegistry, ReactiveComputation, ReactiveValue, getValue, isComputed, isState };
+export { HandlerRegistry } from "./handler-registry.js";
+export * from "./reactivity.js";
+export * from "./handlers.js";

package/client/reactivity.js

@@ -0,0 +1,162 @@
+import { Signal } from "signal-polyfill";
+
+export class ReactiveValue extends Signal.State {
+   get;
+   set;
+
+  get value() {
+    return super.get();
+  }
+
+  set value(newValue) {
+    super.set(newValue);
+  }
+}
+
+export class ReactiveComputation extends Signal.Computed {
+   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) {
+            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();
+    });
+  }
+});
+
+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.js

@@ -0,0 +1 @@
+

package/client/utils.js

@@ -0,0 +1,65 @@
+const is_upper = /[A-Z]/;
+export const spaces_sep_by_comma = /\s*,\s*/;
+
+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;
+};
+
+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/deno.json

@@ -0,0 +1,21 @@
+{
+  "tasks": {
+    "check": "deno fmt --check && deno lint && deno check **/*.ts",
+    "build": "deno run -A build.ts"
+  },
+  "fmt": {
+    "exclude": ["**/*.md"]
+  },
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "dom.asynciterable", "deno.ns"],
+    "checkJs": true,
+    "noImplicitOverride": true
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./client": "./client/index.js"
+  },
+  "imports": {
+    "signal-polyfill": "npm:signal-polyfill@^0.2.2"
+  }
+}

package/package.json

@@ -1,31 +1,12 @@
 {
   "name": "@radishland/runtime",
-  "version": "0.0.7",
+  "version": "1.0.0-alpha.1",
   "type": "module",
   "description": "The Radish runtime",
+  "main": "./client/index.js",
   "author": "Frédéric Crozatier",
   "license": "MIT",
-  "scripts": {
-    "build": "tsup",
-    "prepublishOnly": "pnpm build"
-  },
-  "exports": {
-    ".": {
-      "import": "./client/index.js",
-      "types": "./client/index.d.ts"
-    }
-  },
-  "files": [
-    "./client",
-    "README.md",
-    "LICENCE",
-    "package.json"
-  ],
   "dependencies": {
     "signal-polyfill": "^0.2.2"
-  },
-  "devDependencies": {
-    "tsup": "^8.4.0",
-    "typescript": "^5.7.3"
   }
 }

package/src/config.ts

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