@plohoj/html-editor 0.0.5

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Alexandr Plokhih
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,123 @@
+# HTML editor
+**`html-editor`** it's a tool for helping modification html elements
+
+## Table of contents
+* [Observables](#observables)
+    * [observeElementMutation](#observe-element-mutation)
+    * [observeQuerySelector](#observe-query-selector)
+    * [observeQuerySelectorAll](#observe-query-selector-all)
+    * [awaitElement](#await-element)
+    * [awaitRandomElement](#await-random-element)
+    * [urlChange$](#url-change)
+* [Operators](#operators)
+    * [mergeMapAddedElements](#merge-map-added-elements)
+    * [mergeMapStringToggle](#merge-map-string-toggle)
+
+# <a name="observables"></a> Observables
+## <a name="observe-element-mutation"></a> `observeElementMutation`
+Converts the callback of the MutationObserver class to an Rx event stream.
+
+Example:
+```ts
+observeElementMutation(
+    document.querySelector('#my-element'),
+    { attributeFilter: ['data-my-data'] },
+).subscribe(console.log);
+```
+
+## <a name="observe-query-selector"></a> `observeQuerySelector`
+Returns change (addition and deletion) of element that match selectors, like an Rx stream.
+
+Example:
+```ts
+observeQuerySelector(
+    '.my-child',
+    {
+        parent: document.querySelector('#my-parent'),
+        has: '.my-sub-child',
+        filter: element => element.classList.contains('.my-child-modifier'),
+    }
+).subscribe(console.log);
+```
+Example log:
+```ts
+{added: Element, target: Element, removed: undefined};
+{added: undefined, target: undefined, removed: Element};
+```
+
+## <a name="observe-query-selector-all"></a> `observeQuerySelectorAll`
+Returns changes (additions and deletions) of elements that match selectors, like an Rx stream.
+
+Example:
+```ts
+observeQuerySelectorAll(
+    '.my-child',
+    {
+        parent: document.querySelector('#my-parent'),
+        has: '.my-sub-child',
+        filter: element => element.classList.contains('.my-child-modifier'),
+    }
+).subscribe(console.log);
+```
+Example log:
+```ts
+{added: [Element], target: [Element, Element], removed: []};
+{added: [], target: [Element], removed: [Element]};
+```
+
+## <a name="await-element"></a> `awaitElement`
+Awaiting only one element to match the selector and returns it as an Rx stream. The stream ends immediately after one element is found / added.
+
+Example:
+```ts
+awaitElement('#my-element')
+    .subscribe(console.log);
+```
+
+## <a name="await-random-element"></a> `awaitRandomElement`
+Awaiting Expects at least one element to match the selector and returns it as an Rx stream. If there are more than 1 elements, it will return a random one. The stream ends immediately after the elements are found / added.
+
+Example:
+```ts
+awaitRandomElement('.my-element')
+    .subscribe(console.log);
+```
+
+## <a name="url-change"></a> `urlChange$`
+Emit new location url when the URL is changes
+
+Example:
+```ts
+urlChange$.subscribe(console.log);
+```
+
+# <a name="operators"></a> Operators
+
+## <a name="merge-map-added-elements"></a> `mergeMapAddedElements`
+Conversion operator to a new stream for each new added element
+
+Example:
+```ts
+observeQuerySelectorAll('.my-button')
+    .pipe(
+        mergeMapAddedElements(
+            element => fromEvent(element, 'click'),
+            { isTakeUntilRemoved: true }
+        )
+    ).subscribe(console.log);
+```
+
+## <a name="merge-map-string-toggle"></a> `mergeMapStringToggle`
+The operator creates a separate stream when the source string is validated.
+
+Example:
+```ts
+urlChange$
+    .pipe(
+        mergeMapStringToggle(
+            /my-url-segment/,
+            () => observeQuerySelectorAll('.my-element'),
+            { isTakeUntilToggle: true },
+        )
+    ).subscribe(console.log);
+```

package/dist/index.js

@@ -0,0 +1,315 @@
+import { throttleTime, mergeMap, distinctUntilChanged, switchMap, filter, map, take, shareReplay, tap, connect, takeUntil } from 'rxjs/operators';
+import { Observable, concat, defer, EMPTY, of, pipe, merge, from } from 'rxjs';
+
+function randomFromArray(array, from = 0, to = array.length) {
+    if (to < 0) {
+        to = array.length + to;
+    }
+    return array[Math.floor(Math.random() * (to - from)) + from];
+}
+
+/**
+ * Converts the callback of the MutationObserver class to an Rx event stream
+ */
+function observeElementMutation(node, options) {
+    return new Observable(subscriber => {
+        const mutationObserver = new MutationObserver(mutation => subscriber.next(mutation));
+        mutationObserver.observe(node, options);
+        return () => mutationObserver.disconnect();
+    });
+}
+
+/**
+ * Returns change (addition and deletion) of element that match selectors, like an Rx stream.
+ */
+function observeQuerySelector(query, options = {}) {
+    const { parent = document.documentElement, asRemovedWhen } = options;
+    let targetElement;
+    function checkChanges() {
+        const querySelectedElements = parent.querySelectorAll(query);
+        let filteredSelectedElement;
+        const changes = {};
+        for (const querySelectedElement of querySelectedElements) {
+            if (options.has && !querySelectedElement.querySelector(options.has)) {
+                continue;
+            }
+            if (options.filter && !options.filter(querySelectedElement)) {
+                continue;
+            }
+            filteredSelectedElement = querySelectedElement;
+            break;
+        }
+        if (filteredSelectedElement === targetElement) {
+            return EMPTY;
+        }
+        if (targetElement) {
+            changes.removed = targetElement;
+        }
+        if (filteredSelectedElement) {
+            changes.added = filteredSelectedElement;
+        }
+        changes.target = filteredSelectedElement;
+        targetElement = filteredSelectedElement;
+        return of(changes);
+    }
+    const observeQuerySelector$ = concat(defer(() => checkChanges()), observeElementMutation(parent, { subtree: true, childList: true }).pipe(throttleTime(0, undefined, { leading: true, trailing: true }), mergeMap(checkChanges)));
+    if (asRemovedWhen) {
+        const removedObserver$ = defer(() => {
+            if (!targetElement) {
+                return EMPTY;
+            }
+            const changes = {
+                removed: targetElement,
+            };
+            targetElement = undefined;
+            return of(changes);
+        });
+        const observeQuerySelectorWithRemovedWhen$ = asRemovedWhen.pipe(distinctUntilChanged(), switchMap(asRemoved => asRemoved ? removedObserver$ : observeQuerySelector$));
+        return observeQuerySelectorWithRemovedWhen$;
+    }
+    return observeQuerySelector$;
+}
+
+/** Returns changes (additions and deletions) of elements that match selectors, like an Rx stream. */
+function observeQuerySelectorAll(query, options = {}) {
+    const { parent = document.documentElement, asRemovedWhen } = options;
+    const targetElements = new Set();
+    function checkChanges() {
+        const addedElements = new Set();
+        const targetElementsDiff = new Set(targetElements);
+        const querySelectedElements = new Set(parent.querySelectorAll(query));
+        for (const querySelectedElement of querySelectedElements) {
+            if (options.has && !querySelectedElement.querySelector(options.has)) {
+                continue;
+            }
+            if (options.filter && !options.filter(querySelectedElement)) {
+                continue;
+            }
+            if (targetElementsDiff.has(querySelectedElement)) {
+                targetElementsDiff.delete(querySelectedElement);
+            }
+            else {
+                addedElements.add(querySelectedElement);
+            }
+        }
+        // No changes
+        if (addedElements.size === 0 && targetElementsDiff.size === 0) {
+            return EMPTY;
+        }
+        for (const removedElement of targetElementsDiff) {
+            targetElements.delete(removedElement);
+        }
+        for (const addedElement of addedElements) {
+            targetElements.add(addedElement);
+        }
+        const changes = {
+            target: [...targetElements.values()],
+            added: [...addedElements.values()],
+            removed: [...targetElementsDiff.values()],
+        };
+        return of(changes);
+    }
+    let observeQuerySelectorAll$ = concat(defer(() => checkChanges()), observeElementMutation(parent, { subtree: true, childList: true }).pipe(throttleTime(0, undefined, { leading: true, trailing: true }), mergeMap(checkChanges)));
+    if (asRemovedWhen) {
+        const removedObserver$ = defer(() => {
+            if (targetElements.size === 0) {
+                return EMPTY;
+            }
+            const changes = {
+                target: [],
+                added: [],
+                removed: [...targetElements.values()],
+            };
+            targetElements.clear();
+            return of(changes);
+        });
+        const observeQuerySelectorAllWithRemovedWhen$ = asRemovedWhen.pipe(distinctUntilChanged(), switchMap(asRemoved => asRemoved ? removedObserver$ : observeQuerySelectorAll$));
+        return observeQuerySelectorAllWithRemovedWhen$;
+    }
+    return observeQuerySelectorAll$;
+}
+
+/**
+ * Awaiting only one element to match the selector and returns it as an Rx stream.
+ * The stream ends immediately after one element is found / added.
+ */
+function awaitElement(query) {
+    return observeQuerySelector(query)
+        .pipe(filter(changes => !!changes.target), map(changes => changes.target), take(1));
+}
+/**
+ * Awaiting Expects at least one element to match the selector and returns it as an Rx stream.
+ * If there are more than 1 elements,
+ * it will return a random one. The stream ends immediately after the elements are found / added.
+ */
+function awaitRandomElement(query) {
+    return observeQuerySelectorAll(query)
+        .pipe(filter(changes => !!changes.target), map(changes => randomFromArray(changes.target)), take(1));
+}
+
+let pushStateSubscriber$;
+function injectPushStateHandler() {
+    const pushState = history.pushState;
+    history.pushState = function (...args) {
+        pushState.apply(this, args);
+        pushStateSubscriber$ === null || pushStateSubscriber$ === void 0 ? void 0 : pushStateSubscriber$.next(location.href);
+    };
+}
+/**
+ * Emit new location url when the URL is changes
+ */
+const urlChange$ = new Observable(subscriber$ => {
+    function updateURL() {
+        subscriber$.next(location.href);
+    }
+    window.addEventListener('hashchange', updateURL);
+    window.addEventListener('popstate', updateURL);
+    pushStateSubscriber$ = subscriber$;
+    subscriber$.next(location.href);
+    injectPushStateHandler();
+    return () => {
+        pushStateSubscriber$ = undefined;
+        window.removeEventListener('hashchange', updateURL);
+        window.removeEventListener('popstate', updateURL);
+    };
+}).pipe(distinctUntilChanged(), shareReplay(1));
+
+function clickElementImmediately(element) {
+    element.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+    console.log(`Click: `, element);
+}
+function clickElement(element) {
+    if (element) {
+        clickElementImmediately(element);
+    }
+    else {
+        return pipe(tap((element) => clickElementImmediately(element)));
+    }
+}
+
+function assuredArray(values) {
+    if (values instanceof Array) {
+        return values;
+    }
+    if (values) {
+        return [values];
+    }
+    return [];
+}
+/** Conversion operator to a new stream for each new added element */
+function mergeMapAddedElements(project, options) {
+    if (!(options === null || options === void 0 ? void 0 : options.isTakeUntilRemoved)) {
+        return source$ => source$.pipe(mergeMap(changes => {
+            let added = assuredArray(changes.added);
+            if (added.length === 0) {
+                return EMPTY;
+            }
+            let addedObservers = added.map(project);
+            return merge(...addedObservers);
+        }));
+    }
+    return source$ => source$.pipe(connect(connectedSource$ => connectedSource$.pipe(mergeMap(changes => {
+        let added = assuredArray(changes.added);
+        if (added.length === 0) {
+            return EMPTY;
+        }
+        let addedObservers = added.map(addedElement => from(project(addedElement)).pipe(takeUntil(connectedSource$.pipe(filter(changes => {
+            if (changes.removed instanceof Array) {
+                return changes.removed.indexOf(addedElement) != -1;
+            }
+            else {
+                return changes.removed === addedElement;
+            }
+        })))));
+        return merge(...addedObservers);
+    }))));
+}
+
+function removeElement() {
+    return pipe(tap((element) => {
+        element.remove();
+        console.log(`Remove: `, element);
+    }));
+}
+
+function setInputValueImmediately(element, value) {
+    element.value = value;
+    element.focus();
+    element.dispatchEvent(new Event('input', { target: element }));
+    console.log(`Set value: `, { element, value });
+}
+function setInputValue(elementOrValue, value) {
+    if (typeof elementOrValue === 'string') {
+        return pipe(tap((element) => setInputValueImmediately(element, elementOrValue)));
+    }
+    else {
+        setInputValueImmediately(elementOrValue, value);
+    }
+}
+
+/** The operator creates a separate stream when the source string is validated. */
+function mergeMapStringToggle(condition, project, options) {
+    const mapConditionFn = typeof condition === 'function' ? condition : (url) => condition.test(url);
+    let urlMatchToggler;
+    if (typeof project === 'function') {
+        urlMatchToggler = (isUrlMatch) => isUrlMatch ? from(project()) : EMPTY;
+    }
+    else {
+        urlMatchToggler = (isUrlMatch) => isUrlMatch ? from(project) : EMPTY;
+    }
+    const mergeOperator = (options === null || options === void 0 ? void 0 : options.isTakeUntilToggle)
+        ? switchMap(urlMatchToggler)
+        : mergeMap(urlMatchToggler);
+    return pipe(map(mapConditionFn), distinctUntilChanged(), mergeOperator);
+}
+
+function findRecursively(obj, mather) {
+    const seen = new Set();
+    const searched = {};
+    const needFind = new Set([[undefined, obj]]);
+    function addToCheck(path, value) {
+        if (seen.has(value)) {
+            return;
+        }
+        needFind.add([path, value]);
+        seen.add(value);
+    }
+    while (true) {
+        const iterator = needFind.values().next();
+        if (iterator.done) {
+            break;
+        }
+        const path = iterator.value[0];
+        const iteratedObj = iterator.value[1];
+        needFind.delete(iterator.value);
+        if (!iteratedObj) {
+            continue;
+        }
+        if (iteratedObj instanceof Array) {
+            for (const [index, value] of iteratedObj.entries()) {
+                if (value)
+                    addToCheck(`${path || ''}[${index}]`, value);
+            }
+        }
+        else if (typeof iteratedObj === "object") {
+            for (const key of Object.keys(iteratedObj)) {
+                const value = iteratedObj[key];
+                const keyPath = path ? `${path}.${key}` : key;
+                if (mather(key, value, keyPath)) {
+                    searched[keyPath] = value;
+                }
+                addToCheck(keyPath, value);
+            }
+        }
+    }
+    if (Object.keys(searched).length === 0) {
+        return null;
+    }
+    return searched;
+}
+function findRecursivelyPropertyName(obj, propertyName) {
+    return findRecursively(obj, matchedPropertyName => matchedPropertyName === propertyName);
+}
+
+export { awaitElement, awaitRandomElement, clickElement, findRecursively, findRecursivelyPropertyName, mergeMapAddedElements, mergeMapStringToggle, observeElementMutation, observeQuerySelector, observeQuerySelectorAll, randomFromArray, removeElement, setInputValue, urlChange$ };
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@plohoj/html-editor",
+  "version": "0.0.5",
+  "description": "html-editor it's a tool for helping modification html elements",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/plohoj/html-editor.git"
+  },
+  "scripts": {
+    "build": "rollup --config"
+  },
+  "author": "Plokhikh Alexandr",
+  "license": "ISC",
+  "module": "./dist/index.js",
+  "types": "./src/index.ts",
+  "dependencies": {
+    "rxjs": "^7.0.0"
+  },
+  "devDependencies": {
+    "rollup": "^2.60.2",
+    "rollup-plugin-typescript2": "^0.31.1",
+    "typescript": "^4.5.2"
+  }
+}

package/src/index.ts

@@ -0,0 +1,15 @@
+// Observable
+export { awaitElement, awaitRandomElement } from "./observable/await-element";
+export { observeElementMutation } from "./observable/observe-mutation";
+export { observeQuerySelector } from "./observable/observe-query-selector";
+export { observeQuerySelectorAll } from "./observable/observe-query-selector-all";
+export { urlChange$ } from "./observable/url-change";
+// Operators
+export { clickElement } from "./operators/click-element";
+export { mergeMapAddedElements } from "./operators/merge-map-added-elements";
+export { removeElement } from "./operators/remove-element";
+export { setInputValue } from "./operators/set-input-value";
+export { mergeMapStringToggle } from "./operators/merge-map-string-toggle";
+// Utils
+export { findRecursively, findRecursivelyPropertyName, RecursivelyFindMather } from "./utils/find-recursively";
+export { randomFromArray } from "./utils/random-from-array";

package/src/observable/await-element.ts

@@ -0,0 +1,32 @@
+import { Observable } from "rxjs";
+import { filter, map, take } from "rxjs/operators";
+import { randomFromArray } from "../utils/random-from-array";
+import { observeQuerySelector } from "./observe-query-selector";
+import { observeQuerySelectorAll } from "./observe-query-selector-all";
+
+/**
+ * Awaiting only one element to match the selector and returns it as an Rx stream.
+ * The stream ends immediately after one element is found / added.
+ */
+export function awaitElement<T extends Element = Element>(query: string): Observable<T> {
+    return observeQuerySelector<T>(query)
+        .pipe(
+            filter(changes => !!changes.target),
+            map(changes => changes.target!),
+            take(1),
+        );
+}
+
+/**
+ * Awaiting Expects at least one element to match the selector and returns it as an Rx stream.
+ * If there are more than 1 elements,
+ * it will return a random one. The stream ends immediately after the elements are found / added.
+ */
+export function awaitRandomElement<T extends Element = Element>(query: string): Observable<T> {
+    return observeQuerySelectorAll<T>(query)
+        .pipe(
+            filter(changes => !!changes.target),
+            map(changes => randomFromArray(changes.target)),
+            take(1),
+        );
+}

package/src/observable/observe-mutation.ts

@@ -0,0 +1,12 @@
+import { Observable } from "rxjs";
+
+/**
+ * Converts the callback of the MutationObserver class to an Rx event stream
+ */
+export function observeElementMutation<T extends Node>(node: T, options?: MutationObserverInit): Observable<MutationRecord[]> {
+    return new Observable<MutationRecord[]>(subscriber => {
+        const mutationObserver = new MutationObserver(mutation => subscriber.next(mutation));
+        mutationObserver.observe(node, options);
+        return () => mutationObserver.disconnect();
+    });
+}

package/src/observable/observe-query-selector-all.ts

@@ -0,0 +1,96 @@
+
+import { concat, defer, EMPTY, Observable, of } from "rxjs";
+import { distinctUntilChanged, mergeMap, switchMap, throttleTime } from "rxjs/operators";
+import { observeElementMutation } from "./observe-mutation";
+import { IObserveQuerySelectorOptions } from "./observe-query-selector";
+
+export interface IObservedElementsChanges<T extends Element = Element> {
+    /** All elements that satisfy the filtering condition. */
+    target: T[];
+    /** New elements that have been added since the last emit. */
+    added: T[];
+    /** Elements that have been removed since the last emit. */
+    removed: T[];
+}
+
+/** Returns changes (additions and deletions) of elements that match selectors, like an Rx stream. */
+export function observeQuerySelectorAll<T extends Element = Element>(
+    query: string,
+    options: IObserveQuerySelectorOptions = {},
+): Observable<IObservedElementsChanges<T>> {
+    const { parent = document.documentElement, asRemovedWhen } = options;
+    const targetElements = new Set<T>();
+
+    function checkChanges(): Observable<IObservedElementsChanges<T>> {
+        const addedElements = new Set<T>();
+        const targetElementsDiff = new Set(targetElements);
+        const querySelectedElements = new Set(parent.querySelectorAll<T>(query));
+
+        for (const querySelectedElement of querySelectedElements) {
+            if (options.has && !querySelectedElement.querySelector(options.has)) {
+                continue;
+            }
+            if (options.filter && !options.filter(querySelectedElement)) {
+                continue;
+            }
+
+            if (targetElementsDiff.has(querySelectedElement)) {
+                targetElementsDiff.delete(querySelectedElement);
+            } else {
+                addedElements.add(querySelectedElement);
+            }
+        }
+
+        // No changes
+        if (addedElements.size === 0 && targetElementsDiff.size === 0) {
+            return EMPTY;
+        }
+
+        for (const removedElement of targetElementsDiff) {
+            targetElements.delete(removedElement);
+        }
+        for (const addedElement of addedElements) {
+            targetElements.add(addedElement);
+        }
+
+        const changes: IObservedElementsChanges<T> = {
+            target: [...targetElements.values()],
+            added: [...addedElements.values()],
+            removed: [...targetElementsDiff.values()],
+        }
+
+        return of(changes);
+    }
+
+    let observeQuerySelectorAll$ = concat(
+        defer(() => checkChanges()),
+        observeElementMutation(parent, {subtree: true, childList: true}).pipe(
+            throttleTime(0, undefined, {leading: true, trailing: true}),
+            mergeMap(checkChanges)
+        ),
+    )
+
+    if (asRemovedWhen) {
+        const removedObserver$ = defer(() => {
+            if (targetElements.size === 0) {
+                return EMPTY;
+            }
+            const changes: IObservedElementsChanges<T> = {
+                target: [],
+                added: [],
+                removed: [...targetElements.values()],
+            };
+            targetElements.clear();
+            return of(changes);
+        });
+
+        const observeQuerySelectorAllWithRemovedWhen$ = asRemovedWhen.pipe(
+            distinctUntilChanged(),
+            switchMap(asRemoved => asRemoved ? removedObserver$ : observeQuerySelectorAll$),
+        );
+
+        return observeQuerySelectorAllWithRemovedWhen$;
+    }
+
+    return observeQuerySelectorAll$;
+}

package/src/observable/observe-query-selector.ts

@@ -0,0 +1,104 @@
+
+import { concat, defer, EMPTY, Observable, of } from "rxjs";
+import { distinctUntilChanged, mergeMap, switchMap, throttleTime } from "rxjs/operators";
+import { observeElementMutation } from "./observe-mutation";
+
+export interface IObserveQuerySelectorOptions<T extends Element = Element> {
+    /**
+     * The parent element within which changes are tracked.
+     * @default document.documentElement
+     */
+    parent?: T;
+    /** Checks if the added element has any child elements that match the selectors. */
+    has?: string;
+    /** Custom validation of each item */
+    filter?: (element: T) => boolean;
+    /**
+     * When the `asRemovedWhen` parameter emits a` true` value,
+     * all currently added items will be returned as removed.
+     * When the `asRemovedWhen` parameter emits a `false` value,
+     * the search will resume and all items will again be returned as added.
+     */
+    asRemovedWhen?: Observable<Boolean>;
+}
+
+export interface IObserveElementChange<T extends Element = Element> {
+    /** Element that satisfy the filtering condition. */
+    target?: T;
+    /** New element that have been added since the last emit. */
+    added?: T;
+    /** Element that have been removed since the last emit. */
+    removed?: T;
+}
+
+/**
+ * Returns change (addition and deletion) of element that match selectors, like an Rx stream.
+ */
+export function observeQuerySelector<T extends Element = Element>(
+    query: string,
+    options: IObserveQuerySelectorOptions = {},
+): Observable<IObserveElementChange<T>> {
+    const { parent = document.documentElement, asRemovedWhen } = options;
+    let targetElement: T | undefined;
+
+    function checkChanges(): Observable<IObserveElementChange<T>> {
+        const querySelectedElements: NodeListOf<T> = parent.querySelectorAll<T>(query);
+        let filteredSelectedElement: T | undefined;
+        const changes: IObserveElementChange<T> = {};
+
+        for (const querySelectedElement of querySelectedElements) {
+            if (options.has && !querySelectedElement.querySelector(options.has)) {
+                continue;
+            }
+            if (options.filter && !options.filter(querySelectedElement)) {
+                continue;
+            }
+
+            filteredSelectedElement = querySelectedElement;
+            break;
+        }
+
+        if (filteredSelectedElement === targetElement) {
+            return EMPTY;
+        }
+        if (targetElement) {
+            changes.removed = targetElement;
+        }
+        if (filteredSelectedElement) {
+            changes.added = filteredSelectedElement;
+        }
+        changes.target = filteredSelectedElement;
+        targetElement = filteredSelectedElement;
+        return of(changes);
+    }
+
+    const observeQuerySelector$ = concat(
+        defer(() => checkChanges()),
+        observeElementMutation(parent, {subtree: true, childList: true}).pipe(
+            throttleTime(0, undefined, {leading: true, trailing: true}),
+            mergeMap(checkChanges),
+        )
+    )
+
+    if (asRemovedWhen) {
+        const removedObserver$ = defer(() => {
+            if (!targetElement) {
+                return EMPTY;
+            }
+            const changes: IObserveElementChange<T> = {
+                removed: targetElement,
+            };
+            targetElement = undefined;
+            return of(changes);
+        });
+
+        const observeQuerySelectorWithRemovedWhen$ = asRemovedWhen.pipe(
+            distinctUntilChanged(),
+            switchMap(asRemoved => asRemoved ? removedObserver$ : observeQuerySelector$),
+        );
+
+        return observeQuerySelectorWithRemovedWhen$;
+    }
+
+    return observeQuerySelector$;
+}

package/src/observable/url-change.ts

@@ -0,0 +1,38 @@
+import { Observable, Subscriber } from "rxjs";
+import { distinctUntilChanged, shareReplay } from "rxjs/operators";
+
+let pushStateSubscriber$: Subscriber<string> | undefined;
+let isPushStateWasInjected = false;
+
+function injectPushStateHandler(): void {
+    if (isPushStateWasInjected) {
+        return;
+    }
+    const pushState = history.pushState;
+    history.pushState = function (...args) {
+        pushState.apply(this, args);
+        pushStateSubscriber$?.next(location.href);
+    };
+}
+
+/**
+ * Emit new location url when the URL is changes
+ */
+export const urlChange$ = new Observable<string>(subscriber$ => {
+    function updateURL(): void {
+        subscriber$.next(location.href)
+    }    
+    window.addEventListener('hashchange', updateURL);
+    window.addEventListener('popstate', updateURL);
+    pushStateSubscriber$ = subscriber$;
+    subscriber$.next(location.href);
+    injectPushStateHandler();
+    return () => {
+        pushStateSubscriber$ = undefined;
+        window.removeEventListener('hashchange', updateURL);
+        window.removeEventListener('popstate', updateURL);
+    }
+}).pipe(
+    distinctUntilChanged(),
+    shareReplay(1),
+);

package/src/operators/click-element.ts

@@ -0,0 +1,20 @@
+import { MonoTypeOperatorFunction, pipe } from "rxjs";
+import { tap } from "rxjs/operators";
+
+function clickElementImmediately(element: Element): void {
+    element.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+    console.log(`Click: `, element);
+}
+
+
+export function clickElement<T extends Element>(): MonoTypeOperatorFunction<T>;
+export function clickElement<T extends Element>(element: T): void;
+export function clickElement<T extends Element>(element?: T): MonoTypeOperatorFunction<T> | void {
+    if (element) {
+        clickElementImmediately(element);
+    } else {
+        return pipe(
+            tap((element: T) => clickElementImmediately(element)),
+        );
+    }
+}

package/src/operators/merge-map-added-elements.ts

@@ -0,0 +1,77 @@
+import { EMPTY, from, merge, ObservableInput, ObservedValueOf, OperatorFunction } from "rxjs";
+import { connect, filter, mergeMap, takeUntil } from "rxjs/operators";
+import { IObserveElementChange } from "../observable/observe-query-selector";
+import { IObservedElementsChanges } from "../observable/observe-query-selector-all";
+
+export interface IMapElementChangeOptions {
+    /**
+     * If the `isTakeUntilRemoved` parameter is equal to the `true` value,
+     * then each thread will be interrupted after the element is removed.
+     * Only the stream that belongs to the deleted element is interrupted.
+     * 
+     * If the `isTakeUntilRemoved` parameter is equal to the `false` value,
+     * then the converted streams will not be interrupted.
+     */
+    isTakeUntilRemoved?: boolean;
+}
+
+function assuredArray<T>(values?: T | T[]): T[] {
+    if (values instanceof Array) {
+        return values
+    }
+    if (values) {
+        return [values];
+    }
+    return [];
+}
+
+/** Conversion operator to a new stream for each new added element */
+export function mergeMapAddedElements<T extends Element, O extends ObservableInput<any>>(
+    project: (element: T) => O,
+    options?: IMapElementChangeOptions,
+): OperatorFunction<
+    IObservedElementsChanges<T> | IObserveElementChange<T>,
+    ObservedValueOf<O>
+> {
+    if (!options?.isTakeUntilRemoved) {
+        return source$ => source$.pipe(
+            mergeMap(changes => {
+                let added = assuredArray(changes.added);
+                if (added.length === 0) {
+                    return EMPTY;
+                }
+                let addedObservers = added.map(project);
+                return merge(...addedObservers);
+            })
+        );
+    }
+    return source$ => source$.pipe(
+        connect(connectedSource$ => connectedSource$.pipe(
+            mergeMap(changes => {
+                let added = assuredArray(changes.added);
+                if (added.length === 0) {
+                    return EMPTY;
+                }
+                
+                let addedObservers = added.map(addedElement => 
+                    from(
+                        project(addedElement)
+                    ).pipe(
+                        takeUntil(
+                            connectedSource$.pipe(
+                                filter(changes => {
+                                    if (changes.removed instanceof Array) {
+                                        return changes.removed.indexOf(addedElement) != -1;
+                                    } else {
+                                        return changes.removed === addedElement;
+                                    }
+                                }),
+                            ),
+                        ),
+                    ) as O,
+                );
+                return merge(...addedObservers);
+            })
+        )),
+    );
+}

package/src/operators/merge-map-string-toggle.ts

@@ -0,0 +1,36 @@
+import { EMPTY, from, Observable, ObservableInput, ObservedValueOf, OperatorFunction, pipe } from "rxjs";
+import { distinctUntilChanged, map, mergeMap, switchMap } from "rxjs/operators";
+
+export interface IMergeMapStringToggleOptions {
+    /**
+     * If the `isTakeUntilToggle` parameter is equal to the `true` value,
+     * the stream will be interrupted as soon as the source string fails validation.
+     *
+     * If the `isTakeUntilToggle` parameter is equal to the `false` value, the stream will never be interrupted.
+     */
+    isTakeUntilToggle?: boolean;
+}
+
+/** The operator creates a separate stream when the source string is validated. */
+export function mergeMapStringToggle<O extends ObservableInput<any>>(
+    condition: RegExp | ((url: string) => boolean),
+    project: (() => O) | O,
+    options?: IMergeMapStringToggleOptions,
+): OperatorFunction<string, ObservedValueOf<O>> {
+    const mapConditionFn = typeof condition === 'function' ? condition : (url: string) => condition.test(url);
+    let urlMatchToggler: (isUrlMatch: Boolean) => Observable<ObservedValueOf<O>>;
+    if (typeof project === 'function') {
+        urlMatchToggler = (isUrlMatch: Boolean) => isUrlMatch ? from(project()) : EMPTY
+    } else {
+        urlMatchToggler = (isUrlMatch: Boolean) => isUrlMatch ? from(project) : EMPTY
+    }
+    const mergeOperator = options?.isTakeUntilToggle
+        ? switchMap(urlMatchToggler)
+        : mergeMap(urlMatchToggler);
+
+    return pipe(
+        map(mapConditionFn),
+        distinctUntilChanged(),
+        mergeOperator
+    )
+}

package/src/operators/remove-element.ts

@@ -0,0 +1,9 @@
+import { MonoTypeOperatorFunction, pipe } from "rxjs";
+import { tap } from "rxjs/operators";
+
+export function removeElement<T extends Element>(): MonoTypeOperatorFunction<T> {
+    return pipe(tap((element) => {
+        element.remove();
+        console.log(`Remove: `, element);
+    }));
+}

package/src/operators/set-input-value.ts

@@ -0,0 +1,23 @@
+import { MonoTypeOperatorFunction, pipe } from "rxjs";
+import { tap } from "rxjs/operators";
+
+function setInputValueImmediately(element: HTMLInputElement, value: string): void {
+    element.value = value;
+    element.focus();
+    element.dispatchEvent(new Event('input', <EventInit>{ target: element }));
+    console.log(`Set value: `, { element, value });
+}
+
+export function setInputValue(value: string): MonoTypeOperatorFunction<HTMLInputElement>;
+export function setInputValue(element: HTMLInputElement, value: string): void;
+export function setInputValue(
+    elementOrValue: HTMLInputElement | string, value?: string
+): MonoTypeOperatorFunction<HTMLInputElement> | void {
+    if (typeof elementOrValue === 'string') {
+        return pipe(
+            tap((element: HTMLInputElement) => setInputValueImmediately(element, elementOrValue))
+        );
+    } else {
+        setInputValueImmediately(elementOrValue, value!);
+    }
+}

package/src/utils/find-recursively.ts

@@ -0,0 +1,53 @@
+export type RecursivelyFindMather = (propertyName: string, value: unknown, path: string) => boolean;
+
+export function findRecursively(obj: unknown, mather: RecursivelyFindMather): Record<string, unknown> | null {
+    const seen = new Set<unknown>();
+    const searched: Record<string, unknown> = {};
+    const needFind = new Set<[path: string | undefined, value: unknown]>([[undefined, obj]]);
+
+    function addToCheck(path: string, value: unknown) {
+        if (seen.has(value) ) {
+            return;
+        }
+        needFind.add([path, value]);
+        seen.add(value);
+    }
+
+    while (true) {
+        const iterator = needFind.values().next();
+        if (iterator.done) {
+            break;
+        }
+        const path = iterator.value[0];
+        const iteratedObj = iterator.value[1];
+        needFind.delete(iterator.value);
+
+        if (!iteratedObj) {
+            continue;
+        }
+        if (iteratedObj instanceof Array) {
+            for (const [index, value] of (iteratedObj as unknown[]).entries()) {
+                if (value )
+                addToCheck(`${path || ''}[${index}]`, value);
+            }
+        } else if (typeof iteratedObj === "object") {
+            for (const key of Object.keys(iteratedObj as object)) {
+                const value: unknown = (iteratedObj as any)[key];
+                const keyPath = path ? `${path}.${key}` : key;
+                if (mather(key, value, keyPath)) {
+                    searched[keyPath] = value;
+                }
+                addToCheck(keyPath, value);
+            }
+        }
+    }
+
+    if (Object.keys(searched).length === 0) {
+        return null;
+    }
+    return searched;
+}
+
+export function findRecursivelyPropertyName(obj: unknown, propertyName: string): Record<string, unknown> | null {
+    return findRecursively(obj, matchedPropertyName => matchedPropertyName === propertyName);
+}

package/src/utils/random-from-array.ts

@@ -0,0 +1,6 @@
+export function randomFromArray<T>(array: T[], from: number = 0, to: number = array.length): T {
+    if (to < 0) {
+        to = array.length + to;
+    }
+    return array[Math.floor(Math.random() * (to - from)) + from];
+}