@fivelab/web-utils 1.0.0

package/README.md

@@ -0,0 +1,10 @@
+Web Utils
+=========
+
+Development
+-----------
+
+```shell
+docker build -t web-utils .
+docker run -it -v $(pwd):/code web-utils bash
+```

package/dist/dom/dom-changes.d.ts

@@ -0,0 +1,17 @@
+type BaseDomChangeOptions = MutationObserverInit & {
+    readonly onDomReady?: boolean;
+    readonly target?: string;
+};
+type SelectorDomChangeOptions = BaseDomChangeOptions & {
+    readonly selector?: string;
+    selectors?: never;
+};
+type SelectorsDomChangeOptions = BaseDomChangeOptions & {
+    readonly selectors?: DomChangeCallbacks;
+    selector?: never;
+};
+export type DomChangeCallback = (target: Element, item?: MutationRecord) => void;
+export type DomChangeCallbacks = Record<string, DomChangeCallback>;
+export declare function onDomChanges(options: SelectorDomChangeOptions, callback: DomChangeCallback): void;
+export declare function onDomChanges(options: SelectorsDomChangeOptions): void;
+export {};

package/dist/dom/dom-changes.js

@@ -0,0 +1,76 @@
+import { onDomReady } from './dom-ready';
+export function onDomChanges(options, callback) {
+    if (options.selector && options.selectors) {
+        throw new Error('Only one option must be provided: either selector or selectors, not both.');
+    }
+    if (options.selectors && callback) {
+        throw new Error('Only one option must be provided: either selectors or callback, not both.');
+    }
+    function changesOnElementWithSelector(element, handler, item, selector) {
+        if (selector) {
+            if (element.matches(selector)) {
+                handler.call(null, element, item);
+            }
+            else {
+                element.querySelectorAll(selector).forEach((innerElement) => {
+                    handler.call(null, innerElement, item);
+                });
+            }
+        }
+        else {
+            handler.call(null, element, item);
+        }
+    }
+    function changesOnElementWithSelectors(element, selectors, item) {
+        Object.entries(selectors).forEach(([selector, handler]) => {
+            changesOnElementWithSelector.call(null, element, handler, item, selector);
+        });
+    }
+    let selectors = undefined;
+    if (options.selectors) {
+        selectors = options.selectors;
+    }
+    else if (options.selector) {
+        if (!callback) {
+            throw new Error('Missed callback.');
+        }
+        selectors = {};
+        selectors[options.selector] = callback;
+    }
+    const observer = new MutationObserver((mutations) => {
+        mutations.forEach((item) => {
+            item.addedNodes.forEach((node) => {
+                if (!(node instanceof HTMLElement)) {
+                    return;
+                }
+                if (selectors) {
+                    changesOnElementWithSelectors(node, selectors, item);
+                }
+                else {
+                    if (!callback) {
+                        throw new Error('Missed callback.');
+                    }
+                    changesOnElementWithSelector(node, callback, item);
+                }
+            });
+            if (item.attributeName) {
+                callback?.call(null, item.target, item);
+            }
+        });
+    });
+    onDomReady(() => {
+        const target = (options.target ? document.querySelector(options.target) : document.body);
+        if (!target) {
+            console.debug(`The target with selector "${options.target}" for listen page changes was not found.`);
+            return;
+        }
+        observer.observe(target, options);
+        if (options.onDomReady) {
+            if (!selectors) {
+                throw new Error('Selector or selectors is required for enable "on dom ready".');
+            }
+            changesOnElementWithSelectors(target, selectors);
+        }
+    });
+}
+//# sourceMappingURL=dom-changes.js.map

package/dist/dom/dom-changes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dom-changes.js","sourceRoot":"","sources":["../../src/dom/dom-changes.ts"],"names":[],"mappings":"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"}

package/dist/dom/dom-events.d.ts

