riftt 1.0.0

package/src/sprae/core.js

@@ -0,0 +1,220 @@
+import { use, effect, untracked } from "./signal.js";
+import { store } from "./store.js";
+
+export const _dispose = (Symbol.dispose ||= Symbol("dispose"));
+export const _state = Symbol("state");
+export const _on = Symbol("on");
+export const _off = Symbol("off");
+
+export const directive = {};
+
+const memo = {};
+
+/**
+ * Compiles an expression into an evaluator function.
+ *
+ * @type {(expr: string) => Function}
+ */
+export let compile;
+
+/**
+ * Attributes prefix, by default ':'
+ */
+export let prefix = ":";
+
+/**
+ * Register a directive with a parsed expression and evaluator.
+ * @param {string} name - The name of the directive.
+ * @param {(el: Element, state: Object, expr: string, name: string) => (value: any) => void} create - A function to create the directive.
+ * @param {(expr: string) => (state: Object) => any} [p=parse] - Create evaluator from expression string.
+ */
+export const dir = (name, create, toEvaluator = parse) => {
+  directive[name] = (element, expression, state, directiveName) => {
+    const update = create(element, state, expression, directiveName);
+    const evaluate = toEvaluator(expression, ":" + directiveName);
+    return () => update(evaluate(state));
+  };
+};
+
+/**
+ * Parses an expression into an evaluator function, caching the result for reuse.
+ *
+ * @param {string} expr - The expression to parse and compile into a function.
+ * @param {string} dir - The directive associated with the expression (used for error reporting).
+ * @returns {Function} The compiled evaluator function for the expression.
+ */
+export const parse = (expression, directive) => {
+  const key = expression.trim();
+
+  if (memo[key]) {
+    return memo[key];
+  }
+
+  let compiledFunction;
+
+  try {
+    compiledFunction = compile(key);
+  } catch (error) {
+    err(error, directive, key);
+  }
+
+  const evaluator = (state) => {
+    try {
+      return compiledFunction(state);
+    } catch (error) {
+      err(error, directive, key);
+    }
+  };
+
+  memo[key] = evaluator;
+  return evaluator;
+};
+
+/**
+ * Branded sprae error with context about the directive and expression
+ *
+ * @param {Error} e - The original error object to enhance.
+ * @param {string} dir - The directive where the error occurred.
+ * @param {string} [expr=''] - The expression associated with the error, if any.
+ * @throws {Error} The enhanced error object with a formatted message.
+ */
+export const err = (error, directive = "", expression = "") => {
+  const contextMessage = expression ? `="${expression}"\n\n` : "";
+  const enhancedMessage = `◆ ${error.message}\n\n${directive}${contextMessage}`;
+
+  throw Object.assign(error, {
+    message: enhancedMessage,
+    expr: expression,
+  });
+};
+
+const initializeElement = (element, attributes = element.attributes, state, effects, cleanupFunctions) => {
+  if (!attributes) return;
+
+  let attributeIndex = 0;
+
+  while (attributeIndex < attributes.length) {
+    const attribute = attributes[attributeIndex];
+    const { name: attributeName, value: attributeValue } = attribute;
+
+    if (attributeName.startsWith(prefix)) {
+      element.removeAttribute(attributeName);
+
+      const directiveNames = attributeName.slice(prefix.length).split(":");
+
+      for (const directiveName of directiveNames) {
+        const directiveHandler = directive[directiveName] || directive.default;
+        const update = directiveHandler(element, attributeValue, state, directiveName);
+
+        effects.push(update);
+        cleanupFunctions.push(effect(update));
+
+        if (element[_state] === null) {
+          return;
+        }
+      }
+    } else {
+      attributeIndex++;
+    }
+  }
+
+  for (const childNode of element.childNodes) {
+    if (childNode.nodeType === 1) {
+      initializeElement(childNode, childNode.attributes, state, effects, cleanupFunctions);
+    }
+  }
+};
+
+/**
+ * Applies directives to an HTML element and manages its reactive state.
+ *
+ * @param {Element} [el=document.body] - The target HTML element to apply directives to.
+ * @param {Object} [values] - Initial values to populate the element's reactive state.
+ * @returns {Object} The reactive state object associated with the element.
+ */
+export const sprae = (element = document.body, values) => {
+  if (element[_state]) {
+    return Object.assign(element[_state], values);
+  }
+
+  const state = store(values || {});
+  const cleanupFunctions = [];
+  const effects = [];
+
+  initializeElement(element, element.attributes, state, effects, cleanupFunctions);
+
+  if (!(_state in element)) {
+    element[_state] = state;
+
+    element[_off] = () => {
+      cleanupFunctions.forEach((cleanup) => cleanup());
+      cleanupFunctions.length = 0;
+    };
+
+    element[_on] = () => {
+      cleanupFunctions.length = 0;
+      cleanupFunctions.push(...effects.map((effectFunction) => effect(effectFunction)));
+    };
+
+    element[_dispose] = () => {
+      element[_off]();
+      element[_off] = null;
+      element[_on] = null;
+      element[_dispose] = null;
+      element[_state] = null;
+    };
+  }
+
+  return state;
+};
+
+sprae.use = (configuration) => {
+  if (configuration.signal) {
+    use(configuration);
+  }
+  if (configuration.compile) {
+    compile = configuration.compile;
+  }
+  if (configuration.prefix) {
+    prefix = configuration.prefix;
+  }
+};
+
+export const frag = (template) => {
+  if (!template.nodeType) {
+    return template;
+  }
+
+  const content = template.content.cloneNode(true);
+  const attributes = [...template.attributes];
+  const referenceNode = document.createTextNode("");
+
+  content.append(referenceNode);
+  const childNodes = [...content.childNodes];
+
+  return {
+    childNodes,
+    content,
+
+    remove() {
+      content.append(...childNodes);
+    },
+
+    replaceWith(element) {
+      if (element === referenceNode) return;
+      referenceNode.before(element);
+      content.append(...childNodes);
+    },
+
+    attributes,
+
+    removeAttribute(name) {
+      const attributeIndex = attributes.findIndex((attr) => attr.name === name);
+      if (attributeIndex !== -1) {
+        attributes.splice(attributeIndex, 1);
+      }
+    },
+  };
+};
+
+export default sprae;

