react-rx 2.1.3 → 3.0.0-0

package/dist/esm/__tests__/strictmode.test.js

@@ -13,7 +13,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
             if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
             if (y = 0, t) op = [op[0] & 2, t.value];
             switch (op[0]) {
@@ -35,18 +35,19 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 import { BehaviorSubject, Observable } from 'rxjs';
-import { useObservable } from '../useObservable';
+import { useMemoObservable, useObservable } from '../useObservable';
 import { createElement, Fragment, StrictMode, useEffect } from 'react';
 import { act, render } from '@testing-library/react';
 import { useAsObservable } from '../useAsObservable';
+import { test, expect } from 'vitest';
 var wait = function (ms) { return new Promise(function (resolve) { return setTimeout(resolve, ms); }); };
 // NOTE: Jest runs NODE_ENV=test by default, which enables development flags for React
 test('Strict mode should trigger double mount effects and re-renders', function () { return __awaiter(void 0, void 0, void 0, function () {
     function ObservableComponent() {
+        var observedValue = useObservable(observable, 0);
         useEffect(function () {
             mountCount++;
         }, []);
-        var observedValue = useObservable(observable);
         returnedValues.push(observedValue);
         return createElement(Fragment, null, observedValue);
     }
@@ -59,7 +60,7 @@ test('Strict mode should trigger double mount effects and re-renders', function
                 returnedValues = [];
                 mountCount = 0;
                 rerender = render(createElement(StrictMode, null, createElement(ObservableComponent))).rerender;
-                expect(mountCount).toEqual(2);
+                expect(mountCount).toBe(2);
                 expect(returnedValues).toEqual([0, 0]);
                 return [4 /*yield*/, wait(10)];
             case 1:
@@ -74,11 +75,14 @@ test('Strict mode should trigger double mount effects and re-renders', function
     });
 }); });
 test('Strict mode should unsubscribe the source observable on unmount', function () {
-    var subscribed = false;
+    var subscribed = [];
+    var unsubscribed = [];
+    var nextId = 0;
     var observable = new Observable(function () {
-        subscribed = true;
+        var id = nextId++;
+        subscribed.push(id);
         return function () {
-            subscribed = false;
+            unsubscribed.push(id);
         };
     });
     function ObservableComponent() {
@@ -86,14 +90,35 @@ test('Strict mode should unsubscribe the source observable on unmount', function
         return createElement(Fragment, null);
     }
     var rerender = render(createElement(StrictMode, null, createElement(ObservableComponent))).rerender;
-    expect(subscribed).toBe(true);
+    expect(subscribed).toEqual([0, 1]);
+    rerender(createElement(StrictMode, null, createElement('div')));
+    expect(unsubscribed).toEqual([0, 1]);
+});
+test('useMemoObservable should unsubscribe the source observable on unmount', function () {
+    var subscribed = [];
+    var unsubscribed = [];
+    var nextId = 0;
+    function ObservableComponent() {
+        useMemoObservable(function () {
+            return new Observable(function () {
+                var id = nextId++;
+                subscribed.push(id);
+                return function () {
+                    unsubscribed.push(id);
+                };
+            });
+        }, []);
+        return createElement(Fragment, null);
+    }
+    var rerender = render(createElement(StrictMode, null, createElement(ObservableComponent))).rerender;
+    expect(subscribed).toEqual([0, 1]);
     rerender(createElement(StrictMode, null, createElement('div')));
-    expect(subscribed).toBe(false);
+    expect(unsubscribed).toEqual([0, 1]);
 });
 test('useAsObservable should work in strict mode', function () { return __awaiter(void 0, void 0, void 0, function () {
     function ObservableComponent(props) {
         var count$ = useAsObservable(props.count);
-        var count = useObservable(count$);
+        var count = useObservable(count$, props.count);
         returnedValues.push(count);
         return createElement(Fragment, null, 'ok');
     }

package/dist/esm/__tests__/useAsObservable.test.js

@@ -1,6 +1,7 @@
 import { useAsObservable } from '../useAsObservable';
 import React from 'react';
 import { renderHook } from '@testing-library/react';
+import { test, expect } from 'vitest';
 test('the returned observable should receive a new value when component is rendered with a new value', function () {
     var receivedValues = [];
     var _a = renderHook(function (props) {

package/dist/esm/__tests__/useObservable.test.js

@@ -3,6 +3,7 @@ import { useObservable } from '../useObservable';
 import { asyncScheduler, Observable, of, scheduled, Subject, timer } from 'rxjs';
 import { mapTo } from 'rxjs/operators';
 import { createElement, Fragment } from 'react';
+import { test, expect } from 'vitest';
 test('should subscribe immediately on component mount and unsubscribe on component unmount', function () {
     var subscribed = false;
     var observable = new Observable(function () {

package/dist/esm/reactiveComponent.d.ts

@@ -1,8 +1,8 @@
 import { Observable } from 'rxjs';
 import { FunctionComponent, ReactNode, Ref } from 'react';
-declare type Component<Props> = (input$: Observable<Props>) => Observable<ReactNode>;
+type Component<Props> = (input$: Observable<Props>) => Observable<ReactNode>;
 export declare function reactiveComponent<Props>(observable: Observable<Props>): FunctionComponent<Props>;
 export declare function reactiveComponent<Props>(component: Component<Props>): FunctionComponent<Props>;
-declare type ForwardRefComponent<RefType, Props> = (input$: Observable<Props>, ref: Ref<RefType>) => Observable<ReactNode>;
+type ForwardRefComponent<RefType, Props> = (input$: Observable<Props>, ref: Ref<RefType>) => Observable<ReactNode>;
 export declare function forwardRef<RefType, Props = {}>(component: ForwardRefComponent<RefType, Props>): import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<Props> & import("react").RefAttributes<RefType>>;
 export {};

package/dist/esm/useObservable.js

@@ -1,58 +1,26 @@
-import { useEffect, useMemo, useRef } from 'react';
-import { useSyncExternalStore } from 'use-sync-external-store/shim';
-import { shareReplay, tap } from 'rxjs/operators';
+import { useEffect, useRef, useState } from 'react';
+import { tap } from 'rxjs/operators';
 function getValue(value) {
     return typeof value === 'function' ? value() : value;
 }
-var cache = new WeakMap();
-function getOrCreateStore(inputObservable, initialValue) {
-    if (!cache.has(inputObservable)) {
-        var entry_1 = { currentValue: initialValue };
-        entry_1.observable = inputObservable.pipe(shareReplay({ refCount: true, bufferSize: 1 }), tap(function (value) { return (entry_1.currentValue = value); }));
-        // Eagerly subscribe to sync set `entry.currentValue` to what the observable returns
-        entry_1.subscription = entry_1.observable.subscribe();
-        cache.set(inputObservable, entry_1);
-    }
-    return cache.get(inputObservable);
-}
 export function useObservable(observable, initialValue) {
-    var _a = useMemo(function () {
-        var store = getOrCreateStore(observable, getValue(initialValue));
-        if (store.subscription.closed) {
-            store.subscription = store.observable.subscribe();
-        }
-        return [
-            function getSnapshot() {
-                // @TODO: perf opt opportunity: we could do `store.subscription.unsubscribe()` here to clear up some memory, as this subscription is only needed to provide a sync initialValue.
-                return store.currentValue;
-            },
-            function subscribe(callback) {
-                // @TODO: perf opt opportunity: we could do `store.subscription.unsubscribe()` here as we only need 1 subscription active to keep the observer alive
-                var sub = store.observable.subscribe(callback);
-                return function () {
-                    sub.unsubscribe();
-                };
-            },
-        ];
-    }, [observable]), getSnapshot = _a[0], subscribe = _a[1];
-    var shouldRestoreSubscriptionRef = useRef(false);
+    var _a = useState(function () { return getValue(initialValue); }), value = _a[0], setValue = _a[1];
+    var initialValueRef = useRef(initialValue);
+    initialValueRef.current = initialValue;
     useEffect(function () {
-        var store = getOrCreateStore(observable, getValue(initialValue));
-        if (shouldRestoreSubscriptionRef.current) {
-            if (store.subscription.closed) {
-                store.subscription = store.observable.subscribe();
-            }
-            shouldRestoreSubscriptionRef.current = false;
-        }
-        return function () {
-            // React StrictMode will call effects as `setup + teardown + setup` thus we can't trust this callback as "react is about to unmount"
-            // Tracking this ref lets us set the subscription back up on the next `setup` call if needed, and if it really did unmounted then all is well
-            shouldRestoreSubscriptionRef.current = !store.subscription.closed;
-            store.subscription.unsubscribe();
-        };
-    }, [observable]);
-    return useSyncExternalStore(subscribe, getSnapshot);
+        setValue(getValue(initialValueRef.current));
+        var subscription = observable.pipe(tap(function (next) { return setValue(next); })).subscribe();
+        return function () { return subscription.unsubscribe(); };
+    }, [initialValueRef, observable]);
+    return value;
 }
 export function useMemoObservable(observableOrFactory, deps, initialValue) {
-    return useObservable(useMemo(function () { return getValue(observableOrFactory); }, deps), initialValue);
+    var _a = useState(function () { return getValue(initialValue); }), value = _a[0], setValue = _a[1];
+    useEffect(function () {
+        var subscription = getValue(observableOrFactory)
+            .pipe(tap(function (next) { return setValue(next); }))
+            .subscribe();
+        return function () { return subscription.unsubscribe(); };
+    }, deps);
+    return value;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-rx",
-  "version": "2.1.3",
+  "version": "3.0.0-0",
   "description": "React + RxJS = <3",
   "keywords": [
     "action",
@@ -28,7 +28,6 @@
     "sync",
     "typesafe",
     "typescript",
-    "use-sync-external-store",
     "use"
   ],
   "homepage": "https://react-rx.dev",
@@ -65,42 +64,37 @@
     "dev": "cd website && npm run dev",
     "prepublishOnly": "npm run clean && npm run build",
     "watch": "run-p \"build:* -- --watch\"",
-    "test": "jest",
+    "test": "vitest run",
     "lint": "eslint --cache ."
   },
   "dependencies": {
-    "observable-callback": "^1.0.2",
-    "use-sync-external-store": "^1.2.0"
+    "observable-callback": "^1.0.2"
   },
   "devDependencies": {
-    "@sanity/semantic-release-preset": "^2.0.2",
-    "@testing-library/dom": "^8.18.1",
-    "@testing-library/react": "^13.4.0",
-    "@types/jest": "^29.1.1",
-    "@types/node": "^18.8.2",
-    "@types/react": "^18.0.21",
-    "@types/react-dom": "^18.0.6",
-    "@types/use-sync-external-store": "^0.0.3",
-    "@typescript-eslint/eslint-plugin": "^5.39.0",
-    "@typescript-eslint/parser": "^5.39.0",
-    "eslint": "^8.24.0",
-    "eslint-config-prettier": "^8.5.0",
+    "@sanity/semantic-release-preset": "^4.0.0",
+    "@testing-library/dom": "^9.0.1",
+    "@testing-library/react": "^14.0.0",
+    "@types/node": "^18.14.6",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "@typescript-eslint/eslint-plugin": "^5.54.1",
+    "@typescript-eslint/parser": "^5.54.1",
+    "eslint": "^8.35.0",
+    "eslint-config-prettier": "^8.7.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.31.8",
+    "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "jest": "^29.1.2",
-    "jest-environment-jsdom": "^29.1.2",
-    "jsdom": "^20.0.1",
+    "jsdom": "^21.1.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.7.1",
-    "prettier-plugin-packagejson": "^2.3.0",
+    "prettier": "^2.8.4",
+    "prettier-plugin-packagejson": "^2.4.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-test-renderer": "^18.2.0",
-    "rimraf": "^3.0.2",
-    "rxjs": "^6.6.7",
-    "ts-jest": "^29.0.3",
-    "typescript": "4.7.4"
+    "rimraf": "^4.3.1",
+    "rxjs": "^7.8.0",
+    "typescript": "4.9.5",
+    "vitest": "^0.29.2"
   },
   "peerDependencies": {
     "react": "^16.8 || ^17 || ^18",

package/src/__tests__/strictmode.test.ts

@@ -1,8 +1,9 @@
 import {BehaviorSubject, Observable, of} from 'rxjs'
-import {useObservable} from '../useObservable'
+import {useMemoObservable, useObservable} from '../useObservable'
 import {createElement, Fragment, StrictMode, useEffect} from 'react'
 import {act, render} from '@testing-library/react'
 import {useAsObservable} from '../useAsObservable'
+import {test, expect} from 'vitest'
 
 const wait = (ms: number) => new Promise(resolve => setTimeout(resolve, ms))
 
@@ -15,16 +16,17 @@ test('Strict mode should trigger double mount effects and re-renders', async ()
   const returnedValues: unknown[] = []
   let mountCount = 0
   function ObservableComponent() {
+    const observedValue = useObservable(observable, 0)
     useEffect(() => {
       mountCount++
     }, [])
-    const observedValue = useObservable(observable)
     returnedValues.push(observedValue)
     return createElement(Fragment, null, observedValue)
   }
 
   const {rerender} = render(createElement(StrictMode, null, createElement(ObservableComponent)))
-  expect(mountCount).toEqual(2)
+
+  expect(mountCount).toBe(2)
 
   expect(returnedValues).toEqual([0, 0])
 
@@ -39,11 +41,14 @@ test('Strict mode should trigger double mount effects and re-renders', async ()
 })
 
 test('Strict mode should unsubscribe the source observable on unmount', () => {
-  let subscribed = false
+  const subscribed: number[] = []
+  const unsubscribed: number[] = []
+  let nextId = 0
   const observable = new Observable(() => {
-    subscribed = true
+    const id = nextId++
+    subscribed.push(id)
     return () => {
-      subscribed = false
+      unsubscribed.push(id)
     }
   })
 
@@ -53,16 +58,39 @@ test('Strict mode should unsubscribe the source observable on unmount', () => {
   }
 
   const {rerender} = render(createElement(StrictMode, null, createElement(ObservableComponent)))
-  expect(subscribed).toBe(true)
+  expect(subscribed).toEqual([0, 1])
+  rerender(createElement(StrictMode, null, createElement('div')))
+  expect(unsubscribed).toEqual([0, 1])
+})
+
+test('useMemoObservable should unsubscribe the source observable on unmount', () => {
+  const subscribed: number[] = []
+  const unsubscribed: number[] = []
+  let nextId = 0
+  function ObservableComponent() {
+    useMemoObservable(() => {
+      return new Observable(() => {
+        const id = nextId++
+        subscribed.push(id)
+        return () => {
+          unsubscribed.push(id)
+        }
+      })
+    }, [])
+    return createElement(Fragment, null)
+  }
+
+  const {rerender} = render(createElement(StrictMode, null, createElement(ObservableComponent)))
+  expect(subscribed).toEqual([0, 1])
   rerender(createElement(StrictMode, null, createElement('div')))
-  expect(subscribed).toBe(false)
+  expect(unsubscribed).toEqual([0, 1])
 })
 
 test('useAsObservable should work in strict mode', async () => {
   const returnedValues: unknown[] = []
   function ObservableComponent(props: {count: number}) {
     const count$ = useAsObservable(props.count)
-    const count = useObservable(count$)
+    const count = useObservable(count$, props.count)
     returnedValues.push(count)
     return createElement(Fragment, null, 'ok')
   }

package/src/__tests__/useAsObservable.test.tsx

@@ -2,6 +2,7 @@ import {useAsObservable} from '../useAsObservable'
 import React from 'react'
 import {renderHook} from '@testing-library/react'
 import {Observable} from 'rxjs'
+import {test, expect} from 'vitest'
 
 test('the returned observable should receive a new value when component is rendered with a new value', () => {
   const receivedValues: string[] = []

package/src/__tests__/useObservable.test.tsx

@@ -3,6 +3,7 @@ import {useObservable} from '../useObservable'
 import {asyncScheduler, Observable, of, scheduled, Subject, timer} from 'rxjs'
 import {mapTo} from 'rxjs/operators'
 import {createElement, Fragment} from 'react'
+import {test, expect} from 'vitest'
 
 test('should subscribe immediately on component mount and unsubscribe on component unmount', () => {
   let subscribed = false

package/src/useObservable.ts

@@ -1,80 +1,25 @@
-import {Observable, Subscription} from 'rxjs'
-import {DependencyList, useEffect, useMemo, useRef} from 'react'
-import {useSyncExternalStore} from 'use-sync-external-store/shim'
-import {shareReplay, tap} from 'rxjs/operators'
+import {Observable} from 'rxjs'
+import {DependencyList, useEffect, useRef, useState} from 'react'
+import {tap} from 'rxjs/operators'
 
 function getValue<T>(value: T): T extends () => infer U ? U : T {
   return typeof value === 'function' ? value() : value
 }
 
-interface CacheRecord<T> {
-  subscription: Subscription
-  observable: Observable<T>
-  currentValue: T
-}
-
-const cache = new WeakMap<Observable<any>, CacheRecord<any>>()
-function getOrCreateStore<T>(inputObservable: Observable<T>, initialValue: T) {
-  if (!cache.has(inputObservable)) {
-    const entry: Partial<CacheRecord<T>> = {currentValue: initialValue}
-    entry.observable = inputObservable.pipe(
-      shareReplay({refCount: true, bufferSize: 1}),
-      tap(value => (entry.currentValue = value)),
-    )
-
-    // Eagerly subscribe to sync set `entry.currentValue` to what the observable returns
-    entry.subscription = entry.observable.subscribe()
-
-    cache.set(inputObservable, entry as CacheRecord<T>)
-  }
-  return cache.get(inputObservable)!
-}
-
 export function useObservable<T>(observable: Observable<T>): T | undefined
 export function useObservable<T>(observable: Observable<T>, initialValue: T): T
 export function useObservable<T>(observable: Observable<T>, initialValue: () => T): T
 export function useObservable<T>(observable: Observable<T>, initialValue?: T | (() => T)) {
-  const [getSnapshot, subscribe] = useMemo<
-    [() => T, Parameters<typeof useSyncExternalStore>[0]]
-  >(() => {
-    const store = getOrCreateStore(observable, getValue(initialValue))
-    if (store.subscription.closed) {
-      store.subscription = store.observable.subscribe()
-    }
-    return [
-      function getSnapshot() {
-        // @TODO: perf opt opportunity: we could do `store.subscription.unsubscribe()` here to clear up some memory, as this subscription is only needed to provide a sync initialValue.
-        return store.currentValue
-      },
-      function subscribe(callback: () => void) {
-        // @TODO: perf opt opportunity: we could do `store.subscription.unsubscribe()` here as we only need 1 subscription active to keep the observer alive
-        const sub = store.observable.subscribe(callback)
-        return () => {
-          sub.unsubscribe()
-        }
-      },
-    ]
-  }, [observable])
-
-  const shouldRestoreSubscriptionRef = useRef(false)
+  const [value, setValue] = useState(() => getValue(initialValue))
+  const initialValueRef = useRef(initialValue)
+  initialValueRef.current = initialValue
   useEffect(() => {
-    const store = getOrCreateStore(observable, getValue(initialValue))
-    if (shouldRestoreSubscriptionRef.current) {
-      if (store.subscription.closed) {
-        store.subscription = store.observable.subscribe()
-      }
-      shouldRestoreSubscriptionRef.current = false
-    }
-
-    return () => {
-      // React StrictMode will call effects as `setup + teardown + setup` thus we can't trust this callback as "react is about to unmount"
-      // Tracking this ref lets us set the subscription back up on the next `setup` call if needed, and if it really did unmounted then all is well
-      shouldRestoreSubscriptionRef.current = !store.subscription.closed
-      store.subscription.unsubscribe()
-    }
-  }, [observable])
+    setValue(getValue(initialValueRef.current))
+    const subscription = observable.pipe(tap(next => setValue(next))).subscribe()
+    return () => subscription.unsubscribe()
+  }, [initialValueRef, observable])
 
-  return useSyncExternalStore(subscribe, getSnapshot)
+  return value
 }
 
 export function useMemoObservable<T>(
@@ -91,8 +36,13 @@ export function useMemoObservable<T>(
   deps: DependencyList,
   initialValue?: T | (() => T),
 ) {
-  return useObservable(
-    useMemo(() => getValue(observableOrFactory), deps),
-    initialValue,
-  )
+  const [value, setValue] = useState(() => getValue(initialValue))
+  useEffect(() => {
+    const subscription = getValue(observableOrFactory)
+      .pipe(tap(next => setValue(next)))
+      .subscribe()
+    return () => subscription.unsubscribe()
+  }, deps)
+
+  return value
 }

package/src/utils.ts

@@ -4,7 +4,7 @@ import {observableCallback} from 'observable-callback'
 import {startWith} from 'rxjs/operators'
 import {Dispatch, SetStateAction, useContext, useRef, useState, Context} from 'react'
 
-const createState = <T>(initialState: T) => observableCallback(startWith<T, T>(initialState))
+const createState = <T>(initialState: T) => observableCallback(startWith<T>(initialState))
 
 export function observeState<T>(
   initial: T | (() => T),

package/dist/cjs/withPropsStream.d.ts

@@ -1,8 +0,0 @@
-import * as React from 'react';
-import { Observable } from 'rxjs';
-declare type ObservableFactory<SourceProps, TargetProps> = (props$: Observable<SourceProps>) => Observable<TargetProps>;
-/**
- * @deprecated Use reactiveComponent instead
- */
-export declare function withPropsStream<SourceProps, TargetProps>(observableOrFactory: Observable<TargetProps> | ObservableFactory<SourceProps, TargetProps>, TargetComponent: React.ComponentType<TargetProps>): React.FunctionComponent<SourceProps>;
-export {};

package/dist/cjs/withPropsStream.js

@@ -1,55 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.withPropsStream = void 0;
-var React = __importStar(require("react"));
-var operators_1 = require("rxjs/operators");
-var displayName_1 = require("./displayName");
-var reactiveComponent_1 = require("./reactiveComponent");
-/**
- * @deprecated Use reactiveComponent instead
- */
-function withPropsStream(observableOrFactory, TargetComponent) {
-    var ComposedComponent = (0, reactiveComponent_1.reactiveComponent)(function (sourceProps$) {
-        var targetProps$ = typeof observableOrFactory === 'function'
-            ? observableOrFactory(sourceProps$)
-            : observableOrFactory;
-        return targetProps$.pipe((0, operators_1.map)(function (props) { return React.createElement(TargetComponent, __assign({}, props)); }));
-    });
-    ComposedComponent.displayName = (0, displayName_1.wrapDisplayName)(TargetComponent, 'withPropsStream');
-    return ComposedComponent;
-}
-exports.withPropsStream = withPropsStream;

package/dist/es2015/withPropsStream.d.ts

@@ -1,8 +0,0 @@
-import * as React from 'react';
-import { Observable } from 'rxjs';
-declare type ObservableFactory<SourceProps, TargetProps> = (props$: Observable<SourceProps>) => Observable<TargetProps>;
-/**
- * @deprecated Use reactiveComponent instead
- */
-export declare function withPropsStream<SourceProps, TargetProps>(observableOrFactory: Observable<TargetProps> | ObservableFactory<SourceProps, TargetProps>, TargetComponent: React.ComponentType<TargetProps>): React.FunctionComponent<SourceProps>;
-export {};

package/dist/es2015/withPropsStream.js

@@ -1,17 +0,0 @@
-import * as React from 'react';
-import { map } from 'rxjs/operators';
-import { wrapDisplayName } from './displayName';
-import { reactiveComponent } from './reactiveComponent';
-/**
- * @deprecated Use reactiveComponent instead
- */
-export function withPropsStream(observableOrFactory, TargetComponent) {
-    const ComposedComponent = reactiveComponent(sourceProps$ => {
-        const targetProps$ = typeof observableOrFactory === 'function'
-            ? observableOrFactory(sourceProps$)
-            : observableOrFactory;
-        return targetProps$.pipe(map(props => React.createElement(TargetComponent, Object.assign({}, props))));
-    });
-    ComposedComponent.displayName = wrapDisplayName(TargetComponent, 'withPropsStream');
-    return ComposedComponent;
-}

package/dist/esm/withPropsStream.d.ts

@@ -1,8 +0,0 @@
-import * as React from 'react';
-import { Observable } from 'rxjs';
-declare type ObservableFactory<SourceProps, TargetProps> = (props$: Observable<SourceProps>) => Observable<TargetProps>;
-/**
- * @deprecated Use reactiveComponent instead
- */
-export declare function withPropsStream<SourceProps, TargetProps>(observableOrFactory: Observable<TargetProps> | ObservableFactory<SourceProps, TargetProps>, TargetComponent: React.ComponentType<TargetProps>): React.FunctionComponent<SourceProps>;
-export {};

package/dist/esm/withPropsStream.js

@@ -1,28 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import * as React from 'react';
-import { map } from 'rxjs/operators';
-import { wrapDisplayName } from './displayName';
-import { reactiveComponent } from './reactiveComponent';
-/**
- * @deprecated Use reactiveComponent instead
- */
-export function withPropsStream(observableOrFactory, TargetComponent) {
-    var ComposedComponent = reactiveComponent(function (sourceProps$) {
-        var targetProps$ = typeof observableOrFactory === 'function'
-            ? observableOrFactory(sourceProps$)
-            : observableOrFactory;
-        return targetProps$.pipe(map(function (props) { return React.createElement(TargetComponent, __assign({}, props)); }));
-    });
-    ComposedComponent.displayName = wrapDisplayName(TargetComponent, 'withPropsStream');
-    return ComposedComponent;
-}