Julien Valverdé
41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
import { Effect, Layer, SubscriptionRef } from "effect"
|
|
import { Component, Lens, ReactRuntime, Subscribable } from "effect-fc-next"
|
|
import { StrictMode } from "react"
|
|
import { createRoot } from "react-dom/client"
|
|
import "./index.css"
|
|
|
|
|
|
const Counter = Component.make("Counter")(function*() {
|
|
const count = yield* Component.useOnMount(() => Effect.map(
|
|
SubscriptionRef.make(0),
|
|
Lens.fromSubscriptionRef,
|
|
))
|
|
const [value] = yield* Subscribable.useAll([count])
|
|
const increment = yield* Component.useCallbackSync(
|
|
() => Lens.update(count, n => n + 1),
|
|
[count],
|
|
)
|
|
|
|
return (
|
|
<main>
|
|
<h1>Effect FC Next</h1>
|
|
<p>Running on Effect V4.</p>
|
|
<button type="button" onClick={increment}>
|
|
Count: {value}
|
|
</button>
|
|
</main>
|
|
)
|
|
})
|
|
|
|
const runtime = ReactRuntime.make(Layer.empty)
|
|
const CounterApp = Counter.pipe(Component.withRuntime(runtime.context))
|
|
|
|
// biome-ignore lint/style/noNonNullAssertion: the Vite template provides this element
|
|
createRoot(document.getElementById("root")!).render(
|
|
<StrictMode>
|
|
<ReactRuntime.Provider runtime={runtime}>
|
|
<CounterApp />
|
|
</ReactRuntime.Provider>
|
|
</StrictMode>,
|
|
)
|