package/src/sprae/directive/aria.js

@@ -0,0 +1,9 @@
+import { dir } from "../core.js";
+import { attr, dashcase } from "./default.js";
+
+dir("aria", (el) => (value) => {
+  for (const key in value) {
+    const v = value[key];
+    attr(el, `aria-${dashcase(key)}`, v == null ? null : String(v));
+  }
+});

package/src/sprae/directive/class.js

@@ -0,0 +1,28 @@
+import { dir } from "../core.js";
+
+dir("class", (el) => {
+  let previous = new Set();
+
+  return (value) => {
+    const next = new Set();
+
+    if (value) {
+      if (typeof value === "string") {
+        value.split(" ").forEach((cls) => next.add(cls));
+      } else if (Array.isArray(value)) {
+        value.forEach((cls) => cls && next.add(cls));
+      } else {
+        Object.entries(value).forEach(([name, on]) => on && next.add(name));
+      }
+    }
+
+    for (const cls of previous) {
+      if (next.has(cls)) next.delete(cls);
+      else el.classList.remove(cls);
+    }
+
+    for (const cls of next) el.classList.add(cls);
+
+    previous = next;
+  };
+});

package/src/sprae/directive/data.js

@@ -0,0 +1,5 @@
+import { dir } from "../core.js";
+
+dir("data", (el) => (value) => {
+  for (const key in value) el.dataset[key] = value[key];
+});

package/src/sprae/directive/default.js

