inter.m.js

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

export const interVersion = "2.2.3";

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();
}
export 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;
    },
  });
}

export 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;
}

export 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);
    }
  }
}

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

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

export 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,
    });
  }
}

export 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;
  }
}

export 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);