@plohoj/html-editor 0.0.7 → 0.1.0

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

@@ -1,77 +1,120 @@
-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 => {
-                const added = assuredArray(changes.added);
-                if (added.length === 0) {
-                    return EMPTY;
-                }
-                const addedObservers = added.map(project);
-                return merge(...addedObservers);
-            })
-        );
-    }
-    return source$ => source$.pipe(
-        connect(connectedSource$ => connectedSource$.pipe(
-            mergeMap(changes => {
-                const added = assuredArray(changes.added);
-                if (added.length === 0) {
-                    return EMPTY;
-                }
-                
-                const 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);
-            })
-        )),
-    );
-}
+import { connect, EMPTY, filter, merge, mergeMap, Observable, OperatorFunction, takeUntil } from "rxjs";
+import type { observeQuerySelector, IObservedElementChange, IObserveQuerySelectorOptions } from "../observable/observe-query-selector";
+import type { observeQuerySelectorAll, IObservedElementsChanges } from "../observable/observe-query-selector-all";
+
+export interface IMergeMapElementChangeOptions<E extends Element = Element, O = unknown> {
+    /**
+   * The function that will be called to generate a new stream
+   * for each element discovered the first time after it is added.
+   */
+  project: (element: E) => Observable<O>;
+  /** 
+   * Determines when a stream from the {@link project} function should be terminated:
+   * * `'removed'`: As soon as the element is removed.
+   * * `'added'`: After the element is removed and (new one will discovered or have already been discovered before).
+   * * `'always'`: streams will not be interrupted, after the element is removed.
+   *
+   * @default 'removed'
+   */
+  takeUntil?: 'removed' | 'added' | 'always';
+}
+
+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.
+ * 
+ * It can be more convenient to use the {@link IObserveQuerySelectorOptions.project | project} option in
+ * {@link observeQuerySelectorAll} and {@link observeQuerySelector} functions.
+ */
+export function mergeMapAddedElements<E extends Element, O = unknown>(
+  options: IMergeMapElementChangeOptions<E, O>,
+): OperatorFunction<IObservedElementsChanges<E> | IObservedElementChange<E>, O>;
+export function mergeMapAddedElements<E extends Element, O = unknown>(
+  project: (element: E) => Observable<O>,
+  options?: Omit<IMergeMapElementChangeOptions, 'project'>,
+): OperatorFunction<IObservedElementsChanges<E> | IObservedElementChange<E>, O>;
+export function mergeMapAddedElements<E extends Element, O = unknown>(
+  projectOrOptions: ((element: E) => Observable<O>) | IMergeMapElementChangeOptions<E, O>,
+  options?: Omit<IMergeMapElementChangeOptions, 'project'>,
+): OperatorFunction<IObservedElementsChanges<E> | IObservedElementChange<E>, O> {
+  // #region Options parsing
+  let project: (element: E) => Observable<O>;
+  let stableOptions: Omit<IMergeMapElementChangeOptions, 'project'>;
+  if (typeof projectOrOptions === 'function') {
+    project = projectOrOptions;
+    stableOptions = options || {};
+  } else {
+    project = projectOrOptions.project;
+    stableOptions = projectOrOptions;
+  }
+  const { takeUntil: takeUntilOption = 'removed' } = stableOptions;
+  // #endregion
+
+  if (takeUntilOption === 'always') {
+    return source$ => source$.pipe(
+      mergeMap(changes => {
+        const added = assuredArray(changes.added);
+        if (added.length === 0) {
+          return EMPTY;
+        }
+        const addedObservers = added.map(project);
+        return merge(...addedObservers);
+      })
+    );
+  }
+  return source$ => source$.pipe(
+    connect(connectedSource$ =>connectedSource$.pipe(
+      mergeMap(changes => {
+        const added = assuredArray(changes.added);
+        if (added.length === 0) {
+          return EMPTY;
+        }
+
+        const addedObservers = added.map(addedElement => {
+          let takeUntil$: Observable<unknown> | undefined;
+          if (takeUntilOption === 'removed') {
+            takeUntil$ = connectedSource$.pipe(
+              filter(connectedChanges => connectedChanges.removed instanceof Array
+                ? connectedChanges.removed.indexOf(addedElement) !== -1
+                : connectedChanges.removed === addedElement
+              ),
+            );
+          } else {
+            let wasRemoved = false
+            takeUntil$ = connectedSource$.pipe(
+              filter(connectedChanges => {
+                if (!wasRemoved) {
+                  wasRemoved = connectedChanges.removed instanceof Array
+                    ? connectedChanges.removed.indexOf(addedElement) !== -1
+                    : connectedChanges.removed === addedElement;
+                }
+                if (wasRemoved) {
+                  const hasTarget = connectedChanges.target instanceof Array
+                    ? connectedChanges.target.indexOf(addedElement) !== -1
+                    : connectedChanges.target === addedElement;
+                  return hasTarget;
+                }
+                return false;
+              })
+            );
+          }
+
+          return project(addedElement).pipe(
+            takeUntil(takeUntil$),
+          );
+        });
+
+        return merge(...addedObservers);
+      })
+    )),
+  );
+}

