inter.js

/**
 * Interjs
 * Version - 2.2.3
 * MIT LICENSED BY - Denis Power
 * Repo - https://github.com/interjs/inter
 * 2021 - 2024
 * GENERATED BY INTER BUILDER
 *
 */

(function () {
  function runInvalidTemplateArgumentError(arg) {
    syErr(`The argument of the template function must be a plain Javascript object,
    but you defined "${valueType(arg)}" as its argument.
    
    `);
  }

  function runInvalidEventHandlerWarning(eventName) {
    ParserWarning(`The "${eventName}" event was not created because
    its handler is not a function, in the tempate function.`);
  }

  function runIllegalTextWarning() {
    ParserWarning(`The template parser found an element 
    with both the text property and the children property,
    and in this case Inter ignores the text property.`);
  }

  function runInvalidEventWarning(eventName) {
    ParserWarning(`"${eventName}" doesn't seem to be a valid dom event.`);
  }

  function runInvalidStyleWarning(styleName) {
    ParserWarning(`"${styleName}" doesn't seem to be a valid style name.`);
  }

  function runCanNotRenderConditionallyWarning() {
    ParserWarning(`You can not conditionally render the main
     container in the template function.`);
  }

  function runInvalidTagOptionError(tag) {
    syErr(`"${valueType(tag)}" is an invalid tag name,
     in the template function.`);
  }

  function runInvalidObjectOptionsError() {
    syErr(`The "events", "attrs" and "styles" options in the template function
     must be plain Javascript objects, and you didn't define
     one or more of those options as plain Javascript object.`);
  }

  function runIllegalAttrsPropWarning(prop) {
    const styleProp = `You should not use the style attribute(in attrs object) to create styles for the element,
         use the "styles" object instead, like:

         {
          tag: "p", text: "Some text", styles: { color: "green" }
         }
`;

    const event = `You shoud not use "${prop}" as an attribute name, it seems to be a dom event,
     use it as property of the "events" object, like:

     {
      tag: "button", text: "Some text", events: { ${prop}: () => { //Some code here }  }
     }
     `;

    consW(prop.startsWith("on") ? event : styleProp);
  }

  function runInvalidStyleValue(name, value) {
    ParserWarning(`"${value}" is an invalid value for the "${name}" style.`);
  }

  function runCanNotDefineReactivePropWarning() {
    consW(`Inter failed to define reactivity
        in a plain Javascript object, because it is not  configurable.`);
  }

  function runDetecteReservedPropdWarnig(prop) {
    consW(
      `"${prop}" is a reserved property, do not create a property with this name.`
    );
  }

  function runInvalidDefinePropsValueError(props) {
    syErr(`The value of "defineProps" must be a plain Javascript object, and you
          defined "${valueType(props)}" as its value`);
  }

  function runInvalidSetPropsValueError(props) {
    syErr(`The value of "setProps" must be a plain Javascript object, and you
          defined "${valueType(props)}" as its value`);
  }

  function runInvalidDeletePropsValueError(props) {
    syErr(`The value of "deleteProps" must be an Array object, and you
          defined "${valueType(props)}" as its value`);
  }

  function runNotConfigurableArrayError() {
    err(`Inter failed to define the reactivity,
        because the Array  of the each option is not configurable.`);
  }

  function runUnsupportedEachValueError(value) {
    syErr(`"${valueType(
      value
    )}" is not a valid value for the "each" option in renderList.
    The values that are accepted in "each" option, are:
    Array.
    Plain js object.
    Number.
    Map.
    Set.`);
  }

  function runInvalidAddItemsSecodArgumentError() {
    syErr("The second argument of [LIST REACTOR].addItems must be a number.");
  }

  function runInvalidAddItemsFirstArgumentError() {
    syErr("The first argument of [LIST REACTOR ].addItems must be an Array.");
  }

  function runInvalidTemplateReturnError() {
    syErr(`The template function is not being returned inside the "do" method in
           renderList(reactive listing), just return the template function.`);
  }

  function runIvalidRequestArgumentError(arg) {
    syErr(`The argument of [Backend instance].request method
      must be a plain javascript object, and you defined "${valueType(arg)}"
      as its argument.`);
  }

  function runInvalidTypeOptionError() {
    syErr(`You must define the type(method) of request, in Ajax with the "type" option and
    it must be a string.`);
  }

  function runInvalidPathOptionError() {
    syErr(`You must define the path where the request will be sent, with the "path" option and 
    it must be a string.`);
  }

  function runUnsupportedRequestTypeWarning(type) {
    err(`"${type}" is an unsupported request type in Ajax.`);
  }

  function runInvalidAjaxEventWarning(name) {
    consW(`There's not any event named "${name}" in Ajax request.`);
  }

  function runInvalidSecurityObjectWarning() {
    consW(`Invalid "security" object, security object must have the username and passoword 
    properties.`);
  }

  function runInvalidCallBackError() {
    syErr(`The arguments of "okay", "error" and "response"  methods must be
     functions.`);
  }

  function runInvalidResponseArgumentNumberError(argNumber) {
    syErr(`The response method must have two arguments and you only
    defined ${argNumber} argument.`);
  }

  function runInvalidHeadersOptionError(headers) {
    syErr(`the "headers" property must be an object, and
    you defined it as : ${valueType(headers)}.`);
  }

  function runInvalidAjaxEventsOptionError(events) {
    syErr(`the "events" property must be an object, and
    you defined it as : ${valueType(events)}.`);
  }

  function runReservedRefNameWarning(refName) {
    consW(`"${refName}" is a reserved reference name, use other name.`);
  }

  function runInvalidSetRefsValueError(arg) {
    syErr(`"${valueType(arg)}" is not a valid value for the "setRefs" property.
          The value of the setRefs property must be a plain Javascript object.`);
  }

  function runInvalidRefArgument() {
    syErr(
      "The argument of the Ref function must be a plain Javascript object."
    );
  }

  function runInvalidRefInProperty() {
    syErr(
      "The value of the 'in' property on the Ref function must be a string."
    );
  }

  function runInvalidRefDataProperty() {
    syErr(
      "The value of the 'data' property on the Ref function must be a plain Javascript object. "
    );
  }

  function runInvalidRenderIfInOptionError() {
    syErr(`The value of the "in" property in the renderIf function
     must be a string.`);
  }

  function runInvalidRenderIfDataOptionError() {
    syErr(`The value of the "data" property in the renderIf function 
    must be a plain Javascript object.`);
  }

  function runNotDefinedConditionalPropWarning(prop) {
    consW(`"${prop}" was not defined as a conditional property.`);
  }

  function runTwoElseIfElementsCanNotHaveTheSamePropError(prop) {
    err(`
    Two elements with the "_elseIf" attribute can not have the same conditional property.
    Property: "${prop}"
    `);
  }

  function runInvalidRenderIfObserveArgumentError() {
    syErr(`The argument of [renderIf reactor].observe()
    must be a function.`);
  }

  function runInvalidRenderIfArgError() {
    syErr("The argument of renderIf must be a  plain Javascript object.");
  }

  function runInvalidConditionalPropValueError(prop) {
    err(`The value of a conditional property must be boolean(true/false),
    and the value of  "${prop}" property is not boolean.`);
  }

  function runHasMoreThanOneCondtionalAttributeError(child) {
    ParserWarning(`The conditional rendering parser found a/an "${getTagName(
      child
    )}"
    element which has more than one conditional atribute, it's forbidden.`);
  }

  function runNotDefinedIfNotPropWarning(child, _ifNot, data) {
    ParserWarning(`
                    
    The conditional rendering parser found
    an element with the "_ifNot" attribute and the value
    of this attribute is not a conditional property.
  
    {
        element: ${child.nodeName.toLowerCase()},
        _ifNot: ${_ifNot},
        data: { ${Object.keys(data)} }
    }
    
    `);
  }

  function runNotDefinedElseIfPropWarning(propValue) {
    ParserWarning(`The conditional rendering parser found an element which has the "_elseIf"
     conditional property whose the value is: "${propValue}",
     but you did not define any conditional property with that name.
  
    `);
  }

  function runInvalidElseAttributeError() {
    ParserWarning(`The parser found an element with the "_else" attribute,
    but there is not an element with the "_if" or a valid "_elseIf" attribute before it.`);
  }

  function runInvalidElseIfAttributeError(child) {
    ParserWarning(`a/an "${getTagName(
      child
    )}" element has the "_elseIf" attribute,
    but it does not come after an element with the "_if" or a valid "_elseIf" attribute.`);
  }

  function runInvalidSetCondsValueError(arg) {
    syErr(`The value of [renderIf reactor].setConds must be
      a plain Javascript object, and you defined ${valueType(arg)}
      as its value.`);
  }

  function runNotDefinedIfPropWarning(propValue, child, data) {
    ParserWarning(`
    The conditional rendering parser found
    an element which has the "_if" attribute and the value
    of this attribute is not a conditional property.
  
    {
        element: ${child.nodeName.toLowerCase()},
        _if: ${propValue},
        data: { ${Object.keys(data)} }
    }
    
    `);
  }

  function runNotDefinedManagerError(name) {
    ParserWarning(`
    The attribute manager parser found an attribute manager
    named "${name}", but you did not define it in the "data" object.
    `);
  }

  function runInvalidEventHandlerError(name, handler) {
    syErr(`
    "${valueType(handler)}" is an invalid
     handler for the "${name}" event, you must
     define only a function as the handler of a dom event.
    `);
  }

  function runCanNotGetTheValueOfAnEventWarning(name) {
    consW(`
     you are trying to get the value of "${name}",
     it's an event, and you can not get the value of an event.
    `);
  }

  function runInvalidSetAttrsValueError(props) {
    syErr(`
    "${valueType(props)}" is an invalid value for the "setAttrs" property.
    The "setAttrs" property only accepts a plain Javascript object as its
    value.
    `);
  }

  function runUnexpectedPropWarning(prop) {
    consW(` 
    The "${prop}" property was not defined in the manager object.
    `);
  }

  function runNotCallebleError(arg) {
    syErr(`The argument of the observe method must be a function,
    and you defined ${valueType(arg)} as its argument.`);
  }
  // Helpers functions.

  function isValidTemplateReturn(arg) {
    return isObj(arg) && arg.element && arg[Symbol.for("template")];
  }

  function isNotConfigurable(obj) {
    return (
      Object.isFrozen(obj) || Object.isSealed(obj) || !Object.isExtensible(obj)
    );
  }

  function isObj(arg) {
    // For plain objects.

    return Object.prototype.toString.apply(arg, void 0) == "[object Object]";
  }

  function getTagName(elementNode) {
    return elementNode.nodeName.toLowerCase();
  }

  function isSet(arg) {
    return arg instanceof Set;
  }

  function hasOwnProperty(target, prop) {
    const hasOwn = Object.prototype.hasOwnProperty.call(target, prop);

    return hasOwn;
  }

  function isMap(arg) {
    return arg instanceof Map;
  }

  function isDefined(arg) {
    return arg != void 0;
  }

  /**
   * Indirect boolean value checking can cause
   * unexpected result, that's why I am using direct
   * checking here.
   *
   */

  function isTrue(v) {
    return Object.is(v, true);
  }

  function isFalse(v) {
    return Object.is(v, false);
  }

  /*</>*/

  function isCallable(fn) {
    return typeof fn == "function";
  }

  function isEmptyObj(obj) {
    return Object.keys(obj).length == 0;
  }

  function isAtag(tag) {
    return tag instanceof HTMLElement;
  }

  function validDomEvent(eventName) {
    return eventName in HTMLElement.prototype;
  }

  function validStyleName(styeName) {
    return styeName in document.createElement("p").style;
  }

  function createText(text) {
    return document.createTextNode(text);
  }

  function validTagOption(option) {
    return typeof option == "string";
  }

  function validObjectOptions(option1, option2, option3) {
    //For the styles, attrs and events options

    return isObj(option1) && isObj(option2) && isObj(option3);
  }

  function getId(id) {
    if (typeof id !== "string")
      syErr("The value of the id attribute must be a string.");

    const el = document.getElementById(id);

    if (el == void 0)
      err(`There's not an element on the document with id "${id}".`);
    else return el;
  }

  function valueType(val) {
    if (
      typeof val == "undefined" ||
      typeof val == "symbol" ||
      typeof val == "bigint" ||
      typeof val == "boolean" ||
      typeof val == "function" ||
      typeof val == "number" ||
      typeof val == "string"
    ) {
      return typeof val;
    } else {
      /**
       *
       * @val may be an array, a plain object or even
       * a native Javascript object,
       * let's check with the type() function.
       *
       */

      return type(val);
    }
  }

  // WARNINGS HELPERS

  function syErr(err) {
    throw new Error(`Inter syntaxError : ${err}`);
  }

  function err(e) {
    throw new Error(`Inter error: ${e}`);
  }

  function consW(w) {
    console.warn(`Inter warning: ${w}`);
  }

  function ParserWarning(w) {
    console.error(`Inter parser error: ${w}`);
  }

  //

  function isArray(arg) {
    return Array.isArray(arg);
  }

  function type(val) {
    // All Javascript objects.

    const isAnobject =
      isDefined(val) &&
      Object.prototype.toString.call(val).startsWith("[object");

    if (isAnobject) {
      return Object.prototype.toString
        .call(val)
        .replace("[object", "")
        .replace("]", "")
        .replace(/\s/g, "")
        .toLowerCase();
    } else {
      /**
       * @val is null.
       *
       */

      return "null";
    }
  }

  function isBool(val) {
    /**
     *
     * Don't use typeof val==="boolean"; due to 1 and 0.
     *
     */

    return val == true || val == false;
  }

  //Just for renderList.

  function validInProperty(IN) {
    return typeof IN == "string";
  }

  function validEachProperty(each) {
    return (
      each instanceof Array ||
      isObj(each) ||
      each instanceof Map ||
      each instanceof Set ||
      typeof each === "number"
    );
  }

  function toIterable(data) {
    const iterable = {
      values: new Array(),
      type: void 0,
    };

    if (isArray(data)) {
      iterable.values = data;
      iterable.type = "array";
    } else if (isObj(data)) {
      iterable.values = Object.entries(data);
      iterable.type = "object";
    } else if (data instanceof Map) {
      data.forEach((value, key) => {
        iterable.values.push([key, value]);
      });

      iterable.type = "object";
    } else if (data instanceof Set) {
      iterable.values = Array.from(data);
      iterable.type = "set";
    } else if (typeof data === "number") {
      for (let i = 0; i < data; i++) {
        iterable.values.push(i);
      }

      iterable.type = "number";
    }

    return iterable;
  }

  function Iterable(data) {
    this.source = toIterable(data);
    this.break = !1;
  }

  Iterable.prototype.each = function (callBack) {
    let index = -1;

    for (const data of this.source.values) {
      index++;

      callBack(data, index, this.source.type);

      if (this.break) break;
    }
  };

  function isNegativeValue(value) {
    value = typeof value == "string" ? value.trim() : value;
    const nevagativeValues = new Set([0, false, null, undefined, ""]);

    return nevagativeValues.has(value);
  }

  function isPositiveValue(value) {
    return !isNegativeValue(value);
  }

  function isTringOrNumber(value) {
    typeof value == "string" || typeof value == "number";
  }

  //</>

  function hasProp(object) {
    return Object.keys(object).length > 0;
  }

  function hasRefs(text) {
    return /{\s*.*\s*}/.test(text);
  }

  function getRefs(text) {
    /**
     *
     * @text must be a string containing refs.
     *
     * This function is used in reference computation,
     * it helps Inter making an eficient reference computation.
     *
     */

    const ref = /{\s*(:?[\w-\s]+)\s*}/g;

    const refs = new Set();

    text.replace(ref, (plainRef) => {
      const refName = plainRef.replace("{", "").replace("}", "").trim();

      refs.add(refName);
    });

    return Array.from(refs);
  }

  function hasRefNamed(text, refName) {
    const pattern = new RegExp(`{\\s*${refName}\\s*}`);

    return pattern.test(text);
  }

  /**
   *
   * We are considering them as special attributes
   * because we must not use the setAttribute method
   * to set them.
   *
   */

  const specialAttrs = new Set(["currentTime", "value"]);

  function runRefParsing(rootElement, refs, refCache) {
    function getTextNodes(el) {
      const _childNodes = new Set();

      if (el.hasChildNodes())
        for (const child of el.childNodes) {
          if (
            child.nodeType == 3 &&
            child.textContent.trim().length > 0 &&
            hasRefs(child.textContent)
          ) {
            _childNodes.add(child);
          }
        }

      return Array.from(_childNodes);
    }

    const children = rootElement.getElementsByTagName("*");

    function runTextRefParsing(parentNode) {
      function parseRefsInText(node) {
        for (const ref in refs) {
          if (
            node.textContent.trim().length > 0 &&
            hasRefNamed(node.textContent, ref)
          ) {
            const setting = {
              target: node,
              text: node.textContent,
            };

            refCache.add(setting);

            break;
          }
        }
      }

      if (parentNode.nodeType == 1) {
        for (const node of parentNode.childNodes) {
          if (node.hasChildNodes() && node.nodeType == 1) {
            runTextRefParsing(node);
            continue;
          }

          parseRefsInText(node);
        }
      } else if (parentNode.nodeType == 3) {
        // Parsing the references
        // in the main container
        // text nodes.

        parseRefsInText(parentNode);
      }
    }

    function parseRefsInAttrs(elementNode) {
      const setting = {
        target: elementNode,
        attrs: Object.create(null),
        refs: refs,
      };

      for (const attr of elementNode.attributes) {
        for (const ref in refs) {
          if (hasRefNamed(attr.value, ref)) {
            if (!specialAttrs.has(attr.name)) {
              setting.attrs[attr.name] = attr.value;
            } else {
              refCache.specialAttrs.add({
                target: elementNode,
                attr: {
                  [attr.name]: attr.value,
                },
              });

              elementNode.removeAttribute(attr.name);
            }

            break;
          }
        }
      }

      if (hasProp(setting.attrs)) {
        // The true argument says to the parser
        // to register the reference as an attribute reference.
        refCache.add(setting, true);
      }
    }

    const textNodes = getTextNodes(rootElement);

    if (textNodes.length > 0) {
      for (const text of textNodes) {
        runTextRefParsing(text);
      }
    }

    for (const child of children) {
      runTextRefParsing(child);
      parseRefsInAttrs(child);
    }

    refCache.updateRefs();
  }
  function Ref(obj) {
    if (new.target != void 0) {
      syErr("Do not call the Ref function with the new keyword.");
    } else if (!isObj(obj)) runInvalidRefArgument();
    else {
      const { in: IN, data } = obj;

      if (!(typeof IN === "string")) runInvalidRefInProperty();

      if (!isObj(data)) runInvalidRefDataProperty();

      const reservedRefNames = new Set(["setRefs", "observe"]);

      for (const refName in data) {
        if (reservedRefNames.has(refName)) {
          runReservedRefNameWarning(refName);
          delete data[refName];

          continue;
        }

        if (isCallable(data[refName])) {
          data[refName] = data[refName].call(data);
        }
      }

      const proxyTarget = Object.assign({}, data);
      const refParser = {
        attrs: new Set(), // Attribute reference.
        texts: new Set(), // Text reference.
        specialAttrs: new Set(),
        observed: new Map(),
        refs: proxyTarget,
        hadIteratedOverSpecialAttrs: false,
        add(setting, attr) {
          // if attr, the parser must register the reference
          // as an attribute reference.

          if (attr) {
            this.attrs.add(setting);
          } else {
            this.texts.add(setting);
          }
        },

        updateSpecialAttrs() {
          for (const special of this.specialAttrs) {
            const { target } = special;

            // eslint-disable-next-line prefer-const
            let [attrName, attrValue] = Object.entries(special.attr)[0];

            const refs = getRefs(attrValue);

            for (const ref of refs) {
              if (reservedRefNames.has(ref)) continue;
              if (ref in this.refs) {
                const pattern = new RegExp(`{\\s*(:?${ref})\\s*}`, "g");
                attrValue = attrValue.replace(pattern, this.refs[ref]);

                if (!hasRefs(attrValue)) break;
              }
            }

            target[attrName] = attrValue;
          }
        },
        updateAttrRef() {
          for (const attributeRef of this.attrs) {
            const { target, attrs } = attributeRef;

            // eslint-disable-next-line prefer-const
            for (let [name, value] of Object.entries(attrs)) {
              const refNames = getRefs(value);

              for (const refName of refNames) {
                if (reservedRefNames.has(refName)) continue;
                if (refName in this.refs) {
                  const pattern = new RegExp(`{\\s*(:?${refName})\\s*}`, "g");

                  value = value.replace(pattern, this.refs[refName]);

                  if (!hasRefs(value)) break;
                }
              }

              if (target.getAttribute(name) !== value) {
                target.setAttribute(name, value);
              }
            }
          }
        },
        updateTextRef() {
          if (this.texts.size > 0) {
            for (const textRef of this.texts) {
              // eslint-disable-next-line prefer-const
              let { target, text } = textRef;

              // Returns the ref Names
              // on the "text" string.
              const refNames = getRefs(text);

              for (const refName of refNames) {
                if (reservedRefNames.has(refName)) continue;
                if (refName in this.refs) {
                  const pattern = new RegExp(`{\\s*(:?${refName})\\s*}`, "g");

                  text = text.replace(pattern, this.refs[refName]);

                  if (!hasRefs(text)) break;
                }
              }

              if (target.textContent !== text) {
                target.textContent = text;
              }
            }
          }
        },

        updateRefs() {
          if (this.texts.size > 0) this.updateTextRef();
          if (this.attrs.size > 0) this.updateAttrRef();
          if (this.specialAttrs.size > 0) this.updateSpecialAttrs();
        },
      };

      runRefParsing(getId(IN), proxyTarget, refParser);

      function runObserveCallBack(refName, value, oldValue) {
        if (refParser.observed.size == 1 && !reservedRefNames.has(refName)) {
          const callBack = refParser.observed.get("callBack");

          callBack(refName, value, oldValue);
        }
      }

      const reactor = new Proxy(proxyTarget, {
        set(target, key, value, proxy) {
          if (key in target && target[key] == value) return false;

          const oldValue = target[key];

          if (isCallable(value)) {
            value = value.call(proxy);
          }
          Reflect.set(...arguments);
          runObserveCallBack(key, value, oldValue);
          if (!(key in proxy)) {
            // Dynamic ref.

            runRefParsing(getId(IN), proxyTarget, refParser);
          } else {
            refParser.updateRefs();
            return true;
          }
        },

        get(...args) {
          return Reflect.get(...args);
        },
      });

      Object.defineProperties(reactor, {
        setRefs: {
          set(o) {
            if (isObj(o)) {
              let hasNewRefName = false;

              for (const [refName, refValue] of Object.entries(o)) {
                if (reservedRefNames.has(refName)) {
                  runReservedRefNameWarning(refName);

                  continue;
                }

                if (!hasOwnProperty(this, refName)) hasNewRefName = true;
                if (hasOwnProperty(this, refName) && this[refName] == refValue)
                  continue;

                const oldRefValue = proxyTarget[refName];

                if (isCallable(refValue)) {
                  proxyTarget[refName] = refValue.call(this);
                } else {
                  proxyTarget[refName] = refValue;
                }

                runObserveCallBack(refName, refValue, oldRefValue);
              }

              if (hasNewRefName)
                runRefParsing(getId(IN), proxyTarget, refParser);
            } else runInvalidSetRefsValueError(o);
          },
          enumerable: !1,
        },
        observe: {
          value(callBack) {
            if (!isCallable(callBack)) {
              syErr(
                "The argument of [Reference reactor].observe() must be a function."
              );
            }

            if (refParser.observed.size === 0) {
              refParser.observed.set("callBack", callBack);

              return true;
            }

            return false;
          },
          enumerable: !1,
          writable: !1,
        },
      });

      return reactor;
    }
  }

  function isNull(value) {
    return value == null;
  }

  function getManagerName(attr) {
    const name = attr.replace("{...", "").replace("}", "");

    return name;
  }

  function isADefinedManager(dataObject, manager) {
    return hasOwnProperty(dataObject, manager);
  }

  function isAValidAttrManagerSyntax(attr) {
    const pattern = /{(:?\.){3}(:?\S+)}/;

    return pattern.test(attr);
  }

  function mayBeAnAttrManager(attr) {
    const pattern = /{(:?[\s\S]+)}/;

    return pattern.test(attr);
  }

  function parse(rootElement, dataObject) {
    const children = rootElement.getElementsByTagName("*");

    for (const child of children) {
      if (child.attributes.length == 1) {
        const { name: attr } = child.attributes[0];
        if (mayBeAnAttrManager(attr) && isAValidAttrManagerSyntax(attr)) {
          const managerName = getManagerName(attr);

          child.removeAttribute(attr);

          if (isADefinedManager(dataObject, managerName))
            spreadAttrs(child, dataObject[managerName]);
          else runNotDefinedManagerError(managerName);
        }
      }
    }
  }

  function spreadAttrs(Element, managerObject) {
    const special = new Set(["value", "currentTime"]);
    const isNotSpecial = (name) => !special.has(name);
    const isAnEvent = (name) => name.startsWith("on") && validDomEvent(name);
    const isSpecial = (name) => !isNotSpecial(name);
    const observerCache = new Map();

    for (const [attrName, attrValue] of Object.entries(managerObject)) {
      if (isNotSpecial(attrName) && !isAnEvent(attrName) && !isNull(attrValue))
        setAttr(Element, attrName, attrValue);
      else if (isSpecial(attrName) && !isNull(attrValue))
        setSpecialAttr(Element, attrName, attrValue);
      else if (isAnEvent(attrName) && !isNull(attrValue))
        defineEvent(Element, attrName, attrValue, managerObject);

      defineReactiveProp(
        managerObject,
        attrName,
        attrValue,
        Element,
        observerCache
      );
    }

    definesetAttrsProp(managerObject);
    defineObserveProp(managerObject, observerCache);
  }

  function setAttr(Element, name, value) {
    const hasTheAttr = () => Element.hasAttribute(name);
    const attrValue = () => Element.getAttribute(name);

    if (!isNull(value) && value !== attrValue)
      Element.setAttribute(name, value);
    else if (isNull(value) && hasTheAttr()) Element.removeAttribute(name);
  }

  function setSpecialAttr(Element, name, value) {
    if (isDefined(value)) Element[name] = value;
    else if (isNull(value)) Element[name] = "";
  }

  function defineEvent(Element, eventName, handler, managerObject) {
    if (isDefined(handler) && !isCallable(handler))
      runInvalidEventHandlerError(eventName, handler);
    else if (isNull(handler)) Element[eventName] = void 0;
    else Element[eventName] = (event) => handler.call(managerObject, event);
  }

  function defineReactiveProp(object, name, value, Element, observerCache) {
    const special = new Set(["value", "currentTime", "checked"]);
    const isNotSpecial = () => !special.has(name);
    const isAnEvent = () => name.startsWith("on") && validDomEvent(name);
    const isSpecial = () => !isNotSpecial(name);
    let propValue = value;

    Object.defineProperty(object, name, {
      set(newValue) {
        if (isAnEvent()) defineEvent(Element, name, newValue, this);
        else if (isNotSpecial()) setAttr(Element, name, newValue);
        else if (isSpecial()) setSpecialAttr(Element, name, newValue);
        propValue = newValue;
        const callBack = observerCache.get("observeCallBack");

        if (observerCache.has("observeCallBack")) callBack(name, newValue);
      },

      get() {
        if (isSpecial()) return Element[name];
        if (!isAnEvent()) return propValue;
        else runCanNotGetTheValueOfAnEventWarning(name);
        return false;
      },
    });
  }

  function definesetAttrsProp(object) {
    Object.defineProperty(object, "setAttrs", {
      set(props) {
        if (!isObj(props)) runInvalidSetAttrsValueError(props);

        for (const [prop, value] of Object.entries(props)) {
          if (!hasOwnProperty(this, prop)) {
            runUnexpectedPropWarning(prop);
            continue;
          }

          this[prop] = value;
        }
      },
    });
  }

  function defineObserveProp(object, map) {
    Object.defineProperty(object, "observe", {
      value(callBack) {
        if (map.size !== 0) return false;
        if (!isCallable(callBack)) runNotCallebleError(callBack);

        map.set("observeCallBack", callBack);

        return true;
      },
    });
  }

  function toAttrs(options) {
    if (new.target !== void 0) {
      syErr(`the "toAttrs" function is not a constructor, do not call it with the
    new keyword.`);
    } else if (!isObj(options)) {
      syErr(`"${valueType(options)}" is an invalid argument for
    "toAttrs" function, the argument must be a plain Javascript object.`);
    } else {
      const { in: IN, data } = options;

      const rootElement = getId(IN);

      parse(rootElement, data);

      return data;
    }
  }

  function getChildNodes(root) {
    const nodes = new Array();

    root.childNodes.forEach((node) => {
      if (
        node.nodeType == 1 ||
        (node.nodeType == 3 && !node.textContent.trim().length == 0)
      ) {
        nodes.push(node);
      }
    });

    return nodes;
  }

  function runReservedPropWarning(prop) {
    consW(
      `"${prop}" is a reserved property, you can not use it as a conditional property.`
    );
  }

  const conditionalAttributeCounter = {
    store: new Set(),
    set(keys) {
      for (const key of keys) {
        if (isDefined(key)) this.store.add(key);
      }
    },

    getSize() {
      const size = this.store.size;

      this.store.clear();

      return size;
    },
  };

  function hasMoreThanOneConditionalAttribute(elementNode) {
    const _ifAttrValue = elementNode.getAttribute("_if"),
      _elseIfAttrValue = elementNode.getAttribute("_elseIf"),
      _ifNotAttrValue = elementNode.getAttribute("_ifNot"),
      _elseAttr = elementNode.hasAttribute("_else") ? true : void 0;

    conditionalAttributeCounter.set([
      _ifAttrValue,
      _elseIfAttrValue,
      _ifNotAttrValue,
      _elseAttr,
    ]);

    return conditionalAttributeCounter.getSize() > 1;
  }

  function hasNoConditionalAttr(elementNode) {
    const _ifAttr = elementNode.hasAttribute("_if"),
      _elseIfAttr = elementNode.hasAttribute("_elseIf"),
      _ifNotAttr = elementNode.hasAttribute("_ifNot"),
      _elseAttr = elementNode.hasAttribute("_else");

    return !_ifAttr && !_elseIfAttr && !_ifNotAttr && !_elseAttr;
  }

  function renderIf(obj) {
    if (!isObj(obj)) runInvalidRenderIfArgError();

    if (new.target !== void 0) {
      err(`renderIf is not a constructor, do not call it with
        the new keyword.`);
    } else {
      const { in: IN, data } = obj;

      const reservedProps = new Set(["setConds", "observe"]);
      const theContainer = getId(IN);
      const conditionalRenderingCache = new Array();

      // eslint-disable-next-line no-inner-declarations
      function parseAttrs(rootElement) {
        let index = -1;

        const parserOptions = {
          target: void 0,
          if: void 0,
          else: void 0,
          ifNot: void 0,
          elseIfs: new Set(),
          index: void 0,
          lastRendered: {
            target: void 0,
            prop: void 0,
          },
          conditionalProps: new Set(),
          rootElement: rootElement,
          set setOptions(obj) {
            for (const [option, value] of Object.entries(obj)) {
              this[option] = value;

              if (option == "if" && isDefined(value))
                this.conditionalProps.add(value);
            }
          },

          canCache() {
            return this.if != void 0;
          },

          addElseIf(elseIfOptions) {
            const { elseIf: prop } = elseIfOptions;

            if (!this.conditionalProps.has(prop)) {
              this.elseIfs.add(elseIfOptions);
              this.conditionalProps.add(prop);
            } else runTwoElseIfElementsCanNotHaveTheSamePropError(prop);
          },

          deleteData() {
            this.setOptions = {
              target: void 0,
              if: void 0,
              else: void 0,
              ifNot: void 0,
              index: void 0,
            };

            this.elseIfs.clear();
            this.conditionalProps.clear();
          },

          getOptions() {
            const options = Object.assign({}, this);
            options.elseIfs = Array.from(this.elseIfs);
            options.conditionalProps = Array.from(this.conditionalProps);

            this.deleteData();

            return options;
          },
        };

        const cacheParserOptions = () => {
          const conditionalGroup = parserOptions.elseIfs.size;
          const options = parserOptions.getOptions();
          if (conditionalGroup) conditionalRenderingCache.unshift(options);
          else conditionalRenderingCache.push(options);
        };

        const rootElementChildNodes = getChildNodes(rootElement);
        const rootElementInitialLength = rootElementChildNodes.length;
        for (const child of rootElementChildNodes) {
          index++;
          child.index = index;

          const isTheLastIteration = rootElementInitialLength - 1 == index;

          if (child.nodeType == 3) {
            if (parserOptions.canCache()) cacheParserOptions();

            continue;
          }

          if (!hasNoConditionalAttr(child)) child.parentNode.removeChild(child);

          if (child.children.length > 0) {
            parseAttrs(child);
          }

          if (hasMoreThanOneConditionalAttribute(child)) {
            runHasMoreThanOneCondtionalAttributeError(child);

            continue;
          }

          if (hasNoConditionalAttr(child) && parserOptions.canCache()) {
            cacheParserOptions();

            continue;
          }

          if (child.hasAttribute("_ifNot")) {
            const _ifNot = child.getAttribute("_ifNot");

            if (hasOwnProperty(data, _ifNot)) {
              child.removeAttribute("_ifNot");

              if (parserOptions.canCache()) cacheParserOptions();

              parserOptions.setOptions = {
                ifNot: _ifNot,
                target: child,
                index: index,
              };

              cacheParserOptions();

              continue;
            } else runNotDefinedIfNotPropWarning(child, _ifNot, data);
          } else if (child.hasAttribute("_else")) {
            if (!parserOptions.if) runInvalidElseAttributeError();
            else {
              parserOptions.else = child;
              child.removeAttribute("_else");
              cacheParserOptions();
            }
          } else if (child.hasAttribute("_elseIf")) {
            const elseIf = child.getAttribute("_elseIf");
            child.removeAttribute("_elseIf");

            if (!parserOptions.if) runInvalidElseIfAttributeError(child);
            else if (!hasOwnProperty(data, elseIf))
              runNotDefinedElseIfPropWarning(elseIf);
            else {
              parserOptions.addElseIf({
                target: child,
                index: index,
                elseIf: elseIf,
              });
            }
          } else if (child.hasAttribute("_if")) {
            if (parserOptions.canCache()) cacheParserOptions();

            const _if = child.getAttribute("_if");

            child.removeAttribute("_if");

            if (!hasOwnProperty(data, _if)) {
              runNotDefinedIfPropWarning(_if, child, data);

              continue;
            }

            parserOptions.setOptions = {
              if: _if,
              target: child,
              index: index,
            };
          }

          if (isTheLastIteration && parserOptions.canCache())
            cacheParserOptions();
        }
      }

      if (!(typeof IN === "string")) runInvalidRenderIfInOptionError();

      if (!isObj(data)) runInvalidRenderIfDataOptionError();

      // eslint-disable-next-line prefer-const
      for (let [prop, value] of Object.entries(data)) {
        if (reservedProps.has(prop)) {
          runReservedPropWarning(prop);
          continue;
        }

        value = isCallable(value) ? value.call(data) : value;

        if (!isBool(value)) runInvalidConditionalPropValueError(prop);

        data[prop] = value;
      }

      parseAttrs(theContainer);

      const reactor = runRenderingSystem(conditionalRenderingCache, data);
      return reactor;
    }
  }

  function runRenderingSystem(ArrayOfOptions, data) {
    function falsefyProps(conditionalProps, changedProp) {
      if (isFalse(proxyTarget[changedProp]) || conditionalProps.length < 2)
        return;

      for (const prop of conditionalProps) {
        const hasTrueValue = isTrue(proxyTarget[prop]);

        if (hasTrueValue && prop !== changedProp) {
          proxyTarget[prop] = false;
        }
      }
    }

    function renderElseIf(elseIfs, options) {
      function lastRenderedHasParent() {
        return options.lastRendered.target.parentNode != null;
      }

      let rendered = false;

      for (const { target, elseIf } of elseIfs) {
        const lastRendered = options.lastRendered;

        if (lastRendered.target && isTrue(proxyTarget[lastRendered.prop])) {
          rendered = true;

          break;
        }

        if (
          lastRendered.target &&
          isFalse(proxyTarget[lastRendered.prop]) &&
          lastRenderedHasParent()
        ) {
          options.rootElement.removeChild(lastRendered.target);
          options.lastRendered = { prop: void 0, target: void 0 };
        }

        if (isTrue(proxyTarget[elseIf])) {
          insertBefore(options.rootElement, target);

          options.lastRendered = {
            prop: elseIf,
            target: target,
          };

          rendered = true;
          if (
            lastRendered.target &&
            !isDefined(lastRendered.prop) &&
            lastRenderedHasParent()
          ) {
            /*The last rendered element was the one with the _else attribute*/

            options.rootElement.removeChild(lastRendered.target);
          }
        }
      }

      return rendered;
    }

    function checkWhatToRender(source, changedProp) {
      for (const options of ArrayOfOptions) {
        const {
          target,
          if: IF,
          elseIfs,
          else: ELSE,
          ifNot,
          rootElement,
        } = options;
        const conditionalProps = options.conditionalProps;
        const isInConditionalGroup = new Set(conditionalProps).has(changedProp);

        if (isDefined(changedProp) && isInConditionalGroup)
          falsefyProps(conditionalProps, changedProp);

        if (ifNot) {
          if (isFalse(source[ifNot]) && target.parentNode == null) {
            if (rootElement.textContent.trim().length > 0) {
              insertBefore(rootElement, target);
            } else {
              rootElement.appendChild(target);
            }
          } else {
            if (target.parentNode == rootElement && isTrue(source[ifNot])) {
              rootElement.removeChild(target);
            }
          }
        } else if (isFalse(source[IF])) {
          if (target.parentNode == rootElement && !ELSE) {
            rootElement.removeChild(target);
            renderElseIf(elseIfs, options);
          } else if (ELSE || elseIfs.length > 0) {
            const rendered = renderElseIf(elseIfs, options);

            if (target.parentNode != null) rootElement.removeChild(target);
            if (rendered && ELSE && ELSE.parentNode != null) {
              ELSE.parentNode.removeChild(ELSE);
            } else if (!rendered && ELSE && ELSE.parentNode == null) {
              insertBefore(rootElement, ELSE);
              options.lastRendered = {
                target: ELSE,
                prop: void 0,
              };
            }
          }
        } else if (isTrue(source[IF])) {
          if (target.parentNode == null) {
            if (ELSE && ELSE.parentNode != null) {
              rootElement.removeChild(ELSE);
              insertBefore(rootElement, target);
            } else {
              insertBefore(rootElement, target);
            }

            const { target: _target } = options.lastRendered;

            if (
              isAtag(_target) &&
              _target.parentNode != null &&
              !_target.isSameNode(target)
            ) {
              _target.parentNode.removeChild(_target);
            }

            options.lastRendered = {
              target: target,
              prop: IF,
            };
          }
        }
      }
    }
    function insertBefore(root, target) {
      const children = getChildNodes(root),
        lastChild = children[children.length - 1];

      if (target && target.parentNode == null) {
        if (lastChild && lastChild.index > target.index) {
          for (const child of children) {
            if (child.index > target.index) {
              root.insertBefore(target, child);

              break;
            }
          }
        } else {
          root.appendChild(target);
        }
      }
    }

    function runObserveCallBack(prop, value) {
      if (observer.size == 1) {
        const callBack = observer.get("callBack");

        callBack(prop, value);
      }
    }

    const reservedProps = new Set(["setConds", "observe"]);
    const observer = new Map();
    const proxyTarget = Object.assign({}, data);

    checkWhatToRender(proxyTarget);

    const reactor = new Proxy(proxyTarget, {
      set(target, prop, value) {
        if (prop in target && target[prop] == value) return false;
        if (!(prop in data) && !reservedProps.has(prop)) {
          runNotDefinedConditionalPropWarning(prop);

          return false;
        }

        if (!isBool(value) && !reservedProps.has(prop)) {
          runInvalidConditionalPropValueError(prop);

          return false;
        }

        Reflect.set(target, prop, value);

        if (!reservedProps.has(prop)) {
          checkWhatToRender(proxyTarget, prop);

          runObserveCallBack(prop, value);
        }

        return true;
      },

      deleteProperty() {
        return false;
      },
    });

    Object.defineProperties(reactor, {
      observe: {
        value(fn) {
          if (!isCallable(fn)) runInvalidRenderIfObserveArgumentError();

          if (observer.size == 0) {
            observer.set("callBack", fn);

            return true;
          }

          return false;
        },
        enumerable: !1,
        writable: !1,
      },
      setConds: {
        set(conditions) {
          if (!isObj(conditions)) runInvalidSetCondsValueError(conditions);

          // eslint-disable-next-line prefer-const
          for (let [prop, cond] of Object.entries(conditions)) {
            if (reservedProps.has(prop)) {
              runReservedPropWarning(prop);
              continue;
            }

            cond = isCallable(cond) ? cond.call(data) : cond;

            if (!isBool(cond)) runInvalidConditionalPropValueError(prop);

            if (!hasOwnProperty(this, prop)) {
              runNotDefinedConditionalPropWarning(prop);
              continue;
            }

            if (this[prop] == cond) continue;

            proxyTarget[prop] = cond;

            runObserveCallBack(prop, cond);
          }

          checkWhatToRender(proxyTarget);
        },
        enumerable: !1,
      },
    });

    return reactor;
  }

  function createEvents(events, container) {
    Object.entries(events).forEach((event) => {
      const [name, handler] = event;

      if (validDomEvent(name)) {
        if (isCallable(handler)) {
          container[name] = handler;
        } else runInvalidEventHandlerWarning(name);
      } else runInvalidEventWarning(name);
    });
  }

  function createAttrs(attrs, container) {
    Object.entries(attrs).forEach((attr) => {
      // eslint-disable-next-line prefer-const
      let [name, value] = attr;
      let hasWarning = false;
      const specialAttrs = new Set(["value", "currentTime", "checked"]);

      if ((name.startsWith("on") && validDomEvent(name)) || name == "style") {
        runIllegalAttrsPropWarning(name);
        hasWarning = true;
      }

      const setAttr = (attrValue) => {
        if (isDefined(attrValue) && !isFalse(attrValue)) {
          if (!specialAttrs.has(name)) container.setAttribute(name, attrValue);
          else container[name] = attrValue;
        }
        container.template.attrs[name] = attrValue;
      };

      if (!hasWarning) {
        if (isCallable(value)) {
          value = value();

          setAttr(value);
        } else {
          setAttr(value);
        }
      }
    });
  }

  function createStyles(styles, container) {
    Object.entries(styles).forEach((style) => {
      const [name, value] = style;

      if (validStyleName(name)) {
        const styleValue = isCallable(value) ? value() : value;

        if (isDefined(styleValue)) {
          container.style[name] = styleValue;
          container.template.styles[name] = styleValue;
          if (!container.style[name]) runInvalidStyleValue(name, styleValue);
        }
      } else runInvalidStyleWarning(name);
    });
  }

  function createTextOrChildren(text, children, container) {
    if (isDefined(text) && children.length == 0) {
      const textContent = isCallable(text)
        ? createText(text())
        : createText(text);

      if (isDefined(textContent)) container.appendChild(textContent);
    } else if (isDefined(text) && children.length > 0) {
      runIllegalTextWarning();
      createChildren(container, children);
    } else {
      if (children.length > 0) {
        createChildren(container, children);
      }
    }
  }

  function template(obj) {
    if (isObj(obj)) {
      const temp = Symbol.for("template");

      return {
        [temp]: !0,
        element: obj,
      };
    } else runInvalidTemplateArgumentError(obj);
  }

  function toDOM(obj, isChild, index) {
    /* eslint-disable prefer-const */
    let {
      tag,
      text,
      attrs = {},
      events = {},
      styles = {},
      children = [],
    } = obj;

    /*eslint-enable prefer-const*/

    tag = isCallable(tag) ? tag() : tag;
    text = isCallable(text) ? text() : text;
    const hasRenderIfProp = hasOwnProperty(obj, "renderIf");

    if (hasRenderIfProp && !isChild) {
      runCanNotRenderConditionallyWarning();
    }

    if (!validTagOption(tag)) runInvalidTagOptionError(tag);
    if (!validObjectOptions(attrs, styles, events))
      runInvalidObjectOptionsError();

    const container = document.createElement(tag);
    container.template = Object.assign(obj, {
      target: container,
      tag: tag,
      text: text,
    }); // For diffing task.

    if (isChild) {
      container.index = index;
    }

    createAttrs(attrs, container);
    createEvents(events, container);
    createStyles(styles, container);
    createTextOrChildren(text, children, container);

    return container;
  }

  function createChildren(root, children) {
    let index = -1;

    for (const child of children) {
      /* eslint-disable prefer-const */
      let {
        tag,
        text,
        attrs = {},
        events = {},
        styles = {},
        children = [],
        renderIf,
      } = child;

      /* eslint-enable prefer-const */

      index++;
      child.index = index;

      tag = isCallable(tag) ? tag() : tag;
      text = isCallable(text) ? text() : text;

      if (isNegativeValue(renderIf) && hasOwnProperty(child, "renderIf"))
        continue;

      if (!validTagOption(tag)) runInvalidTagOptionError(tag);

      if (!validObjectOptions(attrs, styles, events))
        runInvalidObjectOptionsError();

      const container = document.createElement(tag);
      container.index = index;
      container.template = Object.assign(child, {
        target: container,
        tag: tag,
        text: text,
      }); //For diffing task.

      createAttrs(attrs, container);
      createEvents(events, container);
      createStyles(styles, container);
      createTextOrChildren(text, children, container);
      root.appendChild(container);
    }
  }

  /**
   *  Reactive system for listing.
   *
   */

  function checkType(arg, call, _, indexObj) {
    if (isObj(arg)) defineReactiveObj(arg, call, indexObj);
    else if (isArray(arg)) defineReactiveArray(arg, call, indexObj);
    else if (isMap(arg)) defineReactiveMap(arg, call);
    else if (isSet(arg)) defineReactiveSet(arg, call, false, null, indexObj);
  }

  function defineReactiveSymbol(obj) {
    if (hasReactiveSymbol(obj)) return false;
    const symbol = Symbol.for("reactive");

    Object.defineProperty(obj, symbol, {
      get: () => true,
    });
  }

  function hasReactiveSymbol(obj) {
    const symbol = Symbol.for("reactive");

    return hasOwnProperty(obj, symbol);
  }

  function defineReactiveObj(obj, renderingSystem, indexObj) {
    const reservedProps = new Set(["setProps", "defineProps", "deleteProps"]);

    function defineReservedProps(props) {
      for (const { name, setHandler } of props) {
        Object.defineProperty(obj, name, {
          set: setHandler,
        });
      }
    }

    const indexSymbol = Symbol.for("index");
    if (isObj(indexObj)) {
      obj[indexSymbol] = indexObj;
    }

    function defineReactiveProp(prop) {
      let readValue = obj[prop];

      obj[prop] = void 0;
      Object.defineProperty(obj, prop, {
        set(newValue) {
          readValue = newValue;

          if (isTringOrNumber(newValue) && readValue == newValue) return;

          if (obj[indexSymbol]) {
            const index = obj[indexSymbol].index;
            renderingSystem(index);
          } else renderingSystem();

          const hasIndexObj = isObj(indexObj);

          checkType(
            newValue,
            renderingSystem,
            null,
            hasIndexObj ? indexObj : null
          );
        },

        get() {
          return readValue;
        },
        configurable: !0,
      });
    }

    function deleteProps(props) {
      if (!isArray(props)) runInvalidDeletePropsValueError(props);
      const index = isObj(indexObj) ? indexObj.index : void 0;
      for (const prop of props) {
        if (typeof prop !== "string") continue;
        else if (!hasOwnProperty(obj, prop)) continue;
        else if (!reservedProps.has(prop)) delete obj[prop];
      }

      renderingSystem(index);
    }

    function defineProps(props) {
      if (!isObj(props)) runInvalidDefinePropsValueError(props);
      const index = isObj(indexObj) ? indexObj.index : void 0;
      for (const [prop, value] of Object.entries(props)) {
        if (!(prop in this) && !reservedProps.has(prop)) {
          obj[prop] = value;
          defineReactiveProp(prop);
          checkType(obj[prop], renderingSystem, null, indexObj);
        }

        renderingSystem(index);
      }
    }

    function setProps(props) {
      if (!isObj(props)) runInvalidSetPropsValueError(props);

      for (const [prop, value] of Object.entries(props)) {
        if (!reservedProps.has(prop)) obj[prop] = value;
      }
    }

    if (hasReactiveSymbol(obj)) {
      //The object is already reactive
      //So, we must skip all the task.

      return true;
    }

    if (isNotConfigurable(obj)) {
      runCanNotDefineReactivePropWarning();
      return false;
    }

    for (const prop of Object.keys(obj)) {
      if (reservedProps.has(prop)) runDetecteReservedPropdWarnig(prop);

      defineReactiveProp(prop);

      checkType(obj[prop], renderingSystem, null, indexObj);
    }

    const reservedPropsSetting = [
      { name: "defineProps", setHandler: defineProps },
      { name: "setProps", setHandler: setProps },
      { name: "deleteProps", setHandler: deleteProps },
    ];

    defineReservedProps(reservedPropsSetting);
    defineReactiveSymbol(obj);
  }

  function exactElToRemove(obj) {
    if (isObj(obj)) _inObj(...arguments);
    else if (isSet(obj)) _inSet(...arguments);
    else _inMap(...arguments);
  }

  function _inObj(obj, key, root) {
    const keys = Object.keys(obj);

    keys.some((prop, i) => {
      if (prop == key) _exactRemove(root, i);
    });
  }

  function _inSet(set, key, root) {
    const obj = Array.from(set);

    obj.some((item, i) => {
      if (item == key) _exactRemove(root, i);
    });
  }

  function _inMap(obj, key, root) {
    let i = -1;

    obj.forEach(() => {
      i++;
      const prop = arguments[1];

      if (prop == key) _exactRemove(root, i);
    });
  }

  function _exactRemove(root, i) {
    const elToRmove = root.children[i];

    if (isAtag(elToRmove)) root.removeChild(elToRmove);
  }

  function runObserveCallBack(each, proxy) {
    const observe = Symbol.for("observe");
    if (typeof each[observe] === "function")
      each[observe](isDefined(proxy) ? proxy : each);
  }

  function createArrayReactor(each, renderingSystem) {
    if (isNotConfigurable(each)) runNotConfigurableArrayError();

    const customProps = new Set(["addItems", "setEach"]);

    return new Proxy(each, {
      set(target, prop, value, proxy) {
        if (customProps.has(prop)) {
          Reflect.set(...arguments);
          return true;
        }

        Reflect.set(...arguments);

        runObserveCallBack(each, proxy);

        renderingSystem();

        if (typeof value !== "number" && validEachProperty(value))
          checkType(value, renderingSystem);

        return true;
      },

      get(target, prop) {
        /**
         * Note: Don't use Reflet.get(...arguments) here, because if
         * it's an Array of objects it will return an empty object.
         *
         */

        return target[prop];
      },
    });
  }

  function defineListReactorSetProps(obj, renderingSystem) {
    Object.defineProperty(obj, "setProps", {
      set(props) {
        if (!isObj(props)) runInvalidSetPropsValueError();

        for (const [prop, value] of Object.entries(props)) {
          if (isObj(obj)) this[prop] = value;
          else if (isMap(obj)) obj.set(prop, value);

          checkType(value, renderingSystem);
        }

        if (isObj(obj)) renderingSystem();
      },
    });
  }

  function createObjReactor(each, renderingSystem, root) {
    if (isNotConfigurable(each)) runNotConfigurableArrayError();

    defineListReactorSetProps(each, renderingSystem);

    const specialProps = new Set(["observe"]);
    const settableRservedProps = new Set(["setEach", "setProps"]);

    function isNotReservedSettableProp(prop) {
      return !settableRservedProps.has(prop);
    }
    defineReactiveSymbol(each);

    return new Proxy(each, {
      set(target, prop, value, proxy) {
        if (specialProps.has(prop)) return false;
        if (isTringOrNumber(value) && value == target[prop]) return false;

        Reflect.set(...arguments);

        if (isNotReservedSettableProp(prop)) {
          renderingSystem();
          runObserveCallBack(each, proxy);

          if (typeof value !== "number" && validEachProperty(value))
            checkType(value, renderingSystem);
        }

        return true;
      },

      get() {
        return Reflect.get(...arguments);
      },

      deleteProperty(target, prop, proxy) {
        if (prop in target) {
          exactElToRemove(target, prop, root);
          Reflect.deleteProperty(...arguments);
          renderingSystem();
          runObserveCallBack(each, proxy);

          return true;
        }

        consW(`You are trying to delete the "${prop}" property in the list
            reactor, but that property does not exist in the list reactor.`);
      },
    });
  }

  function mutateArrayMap(array) {
    Object.defineProperty(array, "map", {
      value(callBack) {
        const newArray = new Array();
        newArray.reactor = this;
        let index = -1;

        for (const item of this) {
          index++;

          const returnValue = callBack(item, index, this);
          newArray.push(returnValue);
        }

        return newArray;
      },
    });
  }

  function defineReactiveArray(array, renderingSystem, indexObj) {
    if (hasReactiveSymbol(array)) return false;

    const mutationMethods = [
      "push",
      "unshift",
      "pop",
      "shift",
      "splice",
      "sort",
      "reverse",
    ];

    for (const method of mutationMethods) {
      Object.defineProperty(array, method, {
        value(start, deleteCount, ...items) {
          if (method == "pop")
            this.mutationInfo = {
              method: "pop",
              renderingSystem: renderingSystem,
            };
          else if (method == "shift")
            this.mutationInfo = {
              method: "shift",
              renderingSystem: renderingSystem,
            };
          else if (method == "push")
            this.mutationInfo = {
              method: "push",
              itemsLength: arguments.length,
              renderingSystem: renderingSystem,
            };
          else if (method == "unshift")
            this.mutationInfo = {
              method: "unshift",
              itemsLength: arguments.length,
              renderingSystem: renderingSystem,
            };
          else if (method == "splice") {
            this.mutationInfo = {
              method: "splice",
              start: start,
              deleteCount: deleteCount,
              itemsLength: isDefined(items) ? items.length : 0,
              renderingSystem: renderingSystem,
            };
          }

          const ArrayPrototypeMethodReturn = Array.prototype[method].apply(
            this,
            arguments
          );

          renderingSystem();

          this.mutationInfo = void 0;

          if (method === "push" || method === "unshift") {
            for (const arg of arguments) {
              checkType(arg, renderingSystem, null, indexObj);
            }
          } else if (method === "splice" && isDefined(items)) {
            for (const item of items) {
              checkType(item, renderingSystem, null, indexObj);
            }
          }

          return ArrayPrototypeMethodReturn;
        },
      });
    }

    walkArray(array, renderingSystem, indexObj);
    defineReactiveSymbol(array);
    mutateArrayMap(array);
  }

  function defineReactiveMap(map, renderingSystem, listReactor, root) {
    if (hasReactiveSymbol(map)) return false;

    const mutationMethods = ["set", "delete", "clear"];

    for (const method of mutationMethods) {
      Object.defineProperty(map, method, {
        value() {
          if (method == "delete" && listReactor)
            exactElToRemove(this, arguments[0], root);
          const MapPrototypeMethodReturn = Map.prototype[method].apply(
            this,
            arguments
          );
          if (listReactor) runObserveCallBack(this);
          renderingSystem();

          if (method == "set") {
            const value = arguments[1];

            checkType(value, renderingSystem);
          }

          return MapPrototypeMethodReturn;
        },
      });
    }

    walkMap(map, renderingSystem);
    defineReactiveSymbol(map);
    if (listReactor) defineListReactorSetProps(map, renderingSystem);
  }

  function defineReactiveSet(
    set,
    renderingSystem,
    listReactor,
    root,
    indexObj
  ) {
    if (hasReactiveSymbol(set)) return false;

    const mutationMethods = ["add", "clear", "delete"];

    for (const method of mutationMethods) {
      Object.defineProperty(set, method, {
        value() {
          if (method == "delete" && listReactor)
            exactElToRemove(this, arguments[0], root);
          const SetPrototypeMethodReturn = Set.prototype[method].apply(
            this,
            arguments
          );
          renderingSystem();
          if (listReactor) runObserveCallBack(this);
          if (method === "add") {
            checkType(arguments[0], renderingSystem);
          }

          return SetPrototypeMethodReturn;
        },
      });
    }

    walkSet(set, renderingSystem, indexObj);
    defineReactiveSymbol(set);
  }

  function walkMap(map, call) {
    /**
     * The goal here is to iterate through the map collection
     * and if we found an object, an array, a set or even a map, we must make it reactive.
     *
     */

    map.forEach((value) => {
      checkType(value, call);
    });
  }

  function walkArray(array, call, indexObj) {
    for (const item of array) {
      checkType(item, call, null, indexObj);
    }
  }

  function walkSet(set, call, indexObj) {
    set.forEach((value) => {
      checkType(value, call, null, indexObj);
    });
  }

  function redefineArrayMutationMethods(
    array,
    htmlEl,
    renderingSystem,
    DO,
    pro
  ) {
    function render(item, i, start, secondI) {
      const temp = DO.call(pro, item, i, pro);
      const newChild = toDOM(temp.element);
      const domChild = htmlEl.children[start];

      if (!isValidTemplateReturn(temp)) runInvalidTemplateReturnError();

      if (newChild && isDefined(start)) {
        htmlEl.insertBefore(newChild, domChild);
      } else {
        htmlEl.appendChild(newChild);
      }

      if (isDefined(secondI)) i = secondI;

      renderingSystem(i, true);
    }

    function ArrayPrototypeShiftHandler() {
      const ArrayPrototypeShiftReturn = Array.prototype.shift.apply(
        array,
        void 0
      );
      const firstNodeElement = htmlEl.children[0];

      if (firstNodeElement) {
        htmlEl.removeChild(firstNodeElement);

        renderingSystem();
        runObserveCallBack(array);
      }

      return ArrayPrototypeShiftReturn;
    }

    function ArrayPrototypePopHandler() {
      const ArrayPrototypePopReturn = Array.prototype.pop.apply(
        array,
        arguments
      );
      const children = htmlEl.children;
      const lastNodeElement = children[children.length - 1];

      if (lastNodeElement) {
        htmlEl.removeChild(lastNodeElement);
        renderingSystem();
        runObserveCallBack(array);
      }

      return ArrayPrototypePopReturn;
    }

    function ArrayPrototypePushHandler() {
      const ArrayPrototypePushReturn = Array.prototype.push.apply(
        array,
        arguments
      );

      if (arguments.length == 1) render(...arguments, array.length - 1);
      else if (arguments.length > 1) {
        let length = arguments.length;
        for (const item of arguments) render(item, array.length - length--);
      }

      renderingSystem();
      runObserveCallBack(array);

      return ArrayPrototypePushReturn;
    }

    function ArrayPrototypeUnshiftHandler() {
      const ArrayPrototypeUnshiftReturn = Array.prototype.unshift.apply(
        array,
        arguments
      );

      if (arguments.length > 1) {
        let i = arguments.length;

        for (let index = i - 1; index > -1; index--)
          render(arguments[--i], 0, 0, i);
      } else if (arguments.length == 1) render(...arguments, 0, 0);

      renderingSystem();
      runObserveCallBack(array);

      return ArrayPrototypeUnshiftReturn;
    }

    function ArrayPrototypeSpliceHandler(start, deleteCount, ...items) {
      const ArrayPrototypeSpliceReturn = Array.prototype.splice.apply(
        array,
        arguments
      );

      function deleteChildren() {
        const length = deleteCount;
        for (let i = 0; i < length; i++) {
          const child = htmlEl.children[start];

          if (child) htmlEl.removeChild(child);
        }
      }

      function insertBehind() {
        for (let i = items.length - 1; i > -1; i--) render(items[i], i, start);
      }

      if (deleteCount > 0 && items.length > 0) {
        deleteChildren();
        insertBehind();
      }

      if (items.length == 0) deleteChildren();
      else if (deleteCount == 0 && items.length > 0) insertBehind();

      renderingSystem();

      runObserveCallBack(array);

      return ArrayPrototypeSpliceReturn;
    }

    const mutatedMethods = [
      { name: "unshift", handler: ArrayPrototypeUnshiftHandler },
      { name: "shift", handler: ArrayPrototypeShiftHandler },
      { name: "push", handler: ArrayPrototypePushHandler },
      { name: "pop", handler: ArrayPrototypePopHandler },
      { name: "splice", handler: ArrayPrototypeSpliceHandler },
    ];

    if (isNotConfigurable(array)) return false;

    //It is already reactive array.
    if (hasReactiveSymbol(array)) return false;

    for (const { name, handler } of mutatedMethods) {
      Object.defineProperty(array, name, {
        value: handler,
      });
    }
  }

  function renderList(options) {
    function defineListReactor(each, renderingSystem, root) {
      if (isArray(each)) {
        defineCustomArrayProps(each);
        return createArrayReactor(each, renderingSystem);
      } else if (isObj(each)) {
        return createObjReactor(each, renderingSystem, root);
      } else if (isSet(each)) {
        defineReactiveSet(each, renderingSystem, true, root);

        return each;
      } else {
        if (isMap(each)) {
          defineReactiveMap(each, renderingSystem, true, root);

          return each;
        }
      }
    }

    if (new.target !== void 0) {
      syErr(`renderList is not a constructor, do not call
        it with the "new" keyword.`);
    }

    if (!isObj(options)) {
      syErr(
        "The options(the argument of renderList) must be a plain Javascript object."
      );
    }

    /*eslint-disable prefer-const*/

    let { in: IN, each, do: DO, optimize } = options;

    /*eslint-enable prefer-const*/

    const root = getId(IN);

    if (!validInProperty(IN)) {
      syErr("The 'in' option in renderList must be a string.");
    }

    if (!validEachProperty(each)) runUnsupportedEachValueError(each);

    if (!isCallable(DO)) {
      syErr(
        "The value of the 'do' option in renderList must be only a function."
      );
    }

    if (isDefined(optimize) && !isTrue(optimize)) {
      syErr(
        "The value of the 'optimize' option in renderList must be only true"
      );
    }

    if (isDefined(optimize) && !isArray(each)) {
      syErr(
        "The 'optimize' option can only be enabled when the each's value is an Array."
      );
    }

    let pro,
      firstRender = true;

    function setEachHandler(newEach) {
      if (!validEachProperty(newEach)) runUnsupportedEachValueError(newEach);

      const observeSymbol = Symbol.for("observe");
      newEach[observeSymbol] = each[observeSymbol];
      each = newEach;

      if (!hasReactiveSymbol(newEach)) proSetup();

      renderingSystem();
      runObserveCallBack(each);

      if (typeof each !== "number") {
        const iterable = new Iterable(each);

        iterable.each((data, index, type) => {
          if (type == "object") checkType(data[1], renderingSystem);
          else if (type == "array" || type == "set")
            checkType(data, renderingSystem);
        });
      }
    }

    function proSetup() {
      if (hasReactiveSymbol(each)) return false;
      Object.defineProperties(each, {
        setEach: { set: setEachHandler },
        observe: {
          value(callBack) {
            const observe = Symbol.for("observe");
            if (typeof this[observe] === "function") return false;
            if (!isCallable(callBack))
              syErr("The argument of the observe method must be a function.");
            else {
              Object.defineProperty(this, observe, {
                value: callBack,
                configurable: !1,
              });

              return true;
            }
          },
        },
      });

      pro = defineListReactor(each, renderingSystem, root, true);

      if (isArray(each))
        redefineArrayMutationMethods(each, root, renderingSystem, DO, pro);

      defineReactiveSymbol(each);
    }

    function defineProp(obj, prop, descriptiors) {
      Object.defineProperty(obj, prop, descriptiors);
    }

    function defineCustomArrayProps(array) {
      if (hasReactiveSymbol(array)) return false;

      function addItemsHandler(items, position) {
        if (isDefined(position) && typeof position !== "number")
          runInvalidAddItemsSecodArgumentError();

        if (!isArray(items)) runInvalidAddItemsFirstArgumentError();
        if (!isDefined(position) || position > this.length - 1) {
          for (const item of items) {
            this.push(item);
          }
        } else if (position == 0 || position < 0) {
          for (let i = items.length - 1; i > -1; i--) {
            this.unshift(items[i]);
          }
        } else {
          for (let i = items.length - 1; i > -1; i--) {
            this.splice(position, 0, items[i]);
          }
        }
      }

      const customProps = [{ name: "addItems", handler: addItemsHandler }];

      for (const { name, handler } of customProps)
        defineProp(array, name, { value: handler });
    }

    if (typeof each !== "number") proSetup();

    function renderingSystem(__index__, perfOptimization) {
      const iterable = new Iterable(each);

      synchronizeRootChildrenLengthAndSourceLength(root, iterable);

      iterable.each((data, index, type) => {
        let newTemp, indexObj;

        if (type == "array") {
          if (isDefined(__index__)) {
            data = pro[__index__];
            index = __index__;
            iterable.break = true;
          }

          const indexSymbol = Symbol.for("index");
          const canOptimize = () =>
            isTrue(optimize) &&
            (isObj(data) || isArray(data) || isSet(data)) &&
            !hasOwnProperty(data, indexSymbol);
          indexObj = {
            index: index,
            sourceLength: pro.length,
          };

          if (canOptimize()) data[indexSymbol] = indexObj;
          else if (
            (isObj(data) || isArray(data) || isSet(data)) &&
            hasOwnProperty(data, indexSymbol)
          ) {
            const hasDifferentSourceLength = () =>
              data[indexSymbol].sourceLength !== indexObj.sourceLength;
            if (hasDifferentSourceLength())
              shareProps(data[indexSymbol], indexObj);
          }
        }

        if (firstRender || perfOptimization) {
          checkType(
            type !== "object" ? data : data[1] /*obj prop*/,
            renderingSystem,
            DO,
            isTrue(optimize) ? indexObj : null
          );
        }

        if (perfOptimization) return;

        function checkIterationSourceType() {
          if (type === "array") {
            newTemp = DO.call(pro, data, index, pro);
          } else if (type === "object") {
            newTemp = DO.call(pro, data[0] /*prop*/, data[1] /*value*/, pro);
          } else if (type === "number") {
            newTemp = DO(data);
          } else {
            //The type is set.

            newTemp = DO.call(pro, data, pro);
          }
        }

        checkIterationSourceType();

        // The  function is returning the template.
        if (isValidTemplateReturn(newTemp)) {
          const currentEl = root.children[index];

          if (!isAtag(currentEl)) {
            root.appendChild(toDOM(newTemp.element));
          } else {
            if (!currentEl.template) {
              consW("Avoid manipulating what Inter manipulates.");

              /**
               * currentEl was not rendered by Inter, in
               * this case we must replace it with an element
               * rendered by Inter to avoid diffing problems.
               */

              root.replaceChild(toDOM(newTemp.element), currentEl);
            } else {
              runDiff(newTemp.element, currentEl.template, currentEl);
            }
          }
        } else runInvalidTemplateReturnError();
      });
    }

    renderingSystem();

    firstRender = false;

    return pro;
  }

  function runDiff(newTemp, oldTemp, oldRoot) {
    const diff = {
      children: true,
      continue: true,
    };

    runContainerDiffing(newTemp, oldTemp, diff);

    if (diff.children && newTemp.children && newTemp.children.length > 0) {
      runChildrenDiffing(newTemp.children, oldTemp.children, oldRoot, diff);
    }
  }

  function isOneAnArrayAndOtherNot(first, second) {
    return (
      (isArray(first) && !isArray(second)) ||
      (!isArray(first) && isArray(second))
    );
  }

  function AreBothArray(first, second) {
    return isArray(first) && isArray(second);
  }

  function getValue(text) {
    if (typeof text === "function") text = text();
    return text;
  }

  function runNestedListDiffing(reactor, target, newChildren, oldChildren) {
    if (reactor.mutationInfo == void 0) return;
    const {
      mutationInfo: { method, start, deleteCount, itemsLength },
    } = reactor;

    function addByPush() {
      let i = itemsLength;

      for (; i > 0; i--) {
        const child = newChildren[newChildren.length - i];

        target.appendChild(toDOM(child, true, child.index));
        oldChildren.push(child);
      }
    }

    function AddByUnShiftOrSplice(mutationMethod) {
      function insertBehind(start, itemsLength) {
        for (let i = itemsLength - 1; i > -1; i--) {
          const child = target.children[start];
          const virtualChild = newChildren[i];
          const newChild = toDOM(virtualChild, true, virtualChild.index);

          if (child) target.insertBefore(newChild, child);
          else target.appendChild(newChild);

          addedtems.unshift(virtualChild);
        }
      }

      const addedtems = new Array();

      if (mutationMethod == "splice" && deleteCount == 0 && itemsLength > 0) {
        insertBehind(start, itemsLength);
        oldChildren.splice(start, deleteCount, ...addedtems);
      } else if (mutationMethod == "splice" && deleteCount > 0) {
        for (let i = 0; i < deleteCount; i++) {
          const child = target.children[start];

          if (child) target.removeChild(child);
        }

        insertBehind(start, itemsLength);

        oldChildren.splice(start, deleteCount, addedtems);
      } else if (mutationMethod == "unshift") {
        insertBehind(0, itemsLength);

        oldChildren.unshift(...addedtems);
      }
    }

    function deleteBySplice() {
      let i = start;
      for (; newChildren.length < target.children.length; i++) {
        const elToRemove = target.children[start];
        if (elToRemove) target.removeChild(elToRemove);
      }

      oldChildren.splice(start, deleteCount);
    }

    const lastNodeElement = target.children[target.children.length - 1];
    const firstNodeElement = target.children[0];
    if (method == "pop" && lastNodeElement) {
      target.removeChild(lastNodeElement);
      oldChildren.pop();
    } else if (method == "shift" && firstNodeElement) {
      target.removeChild(firstNodeElement);
      oldChildren.shift();
    } else if (method == "push") addByPush();
    else if (method == "unshift") AddByUnShiftOrSplice(method);
    else if (method == "splice") {
      if (
        typeof start == "number" &&
        typeof deleteCount == "number" &&
        itemsLength == 0
      )
        deleteBySplice();
      else if (itemsLength > 0) AddByUnShiftOrSplice(method);
      else if (deleteCount == void 0) {
        const data = {
          source: {
            values: newChildren,
          },
        };

        synchronizeRootChildrenLengthAndSourceLength(target, data);
      }
    }
  }

  function runContainerDiffing(newContainer, oldContainer, diff) {
    const {
      attrs: newAttrs = {},
      events: newEvents = {},
      styles: newStyles = {},
      children: newChildren,
    } = newContainer;

    const {
      attrs: oldAttrs = {},
      events: oldEvents = {},
      styles: oldStyles = {},
      children: oldChildren,
      target,
    } = oldContainer;

    let reactor;

    if (isArray(newChildren)) reactor = newChildren.reactor;

    if (reactor != void 0)
      runNestedListDiffing(reactor, target, newChildren, oldChildren);

    const rootEL = target.parentNode;
    const newText = getValue(newContainer.text);
    const oldText = getValue(oldContainer.text);
    const newTag = getValue(newContainer.tag);
    const oldTag = getValue(oldContainer.tag);

    if (newTag !== oldTag) {
      const newElement = toDOM(newContainer);

      rootEL.replaceChild(newElement, target);

      diff.children = false;

      shareProps(oldContainer, newContainer);
      oldContainer.target = newElement;
    } else if (isOneAnArrayAndOtherNot(newChildren, oldChildren)) {
      const newElement = toDOM(newContainer);

      rootEL.replaceChild(newElement, target);

      diff.children = false;
      shareProps(oldContainer, newContainer);
      oldContainer.target = newElement;
    } else if (
      AreBothArray(newChildren, oldChildren) &&
      newChildren.length !== oldChildren.length
    ) {
      const newElement = toDOM(newContainer);

      rootEL.replaceChild(newElement, target);

      diff.children = false;
      shareProps(oldContainer, newContainer);
      oldContainer.target = newElement;
    } else if (!isDefined(newChildren) && !isDefined(oldChildren)) {
      if (newText !== oldText) {
        target.textContent = newText;

        shareProps(oldContainer, newContainer);
      }
    }

    runAttributeDiffing(target, oldAttrs, newAttrs);
    runEventDiffing(target, oldEvents, newEvents);
    runStyleDiffing(target, oldStyles, newStyles);
  }

  function shareProps(target, source) {
    Object.assign(target, source);
  }

  function getGreater(firstArray, secondArray) {
    return firstArray.length > secondArray.length ? firstArray : secondArray;
  }

  function runAttributeDiffing(target, oldAttributes, newAttributes) {
    function removeAttr(attr) {
      if (target.hasAttribute(attr)) {
        target.removeAttribute(attr);
      } else if (specialAttrs.has(attr)) {
        if (attr === "checked") target.checked = false;
        else target[attr] = "";
      }
    }

    const oldAttrsArray = Object.keys(oldAttributes),
      newAttrsArray = Object.keys(newAttributes),
      greater = getGreater(oldAttrsArray, newAttrsArray),
      specialAttrs = new Set(["value", "currentTime", "checked"]);

    for (let i = 0; greater.length > i; i++) {
      const oldAttrName = oldAttrsArray[i],
        newAttrName = newAttrsArray[i],
        oldAttrValue = getValue(oldAttributes[oldAttrName]),
        newAttrValue = getValue(newAttributes[newAttrName]);

      if (!(oldAttrName in newAttributes)) removeAttr(oldAttrName);
      else if (!isDefined(newAttrValue) || isFalse(newAttrValue))
        removeAttr(newAttrName);
      else if (isDefined(newAttrValue) && !isFalse(newAttrValue)) {
        if (
          (newAttrName.startsWith("on") && validDomEvent(newAttrName)) ||
          newAttrName == "style"
        )
          runIllegalAttrsPropWarning(newAttrName);
        else if (newAttrName !== oldAttrName || newAttrValue !== oldAttrValue) {
          if (specialAttrs.has(newAttrName)) target[newAttrName] = newAttrValue;
          else target.setAttribute(newAttrName, newAttrValue);
        }
      }

      oldAttributes[oldAttrName] = newAttrValue;
    }
  }

  function runStyleDiffing(target, oldStyles, newStyles) {
    const oldStylesArray = Object.keys(oldStyles),
      newStylesArray = Object.keys(newStyles),
      greater = getGreater(oldStylesArray, newStylesArray);

    for (let i = 0; greater.length > i; i++) {
      const oldStyleName = oldStylesArray[i],
        newStyleName = newStylesArray[i],
        oldStyleValue = getValue(oldStyles[oldStyleName]),
        newStyleValue = getValue(newStyles[newStyleName]);

      if (!(oldStyleName in newStyles) || !isDefined(newStyleValue)) {
        const styleValue = target.style[oldStyleName];
        const styleAttr = target.getAttribute("style");
        if (isDefined(styleValue) && styleValue.trim().length !== 0) {
          target.style[oldStyleName] = null;
        }

        if (styleAttr && styleAttr.trim().length == 0)
          target.removeAttribute("style");
      } else if (isDefined(newStyleValue)) {
        if (newStyleValue !== oldStyleValue) {
          if (validStyleName(newStyleName)) {
            target.style[newStyleName] = newStyleValue;

            if (!target.style[newStyleName])
              runInvalidStyleValue(newStyleName, newStyleValue);
          } else runInvalidStyleWarning(newStyleName);
        }
      }

      oldStyles[oldStyleName] = newStyleValue;
    }
  }

  function runEventDiffing(target, oldEvents, newEvents) {
    const oldEventsArray = Object.keys(oldEvents),
      newEventsArray = Object.keys(newEvents),
      greater = getGreater(oldEventsArray, newEventsArray);

    for (let i = 0; greater.length > i; i++) {
      const oldEventName = oldEventsArray[i],
        newEventName = newEventsArray[i];

      if (!(oldEventName in newEvents) || !isDefined(newEvents[oldEventName]))
        target[oldEventName] = void 0;
      if (!isCallable(newEvents[newEventName]) && validDomEvent(newEventName)) {
        target[oldEventName] = void 0;

        runInvalidEventHandlerWarning(newEventName);

        continue;
      }

      if (isDefined(newEvents[newEventName])) {
        if (validDomEvent(newEventName)) {
          target[newEventName] = newEvents[newEventName];
        } else runInvalidEventWarning(newEventName);
      }
    }
  }

  function insertBefore(root, index, virtualElement) {
    for (let i = 0; i < root.children.length; i++) {
      const realElement = root.children[i];
      if (realElement.index > index) {
        root.insertBefore(virtualElement, realElement);
        break;
      }
    }
  }

  function runChildrenDiffing(__new, __old, realParent) {
    const newContainer = Array.from(__new),
      oldContainer = Array.from(__old);

    for (let i = 0; i < newContainer.length; i++) {
      const newChild = newContainer[i],
        oldChild = oldContainer[i];
      let hasChildren = false;

      const {
        children: newChildren = [],
        events: newEvents = {},
        attrs: newAttrs = {},
        styles: newStyles = {},
        renderIf: newRenderIf,
      } = newChild;

      const {
        children: oldChildren = [],
        events: oldEvents = {},
        attrs: oldAttrs = {},
        styles: oldStyles = {},
        target,
        index,
      } = oldChild;

      let theLastElement;
      const newText = getValue(newChild.text);
      const oldText = getValue(oldChild.text);
      const newTag = getValue(newChild.tag);
      const oldTag = getValue(oldChild.tag);
      function insertConditionally() {
        const newELement = toDOM(newChild, true, index);

        Object.assign(oldChild, newChild);

        oldChild.target = newELement;

        if (theLastElement && theLastElement.index > index) {
          insertBefore(realParent, index, newELement);
        } else {
          realParent.appendChild(newELement);
        }
      }

      if (realParent) {
        theLastElement = realParent.children[realParent.children.length - 1];
      }
      if (newChildren.length !== oldChildren.length) {
        const { reactor } = newChildren;

        if (reactor != void 0) {
          runNestedListDiffing(reactor, target, newChildren, oldChildren);
        } else if (target && target.parentNode != null) {
          const newElement = toDOM(newChild, true, index);

          realParent.replaceChild(newElement, target);

          Object.assign(oldChild, newChild);
          oldChild.target = newElement;

          continue;
        }
      }

      if (newTag !== oldTag) {
        const newELement = toDOM(newChild, true, index);

        Object.assign(oldChild, newChild);

        if (target && target.parentNode != null) {
          realParent.replaceChild(newELement, target);
          oldChild.target = newELement;
        }
        continue;
      } else if (
        isNegativeValue(newRenderIf) &&
        hasOwnProperty(newChild, "renderIf")
      ) {
        if (target && target.parentNode != null) {
          realParent.removeChild(target);
        }
      } else if (isPositiveValue(newRenderIf)) {
        if (target && target.parentNode == null) insertConditionally();
        else if (!target) insertConditionally();
      }

      if (
        newChildren.length == oldChildren.length &&
        newChildren.length !== 0
      ) {
        hasChildren = true;

        runChildrenDiffing(newChildren, oldChildren, target);
      }

      if (oldText !== newText && target && !hasChildren) {
        target.textContent = newText;
        oldChild.text = newText;
      }

      oldChild.tag = newTag;

      if (target) {
        runAttributeDiffing(target, oldAttrs, newAttrs);
        runStyleDiffing(target, oldStyles, newStyles);
        runEventDiffing(target, oldEvents, newEvents);
      }
    }
  }

  function synchronizeRootChildrenLengthAndSourceLength(root, iterable) {
    if (root.children.length > iterable.source.values.length) {
      let length = root.children.length - iterable.source.values.length;

      while (length--) {
        const lastElementIndex = root.children.length - 1;
        const lastElement = root.children[lastElementIndex];
        root.removeChild(lastElement);
      }
    }
  }

  /**
   * <div>
   * <p>Olá</p>
   * <p>Olá</p>
   * <p>Olá</p>
   * <!--Added dynamically  -->
   * <p>Olá</p>
   * </div>
   *
   *<div>
   * <p>Olá</p>
   * <p>Olá</p>
   * <p>Olá</p>
   *
   * </div>
   *
   */

  function toObj(obj) {
    if (obj !== void 0) {
      try {
        return JSON.parse(obj);
      } catch (e) {
        return obj;
      }
    }
  }

  function openRequest(req, method, path, username, userpassword) {
    req.open(method, path, true, username, userpassword);
  }

  function createHeaders(headers, req) {
    Object.entries(headers).forEach(([header, value]) => {
      req.setRequestHeader(header, value);
    });
  }

  function createAjaxEvents(req, events, allowedEvents) {
    Object.entries(events).forEach(([name, handler]) => {
      if (allowedEvents.has(name)) {
        if (name !== "onprogress") {
          req[name] = () => {
            handler();
          };
        } else {
          req.onprogress = (ev) => {
            const Arg = {
              abort: () => req.abort(),
              progress: (ev.loaded * 100) / ev.total,
            };

            handler(Arg);
          };
        }
      } else runInvalidAjaxEventWarning(name);
    });
  }

  function convertStringToObj(string, reqObj) {
    function createGetter(obj, prop) {
      //At first we must define the property this way
      // so that the methods Object.keys and Object.values
      //work fine.
      obj[prop] = void 0;
      Object.defineProperty(obj, prop, {
        get() {
          return reqObj.getResponseHeader(prop);
        },
      });
    }

    const pattern = /(:?[\S]+):/g;
    const headers = {};

    string.replace(pattern, (match) => {
      match = match.replace(":", "");
      if (reqObj.getResponseHeader(match)) createGetter(headers, match);
    });

    return Object.freeze(headers);
  }

  function createRequestBody(body) {
    if (!isDefined(body)) return null;
    else if (body instanceof FormData || typeof body == "string") return body;
    else return JSON.stringify(body);
  }

  function isJSON(data) {
    try {
      const parsed = JSON.parse(data);

      return isObj(parsed);
    } catch (e) {
      return false;
    }
  }

  function Backend() {
    if (new.target === void 0) {
      err("Backend is a constructor, call it with the new keyword.");
    }
  }

  Backend.prototype = {
    get [Symbol.toStringTag]() {
      return "Ajax";
    },

    request(obj) {
      if (!isObj(obj)) runIvalidRequestArgumentError(obj);

      const {
        type,
        path,
        events = {},
        timeout,
        withCredentials,
        body = null,
        headers = {},
        security,
      } = obj;

      const unSupportedRequestType = new Set(["connect", "trace"]);

      if (!isDefined(type) || typeof type !== "string")
        runInvalidTypeOptionError();

      if (!isDefined(path) || typeof path !== "string")
        runInvalidPathOptionError();

      if (unSupportedRequestType.has(path.toLowerCase()))
        runUnsupportedRequestTypeWarning(type);

      const responseHandlers = new Map();
      let requestOpened = false;

      function call() {
        const req = new XMLHttpRequest();
        const method = type.toUpperCase();
        const allowedEvents = new Set(["onprogress", "ontimeout", "onabort"]);

        const AjaxResponse = {
          get status() {
            return req.status;
          },

          get statusText() {
            return req.statusText;
          },

          get headers() {
            const stringifiedHeaders = req.getAllResponseHeaders();

            return convertStringToObj(stringifiedHeaders, req);
          },

          get data() {
            return toObj(req.responseText);
          },

          get [Symbol.toStringTag]() {
            return "AjaxResponse";
          },

          isObj() {
            return isJSON(req.responseText);
          },
        };

        if (isObj(security) && Object.keys(security).length >= 2) {
          if (security.username && security.password) {
            openRequest(
              req,
              method,
              path,
              security.username,
              security.password
            );

            requestOpened = true;
          } else runInvalidSecurityObjectWarning();
        }

        if (!requestOpened) {
          openRequest(req, method, path);

          requestOpened = true;
        }

        if (!isObj(headers)) runInvalidHeadersOptionError(headers);
        if (!isObj(events)) runInvalidAjaxEventsOptionError(events);

        if (!isEmptyObj(headers)) createHeaders(headers, req);
        if (!isEmptyObj(events)) createAjaxEvents(req, events, allowedEvents);

        req.onreadystatechange = function () {
          if (this.readyState == 4) {
            if (this.status >= 200 && this.status < 300) {
              if (responseHandlers.has("okay"))
                responseHandlers.get("okay")(AjaxResponse);
            } else {
              if (responseHandlers.has("error"))
                responseHandlers.get("error")(AjaxResponse);
            }
          }
        };

        if (isBool(withCredentials)) {
          req.withCredentials = withCredentials;
        }

        if (typeof timeout !== "number") {
          req.timeout = timeout;
        }

        req.send(createRequestBody(body));
      }

      const responseMethods = {
        okay(callBack) {
          if (!isCallable(callBack)) runInvalidCallBackError();

          responseHandlers.set("okay", callBack);
          //Starting the request...
          call();
        },

        error(callBack) {
          if (!isCallable(callBack)) runInvalidCallBackError();

          responseHandlers.set("error", callBack);
          //Starting the request...
          call();
        },

        response(okay, error) {
          const argNumber = arguments.length;
          if (argNumber < 2) runInvalidResponseArgumentNumberError(argNumber);
          if (!isCallable(okay) && !isCallable(error))
            runInvalidCallBackError();

          responseHandlers.set("okay", okay);
          responseHandlers.set("error", error);
          //Starting the request...
          call();
        },
      };

      return responseMethods;
    },
  };

  Object.freeze(Backend.prototype);
  window.Ref = Ref;
  window.renderIf = renderIf;
  window.renderList = renderList;
  window.template = template;
  window.toAttrs = toAttrs;
  window.Backend = Backend;
  console.log("The global version 2.2.3 of Inter was loaded successfully.");
})();