treeloom 0.0.0-stage → 2.1.0

package/dist/diff/appliedSnapshot.js

@@ -0,0 +1,134 @@
+"use strict";
+
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+require("core-js/modules/es.array.includes.js");
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.changesFromApplied = exports.forgetApplied = exports.recordApplied = void 0;
+const si_funciona_1 = __importDefault(require("si-funciona"));
+const createChangeList_1 = __importDefault(require("./createChangeList"));
+/**
+ * Properties the person using the page changes directly (typing, ticking, choosing), so the element is their real current
+ * state, not what was last written. These are compared with the element itself, as before, so an item still puts them
+ * back (a controlled input: the item says '' and what was typed is cleared on the next update).
+ */
+const LIVE_PROPERTIES = ['value', 'checked', 'selected', 'indeterminate'];
+// Kept beside the item, not on it, so it never travels with the item (deflate, JSON) and goes away with the element
+const snapshots = new WeakMap();
+/**
+ * Whether an item's attributes can be compared through a snapshot: its style, when it has one, is an object of
+ * properties. Anything else (a style written as one string) is compared against the element, as before.
+ * @param domItem
+ */
+const canSnapshot = domItem => typeof domItem.attributes.style === 'undefined' || si_funciona_1.default.isObject(domItem.attributes.style);
+/**
+ * The class names in a className string.
+ * @param className
+ */
+const classNames = className => typeof className === 'string' ? className.split(/\s+/).filter(Boolean) : [];
+/**
+ * An item's attributes in the snapshot's form.
+ * @param domItem
+ */
+const describe = domItem => {
+  const snapshot = {
+    attributes: {},
+    classes: [],
+    style: {}
+  };
+  for (const name in domItem.attributes) {
+    const value = domItem.attributes[name];
+    if (name === 'className') {
+      snapshot.classes = classNames(value);
+      continue;
+    }
+    if (name === 'style') {
+      for (const property in value) {
+        snapshot.style[si_funciona_1.default.kabobCase(property)] = value[property];
+      }
+      continue;
+    }
+    snapshot.attributes[si_funciona_1.default.kabobCase(name)] = value;
+  }
+  return snapshot;
+};
+/**
+ * Remember what was just written to the item's element (call it after the element has been updated to match the item).
+ * Does nothing for an item without an element, a text or comment node, or a style that is not an object.
+ * @param domItem
+ */
+const recordApplied = domItem => {
+  if (!domItem.element || domItem.nodeValue !== null || !canSnapshot(domItem)) {
+    return;
+  }
+  snapshots.set(domItem.element, describe(domItem));
+};
+exports.recordApplied = recordApplied;
+/**
+ * Forget what was written to an element, so its next update compares against the element itself again.
+ * @param element
+ */
+const forgetApplied = element => {
+  if (element) {
+    snapshots.delete(element);
+  }
+};
+exports.forgetApplied = forgetApplied;
+/**
+ * The changes that make the item's element match the item, worked out from what was last written to the element rather
+ * than from the element itself: no style or attribute is read back from the DOM, and a value the browser stores in
+ * another form ('#333' as 'rgb(51, 51, 51)', `border` as longhands) is not mistaken for a change. Undefined when there is
+ * no snapshot to compare with (the element was never written by treeloom, or was captured from existing HTML), so the
+ * caller compares against the element instead.
+ * @param domItem
+ * @param propertyName - The name to set a plain attribute by: the element's own property name when it has one
+ * (innerHTML), otherwise the attribute's name (aria-label). Same rule as the element comparison.
+ */
+const changesFromApplied = (domItem, propertyName) => {
+  const previous = domItem.element ? snapshots.get(domItem.element) : undefined;
+  if (!previous || domItem.nodeValue !== null || !canSnapshot(domItem)) {
+    return undefined;
+  }
+  const next = describe(domItem);
+  const changes = (0, createChangeList_1.default)();
+  const element = domItem.element;
+  for (const key in next.attributes) {
+    const live = LIVE_PROPERTIES.includes(key) && key in element;
+    const current = live ? element[key] : previous.attributes[key];
+    const differs = live && typeof current === 'string' ? String(next.attributes[key] ?? '') !== current : next.attributes[key] !== current;
+    if (differs) {
+      changes.added[propertyName(key)] = next.attributes[key];
+    }
+  }
+  previous.classes.forEach((name, index) => {
+    if (!next.classes.includes(name)) {
+      changes.removed[`class.${index}`] = name;
+    }
+  });
+  next.classes.forEach((name, index) => {
+    if (!previous.classes.includes(name)) {
+      changes.added[`class.${index}`] = name;
+    }
+  });
+  for (const property in previous.style) {
+    if (!(property in next.style)) {
+      changes.removed[`style.${property}`] = previous.style[property];
+    }
+  }
+  for (const property in next.style) {
+    // A changed value is simply set again (setProperty replaces it): no remove first, so one write, not two
+    if (next.style[property] !== previous.style[property]) {
+      changes.added[`style.${property}`] = next.style[property];
+    }
+  }
+  return changes;
+};
+exports.changesFromApplied = changesFromApplied;

