feat: add useValue and useService

simpler hooks for simpler folk

Signed-off-by: Yuval Datner <[email protected]>

Author: datner

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/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))
+  })
+})