jj 0.1.0 → 2.0.0

package/lib/bundle.js

@@ -0,0 +1,737 @@
+// src/util.ts
+function nextAnimationFrame() {
+  return new Promise((resolve) => requestAnimationFrame(resolve));
+}
+function on(target, eventName, handler) {
+  target.addEventListener(eventName, handler);
+}
+function off(target, eventName, handler) {
+  target.removeEventListener(eventName, handler);
+}
+async function ensureComponent(name, constructor) {
+  if (!customElements.get(name)) {
+    customElements.define(name, constructor);
+    await customElements.whenDefined(name);
+    return constructor;
+  }
+  return constructor;
+}
+
+// src/case.ts
+function pas2keb(str) {
+  if (typeof str !== "string") {
+    throw new TypeError(`Expected a string. Got ${str} (${typeof str})`);
+  }
+  if (/[^a-zA-Z0-9_]/.test(str)) {
+    throw new TypeError(`Invalid characters in string. Only alphanumeric and underscores are allowed. Got: ${str}`);
+  }
+  return str.replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/([A-Z])([A-Z][a-z])/g, "$1-$2").replace(/_/g, "-").toLowerCase();
+}
+function keb2pas(str) {
+  if (typeof str !== "string") {
+    throw new TypeError(`Expected a string. Got ${str} (${typeof str})`);
+  }
+  return str.split("-").filter(Boolean).map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join("") || // Handle strings that were not kebab-case to begin with (e.g. 'single', 'camelCase')
+  (str.length > 0 ? str.charAt(0).toUpperCase() + str.slice(1) : "");
+}
+function keb2cam(str) {
+  if (typeof str !== "string") {
+    throw new TypeError(`Expected a string. Got ${str} (${typeof str})`);
+  }
+  return str.replace(/^-+|-+$/g, "").replace(/-+([a-z])/g, (g, c) => c.toUpperCase());
+}
+
+// node_modules/jty/lib/misc.js
+function isDef(x) {
+  return x !== void 0;
+}
+function isFn(x) {
+  return typeof x === "function";
+}
+
+// node_modules/jty/lib/number.js
+var { isNaN, isFinite, isInteger } = Number;
+function isNum(x) {
+  return typeof x === "number" && !isNaN(x);
+}
+function inRange(x, min, max) {
+  if (!isNum(x)) {
+    throw new TypeError(`inRange(): "x" must be a number. Got ${x} (${typeof x})`);
+  }
+  if (isDef(min)) {
+    if (!isNum(min)) {
+      throw new TypeError(`inRange(): "min" must be a number. Got ${min} (${typeof min})`);
+    }
+    if (isDef(max)) {
+      if (!isNum(max)) {
+        throw new TypeError(`inRange(): "max" must be a number. Got ${max} (${typeof max})`);
+      }
+      if (min > max) {
+        return max <= x && x <= min;
+      }
+      return min <= x && x <= max;
+    }
+    return x >= min;
+  } else if (isDef(max)) {
+    if (!isNum(max)) {
+      throw new TypeError(`inRange(): "max" must be a number. Got ${max} (${typeof max})`);
+    }
+    return x <= max;
+  }
+  throw new TypeError(`inRange(): expected at least min or max to be defined. Got min=${min} and max=${max}`);
+}
+
+// node_modules/jty/lib/array.js
+var { isArray } = Array;
+function isArr(x, minLen = 0, maxLen) {
+  return isArray(x) && inRange(x.length, minLen, maxLen);
+}
+
+// node_modules/jty/lib/object.js
+var { hasOwnProperty } = Object;
+function isObj(x) {
+  return Boolean(x) && typeof x === "object";
+}
+function isA(x, classConstructor) {
+  if (!isFn(classConstructor)) {
+    throw new TypeError(`Expected a constructor function. Got ${classConstructor} (${typeof classConstructor})`);
+  }
+  return x instanceof classConstructor;
+}
+function hasProp(x, ...propNames) {
+  if (!isObj(x)) {
+    return false;
+  }
+  for (let propName of propNames) {
+    if (!(propName in x)) {
+      return false;
+    }
+  }
+  return true;
+}
+
+// node_modules/jty/lib/string.js
+function isStr(x) {
+  return typeof x === "string";
+}
+
+// node_modules/jty/lib/same.js
+var { hasOwnProperty: hasOwnProperty2 } = Object;
+var { isArray: isArray2 } = Array;
+
+// src/WN.ts
+function isElementOrDocumentFragment(x) {
+  return isA(x, Element) || isA(x, DocumentFragment);
+}
+var WN = class _WN {
+  static from(node) {
+    return new _WN(node);
+  }
+  /**
+   * wraps an iteratable object (e.g. an array of wrapped or DOM elements)
+   */
+  static wrapAll(iterable) {
+    return Array.from(iterable, _WN.wrap);
+  }
+  /**
+   * unwraps an iteratable object (e.g. an array of HTMLCollection)
+   */
+  static unwrapAll(iterable) {
+    return Array.from(iterable, _WN.unwrap);
+  }
+  static byId(id, throwIfNotFound = true) {
+    const el = document.getElementById(id);
+    if (el) {
+      return _WN.wrap(el);
+    }
+    if (throwIfNotFound) {
+      throw new TypeError(`Element with id ${id} not found`);
+    }
+    return null;
+  }
+  static byClass(className) {
+    return _WN.wrapAll(document.getElementsByClassName(className));
+  }
+  static query(selector, throwIfNotFound = true) {
+    const queryResult = document.querySelector(selector);
+    if (queryResult) {
+      return _WN.wrap(queryResult);
+    }
+    if (throwIfNotFound) {
+      throw new TypeError(`Element with selector ${selector} not found`);
+    }
+    return null;
+  }
+  query(selector, throwIfNotFound = true) {
+    if (!isElementOrDocumentFragment(this.ref)) {
+      throw new TypeError(`Expected an Element or DocumentFragment. Got ${this.ref} (${typeof this.ref})`);
+    }
+    const queryResult = this.ref.querySelector(selector);
+    if (queryResult) {
+      return _WN.wrap(queryResult);
+    }
+    if (throwIfNotFound) {
+      throw new TypeError(`Element with selector ${selector} not found`);
+    }
+    return null;
+  }
+  static queryAll(selector) {
+    return _WN.wrapAll(document.querySelectorAll(selector));
+  }
+  queryAll(selector) {
+    if (!isElementOrDocumentFragment(this.ref)) {
+      throw new TypeError(`Expected an Element or DocumentFragment. Got ${this.ref} (${typeof this.ref})`);
+    }
+    return _WN.wrapAll(this.ref.querySelectorAll(selector));
+  }
+  #ref;
+  constructor(ref) {
+    if (!isA(ref, Node)) {
+      throw new TypeError(`Expected a Node. Got ${ref} (${typeof ref})`);
+    }
+    this.#ref = ref;
+  }
+  get ref() {
+    return this.#ref;
+  }
+  clone(deep) {
+    return _WN.wrap(this.ref.cloneNode(deep));
+  }
+  append(...children) {
+    const nodes = _WN.unwrapAll(children);
+    if (isElementOrDocumentFragment(this.ref)) {
+      this.ref.append(...nodes);
+    } else {
+      for (const node of nodes) {
+        if (node) {
+          this.ref.appendChild(node);
+        }
+      }
+    }
+    return this;
+  }
+  mapAppend(array, mapFn) {
+    return this.append(...array.map(mapFn));
+  }
+  prepend(...children) {
+    const nodes = _WN.unwrapAll(children);
+    if (isElementOrDocumentFragment(this.ref)) {
+      this.ref.prepend(...nodes);
+    } else {
+      const first = this.ref.firstChild;
+      for (const node of nodes) {
+        if (node) {
+          this.ref.insertBefore(node, first);
+        }
+      }
+    }
+    return this;
+  }
+  mapPrepend(array, mapFn) {
+    return this.prepend(...array.map(mapFn));
+  }
+  on(eventName, handler) {
+    on(this.ref, eventName, handler);
+    return this;
+  }
+  off(eventName, handler) {
+    off(this.ref, eventName, handler);
+    return this;
+  }
+  rm() {
+    this.ref.parentNode?.removeChild(this.ref);
+    return this;
+  }
+};
+
+// src/WT.ts
+var WT = class _WT extends WN {
+  static from(text) {
+    if (!isA(text, Text)) {
+      throw new TypeError(`Expected a Text object. Got: ${text} (${typeof text})`);
+    }
+    return new _WT(text);
+  }
+  constructor(ref) {
+    if (isStr(ref)) {
+      super(document.createTextNode(ref));
+    } else if (isA(ref, Text)) {
+      super(ref);
+    }
+    throw new TypeError(`Expected a Text. Got: ${ref} (${typeof ref})`);
+  }
+  getText() {
+    return this.ref.textContent;
+  }
+  setText(text) {
+    if (!isStr(text)) {
+      throw new TypeError(`Expected a string. Got: ${text} (${typeof text})`);
+    }
+    this.ref.textContent = text;
+    return this;
+  }
+  empty() {
+    return this.setText("");
+  }
+  addLines(...lines) {
+    return this.setText(lines.join("\n"));
+  }
+};
+
+// src/WDF.ts
+var WDF = class _WDF extends WN {
+  static from(ref) {
+    return new _WDF(ref);
+  }
+  constructor(ref) {
+    if (!isA(ref, DocumentFragment)) {
+      throw new TypeError(`Expected a DocumentFragment. Got ${ref} (${typeof ref})`);
+    }
+    super(ref);
+  }
+  byId(id, throwIfNotFound = true) {
+    const el = this.ref.getElementById(id);
+    if (el) {
+      return WN.wrap(el);
+    }
+    if (throwIfNotFound) {
+      throw new TypeError(`Element with id ${id} not found`);
+    }
+    return null;
+  }
+  empty() {
+    this.ref.replaceChildren();
+    return this;
+  }
+};
+
+// src/WSH.ts
+var WSH = class _WSH extends WDF {
+  static from(shadow) {
+    return new _WSH(shadow);
+  }
+  constructor(shadow) {
+    if (!isA(shadow, ShadowRoot)) {
+      throw new TypeError(`Expected a ShadowRoot. Got ${shadow} (${typeof shadow})`);
+    }
+    super(shadow);
+  }
+  getHtml() {
+    return this.ref.innerHTML;
+  }
+  setHtml(value, unsafe) {
+    this.ref.innerHTML = value;
+    return this;
+  }
+  addStyleSheets(...styleSheets) {
+    this.ref.adoptedStyleSheets.push(...styleSheets);
+    return this;
+  }
+};
+
+// src/WE.ts
+var WE = class _WE extends WN {
+  static from(ref) {
+    return new _WE(ref);
+  }
+  constructor(ref) {
+    if (!isA(ref, Element)) {
+      throw new TypeError(`Expected a Element. Got: ${ref} (${typeof ref})`);
+    }
+    super(ref);
+  }
+  getAttr(name) {
+    return this.ref.getAttribute(name);
+  }
+  hasAttr(name) {
+    return this.ref.hasAttribute(name);
+  }
+  setAttr(name, value) {
+    this.ref.setAttribute(name, value);
+    return this;
+  }
+  setAttrs(obj) {
+    if (!isObj(obj)) {
+      throw new TypeError(`Expected an object. Got: ${obj} (${typeof obj})`);
+    }
+    for (const [name, value] of Object.entries(obj)) {
+      this.setAttr(name, value);
+    }
+    return this;
+  }
+  rmAttr(name) {
+    return this.rmAttrs(name);
+  }
+  rmAttrs(...names) {
+    for (const name of names) {
+      this.ref.removeAttribute(name);
+    }
+    return this;
+  }
+  getAria(name) {
+    return this.ref.getAttribute(`aria-${name}`);
+  }
+  hasAria(name) {
+    return this.ref.hasAttribute(`aria-${name}`);
+  }
+  setAria(name, value) {
+    this.ref.setAttribute(`aria-${name}`, value);
+    return this;
+  }
+  rmAria(name) {
+    this.ref.removeAttribute(`aria-${name}`);
+    return this;
+  }
+  addClass(...classNames) {
+    this.ref.classList.add(...classNames);
+    return this;
+  }
+  rmClasses(...classNames) {
+    this.ref.classList.remove(...classNames);
+    return this;
+  }
+  rmClass(className) {
+    return this.rmClasses(className);
+  }
+  hasClass(className) {
+    return this.ref.classList.contains(className);
+  }
+  toggleClass(className) {
+    this.ref.classList.toggle(className);
+    return this;
+  }
+  onClick(handler) {
+    return this.on("click", handler);
+  }
+  hide() {
+    return this.setAttr("hidden", "").setAttr("aria-hidden", "true");
+  }
+  show() {
+    return this.rmAttrs("hidden", "aria-hidden");
+  }
+  disable() {
+    return this.setAttr("disabled", "").setAttr("aria-disabled", "true");
+  }
+  enable() {
+    return this.rmAttrs("disabled", "aria-disabled");
+  }
+  getTitle() {
+    return this.getAttr("title");
+  }
+  setTitle(title) {
+    return this.setAttr("title", title);
+  }
+  setId(id) {
+    return this.setAttr("id", id);
+  }
+  getId() {
+    return this.getAttr("id");
+  }
+  getHtml() {
+    return this.ref.innerHTML;
+  }
+  setHtml(html) {
+    this.ref.innerHTML = html;
+    return this;
+  }
+  /**
+   * @remarks
+   * **Note:** You can't attach a shadow root to every type of element. There are some that can't have a
+   * shadow DOM for security reasons (for example `<a>`).
+   */
+  setShadow(mode = "open", html, ...styleSheets) {
+    const shadowRoot = this.ref.shadowRoot ?? this.ref.attachShadow({ mode });
+    if (html) {
+      shadowRoot.innerHTML = html;
+    }
+    if (styleSheets.length) {
+      shadowRoot.adoptedStyleSheets.push(...styleSheets);
+    }
+    return this;
+  }
+  getShadow() {
+    if (!this.ref.shadowRoot) throw new Error("No shadow root");
+    return new WSH(this.ref.shadowRoot);
+  }
+};
+
+// src/WHE.ts
+var WHE = class _WHE extends WE {
+  static from(ref) {
+    return new _WHE(ref);
+  }
+  static fromTag(tagName, options) {
+    if (!isStr(tagName)) {
+      throw new TypeError(`Expected a string for tagName. Got: ${tagName} (${typeof tagName})`);
+    }
+    return new _WHE(document.createElement(tagName, options));
+  }
+  constructor(ref) {
+    if (!isA(ref, HTMLElement)) {
+      throw new TypeError(`Expected a HTMLElement. Got ${ref} (${typeof ref})`);
+    }
+    super(ref);
+  }
+  getValue() {
+    if (!hasProp(this.ref, "value")) {
+      throw new Error("Element does not have a value property");
+    }
+    return this.ref.value;
+  }
+  setValue(value) {
+    if (!hasProp(this.ref, "value")) {
+      throw new Error("Element does not have a value property");
+    }
+    this.ref.value = value;
+    return this;
+  }
+  getData(name) {
+    return this.ref.dataset[name];
+  }
+  hasData(name) {
+    return hasProp(this.ref.dataset, name);
+  }
+  setData(name, value) {
+    this.ref.dataset[name] = value;
+    return this;
+  }
+  setDataObj(obj) {
+    for (const [name, value] of Object.entries(obj)) {
+      this.setData(name, value);
+    }
+    return this;
+  }
+  rmData(name) {
+    delete this.ref.dataset[name];
+    return this;
+  }
+  focus() {
+    this.ref.focus();
+    return this;
+  }
+  click() {
+    this.ref.click();
+    return this;
+  }
+  empty() {
+    this.ref.innerText = "";
+    return this;
+  }
+  getText() {
+    return this.ref.innerText;
+  }
+  setText(text) {
+    this.ref.innerText = text;
+    return this;
+  }
+};
+
+// src/WC.ts
+var ComponentFile = class {
+  constructor(as, href, loading = "lazy") {
+    this.as = as;
+    this.href = href;
+    if (!isStr(href)) {
+      throw new TypeError(`Expected a string href. Got ${href} (${typeof href})`);
+    }
+    switch (loading) {
+      case "eager":
+        this.promise;
+        break;
+      case "prefetch":
+      case "preload":
+        this.addLinkPre(loading);
+        break;
+      case "lazy":
+        break;
+      default:
+        throw new RangeError(`Expected a valid loading strategy. Got: ${loading} (${typeof loading})`);
+    }
+  }
+  #promise;
+  /**
+   * Creates a <lik re="preload|prefetch"> element and adds it to the document <head> element.
+   * @param as the link "as" attribute. Use 'fetch' for HTML, 'style' for CSS, and 'script' for JavaScript
+   * @param rel when set to a truthy value, a 'preload' link is created. Otherwise a 'prefetch' is created
+   * The difference lies in the priority of loading the resource to the browser cache where preload has higher prio.
+   */
+  addLinkPre(rel) {
+    const link = WHE.fromTag("link").setAttr("rel", rel).setAttr("href", this.href).setAttr("as", this.as);
+    document.head.append(link.ref);
+    return this;
+  }
+  get promise() {
+    if (this.#promise === void 0) {
+      this.#promise = this.fetch();
+    }
+    return this.#promise;
+  }
+};
+var TemplateFile = class extends ComponentFile {
+  constructor(href, loading) {
+    super("fetch", href, loading);
+  }
+  async fetch() {
+    const response = await fetch(this.href, { headers: { Accept: "text/html" } });
+    if (!response.ok) {
+      throw new Error(`GET ${this.href} failed: ${response.status} ${response.statusText}`);
+    }
+    return response.text();
+  }
+};
+var StyleFile = class extends ComponentFile {
+  constructor(href, loading) {
+    super("style", href, loading);
+  }
+  async fetch() {
+    const response = await fetch(this.href, { headers: { Accept: "text/css" } });
+    if (!response.ok) {
+      throw new Error(`GET ${this.href} failed: ${response.status} ${response.statusText}`);
+    }
+    const text = await response.text();
+    const sheet = new CSSStyleSheet();
+    return sheet.replace(`${text}
+/*# sourceURL=${this.href} */`);
+  }
+};
+var TemplateStr = class {
+  constructor(content) {
+    if (!isStr(content)) {
+      throw new TypeError(`Expected a HTML string. Got ${content} (${typeof content})`);
+    }
+    this.promise = Promise.resolve(content);
+  }
+};
+var StyleStr = class {
+  constructor(css) {
+    if (!isStr(css)) {
+      throw new TypeError(`Expected a CSS string. Got ${css} (${typeof css})`);
+    }
+    const sheet = new CSSStyleSheet();
+    this.promise = sheet.replace(css);
+  }
+};
+var WC = class extends HTMLElement {
+  static setTemplateFile(href, loading) {
+    this.jjTemplate = new TemplateFile(href, loading);
+    return this;
+  }
+  static setTemplateHtml(html) {
+    this.jjTemplate = new TemplateStr(html);
+    return this;
+  }
+  static addStyleFile(href, loading) {
+    if (!isArr(this.jjStyle)) {
+      this.jjStyle = [];
+    }
+    this.jjStyle.push(new StyleFile(href, loading));
+    return this;
+  }
+  static addStyleCss(css) {
+    if (!isArr(this.jjStyle)) {
+      this.jjStyle = [];
+    }
+    this.jjStyle.push(new StyleStr(css));
+    return this;
+  }
+  async connectedCallback() {
+    const { jjTemplate: template, jjStyle: style = [], closedShadow } = this.constructor;
+    const [html, ...styleSheets] = await Promise.all([template?.promise, ...style.map((style2) => style2.promise)]);
+    WHE.from(this).setShadow(closedShadow ? "closed" : "open", html, ...styleSheets);
+  }
+  /**
+   * The class that extends this one should define
+   * `static observedAttributes[]` containing kebab-based attribute names (all lower case)
+   * @param name kebab-case and in lower case exactly as it appears in `observedAttributes`
+   * @param oldValue
+   * @param newValue
+   * @returns true if it tried to set the attribute; otherwise false
+   */
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue !== newValue) {
+      const observedAttributes = this.constructor.observedAttributes;
+      if (isArr(observedAttributes) && observedAttributes.includes(name)) {
+        const kebabName = keb2cam(name);
+        if (hasProp(this, kebabName)) {
+          this[kebabName] = newValue;
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+};
+
+// src/WN-mixin.ts
+WN.wrap = (raw) => {
+  if (isStr(raw)) {
+    return WT.from(document.createTextNode(raw));
+  }
+  if (!isObj(raw)) {
+    throw new TypeError(`Expected an object to wrap. Got ${raw} (${typeof raw})`);
+  }
+  if (isA(raw, WN)) {
+    return raw;
+  }
+  if (isA(raw, HTMLElement)) {
+    return WHE.from(raw);
+  }
+  if (isA(raw, Element)) {
+    return WE.from(raw);
+  }
+  if (isA(raw, ShadowRoot)) {
+    return WSH.from(raw);
+  }
+  if (isA(raw, DocumentFragment)) {
+    return WDF.from(raw);
+  }
+  if (isA(raw, Text)) {
+    return WT.from(raw);
+  }
+  if (isA(raw, Node)) {
+    return WN.from(raw);
+  }
+  throw new TypeError(`Only Frag or DocumentFragment can be wrapped. Got ${raw} (${typeof raw})`);
+};
+WN.unwrap = (obj) => {
+  if (isStr(obj)) {
+    return document.createTextNode(obj);
+  }
+  if (!isObj(obj)) {
+    throw new TypeError(`Expected an object. Got ${obj} (${typeof obj})`);
+  }
+  if (isA(obj, Node)) {
+    return obj;
+  }
+  if (isA(obj, WN)) {
+    return obj.ref;
+  }
+  throw new TypeError(`Could not unwrap ${obj} (${typeof obj})`);
+};
+
+// src/h.ts
+function h(tagName, attributes, ...children) {
+  const ret = WHE.fromTag(tagName).append(...children);
+  if (attributes) {
+    ret.setAttrs(attributes);
+  }
+  return ret;
+}
+export {
+  WC,
+  WDF,
+  WE,
+  WHE,
+  WN,
+  WSH,
+  WT,
+  ensureComponent,
+  h,
+  keb2cam,
+  keb2pas,
+  nextAnimationFrame,
+  off,
+  on,
+  pas2keb
+};
+//# sourceMappingURL=bundle.js.map