react-rx 2.1.3 → 3.0.0-1

package/src/__tests__/useAsObservable.test.tsx

@@ -1,94 +0,0 @@
-import {useAsObservable} from '../useAsObservable'
-import React from 'react'
-import {renderHook} from '@testing-library/react'
-import {Observable} from 'rxjs'
-
-test('the returned observable should receive a new value when component is rendered with a new value', () => {
-  const receivedValues: string[] = []
-  const {unmount, rerender} = renderHook(
-    (props: {value: string}) => {
-      const observable = useAsObservable(props.value)
-
-      React.useEffect(() => {
-        const subscription = observable.subscribe(v => {
-          receivedValues.push(v)
-        })
-        return () => {
-          subscription.unsubscribe()
-        }
-      }, [])
-    },
-    {initialProps: {value: 'initial'}},
-  )
-
-  rerender({value: 'rerender'})
-  rerender({value: 'rerender again'})
-
-  expect(receivedValues).toEqual(['initial', 'rerender', 'rerender again'])
-
-  unmount()
-})
-
-test('the returned observable should *not* receive a new value when component is rendered with an unchanged value', () => {
-  const receivedValues: string[] = []
-  const {unmount, rerender} = renderHook(
-    (props: {value: string}) => {
-      const observable = useAsObservable(props.value)
-
-      React.useEffect(() => {
-        const subscription = observable.subscribe(v => {
-          receivedValues.push(v)
-        })
-        return () => {
-          subscription.unsubscribe()
-        }
-      }, [])
-    },
-    {initialProps: {value: 'some value'}},
-  )
-
-  rerender({value: 'some value'})
-  rerender({value: 'some value'})
-
-  expect(receivedValues).toEqual(['some value'])
-
-  unmount()
-})
-
-test('the returned observable should have the same identity across multiple re-renders/hook calls', () => {
-  const returnValues: Observable<unknown>[] = []
-  const {unmount, rerender} = renderHook(() => {
-    returnValues.push(useAsObservable('render'))
-  })
-
-  rerender()
-  rerender()
-
-  const [initial, firstRerender, secondRerender] = returnValues
-  expect(initial).toBe(firstRerender)
-  expect(firstRerender).toBe(secondRerender)
-  unmount()
-})
-
-test('the returned observable should complete on unmount', () => {
-  let didComplete = false
-  const {unmount, rerender} = renderHook(() => {
-    const observable = useAsObservable('render')
-
-    React.useEffect(() => {
-      const subscription = observable.subscribe({
-        complete: () => {
-          didComplete = true
-        },
-      })
-      return () => {
-        subscription.unsubscribe()
-      }
-    }, [])
-  })
-  expect(didComplete).toBe(false)
-  rerender()
-  expect(didComplete).toBe(false)
-  unmount()
-  expect(didComplete).toBe(true)
-})

package/src/displayName.ts

@@ -1,11 +0,0 @@
-const getDisplayName = (Component: any) => {
-  if (typeof Component === 'string') {
-    return Component
-  }
-
-  return (Component && (Component.displayName || Component.name)) || 'Unknown'
-}
-
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/ban-types
-export const wrapDisplayName = (BaseComponent: Function, wrapperName: string) =>
-  `${wrapperName}(${getDisplayName(BaseComponent)})`

package/src/reactiveComponent.ts

@@ -1,63 +0,0 @@
-/* eslint-disable react-hooks/rules-of-hooks */
-import {Observable} from 'rxjs'
-import {wrapDisplayName} from './displayName'
-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<ReactNode>
-
-function fromComponent<Props>(component: Component<Props>): FunctionComponent<Props> {
-  const wrappedComponent = (props: Props) => {
-    return createElement(
-      Fragment,
-      null,
-      useObservable<ReactNode>(useRef(component(useAsObservable(props))).current),
-    )
-  }
-  wrappedComponent.displayName = wrapDisplayName(component, 'reactiveComponent')
-  return wrappedComponent
-}
-
-// eslint-disable-next-line @typescript-eslint/ban-types
-function fromObservable<Props>(input$: Observable<ReactNode>): FunctionComponent<{}> {
-  return function ReactiveComponent() {
-    return createElement(Fragment, null, useObservable<ReactNode>(input$))
-  }
-}
-
-export function reactiveComponent<Props>(observable: Observable<Props>): FunctionComponent<Props>
-export function reactiveComponent<Props>(component: Component<Props>): FunctionComponent<Props>
-export function reactiveComponent<Props>(
-  observableOrComponent: Observable<ReactNode> | Component<Props>,
-) {
-  return typeof observableOrComponent === 'function'
-    ? fromComponent(observableOrComponent)
-    : fromObservable(observableOrComponent)
-}
-
-type ForwardRefComponent<RefType, Props> = (
-  input$: Observable<Props>,
-  ref: Ref<RefType>,
-) => Observable<ReactNode>
-
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/ban-types
-export function forwardRef<RefType, Props = {}>(component: ForwardRefComponent<RefType, Props>) {
-  const wrappedComponent = reactForwardRef((props: Props, ref: Ref<RefType>) => {
-    return createElement(
-      Fragment,
-      null,
-      useObservable<ReactNode>(useRef(component(useAsObservable(props), ref)).current),
-    )
-  })
-  wrappedComponent.displayName = wrapDisplayName(component, 'reactiveComponent')
-  return wrappedComponent
-}

