@oscarpalmer/atoms 0.26.0 → 0.28.0

package/dist/css/a11y.css

@@ -1,3 +1,6 @@
+.visually-hidden {
+  position: absolute !important;
+}
 .visually-hidden:not(:active):not(:focus):not(:focus-within) {
   width: 1px !important;
   height: 1px !important;

package/dist/js/html/attribute.mjs

@@ -0,0 +1,123 @@
+// src/js/html/attribute.ts
+import {
+effect,
+isComputed,
+isSignal
+} from "../signal";
+import {addEvent} from "./event";
+import {getIndex} from "./node";
+function isBadAttribute(attribute) {
+  const { name, value } = attribute;
+  return /^on/i.test(name) || /^(href|src|xlink:href)$/i.test(name) && /(data:text\/html|javascript:)/i.test(value);
+}
+function isBooleanAttribute(name) {
+  return booleanAttributes.has(name.toLowerCase());
+}
+function mapAttributes(values, element) {
+  const attributes = Array.from(element.attributes);
+  const { length } = attributes;
+  let index = 0;
+  for (;index < length; index += 1) {
+    const attribute = attributes[index];
+    const isBad = isBadAttribute(attribute);
+    const value = getIndex(attribute.value, true);
+    if (isBad || value === -1 || !(element instanceof HTMLElement || element instanceof SVGElement)) {
+      if (isBad) {
+        element.removeAttribute(attribute.name);
+      }
+      continue;
+    }
+    if (attribute.name.startsWith("@")) {
+      addEvent(element, attribute.name, values[value]);
+    } else {
+      setReactive(element, attribute.name, values[value]);
+    }
+  }
+}
+var setAnyAttribute = function(element, name, reactive) {
+  const isValue = /^value$/i.test(name);
+  return effect(() => {
+    const { value } = reactive;
+    if (isValue) {
+      element.value = value;
+      return;
+    }
+    if (value == null) {
+      element.removeAttribute(name);
+    } else {
+      element.setAttribute(name, value);
+    }
+  });
+};
+var setBooleanAttribute = function(element, name, reactive) {
+  return effect(() => {
+    const { value } = reactive;
+    if (value === true) {
+      element.setAttribute(name, "");
+    } else {
+      element.removeAttribute(name);
+    }
+  });
+};
+var setClassAttribute = function(element, name, reactive) {
+  const classes = name.split(".").slice(1).map((name2) => name2.trim()).filter((name2) => name2.length > 0);
+  if (classes.length === 0) {
+    return;
+  }
+  return effect(() => {
+    if (reactive.value === true) {
+      element.classList.add(...classes);
+    } else {
+      element.classList.remove(...classes);
+    }
+  });
+};
+var setReactive = function(element, name, value) {
+  element.removeAttribute(name);
+  const reactive = typeof value === "function" ? value() : value;
+  if (!(isComputed(reactive) || isSignal(reactive))) {
+    return;
+  }
+  switch (true) {
+    case isBooleanAttribute(name):
+      return setBooleanAttribute(element, name, reactive);
+    case /^class\./i.test(name):
+      return setClassAttribute(element, name, reactive);
+    case /^style\./i.test(name):
+      return setStyleAttribute(element, name, reactive);
+    default:
+      return setAnyAttribute(element, name, reactive);
+  }
+};
+var setStyleAttribute = function(element, name, reactive) {
+  const [, first, second] = name.split(".");
+  const property = first.trim();
+  const suffix = second?.trim();
+  if (property.length === 0 || suffix !== undefined && suffix.length === 0) {
+    return;
+  }
+  return effect(() => {
+    const { value } = reactive;
+    if (value == null || value === false || value === true && suffix == null) {
+      element.style.removeProperty(property);
+    } else {
+      element.style.setProperty(property, value === true ? suffix : `${value}${suffix ?? ""}`);
+    }
+  });
+};
+var booleanAttributes = new Set([
+  "checked",
+  "disabled",
+  "hidden",
+  "inert",
+  "multiple",
+  "open",
+  "readonly",
+  "required",
+  "selected"
+]);
+export {
+  mapAttributes,
+  isBooleanAttribute,
+  isBadAttribute
+};

package/dist/js/html/event.mjs

@@ -0,0 +1,9 @@
+// src/js/html/event.ts
+function addEvent(element, name, value) {
+  if (typeof value === "function") {
+    element.addEventListener(name.slice(1), value);
+  }
+}
+export {
+  addEvent
+};

package/dist/js/html/index.mjs

@@ -0,0 +1,56 @@
+// src/js/html/index.ts
+import {createNodes, mapNodes} from "./node";
+var getExpression = function(values, value, expression) {
+  if (expression == null) {
+    return value;
+  }
+  if (typeof expression === "function" || expression instanceof Node || expression instanceof Templated) {
+    values.push(expression);
+    return `${value}<!--atoms.${values.length - 1}-->`;
+  }
+  if (Array.isArray(expression)) {
+    const { length } = expression;
+    let html = "";
+    let index = 0;
+    for (;index < length; index += 1) {
+      html += getExpression(values, "", expression[index]);
+    }
+    return `${value}${html}`;
+  }
+  return `${value}${expression}`;
+};
+var getHtml = function(data) {
+  const { expressions, strings, values } = data;
+  const { length } = strings;
+  let html = "";
+  let index = 0;
+  for (;index < length; index += 1) {
+    html += getExpression(values, strings[index], expressions[index]);
+  }
+  return html;
+};
+function html(strings, ...expressions) {
+  return new Templated(strings, expressions);
+}
+function isTemplated(value) {
+  return value instanceof Templated;
+}
+
+class Templated {
+  constructor(strings, expressions) {
+    this.data = {
+      expressions,
+      strings,
+      values: []
+    };
+  }
+  render() {
+    const html2 = getHtml(this.data);
+    const nodes = createNodes(html2);
+    return mapNodes(this.data.values, nodes);
+  }
+}
+export {
+  isTemplated,
+  html
+};

package/dist/js/html/models.mjs

@@ -0,0 +1,5 @@
+// src/js/html/models.ts
+var models_default = undefined;
+export {
+  models_default as default
+};

package/dist/js/html/node.mjs

@@ -0,0 +1,74 @@
+// src/js/html/node.ts
+import {isTemplated} from "../html";
+import {effect, isComputed, isSignal} from "../signal";
+import {mapAttributes} from "./attribute";
+function createNodes(html2) {
+  const template = document.createElement("template");
+  template.innerHTML = html2;
+  const cloned = template.content.cloneNode(true);
+  const scripts = Array.from(cloned.querySelectorAll("script"));
+  for (const script of scripts) {
+    script.remove();
+  }
+  cloned.normalize();
+  return cloned;
+}
+function getIndex(content, full) {
+  const [, index] = (full ? /^<!--atoms\.(\d+)-->$/ : /^atoms\.(\d+)$/).exec(content) ?? [];
+  return index == null ? -1 : Number.parseInt(index, 10);
+}
+var getNode = function(value) {
+  if (value instanceof Node) {
+    return value;
+  }
+  return isTemplated(value) ? value.render() : document.createTextNode(String(value));
+};
+function mapNodes(values, node) {
+  const children = Array.from(node.childNodes);
+  const { length } = children;
+  let index = 0;
+  for (;index < length; index += 1) {
+    const node2 = children[index];
+    const value = node2.nodeType === 8 ? getIndex(node2.nodeValue ?? "", false) : -1;
+    if (value > -1) {
+      setNode(node2, values[value]);
+      continue;
+    }
+    if (node2 instanceof Element) {
+      mapAttributes(values, node2);
+    }
+    if (node2.hasChildNodes()) {
+      mapNodes(values, node2);
+    }
+  }
+  return node;
+}
+var setNode = function(comment, value) {
+  if (typeof value === "function") {
+    setReactive(comment, value);
+    return;
+  }
+  const node = getNode(value);
+  comment.replaceWith(...node.constructor.name === "DocumentFragment" ? Array.from(node.childNodes) : [node]);
+};
+var setReactive = function(comment, callback) {
+  const reactive = callback();
+  if (!(isComputed(reactive) || isSignal(reactive))) {
+    return;
+  }
+  const text = document.createTextNode("");
+  effect(() => {
+    const { value } = reactive;
+    text.textContent = String(value);
+    if (value == null && text.parentNode != null) {
+      text.replaceWith(comment);
+    } else if (value != null && comment.parentNode != null) {
+      comment.replaceWith(text);
+    }
+  });
+};
+export {
+  mapNodes,
+  getIndex,
+  createNodes
+};

package/dist/js/index.js

@@ -284,6 +284,21 @@ function isPlainObject(value) {
   return (prototype === null || prototype === Object.prototype || Object.getPrototypeOf(prototype) === null) && !(Symbol.toStringTag in value) && !(Symbol.iterator in value);
 }
 
+// src/js/queue.ts
+function queue(callback) {
+  queued.add(callback);
+  if (queued.size > 0) {
+    queueMicrotask(() => {
+      const callbacks = Array.from(queued);
+      queued.clear();
+      for (const callback2 of callbacks) {
+        callback2();
+      }
+    });
+  }
+}
+var queued = new Set;
+
 // src/js/value.ts
 var _cloneNested = function(value) {
   const cloned = Array.isArray(value) ? [] : {};
@@ -535,13 +550,10 @@ var _isProxy = function(value2) {
   return value2?.$ instanceof Manager;
 };
 var _onChange = function(manager, value2) {
-  cancelAnimationFrame(frames.get(manager));
   if (!cloned.has(manager)) {
     cloned.set(manager, value2);
   }
-  frames.set(manager, requestAnimationFrame(() => {
-    _emit(manager);
-  }));
+  queue(manager.emitter);
 };
 function cloneProxy(proxy) {
   if (!_isProxy(proxy)) {
@@ -575,6 +587,9 @@ class Manager {
   }
   constructor(owner) {
     this.owner = owner;
+    this.emitter = function() {
+      _emit(this);
+    }.bind(this);
   }
   clone() {
     return _createProxy(undefined, clone(merge(this.owner)));
@@ -595,55 +610,51 @@ class Manager {
   }
 }
 var cloned = new Map;
-var frames = new Map;
 // src/js/signal.ts
-var _getter = function(instance) {
-  const last = running[running.length - 1];
-  if (last !== undefined) {
-    instance._effects.add(last);
-    last._values.add(instance);
-  }
-  return instance._value;
-};
-var _setter = function(instance, value2, run) {
-  if (!run && Object.is(value2, instance._value)) {
-    return;
-  }
-  instance._value = value2;
-  cancelAnimationFrame(instance._frame);
-  if (!instance._active) {
-    return;
-  }
-  instance._frame = requestAnimationFrame(() => {
-    for (const effect of instance._effects) {
-      effect._callback();
-    }
-    instance._frame = undefined;
-  });
-};
 function computed(callback) {
   return new Computed(callback);
 }
 function effect(callback) {
   return new Effect(callback);
 }
+var getValue = function(reactive) {
+  const effect2 = effects[effects.length - 1];
+  if (effect2 !== undefined) {
+    reactive._effects.add(effect2);
+    effect2._reactives.add(reactive);
+  }
+  return reactive._value;
+};
 function isComputed(value2) {
   return value2 instanceof Computed;
 }
 function isEffect(value2) {
   return value2 instanceof Effect;
 }
+function isReactive(value2) {
+  return value2 instanceof Reactive;
+}
 function isSignal(value2) {
   return value2 instanceof Signal;
 }
+var setValue = function(reactive, value2, run) {
+  if (!run && Object.is(value2, reactive._value)) {
+    return;
+  }
+  reactive._value = value2;
+  if (reactive._active) {
+    for (const effect2 of reactive._effects) {
+      queue(effect2._callback);
+    }
+  }
+};
 function signal(value2) {
   return new Signal(value2);
 }
 
-class Value {
+class Reactive {
   _active = true;
   _effects = new Set;
-  _frame;
   peek() {
     return this._value;
   }
@@ -655,16 +666,14 @@ class Value {
   }
 }
 
-class Computed extends Value {
+class Computed extends Reactive {
   _effect;
   get value() {
-    return _getter(this);
+    return getValue(this);
   }
   constructor(callback) {
     super();
-    this._effect = effect(() => {
-      _setter(this, callback(), false);
-    });
+    this._effect = effect(() => setValue(this, callback(), false));
   }
   run() {
     this._effect.run();
@@ -677,7 +686,7 @@ class Computed extends Value {
 class Effect {
   _callback;
   _active = false;
-  _values = new Set;
+  _reactives = new Set;
   constructor(_callback) {
     this._callback = _callback;
     this.run();
@@ -687,29 +696,29 @@ class Effect {
       return;
     }
     this._active = true;
-    const index = running.push(this) - 1;
+    const index = effects.push(this) - 1;
     this._callback();
-    running.splice(index, 1);
+    effects.splice(index, 1);
   }
   stop() {
     if (!this._active) {
       return;
     }
     this._active = false;
-    for (const value2 of this._values) {
+    for (const value2 of this._reactives) {
       value2._effects.delete(this);
     }
-    this._values.clear();
+    this._reactives.clear();
   }
 }
 
-class Signal extends Value {
+class Signal extends Reactive {
   _value;
   get value() {
-    return _getter(this);
+    return getValue(this);
   }
   set value(value2) {
-    _setter(this, value2, false);
+    setValue(this, value2, false);
   }
   constructor(_value) {
     super();
@@ -720,16 +729,16 @@ class Signal extends Value {
       return;
     }
     this._active = true;
-    _setter(this, this._value, true);
+    setValue(this, this._value, true);
   }
   stop() {
     this._active = false;
   }
 }
-var running = [];
+var effects = [];
 // src/js/timer.ts
 function repeat(callback, options) {
-  const count = typeof options?.count === "number" ? options.count : Infinity;
+  const count = typeof options?.count === "number" ? options.count : Number.POSITIVE_INFINITY;
   return new Timer(callback, { ...options ?? {}, ...{ count } }).start();
 }
 function wait(callback, time) {
@@ -819,10 +828,12 @@ export {
   signal,
   set,
   repeat,
+  queue,
   push,
   proxy,
   merge,
   isSignal,
+  isReactive,
   isEffect,
   isComputed,
   insert,

package/dist/js/index.mjs

@@ -4,6 +4,7 @@ export * from "./element";
 export * from "./event";
 export * from "./number";
 export * from "./proxy";
+export * from "./queue";
 export * from "./signal";
 export * from "./string";
 export * from "./timer";

package/dist/js/proxy.js

@@ -19,6 +19,21 @@ function isPlainObject(value) {
   return (prototype === null || prototype === Object.prototype || Object.getPrototypeOf(prototype) === null) && !(Symbol.toStringTag in value) && !(Symbol.iterator in value);
 }
 
+// src/js/queue.ts
+function queue(callback) {
+  queued.add(callback);
+  if (queued.size > 0) {
+    queueMicrotask(() => {
+      const callbacks = Array.from(queued);
+      queued.clear();
+      for (const callback2 of callbacks) {
+        callback2();
+      }
+    });
+  }
+}
+var queued = new Set;
+
 // src/js/value.ts
 var _cloneNested = function(value) {
   const cloned = Array.isArray(value) ? [] : {};
@@ -239,13 +254,10 @@ var _isProxy = function(value2) {
   return value2?.$ instanceof Manager;
 };
 var _onChange = function(manager, value2) {
-  cancelAnimationFrame(frames.get(manager));
   if (!cloned.has(manager)) {
     cloned.set(manager, value2);
   }
-  frames.set(manager, requestAnimationFrame(() => {
-    _emit(manager);
-  }));
+  queue(manager.emitter);
 };
 function cloneProxy(proxy) {
   if (!_isProxy(proxy)) {
@@ -279,6 +291,9 @@ class Manager {
   }
   constructor(owner) {
     this.owner = owner;
+    this.emitter = function() {
+      _emit(this);
+    }.bind(this);
   }
   clone() {
     return _createProxy(undefined, clone(merge(this.owner)));
@@ -299,7 +314,6 @@ class Manager {
   }
 }
 var cloned = new Map;
-var frames = new Map;
 export {
   unsubscribe,
   subscribe,

package/dist/js/proxy.mjs

@@ -1,5 +1,8 @@
 // src/js/proxy.ts
-import {isArrayOrPlainObject} from "./is";
+import {
+isArrayOrPlainObject
+} from "./is";
+import {queue as queue2} from "./queue";
 import {clone, diff, get, merge} from "./value";
 var _createProxy = function(existing, value2) {
   if (!isArrayOrPlainObject(value2) || _isProxy(value2) && value2.$ === existing) {
@@ -60,13 +63,10 @@ var _isProxy = function(value2) {
   return value2?.$ instanceof Manager;
 };
 var _onChange = function(manager, value2) {
-  cancelAnimationFrame(frames.get(manager));
   if (!cloned.has(manager)) {
     cloned.set(manager, value2);
   }
-  frames.set(manager, requestAnimationFrame(() => {
-    _emit(manager);
-  }));
+  queue2(manager.emitter);
 };
 function cloneProxy(proxy) {
   if (!_isProxy(proxy)) {
@@ -100,6 +100,9 @@ class Manager {
   }
   constructor(owner) {
     this.owner = owner;
+    this.emitter = function() {
+      _emit(this);
+    }.bind(this);
   }
   clone() {
     return _createProxy(undefined, clone(merge(this.owner)));
@@ -120,7 +123,6 @@ class Manager {
   }
 }
 var cloned = new Map;
-var frames = new Map;
 export {
   unsubscribe,
   subscribe,

package/dist/js/queue.js

@@ -0,0 +1,17 @@
+// src/js/queue.ts
+function queue(callback) {
+  queued.add(callback);
+  if (queued.size > 0) {
+    queueMicrotask(() => {
+      const callbacks = Array.from(queued);
+      queued.clear();
+      for (const callback2 of callbacks) {
+        callback2();
+      }
+    });
+  }
+}
+var queued = new Set;
+export {
+  queue
+};

package/dist/js/queue.mjs

@@ -0,0 +1,17 @@
+// src/js/queue.ts
+function queue(callback) {
+  queued.add(callback);
+  if (queued.size > 0) {
+    queueMicrotask(() => {
+      const callbacks = Array.from(queued);
+      queued.clear();
+      for (const callback2 of callbacks) {
+        callback2();
+      }
+    });
+  }
+}
+var queued = new Set;
+export {
+  queue
+};