rxjs#ReplaySubject TypeScript Examples

export class RefreshingReplaySubject<T> extends ReplaySubject<T> {

  private providerCallback: () => Observable<T>;
  private lastProviderTrigger: number;
  private readonly windowTime;

  constructor(providerCallback: () => Observable<T>, windowTime?: number) {
    // Cache exactly 1 item forever in the ReplaySubject
    super(1);
    this.windowTime = windowTime || 60000;
    this.lastProviderTrigger = 0;
    this.providerCallback = providerCallback;
  }

  public _subscribe(subscriber: Subscriber<T>): Subscription {
    // Hook into the subscribe method to trigger refreshing
    this._triggerProviderIfRequired();
    return super._subscribe(subscriber);
  }

  protected _triggerProviderIfRequired() {
    const now = this._getNow();
    if ((now - this.lastProviderTrigger) > this.windowTime) {
      // Data considered stale, provider triggering required...
      this.lastProviderTrigger = now;
      this.providerCallback().pipe(first()).subscribe((t: T) => this.next(t));
    }
  }
}

async createOnBody<T = any>(component: Type<T>): Promise<{
    component: ComponentRef<T>;
    open: () => void;
    close: () => Promise<any>,
    destroyed$: ReplaySubject<void>
  }> {
    const componentRef = this.componentFactoryResolver
      .resolveComponentFactory(component)
      .create(this.injector);

    const responseObject = {
      destroyed$: new ReplaySubject<void>(),
      close: () => {
        return new Promise(resolve => {
          this.ngZone.run(() => {
            this.appRef.detachView(componentRef.hostView);
            componentRef.onDestroy(() => {
              responseObject.destroyed$.next();
              responseObject.destroyed$.complete();
              resolve(true);
            });
            componentRef.destroy();
          });
        });
      },
      open: () => {
        this.ngZone.run(() => {
          this.appRef.attachView(componentRef.hostView);

          const rootNode = (componentRef.hostView as EmbeddedViewRef<ApplicationRef>).rootNodes[0] as HTMLElement;

          this.renderer.appendChild(this.document.body, rootNode);
        });
      },
      component: componentRef,
    };

    return responseObject;
  }

// 可以传入一个基准point，返回数据结构{ currentPoint, 变大or变小or没变，比基准point大or小or一样 }
  public getPoint(): ReplaySubject<{ currentPoint: DaBreakpoint; change: number; compare: { [key: string]: number } }> {
    if (!this.currentPoint) {
      this.currentPoint = this.getCurrentPoint()!;
      this.pointChangeSub.next({
        currentPoint: this.currentPoint,
        change: 0,
        compare: this.comparePoints(this.currentPoint),
      });

      fromEvent(window, 'resize')
        .pipe(takeUntil(this.destroy$))
        .subscribe(() => {
          const tempPoint = this.getCurrentPoint()!;
          if (this.currentPoint !== tempPoint) {
            const change = this.comparePoints(tempPoint, this.currentPoint) as number;
            this.currentPoint = tempPoint;

            this.pointChangeSub.next({
              currentPoint: this.currentPoint,
              change: change,
              compare: this.comparePoints(tempPoint),
            });
          }
        });
    }

    return this.pointChangeSub;
  }

publishRef = <T>(bufferSizeOrConfig: PublishRefConfig<T> = {}) => {
  const {
    bufferSize = 1,
    windowTime,
    timestampProvider,
    connector = () =>
      new ReplaySubject(bufferSize, windowTime, timestampProvider),
    resetOnError = false,
    resetOnComplete = false,
    resetOnRefCountZero = true,
  } = typeof bufferSizeOrConfig === 'number'
    ? ({
        bufferSize: bufferSizeOrConfig,
      } as Exclude<PublishRefConfig<T>, number>)
    : bufferSizeOrConfig;
  return share<T>({
    connector,
    resetOnError,
    resetOnComplete,
    resetOnRefCountZero,
  });
}

/**
 * Creates an observable view model and query subject. The view model will
 * update when the query emits/changes.
 */
