sprae 8.1.2 → 9.0.0

package/core.js

@@ -0,0 +1,127 @@
+import swapdom from 'swapdom'
+import * as signals from 'ulive'
+import justin from 'subscript/justin.js'
+
+// polyfill
+const _dispose = (Symbol.dispose ||= Symbol("dispose"));
+
+// mark
+const SPRAE = `∴`
+
+// signals impl
+export let { signal, effect, batch, computed, untracked } = signals;
+
+// reserved directives - order matters!
+export const directive = {};
+
+// sprae element: apply directives
+const memo = new WeakMap();
+export default function sprae(container, values) {
+  if (!container.children) return // text nodes, comments etc
+
+  // repeated call can be caused by :each with new objects with old keys needs an update
+  if (memo.has(container)) {
+    const [state, effects] = memo.get(container)
+    // we rewrite signals instead of update, because user should have what he provided
+    // console.log(container, state, values)
+    for (let k in values) state[k] = values[k]
+    for (let fx of effects) fx()
+  }
+
+  // take over existing state instead of creating clone
+  const state = values || {};
+  const effects = [];
+
+  // init directives on element
+  const init = (el, parent = el.parentNode) => {
+    if (el.attributes) {
+      // init generic-name attributes second
+      for (let i = 0; i < el.attributes.length;) {
+        let attr = el.attributes[i];
+
+        if (attr.name[0] === ':') {
+          el.removeAttribute(attr.name);
+
+          // multiple attributes like :id:for=""
+          let names = attr.name.slice(1).split(':')
+
+          // NOTE: secondary directives don't stop flow nor extend state, so no need to check
+          for (let name of names) {
+            let update = (directive[name] || directive.default)(el, attr.value, state, name);
+            if (update) {
+              update[_dispose] = effect(update);
+              effects.push(update);
+            }
+          }
+
+          // stop if element was spraed by directive or skipped (detached) like in case of :if or :each
+          if (memo.has(el)) return;
+          if (el.parentNode !== parent) return false;
+        } else i++;
+      }
+    }
+
+    for (let i = 0, child; child = el.children[i]; i++) {
+      // if element was removed from parent (skipped) - reduce index
+      if (init(child, el) === false) i--;
+    }
+  };
+
+  init(container);
+
+  // if element was spraed by :scope or :each instruction - skip
+  if (memo.has(container)) return state// memo.get(container)
+
+  // save
+  memo.set(container, [state, effects]);
+  container.classList?.add(SPRAE); // mark spraed element
+
+  // expose dispose
+  container[_dispose] = () => {
+    while (effects.length) effects.pop()[_dispose]();
+    container.classList.remove(SPRAE)
+    memo.delete(container);
+    let els = container.getElementsByClassName(SPRAE);
+    while (els.length) els[0][_dispose]?.()
+  }
+
+  return state;
+}
+
+// default compiler
+const evalMemo = {};
+
+export let compile = (expr, dir, evaluate) => {
+  if (evaluate = evalMemo[expr = expr.trim()]) return evaluate
+
+  // static-time errors
+  try {
+    // evaluate = new Function(`__scope`, `with (__scope) { return ${expr} };`);
+    evaluate = justin(expr);
+  }
+  catch (e) { throw Object.assign(e, { message: `${SPRAE} ${e.message}\n\n${dir}${expr ? `="${expr}"\n\n` : ""}`, expr }) }
+
+  // runtime errors
+  return evalMemo[expr] = evaluate
+}
+
+// DOM swapper
+export let swap = swapdom
+
+// interpolate a$<b> fields from context
+export const ipol = (v, state) => {
+  return v?.replace ? v.replace(/\$<([^>]+)>/g, (match, field) => state[field]?.valueOf?.() ?? '') : v
+};
+
+// configure signals/compiler/differ
+// it's more compact than using sprae.signal = signal etc.
+sprae.use = s => {
+  s.signal && (
+    signal = s.signal,
+    effect = s.effect,
+    computed = s.computed,
+    batch = s.batch || (fn => fn()),
+    untracked = s.untracked || batch
+  );
+  s.swap && (swap = s.swap)
+}

package/directive/aria.js

@@ -0,0 +1,10 @@
+import { directive, compile } from "../core.js";
+import { attr, dashcase } from './default.js'
+
+directive['aria'] = (el, expr, state) => {
+  let evaluate = compile(expr, 'aria')
+  const update = (value) => {
+    for (let key in value) attr(el, 'aria-' + dashcase(key), value[key] == null ? null : value[key] + '');
+  }
+  return () => update(evaluate(state)?.valueOf())
+}

package/directive/class.js

