Thilawyn
4478598f15
## Summary - Add `effect-fc-next`, a React 19 integration targeting Effect v4 beta. - Introduce component lifecycles, scoped resources, queries, mutations, forms, lenses, views, and refreshable components. - Add `@effect-view/vite-plugin` for Vite Fast Refresh support. - Add an Effect v4 example application covering the new APIs. - Expand test coverage for both the existing and next-generation packages. - Replace the starter Docusaurus content with complete Effect View documentation while preserving the Effect v3 docs as a versioned snapshot. - Update the landing page, navigation, package scripts, and build output. - Extend CI with linting, tests, package builds, Docker builds, and container publishing. ## Validation - `bun lint:tsc` - `bun lint:biome` - `bun test` - `bun run build` - `bun pack` - Docker image build --------- Co-authored-by: Julien Valverdé <julien.valverde@mailo.com> Reviewed-on: Thilawyn/effect-fc#56
57 lines
1.8 KiB
Markdown
57 lines
1.8 KiB
Markdown
# Effect FC
|
|
|
|
[Effect-TS](https://effect.website/) integration for React 19.2+ that allows you to write function components using Effect generators.
|
|
|
|
This library is in early development. While it is (almost) feature complete and mostly usable, expect bugs and quirks. Things are still being ironed out, so ideas and criticisms are more than welcome.
|
|
|
|
Documentation is currently being written. In the meantime, you can take a look at the `packages/example` directory.
|
|
|
|
## Peer dependencies
|
|
- `effect` 3.19+
|
|
- `react` & `@types/react` 19.2+
|
|
|
|
## Known issues
|
|
- React Refresh doesn't work for Effect FC's yet. Page reload is required to view changes. Regular React components are unaffected.
|
|
|
|
## What writing components looks like
|
|
```typescript
|
|
export class TodosView extends Component.make("TodosView")(function*() {
|
|
const state = yield* TodosState
|
|
const [todos] = yield* Component.useSubscribables([state.subscriptionRef])
|
|
|
|
yield* Component.useOnMount(() => Effect.andThen(
|
|
Console.log("Todos mounted"),
|
|
Effect.addFinalizer(() => Console.log("Todos unmounted")),
|
|
))
|
|
|
|
const Todo = yield* TodoView.use
|
|
|
|
return (
|
|
<Container>
|
|
<Heading align="center">Todos</Heading>
|
|
|
|
<Flex direction="column" align="stretch" gap="2" mt="2">
|
|
<Todo _tag="new" />
|
|
|
|
{Chunk.map(todos, todo =>
|
|
<Todo key={todo.id} _tag="edit" id={todo.id} />
|
|
)}
|
|
</Flex>
|
|
</Container>
|
|
)
|
|
}) {}
|
|
|
|
const Index = Component.make("IndexView")(function*() {
|
|
const context = yield* Component.useLayer(TodosState.Default)
|
|
const Todos = yield* Effect.provide(TodosView.use, context)
|
|
|
|
return <Todos />
|
|
}).pipe(
|
|
Component.withRuntime(runtime.context)
|
|
)
|
|
|
|
export const Route = createFileRoute("/")({
|
|
component: Index
|
|
})
|
|
```
|