@plohoj/html-editor 0.0.6 → 0.0.7

package/dist/index.js

@@ -1,5 +1,5 @@
 import { throttleTime, mergeMap, distinctUntilChanged, switchMap, debounceTime, filter, map, take, tap, shareReplay, connect, takeUntil } from 'rxjs/operators';
-import { Observable, concat, defer, EMPTY, of, merge, fromEvent, pipe, from, tap as tap$1, share, NEVER, takeUntil as takeUntil$1, ignoreElements, ReplaySubject } from 'rxjs';
+import { Observable, concat, defer, EMPTY, of, merge, fromEvent, from, pipe, tap as tap$1, share, NEVER, takeUntil as takeUntil$1, ignoreElements, ReplaySubject } from 'rxjs';
 
 function trueStub() {
     return true;
@@ -75,15 +75,7 @@ function observeQuerySelector(query, options = {}) {
  * The stream ends after one element is found / added.
  */
 function awaitElement(query, options = {}) {
-    return observeQuerySelector(query, options)
-        .pipe(debounceTime(options.debounceTime || 0, options.debounceScheduler), filter(changes => !!changes.target), map(changes => changes.target), take(1));
-}
-
-function randomFromArray(array, from = 0, to = array.length) {
-    if (to < 0) {
-        to = array.length + to;
-    }
-    return array[Math.floor(Math.random() * (to - from)) + from];
+    return observeQuerySelector(query, options).pipe(debounceTime(options.debounceTime || 0, options.debounceScheduler), filter(changes => !!changes.target), map(changes => changes.target), take(1));
 }
 
 /** Returns changes (additions and deletions) of elements that match selectors, like an Rx stream. */
@@ -145,22 +137,35 @@ function observeQuerySelectorAll(query, options = {}) {
     return observeQuerySelectorAll$;
 }
 
+/**
+ * Awaiting only first elements changes to match the selector and returns it as an Rx stream.
+ * The stream ends after any element is found / added.
+ */
+function awaitElements(query, options = {}) {
+    return observeQuerySelectorAll(query, options).pipe(debounceTime(options.debounceTime || 0, options.debounceScheduler), filter(changes => !!changes.target), map(changes => changes.target), take(1));
+}
+
+function randomFromArray(array, from = 0, to = array.length) {
+    if (to < 0) {
+        to = array.length + to;
+    }
+    return array[Math.floor(Math.random() * (to - from)) + from];
+}
+
 /**
  * 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 after the elements are found / added.
  */
 function awaitRandomElement(query, options = {}) {
-    return observeQuerySelectorAll(query, options)
-        .pipe(debounceTime(options.debounceTime || 0, options.debounceScheduler), filter(changes => changes.target.length > 0), map(changes => randomFromArray(changes.target)), take(1));
+    return observeQuerySelectorAll(query, options).pipe(debounceTime(options.debounceTime || 0, options.debounceScheduler), filter(changes => changes.target.length > 0), map(changes => randomFromArray(changes.target)), take(1));
 }
 
 function observePressedKeyboardButtons(options = {}) {
     const target = options.target || window;
     const set = new Set();
     const addKey$ = merge(fromEvent(target, 'keydown'), fromEvent(target, 'keypress')).pipe(filter((event) => !set.has(event.key)), tap((event) => set.add(event.key)));
-    const keyRemove$ = fromEvent(target, 'keyup')
-        .pipe(filter((event) => set.has(event.key)), tap((event) => set.delete(event.key)));
+    const keyRemove$ = fromEvent(target, 'keyup').pipe(filter((event) => set.has(event.key)), tap((event) => set.delete(event.key)));
     return merge(addKey$, keyRemove$).pipe(map(() => set));
 }
 
@@ -192,7 +197,12 @@ const urlChange$ = new Observable(subscriber$ => {
 }).pipe(distinctUntilChanged(), shareReplay(1));
 
 function clickElementImmediately(element) {
-    element.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+    if ('click' in element) {
+        element.click();
+    }
+    else {
+        element.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+    }
     console.log(`Click: `, element);
 }
 function clickElement(element) {
@@ -200,7 +210,26 @@ function clickElement(element) {
         clickElementImmediately(element);
     }
     else {
-        return pipe(tap((element) => clickElementImmediately(element)));
+        return tap((element) => clickElementImmediately(element));
+    }
+}
+
+function focusElementImmediately(element) {
+    if ('focus' in element) {
+        element.focus();
+    }
+    else {
+        element.dispatchEvent(new FocusEvent('focus'));
+        element.dispatchEvent(new FocusEvent('focusin', { bubbles: true }));
+    }
+    console.log(`Focus: `, element);
+}
+function focusElement(element) {
+    if (element) {
+        focusElementImmediately(element);
+    }
+    else {
+        return tap((element) => focusElementImmediately(element));
     }
 }
 
@@ -213,13 +242,9 @@ function assuredArray(values) {
     }
     return [];
 }
-function mergeMapAddedElements(projectOrOptions, options) {
-    const project = typeof projectOrOptions === 'function'
-        ? projectOrOptions
-        : (element) => of(element);
-    options = typeof projectOrOptions === 'object' ? projectOrOptions : options;
-    const { isTakeUntilRemoved = false } = options || {};
-    if (!isTakeUntilRemoved) {
+/** 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 => {
             const added = assuredArray(changes.added);
             if (added.length === 0) {
@@ -263,10 +288,10 @@ function mergeMapStringToggle(condition, project, options) {
 }
 
 function removeElement() {
-    return pipe(tap((element) => {
+    return tap((element) => {
         element.remove();
         console.log(`Remove: `, element);
-    }));
+    });
 }
 
 function restoreHistory(options) {
@@ -302,12 +327,12 @@ function restoreHistory(options) {
 function setInputValueImmediately(element, value) {
     element.value = value;
     element.focus();
-    element.dispatchEvent(new Event('input', { target: element }));
+    element.dispatchEvent(new Event('input'));
     console.log(`Set value: `, { element, value });
 }
 function setInputValue(elementOrValue, value) {
     if (typeof elementOrValue === 'string') {
-        return pipe(tap((element) => setInputValueImmediately(element, elementOrValue)));
+        return tap((element) => setInputValueImmediately(element, elementOrValue));
     }
     else {
         setInputValueImmediately(elementOrValue, value);
@@ -349,6 +374,7 @@ function findRecursively(obj, options = {}) {
     const needSeen = new Set([{
             value: obj,
             depth: 0,
+            path: '',
         }]);
     const { matcher = falseStub, filter = trueStub, continueAfterGetterError = trueStub, stop = falseStub, minDepth = 1, maxDepth = Infinity, } = options;
     const pathRegExpCheck = options.pathRegExp
@@ -368,7 +394,7 @@ function findRecursively(obj, options = {}) {
             if (seenPathsForValue) {
                 // TODO windows or document
                 // TODO List of visited objects, but with the wrong path
-                const hasCircularPath = seenPathsForValue.some(path => options.path && (path === null || path === void 0 ? void 0 : path.includes(options.path)));
+                const hasCircularPath = seenPathsForValue.some(path => options.path.includes(path));
                 if (hasCircularPath) {
                     return;
                 }
@@ -415,12 +441,12 @@ function findRecursively(obj, options = {}) {
         const incrementalDepth = depth + 1;
         needSeen.delete(iterator.value);
         if (value instanceof Array) {
-            iterateArrayLike(value.entries(), (fieldIndex) => `${path || ''}[${fieldIndex}]`, incrementalDepth);
+            iterateArrayLike(value.entries(), (fieldIndex) => `${path}[${fieldIndex}]`, incrementalDepth);
         }
-        if (value instanceof Map) {
-            iterateArrayLike(value.entries(), (fieldIndex) => `${path || ''}{${fieldIndex}}`, incrementalDepth);
+        else if (value instanceof Map) {
+            iterateArrayLike(value.entries(), (fieldIndex) => `${path}{${fieldIndex}}`, incrementalDepth);
         }
-        if (value instanceof Set) {
+        else if (value instanceof Set) {
             for (const [fieldIndex, fieldValue] of [...value].entries()) {
                 checkForNeedSeen({
                     field: fieldValue,
@@ -467,5 +493,5 @@ function findRecursively(obj, options = {}) {
     return searched;
 }
 
-export { awaitElement, awaitRandomElement, clickElement, composeRestoreHistory, findRecursively, mergeMapAddedElements, mergeMapStringToggle, observeElementMutation, observePressedKeyboardButtons, observeQuerySelector, observeQuerySelectorAll, randomFromArray, removeElement, restoreHistory, setInputValue, urlChange$ };
+export { awaitElement, awaitElements, awaitRandomElement, clickElement, composeRestoreHistory, findRecursively, focusElement, mergeMapAddedElements, mergeMapStringToggle, observeElementMutation, observePressedKeyboardButtons, observeQuerySelector, observeQuerySelectorAll, randomFromArray, removeElement, restoreHistory, setInputValue, urlChange$ };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plohoj/html-editor",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "html-editor it's a tool for helping modification html elements",
   "repository": {
     "type": "git",
@@ -13,12 +13,13 @@
   "license": "ISC",
   "module": "./dist/index.js",
   "types": "./src/index.ts",
+  "type": "module",
   "dependencies": {
     "rxjs": "^7.0.0"
   },
   "devDependencies": {
-    "rollup": "^2.60.2",
-    "rollup-plugin-typescript2": "^0.31.1",
-    "typescript": "^4.5.2"
+    "rollup": "^3.9.1",
+    "rollup-plugin-typescript2": "^0.34.1",
+    "typescript": "^4.9.4"
   }
 }

package/src/index.ts

@@ -1,18 +1,22 @@
 // Observable
 export { awaitElement, IAwaitElementOptions } from "./observable/await-element";
+export { awaitElements } from './observable/await-elements';
 export { awaitRandomElement } from './observable/await-random-element';
 export { observeElementMutation } from "./observable/observe-mutation";
 export { IObservePressedKeyboardButtonsOptions, observePressedKeyboardButtons } from './observable/observe-pressed-keyboard-buttons';
 export { IObserveElementChange, IObserveQuerySelectorBaseOptions, IObserveQuerySelectorOptions, observeQuerySelector } from "./observable/observe-query-selector";
 export { IObservedElementsChanges, observeQuerySelectorAll } from "./observable/observe-query-selector-all";
 export { urlChange$ } from "./observable/url-change";
+
 // Operators
 export { clickElement } from "./operators/click-element";
+export { focusElement } from './operators/focus-element';
 export { mergeMapAddedElements } from "./operators/merge-map-added-elements";
 export { mergeMapStringToggle } from "./operators/merge-map-string-toggle";
 export { removeElement } from "./operators/remove-element";
 export { IRestoredHistoryOption, restoreHistory } from './operators/restore-history';
 export { setInputValue } from "./operators/set-input-value";
+
 // Utils
 export { ComposedRestoredHistoryOperatorsArray, ComposedRestoredHistoryOperatorsList, ComposedRestoredHistoryOperatorsRecord, ComposedRestoredHistoryOptionList, composeRestoreHistory, IComposedRestoredHistory } from './utils/compose-restore-history';
 export { findRecursively, FindRecursivelyContinue, FindRecursivelyMatcher, FindRecursivelyResult, IFindRecursivelyMatherOptions, IFindRecursivelyOptions } from "./utils/find-recursively";

package/src/observable/await-element.ts

@@ -20,11 +20,10 @@ export function awaitElement<T extends Element = Element>(
     query: string,
     options: IAwaitElementOptions<T> = {},
 ): Observable<T> {
-    return observeQuerySelector<T>(query, options)
-        .pipe(
-            debounceTime(options.debounceTime || 0, options.debounceScheduler),
-            filter(changes => !!changes.target),
-            map(changes => changes.target!),
-            take(1),
-        );
+    return observeQuerySelector<T>(query, options).pipe(
+        debounceTime(options.debounceTime || 0, options.debounceScheduler),
+        filter(changes => !!changes.target),
+        map(changes => changes.target!),
+        take(1),
+    );
 }

package/src/observable/await-elements.ts

@@ -0,0 +1,20 @@
+import { Observable } from "rxjs";
+import { debounceTime, filter, map, take } from "rxjs/operators";
+import { IAwaitElementOptions } from './await-element';
+import { observeQuerySelectorAll } from './observe-query-selector-all';
+
+/**
+ * Awaiting only first elements changes to match the selector and returns it as an Rx stream.
+ * The stream ends after any element is found / added.
+ */
+export function awaitElements<T extends Element = Element>(
+    query: string,
+    options: IAwaitElementOptions<T> = {},
+): Observable<T[]> {
+    return observeQuerySelectorAll<T>(query, options).pipe(
+        debounceTime(options.debounceTime || 0, options.debounceScheduler),
+        filter(changes => !!changes.target),
+        map(changes => changes.target!),
+        take(1),
+    );
+}

package/src/observable/await-random-element.ts

@@ -13,11 +13,10 @@ export function awaitRandomElement<T extends Element = Element>(
     query: string,
     options: IAwaitElementOptions<T> = {},
 ): Observable<T> {
-    return observeQuerySelectorAll<T>(query, options)
-        .pipe(
-            debounceTime(options.debounceTime || 0, options.debounceScheduler),
-            filter(changes => changes.target.length > 0),
-            map(changes => randomFromArray(changes.target)),
-            take(1)
-        );
+    return observeQuerySelectorAll<T>(query, options).pipe(
+        debounceTime(options.debounceTime || 0, options.debounceScheduler),
+        filter(changes => changes.target.length > 0),
+        map(changes => randomFromArray(changes.target)),
+        take(1)
+    );
 }

package/src/observable/observe-pressed-keyboard-buttons.ts

@@ -19,11 +19,10 @@ export function observePressedKeyboardButtons(
         filter((event: KeyboardEvent) => !set.has(event.key)),
         tap((event: KeyboardEvent) => set.add(event.key)),
     )
-    const keyRemove$ = fromEvent(target, 'keyup')
-        .pipe(
-            filter((event: KeyboardEvent) => set.has(event.key)),
-            tap((event: KeyboardEvent) => set.delete(event.key)),
-        );
+    const keyRemove$ = fromEvent(target, 'keyup').pipe(
+        filter((event: KeyboardEvent) => set.has(event.key)),
+        tap((event: KeyboardEvent) => set.delete(event.key)),
+    );
     return merge(
         addKey$,
         keyRemove$,

package/src/operators/click-element.ts

@@ -1,20 +1,21 @@
-import { MonoTypeOperatorFunction, pipe } from "rxjs";
+import { MonoTypeOperatorFunction } from "rxjs";
 import { tap } from "rxjs/operators";
 
 function clickElementImmediately(element: Element): void {
-    element.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+    if ('click' in element) {
+        (element as HTMLElement).click();
+    } else {
+        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)),
-        );
+        return tap((element: T) => clickElementImmediately(element));
     }
 }

package/src/operators/focus-element.ts

@@ -0,0 +1,22 @@
+import { MonoTypeOperatorFunction } from "rxjs";
+import { tap } from "rxjs/operators";
+
+function focusElementImmediately(element: Element): void {
+    if ('focus' in element) {
+        (element as HTMLElement).focus();
+    } else {
+        element.dispatchEvent(new FocusEvent('focus'));
+        element.dispatchEvent(new FocusEvent('focusin', {bubbles: true}));
+    }
+    console.log(`Focus: `, element);
+}
+
+export function focusElement<T extends Element>(): MonoTypeOperatorFunction<T>;
+export function focusElement<T extends Element>(element: T): void;
+export function focusElement<T extends Element>(element?: T): MonoTypeOperatorFunction<T> | void {
+    if (element) {
+        focusElementImmediately(element);
+    } else {
+        return tap((element: T) => focusElementImmediately(element));
+    }
+}

package/src/operators/remove-element.ts

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

package/src/operators/restore-history.ts

@@ -1,4 +1,4 @@
-import { concat, defer, EMPTY, ignoreElements, merge, MonoTypeOperatorFunction, NEVER, Observable, ObservableInput, of, share, take, takeUntil, tap } from 'rxjs';
+import { concat, defer, EMPTY, ignoreElements, merge, MonoTypeOperatorFunction, NEVER, Observable, ObservableInput, of, share, takeUntil, tap } from 'rxjs';
 
 export interface IRestoredHistoryOption<T = unknown> {
     getStory(): T | undefined;

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

@@ -1,10 +1,10 @@
-import { MonoTypeOperatorFunction, pipe } from "rxjs";
+import { MonoTypeOperatorFunction } 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 }));
+    element.dispatchEvent(new Event('input'));
     console.log(`Set value: `, { element, value });
 }
 