@@ -0,0 +1,17 @@
+import { directive, compile, ipol } from "../core.js";
+
+directive.class = (el, expr, state) => {
+  let evaluate = compile(expr, 'class');
+  let cur = new Set
+  return () => {
+    let v = evaluate(state);
+    let clsx = new Set;
+    if (v) {
+      if (typeof v === "string") ipol(v?.valueOf?.(), state).split(' ').map(cls => clsx.add(cls));
+      else if (Array.isArray(v)) v.map(v => (v = ipol(v?.valueOf?.(), state)) && clsx.add(v));
+      else Object.entries(v).map(([k, v]) => v?.valueOf?.() && clsx.add(k));
+    }
+    for (let cls of cur) if (clsx.has(cls)) clsx.delete(cls); else el.classList.remove(cls);
+    for (let cls of cur = clsx) el.classList.add(cls)
+  };
+};

package/directive/data.js

@@ -0,0 +1,10 @@
+import { directive, compile } from "../core.js";
+
+directive['data'] = (el, expr, state) => {
+  let evaluate = compile(expr, 'data')
+
+  return () => {
+    let value = evaluate(state)?.valueOf()
+    for (let key in value) el.dataset[key] = value[key];
+  }
+}

package/directive/default.js

@@ -0,0 +1,148 @@
+import { directive, compile, ipol } from "../core.js";
+
+// set generic property directive
+directive.default = (el, expr, state, name) => {
+  let evt = name.startsWith("on") && name.slice(2);
+  let evaluate = compile(expr, name);
+
+  if (evt) {
+    let off
+    return () => (
+      off?.(), // intermediate teardown
+      off = on(el, evt, evaluate(state))
+    );
+  }
+
+  return () => {
+    let value = evaluate(state)?.valueOf();
+    if (name) attr(el, name, ipol(value, state))
+    else for (let key in value) attr(el, dashcase(key), ipol(value[key], state));
+  };
+};
+
+
+// bind event to a target
+const on = (el, e, fn = () => { }) => {
+  const ctx = { evt: "", target: el, test: () => true };
+
+  // onevt.debounce-108 -> evt.debounce-108
+  ctx.evt = e.replace(
+    /\.(\w+)?-?([-\w]+)?/g,
+    (match, mod, param = "") => ((ctx.test = mods[mod]?.(ctx, ...param.split("-")) || ctx.test), ""),
+  );
+
+  // add listener applying the context
+  const { evt, target, test, defer, stop, prevent, ...opts } = ctx;
+
+  if (defer) fn = defer(fn);
+
+  const cb = (e) =>
+    test(e) && (stop && e.stopPropagation(), prevent && e.preventDefault(), fn.call(target, e));
+
+  target.addEventListener(evt, cb, opts);
+
+  // return off
+  return () => target.removeEventListener(evt, cb, opts);
+};
+
+// event modifiers
+const mods = {
+  // actions
+  prevent(ctx) { ctx.prevent = true; },
+  stop(ctx) { ctx.stop = 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; },
+
+  throttle(ctx, limit) { ctx.defer = (fn) => throttle(fn, limit ? Number(limit) || 0 : 108); },
+  debounce(ctx, wait) { ctx.defer = (fn) => debounce(fn, wait ? Number(wait) || 0 : 108); },
+
+  // test
+  outside: (ctx) => (e) => {
+    let target = ctx.target;
+    if (target.contains(e.target)) return false;
+    if (e.target.isConnected === false) return false;
+    if (target.offsetWidth < 1 && target.offsetHeight < 1) return false;
+    return true;
+  },
+  self: (ctx) => (e) => e.target === ctx.target,
+
+  // keyboard
+  ctrl: (_, ...param) => (e) => keys.ctrl(e) && param.every((p) => (keys[p] ? keys[p](e) : e.key === p)),
+  shift: (_, ...param) => (e) => keys.shift(e) && param.every((p) => (keys[p] ? keys[p](e) : e.key === p)),
+  alt: (_, ...param) => (e) => keys.alt(e) && param.every((p) => (keys[p] ? keys[p](e) : e.key === p)),
+  meta: (_, ...param) => (e) => keys.meta(e) && param.every((p) => (keys[p] ? keys[p](e) : e.key === p)),
+  arrow: () => keys.arrow,
+  enter: () => keys.enter,
+  escape: () => keys.escape,
+  tab: () => keys.tab,
+  space: () => keys.space,
+  backspace: () => keys.backspace,
+  delete: () => keys.delete,
+  digit: () => keys.digit,
+  letter: () => keys.letter,
+  character: () => keys.character,
+};
+
+// 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",
+  escape: (e) => e.key.startsWith("Esc"),
+  tab: (e) => e.key === "Tab",
+  space: (e) => e.key === " " || e.key === "Space" || e.key === " ",
+  backspace: (e) => e.key === "Backspace",
+  delete: (e) => e.key === "Delete",
+  digit: (e) => /^\d$/.test(e.key),
+  letter: (e) => /^[a-zA-Z]$/.test(e.key),
+  character: (e) => /^\S$/.test(e.key),
+};
+
+// 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 : "");
+}
+
+// create delayed fns
+const throttle = (fn, limit) => {
+  let pause, planned,
+    block = (e) => {
+      pause = true;
+      setTimeout(() => {
+        pause = false;
+        // if event happened during blocked time, it schedules call by the end
+        if (planned) return (planned = false), block(e), fn(e);
+      }, limit);
+    };
+  return (e) => {
+    if (pause) return (planned = true);
+    block(e);
+    return fn(e);
+  };
+};
+
+const debounce = (fn, wait) => {
+  let timeout;
+  return (e) => {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => {
+      timeout = null;
+      fn(e);
+    }, wait);
+  };
+};
+
+export const dashcase = (str) => {
+  return str.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g, (match) => "-" + match.toLowerCase());
+}