@@ -0,0 +1,210 @@
+// generic property directive
+import { dir, err } from "../core.js";
+
+dir("default", (target, state, expr, name) => {
+  if (!name.startsWith("on")) {
+    if (name) {
+      return (value) => attr(target, name, value);
+    }
+    return (value) => {
+      for (const key in value) attr(target, dashcase(key), value[key]);
+    };
+  }
+
+  const contexts = name.split("..").map((part) => parseEventContext(part, target));
+
+  const bind = (fn, ctx) => {
+    const { evt, target, test, defer, stop, prevent, immediate, ...opts } = ctx;
+    const handler = (e) => {
+      try {
+        if (!test(e)) return;
+        if (stop) immediate ? e.stopImmediatePropagation() : e.stopPropagation();
+        if (prevent) e.preventDefault();
+        fn?.call(state, e);
+      } catch (error) {
+        err(error, `:on${evt}`, fn);
+      }
+    };
+    const cb = defer ? defer(handler) : handler;
+    target.addEventListener(evt, cb, opts);
+    return () => target.removeEventListener(evt, cb, opts);
+  };
+
+  if (contexts.length === 1) return (v) => bind(v, contexts[0]);
+
+  let startFn,
+    nextFn,
+    off,
+    idx = 0;
+
+  const nextListener = (fn) => {
+    off = bind((e) => {
+      off();
+      nextFn = fn?.(e);
+      idx = (idx + 1) % contexts.length;
+      if (idx) nextListener(nextFn);
+      else if (startFn) nextListener(startFn);
+    }, contexts[idx]);
+  };
+
+  return (value) => {
+    startFn = value;
+    if (!off) nextListener(startFn);
+    return () => {
+      startFn = null;
+    };
+  };
+});
+
+function parseEventContext(part, target) {
+  const ctx = { evt: "", target, test: () => true };
+  ctx.evt = (part.startsWith("on") ? part.slice(2) : part).replace(/\.(\w+)?-?([-\w]+)?/g, (_, mod, param = "") => {
+    ctx.test = mods[mod]?.(ctx, ...param.split("-")) || ctx.test;
+    return "";
+  });
+  return ctx;
+}
+
+// event modifiers
+const mods = {
+  // actions
+  prevent(ctx) {
+    ctx.prevent = true;
+  },
+  stop(ctx) {
+    ctx.stop = true;
+  },
+  immediate(ctx) {
+    ctx.immediate = true;
+  },
+
+  // options
+  once(ctx) {
+    ctx.once = true;
+  },
+  passive(ctx) {
+    ctx.passive = true;
+  },
+  capture(ctx) {
+    ctx.capture = true;
+  },
+
+  // target
+  window(ctx) {
+    ctx.target = window;
+  },
+  document(ctx) {
+    ctx.target = document;
+  },
+  parent(ctx) {
+    ctx.target = ctx.target.parentNode;
+  },
+
+  throttle(ctx, limit = 108) {
+    ctx.defer = (fn) => throttle(fn, limit);
+  },
+  debounce(ctx, wait = 108) {
+    ctx.defer = (fn) => debounce(fn, wait);
+  },
+
+  // test
+  outside: (ctx) => (e) => {
+    const el = ctx.target;
+    if (el.contains(e.target)) return false;
+    if (e.target.isConnected === false) return false;
+    if (el.offsetWidth < 1 && el.offsetHeight < 1) return false;
+    return true;
+  },
+  self: (ctx) => (e) => e.target === ctx.target,
+
+  // keyboard
+  ctrl:
+    (_ctx, ...param) =>
+    (e) =>
+      keys.ctrl(e) && param.every((p) => (keys[p] ? keys[p](e) : e.key === p)),
+  shift:
+    (_ctx, ...param) =>
+    (e) =>
+      keys.shift(e) && param.every((p) => (keys[p] ? keys[p](e) : e.key === p)),
+  alt:
+    (_ctx, ...param) =>
+    (e) =>
+      keys.alt(e) && param.every((p) => (keys[p] ? keys[p](e) : e.key === p)),
+  meta:
+    (_ctx, ...param) =>
+    (e) =>
+      keys.meta(e) && param.every((p) => (keys[p] ? keys[p](e) : e.key === p)),
+  arrow: () => keys.arrow,
+  enter: () => keys.enter,
+  esc: () => keys.esc,
+  tab: () => keys.tab,
+  space: () => keys.space,
+  delete: () => keys.delete,
+  digit: () => keys.digit,
+  letter: () => keys.letter,
+  char: () => keys.char,
+};
+
+// key testers
+const keys = {
+  ctrl: (e) => e.ctrlKey || e.key === "Control" || e.key === "Ctrl",
+  shift: (e) => e.shiftKey || e.key === "Shift",
+  alt: (e) => e.altKey || e.key === "Alt",
+  meta: (e) => e.metaKey || e.key === "Meta" || e.key === "Command",
+  arrow: (e) => e.key.startsWith("Arrow"),
+  enter: (e) => e.key === "Enter",
+  esc: (e) => e.key.startsWith("Esc"),
+  tab: (e) => e.key === "Tab",
+  space: (e) => e.key === " " || e.key === "Space" || e.key === " ",
+  delete: (e) => e.key === "Delete" || e.key === "Backspace",
+  digit: (e) => /^\d$/.test(e.key),
+  letter: (e) => /^\p{L}$/gu.test(e.key),
+  char: (e) => /^\S$/.test(e.key),
+};
+
+// create delayed fns
+const throttle = (fn, limit) => {
+  let paused = false;
+  let planned = false;
+
+  const block = (e) => {
+    paused = true;
+    setTimeout(() => {
+      paused = false;
+      if (!planned) {
+        return;
+      }
+      planned = false;
+      block(e);
+      fn(e);
+    }, limit);
+  };
+
+  return (e) => {
+    if (paused) {
+      planned = true;
+      return;
+    }
+    block(e);
+    return fn(e);
+  };
+};
+
+const debounce = (fn, wait) => {
+  let timeout;
+  return (e) => {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => {
+      timeout = null;
+      fn(e);
+    }, wait);
+  };
+};
+
+// set attr
+export const attr = (el, name, v) => {
+  if (v == null || v === false) el.removeAttribute(name);
+  else el.setAttribute(name, v === true ? "" : typeof v === "number" || typeof v === "string" ? v : "");
+};
+
+export const dashcase = (str) => str.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g, (match, i) => (i ? "-" : "") + match.toLowerCase());

