Utility function that adds in some jQuery-like syntactic sugar

jSugar.js

// jQuery-like syntactic sugar. Only queries for one element. Does not loop over multiple like jQuery
export function $(query) {
  if (typeof query === 'undefined') throw 'No query provided to $';

  var el;
  if (typeof query.nodeType === 'string') {
    el = query;
  } else if (typeof query === 'string' && query[0] === '<') {
    const container = document.createElement('div');
    container.innerHTML = query;
    el = container.firstChild;
  } else if (typeof query === 'string') {
    el = document.querySelector(query);
  } else {
    el = query;
  }

  if (el) {
    el.on = (e, fn, ...args) => {
      if (args.length > 0) {
        el.addEventListener(e, fn, ...args);
      } else {
        el.addEventListener(e, fn, false);
      }

      return el;
    };

    el.off = (eventType, callback) => { el.removeEventListener(eventType, callback); return el; }

    el.once = (e, fn) => el.addEventListener(e, fn, {once: true});

    el.trigger = (eventOrType, optDetail) => {
      const detail = (optDetail ? { detail: optDetail } : undefined);
      const e = (typeof eventOrType === 'string' ? new CustomEvent(eventOrType, detail) : eventOrType);
      el.dispatchEvent(e);

      return el;
    };

    el.hasClass =    c => el.classList.contains(c);
    el.addClass =    c => { el.classList.add(c); return el; }
    el.removeClass = c => { el.classList.remove(c); return el; }
    el.toggleClass = c => { el.classList.toggle(c); return el; }
    el.append = element => { el.appendChild($(element)); return el; }
    el.remove = () => {
      if (el && el.parentNode) el.parentNode.removeChild(el);
      return el;
    }
    el.show = () => { el.style.display = 'initial'; return el; }
    el.attr = (name, val) => {
      if (isUndefined(val)) {
        return el.getAttribute(name);
      } else {
        el.setAttribute(name, val);
        return el;
      }
    };
    el.removeAttr = name => { el.removeAttribute(name); return el; }
    el.val = () => el.value;
    el.find = q => $(q, el);
    el.parent = () => $(el.parentElement);
    el.html = h => {
      if (isUndefined(h)) {
        return el.innerHTML;
      } else {
        el.innerHTML = h;
        return el;
      }
    };
  }

  function isUndefined(v) {
    return typeof v === 'undefined';
  }

  return el;
}

scripts.js

import { $ } from './jSugar.js';

const element = $('#myElement');
element.on('click', () => {
  console.log('Element clicked!');
});

2020-09-29:

• Added $.once(event, callback)
• Added $.attr(attr, val)
• Added $.removeAttr(attr)
• Added $.toggleClass(className)
• Added $.show() which sets the node style display to initial
• Changed $.html() to function as a getter/setter like jQuery does. It used to be alias for innerHTML.

2021-03-03

• Added $.parent to return the parent element of the selected element

2024-05-23: Changed to module