Thilawyn/effect-fc
1
0
Fork 0
Code Issues 1 Pull Requests 3 Actions Packages Projects Releases Wiki Activity

0.2.3 #33

Merged
Thilawyn merged 12 commits from next into master 2026-01-23 01:50:12 +01:00
Conversation 0 Commits 12 Files Changed 8 +7 -13
1 changed files with 7 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 9965648f33 - Show all commits

20
packages/effect-fc/README.md
View File

@@ -1,31 +1,25 @@
# Effect FC # Effect FC
[Effect-TS](https://effect.website/) integration for React 19+ that allows you to write function components using Effect generators. [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. 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. Documentation is currently being written. In the meantime, you can take a look at the `packages/example` directory.
## Peer dependencies ## Peer dependencies
- `effect` 3.15+ - `effect` 3.19+
- `react` & `@types/react` 19+ - `react` & `@types/react` 19.2+
## Known issues ## Known issues
- React Refresh doesn't work for Effect FC's yet. Page reload is required to view changes. Regular React components are unaffected. - 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 ## What writing components looks like
```typescript ```typescript
import { Component } from "effect-fc" export class Todos extends Component.make("Todos")(function*() {
import { useOnce, useSubscribables } from "effect-fc/Hooks"
import { Todo } from "./Todo"
import { TodosState } from "./TodosState.service"
export class Todos extends Component.makeUntraced("Todos")(function*() {
const state = yield* TodosState const state = yield* TodosState
const [todos] = yield* useSubscribables(state.ref) const [todos] = yield* useSubscribables(state.ref)
yield* useOnce(() => Effect.andThen( yield* useOnMount(() => Effect.andThen(
Console.log("Todos mounted"), Console.log("Todos mounted"),
Effect.addFinalizer(() => Console.log("Todos unmounted")), Effect.addFinalizer(() => Console.log("Todos unmounted")),
)) ))
@@ -49,8 +43,8 @@ export class Todos extends Component.makeUntraced("Todos")(function*() {
const TodosStateLive = TodosState.Default("todos") const TodosStateLive = TodosState.Default("todos")
const Index = Component.makeUntraced("Index")(function*() { const Index = Component.make("Index")(function*() {
const context = yield* useContext(TodosStateLive, { finalizerExecutionMode: "fork" }) const context = yield* useContext(TodosStateLive)
const TodosFC = yield* Effect.provide(Todos, context) const TodosFC = yield* Effect.provide(Todos, context)
return <TodosFC /> return <TodosFC />