package/dist/diff/appliedSnapshot.min.js

@@ -0,0 +1 @@
+"use strict";require("core-js/modules/es.array.includes.js");var __importDefault=function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.changesFromApplied=exports.forgetApplied=exports.recordApplied=void 0;const si_funciona_1=__importDefault(require("si-funciona")),createChangeList_1=__importDefault(require("./createChangeList")),LIVE_PROPERTIES=["value","checked","selected","indeterminate"],snapshots=new WeakMap,canSnapshot=e=>void 0===e.attributes.style||si_funciona_1.default.isObject(e.attributes.style),classNames=e=>"string"==typeof e?e.split(/\s+/).filter(Boolean):[],describe=e=>{const s={attributes:{},classes:[],style:{}};for(const t in e.attributes){const a=e.attributes[t];if("className"!==t)if("style"!==t)s.attributes[si_funciona_1.default.kabobCase(t)]=a;else for(const e in a)s.style[si_funciona_1.default.kabobCase(e)]=a[e];else s.classes=classNames(a)}return s},recordApplied=e=>{e.element&&null===e.nodeValue&&canSnapshot(e)&&snapshots.set(e.element,describe(e))};exports.recordApplied=recordApplied;const forgetApplied=e=>{e&&snapshots.delete(e)};exports.forgetApplied=forgetApplied;const changesFromApplied=(e,s)=>{const t=e.element?snapshots.get(e.element):void 0;if(!t||null!==e.nodeValue||!canSnapshot(e))return;const a=describe(e),r=(0,createChangeList_1.default)(),n=e.element;for(const e in a.attributes){const i=LIVE_PROPERTIES.includes(e)&&e in n,o=i?n[e]:t.attributes[e];(i&&"string"==typeof o?String(a.attributes[e]??"")!==o:a.attributes[e]!==o)&&(r.added[s(e)]=a.attributes[e])}t.classes.forEach((e,s)=>{a.classes.includes(e)||(r.removed[`class.${s}`]=e)}),a.classes.forEach((e,s)=>{t.classes.includes(e)||(r.added[`class.${s}`]=e)});for(const e in t.style)e in a.style||(r.removed[`style.${e}`]=t.style[e]);for(const e in a.style)a.style[e]!==t.style[e]&&(r.added[`style.${e}`]=a.style[e]);return r};exports.changesFromApplied=changesFromApplied;

package/dist/diff/createChangeList.d.ts

@@ -0,0 +1,9 @@
+import type { ChangeList } from './types';
+/**
+ * Create the change list template.
+ * @param changeList
+ * @param changeList.removed
+ * @param changeList.added
+ */
+declare const createChangeList: ({ removed, added }?: Partial<Pick<ChangeList, "removed" | "added">>) => ChangeList;
+export default createChangeList;

package/dist/diff/createChangeList.js

@@ -0,0 +1,44 @@
+"use strict";
+
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+require("core-js/modules/es.array.includes.js");
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+const si_funciona_1 = __importDefault(require("si-funciona"));
+/**
+ * Initialize the appendChanges method with the changeList, return the appendChanges method.
+ * @param changeList
+ * @private
+ */
+const appendChangesTo = changeList => (changeType, changes) => {
+  if (!['added', 'removed'].includes(changeType)) {
+    throw Error(`Method appendChanges change type must be 'added' or 'removed'; ${changeType} given.`);
+  }
+  return si_funciona_1.default.mergeObjects(changeList[changeType], changes);
+};
+/**
+ * Create the change list template.
+ * @param changeList
+ * @param changeList.removed
+ * @param changeList.added
+ */
+const createChangeList = ({
+  removed = {},
+  added = {}
+} = {}) => {
+  const changeList = {
+    removed: Object.assign({}, removed),
+    added: Object.assign({}, added)
+  };
+  changeList.appendChanges = appendChangesTo(changeList);
+  return changeList;
+};
+exports.default = createChangeList;

package/dist/diff/createChangeList.min.js

