react-rx 1.0.0-beta.3 → 1.0.0

package/dist/esm/useObservable.js

@@ -1,39 +1,15 @@
-import * as React from 'react';
-import { BehaviorSubject } from 'rxjs';
-import { createEventHandler } from './utils';
-export function toObservable(value, setup) {
-    var isInitial = React.useRef(true);
-    var subject = React.useRef(new BehaviorSubject(value));
-    React.useEffect(function () {
-        if (isInitial.current) {
-            isInitial.current = false;
-        }
-        else {
-            // emit only on update
-            subject.current.next(value);
-        }
-    }, [value]);
-    React.useEffect(function () {
-        return function () {
-            return subject.current.complete();
-        };
-    }, []);
-    var observable = subject.current.asObservable();
-    return setup ? setup(observable) : observable;
-}
-var isCallable = function (val) {
-    return typeof val === 'function';
-};
+import { useMemo, useRef, useState } from 'react';
+import { useIsomorphicEffect } from './useIsomorphicEffect';
 function getValue(value) {
-    return isCallable(value) ? value() : value;
+    return typeof value === 'function' ? value() : value;
 }
-export function useObservable(observable$, initialValue) {
-    var subscription = React.useRef();
-    var isInitial = React.useRef(true);
-    var _a = React.useState(function () {
+export function useObservable(observable, initialValue) {
+    var subscription = useRef();
+    var isInitial = useRef(true);
+    var _a = useState(function () {
         var isSync = true;
         var syncVal = getValue(initialValue);
-        subscription.current = observable$.subscribe(function (nextVal) {
+        subscription.current = observable.subscribe(function (nextVal) {
             if (isSync) {
                 syncVal = nextVal;
             }
@@ -44,30 +20,21 @@ export function useObservable(observable$, initialValue) {
         isSync = false;
         return syncVal;
     }), value = _a[0], setState = _a[1];
-    React.useEffect(function () {
-        // when the observable$ changes after initial (possibly sync render)
+    useIsomorphicEffect(function () {
+        // when the observable changes after initial (possibly sync render)
         if (!isInitial.current) {
-            subscription.current = observable$.subscribe(function (nextVal) { return setState(nextVal); });
+            subscription.current = observable.subscribe(function (nextVal) { return setState(nextVal); });
         }
         isInitial.current = false;
         return function () {
             if (subscription.current) {
                 subscription.current.unsubscribe();
+                subscription.current = undefined;
             }
         };
-    }, [observable$]);
+    }, [observable]);
     return value;
 }
-export function useObservableState(initial) {
-    var _a = React.useState(initial), value = _a[0], update = _a[1];
-    return [toObservable(value), update];
-}
-export function useObservableContext(context) {
-    return toObservable(React.useContext(context));
-}
-export function useObservableEvent() {
-    return React.useMemo(createEventHandler, []);
-}
-export function useObservableElement() {
-    return useObservableState(null);
+export function useMemoObservable(observableOrFactory, deps, initialValue) {
+    return useObservable(useMemo(function () { return getValue(observableOrFactory); }, deps), initialValue);
 }

package/dist/esm/useObservableCallback.d.ts

@@ -0,0 +1,3 @@
+import { DependencyList } from 'react';
+import { Observable } from 'rxjs';
+export declare function useObservableCallback<T, U>(fn: (arg: Observable<T>) => Observable<U>, dependencies?: DependencyList): (arg: T) => void;

package/dist/esm/useObservableCallback.js

@@ -0,0 +1,20 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { observableCallback } from 'observable-callback';
+var EMPTY_DEPS = [];
+export function useObservableCallback(fn, dependencies) {
+    if (dependencies === void 0) { dependencies = EMPTY_DEPS; }
+    var callbackRef = useRef();
+    if (!callbackRef.current) {
+        callbackRef.current = observableCallback();
+    }
+    var _a = callbackRef.current, calls$ = _a[0], call = _a[1];
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    var callback = useCallback(fn, dependencies);
+    useEffect(function () {
+        var subscription = calls$.pipe(callback).subscribe();
+        return function () {
+            subscription.unsubscribe();
+        };
+    }, [calls$, call, callback]);
+    return call;
+}

package/dist/esm/useWithObservable.d.ts

@@ -0,0 +1,9 @@
+import { Observable } from 'rxjs';
+/**
+ * React hook to convert any props or state value into an observable
+ * Returns an observable representing updates to any React value (props, state or any other calculated value)
+ * Note: the returned observable is the same instance throughout the component lifecycle
+ * @param value
+ */
+export declare function useWithObservable<T>(value: T): T | undefined;
+export declare function useWithObservable<T, K>(value: T, operator: (input: Observable<T>) => Observable<K>): K | undefined;

package/dist/esm/useWithObservable.js

@@ -0,0 +1,7 @@
+import { useObservable } from './useObservable';
+import { useAsObservable } from './useAsObservable';
+export function useWithObservable(value, operator) {
+    return operator
+        ? useObservable(useAsObservable(value, operator))
+        : useObservable(useAsObservable(value));
+}

package/dist/esm/utils.d.ts

@@ -1,3 +1,7 @@
-import { observableCallback } from 'observable-callback';
-export declare const createEventHandler: typeof observableCallback;
-export declare const createState: <T>(initialState: T) => [import("rxjs").Observable<T>, (arg: T) => void];
+import { Observable, OperatorFunction } from 'rxjs';
+import { Dispatch, SetStateAction, Context } from 'react';
+export declare function observeState<T>(initial: T | (() => T)): [Observable<T>, Dispatch<SetStateAction<T>>];
+export declare function observeCallback<T>(): [Observable<T>, (arg: T) => void];
+export declare function observeCallback<T, K>(operator: OperatorFunction<T, K>): [Observable<K>, (arg: T) => void];
+export declare function observeContext<T>(context: Context<T>): Observable<T>;
+export declare function observeElement<T>(): [Observable<T | null>, (el: T | null) => void];

package/dist/esm/utils.js

@@ -1,5 +1,26 @@
+import { useAsObservable } from './useAsObservable';
 import { observableCallback } from 'observable-callback';
 import { startWith } from 'rxjs/operators';
-// for consumption outside of react only
-export var createEventHandler = observableCallback;
-export var createState = function (initialState) { return observableCallback(startWith(initialState)); };
+import { useContext, useRef, useState } from 'react';
+var createState = function (initialState) { return observableCallback(startWith(initialState)); };
+export function observeState(initial) {
+    var _a = useState(initial), value = _a[0], update = _a[1];
+    return [useAsObservable(value), update];
+}
+export function observeCallback(operator) {
+    var ref = useRef();
+    if (!ref.current) {
+        ref.current = operator ? observableCallback(operator) : observableCallback();
+    }
+    return ref.current;
+}
+export function observeContext(context) {
+    return useAsObservable(useContext(context));
+}
+export function observeElement() {
+    var ref = useRef();
+    if (!ref.current) {
+        ref.current = createState(null);
+    }
+    return ref.current;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-rx",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0",
   "description": "React + RxJS = <3",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",
@@ -12,6 +12,7 @@
     "build:esm": "tsc --module es2015 --target es5 --outDir dist/esm",
     "build:cjs": "tsc --module commonjs --target es5 --outDir dist/cjs",
     "clean": "rimraf dist",
+    "dev": "cd website && npm run dev",
     "prepublishOnly": "npm run clean && npm run build",
     "postpublish": "npm run clean",
     "watch": "run-p \"build:* -- --watch\"",
@@ -24,8 +25,8 @@
     "observable-callback": "^1.0.1"
   },
   "peerDependencies": {
-    "react": ">=16.8",
-    "rxjs": "^6"
+    "react": ">=16.8 | >= 17",
+    "rxjs": "^6 | ^7"
   },
   "devDependencies": {
     "@testing-library/dom": "^7.29.6",
@@ -59,5 +60,9 @@
   "bugs": {
     "url": "https://github.com/bjoerge/react-rx/issues"
   },
-  "homepage": "https://react-rx.dev"
+  "homepage": "https://react-rx.dev",
+  "workspaces": [
+    "website",
+    "."
+  ]
 }

package/src/WithObservable.tsx

@@ -2,20 +2,21 @@ import * as React from 'react'
 import {Observable} from 'rxjs'
 import {distinctUntilChanged, map, switchMap} from 'rxjs/operators'
 import {reactiveComponent} from './reactiveComponent'
+import {ComponentType, ReactNode} from 'react'
 
 interface Props<T> {
   observable: Observable<T>
-  children: (value: T) => React.ReactNode
+  children: (value: T) => ReactNode
 }
 
-type ObservableComponent<T> = React.ComponentType<Props<T>>
+type ObservableComponent<T> = ComponentType<Props<T>>
 
 function createWithObservable<T>(): ObservableComponent<T> {
   return reactiveComponent((props$: Observable<Props<T>>) =>
     props$.pipe(
       distinctUntilChanged((props, prevProps) => props.observable === prevProps.observable),
       switchMap(
-        (props): Observable<React.ReactNode> =>
+        (props): Observable<ReactNode> =>
           props.observable.pipe(map((observableValue: T) => props.children(observableValue))),
       ),
     ),

package/src/index.ts

@@ -1,15 +1,15 @@
 // Main package exports
 export {reactiveComponent, reactiveComponent as rxComponent, forwardRef} from './reactiveComponent'
-export {createEventHandler, createState} from './utils'
-
+export {observeState, observeCallback, observeContext, observeElement} from './utils'
 export {
-  useObservableState as useState,
-  useObservableState,
-  useObservableContext as useContext,
-  useObservableContext,
-  useObservableEvent as useEvent,
-  useObservableEvent,
-  useObservableElement as useElement,
-  useObservable,
-  toObservable,
-} from './useObservable'
+  observeState as state,
+  observeCallback as handler,
+  observeContext as context,
+  observeElement as elementRef,
+} from './utils'
+export {observableCallback} from 'observable-callback'
+
+// hooks
+export {useObservable, useMemoObservable} from './useObservable'
+export {useAsObservable} from './useAsObservable'
+export {useObservableCallback} from './useObservableCallback'

package/src/reactiveComponent.ts

@@ -1,31 +1,39 @@
-import * as React from 'react'
 import {Observable} from 'rxjs'
 import {wrapDisplayName} from './displayName'
-import {toObservable, useObservable} from './useObservable'
+import {useAsObservable} from './useAsObservable'
+import {useObservable} from './useObservable'
+import {
+  createElement,
+  Fragment,
+  FunctionComponent,
+  ReactNode,
+  Ref,
+  useRef,
+  forwardRef as reactForwardRef,
+} from 'react'
 
-type Component<Props> = (input$: Observable<Props>) => Observable<React.ReactNode>
+type Component<Props> = (input$: Observable<Props>) => Observable<ReactNode>
 
-function fromComponent<Props>(component: Component<Props>): React.FunctionComponent<Props> {
-  const wrappedComponent = (props: Props) =>
-    React.createElement(
-      React.Fragment,
+function fromComponent<Props>(component: Component<Props>): FunctionComponent<Props> {
+  const wrappedComponent = (props: Props) => {
+    return createElement(
+      Fragment,
       null,
-      useObservable<React.ReactNode>(toObservable(props, component)),
+      useObservable<ReactNode>(useRef(component(useAsObservable(props))).current),
     )
+  }
   wrappedComponent.displayName = wrapDisplayName(component, 'reactiveComponent')
   return wrappedComponent
 }
 
-function fromObservable<Props>(input$: Observable<Props>): React.FunctionComponent<{}> {
+function fromObservable<Props>(input$: Observable<Props>): FunctionComponent<{}> {
   return function ReactiveComponent() {
-    return React.createElement(React.Fragment, null, useObservable<React.ReactNode>(input$))
+    return createElement(Fragment, null, useObservable<ReactNode>(input$))
   }
 }
 
-export function reactiveComponent<Props>(observable: Observable<Props>): React.FunctionComponent<{}>
-export function reactiveComponent<Props>(
-  component: Component<Props>,
-): React.FunctionComponent<Props>
+export function reactiveComponent<Props>(observable: Observable<Props>): FunctionComponent<{}>
+export function reactiveComponent<Props>(component: Component<Props>): FunctionComponent<Props>
 export function reactiveComponent<Props>(
   observableOrComponent: Observable<Props> | Component<Props>,
 ) {
@@ -36,15 +44,15 @@ export function reactiveComponent<Props>(
 
 type ForwardRefComponent<RefType, Props> = (
   input$: Observable<Props>,
-  ref: React.Ref<RefType>,
-) => Observable<React.ReactNode>
+  ref: Ref<RefType>,
+) => Observable<ReactNode>
 
 export function forwardRef<RefType, Props = {}>(component: ForwardRefComponent<RefType, Props>) {
-  const wrappedComponent = React.forwardRef((props: Props, ref: React.Ref<RefType>) => {
-    return React.createElement(
-      React.Fragment,
+  const wrappedComponent = reactForwardRef((props: Props, ref: Ref<RefType>) => {
+    return createElement(
+      Fragment,
       null,
-      useObservable(component(toObservable(props), ref)),
+      useObservable<ReactNode>(useRef(component(useAsObservable(props), ref)).current),
     )
   })
   wrappedComponent.displayName = wrapDisplayName(component, 'reactiveComponent')

package/src/useAsObservable.ts

@@ -0,0 +1,43 @@
+import {BehaviorSubject, Observable, Subject} from 'rxjs'
+import {useRef} from 'react'
+import {useIsomorphicEffect} from './useIsomorphicEffect'
+
+/**
+ * React hook to convert any props or state value into an observable
+ * Returns an observable representing updates to any React value (props, state or any other calculated value)
+ * Note: the returned observable is the same instance throughout the component lifecycle
+ * @param value
+ */
+export function useAsObservable<T>(value: T): Observable<T>
+export function useAsObservable<T, K>(
+  value: T,
+  operator: (input: Observable<T>) => Observable<K>,
+): Observable<K>
+export function useAsObservable<T, K = T>(
+  value: T,
+  operator?: (input: Observable<T>) => Observable<K>,
+): Observable<T | K> {
+  const isInitial = useRef(true)
+  const subjectRef = useRef<Subject<T>>(new BehaviorSubject(value))
+  const observableRef = useRef<Observable<T | K>>()
+  if (!observableRef.current) {
+    const observable = subjectRef.current.asObservable()
+    observableRef.current = operator ? observable.pipe(operator) : observable
+  }
+
+  useIsomorphicEffect(() => {
+    if (isInitial.current) {
+      isInitial.current = false
+    } else {
+      // emit only on update
+      subjectRef.current.next(value)
+    }
+  }, [value])
+  useIsomorphicEffect(() => {
+    return () => {
+      return subjectRef.current.complete()
+    }
+  }, [])
+
+  return observableRef.current
+}

package/src/useIsomorphicEffect.ts

@@ -0,0 +1,3 @@
+import {useEffect, useLayoutEffect} from 'react'
+
+export const useIsomorphicEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect

package/src/useObservable.ts

@@ -1,55 +1,21 @@
-import * as React from 'react'
-import {BehaviorSubject, Observable, Subject, Subscription} from 'rxjs'
-import {createEventHandler} from './utils'
+import {Observable, Subscription} from 'rxjs'
+import {DependencyList, useMemo, useRef, useState} from 'react'
+import {useIsomorphicEffect} from './useIsomorphicEffect'
 
-export function toObservable<T>(value: T): Observable<T>
-export function toObservable<T, K>(
-  value: T,
-  setup: (props$: Observable<T>) => Observable<K>,
-): Observable<K>
-export function toObservable<T, K>(
-  value: T,
-  setup?: (props$: Observable<T>) => Observable<K>,
-): Observable<T | K> {
-  const isInitial = React.useRef(true)
-  const subject = React.useRef<Subject<T>>(new BehaviorSubject(value))
-
-  React.useEffect(() => {
-    if (isInitial.current) {
-      isInitial.current = false
-    } else {
-      // emit only on update
-      subject.current.next(value)
-    }
-  }, [value])
-  React.useEffect(() => {
-    return () => {
-      return subject.current.complete()
-    }
-  }, [])
-
-  const observable = subject.current.asObservable()
-  return setup ? setup(observable) : observable
-}
-
-const isCallable = (val: unknown): val is (...args: unknown[]) => unknown =>
-  typeof val === 'function'
-
-function getValue<T>(value: T): T
-function getValue<T>(value: T | (() => T)): T {
-  return isCallable(value) ? value() : value
+function getValue<T>(value: T): T extends () => infer U ? U : T {
+  return typeof value === 'function' ? value() : value
 }
 
-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 | undefined {
-  const subscription = React.useRef<Subscription>()
-  const isInitial = React.useRef(true)
-  const [value, setState] = React.useState<T | undefined>(() => {
+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 subscription = useRef<Subscription>()
+  const isInitial = useRef(true)
+  const [value, setState] = useState(() => {
     let isSync = true
     let syncVal = getValue(initialValue)
-    subscription.current = observable$.subscribe(nextVal => {
+    subscription.current = observable.subscribe(nextVal => {
       if (isSync) {
         syncVal = nextVal
       } else {
@@ -60,46 +26,39 @@ export function useObservable<T>(observable$: Observable<T>, initialValue?: T):
     return syncVal
   })
 
-  React.useEffect(() => {
-    // when the observable$ changes after initial (possibly sync render)
+  useIsomorphicEffect(() => {
+    // when the observable changes after initial (possibly sync render)
     if (!isInitial.current) {
-      subscription.current = observable$.subscribe(nextVal => setState(nextVal))
+      subscription.current = observable.subscribe(nextVal => setState(nextVal))
     }
     isInitial.current = false
     return () => {
       if (subscription.current) {
         subscription.current.unsubscribe()
+        subscription.current = undefined
       }
     }
-  }, [observable$])
+  }, [observable])
 
   return value
 }
 
-export function useObservableState<T>(
-  initial: T | (() => T),
-): [Observable<T>, React.Dispatch<React.SetStateAction<T>>]
-
-export function useObservableState<T>(
-  initial?: T | (() => T),
-): [Observable<T | undefined>, React.Dispatch<React.SetStateAction<T | undefined>>] {
-  const [value, update] = React.useState<T | undefined>(initial)
-  return [toObservable(value), update]
-}
-
-export function useObservableContext<T>(context: React.Context<T>): Observable<T> {
-  return toObservable(React.useContext<T>(context))
-}
-
-type ObservableEventTuple<Event> = [Observable<Event>, (event: Event) => void]
-
-export function useObservableEvent<Event>(): ObservableEventTuple<Event> {
-  return React.useMemo<ObservableEventTuple<Event>>(createEventHandler, [])
-}
-
-export function useObservableElement<Element extends HTMLElement>(): [
-  Observable<Element | null>,
-  (el: Element | null) => void,
-] {
-  return useObservableState<Element | null>(null)
+export function useMemoObservable<T>(
+  observableOrFactory: Observable<T> | (() => Observable<T>),
+  deps: DependencyList,
+): T | undefined
+export function useMemoObservable<T>(
+  observableOrFactory: Observable<T> | (() => Observable<T>),
+  deps: DependencyList,
+  initialValue: T | (() => T),
+): T
+export function useMemoObservable<T>(
+  observableOrFactory: Observable<T> | (() => Observable<T>),
+  deps: DependencyList,
+  initialValue?: T | (() => T),
+) {
+  return useObservable(
+    useMemo(() => getValue(observableOrFactory), deps),
+    initialValue,
+  )
 }

package/src/useObservableCallback.ts

@@ -0,0 +1,30 @@
+import {DependencyList, useCallback, useEffect, useRef} from 'react'
+import {observableCallback} from 'observable-callback'
+import {Observable} from 'rxjs'
+
+const EMPTY_DEPS: DependencyList = []
+
+export function useObservableCallback<T, U>(
+  fn: (arg: Observable<T>) => Observable<U>,
+  dependencies: DependencyList = EMPTY_DEPS,
+): (arg: T) => void {
+  const callbackRef = useRef<[Observable<T>, (val: T) => void]>()
+
+  if (!callbackRef.current) {
+    callbackRef.current = observableCallback<T>()
+  }
+
+  const [calls$, call] = callbackRef.current
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const callback = useCallback(fn, dependencies)
+
+  useEffect(() => {
+    const subscription = calls$.pipe(callback).subscribe()
+    return () => {
+      subscription.unsubscribe()
+    }
+  }, [calls$, call, callback])
+
+  return call
+}

package/src/useWithObservable.ts

@@ -0,0 +1,23 @@
+import {Observable} from 'rxjs'
+import {useObservable} from './useObservable'
+import {useAsObservable} from './useAsObservable'
+
+/**
+ * React hook to convert any props or state value into an observable
+ * Returns an observable representing updates to any React value (props, state or any other calculated value)
+ * Note: the returned observable is the same instance throughout the component lifecycle
+ * @param value
+ */
+export function useWithObservable<T>(value: T): T | undefined
+export function useWithObservable<T, K>(
+  value: T,
+  operator: (input: Observable<T>) => Observable<K>,
+): K | undefined
+export function useWithObservable<T, K = T>(
+  value: T,
+  operator?: (input: Observable<T>) => Observable<K>,
+): T | K | undefined {
+  return operator
+    ? useObservable(useAsObservable(value, operator))
+    : useObservable(useAsObservable(value))
+}

package/src/utils.ts

@@ -1,7 +1,43 @@
+import {Observable, OperatorFunction} from 'rxjs'
+import {useAsObservable} from './useAsObservable'
 import {observableCallback} from 'observable-callback'
 import {startWith} from 'rxjs/operators'
+import {Dispatch, SetStateAction, useContext, useRef, useState, Context} from 'react'
 
-// for consumption outside of react only
-export const createEventHandler = observableCallback
+const createState = <T>(initialState: T) => observableCallback(startWith<T, T>(initialState))
 
-export const createState = <T>(initialState: T) => observableCallback(startWith<T, T>(initialState))
+export function observeState<T>(
+  initial: T | (() => T),
+): [Observable<T>, Dispatch<SetStateAction<T>>]
+export function observeState<T>(
+  initial?: T | (() => T),
+): [Observable<T | undefined>, Dispatch<SetStateAction<T | undefined>>] {
+  const [value, update] = useState<T | undefined>(initial)
+  return [useAsObservable(value), update]
+}
+
+export function observeCallback<T>(): [Observable<T>, (arg: T) => void]
+export function observeCallback<T, K>(
+  operator: OperatorFunction<T, K>,
+): [Observable<K>, (arg: T) => void]
+export function observeCallback<T, K>(
+  operator?: OperatorFunction<T, K>,
+): [Observable<T | K>, (arg: T) => void] {
+  const ref = useRef<[Observable<T | K>, (arg: T) => void]>()
+  if (!ref.current) {
+    ref.current = operator ? observableCallback<T, K>(operator) : observableCallback<T>()
+  }
+  return ref.current
+}
+
+export function observeContext<T>(context: Context<T>): Observable<T> {
+  return useAsObservable(useContext<T>(context))
+}
+
+export function observeElement<T>(): [Observable<T | null>, (el: T | null) => void] {
+  const ref = useRef<[Observable<T | null>, (value: T | null) => void]>()
+  if (!ref.current) {
+    ref.current = createState<T | null>(null)
+  }
+  return ref.current
+}

package/website/.babelrc

@@ -0,0 +1,21 @@
+{
+  "presets": [
+    "@babel/react",
+    "@babel/typescript",
+    [
+      "@babel/env",
+      {
+        "targets": {
+          "esmodules": true
+        },
+        "modules": false
+      }
+    ]
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-optional-chaining",
+    "@babel/plugin-proposal-class-properties",
+    "babel-plugin-static-fs",
+    "babel-plugin-styled-components"
+  ]
+}