package/src/operators/merge-map-by-condition.ts

@@ -0,0 +1,124 @@
+import { connect, EMPTY, filter, map, mergeMap, Observable, of, OperatorFunction, takeUntil } from "rxjs";
+
+export interface IMergeMapByConditionOptions<I = unknown, O = unknown> {
+  /** The condition that the source must satisfy */
+  condition: (value: I) => boolean;
+  /**
+   * The function that will be called to generate a new stream
+   * if the source changes and satisfies the {@link condition}.
+   */
+  project?: (source: I) => Observable<O>;
+  /** 
+   * Determines when the {@link project} function will be called to create a new stream:
+   * * `'all'`: For each source changes that satisfies the {@link condition}.
+   * * `'new'`: Only if the previous source failed the {@link condition} check.
+   *
+   * @default 'new'
+   */
+  takeFor?: 'all' | 'new';
+  /** 
+   * Determines when a stream from the {@link project} function should be terminated:
+   * * `'fail'`: As soon as the source failed the {@link condition} check.
+   * * `'pass'`: After the source failed the {@link condition} check and then successfully passes again.
+   * * `'always'`: It does  not depend on whether the source passes the {@link condition} check or not.
+   *
+   * @default 'fail'
+   */
+  takeUntil?: 'fail' | 'pass' | 'always';
+}
+
+/** The operator creates a separate stream when the source is validated. */
+export function mergeMapByCondition<I>(
+  options: IMergeMapByConditionOptions<I> & { project?: undefined },
+): OperatorFunction<I, I>;
+export function mergeMapByCondition<I, O>(
+  options: IMergeMapByConditionOptions<I, O>,
+): OperatorFunction<I, O>;
+export function mergeMapByCondition<I>(
+  condition: (value: I) => boolean,
+  project?: undefined,
+  options?: Omit<IMergeMapByConditionOptions, 'condition' | 'project'>,
+): OperatorFunction<I, I>;
+export function mergeMapByCondition<I, O>(
+  condition: (value: I) => boolean,
+  project: (source: I) => Observable<O>,
+  options?: Omit<IMergeMapByConditionOptions, 'condition' | 'project'>,
+): OperatorFunction<I, O>;
+export function mergeMapByCondition<I, O>(
+  conditionOrOptions: ((value: I) => boolean) | IMergeMapByConditionOptions<I, O>,
+  project?: ((source: I) => Observable<O>),
+  options?: Omit<IMergeMapByConditionOptions, 'condition' | 'project'>,
+): OperatorFunction<I, I | O> {
+  // #region Options parsing
+  let stableOptions: Omit<IMergeMapByConditionOptions, 'condition' | 'project'>;
+  let conditionFn: (value: I) => boolean;
+  let stableProject: ((source: I) => Observable<O>) | undefined;
+  if ('condition' in conditionOrOptions) {
+    stableOptions = conditionOrOptions;
+    conditionFn = conditionOrOptions.condition;
+    stableProject = conditionOrOptions.project;
+  } else {
+    conditionFn = conditionOrOptions;
+    stableOptions = options || {};
+    stableProject = project;
+  }
+  const {
+    takeFor = 'new',
+    takeUntil: takeUntilOption = 'fail',
+  } = stableOptions;
+  // #endregion
+
+  let isPrevConditionPass = false;
+
+  return source$ => source$.pipe(
+    map(source => ({ source, isConditionPassed: conditionFn(source) })),
+    connect(connectedSource$ => {
+      let takeUntil$: Observable<unknown> | undefined;
+      if (takeUntilOption === 'fail') {
+        takeUntil$ = connectedSource$.pipe(
+          filter(({ isConditionPassed }) => isConditionPassed)
+        );
+      } else if (takeUntilOption === 'pass') {
+        let wasFailed = false
+        takeUntil$ = connectedSource$.pipe(
+          filter(({ isConditionPassed }) => {
+            if (isConditionPassed) {
+              if (wasFailed) {
+                return true;
+              }
+            } else {
+              wasFailed = true;
+            }
+            return false;
+          })
+        );
+      }
+
+      return connectedSource$.pipe( 
+        mergeMap(({ source, isConditionPassed }) => {
+          if (isConditionPassed) {
+            const isCreateNewProject = takeFor === 'all' || !isPrevConditionPass;
+            isPrevConditionPass = true;
+    
+            if (isCreateNewProject) {
+              if (!stableProject) {
+                return of(source);
+              }
+    
+              let project$ = stableProject(source);
+              if (takeUntil$) {
+                project$ = project$.pipe(
+                  takeUntil(takeUntil$)
+                )
+              }
+              return project$;
+            }
+          } else {
+            isPrevConditionPass = false;
+          }
+          return EMPTY;
+        }),
+      );
+    }),
+  );
+}

