This commit is contained in:
42
packages/example/src/routes/dev/context.tsx
Normal file
42
packages/example/src/routes/dev/context.tsx
Normal file
@@ -0,0 +1,42 @@
|
||||
import { Container, Flex, Text, TextField } from "@radix-ui/themes"
|
||||
import { createFileRoute } from "@tanstack/react-router"
|
||||
import { Console, Effect } from "effect"
|
||||
import { Component } from "effect-fc"
|
||||
import * as React from "react"
|
||||
import { runtime } from "@/runtime"
|
||||
|
||||
|
||||
class SubService extends Effect.Service<SubService>()("SubService", {
|
||||
effect: (value: string) => Effect.succeed({ value })
|
||||
}) {}
|
||||
|
||||
const SubComponent = Component.makeUntraced("SubComponent")(function*() {
|
||||
const service = yield* SubService
|
||||
yield* Component.useOnMount(() => Effect.gen(function*() {
|
||||
yield* Effect.addFinalizer(() => Console.log("SubComponent unmounted"))
|
||||
yield* Console.log("SubComponent mounted")
|
||||
}))
|
||||
|
||||
return <Text>{service.value}</Text>
|
||||
})
|
||||
|
||||
const ContextView = Component.makeUntraced("ContextView")(function*() {
|
||||
const [serviceValue, setServiceValue] = React.useState("test")
|
||||
const SubServiceLayer = React.useMemo(() => SubService.Default(serviceValue), [serviceValue])
|
||||
const SubComponentFC = yield* Effect.provide(SubComponent, yield* Component.useContext(SubServiceLayer))
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<Flex direction="column" align="center">
|
||||
<TextField.Root value={serviceValue} onChange={e => setServiceValue(e.target.value)} />
|
||||
<SubComponentFC />
|
||||
</Flex>
|
||||
</Container>
|
||||
)
|
||||
}).pipe(
|
||||
Component.withRuntime(runtime.context)
|
||||
)
|
||||
|
||||
export const Route = createFileRoute("/dev/context")({
|
||||
component: ContextView
|
||||
})
|
||||
Reference in New Issue
Block a user