From 8443da423552ec7e59e90ac71d090de8d2e910e3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20Valverd=C3=A9?= Date: Sat, 9 Aug 2025 01:16:13 +0200 Subject: [PATCH] Example cleanup --- packages/example/src/lib/TextInput.tsx | 8 ++++---- .../example/src/routes/dev/async-rendering.tsx | 18 ++++++++---------- packages/example/src/routes/dev/memo.tsx | 8 ++++---- packages/example/src/routes/index.tsx | 4 ++-- packages/example/src/todo/Todo.tsx | 4 ++-- packages/example/src/todo/Todos.tsx | 4 ++-- 6 files changed, 22 insertions(+), 24 deletions(-) diff --git a/packages/example/src/lib/TextInput.tsx b/packages/example/src/lib/TextInput.tsx index 969b96d..20a8497 100644 --- a/packages/example/src/lib/TextInput.tsx +++ b/packages/example/src/lib/TextInput.tsx @@ -1,5 +1,5 @@ import { TextField } from "@radix-ui/themes" -import { Effect, Schema } from "effect" +import { Schema } from "effect" import { Component } from "effect-fc" import { useInput } from "effect-fc/hooks" @@ -8,8 +8,8 @@ export namespace TextInput { export interface Props extends Omit, "schema">, TextField.RootProps {} } -export const TextInput = (schema: Schema.Schema) => Component.make( - Effect.fnUntraced(function*(props: TextInput.Props) { +export const TextInput = (schema: Schema.Schema) => Component.makeUntraced( + function* TextInput(props: TextInput.Props) { const input = yield* useInput({ ...props, schema }) return ( (schema: Schema.Schema) => Componen ) - }) + } ) diff --git a/packages/example/src/routes/dev/async-rendering.tsx b/packages/example/src/routes/dev/async-rendering.tsx index c97a918..fff7f45 100644 --- a/packages/example/src/routes/dev/async-rendering.tsx +++ b/packages/example/src/routes/dev/async-rendering.tsx @@ -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 ) -})).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 ) -})).pipe( +}).pipe( // Suspense.suspense, // Suspense.withOptions({ defaultFallback:

Loading...

}), ) {} -const AsyncComponent2 = Suspense.withOptions(Suspense.suspense(AsyncComponent), {}) -type T = Types.Simplify 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 {state} -})) {} +}) {} export const Route = createFileRoute("/dev/async-rendering")({ component: RouteComponent diff --git a/packages/example/src/routes/dev/memo.tsx b/packages/example/src/routes/dev/memo.tsx index 107595e..b5a8d50 100644 --- a/packages/example/src/routes/dev/memo.tsx +++ b/packages/example/src/routes/dev/memo.tsx @@ -7,7 +7,7 @@ import { Component, Memoized } from "effect-fc" import * as React from "react" -const RouteComponent = Component.make(Effect.fnUntraced(function* RouteComponent() { +const RouteComponent = Component.makeUntraced(function* RouteComponent() { const [value, setValue] = React.useState("") return ( @@ -21,14 +21,14 @@ const RouteComponent = Component.make(Effect.fnUntraced(function* RouteComponent {yield* Effect.map(MemoizedSubComponent, FC => )} ) -})).pipe( +}).pipe( Component.withRuntime(runtime.context) ) -class SubComponent extends Component.make(Effect.fnUntraced(function* SubComponent() { +class SubComponent extends Component.makeUntraced(function* SubComponent() { const id = yield* makeUuid4.pipe(Effect.provide(GetRandomValues.CryptoRandom)) return {id} -})) {} +}) {} class MemoizedSubComponent extends Memoized.memo(SubComponent) {} diff --git a/packages/example/src/routes/index.tsx b/packages/example/src/routes/index.tsx index d2cd35c..6ccf8a8 100644 --- a/packages/example/src/routes/index.tsx +++ b/packages/example/src/routes/index.tsx @@ -10,12 +10,12 @@ import { Hooks } from "effect-fc/hooks" const TodosStateLive = TodosState.Default("todos") export const Route = createFileRoute("/")({ - component: Component.make(Effect.fnUntraced(function* Index() { + component: Component.makeUntraced(function* Index() { return yield* Todos.pipe( Effect.map(FC => ), Effect.provide(yield* Hooks.useContext(TodosStateLive, { finalizerExecutionMode: "fork" })), ) - })).pipe( + }).pipe( Component.withRuntime(runtime.context) ) }) diff --git a/packages/example/src/todo/Todo.tsx b/packages/example/src/todo/Todo.tsx index 425e4c4..3eba9c8 100644 --- a/packages/example/src/todo/Todo.tsx +++ b/packages/example/src/todo/Todo.tsx @@ -25,7 +25,7 @@ export type TodoProps = ( | { readonly _tag: "edit", readonly index: number } ) -export class Todo extends Component.make(Effect.fnUntraced(function* Todo(props: TodoProps) { +export class Todo extends Component.makeUntraced(function* Todo(props: TodoProps) { const runtime = yield* Effect.runtime() const state = yield* TodosState @@ -122,6 +122,6 @@ export class Todo extends Component.make(Effect.fnUntraced(function* Todo(props: } ) -})).pipe( +}).pipe( Memoized.memo ) {} diff --git a/packages/example/src/todo/Todos.tsx b/packages/example/src/todo/Todos.tsx index b0b9871..8c1391b 100644 --- a/packages/example/src/todo/Todos.tsx +++ b/packages/example/src/todo/Todos.tsx @@ -6,7 +6,7 @@ import { Todo } from "./Todo" import { TodosState } from "./TodosState.service" -export class Todos extends Component.make(Effect.fnUntraced(function* Todos() { +export class Todos extends Component.makeUntraced(function* Todos() { const state = yield* TodosState const [todos] = yield* Hooks.useSubscribeRefs(state.ref) @@ -30,4 +30,4 @@ export class Todos extends Component.make(Effect.fnUntraced(function* Todos() { ) -})) {} +}) {}