package/src/operators/merge-map-by-string-condition.ts

@@ -0,0 +1,57 @@
+import { Observable, OperatorFunction } from "rxjs";
+import { IMergeMapByConditionOptions, mergeMapByCondition } from './merge-map-by-condition';
+import type { IObserveUrlChangesOptions, observeUrlChanges } from '../observable/observe-url-changes';
+
+export interface IMergeMapByStringConditionOptions<O = unknown>
+  extends Omit<IMergeMapByConditionOptions<string, O>, 'condition'> {
+
+  /** The condition that the source string must satisfy */
+  condition: RegExp | ((value: string) => boolean);
+}
+
+export function getStringConditionFunction(
+  condition: RegExp | ((value: string) => boolean)
+): (value: string) => boolean {
+  return typeof condition === 'function' ? condition : (value: string) => condition.test(value);
+}
+
+/**
+ * The operator creates a separate stream when the source string is validated.
+ * 
+ * It can be more convenient to use the {@link IObserveUrlChangesOptions.project | project} option in
+ * {@link observeUrlChanges} function.
+ */
+export function mergeMapStringCondition(
+  options: IMergeMapByStringConditionOptions & { project?: undefined },
+): OperatorFunction<string, string>;
+export function mergeMapStringCondition<O>(
+  options: IMergeMapByStringConditionOptions<O>,
+): OperatorFunction<string, O>;
+export function mergeMapStringCondition(
+  condition: RegExp | ((value: string) => boolean),
+  project?: undefined,
+  options?: Omit<IMergeMapByStringConditionOptions, 'condition' | 'project'>,
+): OperatorFunction<string, string>;
+export function mergeMapStringCondition<O>(
+  condition: RegExp | ((value: string) => boolean),
+  project: (url: string) => Observable<O>,
+  options?: Omit<IMergeMapByStringConditionOptions, 'condition' | 'project'>,
+): OperatorFunction<string, O>;
+export function mergeMapStringCondition<O>(
+  conditionOrOptions: RegExp | ((value: string) => boolean) | IMergeMapByStringConditionOptions<O>,
+  project?: ((url: string) => Observable<O>),
+  options?: Omit<IMergeMapByStringConditionOptions, 'condition' | 'project'>,
+): OperatorFunction<string, O | string> {
+  if ('condition' in conditionOrOptions) {
+    return mergeMapByCondition({
+      ...conditionOrOptions,
+      condition: getStringConditionFunction(conditionOrOptions.condition),
+    });
+  } else {
+    return mergeMapByCondition({
+      ...options,
+      condition: getStringConditionFunction(conditionOrOptions),
+      project,
+    });
+  }
+}