package/src/sprae/directive/each.js

@@ -0,0 +1,100 @@
+import sprae, { _state, dir, frag, parse } from "../core.js";
+import store, { _change, _signals } from "../store.js";
+import { effect } from "../signal.js";
+
+dir(
+  "each",
+  (tpl, state, expr) => {
+    const [itemVar, idxVar = "$"] = expr
+      .split(/\bin\b/)[0]
+      .trim()
+      .split(/\s*,\s*/);
+
+    const holder = document.createTextNode("");
+
+    let current;
+    let keys;
+    let items;
+    let prevLen = 0;
+
+    const render = () => {
+      const newItems = items;
+      const newLen = newItems.length;
+      let i = 0;
+
+      if (current && !current[_change]) {
+        for (const s of current[_signals] || []) s[Symbol.dispose]();
+        current = null;
+        prevLen = 0;
+      }
+
+      if (newLen < prevLen) {
+        current.length = newLen;
+      } else {
+        if (!current) {
+          current = newItems;
+        } else {
+          while (i < prevLen) {
+            current[i] = newItems[i];
+            i++;
+          }
+        }
+
+        for (; i < newLen; i++) {
+          current[i] = newItems[i];
+          const idx = i;
+
+          const scope = store(
+            {
+              [itemVar]: current[_signals]?.[idx] || current[idx],
+              [idxVar]: keys ? keys[idx] : idx,
+            },
+            state,
+          );
+
+          const el = tpl.content ? frag(tpl) : tpl.cloneNode(true);
+
+          holder.before(el.content || el);
+          sprae(el, scope);
+
+          const prevDispose = ((current[_signals] ||= [])[i] ||= {})[Symbol.dispose];
+          current[_signals][i][Symbol.dispose] = () => {
+            prevDispose?.();
+            el[Symbol.dispose]?.();
+            el.remove();
+          };
+        }
+      }
+
+      prevLen = newLen;
+    };
+
+    tpl.replaceWith(holder);
+    tpl[_state] = null;
+
+    return (value) => {
+      keys = null;
+      if (typeof value === "number") {
+        items = Array.from({ length: value }, (_, i) => i + 1);
+      } else if (value?.constructor === Object) {
+        keys = Object.keys(value);
+        items = Object.values(value);
+      } else {
+        items = value || [];
+      }
+
+      let planned = 0;
+      return effect(() => {
+        items[_change]?.value;
+        if (!planned++) {
+          render();
+          queueMicrotask(() => {
+            if (planned > 1) render();
+            planned = 0;
+          });
+        }
+      });
+    };
+  },
+  (expr) => parse(expr.split(/\bin\b/)[1]),
+);

