Build a jQuery-style library

(function (window, document) {
  "use strict";

  const previousDollar = window.$;
  const events = new WeakMap();
  const slice = Array.prototype.slice;

  function isElement(value) {
    return value && (value.nodeType === 1 || value === window || value === document);
  }

  function isListLike(value) {
    return value && typeof value !== "string" && typeof value.length === "number";
  }

  function normalize(input, context) {
    if (!input) return [];
    if (input instanceof Collection) return input.toArray();
    if (typeof input === "string") return slice.call((context || document).querySelectorAll(input));
    if (isElement(input)) return [input];
    if (isListLike(input)) return slice.call(input).filter(Boolean);
    return [];
  }

  function classes(names) {
    return String(names).trim().split(/\s+/).filter(Boolean);
  }

  function remember(element, record) {
    const list = events.get(element) || [];
    list.push(record);
    events.set(element, list);
  }

  function Collection(input, context) {
    const elements = normalize(input, context);
    this.length = elements.length;
    for (let index = 0; index < elements.length; index += 1) {
      this[index] = elements[index];
    }
  }

  function $(input, context) {
    return new Collection(input, context);
  }

  Collection.prototype.toArray = function () {
    return slice.call(this, 0, this.length);
  };

  Collection.prototype.each = function (callback) {
    for (let index = 0; index < this.length; index += 1) {
      callback.call(this[index], this[index], index);
    }
    return this;
  };

  Collection.prototype.map = function (callback) {
    return $(this.toArray().map(function (element, index) {
      return callback.call(element, element, index);
    }).filter(Boolean));
  };

  Collection.prototype.filter = function (test) {
    const predicate = typeof test === "string"
      ? function (element) { return element.matches(test); }
      : test;
    return $(this.toArray().filter(function (element, index) {
      return predicate.call(element, element, index);
    }));
  };

  Collection.prototype.find = function (selector) {
    const found = [];
    this.each(function (element) {
      found.push.apply(found, element.querySelectorAll(selector));
    });
    return $(found);
  };

  Collection.prototype.addClass = function (names) {
    return this.each(function (element) {
      element.classList.add.apply(element.classList, classes(names));
    });
  };

  Collection.prototype.removeClass = function (names) {
    return this.each(function (element) {
      element.classList.remove.apply(element.classList, classes(names));
    });
  };

  Collection.prototype.toggleClass = function (name, force) {
    return this.each(function (element) {
      element.classList.toggle(name, force);
    });
  };

  Collection.prototype.css = function (name, value) {
    if (typeof name === "string" && value === undefined) {
      return this[0] ? window.getComputedStyle(this[0])[name] : undefined;
    }
    const styles = typeof name === "object" ? name : { [name]: value };
    return this.each(function (element) {
      Object.keys(styles).forEach(function (property) {
        element.style[property] = styles[property];
      });
    });
  };

  Collection.prototype.text = function (value) {
    if (value === undefined) return this[0] ? this[0].textContent : "";
    return this.each(function (element) {
      element.textContent = value;
    });
  };

  Collection.prototype.attr = function (name, value) {
    if (value === undefined) return this[0] ? this[0].getAttribute(name) : undefined;
    return this.each(function (element) {
      if (value === null) element.removeAttribute(name);
      else element.setAttribute(name, String(value));
    });
  };

  Collection.prototype.on = function (type, selector, handler) {
    const delegated = typeof selector === "string";
    const listener = delegated ? handler : selector;
    if (typeof listener !== "function") return this;
    return this.each(function (element) {
      const wrapped = function (event) {
        if (!delegated) {
          listener.call(element, event, element);
          return;
        }
        const match = event.target.closest(selector);
        if (match && element.contains(match)) listener.call(match, event, match);
      };
      remember(element, { type: type, selector: delegated ? selector : null, listener: listener, wrapped: wrapped });
      element.addEventListener(type, wrapped);
    });
  };

  Collection.prototype.off = function (type, selector, handler) {
    const delegated = typeof selector === "string";
    const listener = delegated ? handler : selector;
    return this.each(function (element) {
      const list = events.get(element) || [];
      const kept = [];
      list.forEach(function (record) {
        const sameType = !type || record.type === type;
        const sameSelector = !delegated || record.selector === selector;
        const sameListener = !listener || record.listener === listener;
        if (sameType && sameSelector && sameListener) element.removeEventListener(record.type, record.wrapped);
        else kept.push(record);
      });
      events.set(element, kept);
    });
  };

  $.fn = Collection.prototype;
  $.extend = function (target) {
    const sources = slice.call(arguments, 1);
    if (sources.length === 0) {
      sources.push(target);
      target = $;
    }
    sources.forEach(function (source) {
      Object.keys(source || {}).forEach(function (key) {
        target[key] = source[key];
      });
    });
    return target;
  };
  $.noConflict = function () {
    if (window.$ === $) window.$ = previousDollar;
    return $;
  };

  window.$ = $;
})(window, document);

const items = $(".item");
const button = $(document.querySelector(".save"));
const fromList = $(document.querySelectorAll(".item"));
console.log(items.length);
console.log(button.length);
console.log(fromList[0].textContent.trim());

const a = $(".item");
const b = $(".save");
console.log(a.addClass === b.addClass);

function Dollar(selector) {
  return new Dollar.fn.init(selector);
}
Dollar.fn = Dollar.prototype = {
  constructor: Dollar,
  addClass(name) {
    this[0].classList.add(name);
    return this;
  },
};
Dollar.fn.init = function (selector) {
  this[0] = document.querySelector(selector);
  this.length = this[0] ? 1 : 0;
};
Dollar.fn.init.prototype = Dollar.fn;

$(".item")
  .addClass("active")
  .attr("data-state", "ready")
  .text("Hi");
console.log($(".item").attr("class"));
console.log($(".item").attr("data-state"));
console.log($(".item").text());

console.log($(".item").css("color"));
$(".item").css("color", "crimson");
$(".item").css({ backgroundColor: "lemonchiffon" });
console.log($(".item").attr("data-name"));
$(".item").attr("data-name", "renamed");

const list = $(".todo-list");
let heard = "";
function rememberClick(event) {
  heard = this.dataset.name;
}
list.on("click", ".item", rememberClick);
document.querySelector('[data-name="Beta"]').click();
list.off("click", ".item", rememberClick);
console.log(heard);

$.fn.highlight = function (color = "gold") {
  return this.css("backgroundColor", color).addClass("highlighted");
};
$(".item").highlight("gold").text("Plugin");
console.log($(".item").attr("class"));
console.log($(".item").text());

const localDollar = $.noConflict();
console.log(window.$ === undefined ? "released" : "still global");
window.$ = localDollar;
console.log(localDollar(".item").length);

document.querySelectorAll(".item").forEach((element) => {
  element.classList.add("active");
  element.textContent = "Hi";
});
document.querySelector(".todo-list")?.addEventListener("click", (event) => {
  const item = event.target.closest(".item");
  if (item) console.log(item.dataset.name);
});

export function selectAll(selector, root = document) {
  return [...root.querySelectorAll(selector)];
}

export function addClass(elements, name) {
  for (const element of elements) element.classList.add(name);
  return elements;
}