useValue and useService

.changeset/brown-moose-draw.md

@@ -0,0 +1,5 @@
+---
+"effect-react": patch
+---
+
+add useValue and useService

package.json

@@ -53,7 +53,7 @@
       "require": "./build/cjs/*.js"
     }
   },
-  "packageManager": "pnpm@8.6.10",
+  "packageManager": "pnpm@8.7.5",
   "peerDependencies": {
     "@effect/data": "^0.18.4",
     "@effect/io": "^0.40.0",

src/RuntimeProvider.ts

@@ -1,4 +1,5 @@
 "use client"
+import type * as Context from "@effect/data/Context"
 import type { LazyArg } from "@effect/data/Function"
 import { pipe } from "@effect/data/Function"
 import * as Effect from "@effect/io/Effect"
@@ -8,6 +9,8 @@ import * as Scope from "@effect/io/Scope"
 import type * as Stream from "@effect/stream/Stream"
 import * as internalUseResult from "effect-react/internal/hooks/useResult"
 import * as internalUseResultCallback from "effect-react/internal/hooks/useResultCallback"
+import * as internalUseService from "effect-react/internal/hooks/useService"
+import * as internalUseValue from "effect-react/internal/hooks/useValue"
 import type * as ResultBag from "effect-react/ResultBag"
 import type { DependencyList } from "react"
 import { createContext } from "react"
@@ -35,6 +38,22 @@ export type UseResultCallback<R> = <Args extends Array<any>, R0 extends R, E, A>
   f: (...args: Args) => Stream.Stream<R0, E, A>
 ) => readonly [ResultBag.ResultBag<E, A>, (...args: Args) => void]
 