export function createViewModel(
  ref: firebase.database.Reference,
  canDoRealtime$: Observable<boolean>
) {
  const query = new ReplaySubject<QueryParams>(1);
  query.next({ limit: DEFAULT_PAGE_SIZE });
  const viewModel$ = query.pipe(
    switchMap((queryParams) => {
      return canDoRealtime$.pipe(
        concatMap((realtime) =>
          realtime
            ? realtimeToViewModel(ref, queryParams)
            : nonRealtimeToViewModel(ref, queryParams)
        )
      );
    })
  );
  return { query, viewModel$ };
}

export function beforeEach<T, V>(valueBefore: V) {
  return (source$: Observable<T>) =>
    defer(() => {
      const subject$ = new ReplaySubject<V | T>(1);
      source$
        .pipe(
          // Force the source values emitted asynchronizingly.
          delay(0)
        )
        .subscribe({
          next: v => {
            subject$.next(valueBefore);
            subject$.next(v);
          },
          error: (err: unknown) => subject$.error(err),
          complete: () => subject$.complete(),
        });
      return subject$.pipe(
        // Make sure the values emitted asynchronizingly.
        concatMap(v => of(v).pipe(delay(0)))
      );
    });
}

/**
 * 1. Caches the last value emitted to give to new subscribers (without running any upstream pipe operators)
 * 2. Manages all subscribers directly, without passing subscriptions up the stream.
 *
 * This is very similar to `shareReplay(1)`, except that once all subscribers unsubscribe this also unsubscribes from the upstream observable.
 *
 * ```ts
 * const source = new BehaviorSubject(1000);
 * const result = source.pipe(expensiveComputation(), cache());
 * source.subscribe(); // expensiveComputation(1000) runs
 * source.subscribe(); // the cached result is used
 * source.next(2000); // expensiveComputation(2000) runs once, emitted to both subscribers
 * ```
 */
export function cache<T>(): MonoTypeOperatorFunction<T> {
  return (source: Observable<T>): Observable<T> => {
    let middleMan: ReplaySubject<T> | undefined;
    let upstreamSubscription: Subscription;
    return new Observable<T>((subscriber) => {
      if (!middleMan) {
        middleMan = new ReplaySubject<T>(1);
        upstreamSubscription = source.subscribe(middleMan);
      }

      const subscription = middleMan.subscribe(subscriber);

      // teardown logic
      return (): void => {
        subscription.unsubscribe();
        if (middleMan!.observers.length === 0) {
          upstreamSubscription.unsubscribe();
          middleMan = undefined;
        }
      };
    });
  };
}

/**
     * Given a combined aggregation configuration and a range, this method searches for the most 
     * adapted aggregation scale (years, months, weeks or days) and updates the data if necessary.
     * @param config 
     * @param range 
     * @param iTimeseries 
     */
    updateCombinedAggregation(config: TimelineCombinedAggregations, range: [Date, Date], timeseries$: ReplaySubject<TimelineSeries>) {
        const nmonths = d3.timeMonth.count(range[0], range[1]);

        if(!config.maxNMonths || config.maxNMonths.length !== config.aggregations.length) {
            console.error(config);
            throw new Error("maxNMonths and aggregations must have the same number of items");
        }

        // Find the aggregation with min maxNMonths with maxNMonths >= nmonths
        let jMin;
        config.maxNMonths.forEach((maxNMonths, j) => {
            if(maxNMonths >= nmonths && (jMin === undefined || maxNMonths < config.maxNMonths[jMin] || config.maxNMonths[jMin] === -1) 
                || maxNMonths === -1 && jMin === undefined){
                jMin = j;
            }
        });

        const bestAggregation = config.aggregations[jMin];

        if(bestAggregation !== config.current 
            || this.currentRange && (range[0] < this.currentRange[0] || range[1] > this.currentRange[1])) {

            config.current = bestAggregation;
            this.getTimeseries(bestAggregation, range).subscribe({
                next: d => timeseries$.next(d),
                error: err => timeseries$.error(err)
            });
        }

    }