package/src/useAsObservable.ts

@@ -1,66 +0,0 @@
-import {BehaviorSubject, Observable} from 'rxjs'
-import {useCallback, useEffect, useRef} from 'react'
-import {distinctUntilChanged} from 'rxjs/operators'
-
-/**
- * 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
- * @deprecated use an `of` operator and `useMemoObservable` instead for a faster, more robust and  siimpler solution
- */
-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 setup = useCallback((): [Observable<T | K>, BehaviorSubject<T>] => {
-    const subject = new BehaviorSubject(value)
-
-    const observable = subject.asObservable().pipe(distinctUntilChanged())
-    return [operator ? observable.pipe(operator) : observable, subject]
-  }, [])
-
-  const ref = useRef<[Observable<T | K>, BehaviorSubject<T>]>()
-
-  if (!ref.current) {
-    ref.current = setup()
-  }
-
-  const [observable] = ref.current
-
-  useEffect(() => {
-    if (!ref.current) {
-      return
-    }
-    const [, subject] = ref.current
-    subject.next(value)
-  }, [value, ref])
-
-  const shouldRestoreSubscriptionRef = useRef(false)
-  useEffect(() => {
-    if (shouldRestoreSubscriptionRef.current) {
-      if (!ref.current) {
-        ref.current = setup()
-      }
-      shouldRestoreSubscriptionRef.current = false
-    }
-
-    return () => {
-      if (!ref.current) {
-        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 = true
-      const [, subject] = ref.current
-      subject.complete()
-      ref.current = undefined
-    }
-  }, [])
-  return observable
-}

package/src/useWithObservable.ts

@@ -1,24 +0,0 @@
-/* eslint-disable react-hooks/rules-of-hooks */
-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,48 +0,0 @@
-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'
-
-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>>] {
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const [value, update] = useState<T | undefined>(initial)
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  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] {
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  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> {
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  return useAsObservable(useContext<T>(context))
-}
-
-export function observeElement<T>(): [Observable<T | null>, (el: T | null) => void] {
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const ref = useRef<[Observable<T | null>, (value: T | null) => void]>()
-  if (!ref.current) {
-    ref.current = createState<T | null>(null)
-  }
-  return ref.current
-}

package/src/withPropsStream.tsx

@@ -1,27 +0,0 @@
-import * as React from 'react'
-import {Observable} from 'rxjs'
-import {map} from 'rxjs/operators'
-import {wrapDisplayName} from './displayName'
-import {reactiveComponent} from './reactiveComponent'
-
-type ObservableFactory<SourceProps, TargetProps> = (
-  props$: Observable<SourceProps>,
-) => Observable<TargetProps>
-
-/**
- * @deprecated Use reactiveComponent instead
- */
-export function withPropsStream<SourceProps, TargetProps>(
-  observableOrFactory: Observable<TargetProps> | ObservableFactory<SourceProps, TargetProps>,
-  TargetComponent: React.ComponentType<TargetProps>,
-) {
-  const ComposedComponent = reactiveComponent<SourceProps>(sourceProps$ => {
-    const targetProps$ =
-      typeof observableOrFactory === 'function'
-        ? observableOrFactory(sourceProps$)
-        : observableOrFactory
-    return targetProps$.pipe(map(props => <TargetComponent {...props} />))
-  })
-  ComposedComponent.displayName = wrapDisplayName(TargetComponent, 'withPropsStream')
-  return ComposedComponent
-}