@@ -0,0 +1 @@
+"use strict";require("core-js/modules/es.array.includes.js");var __importDefault=function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0});const si_funciona_1=__importDefault(require("si-funciona")),appendChangesTo=e=>(r,a)=>{if(!["added","removed"].includes(r))throw Error(`Method appendChanges change type must be 'added' or 'removed'; ${r} given.`);return si_funciona_1.default.mergeObjects(e[r],a)},createChangeList=({removed:e={},added:r={}}={})=>{const a={removed:Object.assign({},e),added:Object.assign({},r)};return a.appendChanges=appendChangesTo(a),a};exports.default=createChangeList;

package/dist/diff/domItemChanges.d.ts

@@ -0,0 +1,9 @@
+import type { DomItem } from '../domItem/types';
+import type { ChangeList } from './types';
+/**
+ * Given a domGeneral.DomItem as domItem, this function will return the changes to be applied
+ * to the stored element property.
+ * @param domItem - The DomItem having changes to be applied to its element
+ */
+declare const domItemChanges: (domItem: DomItem) => ChangeList;
+export default domItemChanges;

package/dist/diff/domItemChanges.js

@@ -0,0 +1,167 @@
+"use strict";
+
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+const si_funciona_1 = __importDefault(require("si-funciona"));
+const elementHasAttribute_1 = __importDefault(require("./elementHasAttribute"));
+const createChangeList_1 = __importDefault(require("./createChangeList"));
+const appliedSnapshot_1 = require("./appliedSnapshot");
+/**
+ * Given some config, provide a function to testing attribute and key existence in that config.
+ * @param element
+ */
+const checkAttribute = element => (attr, key) => {
+  if (typeof attr === 'object') {
+    const styles = attr;
+    const elementStyle = () => element.style;
+    const styleDiff = (0, elementHasAttribute_1.default)(element, key, attr);
+    if (Array.isArray(styleDiff) && styleDiff.length === 1 && styleDiff[0].result[0] === 0 && elementStyle()[styleDiff[0].value] === styles[styleDiff[0].value]) {
+      return 0;
+    }
+    // Check new, removed, or changed styles
+    return si_funciona_1.default.filterObject(styleDiff, arrayDiff => arrayDiff.result[0] !== 0 || elementStyle()[arrayDiff.value] !== styles[arrayDiff.value]);
+  }
+  if (key === 'class') {
+    const classDiff = (0, elementHasAttribute_1.default)(element, key, attr);
+    if (Array.isArray(classDiff) && classDiff.length === 1 && classDiff[0].result[0] === 0) {
+      return 0;
+    }
+    return si_funciona_1.default.filterObject(classDiff, arrayDiff => arrayDiff.result[0] !== 0);
+  }
+  return (0, elementHasAttribute_1.default)(element, key, attr);
+};
+/**
+ * Updates all the keys to be kabob-case
+ * @param attributesToSet
+ */
+const kabobCaseAttributes = attributesToSet => si_funciona_1.default.reduceObject(attributesToSet, (attributes, value, name) => {
+  let attrValue = attributesToSet[name] ?? value;
+  if (si_funciona_1.default.isObject(attrValue)) {
+    attrValue = kabobCaseAttributes(attrValue);
+  }
+  const kabobKey = name === 'className' ? 'class' : si_funciona_1.default.kabobCase(name);
+  attributes[kabobKey] = attrValue;
+  return attributes;
+}, {});
+/**
+ * Find the name an attribute was given on the item from its kabob-case name: innerHTML is compared as inner-html, and
+ * camelCase cannot turn that back into innerHTML.
+ * @private
+ */
+const attributeName = (attributes, kabobKey) => Object.keys(attributes).find(name => (name === 'className' ? 'class' : si_funciona_1.default.kabobCase(name)) === kabobKey) ?? si_funciona_1.default.camelCase(kabobKey);
+/**
+ * Given a domGeneral.DomItem as domItem, this function will return the changes to be applied
+ * to the stored element property.
+ * @param domItem - The DomItem having changes to be applied to its element
+ */
+const domItemChanges = domItem => {
+  const changeList = (0, createChangeList_1.default)();
+  if (!domItem.element) {
+    changeList.added.nodeName = domItem.nodeName.toLowerCase();
+  }
+  if (domItem.element && domItem.element.nodeName.toLowerCase() !== domItem.nodeName.toLowerCase()) {
+    // This should trigger new element creation
+    changeList.removed.nodeName = domItem.element.nodeName.toLowerCase();
+    changeList.added.nodeName = domItem.nodeName.toLowerCase();
+  }
+  if (domItem.nodeValue !== null) {
+    if (!si_funciona_1.default.emptyObject(domItem.attributes)) {
+      changeList.added = changeList.appendChanges('added', si_funciona_1.default.dotNotate(domItem.attributes));
+    }
+    if (!domItem.element) {
+      changeList.added.nodeValue = domItem.nodeValue;
+      return changeList;
+    }
+    changeList.removed.nodeValue = domItem.element.nodeValue;
+    if (domItem.element.nodeValue !== domItem.nodeValue) {
+      changeList.added.nodeValue = domItem.nodeValue;
+    }
+    return changeList;
+  }
+  // Compared with what treeloom last wrote to the element when it knows that (see appliedSnapshot): nothing is read
+  // back from the DOM. Not when the node is being replaced (nodeName changed): its new element starts fresh.
+  if (!changeList.added.nodeName) {
+    const fromApplied = (0, appliedSnapshot_1.changesFromApplied)(domItem, kabobKey => {
+      const name = attributeName(domItem.attributes, kabobKey);
+      const element = domItem.element;
+      return element && name in element && name !== 'form' ? name : kabobKey;
+    });
+    if (fromApplied) {
+      return fromApplied;
+    }
+  }
+  const domItemAttributes = kabobCaseAttributes(domItem.attributes);
+  const diffMap = si_funciona_1.default.mapObject(domItemAttributes, (attr, key) => checkAttribute(domItem.element)(attr, key));
+  return si_funciona_1.default.reduceObject(diffMap, (changed, result, key) => {
+    const isArray = Array.isArray(result);
+    if (!isArray && !result) {
+      // Skip if the attribute is not changed (false and not an array)
+      return changed;
+    }
+    if (!isArray && key === 'class') {
+      // Full class name string set
+      changed.added.className = domItem.attributes.className;
+      return changed;
+    }
+    if (!isArray) {
+      // Not an array, simply set the attribute as added
+      const name = attributeName(domItem.attributes, key);
+      // A property of the element (innerHTML) is set by its own name, anything else as an attribute (aria-label)
+      const element = domItem.element;
+      changed.added[element && name in element && name !== 'form' ? name : key] = domItem.attributes[name];
+      return changed;
+    }
+    if (key !== 'class' && key !== 'style') {
+      // Is an array, but not class or style; we don't know what this is, so we skip it.
+      return changed;
+    }
+    if (key === 'class') {
+      changed.removed = result.reduce((removed, results) => {
+        if (results.result[0] === -1) {
+          removed[`class.${results.keys[1]}`] = results.value;
+        }
+        return removed;
+      }, changed.removed);
+      changed.added = result.reduce((added, results) => {
+        if (results.result[0] === 1) {
+          added[`class.${results.keys[0]}`] = results.value;
+        }
+        return added;
+      }, changed.added);
+      return changed;
+    }
+    const elementStyle = () => domItem.element.style;
+    changed.removed = result.reduce((removed, results) => {
+      if (!domItem.element) {
+        return removed;
+      }
+      if (results.result[0] === -1) {
+        removed[`style.${results.value}`] = elementStyle()[results.value];
+      }
+      if (results.result[0] === 0 && elementStyle()[results.value] !== domItemAttributes.style[results.value]) {
+        removed[`style.${results.value}`] = elementStyle()[results.value];
+      }
+      return removed;
+    }, changed.removed);
+    changed.added = result.reduce((added, results) => {
+      if (results.result[0] === 1) {
+        added[`style.${results.value}`] = domItemAttributes.style[results.value];
+      }
+      if (results.result[0] === 0 && elementStyle()[results.value] !== domItemAttributes.style[results.value]) {
+        added[`style.${results.value}`] = domItemAttributes.style[results.value];
+      }
+      return added;
+    }, changed.added);
+    return changed;
+  }, changeList);
+};
+exports.default = domItemChanges;

