Refactor Component

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

@@ -9,8 +9,8 @@ import { runtime } from "@/runtime"
 
 // Generator version
 const RouteComponent = Component.makeUntraced(function* AsyncRendering() {
-    const MemoizedAsyncComponentFC = yield* MemoizedAsyncComponent
-    const AsyncComponentFC = yield* AsyncComponent
+    const MemoizedAsyncComponentFC = yield* MemoizedAsyncComponent.use
+    const AsyncComponentFC = yield* AsyncComponent.use
     const [input, setInput] = React.useState("")
 
     return (
@@ -51,7 +51,7 @@ const RouteComponent = Component.makeUntraced(function* AsyncRendering() {
 
 
 class AsyncComponent extends Component.makeUntraced("AsyncComponent")(function*() {
-    const SubComponentFC = yield* SubComponent
+    const SubComponentFC = yield* SubComponent.use
 
     yield* Effect.sleep("500 millis") // Async operation
     // Cannot use React hooks after the async operation

packages/example/src/routes/dev/context.tsx

@@ -23,7 +23,7 @@ const SubComponent = Component.makeUntraced("SubComponent")(function*() {
 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))
+    const SubComponentFC = yield* Effect.provide(SubComponent.use, yield* Component.useContext(SubServiceLayer))
 
     return (
         <Container>

packages/example/src/routes/dev/memo.tsx

@@ -17,8 +17,8 @@ const RouteComponent = Component.makeUntraced("RouteComponent")(function*() {
                 onChange={e => setValue(e.target.value)}
             />
 
-            {yield* Effect.map(SubComponent, FC => <FC />)}
-            {yield* Effect.map(MemoizedSubComponent, FC => <FC />)}
+            {yield* Effect.map(SubComponent.use, FC => <FC />)}
+            {yield* Effect.map(MemoizedSubComponent.use, FC => <FC />)}
         </Flex>
     )
 }).pipe(

packages/example/src/routes/form.tsx

@@ -70,7 +70,7 @@ class RegisterFormView extends Component.makeUntraced("RegisterFormView")(functi
     ])
 
     const runPromise = yield* Component.useRunPromise()
-    const TextFieldFormInputFC = yield* TextFieldFormInput
+    const TextFieldFormInputFC = yield* TextFieldFormInput.use
 
     yield* Component.useOnMount(() => Effect.gen(function*() {
         yield* Effect.addFinalizer(() => Console.log("RegisterFormView unmounted"))
@@ -117,7 +117,7 @@ class RegisterFormView extends Component.makeUntraced("RegisterFormView")(functi
 
 const RegisterPage = Component.makeUntraced("RegisterPage")(function*() {
     const RegisterFormViewFC = yield* Effect.provide(
-        RegisterFormView,
+        RegisterFormView.use,
         yield* Component.useContext(RegisterForm.Default),
     )
 

packages/example/src/routes/index.tsx

@@ -10,7 +10,7 @@ const TodosStateLive = TodosState.Default("todos")
 
 const Index = Component.makeUntraced("Index")(function*() {
     const TodosFC = yield* Effect.provide(
-        Todos,
+        Todos.use,
         yield* Component.useContext(TodosStateLive),
     )