@zero-dependency/dom 1.6.0 → 1.7.0

package/dist/html.d.ts

@@ -4,11 +4,20 @@ type Attributes<T extends keyof HTMLElementTagNameMap> = Partial<{
 } & Omit<HTMLElementTagNameMap[T], 'style'>>;
 type Children = (string | Node | HTMLElement)[];
 /**
- * Create an element
- * @param tag The tag name of the element to create
- * @param attributes The attributes or children to set on the element
- * @param children The children to append to the element
- * @returns The created element
+ * Creates a new HTML element of the specified type and with the given attributes and children nodes.
+ *
+ * @param {T} tag
+ * The type of HTML element to create.
+ *
+ * @param {Attributes<T> | Children | HTMLElement} [attributes]
+ * The attributes or children nodes to add to the element.
+ *
+ * @param {...Children} children
+ * The children nodes to add to the element.
+ *
+ * @return {HTMLElementTagNameMap[T]}
+ * The newly created HTML element of the specified type.
+ *
  * @example
  * el('div', { id: 'foo' }, 'Hello world')
  * el('div', 'Hello world')
@@ -17,23 +26,22 @@ type Children = (string | Node | HTMLElement)[];
  * el('div', el('span', 'Hello'), el('span', 'world'))
  * el('div', el('span', 'Hello world'), 'world')
  */
-export declare function el<T extends keyof HTMLElementTagNameMap>(tag: T, attributes?: Attributes<T> | Children, ...children: Children): HTMLElementTagNameMap[T];
+export declare function el<T extends keyof HTMLElementTagNameMap>(tag: T, attributes?: Attributes<T> | Children | HTMLElement, ...children: Children): HTMLElementTagNameMap[T];
 /**
- * Create a text node
- * @param text The string to create a text node from
+ * Creates a new Text node with the provided text.
+ *
+ * @param {string} text
+ * The text to create the Text node with.
+ *
+ * @return {Text}
+ * A new Text node with the provided text.
  */
 export declare function text(text: string): Text;
 /**
- * A non-breaking space
+ * Returns a Text object containing a non-breaking space character.
+ *
+ * @return {Text}
+ * A Text object containing a non-breaking space character.
  */
 export declare function nbsp(): Text;
