@angular-wave/angular.ts 0.0.43 → 0.0.45

package/src/shared/jqlite/jqlite.js

@@ -86,48 +86,17 @@ import { CACHE, EXPANDO } from "../../core/cache/cache";
  * https://github.com/angular/angular.js/issues/14251 for more information.
  *
  * @param {string|Element} element HTML string or Element to be wrapped into jQuery.
- * @returns {Object} jQuery object.
+ * @returns {JQLite} jQuery object.
  */
 
 /** @type {number} */
 let jqId = 1;
 
-function jqNextId() {
-  return ++jqId;
-}
-
 const DASH_LOWERCASE_REGEXP = /-([a-z])/g;
 const UNDERSCORE_LOWERCASE_REGEXP = /_([a-z])/g;
 const MOUSE_EVENT_MAP = { mouseleave: "mouseout", mouseenter: "mouseover" };
 const JQLiteMinErr = minErr("jqLite");
 
-/**
- * @param {string} _all
- * @param {string} letter
- * @returns {string}
- */
-function fnCamelCaseReplace(_all, letter) {
-  return letter.toUpperCase();
-}
-
-/**
- * Converts kebab-case to camelCase.
- * @param {string} name Name to normalize
- * @returns {string}
- */
-export function kebabToCamel(name) {
-  return name.replace(DASH_LOWERCASE_REGEXP, fnCamelCaseReplace);
-}
-
-/**
- * Converts sname to camelCase.
- * @param {string} name
- * @returns {string}
- */
-export function snakeToCamel(name) {
-  return name.replace(UNDERSCORE_LOWERCASE_REGEXP, fnCamelCaseReplace);
-}
-
 const SINGLE_TAG_REGEXP = /^<([\w-]+)\s*\/?>(?:<\/\1>|)$/;
 const TAG_NAME_REGEXP = /<([\w:-]+)/;
 
@@ -172,7 +141,7 @@ const BOOLEAN_ELEMENTS = {};
  */
 export function JQLite(element) {
   if (element instanceof JQLite) {
-    return element;
+    return /** @type {JQLite} */ (element);
   }
 
   let argIsString = false;
@@ -202,787 +171,846 @@ export function JQLite(element) {
   }
 }
 