export function createExercise(exerciseNumber: number) {
    if (!exercisesCache[exerciseNumber]) {
        const localStorageKey = `exercise.${exerciseNumber}`;
        const exerciseOriginalFiles = exerciseStructures[exerciseNumber];

        let files = localData.get(localStorageKey, {} as FileContents);

        const saveToLocalStorage = debounce(() => {
            localData.set(localStorageKey, files);
        }, 500);

        const subject = new ReplaySubject<FileTree>(1);
        subject.next(createModifiedFileTree(files, exerciseOriginalFiles));

        exercisesCache[exerciseNumber] = {
            observable$: subject,
            update(filename: string, code: string) {
                files = {...files, [filename]: code};
                saveToLocalStorage();
                subject.next(createModifiedFileTree(files, exerciseOriginalFiles));
            },
            revert(filename: string) {
                files = {...files};
                delete files[filename];
                saveToLocalStorage();
                subject.next(createModifiedFileTree(files, exerciseOriginalFiles));
            }
        };
    }

    return exercisesCache[exerciseNumber];
}

connectedPort$: ReplaySubject<chrome.runtime.Port> = new ReplaySubject<chrome.runtime.Port>();

private _themeChange = new ReplaySubject<any>(1);

// Component creation
  // ----------------------------------------------------------------------------------------------------------------

  /**
   * Takes a hook along with a DOM node and loads the specified component class (normal or lazy-loaded).
   * Returns a subject the emits the component class when ready.
   *
   * @param componentConfig - The componentConfig from HookData
   */
  loadComponentClass(componentConfig: ComponentConfig): ReplaySubject<new(...args: any[]) => any> {
    const componentClassLoaded: ReplaySubject<new(...args: any[]) => any> = new ReplaySubject(1);

    // a) If is normal class
    if (componentConfig.hasOwnProperty('prototype')) {
      componentClassLoaded.next(componentConfig as (new(...args: any[]) => any));

    // b) If is LazyLoadComponentConfig
    } else if (componentConfig.hasOwnProperty('importPromise') && componentConfig.hasOwnProperty('importName')) {
      // Catch typical importPromise error
      if ((componentConfig as LazyLoadComponentConfig).importPromise instanceof Promise) {
        throw Error(`When lazy-loading a component, the "importPromise"-field must contain a function returning the import-promise, but it contained the promise itself.`);
      }
      // Warning if using old Angular version
      const ngVersion = this.platform.getNgVersion();

      if (ngVersion < 9 && isDevMode()) {
          console.warn('It seems you are trying to use lazy-loaded-components with an Angular version older than 9. Please note that this functionality requires the new Ivy renderer to be enabled.');
      }

      (componentConfig as LazyLoadComponentConfig).importPromise().then((m) =>  {
        const importName = (componentConfig as LazyLoadComponentConfig).importName;
        const compClass = m.hasOwnProperty(importName) ? m[importName] : m['default'];
        componentClassLoaded.next(compClass);
      });

    } else {
      throw Error('The "component" property of a returned HookData object must either contain the component class or a LazyLoadComponentConfig');
    }

    return componentClassLoaded;
  }

// Use a ReplaySubject to share previous values with subscribers
  // and pump new values into the `paramMap` observable
  private subject = new ReplaySubject<ParamMap>();

private ngUnsubscribe = new ReplaySubject<true>();

private readonly markdown$ = new ReplaySubject<string>();

private _appChange$ = new ReplaySubject<void>(1);

private readonly _appUpdateSrc = new ReplaySubject<AppUpdateEvent>();

private _onProgressbarVisibilityChange: ReplaySubject<boolean> = new ReplaySubject<boolean>();

directive$$ = new ReplaySubject<AutoCompleteDirective>(1);

private appStateSubject$ = new ReplaySubject<TAppState>(1);

private offer: Subject<OfferWithHex|null> = new ReplaySubject()

/**
   * choices that might be loaded async, initialized with current value and its potentially delayed toString value
   */
  choices: ReplaySubject<Choice[]>;

selectionSubject = new ReplaySubject<MatAutocompleteSelectedEvent>(1)

ranking = new ReplaySubject<any[]>(1);

private _analyzersList$: ReplaySubject<IAnalyzersList> = new ReplaySubject(1);

public serviceInitializedSuccessfully$ = new ReplaySubject<boolean>(1);

singleSpaPropsSubject = new ReplaySubject<SingleSpaProps>(1)

// Use a ReplaySubject to share previous values with subscribers
    // and pump new values into the `paramMap` observable
    private subject = new ReplaySubject<ParamMap>();

private readonly proof$ = new ReplaySubject<Proof>(1);