This commit is contained in:
@@ -2,14 +2,14 @@ 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 { Effect, Types } from "effect"
|
||||
import { Component, Memoized, Suspense } from "effect-fc"
|
||||
import { Effect } from "effect"
|
||||
import { Component, Memoized } from "effect-fc"
|
||||
import { Hooks } from "effect-fc/hooks"
|
||||
import * as React from "react"
|
||||
|
||||
|
||||
// Generator version
|
||||
const RouteComponent = Component.make(Effect.fnUntraced(function* AsyncRendering() {
|
||||
const RouteComponent = Component.makeUntraced(function* AsyncRendering() {
|
||||
const MemoizedAsyncComponentFC = yield* MemoizedAsyncComponent
|
||||
const AsyncComponentFC = yield* AsyncComponent
|
||||
const [input, setInput] = React.useState("")
|
||||
@@ -25,7 +25,7 @@ const RouteComponent = Component.make(Effect.fnUntraced(function* AsyncRendering
|
||||
<AsyncComponentFC />
|
||||
</Flex>
|
||||
)
|
||||
})).pipe(
|
||||
}).pipe(
|
||||
Component.withRuntime(runtime.context)
|
||||
)
|
||||
|
||||
@@ -51,7 +51,7 @@ const RouteComponent = Component.make(Effect.fnUntraced(function* AsyncRendering
|
||||
// )
|
||||
|
||||
|
||||
class AsyncComponent extends Component.make(Effect.fnUntraced(function* AsyncComponent() {
|
||||
class AsyncComponent extends Component.makeUntraced(function* AsyncComponent() {
|
||||
const SubComponentFC = yield* SubComponent
|
||||
|
||||
yield* Effect.sleep("500 millis") // Async operation
|
||||
@@ -63,18 +63,16 @@ class AsyncComponent extends Component.make(Effect.fnUntraced(function* AsyncCom
|
||||
<SubComponentFC />
|
||||
</Flex>
|
||||
)
|
||||
})).pipe(
|
||||
}).pipe(
|
||||
// Suspense.suspense,
|
||||
// Suspense.withOptions({ defaultFallback: <p>Loading...</p> }),
|
||||
) {}
|
||||
const AsyncComponent2 = Suspense.withOptions(Suspense.suspense(AsyncComponent), {})
|
||||
type T = Types.Simplify<typeof AsyncComponent2>
|
||||
class MemoizedAsyncComponent extends Memoized.memo(AsyncComponent) {}
|
||||
|
||||
class SubComponent extends Component.make(Effect.fnUntraced(function* SubComponent() {
|
||||
class SubComponent extends Component.makeUntraced(function* SubComponent() {
|
||||
const [state] = React.useState(yield* Hooks.useOnce(() => Effect.provide(makeUuid4, GetRandomValues.CryptoRandom)))
|
||||
return <Text>{state}</Text>
|
||||
})) {}
|
||||
}) {}
|
||||
|
||||
export const Route = createFileRoute("/dev/async-rendering")({
|
||||
component: RouteComponent
|
||||
|
||||
Reference in New Issue
Block a user