0.1.0 (#1)

Co-authored-by: Julien Valverdé <julien.valverde@mailo.com>
Reviewed-on: https://gitea:3000/Thilawyn/effect-fc/pulls/1

packages/example/src/routes/dev/async-rendering.tsx

@@ -0,0 +1,54 @@
+import { runtime } from "@/runtime"
+import { Flex, Text, TextField } from "@radix-ui/themes"
+import { createFileRoute } from "@tanstack/react-router"
+import { GetRandomValues, makeUuid4 } from "@typed/id"
+import { Console, Effect } from "effect"
+import { Component, Hook } from "effect-fc"
+import * as React from "react"
+
+
+const RouteComponent = Component.make(function* AsyncRendering() {
+    const VMemoizedAsyncComponent = yield* Component.useFC(MemoizedAsyncComponent)
+    const VAsyncComponent = yield* Component.useFC(AsyncComponent)
+    const [input, setInput] = React.useState("")
+
+    return (
+        <Flex direction="column" align="stretch" gap="2">
+            <TextField.Root
+                value={input}
+                onChange={e => setInput(e.target.value)}
+            />
+
+            <VMemoizedAsyncComponent />
+            <VAsyncComponent />
+        </Flex>
+    )
+}).pipe(
+    Component.withRuntime(runtime.context)
+)
+
+const AsyncComponent = Component.make(function* AsyncComponent() {
+    yield* Console.log("rendering")
+
+    const VSubComponent = yield* Component.useFC(SubComponent)
+    yield* Effect.sleep("500 millis")
+
+    return (
+        <Flex direction="column" align="stretch">
+            <Text>Rendered!</Text>
+            <VSubComponent />
+        </Flex>
+    )
+}).pipe(
+    Component.suspense
+)
+const MemoizedAsyncComponent = Component.memo(AsyncComponent)
+
+const SubComponent = Component.make(function* SubComponent() {
+    const [state] = React.useState(yield* Hook.useOnce(() => Effect.provide(makeUuid4, GetRandomValues.CryptoRandom)))
+    return <Text>{state}</Text>
+})
+
+export const Route = createFileRoute("/dev/async-rendering")({
+    component: RouteComponent
+})