0.1.0 #1

Merged
Thilawyn merged 81 commits from next into master 2025-07-17 21:17:57 +02:00
3 changed files with 46 additions and 7 deletions
Showing only changes of commit f479d6aea1 - Show all commits

View File

@@ -1,9 +1,7 @@
# Reffuse Monorepo # Effect FC Monorepo
Reffuse is a [Effect-TS](https://effect.website/) integration for React 19+ with the aim of integrating the Effect context system within React's component hierarchy, while avoiding touching React's internals. [Effect-TS](https://effect.website/) integration for React 19+ that allows you to write function components using Effect generators.
This monorepo contains: This monorepo contains:
- [The `reffuse` library](packages/reffuse) - [The `reffuse` library](packages/reffuse)
- [`@reffuse/extension-lazyref`, a LazyRef integration for Reffuse](packages/extension-lazyref)
- [`@reffuse/extension-query`, TanStack Query style hooks for Reffuse](packages/extension-query)
- [An example project](packges/example) - [An example project](packges/example)

View File

@@ -1,11 +1,51 @@
# Reffuse # Effect FC
[Effect-TS](https://effect.website/) integration for React 19+ with the aim of integrating the Effect context system within React's component hierarchy, while avoiding touching React's internals. [Effect-TS](https://effect.website/) integration for React 19+ 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.13+ - `effect` 3.15+
- `react` & `@types/react` 19+ - `react` & `@types/react` 19+
## Known issues
- Hot module replacement 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
import { Container, Flex, Heading } from "@radix-ui/themes"
import { Chunk, Console, Effect } from "effect"
import { Component, Hook } from "effect-fc"
import { Todo } from "./Todo"
import { TodosState } from "./TodosState.service"
// Component.Component<never, TodosState | Scope, {}>
// VVV
export const Todos = Component.make(function* Todos() {
const state = yield* TodosState
const [todos] = yield* Hook.useSubscribeRefs(state.ref)
yield* Hook.useOnce(() => Effect.andThen(
Console.log("Todos mounted"),
Effect.addFinalizer(() => Console.log("Todos unmounted")),
))
const VTodo = yield* Component.useFC(Todo)
return (
<Container>
<Heading align="center">Todos</Heading>
<Flex direction="column" align="stretch" gap="2" mt="2">
<VTodo _tag="new" />
{Chunk.map(todos, (v, k) =>
<VTodo key={v.id} _tag="edit" index={k} />
)}
</Flex>
</Container>
)
})
```

View File

@@ -1,5 +1,6 @@
{ {
"name": "effect-fc", "name": "effect-fc",
"description": "Write React function components using Effect generators",
"version": "0.1.0", "version": "0.1.0",
"type": "module", "type": "module",
"files": [ "files": [