package/src/operators/remove-element.ts

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

package/src/operators/restore-history.ts

@@ -1,51 +1,53 @@
-import { concat, defer, EMPTY, ignoreElements, merge, MonoTypeOperatorFunction, NEVER, Observable, ObservableInput, of, share, takeUntil, tap } from 'rxjs';
-
-export interface IRestoredHistoryOption<T = unknown> {
-    getStory(): T | undefined;
-    setStory(value: T): void;
-    removeStory(): void;
-    cancelRestore?: () => ObservableInput<unknown>;
-};
-
-export function restoreHistory<T>(
-    options: IRestoredHistoryOption<T>
-): MonoTypeOperatorFunction<T> {
-    return (source$: Observable<T>) => {
-        let hasStory = false;
-        const observeCancel$ = options.cancelRestore
-            ? defer(() => options.cancelRestore!())
-                .pipe(
-                    tap(() => {
-                        if (hasStory) {
-                            options.removeStory();
-                        }
-                    }),
-                    share(),
-                )
-            : NEVER;
-        const story$ = concat(
-            defer(() => {
-                const story = options.getStory();
-                if (story === undefined) {
-                    return EMPTY;
-                }
-                hasStory = true;
-                let rested$ = of(story);
-                if (options.cancelRestore) {
-                    rested$ = rested$.pipe(takeUntil(observeCancel$))
-                }
-                return rested$;
-            }),
-            source$.pipe(
-                tap((data: T) => {
-                    options.setStory(data);
-                    hasStory = true;
-                }),
-            ),
-        );
-        return merge(
-            story$,
-            observeCancel$.pipe(ignoreElements())
-        );
-    }
-}
+import { concat, defer, EMPTY, ignoreElements, merge, MonoTypeOperatorFunction, NEVER, Observable, ObservableInput, of, share, takeUntil, tap } from 'rxjs';
+
+export interface IRestoredHistoryOption<T = unknown> {
+    getStory(): T | undefined;
+    /** Setting a new value that was thrown by the thread */
+    setStory(value: T): void;
+    /** Called if {@link cancelRestore} threw an event */
+    removeStory(): void;
+    cancelRestore?: () => ObservableInput<unknown>;
+};
+
+export function restoreHistory<T>(
+    options: IRestoredHistoryOption<T>
+): MonoTypeOperatorFunction<T> {
+    return (source$: Observable<T>) => {
+        let hasStory = false;
+        const observeCancel$ = options.cancelRestore
+            ? defer(() => options.cancelRestore!())
+                .pipe(
+                    tap(() => {
+                        if (hasStory) {
+                            options.removeStory();
+                        }
+                    }),
+                    share(),
+                )
+            : NEVER;
+        const story$ = concat(
+            defer(() => {
+                const story = options.getStory();
+                if (story === undefined) {
+                    return EMPTY;
+                }
+                hasStory = true;
+                let rested$ = of(story);
+                if (options.cancelRestore) {
+                    rested$ = rested$.pipe(takeUntil(observeCancel$))
+                }
+                return rested$;
+            }),
+            source$.pipe(
+                tap((data: T) => {
+                    options.setStory(data);
+                    hasStory = true;
+                }),
+            ),
+        );
+        return merge(
+            story$,
+            observeCancel$.pipe(ignoreElements())
+        );
+    }
+}

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

@@ -1,21 +1,20 @@
-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'));
-    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 tap((element: HTMLInputElement) => setInputValueImmediately(element, elementOrValue));
-    } else {
-        setInputValueImmediately(elementOrValue, value!);
-    }
-}
+import { MonoTypeOperatorFunction, tap } from "rxjs";
+
+function setInputValueImmediately(element: HTMLInputElement, value: string): void {
+    element.value = value;
+    element.focus();
+    element.dispatchEvent(new Event('input'));
+    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 tap((element: HTMLInputElement) => setInputValueImmediately(element, elementOrValue));
+    } else {
+        setInputValueImmediately(elementOrValue, value!);
+    }
+}