package/dist/diff/domItemChanges.min.js

@@ -0,0 +1 @@
+"use strict";var __importDefault=function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0});const si_funciona_1=__importDefault(require("si-funciona")),elementHasAttribute_1=__importDefault(require("./elementHasAttribute")),createChangeList_1=__importDefault(require("./createChangeList")),appliedSnapshot_1=require("./appliedSnapshot"),checkAttribute=e=>(t,a)=>{if("object"==typeof t){const u=t,s=()=>e.style,r=(0,elementHasAttribute_1.default)(e,a,t);return Array.isArray(r)&&1===r.length&&0===r[0].result[0]&&s()[r[0].value]===u[r[0].value]?0:si_funciona_1.default.filterObject(r,e=>0!==e.result[0]||s()[e.value]!==u[e.value])}if("class"===a){const u=(0,elementHasAttribute_1.default)(e,a,t);return Array.isArray(u)&&1===u.length&&0===u[0].result[0]?0:si_funciona_1.default.filterObject(u,e=>0!==e.result[0])}return(0,elementHasAttribute_1.default)(e,a,t)},kabobCaseAttributes=e=>si_funciona_1.default.reduceObject(e,(t,a,u)=>{let s=e[u]??a;si_funciona_1.default.isObject(s)&&(s=kabobCaseAttributes(s));return t["className"===u?"class":si_funciona_1.default.kabobCase(u)]=s,t},{}),attributeName=(e,t)=>Object.keys(e).find(e=>("className"===e?"class":si_funciona_1.default.kabobCase(e))===t)??si_funciona_1.default.camelCase(t),domItemChanges=e=>{const t=(0,createChangeList_1.default)();if(e.element||(t.added.nodeName=e.nodeName.toLowerCase()),e.element&&e.element.nodeName.toLowerCase()!==e.nodeName.toLowerCase()&&(t.removed.nodeName=e.element.nodeName.toLowerCase(),t.added.nodeName=e.nodeName.toLowerCase()),null!==e.nodeValue)return si_funciona_1.default.emptyObject(e.attributes)||(t.added=t.appendChanges("added",si_funciona_1.default.dotNotate(e.attributes))),e.element?(t.removed.nodeValue=e.element.nodeValue,e.element.nodeValue!==e.nodeValue&&(t.added.nodeValue=e.nodeValue),t):(t.added.nodeValue=e.nodeValue,t);if(!t.added.nodeName){const t=(0,appliedSnapshot_1.changesFromApplied)(e,t=>{const a=attributeName(e.attributes,t),u=e.element;return u&&a in u&&"form"!==a?a:t});if(t)return t}const a=kabobCaseAttributes(e.attributes),u=si_funciona_1.default.mapObject(a,(t,a)=>checkAttribute(e.element)(t,a));return si_funciona_1.default.reduceObject(u,(t,u,s)=>{const r=Array.isArray(u);if(!r&&!u)return t;if(!r&&"class"===s)return t.added.className=e.attributes.className,t;if(!r){const a=attributeName(e.attributes,s),u=e.element;return t.added[u&&a in u&&"form"!==a?a:s]=e.attributes[a],t}if("class"!==s&&"style"!==s)return t;if("class"===s)return t.removed=u.reduce((e,t)=>(-1===t.result[0]&&(e[`class.${t.keys[1]}`]=t.value),e),t.removed),t.added=u.reduce((e,t)=>(1===t.result[0]&&(e[`class.${t.keys[0]}`]=t.value),e),t.added),t;const l=()=>e.element.style;return t.removed=u.reduce((t,u)=>e.element?(-1===u.result[0]&&(t[`style.${u.value}`]=l()[u.value]),0===u.result[0]&&l()[u.value]!==a.style[u.value]&&(t[`style.${u.value}`]=l()[u.value]),t):t,t.removed),t.added=u.reduce((e,t)=>(1===t.result[0]&&(e[`style.${t.value}`]=a.style[t.value]),0===t.result[0]&&l()[t.value]!==a.style[t.value]&&(e[`style.${t.value}`]=a.style[t.value]),e),t.added),t},t)};exports.default=domItemChanges;

