@oscarpalmer/abydon 0.6.0 → 0.8.0

package/dist/index.js

@@ -1,45 +1,45 @@
 // node_modules/@oscarpalmer/atoms/dist/js/string/index.mjs
-var getString = function(value) {
-  if (typeof value === "string") {
-    return value;
+function getString(value2) {
+  if (typeof value2 === "string") {
+    return value2;
   }
-  if (typeof value !== "object" || value == null) {
-    return String(value);
+  if (typeof value2 !== "object" || value2 == null) {
+    return String(value2);
   }
-  const valueOff = value.valueOf?.() ?? value;
+  const valueOff = value2.valueOf?.() ?? value2;
   const asString = valueOff?.toString?.() ?? String(valueOff);
-  return asString.startsWith("[object ") ? JSON.stringify(value) : asString;
-};
+  return asString.startsWith("[object ") ? JSON.stringify(value2) : asString;
+}
 // node_modules/@oscarpalmer/atoms/dist/js/is.mjs
-var isNullableOrWhitespace = function(value) {
-  return value == null || /^\s*$/.test(getString(value));
-};
+function isNullableOrWhitespace(value2) {
+  return value2 == null || /^\s*$/.test(getString(value2));
+}
 
 // src/helpers/index.ts
-function isFragment(value) {
-  return typeof value === "object" && value != null && "$fragment" in value && value.$fragment === true;
+function isFragment(value2) {
+  return typeof value2 === "object" && value2 != null && "$fragment" in value2 && value2.$fragment === true;
 }
-function isFragmentElement(value) {
-  return value instanceof HTMLElement || value instanceof SVGElement;
+function isFragmentElement(value2) {
+  return value2 instanceof HTMLElement || value2 instanceof SVGElement;
 }
-function isFragmentNode(value) {
-  return value instanceof Comment || value instanceof Element || value instanceof Text;
+function isFragmentNode(value2) {
+  return value2 instanceof Comment || value2 instanceof Element || value2 instanceof Text;
 }
 
 // src/helpers/dom.ts
-function createNodes(value) {
-  if (isFragmentNode(value)) {
-    return [value];
+function createNodes(value2) {
+  if (isFragmentNode(value2)) {
+    return [value2];
   }
-  if (isFragment(value)) {
-    return value.get();
+  if (isFragment(value2)) {
+    return value2.get();
   }
-  return [new Text(getString(value))];
+  return [new Text(getString(value2))];
 }
 function createTemplate(html) {
-  const template = document.createElement("template");
-  template.innerHTML = html;
-  const cloned = template.content.cloneNode(true);
+  const template2 = document.createElement("template");
+  template2.innerHTML = html;
+  const cloned = template2.content.cloneNode(true);
   const scripts = [
     ...cloned instanceof Element ? cloned.querySelectorAll("script") : []
   ];
@@ -65,7 +65,7 @@ function replaceNodes(from, to) {
   }
 }
 
-// node_modules/@oscarpalmer/sentinel/node_modules/@oscarpalmer/atoms/dist/js/queue.mjs
+// node_modules/@oscarpalmer/atoms/dist/js/queue.mjs
 if (globalThis._atomic_queued == null) {
   const queued = new Set;
   Object.defineProperty(globalThis, "_atomic_queued", {
@@ -86,51 +86,52 @@ if (globalThis._sentinels == null) {
 }
 
 // node_modules/@oscarpalmer/sentinel/dist/effect.mjs
-var effect = function(callback) {
-  const state = {
-    callback,
-    active: false,
-    reactives: new Set
-  };
-  const instance = Object.create({
-    start() {
-      if (!state.active) {
-        state.active = true;
-        const index = globalThis._sentinels.push(state) - 1;
-        state.callback();
-        globalThis._sentinels.splice(index, 1);
-      }
-    },
-    stop() {
-      if (state.active) {
-        state.active = false;
-        for (const reactive of state.reactives) {
-          reactive.callbacks.any.delete(state);
-          for (const [key, keyed] of reactive.callbacks.values) {
-            keyed.delete(state);
-            if (keyed.size === 0) {
-              reactive.callbacks.keys.delete(key);
-            }
+function effect(callback) {
+  return new Effect(callback);
+}
+class Effect {
+  $sentinel = "effect";
+  state;
+  constructor(callback) {
+    this.state = {
+      callback,
+      active: false,
+      reactives: new Set
+    };
+    this.start();
+  }
+  start() {
+    if (!this.state.active) {
+      this.state.active = true;
+      const index = globalThis._sentinels.push(this.state) - 1;
+      this.state.callback();
+      globalThis._sentinels.splice(index, 1);
+    }
+  }
+  stop() {
+    if (this.state.active) {
+      this.state.active = false;
+      for (const reactive of this.state.reactives) {
+        reactive.callbacks.any.delete(this.state);
+        for (const [key, keyed] of reactive.callbacks.values) {
+          keyed.delete(this.state);
+          if (keyed.size === 0) {
+            reactive.callbacks.keys.delete(key);
           }
         }
-        state.reactives.clear();
       }
+      this.state.reactives.clear();
     }
-  });
-  Object.defineProperty(instance, "$sentinel", {
-    value: "effect"
-  });
-  instance.start();
-  return instance;
-};
+  }
+}
 
 // node_modules/@oscarpalmer/sentinel/dist/helpers/is.mjs
-var isReactive = function(value) {
-  return isSentinel(value, /^array|computed|signal|store$/i);
-};
-var isSentinel = function(value, expression) {
-  return expression.test(value?.$sentinel ?? "");
-};
+function isReactive(value2) {
+  return isSentinel(value2, /^array|computed|signal|store$/i);
+}
+function isSentinel(value2, expression) {
+  return expression.test(value2?.$sentinel ?? "");
+}
 
 // node_modules/@oscarpalmer/sentinel/dist/helpers/value.mjs
 var arrayOperations = new Set([
@@ -148,49 +149,45 @@ var arrayOperations = new Set([
 // node_modules/@oscarpalmer/sentinel/dist/reactive/index.mjs
 var primitives = new Set(["boolean", "number", "string"]);
 
-// src/node/value.ts
-function setReactiveNode(comment, reactive3) {
-  const text = new Text;
-  let nodes;
-  effect(() => {
-    const value10 = reactive3.get();
-    if (isFragment(value10) || isFragmentNode(value10)) {
-      const next = createNodes(value10);
-      if (nodes == null) {
-        if (comment.parentNode != null) {
-          replaceNodes([comment], next);
-        } else if (text.parentNode != null) {
-          replaceNodes([text], next);
-        }
-      } else {
-        replaceNodes(nodes, next);
-      }
-      nodes = next;
-      return;
-    }
-    const isNullable = isNullableOrWhitespace(value10);
-    text.textContent = getString(value10);
-    if (nodes != null) {
-      replaceNodes(nodes, [isNullable ? comment : text]);
-    } else if (isNullable && comment.parentNode == null) {
-      text.replaceWith(comment);
-    } else if (!isNullable && text.parentNode == null) {
-      comment.replaceWith(text);
-    }
-    nodes = undefined;
-  });
-}
-
 // src/node/event.ts
-function mapEvent(element, name, value10) {
+function getOptions(options) {
+  const parts = options.split(":");
+  return {
+    capture: parts.includes("c") || parts.includes("capture"),
+    once: parts.includes("o") || parts.includes("once"),
+    passive: !parts.includes("a") && !parts.includes("active")
+  };
+}
+function mapEvent(element, name, value9) {
   element.removeAttribute(name);
-  if (typeof value10 !== "function") {
-    return;
+  const [, type, options] = /^@(\w+)(?::([a-z:]+))?$/.exec(name) ?? [];
+  if (typeof value9 === "function" && type != null) {
+    element.addEventListener(type, value9, getOptions(options ?? ""));
   }
 }
 
 // node_modules/@oscarpalmer/atoms/dist/js/element/closest.mjs
-var closest = function(origin, selector, context) {
+function calculateDistance(origin, target) {
+  if (origin === target || origin.parentElement === target) {
+    return 0;
+  }
+  const comparison = origin.compareDocumentPosition(target);
+  const children = [...origin.parentElement?.children ?? []];
+  switch (true) {
+    case children.includes(target):
+      return Math.abs(children.indexOf(origin) - children.indexOf(target));
+    case !!(comparison & 2 || comparison & 8):
+      return traverse(origin, target);
+    case !!(comparison & 4 || comparison & 16):
+      return traverse(target, origin);
+    default:
+      return -1;
+  }
+}
+function closest(origin, selector, context) {
+  if (origin.matches(selector)) {
+    return [origin];
+  }
   const elements = [...(context ?? document).querySelectorAll(selector)];
   const { length } = elements;
   if (length === 0) {
@@ -213,22 +210,8 @@ var closest = function(origin, selector, context) {
     });
   }
   return minimum == null ? [] : distances.filter((found) => found.distance === minimum).map((found) => found.element);
-};
-var calculateDistance = function(origin, target) {
-  const comparison = origin.compareDocumentPosition(target);
-  const children = [...origin.parentElement?.children ?? []];
-  switch (true) {
-    case children.includes(target):
-      return Math.abs(children.indexOf(origin) - children.indexOf(target));
-    case !!(comparison & 2 || comparison & 8):
-      return traverse(origin, target);
-    case !!(comparison & 4 || comparison & 16):
-      return traverse(target, origin);
-    default:
-      return -1;
-  }
-};
-var traverse = function(from, to) {
+}
+function traverse(from, to) {
   const children = [...to.children];
   if (children.includes(from)) {
     return children.indexOf(from) + 1;
@@ -253,94 +236,94 @@ var traverse = function(from, to) {
     parent = parent.parentElement;
   }
   return -1e6;
-};
+}
 // src/node/attribute/value.ts
-function setAttribute(element2, name, value10) {
+function setAttribute(element2, name, value9) {
   element2.removeAttribute(name);
   switch (true) {
     case classPattern.test(name):
-      setClasses(element2, name, value10);
+      setClasses(element2, name, value9);
       return;
     case stylePattern.test(name):
-      setStyle(element2, name, value10);
+      setStyle(element2, name, value9);
       return;
     default:
-      setValue2(element2, name, value10);
+      setValue3(element2, name, value9);
       break;
   }
 }
-var setClasses = function(element2, name, value10) {
-  function update(value11) {
-    if (/^(|true)$/.test(getString(value11))) {
+function setClasses(element2, name, value9) {
+  function update(value10) {
+    if (/^(|true)$/.test(getString(value10))) {
       element2.classList.add(...classes);
     } else {
       element2.classList.remove(...classes);
     }
   }
   const classes = name.slice(6).split(".");
-  if (isReactive(value10)) {
+  if (isReactive(value9)) {
     effect(() => {
-      update(value10.get());
+      update(value9.get());
     });
   } else {
-    update(value10);
+    update(value9);
   }
-};
-var setStyle = function(element2, name, value10) {
-  function update(value11) {
-    if (value11 == null || value11 === false || value11 === true && unit == null) {
+}
+function setStyle(element2, name, value9) {
+  function update(value10) {
+    if (value10 == null || value10 === false || value10 === true && unit == null) {
       element2.style.removeProperty(property);
     } else {
-      element2.style.setProperty(property, value11 === true ? unit : getString(value11));
+      element2.style.setProperty(property, value10 === true ? unit : getString(value10));
     }
   }
   const [, property, unit] = /^\w+\.([a-z-]+)(?:\.(\w+))?$/i.exec(name) ?? [];
   if (property == null) {
     return;
   }
-  if (isReactive(value10)) {
+  if (isReactive(value9)) {
     effect(() => {
-      update(value10.get());
+      update(value9.get());
     });
   } else {
-    update(value10);
+    update(value9);
   }
-};
-var setValue2 = function(element2, name, value10) {
+}
+function setValue3(element2, name, value9) {
   const callback = booleanAttributes.has(name) && name in element2 ? name === "selected" ? updateSelected(element2) : updateProperty : updateAttribute;
-  if (isReactive(value10)) {
+  if (isReactive(value9)) {
     effect(() => {
-      callback(element2, name, value10.get());
+      callback(element2, name, value9.get());
     });
   } else {
-    callback(element2, name, value10);
+    callback(element2, name, value9);
   }
-};
-var triggerSelectChange = function(select) {
+}
+function triggerSelectChange(select) {
   if (select != null) {
     select.dispatchEvent(new Event("change", { bubbles: true }));
   }
-};
-var updateAttribute = function(element2, name, value10) {
-  if (value10 == null) {
+}
+function updateAttribute(element2, name, value9) {
+  if (value9 == null) {
     element2.removeAttribute(name);
   } else {
-    element2.setAttribute(name, getString(value10));
+    element2.setAttribute(name, getString(value9));
   }
-};
-var updateProperty = function(element2, name, value10) {
-  element2[name] = /^(|true)$/.test(getString(value10));
-};
-var updateSelected = function(element2) {
+}
+function updateProperty(element2, name, value9) {
+  element2[name] = /^(|true)$/.test(getString(value9));
+}
+function updateSelected(element2) {
   const select = closest(element2, "select")[0];
   const options = [...select?.options ?? []];
-  return (element3, name, value10) => {
+  return (element3, name, value9) => {
     if (select != null && options.includes(element3)) {
       triggerSelectChange(select);
     }
-    updateProperty(element3, name, value10);
+    updateProperty(element3, name, value9);
   };
-};
+}
 var booleanAttributes = new Set([
   "checked",
   "disabled",
@@ -356,23 +339,23 @@ var classPattern = /^class\./;
 var stylePattern = /^style\./;
 
 // src/node/attribute/index.ts
-var getValue2 = function(data2, original) {
+function getValue3(data2, original) {
   const matches = commentExpression.exec(original ?? "");
   return matches == null ? original : data2.values[+matches[1]];
-};
-function isBadAttribute(name, value11) {
-  return /^on/i.test(name) || /^(href|src|xlink:href)$/i.test(name) && /(data:text\/html|javascript:)/i.test(value11);
+}
+function isBadAttribute(name, value10) {
+  return /^on/i.test(name) || /^(href|src|xlink:href)$/i.test(name) && /(data:text\/html|javascript:)/i.test(value10);
 }
 function mapAttributes(data2, element2) {
   const attributes = [...element2.attributes];
   const { length } = attributes;
   for (let index = 0;index < length; index += 1) {
-    const { name, value: value11 } = attributes[index];
-    if (isBadAttribute(name, value11)) {
+    const { name, value: value10 } = attributes[index];
+    if (isBadAttribute(name, value10)) {
       element2.removeAttribute(name);
       continue;
     }
-    const actual = getValue2(data2, value11);
+    const actual = getValue3(data2, value10);
     if (name.startsWith("@")) {
       mapEvent(element2, name, actual);
     } else if (name.includes(".") || isReactive(actual)) {
@@ -380,26 +363,59 @@ function mapAttributes(data2, element2) {
     }
   }
 }
-var mapValue = function(element2, name, value11) {
+function mapValue(element2, name, value10) {
   switch (true) {
-    case typeof value11 === "function":
-      mapValue(element2, name, value11());
+    case typeof value10 === "function":
+      mapValue(element2, name, value10());
       return;
     default:
-      setAttribute(element2, name, value11);
+      setAttribute(element2, name, value10);
       break;
   }
-};
+}
 var commentExpression = /^<!--abydon\.(\d+)-->$/;
 
+// src/node/value.ts
+function setReactiveNode(comment, reactive3) {
+  const text = new Text;
+  let nodes;
+  effect(() => {
+    const value10 = reactive3.get();
+    if (isFragment(value10) || isFragmentNode(value10)) {
+      const next = createNodes(value10);
+      if (nodes == null) {
+        if (comment.parentNode != null) {
+          replaceNodes([comment], next);
+        } else if (text.parentNode != null) {
+          replaceNodes([text], next);
+        }
+      } else {
+        replaceNodes(nodes, next);
+      }
+      nodes = next;
+      return;
+    }
+    const isNullable = isNullableOrWhitespace(value10);
+    text.textContent = getString(value10);
+    if (nodes != null) {
+      replaceNodes(nodes, [isNullable ? comment : text]);
+    } else if (isNullable && comment.parentNode == null) {
+      text.replaceWith(comment);
+    } else if (!isNullable && text.parentNode == null) {
+      comment.replaceWith(text);
+    }
+    nodes = undefined;
+  });
+}
+
 // src/node/index.ts
-var mapNode = function(data2, comment) {
+function mapNode(data2, comment) {
   const matches = commentExpression2.exec(comment.textContent ?? "");
-  const value12 = matches == null ? null : data2.values[+matches[1]];
-  if (value12 != null) {
-    mapValue2(comment, value12);
+  const value11 = matches == null ? null : data2.values[+matches[1]];
+  if (value11 != null) {
+    mapValue2(comment, value11);
   }
-};
+}
 function mapNodes(data2, nodes) {
   const { length } = nodes;
   for (let index = 0;index < length; index += 1) {
@@ -416,59 +432,56 @@ function mapNodes(data2, nodes) {
     }
   }
 }
-var mapValue2 = function(comment, value12) {
+function mapValue2(comment, value11) {
   switch (true) {
-    case typeof value12 === "function":
-      mapValue2(comment, value12());
+    case typeof value11 === "function":
+      mapValue2(comment, value11());
       return;
-    case isReactive(value12):
-      setReactiveNode(comment, value12);
+    case isReactive(value11):
+      setReactiveNode(comment, value11);
       break;
     default:
-      comment.replaceWith(...createNodes(value12));
+      comment.replaceWith(...createNodes(value11));
       break;
   }
-};
+}
 var commentExpression2 = /^abydon\.(\d+)$/;
 
 // src/fragment.ts
-function createFragment(strings, expressions) {
-  const data2 = {
-    expressions,
-    strings,
-    nodes: [],
-    values: []
-  };
-  const instance = Object.create({
-    appendTo(element2) {
-      element2.append(...this.get());
-    },
-    get() {
-      if (data2.nodes.length === 0) {
-        const parsed = parse2(data2);
-        const templated = createTemplate(parsed);
-        data2.nodes.splice(0, data2.nodes.length, ...getNodes(templated));
-        mapNodes(data2, data2.nodes);
-      }
-      return [...data2.nodes];
-    },
-    remove() {
-      const { length } = data2.nodes;
-      for (let index = 0;index < length; index += 1) {
-        const node2 = data2.nodes[index];
-        node2.parentNode?.removeChild(node2);
-      }
-      data2.nodes.splice(0, data2.nodes.length);
+class Fragment {
+  data;
+  constructor(strings, expressions) {
+    this.data = {
+      expressions,
+      strings,
+      nodes: [],
+      values: []
+    };
+  }
+  appendTo(element2) {
+    element2.append(...this.get());
+  }
+  get() {
+    if (this.data.nodes.length === 0) {
+      const parsed = parse2(this.data);
+      const templated = createTemplate(parsed);
+      this.data.nodes.splice(0, this.data.nodes.length, ...getNodes(templated));
+      mapNodes(this.data, this.data.nodes);
     }
-  });
-  Object.defineProperty(instance, "$fragment", {
-    value: true
-  });
-  return instance;
+    return [...this.data.nodes];
+  }
+  remove() {
+    const { length } = this.data.nodes;
+    for (let index = 0;index < length; index += 1) {
+      const node2 = this.data.nodes[index];
+      node2.parentNode?.removeChild(node2);
+    }
+    this.data.nodes.splice(0, length);
+  }
 }
 
 // src/html.ts
-var handleExpression = function(data2, prefix, expression) {
+function handleExpression(data2, prefix, expression) {
   if (isNullableOrWhitespace(expression)) {
     return prefix;
   }
@@ -480,22 +493,22 @@ var handleExpression = function(data2, prefix, expression) {
     }
     return `${prefix}${expressions}`;
   }
-  if (typeof expression === "object") {
+  if (typeof expression === "function" || typeof expression === "object") {
     const index = data2.values.push(expression) - 1;
     return `${prefix}<!--abydon.${index}-->`;
   }
   return `${prefix}${expression}`;
-};
+}
 function html2(strings, ...values) {
-  return createFragment(strings, values);
+  return new Fragment(strings, values);
 }
 function parse2(data2) {
   const { length } = data2.strings;
-  let template = "";
+  let template2 = "";
   for (let index = 0;index < length; index += 1) {
-    template += handleExpression(data2, data2.strings[index], data2.expressions[index]);
+    template2 += handleExpression(data2, data2.strings[index], data2.expressions[index]);
   }
-  return template;
+  return template2;
 }
 export {
   html2 as html

package/dist/index.mjs

@@ -0,0 +1,5 @@
+// src/index.ts
+import {html} from "./html";
+export {
+  html
+};