@zero-dependency/dom 0.2.0 → 0.3.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 Vitalij Ryndin
+Copyright (c) 2022 Zero Dependency
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1 +1,20 @@
-# `@zero-dependency/dom`
+# @zero-dependency/dom
+
+[![](https://img.shields.io/npm/v/@zero-dependency/dom)](https://npm.im/@zero-dependency/dom)
+![](https://img.shields.io/npm/l/@zero-dependency/dom)
+
+## Installation
+
+```sh
+npm install @zero-dependency/dom
+```
+
+```sh
+yarn add @zero-dependency/dom
+```
+
+```sh
+pnpm add @zero-dependency/dom
+```
+
+## Usage

package/dist/index.es.js

@@ -1,10 +1,9 @@
-function s(e, o, n = document.body) {
+function i(e, o, n = document.body) {
   const t = new MutationObserver((r) => {
-    for (const u of r)
-      for (const d of u.addedNodes) {
-        const c = d;
-        c.matches && c.matches(e) && o(c);
-      }
+    for (const u of r) {
+      const c = u.target.querySelector(e);
+      c && o(c);
+    }
   });
   return t.observe(n, {
     attributes: !0,
@@ -12,9 +11,9 @@ function s(e, o, n = document.body) {
     subtree: !0
   }), t;
 }
-function a(e, o = !0, n = document.body) {
+function d(e, o = !0, n = document.body) {
   return new Promise((t) => {
-    const r = s(
+    const r = i(
       e,
       (u) => {
         o && r.disconnect(), t(u);
@@ -23,7 +22,7 @@ function a(e, o = !0, n = document.body) {
     );
   });
 }
-async function m() {
+async function a() {
   if (document.readyState == "loading")
     return new Promise((e) => {
       document.addEventListener("DOMContentLoaded", () => e(), {
@@ -31,7 +30,7 @@ async function m() {
       });
     });
 }
-function f(e, o = 500) {
+function m(e, o = 500) {
   let n;
   return (...t) => {
     n && clearTimeout(n), n = setTimeout(() => {
@@ -43,18 +42,19 @@ function b(e, o, ...n) {
   const t = document.createElement(e);
   return Object.assign(t, o), t.append(...n), t;
 }
-function i(e) {
+function s(e) {
   return document.createTextNode(e);
 }
-function l() {
-  return i("\xA0");
+function f() {
+  return s("\xA0");
 }
 export {
-  f as debounce,
-  m as domReady,
+  m as debounce,
+  a as domReady,
   b as el,
-  l as nbsp,
-  s as observeElement,
-  i as text,
-  a as waitObserveElement
+  f as nbsp,
+  i as observeElement,
+  s as text,
+  d as waitObserveElement
 };
+//# sourceMappingURL=index.es.js.map

package/dist/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","sources":["../src/observeElement.ts","../src/waitObserveElement.ts","../src/domReady.ts","../src/debounce.ts","../src/html.ts"],"sourcesContent":["export function observeElement<T extends Element = Element>(\n  selector: string,\n  callback: (el: T) => void,\n  target = document.body\n): MutationObserver {\n  const observer = new MutationObserver((mutations) => {\n    for (const mutation of mutations) {\n      const el = (mutation.target as Element).querySelector(selector)\n      if (el) {\n        callback(el as T)\n      }\n    }\n  })\n\n  observer.observe(target, {\n    attributes: true,\n    childList: true,\n    subtree: true\n  })\n\n  return observer\n}\n","import { observeElement } from './observeElement.js'\n\nexport function waitObserveElement<T extends Element = Element>(\n  selector: string,\n  disconnect = true,\n  target = document.body\n): Promise<T> {\n  return new Promise((resolve) => {\n    const observer = observeElement<T>(\n      selector,\n      (el) => {\n        if (disconnect) {\n          observer.disconnect()\n        }\n\n        resolve(el)\n      },\n      target\n    )\n  })\n}\n","export async function domReady(): Promise<void> {\n  if (document.readyState == 'loading') {\n    return new Promise((resolve) => {\n      document.addEventListener('DOMContentLoaded', () => resolve(), {\n        once: true\n      })\n    })\n  }\n}\n","export function debounce<T extends (...args: any[]) => void>(\n  fn: T,\n  delay = 500\n): (this: ThisParameterType<T>, ...args: Parameters<T>) => void {\n  let timeoutId: ReturnType<typeof setTimeout>\n\n  return (...args) => {\n    if (timeoutId) {\n      clearTimeout(timeoutId)\n    }\n\n    timeoutId = setTimeout(() => {\n      fn(...args)\n    }, delay)\n  }\n}\n","// prettier-ignore\ntype Attributes<T extends keyof HTMLElementTagNameMap> = Partial<{\n  style: Partial<CSSStyleDeclaration>\n} & Omit<HTMLElementTagNameMap[T], 'style'>>\n\ntype Children = (string | Node | HTMLElement)[]\n\nexport function el<T extends keyof HTMLElementTagNameMap>(\n  tag: T,\n  attributes?: Attributes<T>,\n  ...children: Children\n): HTMLElementTagNameMap[T] {\n  const el = document.createElement(tag)\n  Object.assign(el, attributes)\n  el.append(...children)\n  return el\n}\n\nexport function text(str: string): Text {\n  return document.createTextNode(str)\n}\n\nexport function nbsp(): Text {\n  return text('\\u00a0')\n}\n"],"names":["observeElement","selector","callback","target","observer","mutations","mutation","el","waitObserveElement","disconnect","resolve","domReady","debounce","fn","delay","timeoutId","args","tag","attributes","children","text","str","nbsp"],"mappings":"AAAO,SAASA,EACdC,GACAC,GACAC,IAAS,SAAS,MACA;AAClB,QAAMC,IAAW,IAAI,iBAAiB,CAACC,MAAc;AACnD,eAAWC,KAAYD,GAAW;AAChC,YAAME,IAAMD,EAAS,OAAmB,cAAcL,CAAQ;AAC9D,MAAIM,KACFL,EAASK,CAAO;AAAA,IAEpB;AAAA,EAAA,CACD;AAED,SAAAH,EAAS,QAAQD,GAAQ;AAAA,IACvB,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,SAAS;AAAA,EAAA,CACV,GAEMC;AACT;ACnBO,SAASI,EACdP,GACAQ,IAAa,IACbN,IAAS,SAAS,MACN;AACL,SAAA,IAAI,QAAQ,CAACO,MAAY;AAC9B,UAAMN,IAAWJ;AAAA,MACfC;AAAA,MACA,CAACM,MAAO;AACN,QAAIE,KACFL,EAAS,WAAW,GAGtBM,EAAQH,CAAE;AAAA,MACZ;AAAA,MACAJ;AAAA,IAAA;AAAA,EACF,CACD;AACH;ACpBA,eAAsBQ,IAA0B;AAC1C,MAAA,SAAS,cAAc;AAClB,WAAA,IAAI,QAAQ,CAACD,MAAY;AAC9B,eAAS,iBAAiB,oBAAoB,MAAMA,EAAA,GAAW;AAAA,QAC7D,MAAM;AAAA,MAAA,CACP;AAAA,IAAA,CACF;AAEL;ACRgB,SAAAE,EACdC,GACAC,IAAQ,KACsD;AAC1D,MAAAC;AAEJ,SAAO,IAAIC,MAAS;AAClB,IAAID,KACF,aAAaA,CAAS,GAGxBA,IAAY,WAAW,MAAM;AAC3B,MAAAF,EAAG,GAAGG,CAAI;AAAA,OACTF,CAAK;AAAA,EAAA;AAEZ;ACRgB,SAAAP,EACdU,GACAC,MACGC,GACuB;AACpBZ,QAAAA,IAAK,SAAS,cAAcU,CAAG;AAC9B,gBAAA,OAAOV,GAAIW,CAAU,GAC5BX,EAAG,OAAO,GAAGY,CAAQ,GACdZ;AACT;AAEO,SAASa,EAAKC,GAAmB;AAC/B,SAAA,SAAS,eAAeA,CAAG;AACpC;AAEO,SAASC,IAAa;AAC3B,SAAOF,EAAK,MAAQ;AACtB;"}

package/dist/index.umd.js

@@ -1 +1,2 @@
-(function(e,d){typeof exports=="object"&&typeof module<"u"?d(exports):typeof define=="function"&&define.amd?define(["exports"],d):(e=typeof globalThis<"u"?globalThis:e||self,d(e["@zero-dependency/dom"]={}))})(this,function(e){"use strict";function d(t,u,o=document.body){const n=new MutationObserver(i=>{for(const r of i)for(const v of r.addedNodes){const c=v;c.matches&&c.matches(t)&&u(c)}});return n.observe(o,{attributes:!0,childList:!0,subtree:!0}),n}function f(t,u=!0,o=document.body){return new Promise(n=>{const i=d(t,r=>{u&&i.disconnect(),n(r)},o)})}async function m(){if(document.readyState=="loading")return new Promise(t=>{document.addEventListener("DOMContentLoaded",()=>t(),{once:!0})})}function a(t,u=500){let o;return(...n)=>{o&&clearTimeout(o),o=setTimeout(()=>{t(...n)},u)}}function b(t,u,...o){const n=document.createElement(t);return Object.assign(n,u),n.append(...o),n}function s(t){return document.createTextNode(t)}function l(){return s("\xA0")}e.debounce=a,e.domReady=m,e.el=b,e.nbsp=l,e.observeElement=d,e.text=s,e.waitObserveElement=f,Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(e,r){typeof exports=="object"&&typeof module<"u"?r(exports):typeof define=="function"&&define.amd?define(["exports"],r):(e=typeof globalThis<"u"?globalThis:e||self,r(e["@zero-dependency/dom"]={}))})(this,function(e){"use strict";function r(t,u,o=document.body){const n=new MutationObserver(i=>{for(const d of i){const s=d.target.querySelector(t);s&&u(s)}});return n.observe(o,{attributes:!0,childList:!0,subtree:!0}),n}function f(t,u=!0,o=document.body){return new Promise(n=>{const i=r(t,d=>{u&&i.disconnect(),n(d)},o)})}async function m(){if(document.readyState=="loading")return new Promise(t=>{document.addEventListener("DOMContentLoaded",()=>t(),{once:!0})})}function a(t,u=500){let o;return(...n)=>{o&&clearTimeout(o),o=setTimeout(()=>{t(...n)},u)}}function l(t,u,...o){const n=document.createElement(t);return Object.assign(n,u),n.append(...o),n}function c(t){return document.createTextNode(t)}function b(){return c("\xA0")}e.debounce=a,e.domReady=m,e.el=l,e.nbsp=b,e.observeElement=r,e.text=c,e.waitObserveElement=f,Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+//# sourceMappingURL=index.umd.js.map

package/dist/index.umd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.umd.js","sources":["../src/observeElement.ts","../src/waitObserveElement.ts","../src/domReady.ts","../src/debounce.ts","../src/html.ts"],"sourcesContent":["export function observeElement<T extends Element = Element>(\n  selector: string,\n  callback: (el: T) => void,\n  target = document.body\n): MutationObserver {\n  const observer = new MutationObserver((mutations) => {\n    for (const mutation of mutations) {\n      const el = (mutation.target as Element).querySelector(selector)\n      if (el) {\n        callback(el as T)\n      }\n    }\n  })\n\n  observer.observe(target, {\n    attributes: true,\n    childList: true,\n    subtree: true\n  })\n\n  return observer\n}\n","import { observeElement } from './observeElement.js'\n\nexport function waitObserveElement<T extends Element = Element>(\n  selector: string,\n  disconnect = true,\n  target = document.body\n): Promise<T> {\n  return new Promise((resolve) => {\n    const observer = observeElement<T>(\n      selector,\n      (el) => {\n        if (disconnect) {\n          observer.disconnect()\n        }\n\n        resolve(el)\n      },\n      target\n    )\n  })\n}\n","export async function domReady(): Promise<void> {\n  if (document.readyState == 'loading') {\n    return new Promise((resolve) => {\n      document.addEventListener('DOMContentLoaded', () => resolve(), {\n        once: true\n      })\n    })\n  }\n}\n","export function debounce<T extends (...args: any[]) => void>(\n  fn: T,\n  delay = 500\n): (this: ThisParameterType<T>, ...args: Parameters<T>) => void {\n  let timeoutId: ReturnType<typeof setTimeout>\n\n  return (...args) => {\n    if (timeoutId) {\n      clearTimeout(timeoutId)\n    }\n\n    timeoutId = setTimeout(() => {\n      fn(...args)\n    }, delay)\n  }\n}\n","// prettier-ignore\ntype Attributes<T extends keyof HTMLElementTagNameMap> = Partial<{\n  style: Partial<CSSStyleDeclaration>\n} & Omit<HTMLElementTagNameMap[T], 'style'>>\n\ntype Children = (string | Node | HTMLElement)[]\n\nexport function el<T extends keyof HTMLElementTagNameMap>(\n  tag: T,\n  attributes?: Attributes<T>,\n  ...children: Children\n): HTMLElementTagNameMap[T] {\n  const el = document.createElement(tag)\n  Object.assign(el, attributes)\n  el.append(...children)\n  return el\n}\n\nexport function text(str: string): Text {\n  return document.createTextNode(str)\n}\n\nexport function nbsp(): Text {\n  return text('\\u00a0')\n}\n"],"names":["observeElement","selector","callback","target","observer","mutations","mutation","el","waitObserveElement","disconnect","resolve","domReady","debounce","fn","delay","timeoutId","args","tag","attributes","children","text","str","nbsp"],"mappings":"+OAAO,SAASA,EACdC,EACAC,EACAC,EAAS,SAAS,KACA,CAClB,MAAMC,EAAW,IAAI,iBAAkBC,GAAc,CACnD,UAAWC,KAAYD,EAAW,CAChC,MAAME,EAAMD,EAAS,OAAmB,cAAcL,CAAQ,EAC1DM,GACFL,EAASK,CAAO,CAEpB,CAAA,CACD,EAED,OAAAH,EAAS,QAAQD,EAAQ,CACvB,WAAY,GACZ,UAAW,GACX,QAAS,EAAA,CACV,EAEMC,CACT,CCnBO,SAASI,EACdP,EACAQ,EAAa,GACbN,EAAS,SAAS,KACN,CACL,OAAA,IAAI,QAASO,GAAY,CAC9B,MAAMN,EAAWJ,EACfC,EACCM,GAAO,CACFE,GACFL,EAAS,WAAW,EAGtBM,EAAQH,CAAE,CACZ,EACAJ,CAAA,CACF,CACD,CACH,CCpBA,eAAsBQ,GAA0B,CAC1C,GAAA,SAAS,YAAc,UAClB,OAAA,IAAI,QAASD,GAAY,CAC9B,SAAS,iBAAiB,mBAAoB,IAAMA,EAAA,EAAW,CAC7D,KAAM,EAAA,CACP,CAAA,CACF,CAEL,CCRgB,SAAAE,EACdC,EACAC,EAAQ,IACsD,CAC1D,IAAAC,EAEJ,MAAO,IAAIC,IAAS,CACdD,GACF,aAAaA,CAAS,EAGxBA,EAAY,WAAW,IAAM,CAC3BF,EAAG,GAAGG,CAAI,GACTF,CAAK,CAAA,CAEZ,CCRgB,SAAAP,EACdU,EACAC,KACGC,EACuB,CACpBZ,MAAAA,EAAK,SAAS,cAAcU,CAAG,EAC9B,cAAA,OAAOV,EAAIW,CAAU,EAC5BX,EAAG,OAAO,GAAGY,CAAQ,EACdZ,CACT,CAEO,SAASa,EAAKC,EAAmB,CAC/B,OAAA,SAAS,eAAeA,CAAG,CACpC,CAEO,SAASC,GAAa,CAC3B,OAAOF,EAAK,MAAQ,CACtB"}

package/dist/observeElement.d.ts

@@ -1 +1 @@
-export declare function observeElement(selector: string, callback: (el: Element) => void, target?: HTMLElement): MutationObserver;
+export declare function observeElement<T extends Element = Element>(selector: string, callback: (el: T) => void, target?: HTMLElement): MutationObserver;

package/dist/waitObserveElement.d.ts

@@ -1 +1 @@
-export declare function waitObserveElement(selector: string, disconnect?: boolean, target?: HTMLElement): Promise<Element>;
+export declare function waitObserveElement<T extends Element = Element>(selector: string, disconnect?: boolean, target?: HTMLElement): Promise<T>;

package/package.json

@@ -1,15 +1,36 @@
 {
   "name": "@zero-dependency/dom",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js"
+    }
+  },
   "files": [
     "dist"
   ],
+  "devDependencies": {
+    "@crashmax/prettier-config": "^2.0.4",
+    "@crashmax/tsconfig": "^1.0.2",
+    "@types/node": "^18.8.3",
+    "@vitest/coverage-c8": "^0.24.0",
+    "@vitest/ui": "^0.23.4",
+    "jsdom": "^20.0.1",
+    "typescript": "^4.8.4",
+    "vite": "^3.1.6",
+    "vite-plugin-dts": "^1.6.5",
+    "vitest": "^0.23.4"
+  },
   "scripts": {
     "dev": "vite build --watch",
-    "build": "vite build"
+    "build": "vite build",
+    "test": "vitest",
+    "test:watch": "vitest --ui --watch --coverage",
+    "format": "prettier --write --ignore-unknown **"
   }
 }