package/src/sprae/directive/fx.js

@@ -0,0 +1,3 @@
+import { dir } from "../core.js";
+
+dir("fx", (_) => (_) => _);

package/src/sprae/directive/if.js

@@ -0,0 +1,46 @@
+import sprae, { dir, _state, _on, _off, frag } from "../core.js";
+
+// :if is interchangeable with :each depending on order, :if :each or :each :if have different meanings
+// as for :if :with - :if must init first, since it is lazy, to avoid initializing component ahead of time by :with
+// we consider :with={x} :if={x} case insignificant
+const _prevIf = Symbol("if");
+
+dir("if", (el, state) => {
+  const holder = document.createTextNode("");
+
+  let nextEl = el.nextElementSibling;
+  let curEl;
+  let ifEl;
+  let elseEl;
+
+  el.replaceWith(holder);
+
+  ifEl = el.content ? frag(el) : el;
+  ifEl[_state] = null; // mark el as fake-spraed to hold-on init, since we sprae rest when branch matches
+
+  // FIXME: instead of nextEl / el we should use elseEl / ifEl
+  if (nextEl?.hasAttribute(":else")) {
+    nextEl.removeAttribute(":else");
+    // if nextEl is :else :if - leave it for its own :if handler
+    if (!nextEl.hasAttribute(":if")) (nextEl.remove(), (elseEl = nextEl.content ? frag(nextEl) : nextEl), (elseEl[_state] = null));
+  } else nextEl = null;
+
+  return (value, newEl = el[_prevIf] ? null : value ? ifEl : elseEl) => {
+    if (nextEl) nextEl[_prevIf] = el[_prevIf] || newEl == ifEl;
+    if (curEl != newEl) {
+      // disable effects on child elements when element is not matched
+      if (curEl) (curEl.remove(), curEl[_off]?.());
+      if ((curEl = newEl)) {
+        holder.before(curEl.content || curEl);
+        // remove fake memo to sprae as new
+        if (curEl[_state] === null) {
+          delete curEl[_state];
+          sprae(curEl, state);
+        } else {
+          // enable effects if branch is matched
+          curEl[_on]();
+        }
+      }
+    }
+  };
+});

package/src/sprae/directive/ref.js

@@ -0,0 +1,13 @@
+import { dir, parse } from "../core.js";
+import { setter } from "../store.js";
+
+dir("ref", (el, state, expr) => {
+  const refTarget = parse(expr)(state);
+
+  if (typeof refTarget === "function") {
+    return (fn) => fn?.call(null, el);
+  }
+
+  setter(expr)(state, el);
+  return (v) => v;
+});

package/src/sprae/directive/style.js

@@ -0,0 +1,22 @@
+import { dir } from "../core.js";
+
+dir("style", (el) => {
+  const initial = el.getAttribute("style") || "";
+
+  return (value) => {
+    if (typeof value === "string") {
+      const needsSep = initial && !initial.trim().endsWith(";");
+      const next = initial + (initial ? (needsSep ? "; " : "") : "") + value;
+      el.setAttribute("style", next);
+      return;
+    }
+
+    if (initial) el.setAttribute("style", initial);
+
+    for (const key in value) {
+      const val = value[key];
+      if (key.startsWith("-")) el.style.setProperty(key, val);
+      else el.style[key] = val;
+    }
+  };
+});

package/src/sprae/directive/text.js

@@ -0,0 +1,13 @@
+import { dir, frag } from "../core.js";
+
+dir("text", (el) => {
+  if (el.content) {
+    const node = frag(el).childNodes[0];
+    el.replaceWith(node);
+    el = node;
+  }
+
+  return (value) => {
+    el.textContent = value ?? "";
+  };
+});