jj 0.1.1 → 2.1.0

package/lib/bundle.js

@@ -0,0 +1,706 @@
+// 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);
+}
+
+// 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;
+  }
+  /**
+   * We prevent FOUC by assigning the template and CSS in one go
+   * @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
+async function fetchText(url, mime = "text/*") {
+  if (!isStr(mime)) {
+    throw new TypeError(`Expected a string mime like 'text/html' or 'text/css'. Got ${mime} (${typeof mime})`);
+  }
+  const response = await fetch(url, { headers: { Accept: mime } });
+  if (!response.ok) {
+    throw new Error(`GET ${url} failed: ${response.status} ${response.statusText}`);
+  }
+  return response.text();
+}
+async function fetchHtml(url) {
+  return await fetchText(url, "text/html");
+}
+async function fetchCss(url) {
+  return await fetchText(url, "text/css");
+}
+async function cssToStyle(css) {
+  const sheet = new CSSStyleSheet();
+  return await sheet.replace(css);
+}
+async function fetchStyle(url) {
+  return await cssToStyle(await fetchCss(url));
+}
+function addLinkPre(href, rel, as = "fetch") {
+  const link = WHE.fromTag("link").setAttrs({
+    rel,
+    href,
+    as
+  });
+  document.head.append(link.ref);
+  return link;
+}
+async function processStyleConfig(style) {
+  if (isFn(style)) {
+    style = await style();
+  }
+  style = await style;
+  if (isA(style, CSSStyleSheet)) {
+    return style;
+  }
+  if (isStr(style)) {
+    return await cssToStyle(style);
+  }
+  throw new TypeError(`Expected a css string or CSSStyleSheet. Got ${style} (${typeof style})`);
+}
+async function processConfig(templateResource, styleResources) {
+  const templatePromise = isFn(templateResource) ? templateResource() : Promise.resolve(templateResource);
+  if (!isDef(styleResources)) {
+    styleResources = [];
+  }
+  if (!isArr(styleResources)) {
+    styleResources = [styleResources];
+  }
+  const [template, ...styles] = await Promise.all([templatePromise, ...styleResources.map(processStyleConfig)]);
+  return { template, styles };
+}
+var WC = class extends HTMLElement {
+  static async register() {
+    if (!isObj(this.jj)) {
+      throw new Error(`static jj object is missing from the extending class. Got ${this.jj} (${typeof this.jj})`);
+    }
+    const { name } = this.jj;
+    if (!isStr(name)) {
+      throw new TypeError(`Expected a string name. Got ${name} (${typeof name})`);
+    }
+    if (!customElements.get(name)) {
+      customElements.define(name, this);
+      await customElements.whenDefined(name);
+    }
+  }
+  async connectedCallback() {
+    const classRef = this.constructor;
+    const jj = classRef.jj;
+    if (!isObj(jj)) {
+      throw new TypeError(`static jj object is missing from the extending class. Got ${jj} (${typeof jj})`);
+    }
+    if (!classRef._jjCache) {
+      classRef._jjCache = processConfig(classRef.jj.template, classRef.jj.styles);
+    }
+    const { template, styles } = await classRef._jjCache;
+    const { templateMode } = jj;
+    WHE.from(this).setShadow(templateMode, template, ...styles);
+  }
+  /**
+   * 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,
+  addLinkPre,
+  cssToStyle,
+  fetchCss,
+  fetchHtml,
+  fetchStyle,
+  fetchText,
+  h,
+  keb2cam,
+  keb2pas,
+  nextAnimationFrame,
+  off,
+  on,
+  pas2keb
+};
+//# sourceMappingURL=bundle.js.map