chore(utils): refactor atomWithObservable

src/utils/atomWithObservable.ts

@@ -34,69 +34,73 @@ export function atomWithObservable<TData>(
 export function atomWithObservable<TData>(
   createObservable: (get: Getter) => ObservableLike<TData> | SubjectLike<TData>
 ) {
-  type Result = { data: TData } | { error: unknown }
   const observableResultAtom = atom((get) => {
-    let resolve: ((result: Result) => void) | null = null
+    let settlePromise: ((data: TData | null, err?: unknown) => void) | null =
+      null
     let observable = createObservable(get)
-    if (observable[Symbol.observable]) {
-      observable = (
-        observable[Symbol.observable] as () => ObservableLike<TData>
-      )()
+    const returnsItself = observable[Symbol.observable]
+    if (returnsItself) {
+      observable = returnsItself()
     }
-    const resultAtom = atom<Result | Promise<Result>>(
-      new Promise<Result>((r) => {
-        resolve = r
+    const dataAtom = atom<TData | Promise<TData>>(
+      new Promise<TData>((resolve, reject) => {
+        settlePromise = (data, err) => {
+          if (err) {
+            reject(err)
+          } else {
+            resolve(data as TData)
+          }
+        }
       })
     )
-    resultAtom.scope = observableAtom.scope
-    let setResult: (result: Result) => void = () => {
+    dataAtom.scope = observableAtom.scope
+    let setData: (data: TData | Promise<TData>) => void = () => {
       throw new Error('setting data without mount')
     }
     const dataListener = (data: TData) => {
-      if (resolve) {
-        resolve({ data })
-        resolve = null
+      if (settlePromise) {
+        settlePromise(data)
+        settlePromise = null
+        if (subscription && !setData) {
+          subscription.unsubscribe()
+          subscription = null
+        }
       } else {
-        setResult({ data })
+        setData(data)
       }
     }
     const errorListener = (error: unknown) => {
-      if (resolve) {
-        resolve({ error })
-        resolve = null
+      if (settlePromise) {
+        settlePromise(null, error)
+        settlePromise = null
+        if (subscription && !setData) {
+          subscription.unsubscribe()
+          subscription = null
+        }
       } else {
-        setResult({ error })
+        setData(Promise.reject<TData>(error))
       }
     }
     let subscription: Subscription | null = null
-    subscription = observable.subscribe((data) => {
-      dataListener(data)
-      if (subscription && !setResult) {
-        subscription.unsubscribe()
-        subscription = null
-      }
-    }, errorListener)
-    if (!resolve) {
+    subscription = observable.subscribe(dataListener, errorListener)
+    if (!settlePromise) {
       subscription.unsubscribe()
       subscription = null
     }
-    resultAtom.onMount = (update) => {
-      setResult = update
-      if (!subscription)
+    dataAtom.onMount = (update) => {
+      setData = update
+      if (!subscription) {
         subscription = observable.subscribe(dataListener, errorListener)
-      return () => subscription && subscription.unsubscribe()
+      }
+      return () => subscription?.unsubscribe()
     }
-    return { resultAtom, observable }
+    return { dataAtom, observable }
   })
   const observableAtom = atom(
     (get) => {
       observableResultAtom.scope = observableAtom.scope
-      const { resultAtom } = get(observableResultAtom)
-      const result = get(resultAtom)
-      if ('error' in result) {
-        throw result.error
-      }
-      return result.data
+      const { dataAtom } = get(observableResultAtom)
+      return get(dataAtom)
     },
     (get, _set, data: TData) => {
       observableResultAtom.scope = observableAtom.scope

tests/utils/atomWithObservable.test.tsx

@@ -1,4 +1,4 @@
-import { FC, Suspense } from 'react'
+import { FC, Suspense, Component } from 'react'
 import { fireEvent, render } from '@testing-library/react'
 import { getTestProvider } from '../testUtils'
 import { useAtom } from '../../src/index'
@@ -7,6 +7,31 @@ import { Observable, Subject } from 'rxjs'
 
 const Provider = getTestProvider()
 
+class ErrorBoundary extends Component<
+  { message?: string },
+  { hasError: boolean }
+> {
+  constructor(props: { message?: string }) {
+    super(props)
+    this.state = { hasError: false }
+  }
+  static getDerivedStateFromError() {
+    return { hasError: true }
+  }
+  render() {
+    return this.state.hasError ? (
+      <div>
+        <div>{this.props.message || 'errored'}</div>
+        <button onClick={() => this.setState({ hasError: false })}>
+          retry
+        </button>
+      </div>
+    ) : (
+      this.props.children
+    )
+  }
+}
+
 it('count state', async () => {
   const observableAtom = atomWithObservable(
     () =>
@@ -16,14 +41,14 @@ it('count state', async () => {
   )
 
   const Counter: FC = () => {
-    const [state$] = useAtom(observableAtom)
+    const [state] = useAtom(observableAtom)
 
-    return <>count: {state$}</>
+    return <>count: {state}</>
   }
 
   const { findByText } = render(
     <Provider>
-      <Suspense fallback="loading...">
+      <Suspense fallback="loading">
         <Counter />
       </Suspense>
     </Provider>
@@ -46,26 +71,56 @@ it('writable count state', async () => {
   })
 
   const Counter: FC = () => {
-    const [state$, dispatch] = useAtom(observableAtom)
+    const [state, dispatch] = useAtom(observableAtom)
 
     return (
       <>
-        count: {state$}
+        count: {state}
         <button onClick={() => dispatch(9)}>button</button>
       </>
     )
   }
 
   const { findByText, getByText } = render(
     <Provider>
-      <Suspense fallback="loading...">
+      <Suspense fallback="loading">
         <Counter />
       </Suspense>
     </Provider>
   )
 
+  await findByText('loading')
   await findByText('count: 1')
 
   fireEvent.click(getByText('button'))
   await findByText('count: 9')
 })
+
+// FIXME we would like to support retry
+it.skip('count state with error', async () => {
+  const myObservable = new Observable<number>((subscriber) => {
+    subscriber.error('err1')
+    subscriber.next(1)
+  })
+  const observableAtom = atomWithObservable(() => myObservable)
+
+  const Counter: React.FC = () => {
+    const [state] = useAtom(observableAtom)
+
+    return <div>count: {state}</div>
+  }
+
+  const { findByText, getByText } = render(
+    <Provider>
+      <ErrorBoundary>
+        <Suspense fallback="loading">
+          <Counter />
+        </Suspense>
+      </ErrorBoundary>
+    </Provider>
+  )
+
+  await findByText('errored')
+  fireEvent.click(getByText('retry'))
+  await findByText('count: 1')
+})