package/dist/diff/domItemHasAttribute.d.ts

@@ -0,0 +1,11 @@
+import type { DomItem } from '../domItem/types';
+import type { AttributeComparison } from './types';
+/**
+ * Check if the provided DomItem has the provided attributes.
+ * Returns a boolean, or an array of 1 / 0 / -1 based on the comparison status.
+ * @param domItem - Receive the DomItem to be assessed
+ * @param key - The attribute name to search for
+ * @param attr - The expected value of the attribute to compare against
+ */
+declare const domItemHasAttribute: (domItem: DomItem, key: string, attr: unknown) => AttributeComparison;
+export default domItemHasAttribute;

package/dist/diff/domItemHasAttribute.js

@@ -0,0 +1,63 @@
+"use strict";
+
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+const si_funciona_1 = __importDefault(require("si-funciona"));
+const getAssignedStyles_1 = __importDefault(require("./getAssignedStyles"));
+/**
+ * For attributes which are objects or multi-part strings -1 = remove attribute, 0 = no change, 1 = add attribute
+ * @param domItem
+ * @param attr
+ */
+const checkStyles = (domItem, attr = {}) => {
+  const assignedStyles = domItem.attributes.style ?? {};
+  if (si_funciona_1.default.emptyObject(assignedStyles)) {
+    return 1;
+  }
+  return si_funciona_1.default.compareArrays(Object.keys((0, getAssignedStyles_1.default)(attr)).map(si_funciona_1.default.camelCase), Object.keys(assignedStyles));
+};
+/**
+ * For attributes which are objects or multipart strings -1 = remove attribute, 0 = no change, 1 = add attribute
+ * @param domItem
+ * @param attr
+ */
+const checkClasses = (domItem, attr = '') => {
+  const assignedClasses = domItem.attributes.className ?? '';
+  if (!assignedClasses.length) {
+    return 1;
+  }
+  return si_funciona_1.default.compareArrays(attr.split(' '), assignedClasses.split(' '));
+};
+/**
+ * Check if the provided DomItem has the provided attributes.
+ * Returns a boolean, or an array of 1 / 0 / -1 based on the comparison status.
+ * @param domItem - Receive the DomItem to be assessed
+ * @param key - The attribute name to search for
+ * @param attr - The expected value of the attribute to compare against
+ */
+const domItemHasAttribute = (domItem, key, attr) => {
+  if (key === 'style') {
+    return checkStyles(domItem, attr);
+  }
+  if (key === 'className') {
+    return checkClasses(domItem, attr);
+  }
+  const camelKey = si_funciona_1.default.camelCase(key);
+  if (typeof domItem.attributes[camelKey] === 'undefined') {
+    return 1;
+  }
+  if (domItem.attributes[camelKey] === attr) {
+    return 0;
+  }
+  return 1;
+};
+exports.default = domItemHasAttribute;