-function JQLiteOff(element, type, fn, unsupported) {
-  if (isDefined(unsupported))
-    throw JQLiteMinErr(
-      "offargs",
-      "jqLite#off() does not support the `selector` argument",
-    );
+/// ///////////////////////////////////////
+// Functions which are declared directly.
+/// ///////////////////////////////////////
+JQLite.prototype = {
+  toString() {
+    const value = [];
+    forEach(this, (e) => {
+      value.push(`${e}`);
+    });
+    return `[${value.join(", ")}]`;
+  },
 
-  const expandoStore = getExpando(element);
-  const events = expandoStore && expandoStore.events;
-  const handle = expandoStore && expandoStore.handle;
+  eq(index) {
+    return index >= 0 ? JQLite(this[index]) : JQLite(this[this.length + index]);
+  },
 
-  if (!handle) return; // no listeners registered
+  length: 0,
+};
 
-  if (!type) {
-    for (type in events) {
-      if (type !== "$destroy") {
-        element.removeEventListener(type, handle);
-      }
-      delete events[type];
+/**
+ * Remove all child nodes of the set of matched elements from the DOM and clears CACHE data, associated with the node.
+ * @returns {JQLite} The current instance of JQLite.
+ */
+JQLite.prototype.empty = function () {
+  for (let i = 0; i < this.length; i++) {
+    const element = this[i];
+    dealoc(element, true);
+    // we may run into situation where we empty a transcluded node
+    if (
+      [
+        Node.ELEMENT_NODE,
+        Node.DOCUMENT_NODE,
+        Node.DOCUMENT_FRAGMENT_NODE,
+      ].includes(element.nodeType)
+    ) {
+      element.replaceChildren();
     }
-  } else {
-    const removeHandler = function (type) {
-      const listenerFns = events[type];
-      if (isDefined(fn) && Array.isArray(listenerFns)) {
-        arrayRemove(listenerFns, fn);
-      }
-      if (!(isDefined(fn) && listenerFns && listenerFns.length > 0)) {
-        element.removeEventListener(type, handle);
-        delete events[type];
+  }
+  return this;
+};
+
+/**
+ * Returns the `$scope` of the element.
+ * @returns {import("../../core/scope/scope").Scope}
+ */
+JQLite.prototype.scope = function () {
+  // Can't use JQLiteData here directly so we stay compatible with jQuery!
+  return (
+    getOrSetCacheData(this[0], "$scope") ||
+    getInheritedData(this[0].parentNode || this[0], ["$isolateScope", "$scope"])
+  );
+};
+
+/**
+ * Returns the isolate `$scope` of the element.
+ * @returns {import("../../core/scope/scope").Scope}
+ */
+JQLite.prototype.isolateScope = function () {
+  return (
+    getOrSetCacheData(this[0], "$isolateScope") ||
+    getOrSetCacheData(this[0], "$isolateScopeNoTemplate")
+  );
+};
+
+/**
+ * Return instance of controller attached to element
+ * @param {string} [name] - Controller name
+ * @returns {any}
+ */
+JQLite.prototype.controller = function (name) {
+  return getController(this[0], name);
+};
+
+/**
+ * Return instance of injector attached to element
+ * @returns {import('../../types').InjectorService}
+ */
+JQLite.prototype.injector = function () {
+  return getInheritedData(this[0], "$injector");
+};
+
+/**
+ * Adds an event listener to each element in the JQLite collection.
+ *
+ * @param {string} type - The event type(s) to listen for. Multiple event types can be specified, separated by a space.
+ * @param {Function} fn - The function to execute when the event is triggered.
+ * @returns {JQLite} The JQLite collection for chaining.
+ */
+JQLite.prototype.on = function (type, fn) {
+  // Do not add event handlers to non-elements because they will not be cleaned up.
+  for (let i = 0, ii = this.length; i < ii; i++) {
+    const element = this[i];
+    if (!elementAcceptsData(element)) {
+      return;
+    }
+
+    const expandoStore = getExpando(element, true);
+
+    if (!expandoStore.handle) {
+      expandoStore.handle = createEventHandler(element, expandoStore.events);
+    }
+    // http://jsperf.com/string-indexof-vs-split
+    const types = type.indexOf(" ") >= 0 ? type.split(" ") : [type];
+    let j = types.length;
+
+    const addHandler = function (type, specialHandlerWrapper, noEventListener) {
+      let eventFns = expandoStore.events[type];
+
+      if (!eventFns) {
+        eventFns = expandoStore.events[type] = [];
+        eventFns.specialHandlerWrapper = specialHandlerWrapper;
+        if (type !== "$destroy" && !noEventListener) {
+          element.addEventListener(type, expandoStore.handle);
+        }
       }
+
+      eventFns.push(fn);
     };
 
-    forEach(type.split(" "), (type) => {
-      removeHandler(type);
+    while (j--) {
+      type = types[j];
       if (MOUSE_EVENT_MAP[type]) {
-        removeHandler(MOUSE_EVENT_MAP[type]);
+        addHandler(MOUSE_EVENT_MAP[type], specialMouseHandlerWrapper);
+        addHandler(type, undefined, true);
+      } else {
+        addHandler(type);
       }
-    });
+    }
   }
-
-  removeIfEmptyData(element);
-}
+  return this;
+};
 
 /**
- * Removes expando data from this element. If key is provided, only
- * its field is removed. If data is empty, also removes `ExpandoStore`
- * from cache.
- * @param {Element} element
- * @param {string} [name] - key of field to remove
+ * Removes an event listener to each element in JQLite collection.
+ *
+ * @param {string} type - The event type(s) to remove listener from
+ * @param {Function} fn - The function to remove from event type.
+ * @returns {JQLite}
  */
-export function removeElementData(element, name) {
-  const expandoId = element[EXPANDO];
-  const expandoStore = expandoId && CACHE.get(expandoId);
+JQLite.prototype.off = function (type, fn) {
+  for (let i = 0, ii = this.length; i < ii; i++) {
+    const element = this[i];
+    const expandoStore = getExpando(element);
+    const events = expandoStore && expandoStore.events;
+    const handle = expandoStore && expandoStore.handle;
 
-  if (expandoStore) {
-    if (name) {
-      delete expandoStore.data[name];
+    if (!handle) return; // no listeners registered
+
+    if (!type) {
+      for (type in events) {
+        if (type !== "$destroy") {
+          element.removeEventListener(type, handle);
+        }
+        delete events[type];
+      }
     } else {
-      expandoStore.data = {};
+      const removeHandler = function (type) {
+        const listenerFns = events[type];
+        if (isDefined(fn) && Array.isArray(listenerFns)) {
+          arrayRemove(listenerFns, fn);
+        }
+        if (!(isDefined(fn) && listenerFns && listenerFns.length > 0)) {
+          element.removeEventListener(type, handle);
+          delete events[type];
+        }
+      };
+
+      forEach(type.split(" "), (type) => {
+        removeHandler(type);
+        if (MOUSE_EVENT_MAP[type]) {
+          removeHandler(MOUSE_EVENT_MAP[type]);
+        }
+      });
     }
 
     removeIfEmptyData(element);
   }
-}
+  return this;
+};
 
 /**
- * Stores data associated with an element inside the expando property of the DOM element.
- *
- * @see {@link https://developer.mozilla.org/en-US/docs/Glossary/Expando MDN Glossary: Expando}
- *
- * @param {Element} element
- * @param {boolean} [createIfNecessary=false]
- * @returns {import("../../core/cache/cache").ExpandoStore}
+ * Remove data  by name from cache associated with each element in JQLite collection.
+ * @param {string} name - The key of the data associated with element
+ * @returns {JQLite}
  */
-function getExpando(element, createIfNecessary = false) {
-  let expandoId = element[EXPANDO];
-  let expandoStore = expandoId && CACHE.get(expandoId);
-
-  if (createIfNecessary && !expandoStore) {
-    element[EXPANDO] = expandoId = jqNextId();
-    expandoStore = {
-      events: {},
-      data: {},
-      handle: null,
-    };
-    CACHE.set(expandoId, expandoStore);
+JQLite.prototype.removeData = function (name) {
+  for (let i = 0, ii = this.length; i < ii; i++) {
+    const element = this[i];
+    removeElementData(element, name);
   }
-
-  return expandoStore;
-}
-
-/**
- * Checks if the string contains HTML tags or entities.
- * @param {string} html
- * @returns {boolean} True if the string is plain text, false if it contains HTML tags or entities.
- */
-export function isTextNode(html) {
-  return !/<|&#?\w+;/.test(html);
-}
+  return this;
+};
 
 /**
- * Check if element can accept expando data
- * @param {Element} node
- * @returns {boolean}
+ * Gets or sets data on a parent element
+ * @param {string} name
+ * @param {any} value
+ * @returns {JQLite|any}
  */
-function elementAcceptsData(node) {
-  // The window object can accept data but has no nodeType
-  // Otherwise we are only interested in elements (1) and documents (9)
-  switch (node.nodeType) {
-    case Node.ELEMENT_NODE:
-    case Node.DOCUMENT_NODE:
-    case undefined: // window.object
-      return true;
-    default:
-      return false;
+JQLite.prototype.inheritedData = function (name, value) {
+  for (let i = 0, ii = this.length; i < ii; i++) {
+    const element = this[0];
+    let res = getInheritedData(element, name, value);
+    if (value) {
+      return this;
+    } else {
+      return res;
+    }
   }
-}
+};
 
 /**
- * @param {string} html
- * @returns {DocumentFragment}
+ * Gets or sets innerHTML on the first element in JQLite collection
+ * @param {string} value
+ * @returns {JQLite|any|undefined}
  */
-export function buildFragment(html) {
-  let tmp;
-  let tag;
-  let wrap;
-  let tempFragment = document.createDocumentFragment();
-  let nodes = [];
-  let i;
+JQLite.prototype.html = function (value) {
+  const element = this[0];
+  if (!element) return undefined;
+  if (isUndefined(value)) {
+    return element.innerHTML;
+  }
+  dealoc(element, true);
+  element.innerHTML = value;
+  return this;
+};
 
-  if (isTextNode(html)) {
-    // Convert non-html into a text node
-    nodes.push(document.createTextNode(html));
-  } else {
-    // Convert html into DOM nodes
-    tmp = tempFragment.appendChild(document.createElement("div"));
-    tag = (TAG_NAME_REGEXP.exec(html) || ["", ""])[1].toLowerCase();
+/// ///////////////////////////////////////
+// Functions iterating getter/setters.
+// these functions return self on setter and
+// value on get.
+/// ///////////////////////////////////////
+forEach(
+  {
+    data: getOrSetCacheData,
+    attr(element, name, value) {
+      let ret;
+      const { nodeType } = element;
+      if (
+        nodeType === Node.TEXT_NODE ||
+        nodeType === Node.ATTRIBUTE_NODE ||
+        nodeType === Node.COMMENT_NODE ||
+        !element.getAttribute
+      ) {
+        return;
+      }
 
-    wrap = wrapMap[tag] || [];
+      const lowercasedName = lowercase(name);
+      const isBooleanAttr = BOOLEAN_ATTR[lowercasedName];
 
-    // Create wrappers & descend into them
-    i = wrap.length;
-    while (--i > -1) {
-      tmp.appendChild(window.document.createElement(wrap[i]));
-      tmp = tmp.firstChild;
-    }
-    tmp.innerHTML = html;
+      if (isDefined(value)) {
+        // setter
 
-    nodes = concat(nodes, tmp.childNodes);
+        if (value === null || (value === false && isBooleanAttr)) {
+          element.removeAttribute(name);
+        } else {
+          element.setAttribute(name, isBooleanAttr ? lowercasedName : value);
+        }
+      } else {
+        // getter
 
-    tmp = tempFragment.firstChild;
-    tmp.textContent = "";
-  }
+        ret = element.getAttribute(name);
 
-  let fragment = document.createDocumentFragment();
-  fragment.append(...nodes);
-  return fragment;
-}
+        if (isBooleanAttr && ret !== null) {
+          ret = lowercasedName;
+        }
+        // Normalize non-existing attributes to undefined (as jQuery).
+        return ret === null ? undefined : ret;
+      }
+    },
+    text: (function () {
+      getText.$dv = "";
+      return getText;
 
-/**
- * @param {string} html
- * @returns {NodeListOf<ChildNode> | HTMLElement[]}
- */
-function parseHtml(html) {
-  let regEx = SINGLE_TAG_REGEXP.exec(html);
-  if (regEx) {
-    return [document.createElement(regEx[1])];
-  }
-  let fragment = buildFragment(html);
-  if (fragment) {
-    return fragment.childNodes;
-  }
+      function getText(element, value) {
+        if (isUndefined(value)) {
+          const { nodeType } = element;
+          return nodeType === Node.ELEMENT_NODE || nodeType === Node.TEXT_NODE
+            ? element.textContent
+            : "";
+        }
+        element.textContent = value;
+      }
+    })(),
+    val(element, value) {
+      if (isUndefined(value)) {
+        if (element.multiple && nodeName_(element) === "select") {
+          const result = [];
+          forEach(element.options, (option) => {
+            if (option.selected) {
+              result.push(option.value || option.text);
+            }
+          });
+          return result;
+        }
+        return element.value;
+      }
+      element.value = value;
+    },
+  },
+  (fn, name) => {
+    /**
+     * Properties: writes return selection, reads return first value
+     */
+    JQLite.prototype[name] = function (arg1, arg2) {
+      let i;
+      let key;
+      const nodeCount = this.length;
 
-  return [];
-}
+      // JQLiteEmpty takes no arguments but is a setter.
+      if (isUndefined(fn.length === 2 && fn !== getController ? arg1 : arg2)) {
+        if (isObject(arg1)) {
+          // we are a write, but the object properties are the key/values
+          for (i = 0; i < nodeCount; i++) {
+            if (fn === getOrSetCacheData) {
+              fn(this[i], arg1);
+            } else {
+              for (key in arg1) {
+                fn(this[i], key, arg1[key]);
+              }
+            }
+          }
+          // return self for chaining
+          return this;
+        }
+        // we are a read, so read the first child.
+        // TODO: do we still need this?
+        let value = fn.$dv;
+        // Only if we have $dv do we iterate over all, otherwise it is just the first element.
+        const jj = isUndefined(value) ? Math.min(nodeCount, 1) : nodeCount;
+        for (let j = 0; j < jj; j++) {
+          const nodeValue = fn(this[j], arg1, arg2);
+          value = value ? value + nodeValue : nodeValue;
+        }
+        return value;
+      }
+      // we are a write, so apply to all children
+      for (i = 0; i < nodeCount; i++) {
+        fn(this[i], arg1, arg2);
+      }
+      // return self for chaining
+      return this;
+    };
+  },
+);
 
-/**
- * @param {Element} element
- * @param {boolean} [onlyDescendants]
- * @returns {void}
- */
-export function dealoc(element, onlyDescendants) {
-  if (!element) return;
-  if (!onlyDescendants && elementAcceptsData(element))
-    cleanElementData([element]);
+/// ///////////////////////////////////////
+// Functions iterating traversal.
+// These functions chain results into a single
+// selector.
+/// ///////////////////////////////////////
+forEach(
+  {
+    replaceWith(element, replaceNode) {
+      let index;
+      const parent = element.parentNode;
+      dealoc(element);
+      forEach(new JQLite(replaceNode), (node) => {
+        if (index) {
+          parent.insertBefore(node, index.nextSibling);
+        } else {
+          parent.replaceChild(node, element);
+        }
+        index = node;
+      });
+    },
+    children(element) {
+      return Array.from(element.childNodes).filter(
+        (child) => child.nodeType === Node.ELEMENT_NODE,
+      );
+    },
+    append(element, node) {
+      const { nodeType } = element;
+      if (
+        nodeType !== Node.ELEMENT_NODE &&
+        nodeType !== Node.DOCUMENT_FRAGMENT_NODE
+      )
+        return;
 
-  if (element.querySelectorAll) {
-    cleanElementData(element.querySelectorAll("*"));
-  }
-}
+      node = new JQLite(node);
 
-/**
- * If `ExpandoStore.data` and `ExpandoStore.events` are empty,
- * then delete element's `ExpandoStore` and set its `ExpandoId`
- * to undefined.
- * @param {Element} element
- */
-function removeIfEmptyData(element) {
-  const expandoId = element[EXPANDO];
-  const { events, data } = CACHE.get(expandoId);
+      for (let i = 0, ii = node.length; i < ii; i++) {
+        const child = node[i];
+        element.appendChild(child);
+      }
+    },
 
-  if (
-    (!data || !Object.keys(data).length) &&
-    (!events || !Object.keys(events).length)
-  ) {
-    CACHE.delete(expandoId);
-    element[EXPANDO] = undefined; // don't delete DOM expandos. Chrome don't like it
-  }
-}
+    prepend(element, node) {
+      if (element.nodeType === Node.ELEMENT_NODE) {
+        const index = element.firstChild;
+        forEach(new JQLite(node), (child) => {
+          element.insertBefore(child, index);
+        });
+      }
+    },
 
-/**
- * Gets or sets cache data for a given element.
- *
- * @param {Element} element - The DOM element to get or set data on.
- * @param {string|Object} key - The key (as a string) to get/set or an object for mass-setting.
- * @param {*} [value] - The value to set. If not provided, the function acts as a getter.
- * @returns {*} - The retrieved data if acting as a getter. Otherwise, returns undefined.
- */
-export function getOrSetCacheData(element, key, value) {
-  if (elementAcceptsData(element)) {
-    let prop;
+    remove: removeElement,
 
-    const isSimpleSetter = isDefined(value);
-    const isSimpleGetter = !isSimpleSetter && key && !isObject(key);
-    const massGetter = !key;
-    const expandoStore = getExpando(element, !isSimpleGetter);
-    const data = expandoStore && expandoStore.data;
+    detach(element) {
+      removeElement(element, true);
+    },
 
-    if (isSimpleSetter) {
-      data[kebabToCamel(key)] = value;
-    } else {
-      if (massGetter) {
-        return data;
-      }
-      if (isSimpleGetter) {
-        // don't force creation of expandoStore if it doesn't exist yet
-        return data && data[kebabToCamel(key)];
+    after(element, newElement) {
+      let index = element;
+      const parent = element.parentNode;
+
+      if (parent) {
+        newElement = new JQLite(newElement);
+
+        for (let i = 0, ii = newElement.length; i < ii; i++) {
+          const node = newElement[i];
+          parent.insertBefore(node, index.nextSibling);
+          index = node;
+        }
       }
-      // mass-setter: data({key1: val1, key2: val2})
-      for (prop in key) {
-        data[kebabToCamel(prop)] = key[prop];
+    },
+
+    parent(element) {
+      const parent = element.parentNode;
+      return parent && parent.nodeType !== Node.DOCUMENT_FRAGMENT_NODE
+        ? parent
+        : null;
+    },
+
+    // TODO: remove after migrating tests away from JQLite
+    find(element, selector) {
+      if (element.getElementsByTagName) {
+        return element.getElementsByTagName(selector);
       }
-    }
-  } else {
-    // TODO: check should occur perhaps prior at compilation level that this is a valid element
-  }
-}
+      return [];
+    },
 
-/**
- * Adds nodes or elements to the root array-like object.
- *
- * @param {Array} root - The array-like object to which elements will be added.
- * @param {(Node|Array|NodeList|Object)} elements - The elements to add to the root. This can be a single DOM node, an array-like object (such as an Array or NodeList), or any other object.
- */
-function addNodes(root, elements) {
-  // THIS CODE IS VERY HOT. Don't make changes without benchmarking.
+    triggerHandler(element, event, extraParameters) {
+      let dummyEvent;
+      let eventFnsCopy;
+      let handlerArgs;
+      const eventName = event.type || event;
+      const expandoStore = getExpando(element);
+      const events = expandoStore && expandoStore.events;
+      const eventFns = events && events[eventName];
 
-  if (elements) {
-    // if a Node (the most common case)
-    if (elements.nodeType) {
-      root[root.length++] = elements;
-    } else {
-      const { length } = elements;
+      if (eventFns) {
+        // Create a dummy event to pass to the handlers
+        dummyEvent = {
+          preventDefault() {
+            this.defaultPrevented = true;
+          },
+          isDefaultPrevented() {
+            return this.defaultPrevented === true;
+          },
+          stopImmediatePropagation() {
+            this.immediatePropagationStopped = true;
+          },
+          isImmediatePropagationStopped() {
+            return this.immediatePropagationStopped === true;
+          },
+          stopPropagation: () => {},
+          type: eventName,
+          target: element,
+        };
 
-      // if an Array or NodeList and not a Window
-      if (typeof length === "number" && elements.window !== elements) {
-        if (length) {
-          for (let i = 0; i < length; i++) {
-            root[root.length++] = elements[i];
-          }
+        // If a custom event was provided then extend our dummy event with it
+        if (event.type) {
+          dummyEvent = extend(dummyEvent, event);
         }
-      } else {
-        root[root.length++] = elements;
-      }
-    }
-  }
-}
 
-function JQLiteController(element, name) {
-  return JQLiteInheritedData(element, `$${name || "ngController"}Controller`);
-}
+        // Copy event handlers in case event handlers array is modified during execution.
+        eventFnsCopy = shallowCopy(eventFns);
+        handlerArgs = extraParameters
+          ? [dummyEvent].concat(extraParameters)
+          : [dummyEvent];
 
-function JQLiteInheritedData(element, name, value) {
-  // if element is the document object work with the html element instead
-  // this makes $(document).scope() possible
-  if (element.nodeType === Node.DOCUMENT_NODE) {
-    element = element.documentElement;
-  }
-  const names = Array.isArray(name) ? name : [name];
+        forEach(eventFnsCopy, (fn) => {
+          if (!dummyEvent.isImmediatePropagationStopped()) {
+            fn.apply(element, handlerArgs);
+          }
+        });
+      }
+    },
+  },
+  (fn, name) => {
+    /**
+     * chaining functions
+     */
+    JQLite.prototype[name] = function (arg1, arg2, arg3) {
+      let value;
 
-  while (element) {
-    for (let i = 0, ii = names.length; i < ii; i++) {
-      if (isDefined((value = getOrSetCacheData(element, names[i]))))
-        return value;
-    }
+      for (let i = 0, ii = this.length; i < ii; i++) {
+        if (isUndefined(value)) {
+          value = fn(this[i], arg1, arg2, arg3);
+          if (isDefined(value)) {
+            // any function which returns a value needs to be wrapped
+            value = JQLite(value);
+          }
+        } else {
+          addNodes(value, fn(this[i], arg1, arg2, arg3));
+        }
+      }
+      return isDefined(value) ? value : this;
+    };
+  },
+);
 
-    // If dealing with a document fragment node with a host element, and no parent, use the host
-    // element as the parent. This enables directives within a Shadow DOM or polyfilled Shadow DOM
-    // to lookup parent controllers.
-    element =
-      element.parentNode ||
-      (element.nodeType === Node.DOCUMENT_FRAGMENT_NODE && element.host);
-  }
-}
+///////////////////////////////////////////////////////////////////
+////////////        HELPER FUNCTIONS      /////////////////////////
+///////////////////////////////////////////////////////////////////
 
 /**
  *
- * @param {Element} element
- * @param {boolean} keepData
+ * @returns {number} Next unique JQInstance id
  */
-export function removeElement(element, keepData = false) {
-  if (!keepData) dealoc(element);
-  const parent = element.parentNode;
-  if (parent) parent.removeChild(element);
+function jqNextId() {
+  return ++jqId;
 }
 
 /**
- * Executea a function on `DOMContentLoaded`
- * @param {Function} fn
+ * @param {string} _all
+ * @param {string} letter
+ * @returns {string}
  */
-function onReady(fn) {
-  function trigger() {
-    window.document.removeEventListener("DOMContentLoaded", trigger);
-    fn();
-  }
-  // check if document is already loaded
-  if (window.document.readyState === "complete") {
-    window.setTimeout(fn);
-  } else {
-    // We can not use JQLite since we are not done loading.
-    window.document.addEventListener("DOMContentLoaded", trigger);
-  }
+function fnCamelCaseReplace(_all, letter) {
+  return letter.toUpperCase();
 }
 
-/// ///////////////////////////////////////
-// Functions which are declared directly.
-/// ///////////////////////////////////////
-JQLite.prototype = {
-  toString() {
-    const value = [];
-    forEach(this, (e) => {
-      value.push(`${e}`);
-    });
-    return `[${value.join(", ")}]`;
-  },
-
-  eq(index) {
-    return index >= 0 ? JQLite(this[index]) : JQLite(this[this.length + index]);
-  },
-
-  length: 0,
-};
-
 /**
- * Remove all child nodes of the set of matched elements from the DOM and clears CACHE data, associated with the node.
- * @returns {JQLite} The current instance of JQLite.
+ * Converts kebab-case to camelCase.
+ * @param {string} name Name to normalize
+ * @returns {string}
  */
-JQLite.prototype.empty = function () {
-  for (let i = 0; i < this.length; i++) {
-    const element = this[i];
-    dealoc(element, true);
-    // we may run into situation where we empty a transcluded node
-    if (
-      [
-        Node.ELEMENT_NODE,
-        Node.DOCUMENT_NODE,
-        Node.DOCUMENT_FRAGMENT_NODE,
-      ].includes(element.nodeType)
-    ) {
-      element.replaceChildren();
-    }
-  }
-  return this;
-};
+export function kebabToCamel(name) {
+  return name.replace(DASH_LOWERCASE_REGEXP, fnCamelCaseReplace);
+}
 
 /**
- * Returns the `$scope` of the element.
- * @returns {import("../../core/scope/scope").Scope}
+ * Converts sname to camelCase.
+ * @param {string} name
+ * @returns {string}
  */
-JQLite.prototype.scope = function () {
-  // Can't use JQLiteData here directly so we stay compatible with jQuery!
-  return (
-    getOrSetCacheData(this[0], "$scope") ||
-    JQLiteInheritedData(this[0].parentNode || this[0], [
-      "$isolateScope",
-      "$scope",
-    ])
-  );
-};
+export function snakeToCamel(name) {
+  return name.replace(UNDERSCORE_LOWERCASE_REGEXP, fnCamelCaseReplace);
+}
 
 /**
- * Returns the isolate `$scope` of the element.
- * @returns {import("../../core/scope/scope").Scope}
+ * Removes expando data from this element. If key is provided, only
+ * its field is removed. If data is empty, also removes `ExpandoStore`
+ * from cache.
+ * @param {Element} element
+ * @param {string} [name] - key of field to remove
  */
-JQLite.prototype.isolateScope = function () {
-  return (
-    getOrSetCacheData(this[0], "$isolateScope") ||
-    getOrSetCacheData(this[0], "$isolateScopeNoTemplate")
-  );
-};
+export function removeElementData(element, name) {
+  const expandoId = element[EXPANDO];
+  const expandoStore = expandoId && CACHE.get(expandoId);
 
-/**
- * Return instance of controller attached to element
- * @param {string} [name] - Controller name
- * @returns {any}
- */
-JQLite.prototype.controller = function (name) {
-  return JQLiteController(this[0], name);
-};
+  if (expandoStore) {
+    if (name) {
+      delete expandoStore.data[name];
+    } else {
+      expandoStore.data = {};
+    }
 
-/**
- * Return instance of injector attached to element
- * @returns {import('../../types').InjectorService}
- */
-JQLite.prototype.injector = function () {
-  return JQLiteInheritedData(this[0], "$injector");
-};
+    removeIfEmptyData(element);
+  }
+}
 
 /**
- * Adds an event listener to each element in the JQLite collection.
+ * Stores data associated with an element inside the expando property of the DOM element.
  *
- * @param {string} type - The event type(s) to listen for. Multiple event types can be specified, separated by a space.
- * @param {Function} fn - The function to execute when the event is triggered.
- * @returns {JQLite} The JQLite collection for chaining.
+ * @see {@link https://developer.mozilla.org/en-US/docs/Glossary/Expando MDN Glossary: Expando}
+ *
+ * @param {Element} element
+ * @param {boolean} [createIfNecessary=false]
+ * @returns {import("../../core/cache/cache").ExpandoStore}
  */
-JQLite.prototype.on = function (type, fn) {
-  // Do not add event handlers to non-elements because they will not be cleaned up.
-  for (let i = 0, ii = this.length; i < ii; i++) {
-    const element = this[i];
-    if (!elementAcceptsData(element)) {
-      return;
-    }
-
-    const expandoStore = getExpando(element, true);
-
-    if (!expandoStore.handle) {
-      expandoStore.handle = createEventHandler(element, expandoStore.events);
-    }
-    // http://jsperf.com/string-indexof-vs-split
-    const types = type.indexOf(" ") >= 0 ? type.split(" ") : [type];
-    let j = types.length;
-
-    const addHandler = function (type, specialHandlerWrapper, noEventListener) {
-      let eventFns = expandoStore.events[type];
-
-      if (!eventFns) {
-        eventFns = expandoStore.events[type] = [];
-        eventFns.specialHandlerWrapper = specialHandlerWrapper;
-        if (type !== "$destroy" && !noEventListener) {
-          element.addEventListener(type, expandoStore.handle);
-        }
-      }
+function getExpando(element, createIfNecessary = false) {
+  let expandoId = element[EXPANDO];
+  let expandoStore = expandoId && CACHE.get(expandoId);
 
-      eventFns.push(fn);
+  if (createIfNecessary && !expandoStore) {
+    element[EXPANDO] = expandoId = jqNextId();
+    expandoStore = {
+      events: {},
+      data: {},
+      handle: null,
     };
-
-    while (j--) {
-      type = types[j];
-      if (MOUSE_EVENT_MAP[type]) {
-        addHandler(MOUSE_EVENT_MAP[type], specialMouseHandlerWrapper);
-        addHandler(type, undefined, true);
-      } else {
-        addHandler(type);
-      }
-    }
+    CACHE.set(expandoId, expandoStore);
   }
-  return this;
-};
 
-export function getBooleanAttrName(element, name) {
-  // check dom last since we will most likely fail on name
-  const booleanAttr = BOOLEAN_ATTR[name.toLowerCase()];
+  return expandoStore;
+}
 
-  // booleanAttr is here twice to minimize DOM access
-  return booleanAttr && BOOLEAN_ELEMENTS[nodeName_(element)] && booleanAttr;
+/**
+ * Checks if the string contains HTML tags or entities.
+ * @param {string} html
+ * @returns {boolean} True if the string is plain text, false if it contains HTML tags or entities.
+ */
+export function isTextNode(html) {
+  return !/<|&#?\w+;/.test(html);
 }
 
 /**
- * Takes an array of elements, calls any `$destroy` event handlers, removes any data in cache, and finally removes any
- * listeners.
- * @param {NodeListOf<Element>} nodes
+ * Check if element can accept expando data
+ * @param {Element} node
+ * @returns {boolean}
  */
-export function cleanElementData(nodes) {
-  for (let i = 0, ii = nodes.length; i < ii; i++) {
-    var events = (CACHE.get(nodes[i][EXPANDO]) || {}).events;
-    if (events && events.$destroy) {
-      JQLite(nodes[i]).triggerHandler("$destroy");
-    }
-    removeElementData(nodes[i]);
-    JQLiteOff(nodes[i]);
+function elementAcceptsData(node) {
+  // The window object can accept data but has no nodeType
+  // Otherwise we are only interested in elements (1) and documents (9)
+  switch (node.nodeType) {
+    case Node.ELEMENT_NODE:
+    case Node.DOCUMENT_NODE:
+    case undefined: // window.object
+      return true;
+    default:
+      return false;
   }
 }
 
-/// ///////////////////////////////////////
-// Functions iterating getter/setters.
-// these functions return self on setter and
-// value on get.
-/// ///////////////////////////////////////
-forEach(
-  {
-    data: getOrSetCacheData,
-    inheritedData: JQLiteInheritedData,
-    attr(element, name, value) {
-      let ret;
-      const { nodeType } = element;
-      if (
-        nodeType === Node.TEXT_NODE ||
-        nodeType === Node.ATTRIBUTE_NODE ||
-        nodeType === Node.COMMENT_NODE ||
-        !element.getAttribute
-      ) {
-        return;
-      }
-
-      const lowercasedName = lowercase(name);
-      const isBooleanAttr = BOOLEAN_ATTR[lowercasedName];
-
-      if (isDefined(value)) {
-        // setter
-
-        if (value === null || (value === false && isBooleanAttr)) {
-          element.removeAttribute(name);
-        } else {
-          element.setAttribute(name, isBooleanAttr ? lowercasedName : value);
-        }
-      } else {
-        // getter
+/**
+ * @param {string} html
+ * @returns {DocumentFragment}
+ */
+export function buildFragment(html) {
+  let tmp;
+  let tag;
+  let wrap;
+  let tempFragment = document.createDocumentFragment();
+  let nodes = [];
+  let i;
 
-        ret = element.getAttribute(name);
+  if (isTextNode(html)) {
+    // Convert non-html into a text node
+    nodes.push(document.createTextNode(html));
+  } else {
+    // Convert html into DOM nodes
+    tmp = tempFragment.appendChild(document.createElement("div"));
+    tag = (TAG_NAME_REGEXP.exec(html) || ["", ""])[1].toLowerCase();
 
-        if (isBooleanAttr && ret !== null) {
-          ret = lowercasedName;
-        }
-        // Normalize non-existing attributes to undefined (as jQuery).
-        return ret === null ? undefined : ret;
-      }
-    },
-    text: (function () {
-      getText.$dv = "";
-      return getText;
+    wrap = wrapMap[tag] || [];
 
-      function getText(element, value) {
-        if (isUndefined(value)) {
-          const { nodeType } = element;
-          return nodeType === Node.ELEMENT_NODE || nodeType === Node.TEXT_NODE
-            ? element.textContent
-            : "";
-        }
-        element.textContent = value;
-      }
-    })(),
-    val(element, value) {
-      if (isUndefined(value)) {
-        if (element.multiple && nodeName_(element) === "select") {
-          const result = [];
-          forEach(element.options, (option) => {
-            if (option.selected) {
-              result.push(option.value || option.text);
-            }
-          });
-          return result;
-        }
-        return element.value;
-      }
-      element.value = value;
-    },
-    html(element, value) {
-      if (isUndefined(value)) {
-        return element.innerHTML;
-      }
-      dealoc(element, true);
-      element.innerHTML = value;
-    },
-  },
-  (fn, name) => {
-    /**
-     * Properties: writes return selection, reads return first value
-     */
-    JQLite.prototype[name] = function (arg1, arg2) {
-      let i;
-      let key;
-      const nodeCount = this.length;
+    // Create wrappers & descend into them
+    i = wrap.length;
+    while (--i > -1) {
+      tmp.appendChild(window.document.createElement(wrap[i]));
+      tmp = tmp.firstChild;
+    }
+    tmp.innerHTML = html;
 
-      // JQLiteEmpty takes no arguments but is a setter.
-      if (
-        isUndefined(fn.length === 2 && fn !== JQLiteController ? arg1 : arg2)
-      ) {
-        if (isObject(arg1)) {
-          // we are a write, but the object properties are the key/values
-          for (i = 0; i < nodeCount; i++) {
-            if (fn === getOrSetCacheData) {
-              fn(this[i], arg1);
-            } else {
-              for (key in arg1) {
-                fn(this[i], key, arg1[key]);
-              }
-            }
-          }
-          // return self for chaining
-          return this;
-        }
-        // we are a read, so read the first child.
-        // TODO: do we still need this?
-        let value = fn.$dv;
-        // Only if we have $dv do we iterate over all, otherwise it is just the first element.
-        const jj = isUndefined(value) ? Math.min(nodeCount, 1) : nodeCount;
-        for (let j = 0; j < jj; j++) {
-          const nodeValue = fn(this[j], arg1, arg2);
-          value = value ? value + nodeValue : nodeValue;
-        }
-        return value;
-      }
-      // we are a write, so apply to all children
-      for (i = 0; i < nodeCount; i++) {
-        fn(this[i], arg1, arg2);
-      }
-      // return self for chaining
-      return this;
-    };
-  },
-);
+    nodes = concat(nodes, tmp.childNodes);
 
-/// ///////////////////////////////////////
-// Functions iterating traversal.
-// These functions chain results into a single
-// selector.
-/// ///////////////////////////////////////
-forEach(
-  {
-    removeData: removeElementData,
+    tmp = tempFragment.firstChild;
+    tmp.textContent = "";
+  }
 
-    off: JQLiteOff,
-    replaceWith(element, replaceNode) {
-      let index;
-      const parent = element.parentNode;
-      dealoc(element);
-      forEach(new JQLite(replaceNode), (node) => {
-        if (index) {
-          parent.insertBefore(node, index.nextSibling);
-        } else {
-          parent.replaceChild(node, element);
-        }
-        index = node;
-      });
-    },
-    children(element) {
-      return Array.from(element.childNodes).filter(
-        (child) => child.nodeType === Node.ELEMENT_NODE,
-      );
-    },
-    append(element, node) {
-      const { nodeType } = element;
-      if (
-        nodeType !== Node.ELEMENT_NODE &&
-        nodeType !== Node.DOCUMENT_FRAGMENT_NODE
-      )
-        return;
+  let fragment = document.createDocumentFragment();
+  fragment.append(...nodes);
+  return fragment;
+}
 
-      node = new JQLite(node);
+/**
+ * @param {string} html
+ * @returns {NodeListOf<ChildNode> | HTMLElement[]}
+ */
+function parseHtml(html) {
+  let regEx = SINGLE_TAG_REGEXP.exec(html);
+  if (regEx) {
+    return [document.createElement(regEx[1])];
+  }
+  let fragment = buildFragment(html);
+  if (fragment) {
+    return fragment.childNodes;
+  }
 
-      for (let i = 0, ii = node.length; i < ii; i++) {
-        const child = node[i];
-        element.appendChild(child);
-      }
-    },
+  return [];
+}
 
-    prepend(element, node) {
-      if (element.nodeType === Node.ELEMENT_NODE) {
-        const index = element.firstChild;
-        forEach(new JQLite(node), (child) => {
-          element.insertBefore(child, index);
-        });
-      }
-    },
+/**
+ * @param {Element} element
+ * @param {boolean} [onlyDescendants]
+ * @returns {void}
+ */
+export function dealoc(element, onlyDescendants) {
+  if (!element) return;
+  if (!onlyDescendants && elementAcceptsData(element))
+    cleanElementData([element]);
 
-    remove: removeElement,
+  if (element.querySelectorAll) {
+    cleanElementData(element.querySelectorAll("*"));
+  }
+}
 
-    detach(element) {
-      removeElement(element, true);
-    },
+/**
+ * If `ExpandoStore.data` and `ExpandoStore.events` are empty,
+ * then delete element's `ExpandoStore` and set its `ExpandoId`
+ * to undefined.
+ * @param {Element} element
+ */
+function removeIfEmptyData(element) {
+  const expandoId = element[EXPANDO];
+  const { events, data } = CACHE.get(expandoId);
 
-    after(element, newElement) {
-      let index = element;
-      const parent = element.parentNode;
+  if (
+    (!data || !Object.keys(data).length) &&
+    (!events || !Object.keys(events).length)
+  ) {
+    CACHE.delete(expandoId);
+    element[EXPANDO] = undefined; // don't delete DOM expandos. Chrome don't like it
+  }
+}
 
-      if (parent) {
-        newElement = new JQLite(newElement);
+/**
+ * Gets or sets cache data for a given element.
+ *
+ * @param {Element} element - The DOM element to get or set data on.
+ * @param {string|Object} key - The key (as a string) to get/set or an object for mass-setting.
+ * @param {*} [value] - The value to set. If not provided, the function acts as a getter.
+ * @returns {*} - The retrieved data if acting as a getter. Otherwise, returns undefined.
+ */
+export function getOrSetCacheData(element, key, value) {
+  if (elementAcceptsData(element)) {
+    let prop;
 
-        for (let i = 0, ii = newElement.length; i < ii; i++) {
-          const node = newElement[i];
-          parent.insertBefore(node, index.nextSibling);
-          index = node;
-        }
+    const isSimpleSetter = isDefined(value);
+    const isSimpleGetter = !isSimpleSetter && key && !isObject(key);
+    const massGetter = !key;
+    const expandoStore = getExpando(element, !isSimpleGetter);
+    const data = expandoStore && expandoStore.data;
+
+    if (isSimpleSetter) {
+      data[kebabToCamel(key)] = value;
+    } else {
+      if (massGetter) {
+        return data;
       }
-    },
+      if (isSimpleGetter) {
+        // don't force creation of expandoStore if it doesn't exist yet
+        return data && data[kebabToCamel(key)];
+      }
+      // mass-setter: data({key1: val1, key2: val2})
+      for (prop in key) {
+        data[kebabToCamel(prop)] = key[prop];
+      }
+    }
+  } else {
+    // TODO: check should occur perhaps prior at compilation level that this is a valid element
+  }
+}
 
-    parent(element) {
-      const parent = element.parentNode;
-      return parent && parent.nodeType !== Node.DOCUMENT_FRAGMENT_NODE
-        ? parent
-        : null;
-    },
+/**
+ * Adds nodes or elements to the root array-like object.
+ *
+ * @param {Array} root - The array-like object to which elements will be added.
+ * @param {(Node|Array|NodeList|Object)} elements - The elements to add to the root. This can be a single DOM node, an array-like object (such as an Array or NodeList), or any other object.
+ */
+function addNodes(root, elements) {
+  // THIS CODE IS VERY HOT. Don't make changes without benchmarking.
 
-    // TODO: remove after migrating tests away from JQLite
-    find(element, selector) {
-      if (element.getElementsByTagName) {
-        return element.getElementsByTagName(selector);
+  if (elements) {
+    // if a Node (the most common case)
+    if (elements.nodeType) {
+      root[root.length++] = elements;
+    } else {
+      const { length } = elements;
+
+      // if an Array or NodeList and not a Window
+      if (typeof length === "number" && elements.window !== elements) {
+        if (length) {
+          for (let i = 0; i < length; i++) {
+            root[root.length++] = elements[i];
+          }
+        }
+      } else {
+        root[root.length++] = elements;
       }
-      return [];
-    },
+    }
+  }
+}
 
-    triggerHandler(element, event, extraParameters) {
-      let dummyEvent;
-      let eventFnsCopy;
-      let handlerArgs;
-      const eventName = event.type || event;
-      const expandoStore = getExpando(element);
-      const events = expandoStore && expandoStore.events;
-      const eventFns = events && events[eventName];
+function getController(element, name) {
+  return getInheritedData(element, `$${name || "ngController"}Controller`);
+}
 
-      if (eventFns) {
-        // Create a dummy event to pass to the handlers
-        dummyEvent = {
-          preventDefault() {
-            this.defaultPrevented = true;
-          },
-          isDefaultPrevented() {
-            return this.defaultPrevented === true;
-          },
-          stopImmediatePropagation() {
-            this.immediatePropagationStopped = true;
-          },
-          isImmediatePropagationStopped() {
-            return this.immediatePropagationStopped === true;
-          },
-          stopPropagation: () => {},
-          type: eventName,
-          target: element,
-        };
+/**
+ *
+ * @param {Element} element
+ * @param {string} name
+ * @param {any} [value]
+ * @returns
+ */
+function getInheritedData(element, name, value) {
+  // if element is the document object work with the html element instead
+  // this makes $(document).scope() possible
+  if (element.nodeType === Node.DOCUMENT_NODE) {
+    // TODO Fix types
+    element = element.documentElement;
+  }
+  const names = Array.isArray(name) ? name : [name];
 
-        // If a custom event was provided then extend our dummy event with it
-        if (event.type) {
-          dummyEvent = extend(dummyEvent, event);
-        }
+  while (element) {
+    for (let i = 0, ii = names.length; i < ii; i++) {
+      if (isDefined((value = getOrSetCacheData(element, names[i]))))
+        return value;
+    }
 
-        // Copy event handlers in case event handlers array is modified during execution.
-        eventFnsCopy = shallowCopy(eventFns);
-        handlerArgs = extraParameters
-          ? [dummyEvent].concat(extraParameters)
-          : [dummyEvent];
+    // If dealing with a document fragment node with a host element, and no parent, use the host
+    // element as the parent. This enables directives within a Shadow DOM or polyfilled Shadow DOM
+    // to lookup parent controllers.
+    element =
+      element.parentNode ||
+      (element.nodeType === Node.DOCUMENT_FRAGMENT_NODE && element.host);
+  }
+}
 
-        forEach(eventFnsCopy, (fn) => {
-          if (!dummyEvent.isImmediatePropagationStopped()) {
-            fn.apply(element, handlerArgs);
-          }
-        });
-      }
-    },
-  },
-  (fn, name) => {
-    /**
-     * chaining functions
-     */
-    JQLite.prototype[name] = function (arg1, arg2, arg3) {
-      let value;
+/**
+ *
+ * @param {Element} element
+ * @param {boolean} keepData
+ */
+export function removeElement(element, keepData = false) {
+  if (!keepData) dealoc(element);
+  const parent = element.parentNode;
+  if (parent) parent.removeChild(element);
+}
 
-      for (let i = 0, ii = this.length; i < ii; i++) {
-        if (isUndefined(value)) {
-          value = fn(this[i], arg1, arg2, arg3);
-          if (isDefined(value)) {
-            // any function which returns a value needs to be wrapped
-            value = JQLite(value);
-          }
-        } else {
-          addNodes(value, fn(this[i], arg1, arg2, arg3));
-        }
-      }
-      return isDefined(value) ? value : this;
-    };
-  },
-);
+/**
+ * Executea a function on `DOMContentLoaded`
+ * @param {Function} fn
+ */
+function onReady(fn) {
+  function trigger() {
+    window.document.removeEventListener("DOMContentLoaded", trigger);
+    fn();
+  }
+  // check if document is already loaded
+  if (window.document.readyState === "complete") {
+    window.setTimeout(fn);
+  } else {
+    // We can not use JQLite since we are not done loading.
+    window.document.addEventListener("DOMContentLoaded", trigger);
+  }
+}
 
 function createEventHandler(element, events) {
   const eventHandler = function (event, type) {
@@ -1102,3 +1130,27 @@ export function getBlockNodes(nodes) {
 
   return JQLite(blockNodes || nodes);
 }
+
+export function getBooleanAttrName(element, name) {
+  // check dom last since we will most likely fail on name
+  const booleanAttr = BOOLEAN_ATTR[name.toLowerCase()];
+
+  // booleanAttr is here twice to minimize DOM access
+  return booleanAttr && BOOLEAN_ELEMENTS[nodeName_(element)] && booleanAttr;
+}
+
+/**
+ * Takes an array of elements, calls any `$destroy` event handlers, removes any data in cache, and finally removes any
+ * listeners.
+ * @param {NodeListOf<Element>} nodes
+ */
+export function cleanElementData(nodes) {
+  for (let i = 0, ii = nodes.length; i < ii; i++) {
+    var events = (CACHE.get(nodes[i][EXPANDO]) || {}).events;
+    if (events && events.$destroy) {
+      JQLite(nodes[i]).triggerHandler("$destroy");
+    }
+    removeElementData(nodes[i]);
+    JQLite.prototype.off.call(JQLite(nodes[i]));
+  }
+}