packages/effect-fc/package.json

@@ -18,8 +18,8 @@
       "default": "./dist/index.js"
     },
     "./hooks": {
-      "types": "./dist/types/hooks.d.ts",
-      "default": "./dist/types/hooks.js"
+      "types": "./dist/hooks/index.d.ts",
+      "default": "./dist/hooks/index.js"
     },
     "./types": {
       "types": "./dist/types/index.d.ts",

packages/example/src/routes/dev/async-rendering.tsx

@@ -3,7 +3,8 @@ import { Flex, Text, TextField } from "@radix-ui/themes"
 import { createFileRoute } from "@tanstack/react-router"
 import { GetRandomValues, makeUuid4 } from "@typed/id"
 import { Effect } from "effect"
-import { Component, Hook, Memoized, Suspense } from "effect-fc"
+import { Component, Memoized, Suspense } from "effect-fc"
+import { Hooks } from "effect-fc/hooks"
 import * as React from "react"
 
 
@@ -69,7 +70,7 @@ class AsyncComponent extends Component.make(function* AsyncComponent() {
 class MemoizedAsyncComponent extends Memoized.memo(AsyncComponent) {}
 
 class SubComponent extends Component.make(function* SubComponent() {
-    const [state] = React.useState(yield* Hook.useOnce(() => Effect.provide(makeUuid4, GetRandomValues.CryptoRandom)))
+    const [state] = React.useState(yield* Hooks.useOnce(() => Effect.provide(makeUuid4, GetRandomValues.CryptoRandom)))
     return <Text>{state}</Text>
 }) {}
 

packages/example/src/routes/index.tsx

@@ -3,7 +3,8 @@ import { Todos } from "@/todo/Todos"
 import { TodosState } from "@/todo/TodosState.service"
 import { createFileRoute } from "@tanstack/react-router"
 import { Effect } from "effect"
-import { Component, Hook } from "effect-fc"
+import { Component } from "effect-fc"
+import { Hooks } from "effect-fc/hooks"
 
 
 const TodosStateLive = TodosState.Default("todos")
@@ -12,7 +13,7 @@ export const Route = createFileRoute("/")({
     component: Component.make(function* Index() {
         return yield* Todos.pipe(
             Effect.map(FC => <FC />),
-            Effect.provide(yield* Hook.useContext(TodosStateLive, { finalizerExecutionMode: "fork" })),
+            Effect.provide(yield* Hooks.useContext(TodosStateLive, { finalizerExecutionMode: "fork" })),
         )
     }).pipe(
         Component.withRuntime(runtime.context)

packages/example/src/todo/Todo.tsx

@@ -2,7 +2,8 @@ import * as Domain from "@/domain"
 import { Box, Button, Flex, IconButton, TextArea } from "@radix-ui/themes"
 import { GetRandomValues, makeUuid4 } from "@typed/id"
 import { Chunk, Effect, Match, Option, Ref, Runtime, SubscriptionRef } from "effect"
-import { Component, Hook, Memoized } from "effect-fc"
+import { Component, Memoized } from "effect-fc"
+import { Hooks } from "effect-fc/hooks"
 import { SubscriptionSubRef } from "effect-fc/types"
 import { FaArrowDown, FaArrowUp } from "react-icons/fa"
 import { FaDeleteLeft } from "react-icons/fa6"
@@ -28,7 +29,7 @@ export class Todo extends Component.make(function* Todo(props: TodoProps) {
     const runtime = yield* Effect.runtime()
     const state = yield* TodosState
 
-    const [ref, contentRef] = yield* Hook.useMemo(() => Match.value(props).pipe(
+    const [ref, contentRef] = yield* Hooks.useMemo(() => Match.value(props).pipe(
         Match.tag("new", () => Effect.andThen(makeTodo, SubscriptionRef.make)),
         Match.tag("edit", ({ index }) => Effect.succeed(SubscriptionSubRef.makeFromChunkRef(state.ref, index))),
         Match.exhaustive,
@@ -39,7 +40,7 @@ export class Todo extends Component.make(function* Todo(props: TodoProps) {
         ] as const),
     ), [props._tag, props.index])
 
-    const [content, size] = yield* Hook.useSubscribeRefs(contentRef, state.sizeRef)
+    const [content, size] = yield* Hooks.useSubscribeRefs(contentRef, state.sizeRef)
 
     return (
         <Flex direction="column" align="stretch" gap="2">

packages/example/src/todo/Todos.tsx

@@ -1,15 +1,16 @@
 import { Container, Flex, Heading } from "@radix-ui/themes"
 import { Chunk, Console, Effect } from "effect"
-import { Component, Hook } from "effect-fc"
+import { Component } from "effect-fc"
+import { Hooks } from "effect-fc/hooks"
 import { Todo } from "./Todo"
 import { TodosState } from "./TodosState.service"
 
 
 export class Todos extends Component.make(function* Todos() {
     const state = yield* TodosState
-    const [todos] = yield* Hook.useSubscribeRefs(state.ref)
+    const [todos] = yield* Hooks.useSubscribeRefs(state.ref)
 
-    yield* Hook.useOnce(() => Effect.andThen(
+    yield* Hooks.useOnce(() => Effect.andThen(
         Console.log("Todos mounted"),
         Effect.addFinalizer(() => Console.log("Todos unmounted")),
     ))