package/dist/diff/domItemHasAttribute.min.js

@@ -0,0 +1 @@
+"use strict";var __importDefault=function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0});const si_funciona_1=__importDefault(require("si-funciona")),getAssignedStyles_1=__importDefault(require("./getAssignedStyles")),checkStyles=(e,t={})=>{const s=e.attributes.style??{};return si_funciona_1.default.emptyObject(s)?1:si_funciona_1.default.compareArrays(Object.keys((0,getAssignedStyles_1.default)(t)).map(si_funciona_1.default.camelCase),Object.keys(s))},checkClasses=(e,t="")=>{const s=e.attributes.className??"";return s.length?si_funciona_1.default.compareArrays(t.split(" "),s.split(" ")):1},domItemHasAttribute=(e,t,s)=>{if("style"===t)return checkStyles(e,s);if("className"===t)return checkClasses(e,s);const a=si_funciona_1.default.camelCase(t);return void 0===e.attributes[a]?1:e.attributes[a]===s?0:1};exports.default=domItemHasAttribute;

package/dist/diff/elementChanges.d.ts

@@ -0,0 +1,10 @@
+import type { DomItem } from '../domItem/types';
+import type { ChangeList } from './types';
+/**
+ * Given a domGeneral.DomItem as config, this function will return the changes from the element
+ * to be applied to the domItem.
+ * @param domItem - The DomItem having the element which changes to be applied to the config
+ * element
+ */
+declare const elementChanges: (domItem: DomItem) => ChangeList;
+export default elementChanges;

package/dist/diff/elementChanges.js