@@ -0,0 +1,18 @@
+export type EventHandler = (element: Element, event: Event) => void;
+export type EventHandlers = Record<string, EventHandler>;
+type EventName = 'click' | 'change';
+type Selector = string;
+type BaseListenOptions = {
+    readonly target?: string | HTMLElement;
+};
+type SelectorListenOptions = BaseListenOptions & {
+    readonly selector: Selector;
+    selectors?: never;
+};
+type SelectorsListenOptions = BaseListenOptions & {
+    readonly selectors: EventHandlers;
+    selector?: never;
+};
+export declare function onDomEvents(eventName: EventName, options: SelectorListenOptions | string, handler: EventHandler): void;
+export declare function onDomEvents(eventName: EventName, options: SelectorsListenOptions): void;
+export {};

package/dist/dom/dom-events.js

@@ -0,0 +1,51 @@
+import { onDomReady } from './dom-ready';
+export function onDomEvents(eventName, options, handler) {
+    if (typeof options === 'string') {
+        options = {
+            selector: options,
+        };
+    }
+    if (options.selectors && handler) {
+        throw new Error('Only one option must be provided: either selectors or callback, not both.');
+    }
+    let selectors;
+    if (options.selectors) {
+        selectors = options.selectors;
+    }
+    else {
+        if (!handler) {
+            throw new Error('Missed handler');
+        }
+        selectors = {};
+        selectors[options.selector] = handler;
+    }
+    const findHandler = (selectors, element) => {
+        for (const [selector, handler] of Object.entries(selectors)) {
+            if (element.matches(selector)) {
+                return [element, handler];
+            }
+            const parent = element.closest(selector);
+            if (parent) {
+                return [parent, handler];
+            }
+        }
+        return null;
+    };
+    onDomReady(() => {
+        let target = document.body;
+        if (options.target) {
+            target = options.target instanceof Element ? options.target : document.querySelector(options.target);
+            if (!target) {
+                throw new Error(`Missed target element by selector "${options.target}".`);
+            }
+        }
+        target.addEventListener(eventName, (event) => {
+            const target = event.target;
+            const entry = findHandler(selectors, target);
+            if (entry) {
+                entry[1].call(null, entry[0], event);
+            }
+        });
+    });
+}
+//# sourceMappingURL=dom-events.js.map

package/dist/dom/dom-events.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dom-events.js","sourceRoot":"","sources":["../../src/dom/dom-events.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAyBzC,MAAM,UAAU,WAAW,CAAC,SAAoB,EAAE,OAAgE,EAAE,OAAsB;IACtI,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE,CAAC;QAC9B,OAAO,GAA0B;YAC7B,QAAQ,EAAE,OAAO;SACpB,CAAC;IACN,CAAC;IAED,IAAI,OAAO,CAAC,SAAS,IAAI,OAAO,EAAE,CAAC;QAC/B,MAAM,IAAI,KAAK,CAAC,2EAA2E,CAAC,CAAC;IACjG,CAAC;IAED,IAAI,SAAwB,CAAC;IAE7B,IAAI,OAAO,CAAC,SAAS,EAAE,CAAC;QACpB,SAAS,GAAG,OAAO,CAAC,SAAS,CAAC;IAClC,CAAC;SAAM,CAAC;QACJ,IAAI,CAAC,OAAO,EAAE,CAAC;YACX,MAAM,IAAI,KAAK,CAAC,gBAAgB,CAAC,CAAC;QACtC,CAAC;QAED,SAAS,GAAG,EAAE,CAAC;QACf,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,OAAO,CAAC;IAC1C,CAAC;IAED,MAAM,WAAW,GAAG,CAAC,SAAwB,EAAE,OAAoB,EAAsC,EAAE;QACvG,KAAK,MAAM,CAAC,QAAQ,EAAE,OAAO,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,CAAC;YAC1D,IAAI,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC;gBAC5B,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;YAC9B,CAAC;YAED,MAAM,MAAM,GAAgB,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;YAEtD,IAAI,MAAM,EAAE,CAAC;gBACT,OAAO,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;YAC7B,CAAC;QACL,CAAC;QAED,OAAO,IAAI,CAAC;IAChB,CAAC,CAAC;IAEF,UAAU,CAAC,GAAG,EAAE;QACZ,IAAI,MAAM,GAAmB,QAAQ,CAAC,IAAI,CAAC;QAE3C,IAAI,OAAO,CAAC,MAAM,EAAE,CAAC;YACjB,MAAM,GAAG,OAAO,CAAC,MAAM,YAAY,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;YAErG,IAAI,CAAC,MAAM,EAAE,CAAC;gBACV,MAAM,IAAI,KAAK,CAAC,sCAAsC,OAAO,CAAC,MAAM,IAAI,CAAC,CAAC;YAC9E,CAAC;QACL,CAAC;QAED,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,KAAK,EAAQ,EAAE;YAC/C,MAAM,MAAM,GAAgB,KAAK,CAAC,MAAM,CAAC;YACzC,MAAM,KAAK,GAAG,WAAW,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;YAE7C,IAAI,KAAK,EAAE,CAAC;gBACR,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;YACzC,CAAC;QACL,CAAC,CAAC,CAAC;IACP,CAAC,CAAC,CAAC;AACP,CAAC"}

