riftt 1.0.0 → 1.0.2

package/src/sprae/core.js

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

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

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

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

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

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

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

package/src/sprae/directive/if.js

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

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

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

@@ -1,13 +0,0 @@
-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 ?? "";
-  };
-});