@@ -0,0 +1,151 @@
+"use strict";
+
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+const si_funciona_1 = __importDefault(require("si-funciona"));
+const domItemHasAttribute_1 = __importDefault(require("./domItemHasAttribute"));
+const createChangeList_1 = __importDefault(require("./createChangeList"));
+/**
+ * Given some config, provide a function to testing attribute and key existence in that config.
+ * @param domItem
+ */
+const checkAttribute = domItem => (attr, key) => {
+  if (key === 'className') {
+    const diff = (0, domItemHasAttribute_1.default)(domItem, key, attr);
+    if (Array.isArray(diff) && diff.length === 1 && diff[0].result[0] === 0) {
+      return 0;
+    }
+    return si_funciona_1.default.filterObject(diff, arrayDiff => arrayDiff.result[0] !== 0);
+  }
+  if (key === 'style') {
+    const diff = (0, domItemHasAttribute_1.default)(domItem, key, attr);
+    const styles = attr;
+    const itemStyle = () => domItem.attributes.style;
+    if (Array.isArray(diff) && diff.length === 1 && diff[0].result[0] === 0 && itemStyle()[diff[0].value] === styles[diff[0].value]) {
+      return 0;
+    }
+    return si_funciona_1.default.filterObject(diff, arrayDiff => arrayDiff.result[0] !== 0 || itemStyle()[arrayDiff.value] !== styles[arrayDiff.value]);
+  }
+  return (0, domItemHasAttribute_1.default)(domItem, key, attr);
+};
+/**
+ * Updates all the keys to be camelCase
+ * @param domItem
+ */
+const camelCaseAttributes = domItem => domItem.element ? si_funciona_1.default.reduceObject(domItem.element.attributes, (attributes, attr) => {
+  if (!attr.name) {
+    return attributes;
+  }
+  const camelKey = attr.name === 'class' ? 'className' : si_funciona_1.default.camelCase(attr.name);
+  const attributeValue = domItem.element[attr.name] ?? attr.value;
+  if (typeof attributeValue === 'undefined') {
+    return attributes;
+  }
+  attributes[camelKey] = attributeValue;
+  return attributes;
+}, {}) : {};
+/**
+ * Given a domGeneral.DomItem as config, this function will return the changes from the element
+ * to be applied to the domItem.
+ * @param domItem - The DomItem having the element which changes to be applied to the config
+ * element
+ */
+const elementChanges = domItem => {
+  const changeList = (0, createChangeList_1.default)();
+  if (!domItem.element) {
+    changeList.removed.nodeName = domItem.nodeName.toLowerCase();
+  }
+  if (domItem.element && domItem.element.nodeName.toLowerCase() !== domItem.nodeName.toLowerCase()) {
+    changeList.removed.nodeName = domItem.nodeName.toLowerCase();
+    changeList.added.nodeName = domItem.element.nodeName.toLowerCase();
+  }
+  if (!domItem.element && domItem.nodeValue !== null) {
+    changeList.removed.nodeValue = domItem.nodeValue;
+    if (!si_funciona_1.default.emptyObject(domItem.attributes)) {
+      changeList.removed = changeList.appendChanges('removed', si_funciona_1.default.dotNotate({
+        attributes: domItem.attributes
+      }));
+    }
+    return changeList;
+  }
+  if (domItem.element && !(domItem.element instanceof Element)) {
+    if (domItem.element.nodeValue !== domItem.nodeValue) {
+      changeList.added.nodeValue = domItem.element.nodeValue;
+    }
+    if (!si_funciona_1.default.emptyObject(domItem.attributes)) {
+      changeList.removed = changeList.appendChanges('removed', si_funciona_1.default.dotNotate({
+        attributes: domItem.attributes
+      }));
+    }
+    return changeList;
+  }
+  if (!(domItem.element && domItem.element.hasAttributes()) && !si_funciona_1.default.emptyObject(domItem.attributes)) {
+    changeList.removed = changeList.appendChanges('removed', si_funciona_1.default.dotNotate({
+      attributes: domItem.attributes
+    }));
+    return changeList;
+  }
+  const elementAttributes = camelCaseAttributes(domItem);
+  const diffMap = si_funciona_1.default.mapObject(elementAttributes, (attr, key) => checkAttribute(domItem)(attr, key));
+  return si_funciona_1.default.reduceObject(diffMap, (changed, result, key) => {
+    const isArray = Array.isArray(result);
+    if (!isArray && !result) {
+      // Skip if the attribute is not changed (false and not an array)
+      return changed;
+    }
+    if (!isArray) {
+      // Not an array, simply set the attribute as added
+      changed.added[`attributes.${key}`] = domItem.element[key] ?? domItem.element.getAttribute(si_funciona_1.default.kabobCase(key));
+      return changed;
+    }
+    if (key !== 'className' && key !== 'style') {
+      // Is an array, but not class or style; we don't know what this is, so we skip it.
+      return changed;
+    }
+    if (key === 'className') {
+      changed.removed = result.reduce((removed, results) => {
+        if (results.result[0] === -1) {
+          removed[`attributes.className.${results.keys[1]}`] = results.value;
+        }
+        return removed;
+      }, changed.removed);
+      changed.added = result.reduce((added, results) => {
+        if (results.result[0] === 1) {
+          added[`attributes.className.${results.keys[0]}`] = results.value;
+        }
+        return added;
+      }, changed.added);
+      return changed;
+    }
+    const itemStyle = () => domItem.attributes.style;
+    changed.removed = result.reduce((removed, results) => {
+      if (results.result[0] === -1) {
+        removed[`attributes.style.${results.value}`] = itemStyle()[results.value];
+      }
+      if (results.result[0] === 0 && itemStyle()[results.value] !== elementAttributes.style[results.value]) {
+        removed[`attributes.style.${results.value}`] = itemStyle()[results.value];
+      }
+      return removed;
+    }, changed.removed);
+    changed.added = result.reduce((added, results) => {
+      if (results.result[0] === 1) {
+        added[`attributes.style.${results.value}`] = elementAttributes.style[results.value];
+      }
+      if (results.result[0] === 0 && itemStyle()[results.value] !== elementAttributes.style[results.value]) {
+        added[`attributes.style.${results.value}`] = elementAttributes.style[results.value];
+      }
+      return added;
+    }, changed.added);
+    return changed;
+  }, changeList);
+};
+exports.default = elementChanges;