package/directive/each.js

@@ -0,0 +1,64 @@
+import sprae, { directive, compile, swap } from "../core.js";
+
+export const _each = Symbol(":each");
+
+const keys = {}; // boxed primitives pool
+
+// :each must init before :ref, :id or any others, since it defines scope
+directive.each = (tpl, expr, state, name) => {
+  let [leftSide, itemsExpr] = expr.split(/\s+in\s+/);
+  let [itemVar, idxVar = "_$"] = leftSide.split(/\s*,\s*/);
+
+  // we need :if to be able to replace holder instead of tpl for :if :each case
+  const holder = (tpl[_each] = document.createTextNode(""));
+  tpl.replaceWith(holder);
+
+  const evaluate = compile(itemsExpr, name);
+  const memo = new WeakMap;
+
+  tpl.removeAttribute(':key')
+
+  let cur = [];
+
+  return () => {
+    // naive approach: whenever items change we replace full list
+    let items = evaluate(state)?.valueOf(), els = [];
+    if (typeof items === "number") items = Array.from({ length: items }, (_, i) => i);
+
+    const count = new WeakSet
+    for (let idx in items) {
+      let item = items[idx]
+      // creating via prototype is faster in both creation time & reading time
+      let substate = Object.create(state, { [idxVar]: { value: idx } });
+      substate[itemVar] = item; // can be changed by subsequent updates, need to be writable
+      item = item.peek?.() ?? item; // unwrap signal
+      let key = item.key ?? item.id ?? item;
+      let el;
+
+      if (key == null) el = tpl.cloneNode(true)
+      else {
+        // make sure key is object
+        if (Object(key) !== key) key = (keys[key] ||= Object(key));
+
+        if (count.has(key)) {
+          console.warn('Duplicate key', key), el = tpl.cloneNode(true);
+        }
+        else {
+          console.log(key, count.has(key))
+          count.add(key);
+          el = memo.get(key) || memo.set(key, tpl.cloneNode(true)).get(key);
+        }
+      }
+
+      if (el.content) el = el.content.cloneNode(true) // <template>
+
+      sprae(el, substate)
+
+      // document fragment
+      if (el.nodeType === 11) els.push(...el.childNodes);
+      else els.push(el);
+    }
+
+    swap(holder.parentNode, cur, cur = els, holder);
+  };
+};

package/directive/fx.js

@@ -0,0 +1,6 @@
+import { directive, compile } from "../core.js";
+
+directive.fx = (el, expr, state, name) => {
+  let evaluate = compile(expr, name);
+  return () => evaluate(state);
+};

package/directive/html.js

@@ -0,0 +1,11 @@
+import sprae, { directive, compile } from "../core.js";
+
+directive.html = (el, expr, state, name) => {
+  let evaluate = compile(expr, name), tpl = evaluate(state);
+
+  if (!tpl) return
+
+  let content = (tpl.content || tpl).cloneNode(true);
+  el.replaceChildren(content);
+  sprae(el, state);
+};

package/directive/if.js

