native-document 1.0.164 → 1.0.166

package/src/core/data/observable-helpers/observable.is-to.js

@@ -1,4 +1,4 @@
-import ObservableItem from "../ObservableItem";
+import ObservableItem from '../ObservableItem';
 
 const $computed = (fn, dependencies) => ObservableItem.computed(fn, dependencies);
 const $checker = (obs, fn) => obs.transform(fn);
@@ -7,6 +7,17 @@ const $checker = (obs, fn) => obs.transform(fn);
 // is... -> ObservableChecker<boolean>
 //
 
+/**
+ * Returns a derived observable that emits true when the value strictly equals the given value.
+ * Supports reactive comparison when an ObservableItem is passed.
+ *
+ * @param {*|ObservableItem} value - Static value or observable to compare against
+ * @returns {ObservableChecker<boolean>}
+ * @example
+ * const age = Observable(25);
+ * age.isEqualTo(25).val(); // true
+ * age.isEqualTo(Observable(25)).val(); // true
+ */
 ObservableItem.prototype.isEqualTo = function (value) {
     if (value?.__$Observable) {
         return $computed((a, b) => a === b, [this, value]);
@@ -14,6 +25,12 @@ ObservableItem.prototype.isEqualTo = function (value) {
     return $checker(this, x => x === value);
 };
 
+/**
+ * Returns a derived observable that emits true when the value does not strictly equal the given value.
+ *
+ * @param {*|ObservableItem} value - Static value or observable to compare against
+ * @returns {ObservableChecker<boolean>}
+ */
 ObservableItem.prototype.isNotEqualTo = function (value) {
     if (value?.__$Observable) {
         return $computed((a, b) => a !== b, [this, value]);
@@ -21,6 +38,12 @@ ObservableItem.prototype.isNotEqualTo = function (value) {
     return $checker(this, x => x !== value);
 };
 
+/**
+ * Returns a derived observable that emits true when the value is greater than the given value.
+ *
+ * @param {number|ObservableItem<number>} value - Threshold value or observable
+ * @returns {ObservableChecker<boolean>}
+ */
 ObservableItem.prototype.isGreaterThan = function (value) {
     if (value?.__$Observable) {
         return $computed((a, b) => a > b, [this, value]);
@@ -28,6 +51,12 @@ ObservableItem.prototype.isGreaterThan = function (value) {
     return $checker(this, x => x > value);
 };
 
+/**
+ * Returns a derived observable that emits true when the value is greater than or equal to the given value.
+ *
+ * @param {number|ObservableItem<number>} value - Threshold value or observable
+ * @returns {ObservableChecker<boolean>}
+ */
 ObservableItem.prototype.isGreaterThanOrEqualTo = function (value) {
     if (value?.__$Observable) {
         return $computed((a, b) => a >= b, [this, value]);
@@ -35,6 +64,12 @@ ObservableItem.prototype.isGreaterThanOrEqualTo = function (value) {
     return $checker(this, x => x >= value);
 };
 
+/**
+ * Returns a derived observable that emits true when the value is less than the given value.
+ *
+ * @param {number|ObservableItem<number>} value - Threshold value or observable
+ * @returns {ObservableChecker<boolean>}
+ */
 ObservableItem.prototype.isLessThan = function (value) {
     if (value?.__$Observable) {
         return $computed((a, b) => a < b, [this, value]);
@@ -42,6 +77,12 @@ ObservableItem.prototype.isLessThan = function (value) {
     return $checker(this, x => x < value);
 };
 
+/**
+ * Returns a derived observable that emits true when the value is less than or equal to the given value.
+ *
+ * @param {number|ObservableItem<number>} value - Threshold value or observable
+ * @returns {ObservableChecker<boolean>}
+ */
 ObservableItem.prototype.isLessThanOrEqualTo = function (value) {
     if (value?.__$Observable) {
         return $computed((a, b) => a <= b, [this, value]);
@@ -49,6 +90,18 @@ ObservableItem.prototype.isLessThanOrEqualTo = function (value) {
     return $checker(this, x => x <= value);
 };
 
+/**
+ * Returns a derived observable that emits true when the value is between min and max (inclusive).
+ * All combinations of static and observable min/max are supported.
+ *
+ * @param {number|ObservableItem<number>} min - Lower bound (inclusive)
+ * @param {number|ObservableItem<number>} max - Upper bound (inclusive)
+ * @returns {ObservableChecker<boolean>}
+ * @example
+ * const age = Observable(25);
+ * age.isBetween(18, 65).val(); // true
+ * age.isBetween(Observable(18), Observable(65)).val(); // true
+ */
 ObservableItem.prototype.isBetween = function (min, max) {
     if (min.__$Observable && max.__$Observable) {
         return $computed((x, a, b) => x >= a && x <= b, [this, min, max]);
@@ -62,18 +115,39 @@ ObservableItem.prototype.isBetween = function (min, max) {
     return $checker(this, x => x >= min && x <= max);
 };
 
+/**
+ * Returns a derived observable that emits true when the value is null or undefined.
+ *
+ * @returns {ObservableChecker<boolean>}
+ */
 ObservableItem.prototype.isNull = function () {
     return $checker(this, x => x == null);
 };
 
+/**
+ * Returns a derived observable that emits true when the value is truthy.
+ *
+ * @returns {ObservableChecker<boolean>}
+ */
 ObservableItem.prototype.isTruthy = function () {
     return $checker(this, x => !!x);
 };
 
+/**
+ * Returns a derived observable that emits true when the value is falsy.
+ *
+ * @returns {ObservableChecker<boolean>}
+ */
 ObservableItem.prototype.isFalsy = function () {
     return $checker(this, x => !x);
 };
 
+/**
+ * Returns a derived observable that emits true when the string value starts with the given string.
+ *
+ * @param {string|ObservableItem<string>} str - Prefix to check for
+ * @returns {ObservableChecker<boolean>}
+ */
 ObservableItem.prototype.isStartingWith = function (str) {
     if (str?.__$Observable) {
         return $computed((a, b) => String(a).startsWith(b), [this, str]);
@@ -81,6 +155,12 @@ ObservableItem.prototype.isStartingWith = function (str) {
     return $checker(this, x => String(x).startsWith(str));
 };
 
+/**
+ * Returns a derived observable that emits true when the string value ends with the given string.
+ *
+ * @param {string|ObservableItem<string>} str - Suffix to check for
+ * @returns {ObservableChecker<boolean>}
+ */
 ObservableItem.prototype.isEndingWith = function (str) {
     if (str?.__$Observable) {
         return $computed((a, b) => String(a).endsWith(b), [this, str]);
@@ -88,6 +168,12 @@ ObservableItem.prototype.isEndingWith = function (str) {
     return $checker(this, x => String(x).endsWith(str));
 };
 
+/**
+ * Returns a derived observable that emits true when the string value matches the given regex.
+ *
+ * @param {RegExp|ObservableItem<RegExp>} regex - Pattern to test against
+ * @returns {ObservableChecker<boolean>}
+ */
 ObservableItem.prototype.isMatchingPattern = function (regex) {
     if (regex?.__$Observable) {
         return $computed((a, b) => new RegExp(b).test(String(a)), [this, regex]);
@@ -95,14 +181,36 @@ ObservableItem.prototype.isMatchingPattern = function (regex) {
     return $checker(this, x => regex.test(String(x)));
 };
 
+/**
+ * Returns a derived observable that emits true when the value is empty.
+ * Empty means: null, undefined, empty string, or empty array.
+ *
+ * @returns {ObservableChecker<boolean>}
+ */
 ObservableItem.prototype.isEmpty = function () {
     return $checker(this, x => x == null || x === '' || (Array.isArray(x) && x.length === 0));
 };
 
+/**
+ * Returns a derived observable that emits true when the value is not empty.
+ * Not empty means: not null, not undefined, not empty string, not empty array.
+ *
+ * @returns {ObservableChecker<boolean>}
+ */
 ObservableItem.prototype.isNotEmpty = function () {
     return $checker(this, x => x != null && x !== '' && !(Array.isArray(x) && x.length === 0));
 };
 
+/**
+ * Returns a derived observable that emits true when the value includes the given value.
+ * Works for both arrays (includes check) and strings (substring check).
+ *
+ * @param {*|ObservableItem} value - Value to search for
+ * @returns {ObservableChecker<boolean>}
+ * @example
+ * Observable([1, 2, 3]).isIncludes(2).val(); // true
+ * Observable('hello world').isIncludes('world').val(); // true
+ */
 ObservableItem.prototype.isIncludes = function (value) {
     if (value?.__$Observable) {
         return $computed((a, b) => {
@@ -116,6 +224,16 @@ ObservableItem.prototype.isIncludes = function (value) {
     });
 };
 
+/**
+ * Returns a derived observable that emits true when the value is included in the given array.
+ * Alias: isOneOf
+ *
+ * @param {Array|ObservableItem<Array>} array - Array to check membership in
+ * @returns {ObservableChecker<boolean>}
+ * @example
+ * const role = Observable('admin');
+ * role.isIncludedIn(['admin', 'editor']).val(); // true
+ */
 ObservableItem.prototype.isIncludedIn = function (array) {
     if (array?.__$Observable) {
         return $computed((a, b) => b.includes(a), [this, array]);
@@ -125,6 +243,15 @@ ObservableItem.prototype.isIncludedIn = function (array) {
 
 ObservableItem.prototype.isOneOf = ObservableItem.prototype.isIncludedIn;
 
+/**
+ * Returns a derived observable that emits true when the given key exists in the value object.
+ *
+ * @param {string|ObservableItem<string>} key - Property key to check for
+ * @returns {ObservableChecker<boolean>}
+ * @example
+ * const user = Observable({ name: 'John' });
+ * user.isHaving('name').val(); // true
+ */
 ObservableItem.prototype.isHaving = function (key) {
     if (key?.__$Observable) {
         return $computed((a, b) => b in Object(a), [this, key]);
@@ -136,28 +263,68 @@ ObservableItem.prototype.isHaving = function (key) {
 // to... -> ObservableChecker<any>
 //
 
+/**
+ * Returns a derived observable that emits the string value converted to uppercase.
+ *
+ * @returns {ObservableChecker<string>}
+ */
 ObservableItem.prototype.toUpperCase = function () {
     return $checker(this, x => String(x).toUpperCase());
 };
 
+/**
+ * Returns a derived observable that emits the string value converted to lowercase.
+ *
+ * @returns {ObservableChecker<string>}
+ */
 ObservableItem.prototype.toLowerCase = function () {
     return $checker(this, x => String(x).toLowerCase());
 };
 
+/**
+ * Returns a derived observable that emits the string value trimmed of whitespace.
+ *
+ * @returns {ObservableChecker<string>}
+ */
 ObservableItem.prototype.toTrimmed = function () {
     return $checker(this, x => String(x).trim());
 };
 
+/**
+ * Returns a derived observable that emits the value coerced to boolean.
+ *
+ * @returns {ObservableChecker<boolean>}
+ */
 ObservableItem.prototype.toBoolean = function () {
     return $checker(this, x => !!x);
 };
 
+/**
+ * Returns a derived observable that emits a string with the placeholder replaced by the current value.
+ * Alias: toFormatted
+ *
+ * @param {string} template - Template string containing the placeholder
+ * @param {string} [placeholder='${v}'] - Placeholder string to replace with the value
+ * @returns {ObservableChecker<string>}
+ * @example
+ * const count = Observable(5);
+ * count.toLiteral('You have ${v} items').val(); // 'You have 5 items'
+ */
 ObservableItem.prototype.toLiteral = function (template, placeholder = '${v}') {
     return $checker(this, x => template.replace(placeholder, x));
 };
 
 ObservableItem.prototype.toFormatted = ObservableItem.prototype.toLiteral;
 
+/**
+ * Returns a derived observable that emits a nested property value resolved via dot notation.
+ *
+ * @param {string} key - Dot-notation path to the property (e.g. 'user.address.city')
+ * @returns {ObservableChecker<*>}
+ * @example
+ * const state = Observable({ user: { name: 'John' } });
+ * state.toProperty('user.name').val(); // 'John'
+ */
 ObservableItem.prototype.toProperty = function (key) {
     const keys = key.split('.');
     return $checker(this, x => {
@@ -170,10 +337,27 @@ ObservableItem.prototype.toProperty = function (key) {
     });
 };
 
+/**
+ * Returns a derived observable that emits the length of the current value.
+ * Returns 0 if the value is null or undefined.
+ *
+ * @returns {ObservableChecker<number>}
+ */
 ObservableItem.prototype.toLength = function () {
     return $checker(this, x => (x == null ? 0 : x.length));
 };
 
+/**
+ * Returns a derived observable that emits the value clamped between min and max.
+ * All combinations of static and observable min/max are supported.
+ *
+ * @param {number|ObservableItem<number>} min - Minimum bound
+ * @param {number|ObservableItem<number>} max - Maximum bound
+ * @returns {ObservableChecker<number>}
+ * @example
+ * const volume = Observable(150);
+ * volume.toClamped(0, 100).val(); // 100
+ */
 ObservableItem.prototype.toClamped = function (min, max) {
     if (min.__$Observable && max.__$Observable) {
         return $computed((x, a, b) => Math.min(Math.max(x, a), b), [this, min, max]);
@@ -187,6 +371,17 @@ ObservableItem.prototype.toClamped = function (min, max) {
     return $checker(this, x => Math.min(Math.max(x, min), max));
 };
 
+/**
+ * Returns a derived observable that emits the value expressed as a percentage of total.
+ * Returns 0 if total is 0.
+ *
+ * @param {number|ObservableItem<number>} total - The total value representing 100%
+ * @returns {ObservableChecker<number>}
+ * @example
+ * const score = Observable(75);
+ * score.toPercent(100).val(); // 75
+ * score.toPercent(200).val(); // 37.5
+ */
 ObservableItem.prototype.toPercent = function (total) {
     if (total?.__$Observable) {
         return $computed((a, b) => (b === 0 ? 0 : (a / b) * 100), [this, total]);

package/src/core/data/observable-helpers/observable.prototypes.js

@@ -10,11 +10,11 @@
  * isLoading.subscribe(active => console.log('Loading:', active));
  * status.set('loading'); // Logs: "Loading: true"
  */
-import {ObservableWhen} from "../ObservableWhen";
-import ObservableItem from "../ObservableItem";
-import ObservableChecker from "../ObservableChecker";
-import {Formatters} from "../../utils/formatters";
-import NativeDocumentError from "../../errors/NativeDocumentError";
+import {ObservableWhen} from '../ObservableWhen';
+import ObservableItem from '../ObservableItem';
+import ObservableChecker from '../ObservableChecker';
+import {Formatters} from '../../utils/formatters';
+import NativeDocumentError from '../../errors/NativeDocumentError';
 
 ObservableItem.prototype.when = function(value) {
     return new ObservableWhen(this, value);
@@ -28,13 +28,38 @@ ObservableItem.prototype.when = function(value) {
  * @returns {ObservableChecker}
  */
 ObservableItem.prototype.check = function(callback) {
-    return new ObservableChecker(this, callback)
+    return new ObservableChecker(this, callback);
 };
 
 ObservableItem.prototype.transform = ObservableItem.prototype.check;
+
+/**
+ * Returns a derived observable that emits the value of a nested property.
+ * Alias for .check(value => value[property]).
+ *
+ * @param {string} property - Property name to extract
+ * @returns {ObservableChecker<*>}
+ * @example
+ * const user = Observable({ name: 'John', age: 25 });
+ * user.pluck('name').val(); // 'John'
+ */
 ObservableItem.prototype.pluck = function(property) {
     return new ObservableChecker(this, (value) => value[property]);
 };
+
+/**
+ * Creates a derived observable using a callback or checks equality with a static value.
+ * - If callback is a function: equivalent to .check(callback)
+ * - If callback is a value: equivalent to .check(v => v === value)
+ * Alias: .select()
+ *
+ * @param {Function|*} callbackOrValue - Transform function or value to compare
+ * @returns {ObservableChecker<*>}
+ * @example
+ * const count = Observable(5);
+ * count.is(v => v > 3).val(); // true
+ * count.is(5).val(); // true
+ */
 ObservableItem.prototype.is = function(callbackOrValue) {
     if(typeof callbackOrValue === 'function') {
         return new ObservableChecker(this, callbackOrValue);
@@ -104,7 +129,7 @@ ObservableItem.prototype.format = function(type, options = {}) {
     if (process.env.NODE_ENV === 'development') {
         if (!Formatters[type]) {
             throw new NativeDocumentError(
-                `Observable.format : unknown type '${type}'. Available : ${Object.keys(Formatters).join(', ')}.`
+                `Observable.format : unknown type '${type}'. Available : ${Object.keys(Formatters).join(', ')}.`,
             );
         }
     }
@@ -113,6 +138,6 @@ ObservableItem.prototype.format = function(type, options = {}) {
     const localeObservable = Formatters.locale;
 
     return ObservableItem.computed(() => formatter(self.val(), localeObservable.val(), options),
-        [self, localeObservable]
+        [self, localeObservable],
     );
 };

package/src/core/elements/anchor/anchor-with-sentinel.js

@@ -1,6 +1,14 @@
 
-
-
+/**
+ * Creates an augmented DocumentFragment with comment sentinel nodes and a MutationObserver
+ * that fires when the fragment is inserted into the live DOM.
+ * Used as the base for Anchor — not intended for direct use in application code.
+ *
+ * @internal
+ * @constructor
+ * @param {string} name - Debug label used in comment node text content
+ * @returns {AnchorWithSentinel} Augmented DocumentFragment instance
+ */
 export default function AnchorWithSentinel(name) {
     const instance = Reflect.construct(DocumentFragment, [], AnchorWithSentinel);
     const sentinel = document.createComment((name || '') + ' Anchor Sentinel');
@@ -31,11 +39,24 @@ export default function AnchorWithSentinel(name) {
 AnchorWithSentinel.prototype = Object.create(DocumentFragment.prototype);
 AnchorWithSentinel.prototype.constructor = AnchorWithSentinel;
 
+/**
+ * Registers a callback to call every time the sentinel is connected to the live DOM.
+ * The callback receives the parent node as its argument.
+ *
+ * @param {(parent: Node) => void} callback - Called each time the fragment is inserted
+ * @returns {this}
+ */
 AnchorWithSentinel.prototype.onConnected = function(callback) {
     this.$events.connected = callback;
     return this;
 };
 
+/**
+ * Registers a callback to call the first time the sentinel is connected to the live DOM.
+ * After the first connection, the MutationObserver is disconnected automatically.
+ *
+ * @param {(parent: Node) => void} callback - Called once on first insertion
+ */
 AnchorWithSentinel.prototype.onConnectedOnce = function(callback) {
     this.$events.connected = (parent) => {
         callback(parent);

package/src/core/elements/anchor/anchor.js

@@ -1,8 +1,17 @@
-import Validator from "../../utils/validator";
-import {ElementCreator} from "../../wrappers/ElementCreator";
-import AnchorWithSentinel from "./anchor-with-sentinel";
-import oneChildAnchorOverwriting from "./one-child-anchor-overwriting";
+import Validator from '../../utils/validator';
+import {ElementCreator} from '../../wrappers/ElementCreator';
+import AnchorWithSentinel from './anchor-with-sentinel';
+import oneChildAnchorOverwriting from './one-child-anchor-overwriting';
 
+/**
+ * Creates an anchor fragment — a managed DocumentFragment delimited by comment sentinels.
+ * Used internally by ForEach, ShowIf, Switch, Match and other control-flow directives
+ * to manage dynamic DOM regions without a real container element.
+ *
+ * @param {string} name - Debug name for the anchor (visible as HTML comments in the DOM)
+ * @param {boolean} [isUniqueChild=false] - If true, optimises rendering when this anchor is the only child of its parent
+ * @returns {AnchorDocumentFragment} An augmented DocumentFragment with anchor management methods
+ */
 export default function Anchor(name, isUniqueChild = false) {
     const anchorFragment = new AnchorWithSentinel(name);
 
@@ -22,7 +31,7 @@ export default function Anchor(name, isUniqueChild = false) {
     anchorFragment.nativeAppend = anchorFragment.append;
 
     const isParentUniqueChild = isUniqueChild
-        ? () => true: (parent) => (parent.firstChild === anchorStart && parent.lastChild === anchorEnd)
+        ? () => true: (parent) => (parent.firstChild === anchorStart && parent.lastChild === anchorEnd);
 
     const insertBefore = (parent, child, target) => {
         const childElement = Validator.isElement(child) ? child : ElementCreator.getChild(child);
@@ -85,7 +94,7 @@ export default function Anchor(name, isUniqueChild = false) {
             parentNode.nativeInsertBefore(child, anchorStart);
             return;
         }
-        parentNode.insertBefore(child, anchorStart);
+        parentNode.insertBefore(child, anchorStart.nextSibling);
     };
 
     anchorFragment.removeChildren = function() {
@@ -198,4 +207,4 @@ export function createPortal(children, { parent, name = 'unnamed' } = {}) {
     return anchor;
 }
 
-DocumentFragment.prototype.setAttribute = () => {}
+DocumentFragment.prototype.setAttribute = () => {};

package/src/core/elements/anchor/one-child-anchor-overwriting.js

@@ -1,5 +1,5 @@
-import Validator from "../../utils/validator";
-import {ElementCreator} from "../../wrappers/ElementCreator";
+import Validator from '../../utils/validator';
+import {ElementCreator} from '../../wrappers/ElementCreator';
 
 
 export default function oneChildAnchorOverwriting(anchor, parent) {

package/src/core/elements/content-formatter.js

@@ -1,4 +1,4 @@
-import HtmlElementWrapper from "../wrappers/HtmlElementWrapper";
+import HtmlElementWrapper from '../wrappers/HtmlElementWrapper';
 
 /**
  * Creates a `<div>` element.

package/src/core/elements/control/for-each-array.js

@@ -1,6 +1,6 @@
-import Anchor from "../anchor/anchor";
-import { ElementCreator } from "../../wrappers/ElementCreator";
-import NativeDocumentError from "../../errors/NativeDocumentError";
+import Anchor from '../anchor/anchor';
+import { ElementCreator } from '../../wrappers/ElementCreator';
+import NativeDocumentError from '../../errors/NativeDocumentError';
 
 
 const CREATE_AND_CACHE_ACTIONS = new Set(['clear', 'push', 'unshift', 'replace']);
@@ -30,7 +30,7 @@ export function ForEachArray(data, callback, configs = {}) {
     const element = Anchor('ForEach Array', configs.isParentUniqueChild);
     const blockEnd = element.endElement();
 
-    let cache = new Map();
+    const cache = new Map();
     let lastNumberOfItems = 0;
     const isIndexRequired = callback.length >= 2;
 
@@ -61,7 +61,7 @@ export function ForEachArray(data, callback, configs = {}) {
         const child = ElementCreator.getChild(callback(item, null));
         if(process.env.NODE_ENV === 'development') {
             if(!child) {
-                throw new NativeDocumentError("ForEachArray child can't be null or undefined!");
+                throw new NativeDocumentError('ForEachArray child can\'t be null or undefined!');
             }
         }
         cache.set(item, { child, indexObserver: null });
@@ -73,7 +73,7 @@ export function ForEachArray(data, callback, configs = {}) {
         const child = ElementCreator.getChild(callback(item, indexObserver));
         if(process.env.NODE_ENV === 'development') {
             if(!child) {
-                throw new NativeDocumentError("ForEachArray child can't be null or undefined!");
+                throw new NativeDocumentError('ForEachArray child can\'t be null or undefined!');
             }
         }
         cache.set(item, { child, indexObserver  });
@@ -84,7 +84,7 @@ export function ForEachArray(data, callback, configs = {}) {
             const child = ElementCreator.getChild(callback(item, indexKey));
             if(process.env.NODE_ENV === 'development') {
                 if(!child) {
-                    throw new NativeDocumentError("ForEachArray child can't be null or undefined!");
+                    throw new NativeDocumentError('ForEachArray child can\'t be null or undefined!');
                 }
             }
             cache.set(item, { child, indexObserver: null  });
@@ -214,7 +214,7 @@ export function ForEachArray(data, callback, configs = {}) {
             const garbageFragment = document.createDocumentFragment();
 
             if(deleted.length > 0) {
-                let firstItem = deleted[0];
+                const firstItem = deleted[0];
                 if(deleted.length === 1) {
                     removeByItem(firstItem, garbageFragment);
                 } else if(deleted.length > 1) {
@@ -266,7 +266,7 @@ export function ForEachArray(data, callback, configs = {}) {
             parent.insertBefore(childA, childBNext);
             childA = null;
             childB = null;
-        }
+        },
     };
     Actions.merge = Actions.add;
     Actions.push = Actions.add;

package/src/core/elements/control/for-each.js

@@ -1,10 +1,10 @@
-import {Observable} from "../../data/Observable";
-import Validator from "../../utils/validator";
-import Anchor from "../anchor/anchor";
-import DebugManager from "../../utils/debug-manager";
-import {getKey} from "../../utils/helpers";
-import { ElementCreator } from "../../wrappers/ElementCreator";
-import NativeDocumentError from "../../errors/NativeDocumentError";
+import {Observable} from '../../data/Observable';
+import Validator from '../../utils/validator';
+import Anchor from '../anchor/anchor';
+import DebugManager from '../../utils/debug-manager';
+import {getKey} from '../../utils/helpers';
+import { ElementCreator } from '../../wrappers/ElementCreator';
+import NativeDocumentError from '../../errors/NativeDocumentError';
 
 const SELF_RENDER = (item) => item;
 
@@ -34,7 +34,7 @@ export function ForEach(data, callback, key, { shouldKeepItemsInCache = false }
     const blockEnd = element.endElement();
     const blockStart = element.startElement();
 
-    let cache = new Map();
+    const cache = new Map();
     let lastKeyOrder = null;
     const keyIds = new Set();
 
@@ -78,9 +78,9 @@ export function ForEach(data, callback, key, { shouldKeepItemsInCache = false }
 
         try {
             const indexObserver = callback.length >= 2 ? Observable(indexKey) : null;
-            let child = ElementCreator.getChild(callback(item, indexObserver));
+            const child = ElementCreator.getChild(callback(item, indexObserver));
             if(!child) {
-                throw new NativeDocumentError("ForEach child can't be null or undefined!");
+                throw new NativeDocumentError('ForEach child can\'t be null or undefined!');
             }
             cache.set(keyId, { keyId, isNew: true, child: new WeakRef(child), indexObserver});
         } catch (e) {
@@ -101,15 +101,15 @@ export function ForEach(data, callback, key, { shouldKeepItemsInCache = false }
             child && fragment.appendChild(child);
         }
         parent.insertBefore(fragment, blockEnd);
-    }
+    };
 
     const diffingDOMUpdates = (parent) => {
         const operations = [];
-        let fragment = document.createDocumentFragment();
+        const fragment = document.createDocumentFragment();
         const newKeys = Array.from(keyIds);
         const oldKeys = Array.from(lastKeyOrder);
 
-        let currentPosition = blockStart;
+        const currentPosition = blockStart;
 
         for(const index in newKeys) {
             const itemKey = newKeys[index];
@@ -164,7 +164,7 @@ export function ForEach(data, callback, key, { shouldKeepItemsInCache = false }
 
     buildContent();
     if(Validator.isObservable(data)) {
-        data.subscribe(buildContent)
+        data.subscribe(buildContent);
     }
     return element;
 }