package/dist/diff/elementChanges.min.js

@@ -0,0 +1 @@
+"use strict";var __importDefault=function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0});const si_funciona_1=__importDefault(require("si-funciona")),domItemHasAttribute_1=__importDefault(require("./domItemHasAttribute")),createChangeList_1=__importDefault(require("./createChangeList")),checkAttribute=e=>(t,a)=>{if("className"===a){const u=(0,domItemHasAttribute_1.default)(e,a,t);return Array.isArray(u)&&1===u.length&&0===u[0].result[0]?0:si_funciona_1.default.filterObject(u,e=>0!==e.result[0])}if("style"===a){const u=(0,domItemHasAttribute_1.default)(e,a,t),r=t,s=()=>e.attributes.style;return Array.isArray(u)&&1===u.length&&0===u[0].result[0]&&s()[u[0].value]===r[u[0].value]?0:si_funciona_1.default.filterObject(u,e=>0!==e.result[0]||s()[e.value]!==r[e.value])}return(0,domItemHasAttribute_1.default)(e,a,t)},camelCaseAttributes=e=>e.element?si_funciona_1.default.reduceObject(e.element.attributes,(t,a)=>{if(!a.name)return t;const u="class"===a.name?"className":si_funciona_1.default.camelCase(a.name),r=e.element[a.name]??a.value;return void 0===r||(t[u]=r),t},{}):{},elementChanges=e=>{const t=(0,createChangeList_1.default)();if(e.element||(t.removed.nodeName=e.nodeName.toLowerCase()),e.element&&e.element.nodeName.toLowerCase()!==e.nodeName.toLowerCase()&&(t.removed.nodeName=e.nodeName.toLowerCase(),t.added.nodeName=e.element.nodeName.toLowerCase()),!e.element&&null!==e.nodeValue)return t.removed.nodeValue=e.nodeValue,si_funciona_1.default.emptyObject(e.attributes)||(t.removed=t.appendChanges("removed",si_funciona_1.default.dotNotate({attributes:e.attributes}))),t;if(e.element&&!(e.element instanceof Element))return e.element.nodeValue!==e.nodeValue&&(t.added.nodeValue=e.element.nodeValue),si_funciona_1.default.emptyObject(e.attributes)||(t.removed=t.appendChanges("removed",si_funciona_1.default.dotNotate({attributes:e.attributes}))),t;if(!(e.element&&e.element.hasAttributes()||si_funciona_1.default.emptyObject(e.attributes)))return t.removed=t.appendChanges("removed",si_funciona_1.default.dotNotate({attributes:e.attributes})),t;const a=camelCaseAttributes(e),u=si_funciona_1.default.mapObject(a,(t,a)=>checkAttribute(e)(t,a));return si_funciona_1.default.reduceObject(u,(t,u,r)=>{const s=Array.isArray(u);if(!s&&!u)return t;if(!s)return t.added[`attributes.${r}`]=e.element[r]??e.element.getAttribute(si_funciona_1.default.kabobCase(r)),t;if("className"!==r&&"style"!==r)return t;if("className"===r)return t.removed=u.reduce((e,t)=>(-1===t.result[0]&&(e[`attributes.className.${t.keys[1]}`]=t.value),e),t.removed),t.added=u.reduce((e,t)=>(1===t.result[0]&&(e[`attributes.className.${t.keys[0]}`]=t.value),e),t.added),t;const n=()=>e.attributes.style;return t.removed=u.reduce((e,t)=>(-1===t.result[0]&&(e[`attributes.style.${t.value}`]=n()[t.value]),0===t.result[0]&&n()[t.value]!==a.style[t.value]&&(e[`attributes.style.${t.value}`]=n()[t.value]),e),t.removed),t.added=u.reduce((e,t)=>(1===t.result[0]&&(e[`attributes.style.${t.value}`]=a.style[t.value]),0===t.result[0]&&n()[t.value]!==a.style[t.value]&&(e[`attributes.style.${t.value}`]=a.style[t.value]),e),t.added),t},t)};exports.default=elementChanges;

package/dist/diff/elementHasAttribute.d.ts

@@ -0,0 +1,10 @@
+import type { AttributeComparison } from './types';
+/**
+ * Check if the provided Element has the provided attributes.
+ * Returns a boolean, or an array of 1 / 0 / -1 based on the comparison status.
+ * @param element - Receive the element to be assessed
+ * @param key - The attribute name to search for
+ * @param attr - The expected value of the attribute to compare against
+ */
+declare const elementHasAttribute: (element: HTMLElement | null | undefined, key: string, attr: unknown) => AttributeComparison;
+export default elementHasAttribute;