-type WindowEvent<T extends string> = T extends keyof WindowEventMap ? WindowEventMap[T] : Event;
-/**
- * Add an event listener to an element
- * @param el The element to add the event listener to
- * @param type The event type to listen for
- * @param callback The callback to call when the event is fired
- * @param options The options to pass to `addEventListener`
- */
-export declare function addEvent<T extends string>(el: HTMLElement, type: T, callback: (event: WindowEvent<T>) => void, options?: boolean | AddEventListenerOptions): () => void;
 export {};

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function l(r,e,...t){const n=document.createElement(r);return typeof e=="string"?n.append(c(e)):Array.isArray(e)?n.append(...e):(Object.assign(n,e),Object.assign(n.style,e?.style)),t.length&&n.append(...t),n}function c(r){return document.createTextNode(r)}function u(){return c(" ")}function d(r,e,t,n){return r.addEventListener(e,t,n),()=>r.removeEventListener(e,t,n)}class p{#e={};constructor(){const{history:e,location:t}=window,{pushState:n,replaceState:s}=e;e.pushState=(...o)=>{n.apply(e,o),this.#e?.pushState(t,o[0])},e.replaceState=(...o)=>{s.apply(e,o),this.#e?.replaceState(t,o[0])},window.addEventListener("popstate",o=>{this.#e?.popState(t,o)})}on(e,t){return this.#e[e]=t,()=>this.off(e)}off(e){delete this.#e[e]}}function i(r,e,t){const n=new MutationObserver((s,o)=>{for(const a of s)e(a,o)});return n.observe(r,{childList:!0,subtree:!0,...t}),()=>n.disconnect()}function f(r,e=document.documentElement){return new Promise(t=>{i(e,(n,s)=>{const o=e.querySelector(r);o&&(s.disconnect(),t(o))})})}exports.LocationObserver=p;exports.addEvent=d;exports.el=l;exports.nbsp=u;exports.observeElement=i;exports.text=c;exports.waitElement=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function u(t,e,...o){const n=document.createElement(t);return typeof e=="string"?n.append(s(e)):Array.isArray(e)?o.unshift(...e):(Object.assign(n,e),Object.assign(n.style,e?.style)),o.length&&n.append(...o),n}function s(t){return document.createTextNode(t)}function a(){return s(" ")}function p(t){const{history:e,location:o}=window,{pushState:n,replaceState:r}=e;e.pushState=(...c)=>{n.apply(e,c),t.onPush(o,c[0])},e.replaceState=(...c)=>{r.apply(e,c),t.onReplace(o,c[0])}}function i(t,e,o){const n=new MutationObserver((r,c)=>{for(const l of r)e(l,c)});return n.observe(t,{childList:!0,subtree:!0,...o}),()=>n.disconnect()}function f(t,e=document.body){return new Promise(o=>{i(e,(n,r)=>{const c=e.querySelector(t);c&&(r.disconnect(),o(c))})})}exports.el=u;exports.locationObserver=p;exports.nbsp=a;exports.observeElement=i;exports.text=s;exports.waitElement=f;
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../src/html.ts","../src/location-observer.ts","../src/mutation-observer.ts"],"sourcesContent":["import * as CSS from 'csstype'\n\n// prettier-ignore\ntype Attributes<T extends keyof HTMLElementTagNameMap> = Partial<{\n  style: CSS.Properties\n} & Omit<HTMLElementTagNameMap[T], 'style'>>\n\ntype Children = (string | Node | HTMLElement)[]\n\n/**\n * Create an element\n * @param tag The tag name of the element to create\n * @param attributes The attributes or children to set on the element\n * @param children The children to append to the element\n * @returns The created element\n * @example\n * el('div', { id: 'foo' }, 'Hello world')\n * el('div', 'Hello world')\n * el('div', [el('span', 'Hello'), el('span', 'world')])\n * el('div', el('span', 'Hello world'))\n * el('div', el('span', 'Hello'), el('span', 'world'))\n * el('div', el('span', 'Hello world'), 'world')\n */\nexport function el<T extends keyof HTMLElementTagNameMap>(\n  tag: T,\n  attributes?: Attributes<T> | Children,\n  ...children: Children\n): HTMLElementTagNameMap[T] {\n  const el = document.createElement(tag)\n\n  if (typeof attributes === 'string') {\n    el.append(text(attributes))\n  } else if (Array.isArray(attributes)) {\n    el.append(...attributes)\n  } else {\n    Object.assign(el, attributes)\n    Object.assign(el.style, attributes?.style)\n  }\n\n  if (children.length) {\n    el.append(...children)\n  }\n\n  return el\n}\n\n/**\n * Create a text node\n * @param text The string to create a text node from\n */\nexport function text(text: string): Text {\n  return document.createTextNode(text)\n}\n\n/**\n * A non-breaking space\n */\nexport function nbsp(): Text {\n  return text('\\u00a0')\n}\n\ntype WindowEvent<T extends string> = T extends keyof WindowEventMap\n  ? WindowEventMap[T]\n  : Event\n\n/**\n * Add an event listener to an element\n * @param el The element to add the event listener to\n * @param type The event type to listen for\n * @param callback The callback to call when the event is fired\n * @param options The options to pass to `addEventListener`\n */\nexport function addEvent<T extends string>(\n  el: HTMLElement,\n  type: T,\n  callback: (event: WindowEvent<T>) => void,\n  options?: boolean | AddEventListenerOptions\n): () => void\nexport function addEvent(\n  el: HTMLElement,\n  type: string,\n  cb: (event: Event) => void,\n  options?: boolean | AddEventListenerOptions\n): () => void {\n  el.addEventListener(type, cb, options)\n  return () => el.removeEventListener(type, cb, options)\n}\n","type LocationCallback<T = any> = (location: Location, args: T) => void\n\ntype Events<T> = {\n  pushState: LocationCallback<T>\n  replaceState: LocationCallback<T>\n  popState: LocationCallback<\n    Omit<PopStateEvent, 'state'> & { readonly state: T }\n  >\n}\n\n/**\n * Observe changes to the location\n * @example\n * const observer = new LocationObserver<{ id: string }>()\n * observer.on('pushState', (location, state) => {\n *   console.log(state.id)\n * })\n */\nexport class LocationObserver<T> {\n  #events = {} as Record<keyof Events<T>, LocationCallback<any>>\n\n  constructor() {\n    const { history, location } = window\n    const { pushState, replaceState } = history\n\n    history.pushState = (...args) => {\n      pushState.apply(history, args)\n      this.#events?.pushState(location, args[0])\n    }\n\n    history.replaceState = (...args) => {\n      replaceState.apply(history, args)\n      this.#events?.replaceState(location, args[0])\n    }\n\n    window.addEventListener('popstate', (event) => {\n      this.#events?.popState(location, event)\n    })\n  }\n\n  on<E extends keyof Events<T>>(event: E, listener: Events<T>[E]): () => void {\n    this.#events[event] = listener\n    return () => this.off(event)\n  }\n\n  off<E extends keyof Events<T>>(event: E): void {\n    delete this.#events[event]\n  }\n}\n","type Disconnect = () => void\n\n/**\n * Observe mutations on an element\n * @param el The element to observe\n * @param callback The callback to call when a mutation occurs\n * @param options The options to pass to the `MutationObserver`\n * @returns A function to disconnect the observer\n */\nexport function observeElement<T extends Element = Element>(\n  el: T,\n  callback: (mutation: MutationRecord, observer: MutationObserver) => void,\n  options?: MutationObserverInit\n): Disconnect {\n  const observe = new MutationObserver((mutations, observer) => {\n    for (const mutation of mutations) {\n      callback(mutation, observer)\n    }\n  })\n\n  observe.observe(el, {\n    childList: true,\n    subtree: true,\n    ...options\n  })\n\n  return () => observe.disconnect()\n}\n\n/**\n * Wait for an element to appear in the DOM\n * @param selector The selector to wait for\n * @param target The element to search in\n * @returns A promise that resolves when the element is found\n */\nexport function waitElement<T extends Element = Element>(\n  selector: string,\n  target = document.documentElement\n): Promise<T> {\n  return new Promise((resolve) => {\n    observeElement(target, (_, observer) => {\n      const el = target.querySelector<T>(selector)\n      if (el) {\n        observer.disconnect()\n        resolve(el)\n      }\n    })\n  })\n}\n"],"names":["el","tag","attributes","children","text","nbsp","addEvent","type","cb","options","LocationObserver","#events","history","location","pushState","replaceState","args","event","listener","observeElement","callback","observe","mutations","observer","mutation","waitElement","selector","target","resolve","_"],"mappings":"gFAuBgB,SAAAA,EACdC,EACAC,KACGC,EACuB,CACpBH,MAAAA,EAAK,SAAS,cAAcC,CAAG,EAEjC,OAAA,OAAOC,GAAe,SACxBF,EAAG,OAAOI,EAAKF,CAAU,CAAC,EACjB,MAAM,QAAQA,CAAU,EACjCF,EAAG,OAAO,GAAGE,CAAU,GAEhB,OAAA,OAAOF,EAAIE,CAAU,EAC5B,OAAO,OAAOF,EAAG,MAAOE,GAAY,KAAK,GAGvCC,EAAS,QACXH,EAAG,OAAO,GAAGG,CAAQ,EAGhBH,CACT,CAMO,SAASI,EAAKA,EAAoB,CAChC,OAAA,SAAS,eAAeA,CAAI,CACrC,CAKO,SAASC,GAAa,CAC3B,OAAOD,EAAK,GAAQ,CACtB,CAmBO,SAASE,EACdN,EACAO,EACAC,EACAC,EACY,CACZT,OAAAA,EAAG,iBAAiBO,EAAMC,EAAIC,CAAO,EAC9B,IAAMT,EAAG,oBAAoBO,EAAMC,EAAIC,CAAO,CACvD,CCpEO,MAAMC,CAAoB,CAC/BC,GAAU,CAAA,EAEV,aAAc,CACN,KAAA,CAAE,QAAAC,EAAS,SAAAC,CAAa,EAAA,OACxB,CAAE,UAAAC,EAAW,aAAAC,CAAiB,EAAAH,EAE5BA,EAAA,UAAY,IAAII,IAAS,CACrBF,EAAA,MAAMF,EAASI,CAAI,EAC7B,KAAKL,IAAS,UAAUE,EAAUG,EAAK,CAAC,CAAC,CAAA,EAGnCJ,EAAA,aAAe,IAAII,IAAS,CACrBD,EAAA,MAAMH,EAASI,CAAI,EAChC,KAAKL,IAAS,aAAaE,EAAUG,EAAK,CAAC,CAAC,CAAA,EAGvC,OAAA,iBAAiB,WAAaC,GAAU,CACxC,KAAAN,IAAS,SAASE,EAAUI,CAAK,CAAA,CACvC,CACH,CAEA,GAA8BA,EAAUC,EAAoC,CACrE,YAAAP,GAAQM,CAAK,EAAIC,EACf,IAAM,KAAK,IAAID,CAAK,CAC7B,CAEA,IAA+BA,EAAgB,CACtC,OAAA,KAAKN,GAAQM,CAAK,CAC3B,CACF,CCvCgB,SAAAE,EACdnB,EACAoB,EACAX,EACY,CACZ,MAAMY,EAAU,IAAI,iBAAiB,CAACC,EAAWC,IAAa,CAC5D,UAAWC,KAAYF,EACrBF,EAASI,EAAUD,CAAQ,CAC7B,CACD,EAED,OAAAF,EAAQ,QAAQrB,EAAI,CAClB,UAAW,GACX,QAAS,GACT,GAAGS,CAAA,CACJ,EAEM,IAAMY,EAAQ,YACvB,CAQO,SAASI,EACdC,EACAC,EAAS,SAAS,gBACN,CACL,OAAA,IAAI,QAASC,GAAY,CACfT,EAAAQ,EAAQ,CAACE,EAAGN,IAAa,CAChC,MAAAvB,EAAK2B,EAAO,cAAiBD,CAAQ,EACvC1B,IACFuB,EAAS,WAAW,EACpBK,EAAQ5B,CAAE,EACZ,CACD,CAAA,CACF,CACH"}
+{"version":3,"file":"index.cjs","sources":["../src/html.ts","../src/location-observer.ts","../src/mutation-observer.ts"],"sourcesContent":["import * as CSS from 'csstype'\n\n// prettier-ignore\ntype Attributes<T extends keyof HTMLElementTagNameMap> = Partial<{\n  style: CSS.Properties\n} & Omit<HTMLElementTagNameMap[T], 'style'>>\n\ntype Children = (string | Node | HTMLElement)[]\n\n/**\n * Creates a new HTML element of the specified type and with the given attributes and children nodes.\n *\n * @param {T} tag\n * The type of HTML element to create.\n *\n * @param {Attributes<T> | Children | HTMLElement} [attributes]\n * The attributes or children nodes to add to the element.\n *\n * @param {...Children} children\n * The children nodes to add to the element.\n *\n * @return {HTMLElementTagNameMap[T]}\n * The newly created HTML element of the specified type.\n *\n * @example\n * el('div', { id: 'foo' }, 'Hello world')\n * el('div', 'Hello world')\n * el('div', [el('span', 'Hello'), el('span', 'world')])\n * el('div', el('span', 'Hello world'))\n * el('div', el('span', 'Hello'), el('span', 'world'))\n * el('div', el('span', 'Hello world'), 'world')\n */\nexport function el<T extends keyof HTMLElementTagNameMap>(\n  tag: T,\n  attributes?: Attributes<T> | Children | HTMLElement,\n  ...children: Children\n): HTMLElementTagNameMap[T] {\n  const el = document.createElement(tag)\n\n  if (typeof attributes === 'string') {\n    el.append(text(attributes))\n  } else if (Array.isArray(attributes)) {\n    children.unshift(...attributes)\n  } else {\n    Object.assign(el, attributes)\n    Object.assign(el.style, attributes?.style)\n  }\n\n  if (children.length) {\n    el.append(...children)\n  }\n\n  return el\n}\n\n/**\n * Creates a new Text node with the provided text.\n *\n * @param {string} text\n * The text to create the Text node with.\n *\n * @return {Text}\n * A new Text node with the provided text.\n */\nexport function text(text: string): Text {\n  return document.createTextNode(text)\n}\n\n/**\n * Returns a Text object containing a non-breaking space character.\n *\n * @return {Text}\n * A Text object containing a non-breaking space character.\n */\nexport function nbsp(): Text {\n  return text('\\u00a0')\n}\n","type LocationCallback<T = any> = (location: Location, args: T) => void\n\ntype Events<T> = {\n  onPush: LocationCallback<T>\n  onReplace: LocationCallback<T>\n}\n\n/**\n * Observes changes to the browser's location and history, and invokes\n * the specified callbacks when the user navigates to a new page or updates the\n * current page's state.\n *\n * @param {Events<T>} events\n * An object that contains optional callback functions for push and replace actions.\n *\n * @example\n * locationObserver<{ id: string }>({\n *   onPush: (location, args) => {},\n *   onReplace: (location, args) => {}\n * })\n */\nexport function locationObserver<T>(events: Events<T>): void {\n  const { history, location } = window\n  const { pushState, replaceState } = history\n\n  history.pushState = (...args) => {\n    pushState.apply(history, args)\n    events.onPush(location, args[0])\n  }\n\n  history.replaceState = (...args) => {\n    replaceState.apply(history, args)\n    events.onReplace(location, args[0])\n  }\n}\n","type Disconnect = () => void\n\n/**\n * Observes changes to an element and invokes a callback function for each mutation.\n *\n * @param {T extends Element} el\n * The element to observe.\n *\n * @param {(mutation: MutationRecord, observer: MutationObserver) => void} callback\n * The function to call when a mutation occurs.\n *\n * @param {MutationObserverInit} [options]\n * Optional configuration options for the MutationObserver.\n *\n * @returns {Disconnect}\n * A function that disconnects the observer.\n *\n * @example\n * const disconnect = observeElement(document.body, (mutation, observer) => {\n *   console.log(mutation)\n * })\n */\nexport function observeElement<T extends Element = Element>(\n  el: T,\n  callback: (mutation: MutationRecord, observer: MutationObserver) => void,\n  options?: MutationObserverInit\n): Disconnect {\n  const observe = new MutationObserver((mutations, observer) => {\n    for (const mutation of mutations) {\n      callback(mutation, observer)\n    }\n  })\n\n  observe.observe(el, {\n    childList: true,\n    subtree: true,\n    ...options\n  })\n\n  return () => observe.disconnect()\n}\n\n/**\n * Returns a Promise that resolves with the first element matching the given selector\n * in the specified target, or rejects if no matches are found.\n *\n * @param {string} selector\n * The CSS selector to match.\n *\n * @param {Element} [target=document.documentElement]\n * The element to search in.\n *\n * @returns {Promise<T>}\n * A Promise that resolves with the first matching element.\n *\n * @example\n * const el = await waitElement('.foo')\n */\nexport function waitElement<T extends Element = Element>(\n  selector: string,\n  target: Element = document.body\n): Promise<T> {\n  return new Promise((resolve) => {\n    observeElement(target, (_, observer) => {\n      const el = target.querySelector<T>(selector)\n      if (el) {\n        observer.disconnect()\n        resolve(el)\n      }\n    })\n  })\n}\n"],"names":["el","tag","attributes","children","text","nbsp","locationObserver","events","history","location","pushState","replaceState","args","observeElement","callback","options","observe","mutations","observer","mutation","waitElement","selector","target","resolve","_"],"mappings":"gFAgCgB,SAAAA,EACdC,EACAC,KACGC,EACuB,CACpBH,MAAAA,EAAK,SAAS,cAAcC,CAAG,EAEjC,OAAA,OAAOC,GAAe,SACxBF,EAAG,OAAOI,EAAKF,CAAU,CAAC,EACjB,MAAM,QAAQA,CAAU,EACxBC,EAAA,QAAQ,GAAGD,CAAU,GAEvB,OAAA,OAAOF,EAAIE,CAAU,EAC5B,OAAO,OAAOF,EAAG,MAAOE,GAAY,KAAK,GAGvCC,EAAS,QACXH,EAAG,OAAO,GAAGG,CAAQ,EAGhBH,CACT,CAWO,SAASI,EAAKA,EAAoB,CAChC,OAAA,SAAS,eAAeA,CAAI,CACrC,CAQO,SAASC,GAAa,CAC3B,OAAOD,EAAK,GAAQ,CACtB,CCvDO,SAASE,EAAoBC,EAAyB,CACrD,KAAA,CAAE,QAAAC,EAAS,SAAAC,CAAa,EAAA,OACxB,CAAE,UAAAC,EAAW,aAAAC,CAAiB,EAAAH,EAE5BA,EAAA,UAAY,IAAII,IAAS,CACrBF,EAAA,MAAMF,EAASI,CAAI,EAC7BL,EAAO,OAAOE,EAAUG,EAAK,CAAC,CAAC,CAAA,EAGzBJ,EAAA,aAAe,IAAII,IAAS,CACrBD,EAAA,MAAMH,EAASI,CAAI,EAChCL,EAAO,UAAUE,EAAUG,EAAK,CAAC,CAAC,CAAA,CAEtC,CCZgB,SAAAC,EACdb,EACAc,EACAC,EACY,CACZ,MAAMC,EAAU,IAAI,iBAAiB,CAACC,EAAWC,IAAa,CAC5D,UAAWC,KAAYF,EACrBH,EAASK,EAAUD,CAAQ,CAC7B,CACD,EAED,OAAAF,EAAQ,QAAQhB,EAAI,CAClB,UAAW,GACX,QAAS,GACT,GAAGe,CAAA,CACJ,EAEM,IAAMC,EAAQ,YACvB,CAkBO,SAASI,EACdC,EACAC,EAAkB,SAAS,KACf,CACL,OAAA,IAAI,QAASC,GAAY,CACfV,EAAAS,EAAQ,CAACE,EAAGN,IAAa,CAChC,MAAAlB,EAAKsB,EAAO,cAAiBD,CAAQ,EACvCrB,IACFkB,EAAS,WAAW,EACpBK,EAAQvB,CAAE,EACZ,CACD,CAAA,CACF,CACH"}

package/dist/index.js

@@ -1,61 +1,46 @@
-function u(r, e, ...t) {
-  const n = document.createElement(r);
-  return typeof e == "string" ? n.append(c(e)) : Array.isArray(e) ? n.append(...e) : (Object.assign(n, e), Object.assign(n.style, e?.style)), t.length && n.append(...t), n;
+function l(t, e, ...o) {
+  const n = document.createElement(t);
+  return typeof e == "string" ? n.append(s(e)) : Array.isArray(e) ? o.unshift(...e) : (Object.assign(n, e), Object.assign(n.style, e?.style)), o.length && n.append(...o), n;
 }
-function c(r) {
-  return document.createTextNode(r);
+function s(t) {
+  return document.createTextNode(t);
 }
 function p() {
-  return c(" ");
+  return s(" ");
 }
-function l(r, e, t, n) {
-  return r.addEventListener(e, t, n), () => r.removeEventListener(e, t, n);
+function a(t) {
+  const { history: e, location: o } = window, { pushState: n, replaceState: r } = e;
+  e.pushState = (...c) => {
+    n.apply(e, c), t.onPush(o, c[0]);
+  }, e.replaceState = (...c) => {
+    r.apply(e, c), t.onReplace(o, c[0]);
+  };
 }
-class d {
-  #e = {};
-  constructor() {
-    const { history: e, location: t } = window, { pushState: n, replaceState: s } = e;
-    e.pushState = (...o) => {
-      n.apply(e, o), this.#e?.pushState(t, o[0]);
-    }, e.replaceState = (...o) => {
-      s.apply(e, o), this.#e?.replaceState(t, o[0]);
-    }, window.addEventListener("popstate", (o) => {
-      this.#e?.popState(t, o);
-    });
-  }
-  on(e, t) {
-    return this.#e[e] = t, () => this.off(e);
-  }
-  off(e) {
-    delete this.#e[e];
-  }
-}
-function a(r, e, t) {
-  const n = new MutationObserver((s, o) => {
-    for (const i of s)
-      e(i, o);
+function u(t, e, o) {
+  const n = new MutationObserver((r, c) => {
+    for (const i of r)
+      e(i, c);
   });
-  return n.observe(r, {
+  return n.observe(t, {
     childList: !0,
     subtree: !0,
-    ...t
+    ...o
   }), () => n.disconnect();
 }
-function f(r, e = document.documentElement) {
-  return new Promise((t) => {
-    a(e, (n, s) => {
-      const o = e.querySelector(r);
-      o && (s.disconnect(), t(o));
+function f(t, e = document.body) {
+  return new Promise((o) => {
+    u(e, (n, r) => {
+      const c = e.querySelector(t);
+      c && (r.disconnect(), o(c));
     });
   });
 }
 export {
-  d as LocationObserver,
-  l as addEvent,
-  u as el,
+  l as el,
+  a as locationObserver,
   p as nbsp,
-  a as observeElement,
-  c as text,
+  u as observeElement,
+  s as text,
   f as waitElement
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/html.ts","../src/location-observer.ts","../src/mutation-observer.ts"],"sourcesContent":["import * as CSS from 'csstype'\n\n// prettier-ignore\ntype Attributes<T extends keyof HTMLElementTagNameMap> = Partial<{\n  style: CSS.Properties\n} & Omit<HTMLElementTagNameMap[T], 'style'>>\n\ntype Children = (string | Node | HTMLElement)[]\n\n/**\n * Create an element\n * @param tag The tag name of the element to create\n * @param attributes The attributes or children to set on the element\n * @param children The children to append to the element\n * @returns The created element\n * @example\n * el('div', { id: 'foo' }, 'Hello world')\n * el('div', 'Hello world')\n * el('div', [el('span', 'Hello'), el('span', 'world')])\n * el('div', el('span', 'Hello world'))\n * el('div', el('span', 'Hello'), el('span', 'world'))\n * el('div', el('span', 'Hello world'), 'world')\n */\nexport function el<T extends keyof HTMLElementTagNameMap>(\n  tag: T,\n  attributes?: Attributes<T> | Children,\n  ...children: Children\n): HTMLElementTagNameMap[T] {\n  const el = document.createElement(tag)\n\n  if (typeof attributes === 'string') {\n    el.append(text(attributes))\n  } else if (Array.isArray(attributes)) {\n    el.append(...attributes)\n  } else {\n    Object.assign(el, attributes)\n    Object.assign(el.style, attributes?.style)\n  }\n\n  if (children.length) {\n    el.append(...children)\n  }\n\n  return el\n}\n\n/**\n * Create a text node\n * @param text The string to create a text node from\n */\nexport function text(text: string): Text {\n  return document.createTextNode(text)\n}\n\n/**\n * A non-breaking space\n */\nexport function nbsp(): Text {\n  return text('\\u00a0')\n}\n\ntype WindowEvent<T extends string> = T extends keyof WindowEventMap\n  ? WindowEventMap[T]\n  : Event\n\n/**\n * Add an event listener to an element\n * @param el The element to add the event listener to\n * @param type The event type to listen for\n * @param callback The callback to call when the event is fired\n * @param options The options to pass to `addEventListener`\n */\nexport function addEvent<T extends string>(\n  el: HTMLElement,\n  type: T,\n  callback: (event: WindowEvent<T>) => void,\n  options?: boolean | AddEventListenerOptions\n): () => void\nexport function addEvent(\n  el: HTMLElement,\n  type: string,\n  cb: (event: Event) => void,\n  options?: boolean | AddEventListenerOptions\n): () => void {\n  el.addEventListener(type, cb, options)\n  return () => el.removeEventListener(type, cb, options)\n}\n","type LocationCallback<T = any> = (location: Location, args: T) => void\n\ntype Events<T> = {\n  pushState: LocationCallback<T>\n  replaceState: LocationCallback<T>\n  popState: LocationCallback<\n    Omit<PopStateEvent, 'state'> & { readonly state: T }\n  >\n}\n\n/**\n * Observe changes to the location\n * @example\n * const observer = new LocationObserver<{ id: string }>()\n * observer.on('pushState', (location, state) => {\n *   console.log(state.id)\n * })\n */\nexport class LocationObserver<T> {\n  #events = {} as Record<keyof Events<T>, LocationCallback<any>>\n\n  constructor() {\n    const { history, location } = window\n    const { pushState, replaceState } = history\n\n    history.pushState = (...args) => {\n      pushState.apply(history, args)\n      this.#events?.pushState(location, args[0])\n    }\n\n    history.replaceState = (...args) => {\n      replaceState.apply(history, args)\n      this.#events?.replaceState(location, args[0])\n    }\n\n    window.addEventListener('popstate', (event) => {\n      this.#events?.popState(location, event)\n    })\n  }\n\n  on<E extends keyof Events<T>>(event: E, listener: Events<T>[E]): () => void {\n    this.#events[event] = listener\n    return () => this.off(event)\n  }\n\n  off<E extends keyof Events<T>>(event: E): void {\n    delete this.#events[event]\n  }\n}\n","type Disconnect = () => void\n\n/**\n * Observe mutations on an element\n * @param el The element to observe\n * @param callback The callback to call when a mutation occurs\n * @param options The options to pass to the `MutationObserver`\n * @returns A function to disconnect the observer\n */\nexport function observeElement<T extends Element = Element>(\n  el: T,\n  callback: (mutation: MutationRecord, observer: MutationObserver) => void,\n  options?: MutationObserverInit\n): Disconnect {\n  const observe = new MutationObserver((mutations, observer) => {\n    for (const mutation of mutations) {\n      callback(mutation, observer)\n    }\n  })\n\n  observe.observe(el, {\n    childList: true,\n    subtree: true,\n    ...options\n  })\n\n  return () => observe.disconnect()\n}\n\n/**\n * Wait for an element to appear in the DOM\n * @param selector The selector to wait for\n * @param target The element to search in\n * @returns A promise that resolves when the element is found\n */\nexport function waitElement<T extends Element = Element>(\n  selector: string,\n  target = document.documentElement\n): Promise<T> {\n  return new Promise((resolve) => {\n    observeElement(target, (_, observer) => {\n      const el = target.querySelector<T>(selector)\n      if (el) {\n        observer.disconnect()\n        resolve(el)\n      }\n    })\n  })\n}\n"],"names":["el","tag","attributes","children","text","nbsp","addEvent","type","cb","options","LocationObserver","#events","history","location","pushState","replaceState","args","event","listener","observeElement","callback","observe","mutations","observer","mutation","waitElement","selector","target","resolve","_"],"mappings":"AAuBgB,SAAAA,EACdC,GACAC,MACGC,GACuB;AACpBH,QAAAA,IAAK,SAAS,cAAcC,CAAG;AAEjC,SAAA,OAAOC,KAAe,WACxBF,EAAG,OAAOI,EAAKF,CAAU,CAAC,IACjB,MAAM,QAAQA,CAAU,IACjCF,EAAG,OAAO,GAAGE,CAAU,KAEhB,OAAA,OAAOF,GAAIE,CAAU,GAC5B,OAAO,OAAOF,EAAG,OAAOE,GAAY,KAAK,IAGvCC,EAAS,UACXH,EAAG,OAAO,GAAGG,CAAQ,GAGhBH;AACT;AAMO,SAASI,EAAKA,GAAoB;AAChC,SAAA,SAAS,eAAeA,CAAI;AACrC;AAKO,SAASC,IAAa;AAC3B,SAAOD,EAAK,GAAQ;AACtB;AAmBO,SAASE,EACdN,GACAO,GACAC,GACAC,GACY;AACZT,SAAAA,EAAG,iBAAiBO,GAAMC,GAAIC,CAAO,GAC9B,MAAMT,EAAG,oBAAoBO,GAAMC,GAAIC,CAAO;AACvD;ACpEO,MAAMC,EAAoB;AAAA,EAC/BC,KAAU,CAAA;AAAA,EAEV,cAAc;AACN,UAAA,EAAE,SAAAC,GAAS,UAAAC,EAAa,IAAA,QACxB,EAAE,WAAAC,GAAW,cAAAC,EAAiB,IAAAH;AAE5B,IAAAA,EAAA,YAAY,IAAII,MAAS;AACrB,MAAAF,EAAA,MAAMF,GAASI,CAAI,GAC7B,KAAKL,IAAS,UAAUE,GAAUG,EAAK,CAAC,CAAC;AAAA,IAAA,GAGnCJ,EAAA,eAAe,IAAII,MAAS;AACrB,MAAAD,EAAA,MAAMH,GAASI,CAAI,GAChC,KAAKL,IAAS,aAAaE,GAAUG,EAAK,CAAC,CAAC;AAAA,IAAA,GAGvC,OAAA,iBAAiB,YAAY,CAACC,MAAU;AACxC,WAAAN,IAAS,SAASE,GAAUI,CAAK;AAAA,IAAA,CACvC;AAAA,EACH;AAAA,EAEA,GAA8BA,GAAUC,GAAoC;AACrE,gBAAAP,GAAQM,CAAK,IAAIC,GACf,MAAM,KAAK,IAAID,CAAK;AAAA,EAC7B;AAAA,EAEA,IAA+BA,GAAgB;AACtC,WAAA,KAAKN,GAAQM,CAAK;AAAA,EAC3B;AACF;ACvCgB,SAAAE,EACdnB,GACAoB,GACAX,GACY;AACZ,QAAMY,IAAU,IAAI,iBAAiB,CAACC,GAAWC,MAAa;AAC5D,eAAWC,KAAYF;AACrB,MAAAF,EAASI,GAAUD,CAAQ;AAAA,EAC7B,CACD;AAED,SAAAF,EAAQ,QAAQrB,GAAI;AAAA,IAClB,WAAW;AAAA,IACX,SAAS;AAAA,IACT,GAAGS;AAAA,EAAA,CACJ,GAEM,MAAMY,EAAQ;AACvB;AAQO,SAASI,EACdC,GACAC,IAAS,SAAS,iBACN;AACL,SAAA,IAAI,QAAQ,CAACC,MAAY;AACf,IAAAT,EAAAQ,GAAQ,CAACE,GAAGN,MAAa;AAChC,YAAAvB,IAAK2B,EAAO,cAAiBD,CAAQ;AAC3C,MAAI1B,MACFuB,EAAS,WAAW,GACpBK,EAAQ5B,CAAE;AAAA,IACZ,CACD;AAAA,EAAA,CACF;AACH;"}
+{"version":3,"file":"index.js","sources":["../src/html.ts","../src/location-observer.ts","../src/mutation-observer.ts"],"sourcesContent":["import * as CSS from 'csstype'\n\n// prettier-ignore\ntype Attributes<T extends keyof HTMLElementTagNameMap> = Partial<{\n  style: CSS.Properties\n} & Omit<HTMLElementTagNameMap[T], 'style'>>\n\ntype Children = (string | Node | HTMLElement)[]\n\n/**\n * Creates a new HTML element of the specified type and with the given attributes and children nodes.\n *\n * @param {T} tag\n * The type of HTML element to create.\n *\n * @param {Attributes<T> | Children | HTMLElement} [attributes]\n * The attributes or children nodes to add to the element.\n *\n * @param {...Children} children\n * The children nodes to add to the element.\n *\n * @return {HTMLElementTagNameMap[T]}\n * The newly created HTML element of the specified type.\n *\n * @example\n * el('div', { id: 'foo' }, 'Hello world')\n * el('div', 'Hello world')\n * el('div', [el('span', 'Hello'), el('span', 'world')])\n * el('div', el('span', 'Hello world'))\n * el('div', el('span', 'Hello'), el('span', 'world'))\n * el('div', el('span', 'Hello world'), 'world')\n */\nexport function el<T extends keyof HTMLElementTagNameMap>(\n  tag: T,\n  attributes?: Attributes<T> | Children | HTMLElement,\n  ...children: Children\n): HTMLElementTagNameMap[T] {\n  const el = document.createElement(tag)\n\n  if (typeof attributes === 'string') {\n    el.append(text(attributes))\n  } else if (Array.isArray(attributes)) {\n    children.unshift(...attributes)\n  } else {\n    Object.assign(el, attributes)\n    Object.assign(el.style, attributes?.style)\n  }\n\n  if (children.length) {\n    el.append(...children)\n  }\n\n  return el\n}\n\n/**\n * Creates a new Text node with the provided text.\n *\n * @param {string} text\n * The text to create the Text node with.\n *\n * @return {Text}\n * A new Text node with the provided text.\n */\nexport function text(text: string): Text {\n  return document.createTextNode(text)\n}\n\n/**\n * Returns a Text object containing a non-breaking space character.\n *\n * @return {Text}\n * A Text object containing a non-breaking space character.\n */\nexport function nbsp(): Text {\n  return text('\\u00a0')\n}\n","type LocationCallback<T = any> = (location: Location, args: T) => void\n\ntype Events<T> = {\n  onPush: LocationCallback<T>\n  onReplace: LocationCallback<T>\n}\n\n/**\n * Observes changes to the browser's location and history, and invokes\n * the specified callbacks when the user navigates to a new page or updates the\n * current page's state.\n *\n * @param {Events<T>} events\n * An object that contains optional callback functions for push and replace actions.\n *\n * @example\n * locationObserver<{ id: string }>({\n *   onPush: (location, args) => {},\n *   onReplace: (location, args) => {}\n * })\n */\nexport function locationObserver<T>(events: Events<T>): void {\n  const { history, location } = window\n  const { pushState, replaceState } = history\n\n  history.pushState = (...args) => {\n    pushState.apply(history, args)\n    events.onPush(location, args[0])\n  }\n\n  history.replaceState = (...args) => {\n    replaceState.apply(history, args)\n    events.onReplace(location, args[0])\n  }\n}\n","type Disconnect = () => void\n\n/**\n * Observes changes to an element and invokes a callback function for each mutation.\n *\n * @param {T extends Element} el\n * The element to observe.\n *\n * @param {(mutation: MutationRecord, observer: MutationObserver) => void} callback\n * The function to call when a mutation occurs.\n *\n * @param {MutationObserverInit} [options]\n * Optional configuration options for the MutationObserver.\n *\n * @returns {Disconnect}\n * A function that disconnects the observer.\n *\n * @example\n * const disconnect = observeElement(document.body, (mutation, observer) => {\n *   console.log(mutation)\n * })\n */\nexport function observeElement<T extends Element = Element>(\n  el: T,\n  callback: (mutation: MutationRecord, observer: MutationObserver) => void,\n  options?: MutationObserverInit\n): Disconnect {\n  const observe = new MutationObserver((mutations, observer) => {\n    for (const mutation of mutations) {\n      callback(mutation, observer)\n    }\n  })\n\n  observe.observe(el, {\n    childList: true,\n    subtree: true,\n    ...options\n  })\n\n  return () => observe.disconnect()\n}\n\n/**\n * Returns a Promise that resolves with the first element matching the given selector\n * in the specified target, or rejects if no matches are found.\n *\n * @param {string} selector\n * The CSS selector to match.\n *\n * @param {Element} [target=document.documentElement]\n * The element to search in.\n *\n * @returns {Promise<T>}\n * A Promise that resolves with the first matching element.\n *\n * @example\n * const el = await waitElement('.foo')\n */\nexport function waitElement<T extends Element = Element>(\n  selector: string,\n  target: Element = document.body\n): Promise<T> {\n  return new Promise((resolve) => {\n    observeElement(target, (_, observer) => {\n      const el = target.querySelector<T>(selector)\n      if (el) {\n        observer.disconnect()\n        resolve(el)\n      }\n    })\n  })\n}\n"],"names":["el","tag","attributes","children","text","nbsp","locationObserver","events","history","location","pushState","replaceState","args","observeElement","callback","options","observe","mutations","observer","mutation","waitElement","selector","target","resolve","_"],"mappings":"AAgCgB,SAAAA,EACdC,GACAC,MACGC,GACuB;AACpBH,QAAAA,IAAK,SAAS,cAAcC,CAAG;AAEjC,SAAA,OAAOC,KAAe,WACxBF,EAAG,OAAOI,EAAKF,CAAU,CAAC,IACjB,MAAM,QAAQA,CAAU,IACxBC,EAAA,QAAQ,GAAGD,CAAU,KAEvB,OAAA,OAAOF,GAAIE,CAAU,GAC5B,OAAO,OAAOF,EAAG,OAAOE,GAAY,KAAK,IAGvCC,EAAS,UACXH,EAAG,OAAO,GAAGG,CAAQ,GAGhBH;AACT;AAWO,SAASI,EAAKA,GAAoB;AAChC,SAAA,SAAS,eAAeA,CAAI;AACrC;AAQO,SAASC,IAAa;AAC3B,SAAOD,EAAK,GAAQ;AACtB;ACvDO,SAASE,EAAoBC,GAAyB;AACrD,QAAA,EAAE,SAAAC,GAAS,UAAAC,EAAa,IAAA,QACxB,EAAE,WAAAC,GAAW,cAAAC,EAAiB,IAAAH;AAE5B,EAAAA,EAAA,YAAY,IAAII,MAAS;AACrB,IAAAF,EAAA,MAAMF,GAASI,CAAI,GAC7BL,EAAO,OAAOE,GAAUG,EAAK,CAAC,CAAC;AAAA,EAAA,GAGzBJ,EAAA,eAAe,IAAII,MAAS;AACrB,IAAAD,EAAA,MAAMH,GAASI,CAAI,GAChCL,EAAO,UAAUE,GAAUG,EAAK,CAAC,CAAC;AAAA,EAAA;AAEtC;ACZgB,SAAAC,EACdb,GACAc,GACAC,GACY;AACZ,QAAMC,IAAU,IAAI,iBAAiB,CAACC,GAAWC,MAAa;AAC5D,eAAWC,KAAYF;AACrB,MAAAH,EAASK,GAAUD,CAAQ;AAAA,EAC7B,CACD;AAED,SAAAF,EAAQ,QAAQhB,GAAI;AAAA,IAClB,WAAW;AAAA,IACX,SAAS;AAAA,IACT,GAAGe;AAAA,EAAA,CACJ,GAEM,MAAMC,EAAQ;AACvB;AAkBO,SAASI,EACdC,GACAC,IAAkB,SAAS,MACf;AACL,SAAA,IAAI,QAAQ,CAACC,MAAY;AACf,IAAAV,EAAAS,GAAQ,CAACE,GAAGN,MAAa;AAChC,YAAAlB,IAAKsB,EAAO,cAAiBD,CAAQ;AAC3C,MAAIrB,MACFkB,EAAS,WAAW,GACpBK,EAAQvB,CAAE;AAAA,IACZ,CACD;AAAA,EAAA,CACF;AACH;"}

package/dist/location-observer.d.ts

@@ -1,23 +1,21 @@
 type LocationCallback<T = any> = (location: Location, args: T) => void;
 type Events<T> = {
-    pushState: LocationCallback<T>;
-    replaceState: LocationCallback<T>;
-    popState: LocationCallback<Omit<PopStateEvent, 'state'> & {
-        readonly state: T;
-    }>;
+    onPush: LocationCallback<T>;
+    onReplace: LocationCallback<T>;
 };
 /**
- * Observe changes to the location
+ * Observes changes to the browser's location and history, and invokes
+ * the specified callbacks when the user navigates to a new page or updates the
+ * current page's state.
+ *
+ * @param {Events<T>} events
+ * An object that contains optional callback functions for push and replace actions.
+ *
  * @example
- * const observer = new LocationObserver<{ id: string }>()
- * observer.on('pushState', (location, state) => {
- *   console.log(state.id)
+ * locationObserver<{ id: string }>({
+ *   onPush: (location, args) => {},
+ *   onReplace: (location, args) => {}
  * })
  */
-export declare class LocationObserver<T> {
-    #private;
-    constructor();
-    on<E extends keyof Events<T>>(event: E, listener: Events<T>[E]): () => void;
-    off<E extends keyof Events<T>>(event: E): void;
-}
+export declare function locationObserver<T>(events: Events<T>): void;
 export {};

package/dist/mutation-observer.d.ts

@@ -1,17 +1,40 @@
 type Disconnect = () => void;
 /**
- * Observe mutations on an element
- * @param el The element to observe
- * @param callback The callback to call when a mutation occurs
- * @param options The options to pass to the `MutationObserver`
- * @returns A function to disconnect the observer
+ * Observes changes to an element and invokes a callback function for each mutation.
+ *
+ * @param {T extends Element} el
+ * The element to observe.
+ *
+ * @param {(mutation: MutationRecord, observer: MutationObserver) => void} callback
+ * The function to call when a mutation occurs.
+ *
+ * @param {MutationObserverInit} [options]
+ * Optional configuration options for the MutationObserver.
+ *
+ * @returns {Disconnect}
+ * A function that disconnects the observer.
+ *
+ * @example
+ * const disconnect = observeElement(document.body, (mutation, observer) => {
+ *   console.log(mutation)
+ * })
  */
 export declare function observeElement<T extends Element = Element>(el: T, callback: (mutation: MutationRecord, observer: MutationObserver) => void, options?: MutationObserverInit): Disconnect;
 /**
- * Wait for an element to appear in the DOM
- * @param selector The selector to wait for
- * @param target The element to search in
- * @returns A promise that resolves when the element is found
+ * Returns a Promise that resolves with the first element matching the given selector
+ * in the specified target, or rejects if no matches are found.
+ *
+ * @param {string} selector
+ * The CSS selector to match.
+ *
+ * @param {Element} [target=document.documentElement]
+ * The element to search in.
+ *
+ * @returns {Promise<T>}
+ * A Promise that resolves with the first matching element.
+ *
+ * @example
+ * const el = await waitElement('.foo')
  */
-export declare function waitElement<T extends Element = Element>(selector: string, target?: HTMLElement): Promise<T>;
+export declare function waitElement<T extends Element = Element>(selector: string, target?: Element): Promise<T>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zero-dependency/dom",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "DOM utils",
   "type": "module",
   "types": "./dist/index.d.ts",