diff --git a/packages/docs/docs/intro.md b/packages/docs/docs/intro.md index 5f5bcfd..428c9bd 100644 --- a/packages/docs/docs/intro.md +++ b/packages/docs/docs/intro.md @@ -4,7 +4,7 @@ sidebar_position: 1 # Effect FC -Welcome to **Effect FC** – a powerful integration of [Effect-TS](https://effect.website/) with React 19.2+ that enables you to write function components using Effect generators. +Welcome to **Effect FC** (as in: Effect **F**unction **C**omponent) – a powerful integration of [Effect](https://effect.website/) with React 19.2+ that enables you to write React function components using Effect generators. ## What is Effect FC? @@ -12,37 +12,36 @@ Effect FC allows you to harness the full power of Effect-TS within your React co ### Key Features -- **Effect-TS Integration**: Write components using Effect generators for powerful, composable effects +- **Effect Integration**: Write your function component logic using Effect. - **Type Safety**: Full TypeScript support with Effect's comprehensive type system -- **Resource Management**: Automatic cleanup and finalization of resources -- **Dependency Injection**: Built-in support for providing dependencies to components -- **React 19.2+ Compatible**: Leverages the latest React features +- **Dependency Injection**: Built-in support for providing dependencies to components using Effect services. +- **Resource Management**: Automatic cleanup and finalization of component resources using the `Scope` API. ## Quick Example Here's what writing an Effect FC component looks like: ```typescript -export class Todos extends Component.make("Todos")(function*() { +export class TodosView extends Component.make("TodosView")(function*() { const state = yield* TodosState - const [todos] = yield* useSubscribables(state.ref) + const [todos] = yield* Component.useSubscribables([state.subscriptionRef]) - yield* useOnMount(() => Effect.andThen( + yield* Component.useOnMount(() => Effect.andThen( Console.log("Todos mounted"), Effect.addFinalizer(() => Console.log("Todos unmounted")), )) - const TodoFC = yield* Todo + const Todo = yield* TodoView.use return ( Todos - + {Chunk.map(todos, todo => - + )}