Make public pipeFromArray

[caenguidanos]

Hi!

One question for the team of RxJS: ¿Why pipeFromArray is a private function? With public access we can do cool things like:

function FormNameFieldComponent() {
  const [data, next] = useObservable<string>([
    debounceTime(400),
    distinctUntilChanged()
  ])

  useEffect(() => console.log(data), [data])

  function onChange(ev: ChangeEvent<HTMLInputElement>) {
    next(ev.target.value)
  }

  return (
    <div>
      <h4>Name</h4>
      <input type="text" onChange={onChange} />
    </div>
  )
}

export function useObservable<T>(
  operators: UnaryFunction<any, any>[],
  initSubject?: MutableRefObject<Subject<T>>,
  onUnmount?: () => void
) {
  const [state, setState] = useState<T>()

  const subjectRef = initSubject ? initSubject : useRef(new Subject<T>())

  useEffect(() => {
    const save$ = tap((valueToSave: T) => {
      setState(valueToSave)
    })

    const subscription = subjectRef.current
      .pipe(pipeFromArray(operators), save$)
      .subscribe()

    return () => {
      subscription.unsubscribe()
      if (onUnmount) onUnmount()
    }
  }, [])

  function next(value: T): void {
    subjectRef.current.next(value)
  }

  function complete(): void {
    subjectRef.current.complete()
  }

  function error(error: any): void {
    subjectRef.current.error(error)
  }

  return [state, next, complete, error] as [
    T | undefined, // state
    (value: T) => void, // next
    () => void, // complete
    (error: any) => void // error
  ]
}

Best regards,

[voliva]

Wouldn't just array spreading work alright for your use case?:

const subscription = subjectRef.current
  .pipe(...operators, save$)
  .subscribe()

My apologies if you're not looking for feedback on this hook, but I think there's a few things that could be improved:

1. It breaks the rules of hooks by having a conditional branch that runs a hook (on the ternary for subjectRef)
2. On unmount I would complete the subject, otherwise it's going to stay in memory.
3. The onUnmount callback feels redundant - Any consumer of this hook can do it by themselves by just using their useEffect
4. Why are you using tap to set the state? I think you'd have less calls if you just set the state directly in the observer of .subscribe({ next: v => setState(v) })

[caenguidanos]

Hi @voliva ,

Thanks for the feedback. I tried with separated hooks.

• useSubjectState:

import { useEffect, useMemo, useRef, useState } from 'react'
import { Subject } from 'rxjs'

import { pipeFromArray } from '../helpers/operators'

import type { OperatorsArray } from '../types'

export function useSubjectState<T>(): [T | null, Subject<T>]
export function useSubjectState<T>(operators: OperatorsArray): [T | null, Subject<T>]
export function useSubjectState<T>(operators: OperatorsArray, emitter: Subject<T>): [T | null, Subject<T>]
export function useSubjectState<T>(operators: OperatorsArray, onUnmount: () => void): [T | null, Subject<T>]
export function useSubjectState<T>(operators: OperatorsArray, emitter: Subject<T>, onUnmount: () => void): [T | null, Subject<T>]
export function useSubjectState<T>(emitter: Subject<T>): [T | null, Subject<T>]
export function useSubjectState<T>(emitter: Subject<T>, onUnmount: () => void): [T | null, Subject<T>]
export function useSubjectState<T>(onUnmount: () => void): [T | null, Subject<T>]

export function useSubjectState<T>(...rest: any): [T | null, Subject<T>] {
  const [state, setState] = useState<T | null>(null)

  const { emitter, operators, unmount } = useMemo(() => handleArguments<T>(rest), [rest])

  const emitterRef = useRef<Subject<T>>(emitter)

  useEffect(() => {
    const subscription = emitterRef.current
      .pipe(
        // typescript don't pass spread operator on rxjs operators array
        pipeFromArray(operators)
      )
      .subscribe((v) => setState(v as T))

    return () => {
      // Complete subject here, ok, but, if the subject comes from parent component?
      subscription.unsubscribe()
      unmount()
    }
  }, [])

  return [state, emitterRef.current]
}

const isArray = (v: any) => Array.isArray(v)
const isSubject = (v: any) => v instanceof Subject
const isFunction = (v: any) => typeof v === 'function'

function handleArguments<T>(rest: any) {
  let operators: OperatorsArray = []
  let emitter: Subject<T> = new Subject<T>()
  let unmount: () => void = () => {}

  for (const i of rest) {
    const value = rest[rest.indexOf(i)]

    if (isArray(i)) operators = value
    if (isSubject(i)) emitter = value
    if (isFunction(i)) unmount = value
  }

  return { operators, emitter, unmount }
}

• useObservableState:

import { useEffect, useMemo, useRef, useState } from 'react'
import { Observable } from 'rxjs'

import { pipeFromArray } from '../helpers/operators'

import type { OperatorsArray } from '../types'

export function useObservableState<T>(observable: Observable<T>): [T | null]
export function useObservableState<T>(observable: Observable<T>, operators: OperatorsArray): [T | null]
export function useObservableState<T>(observable: Observable<T>, onUnmount: () => void): [T | null]
export function useObservableState<T>(observable: Observable<T>, operators: OperatorsArray, onUnmount: () => void): [T | null]

export function useObservableState<T>(...rest: any): [T | null] {
  const [state, setState] = useState<T | null>(null)

  const { observable, operators, unmount } = useMemo(() => handleArguments<T>(rest), [rest])

  const observableRef = useRef<Observable<T>>(observable)

  useEffect(() => {
    const subscription = observableRef.current.pipe(pipeFromArray(operators)).subscribe((v) => setState(v as T))

    return () => {
      subscription.unsubscribe()
      unmount()
    }
  }, [])

  return [state]
}

const isArray = (v: any) => Array.isArray(v)
const isFunction = (v: any) => typeof v === 'function'

function handleArguments<T>(rest: any) {
  let operators: OperatorsArray = []
  let observable: Observable<T> = rest[0]
  let unmount: () => void = () => {}

  for (const i of rest) {
    const value = rest[rest.indexOf(i)]

    if (isArray(i)) operators = value
    if (isFunction(i)) unmount = value
  }

  return { operators, observable, unmount }
}

Better?

[caenguidanos]

You can try with

[caenguidanos]

And, for complete local only Subject, we can do this:

import { ChangeEvent } from 'react'
import { range } from 'rxjs'
import { debounceTime, map, tap, distinctUntilChange } from 'rxjs/operators'

import { delayOf, useObservableState, useSubjectState } from '@academiares/react-rx'

const delayFromRange$ = delayOf(300, range(0, 1000))
const debounceInputOperators = [debounceTime(200), distinctUntilChange()]

function Index() {
  const [counter] = useObservableState<number>(delayFromRange$)

  const [text, subject] = useSubjectState<string>(debounceInputOperators, () => {
    // The hook doesn't completes Subject automatically. You can do it here, on unmount.
    subject.complete()
  })

  function onChange(ev: ChangeEvent<HTMLInputElement>) {
    subject.next(ev.target.value)
  }

  return (
    <div>
      <h1>{counter}</h1>
      <input type='text' onChange={onChange} />
      <pre>{text}</pre>
    </div>
  )
}

export default Index