@@ -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
153207Router features are available via ` fibrae/router ` :
0 commit comments