+/**
+ * @since 1.0.0
+ * @category hooks
+ */
+export type UseValue<R> = <R0 extends R, A>(
+  stream: Stream.Stream<R0, never, A>,
+  initial: A,
+  deps: DependencyList
+) => A
+
+/**
+ * @since 1.0.0
+ * @category hooks
+ */
+export type UseService<R> = <Tag extends Context.ValidTagsById<R>>(tag: Tag) => Context.Tag.Service<Tag>
+
 /**
  * @since 1.0.0
  * @category models
@@ -43,6 +62,8 @@ export interface ReactEffectBag<R> {
   readonly RuntimeContext: React.Context<Runtime.Runtime<R>>
   readonly useResultCallback: UseResultCallback<R>
   readonly useResult: UseResult<R>
+  readonly useValue: UseValue<R>
+  readonly useService: UseService<R>
 }
 
 /**
@@ -65,7 +86,9 @@ export const makeFromLayer = <R, E>(
   return {
     RuntimeContext,
     useResultCallback: internalUseResultCallback.make(RuntimeContext),
-    useResult: internalUseResult.make(RuntimeContext)
+    useResult: internalUseResult.make(RuntimeContext),
+    useValue: internalUseValue.make(RuntimeContext),
+    useService: internalUseService.make(RuntimeContext)
   }
 }
 
@@ -81,7 +104,9 @@ export const makeFromRuntime = <R>(
   return {
     RuntimeContext,
     useResultCallback: internalUseResultCallback.make(RuntimeContext),
-    useResult: internalUseResult.make(RuntimeContext)
+    useResult: internalUseResult.make(RuntimeContext),
+    useValue: internalUseValue.make(RuntimeContext),
+    useService: internalUseService.make(RuntimeContext)
   }
 }
 
@@ -95,6 +120,8 @@ export const makeFromRuntimeContext = <R>(
   return {
     RuntimeContext,
     useResultCallback: internalUseResultCallback.make(RuntimeContext),
-    useResult: internalUseResult.make(RuntimeContext)
+    useResult: internalUseResult.make(RuntimeContext),
+    useValue: internalUseValue.make(RuntimeContext),
+    useService: internalUseService.make(RuntimeContext)
   }
 }

src/internal/hooks/useService.ts

@@ -0,0 +1,14 @@
+import * as Context from "@effect/data/Context"
+import type * as RuntimeProvider from "effect-react/RuntimeProvider"
+import { useContext, useRef } from "react"
+
+export const make: <R>(
+  runtimeContext: RuntimeProvider.RuntimeContext<R>
+) => RuntimeProvider.UseService<R> = <R>(runtimeContext: RuntimeProvider.RuntimeContext<R>) => {
+  return <Tag extends Context.ValidTagsById<R>>(tag: Tag) => {
+    const runtime = useContext(runtimeContext)
+    const serviceRef = useRef(Context.get(runtime.context, tag))
+
+    return serviceRef.current
+  }
+}

src/internal/hooks/useValue.ts

@@ -0,0 +1,18 @@
+import * as Option from "@effect/data/Option"
+import type * as Stream from "@effect/stream/Stream"
+import * as internalUseResult from "effect-react/internal/hooks/useResult"
+import * as Result from "effect-react/Result"
+import type * as RuntimeProvider from "effect-react/RuntimeProvider"
+import { type DependencyList, useRef } from "react"
+
+export const make: <R>(
+  runtimeContext: RuntimeProvider.RuntimeContext<R>
+) => RuntimeProvider.UseValue<R> = <R>(runtimeContext: RuntimeProvider.RuntimeContext<R>) => {
+  const useResult = internalUseResult.make(runtimeContext)
+  return <R0 extends R, A>(stream: Stream.Stream<R0, never, A>, initial: A, deps: DependencyList) => {
+    const { result } = useResult(() => stream, deps)
+    const initialRef = useRef(initial)
+
+    return Option.getOrElse(Result.getValue(result), () => initialRef.current)
+  }
+}

test/Result.ts

@@ -3,9 +3,9 @@ import * as O from "@effect/data/Option"
 import * as S from "@effect/data/String"
 import * as Cause from "@effect/io/Cause"
 import * as Exit from "@effect/io/Exit"
-import * as fc from "fast-check"
 import * as Result from "effect-react/Result"
 import { result } from "effect-react/test/utils/result"
+import * as fc from "fast-check"
 import { inspect } from "util"
 import { assert, describe, it } from "vitest"
 

test/hooks/useResult.ts

@@ -17,23 +17,28 @@ const { useResult } = RuntimeProvider.makeFromLayer(Layer.succeed(foo, { value:
 describe("useResult", () => {
   it("should run effects", async () => {
     const testEffect = Effect.succeed(1)
-    const { result } = await waitFor(async () => renderHook(() => useResult(() => testEffect, [])))
-    expect(Result.isSuccess(result.current.result)).toBe(true)
+    const { result } = renderHook(() => useResult(() => testEffect, []))
+    expect(Result.isInitial(result.current.result)).toBe(true)
+    await waitFor(() => expect(Result.isSuccess(result.current.result)).toBe(true))
   })
 
   it("should provide context", async () => {
     const testEffect = Effect.map(foo, (_) => _.value)
-    const { result } = await waitFor(async () => renderHook(() => useResult(() => testEffect, [])))
-    await waitFor(() => expect(Result.isSuccess(result.current.result)).toBe(true))
-    assert(Result.isSuccess(result.current.result))
-    expect(result.current.result.value).toBe(1)
+    const { result } = renderHook(() => useResult(() => testEffect, []))
+    expect(Result.isInitial(result.current.result)).toBe(true)
+    await waitFor(() => {
+      assert(Result.isSuccess(result.current.result))
+      return expect(result.current.result.value).toBe(1)
+    })
   })
 
   it("should run streams", async () => {
     const testStream = Stream.succeed(1)
-    const { result } = await waitFor(async () => renderHook(() => useResult(() => testStream, [])))
-    await waitFor(() => expect(Result.isSuccess(result.current.result)).toBe(true))
-    assert(Result.isSuccess(result.current.result))
-    expect(result.current.result.value).toBe(1)
+    const { result } = renderHook(() => useResult(() => testStream, []))
+    expect(Result.isInitial(result.current.result)).toBe(true)
+    await waitFor(() => {
+      assert(Result.isSuccess(result.current.result))
+      return expect(result.current.result.value).toBe(1)
+    })
   })
 })

test/hooks/useResultCallback.ts

@@ -17,20 +17,48 @@ describe("useResultCallback", () => {
   it("should do good", async () => {
     const testEffect = (value: number) => Effect.succeed(value)
 
-    const { result } = await waitFor(async () => renderHook(() => useResultCallback(testEffect)))
+    const { result } = renderHook(() => useResultCallback(testEffect))
 
-    expect(Result.isInitial(result.current[0].result)).toBe(true)
+    assert.isTrue(Result.isInitial(result.current[0].result))
     act(() => {
       result.current[1](1)
     })
-    await waitFor(() => expect(Result.isSuccess(result.current[0].result)).toBe(true))
-    assert(Result.isSuccess(result.current[0].result))
-    expect(result.current[0].result.value).toBe(1)
+    await waitFor(() => {
+      assert(Result.isSuccess(result.current[0].result))
+      return expect(result.current[0].result.value).toBe(1)
+    })
     act(() => {
       result.current[1](2)
     })
-    await waitFor(() => expect(Result.isSuccess(result.current[0].result)).toBe(true))
-    assert(Result.isSuccess(result.current[0].result))
-    expect(result.current[0].result.value).toBe(2)
+    await waitFor(() => {
+      assert(Result.isSuccess(result.current[0].result))
+      return expect(result.current[0].result.value).toBe(2)
+    })
+  })
+
+  it("should do good async", async () => {
+    const testEffect = (value: number) =>
+      Effect.async<never, never, number>((cb) => {
+        setTimeout(() => cb(Effect.succeed(value)), 100)
+      })
+    const { result } = renderHook(() => useResultCallback(testEffect))
+
+    assert.isTrue(Result.isInitial(result.current[0].result))
+    act(() => {
+      result.current[1](1)
+    })
+    await waitFor(() => assert.isTrue(result.current[0].isLoading))
+    await waitFor(() => {
+      assert(Result.isSuccess(result.current[0].result))
+      return expect(result.current[0].result.value).toBe(1)
+    })
+    act(() => {
+      result.current[1](2)
+    })
+    await waitFor(() => assert.isTrue(result.current[0].isRefreshing))
+    await waitFor(() => {
+      assert(Result.isSuccess(result.current[0].result))
+      return expect(result.current[0].result.value).toBe(2)
+    })
   })
 })

test/hooks/useService.ts

@@ -0,0 +1,19 @@
+import * as Context from "@effect/data/Context"
+import * as Layer from "@effect/io/Layer"
+import { renderHook } from "@testing-library/react"
+import * as RuntimeProvider from "effect-react/RuntimeProvider"
+import { describe, expect, it } from "vitest"
+
+interface Foo {
+  value: number
+}
+const foo = Context.Tag<Foo>()
+
+const { useService } = RuntimeProvider.makeFromLayer(Layer.succeed(foo, { value: 1 }))
+
+describe("useService", () => {
+  it("should get service", async () => {
+    const { result } = renderHook(() => useService(foo))
+    expect(result.current.value).toBe(1)
+  })
+})

test/hooks/useValue.ts

@@ -0,0 +1,37 @@
+import * as Context from "@effect/data/Context"
+import * as Effect from "@effect/io/Effect"
+import * as Layer from "@effect/io/Layer"
+import * as Stream from "@effect/stream/Stream"
+import { renderHook, waitFor } from "@testing-library/react"
+import * as RuntimeProvider from "effect-react/RuntimeProvider"
+import { describe, expect, it } from "vitest"
+
+interface Foo {
+  value: number
+}
+const foo = Context.Tag<Foo>()
+
+const { useValue } = RuntimeProvider.makeFromLayer(Layer.succeed(foo, { value: 1 }))
+
+describe("useValue", () => {
+  it("should run effects", async () => {
+    const testEffect = Effect.succeed(1)
+    const { result } = renderHook(() => useValue(testEffect, 0, []))
+    expect(result.current).toBe(0)
+    await waitFor(() => expect(result.current).toBe(1))
+  })
+
+  it("should provide context", async () => {
+    const testEffect = Effect.map(foo, (_) => _.value)
+    const { result } = renderHook(() => useValue(testEffect, 0, []))
+    expect(result.current).toBe(0)
+    await waitFor(() => expect(result.current).toBe(1))
+  })
+
+  it("should run streams", async () => {
+    const testStream = Stream.succeed(1)
+    const { result } = renderHook(() => useValue(testStream, 0, []))
+    expect(result.current).toBe(0)
+    await waitFor(() => expect(result.current).toBe(1))
+  })
+})