@@ -14,9 +14,7 @@ export function setInputValue(
     elementOrValue: HTMLInputElement | string, value?: string
 ): MonoTypeOperatorFunction<HTMLInputElement> | void {
     if (typeof elementOrValue === 'string') {
-        return pipe(
-            tap((element: HTMLInputElement) => setInputValueImmediately(element, elementOrValue))
-        );
+        return tap((element: HTMLInputElement) => setInputValueImmediately(element, elementOrValue));
     } else {
         setInputValueImmediately(elementOrValue, value!);
     }

package/src/utils/find-recursively.ts

@@ -3,7 +3,7 @@ import { falseStub, trueStub } from './stubs';
 export interface IFindRecursivelyMatherOptions {
     field?: unknown;
     value: unknown;
-    path?: string;
+    path: string;
     depth: number;
 }
 
@@ -58,11 +58,12 @@ export interface IFindRecursivelyOptions {
 /** Recursive search on entity fields */
 export function findRecursively(obj: unknown, options: IFindRecursivelyOptions = {}): FindRecursivelyResult {
     /** {value: path[]} */
-    const seen = new Map<unknown, Array<string | undefined>>();
+    const seen = new Map<unknown, Array<string>>();
     const searched: Record<string, unknown> = {};
     const needSeen = new Set<IFindRecursivelyMatherOptions>([{
         value: obj,
         depth: 0,
+        path: '',
     }]);
     const {
         matcher = falseStub,
@@ -86,11 +87,11 @@ export function findRecursively(obj: unknown, options: IFindRecursivelyOptions =
         }
         const isPrimitiveOrFunction = options.value === null || typeof options.value !== 'object';
         if (!isPrimitiveOrFunction) {
-            const seenPathsForValue: Array<string | undefined> | undefined = seen.get(options.value);
+            const seenPathsForValue: Array<string> | undefined = seen.get(options.value);
             if (seenPathsForValue) {
                 // TODO windows or document
                 // TODO List of visited objects, but with the wrong path
-                const hasCircularPath = seenPathsForValue.some(path => options.path && path?.includes(options.path));
+                const hasCircularPath = seenPathsForValue.some(path => options.path.includes(path));
                 if (hasCircularPath) {
                     return;
                 }
@@ -145,16 +146,16 @@ export function findRecursively(obj: unknown, options: IFindRecursivelyOptions =
         if (value instanceof Array) {
             iterateArrayLike(
                 (value as unknown[]).entries(),
-                (fieldIndex) => `${path || ''}[${fieldIndex}]`,
+                (fieldIndex) => `${path}[${fieldIndex}]`,
                 incrementalDepth,
             );
-        } if (value instanceof Map) {
+        } else if (value instanceof Map) {
             iterateArrayLike(
                 (value as Map<unknown, unknown>).entries(),
-                (fieldIndex) => `${path || ''}{${fieldIndex}}`,
+                (fieldIndex) => `${path}{${fieldIndex}}`,
                 incrementalDepth,
             );
-        } if (value instanceof Set) {
+        } else if (value instanceof Set) {
             for (const [fieldIndex, fieldValue] of ([...value] as unknown[]).entries()) {
                 checkForNeedSeen({
                     field: fieldValue,