Example cleanup

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<A, R> extends Omit<useInput.Options<A, R>, "schema">, TextField.RootProps {}
 }
 
-export const TextInput = <A, R>(schema: Schema.Schema<A, string, R>) => Component.make(
+export const TextInput = <A, R>(schema: Schema.Schema<A, string, R>) => Component.makeUntraced(
-    Effect.fnUntraced(function*(props: TextInput.Props<A, R>) {
+    function* TextInput(props: TextInput.Props<A, R>) {
         const input = yield* useInput({ ...props, schema })
         return (
             <TextField.Root
@@ -18,5 +18,5 @@ export const TextInput = <A, R>(schema: Schema.Schema<A, string, R>) => Componen
 
             </TextField.Root>
         )
-    })
+    }
 )

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 { Effect } from "effect"
-import { Component, Memoized, Suspense } from "effect-fc"
+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

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 => <FC />)}
         </Flex>
     )
-})).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 <Text>{id}</Text>
-})) {}
+}) {}
 
 class MemoizedSubComponent extends Memoized.memo(SubComponent) {}
 

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 => <FC />),
             Effect.provide(yield* Hooks.useContext(TodosStateLive, { finalizerExecutionMode: "fork" })),
         )
-    })).pipe(
+    }).pipe(
         Component.withRuntime(runtime.context)
     )
 })

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:
             }
         </Flex>
     )
-})).pipe(
+}).pipe(
     Memoized.memo
 ) {}

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() {
             </Flex>
         </Container>
     )
-})) {}
+}) {}