@@ -0,0 +1,40 @@
+import sprae, { compile, directive, swap } from "../core.js";
+import { _each } from './each.js';
+
+// :if is interchangeable with :each depending on order, :if :each or :each :if have different meanings
+// as for :if :scope - :if must init first, since it is lazy, to avoid initializing component ahead of time by :scope
+// we consider :scope={x} :if={x} case insignificant
+const _prevIf = Symbol("if");
+directive.if = (ifEl, expr, state, name) => {
+  let parent = ifEl.parentNode,
+    next = ifEl.nextElementSibling,
+    holder = document.createTextNode(''),
+
+    evaluate = compile(expr, name),
+
+    // actual replaceable els (takes <template>)
+    cur, ifs, elses, none = [];
+
+  ifEl.after(holder) // mark end of modifying section
+
+  if (ifEl.content) cur = none, ifEl.remove(), ifs = [...ifEl.content.childNodes]
+  else ifs = cur = [ifEl]
+
+  if (next?.hasAttribute(":else")) {
+    next.removeAttribute(":else");
+    // if next is :else :if - leave it for its own :if handler
+    if (next.hasAttribute(":if")) elses = none;
+    else next.remove(), elses = next.content ? [...next.content.childNodes] : [next];
+  } else elses = none
+
+  return () => {
+    const newEls = evaluate(state)?.valueOf() ? ifs : ifEl[_prevIf] ? none : elses;
+    if (next) next[_prevIf] = newEls === ifs
+    if (cur != newEls) {
+      // :if :each
+      if (cur[0]?.[_each]) cur = [cur[0][_each]]
+      swap(parent, cur, cur = newEls, holder);
+      for (let el of cur) sprae(el, state);
+    }
+  };
+};

package/directive/ref.js

@@ -0,0 +1,10 @@
+import { directive, ipol } from "../core.js";
+
+// ref must be last within primaries, since that must be skipped by :each, but before secondaries
+directive.ref = (el, expr, state) => {
+  let prev;
+  return () => {
+    if (prev) delete state[prev]
+    state[prev = ipol(expr, state)] = el;
+  }
+};

package/directive/scope.js

@@ -0,0 +1,11 @@
+import sprae, { directive, compile } from "../core.js";
+
+// `:each` can redefine scope as `:each="a in {myScope}"`,
+// same time per-item scope as `:each="..." :scope="{collapsed:true}"` is useful
+directive.scope = (el, expr, rootState, name) => {
+  let evaluate = compile(expr, name);
+  // local state may contain signals that update, so we take them over
+  return () => {
+    sprae(el, { ...rootState, ...(evaluate(rootState)?.valueOf?.() || {}) });
+  }
+};

package/directive/style.js

@@ -0,0 +1,16 @@
+import { directive, compile, ipol } from "../core.js";
+
+directive.style = (el, expr, state) => {
+  let evaluate = compile(expr, 'style');
+  let initStyle = el.getAttribute("style") || "";
+  if (!initStyle.endsWith(";")) initStyle += "; ";
+
+  return () => {
+    let v = evaluate(state)?.valueOf();
+    if (typeof v === "string") el.setAttribute("style", initStyle + ipol(v, state));
+    else {
+      el.setAttribute("style", initStyle);
+      for (let k in v) el.style.setProperty(k, ipol(v[k], state));
+    }
+  };
+};

package/directive/text.js

@@ -0,0 +1,12 @@
+import { directive, compile } from "../core.js";
+
+// set text content
+directive.text = (el, expr, state) => {
+  let evaluate = compile(expr, 'text');
+  if (el.content) el.replaceWith(el = document.createTextNode('')) // <template :text="abc"/>
+
+  return () => {
+    let value = evaluate(state)?.valueOf();
+    el.textContent = value == null ? "" : value;
+  };
+};

package/directive/value.js

@@ -0,0 +1,31 @@
+import { directive, compile } from "../core.js";
+import { attr } from './default.js';
+
+// connect expr to element value
+directive.value = (el, expr, state) => {
+  let evaluate = compile(expr, 'value');
+
+  let from, to;
+  let update = el.type === "text" || el.type === ""
+    ? (value) => el.setAttribute("value", (el.value = value == null ? "" : value))
+    : el.tagName === "TEXTAREA" || el.type === "text" || el.type === ""
+      ? (value) =>
+      (
+        // we retain selection in input
+        (from = el.selectionStart),
+        (to = el.selectionEnd),
+        el.setAttribute("value", (el.value = value == null ? "" : value)),
+        from && el.setSelectionRange(from, to)
+      )
+      : el.type === "checkbox"
+        ? (value) => (el.checked = value, attr(el, "checked", value))
+        : el.type === "select-one"
+          ? (value) => {
+            for (let option in el.options) option.removeAttribute("selected");
+            el.value = value;
+            el.selectedOptions[0]?.setAttribute("selected", "");
+          }
+          : (value) => (el.value = value);
+
+  return () => (update(evaluate(state)?.valueOf?.()));
+};