package/dist/dom/dom-ready.d.ts

@@ -0,0 +1,3 @@
+export type DomReadyCallback = () => void;
+export declare function onDomReady(callback: DomReadyCallback): void;
+export declare function onDomReady(callback: Array<DomReadyCallback>): void;

package/dist/dom/dom-ready.js

@@ -0,0 +1,18 @@
+export function onDomReady(callback) {
+    let wrap;
+    if (Array.isArray(callback)) {
+        wrap = () => callback.forEach((c) => c.call(null));
+    }
+    else {
+        wrap = callback;
+    }
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', wrap, {
+            once: true,
+        });
+    }
+    else {
+        wrap.call(null);
+    }
+}
+//# sourceMappingURL=dom-ready.js.map

package/dist/dom/dom-ready.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dom-ready.js","sourceRoot":"","sources":["../../src/dom/dom-ready.ts"],"names":[],"mappings":"AAKA,MAAM,UAAU,UAAU,CAAC,QAAoD;IAC3E,IAAI,IAAsB,CAAC;IAE3B,IAAI,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC;QAC1B,IAAI,GAAG,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IACvD,CAAC;SAAM,CAAC;QACJ,IAAI,GAAG,QAAQ,CAAC;IACpB,CAAC;IAED,IAAI,QAAQ,CAAC,UAAU,KAAK,SAAS,EAAE,CAAC;QACpC,QAAQ,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,IAAI,EAAE;YAChD,IAAI,EAAE,IAAI;SACb,CAAC,CAAC;IACP,CAAC;SAAM,CAAC;QACJ,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACpB,CAAC;AACL,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { onDomReady } from './dom/dom-ready';
+export { onDomChanges } from './dom/dom-changes';
+export { onDomEvents } from './dom/dom-events';

package/dist/index.js

@@ -0,0 +1,5 @@
+// DOM manipulation
+export { onDomReady } from './dom/dom-ready';
+export { onDomChanges } from './dom/dom-changes';
+export { onDomEvents } from './dom/dom-events';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,mBAAmB;AACnB,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC"}

package/package.json

@@ -0,0 +1,39 @@
+{
+    "name": "@fivelab/web-utils",
+    "version": "1.0.0",
+    "private": false,
+    "type": "module",
+    "description": "The helpers for easy manipulate with dom.",
+    "license": "MIT",
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.js"
+        },
+        "./dom/*": {
+            "types": "./dist/dom/*.d.ts",
+            "import": "./dist/dom/*.js"
+        }
+    },
+    "files": [
+        "dist"
+    ],
+    "sideEffects": false,
+    "devDependencies": {
+        "@typescript-eslint/eslint-plugin": "~8.50",
+        "@typescript-eslint/parser": "~8.50",
+        "eslint": "~9.39",
+        "jsdom": "~27.3",
+        "typescript": "~5.9",
+        "vitest": "~4.0"
+    },
+    "scripts": {
+        "clean": "rm -rf dist/*",
+        "build": "npm run clean && tsc -p tsconfig.build.json",
+        "build:watch": "tsc -p tsconfig.build.json --watch",
+        "test": "vitest run",
+        "test:watch": "vitest",
+        "lint": "eslint src",
+        "prepublishOnly": "npm run clean && npm run lint && npm run test && npm run build"
+    }
+}