@zero-dependency/dom 1.6.0 → 1.6.1

package/dist/html.d.ts

@@ -17,7 +17,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, ...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

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 * 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 | 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    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"}

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 * 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 | 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    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;"}

package/package.json

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