Skip to content

Commit d95cf4d

Browse files
committed
chore: bump version to 0.1.3
- Add Services documentation (Effect.Service for shared state/behavior) - Document async services with Suspense integration
1 parent f0f0695 commit d95cf4d

2 files changed

Lines changed: 55 additions & 1 deletion

File tree

README.md

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -148,6 +148,60 @@ Components return `VElement`, `Effect<VElement>`, or `Stream<VElement>`.
148148
| `registry.set(atom, value)` | Set value |
149149
| `registry.update(atom, fn)` | Update with function |
150150

151+
### Services (like React Context)
152+
153+
Use `Effect.Service` to share state and behavior across components:
154+
155+
```tsx
156+
import { Atom, AtomRegistry } from "fibrae";
157+
158+
// Define a service with shared atoms
159+
const themeAtom = Atom.make<"light" | "dark">("dark");
160+
161+
class ThemeService extends Effect.Service<ThemeService>()("ThemeService", {
162+
accessors: true,
163+
effect: Effect.gen(function* () {
164+
const registry = yield* AtomRegistry.AtomRegistry;
165+
return {
166+
getTheme: () => Atom.get(themeAtom),
167+
toggleTheme: () => Effect.sync(() =>
168+
registry.update(themeAtom, (t) => t === "light" ? "dark" : "light")
169+
),
170+
};
171+
}),
172+
}) {}
173+
174+
// Async service with Effect.sleep
175+
class UserService extends Effect.Service<UserService>()("UserService", {
176+
accessors: true,
177+
sync: () => ({
178+
getCurrentUser: () =>
179+
Effect.sleep("1 second").pipe(
180+
Effect.map(() => ({ name: "Alice", role: "admin" }))
181+
),
182+
}),
183+
}) {}
184+
185+
// Components yield from services - Suspense shows fallback during async
186+
const UserCard = () =>
187+
Effect.gen(function* () {
188+
const theme = yield* ThemeService.getTheme();
189+
const user = yield* UserService.getCurrentUser();
190+
return (
191+
<div style={{ background: theme === "dark" ? "#2a2a2a" : "#f0f0f0" }}>
192+
<p>{user.name} ({user.role})</p>
193+
<button onClick={() => ThemeService.toggleTheme()}>Toggle Theme</button>
194+
</div>
195+
);
196+
});
197+
```
198+
199+
Key points:
200+
- Services are Effect programs that yield dependencies
201+
- Use `accessors: true` for static method access (`ThemeService.getTheme()`)
202+
- Async services (with `Effect.sleep`, fetches) work with `Suspense`
203+
- Atom changes trigger re-renders across all components using that atom
204+
151205
### Routing
152206

153207
Router features are available via `fibrae/router`:

packages/fibrae/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "fibrae",
3-
"version": "0.1.2",
3+
"version": "0.1.3",
44
"description": "Effect-first JSX renderer with automatic reactivity",
55
"license": "MIT",
66
"repository": {

0 commit comments

Comments
 (0)