@zero-dependency/dom 1.7.0 → 1.7.1

package/dist/html.d.ts

@@ -1,5 +1,5 @@
 import * as CSS from 'csstype';
-type Attributes<T extends keyof HTMLElementTagNameMap> = Partial<{
+type Properties<T extends keyof HTMLElementTagNameMap> = Partial<{
     style: CSS.Properties;
 } & Omit<HTMLElementTagNameMap[T], 'style'>>;
 type Children = (string | Node | HTMLElement)[];
@@ -9,8 +9,8 @@ type Children = (string | Node | HTMLElement)[];
  * @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 {Properties<T> | Children | HTMLElement} [props]
+ * The properties or children nodes to add to the element.
  *
  * @param {...Children} children
  * The children nodes to add to the element.
@@ -26,7 +26,7 @@ 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 | HTMLElement, ...children: Children): HTMLElementTagNameMap[T];
+export declare function el<T extends keyof HTMLElementTagNameMap>(tag: T, props?: Properties<T> | Children | HTMLElement, ...children: Children): HTMLElementTagNameMap[T];
 /**
  * Creates a new Text node with the provided text.
  *

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function a(n,e,...c){const t=document.createElement(n);return e instanceof Node?t.append(e):typeof e=="string"?t.append(r(e)):Array.isArray(e)?t.append(...e):(Object.assign(t,e),Object.assign(t.style,e?.style)),t.append(...c),t}function r(n){return document.createTextNode(n)}function u(){return r(" ")}function d(n){const{history:e,location:c}=window,{pushState:t,replaceState:i}=e;e.pushState=(...o)=>{t.apply(e,o),n.onPush(c,o[0])},e.replaceState=(...o)=>{i.apply(e,o),n.onReplace(c,o[0])}}function s(n,e,c){const t=new MutationObserver((i,o)=>{for(const l of i)e(l,o)});return t.observe(n,{childList:!0,subtree:!0,...c}),()=>t.disconnect()}function b(n,e=document.body){return new Promise(c=>{s(e,(t,i)=>{const o=e.querySelector(n);o&&(i.disconnect(),c(o))})})}exports.el=a;exports.locationObserver=d;exports.nbsp=u;exports.observeElement=s;exports.text=r;exports.waitElement=b;
 //# 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 * 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"}
+{"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 Properties<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 {Properties<T> | Children | HTMLElement} [props]\n * The properties 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  props?: Properties<T> | Children | HTMLElement,\n  ...children: Children\n): HTMLElementTagNameMap[T] {\n  const el = document.createElement(tag)\n\n  if (props instanceof Node) {\n    el.append(props)\n  } else if (typeof props === 'string') {\n    el.append(text(props))\n  } else if (Array.isArray(props)) {\n    el.append(...props)\n  } else {\n    Object.assign(el, props)\n    Object.assign(el.style, props?.style)\n  }\n\n  el.append(...children)\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","props","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,EAErC,OAAIC,aAAiB,KACnBF,EAAG,OAAOE,CAAK,EACN,OAAOA,GAAU,SAC1BF,EAAG,OAAOI,EAAKF,CAAK,CAAC,EACZ,MAAM,QAAQA,CAAK,EAC5BF,EAAG,OAAO,GAAGE,CAAK,GAEX,OAAA,OAAOF,EAAIE,CAAK,EACvB,OAAO,OAAOF,EAAG,MAAOE,GAAO,KAAK,GAGtCF,EAAG,OAAO,GAAGG,CAAQ,EAEdH,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,46 +1,46 @@
-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 a(n, e, ...c) {
+  const t = document.createElement(n);
+  return e instanceof Node ? t.append(e) : typeof e == "string" ? t.append(r(e)) : Array.isArray(e) ? t.append(...e) : (Object.assign(t, e), Object.assign(t.style, e?.style)), t.append(...c), t;
 }
-function s(t) {
-  return document.createTextNode(t);
+function r(n) {
+  return document.createTextNode(n);
 }
-function p() {
-  return s(" ");
+function l() {
+  return r(" ");
 }
-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]);
+function d(n) {
+  const { history: e, location: c } = window, { pushState: t, replaceState: i } = e;
+  e.pushState = (...o) => {
+    t.apply(e, o), n.onPush(c, o[0]);
+  }, e.replaceState = (...o) => {
+    i.apply(e, o), n.onReplace(c, o[0]);
   };
 }
-function u(t, e, o) {
-  const n = new MutationObserver((r, c) => {
-    for (const i of r)
-      e(i, c);
+function u(n, e, c) {
+  const t = new MutationObserver((i, o) => {
+    for (const s of i)
+      e(s, o);
   });
-  return n.observe(t, {
+  return t.observe(n, {
     childList: !0,
     subtree: !0,
-    ...o
-  }), () => n.disconnect();
+    ...c
+  }), () => t.disconnect();
 }
-function f(t, e = document.body) {
-  return new Promise((o) => {
-    u(e, (n, r) => {
-      const c = e.querySelector(t);
-      c && (r.disconnect(), o(c));
+function f(n, e = document.body) {
+  return new Promise((c) => {
+    u(e, (t, i) => {
+      const o = e.querySelector(n);
+      o && (i.disconnect(), c(o));
     });
   });
 }
 export {
-  l as el,
-  a as locationObserver,
-  p as nbsp,
+  a as el,
+  d as locationObserver,
+  l as nbsp,
   u as observeElement,
-  s as text,
+  r 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 * 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;"}
+{"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 Properties<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 {Properties<T> | Children | HTMLElement} [props]\n * The properties 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  props?: Properties<T> | Children | HTMLElement,\n  ...children: Children\n): HTMLElementTagNameMap[T] {\n  const el = document.createElement(tag)\n\n  if (props instanceof Node) {\n    el.append(props)\n  } else if (typeof props === 'string') {\n    el.append(text(props))\n  } else if (Array.isArray(props)) {\n    el.append(...props)\n  } else {\n    Object.assign(el, props)\n    Object.assign(el.style, props?.style)\n  }\n\n  el.append(...children)\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","props","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;AAErC,SAAIC,aAAiB,OACnBF,EAAG,OAAOE,CAAK,IACN,OAAOA,KAAU,WAC1BF,EAAG,OAAOI,EAAKF,CAAK,CAAC,IACZ,MAAM,QAAQA,CAAK,IAC5BF,EAAG,OAAO,GAAGE,CAAK,KAEX,OAAA,OAAOF,GAAIE,CAAK,GACvB,OAAO,OAAOF,EAAG,OAAOE,GAAO,KAAK,IAGtCF,EAAG,OAAO,GAAGG,CAAQ,GAEdH;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/package.json

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