From 440eb38280563609c85108c982cceb68d42c1126 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20Valverd=C3=A9?= <me@julienvalver.de>
Date: Fri, 18 Jul 2025 16:23:15 +0200
Subject: [PATCH] 0.1.1 (#2)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Julien Valverdé <julien.valverde@mailo.com>
Reviewed-on: https://gitea:3000/Thilawyn/effect-fc/pulls/2
---
 .vscode/settings.json                         |  2 +-
 packages/effect-fc/README.md                  |  2 +-
 packages/effect-fc/package.json               |  4 +--
 packages/effect-fc/src/Component.ts           | 15 ++++++++---
 .../effect-fc/src/types/SubscriptionSubRef.ts |  2 +-
 .../src/routes/dev/async-rendering.tsx        | 27 ++++++++++++++++---
 6 files changed, 40 insertions(+), 12 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 55712c1..72446f4 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,3 +1,3 @@
 {
     "typescript.tsdk": "node_modules/typescript/lib"
-}
\ No newline at end of file
+}
diff --git a/packages/effect-fc/README.md b/packages/effect-fc/README.md
index 377b7d7..09f553e 100644
--- a/packages/effect-fc/README.md
+++ b/packages/effect-fc/README.md
@@ -11,7 +11,7 @@ Documentation is currently being written. In the meantime, you can take a look a
 - `react` & `@types/react` 19+
 
 ## Known issues
-- Hot module replacement doesn't work for Effect FC's yet. Page reload is required to view changes. Regular React components are unaffected.
+- React Refresh replacement doesn't work for Effect FC's yet. Page reload is required to view changes. Regular React components are unaffected.
 
 ## What writing components looks like
 ```typescript
diff --git a/packages/effect-fc/package.json b/packages/effect-fc/package.json
index 9ad6f2a..ebc4908 100644
--- a/packages/effect-fc/package.json
+++ b/packages/effect-fc/package.json
@@ -1,7 +1,7 @@
 {
   "name": "effect-fc",
-  "description": "Write React function components using Effect generators",
-  "version": "0.1.0",
+  "description": "Write React function components with Effect",
+  "version": "0.1.1",
   "type": "module",
   "files": [
     "./README.md",
diff --git a/packages/effect-fc/src/Component.ts b/packages/effect-fc/src/Component.ts
index f01360b..85331ac 100644
--- a/packages/effect-fc/src/Component.ts
+++ b/packages/effect-fc/src/Component.ts
@@ -329,15 +329,22 @@ export const withOptions: {
 ))
 
 export const withRuntime: {
-    <E, R, P extends {}>(
+    <T extends Component<any, R, any>, R>(
         context: React.Context<Runtime.Runtime<R>>,
-    ): (self: Component<E, R | Scope.Scope, P>) => React.FC<P>
+    ): (self: T) => React.FC<T extends Suspense
+        ? Component.Props<T> & SuspenseProps
+        : Component.Props<T>
+    >
     <E, R, P extends {}>(
-        self: Component<E, R | Scope.Scope, P>,
+        self: Component<E, R, P> & Suspense,
+        context: React.Context<Runtime.Runtime<R>>,
+    ): React.FC<P & SuspenseProps>
+    <E, R, P extends {}>(
+        self: Component<E, R, P>,
         context: React.Context<Runtime.Runtime<R>>,
     ): React.FC<P>
 } = Function.dual(2, <E, R, P extends {}>(
-    self: Component<E, R | Scope.Scope, P>,
+    self: Component<E, R, P>,
     context: React.Context<Runtime.Runtime<R>>,
 ): React.FC<P> => function WithRuntime(props) {
     const runtime = React.useContext(context)
diff --git a/packages/effect-fc/src/types/SubscriptionSubRef.ts b/packages/effect-fc/src/types/SubscriptionSubRef.ts
index 579362a..407d7e3 100644
--- a/packages/effect-fc/src/types/SubscriptionSubRef.ts
+++ b/packages/effect-fc/src/types/SubscriptionSubRef.ts
@@ -2,7 +2,7 @@ import { Chunk, Effect, Effectable, Option, Readable, Ref, Stream, Subscribable,
 import * as PropertyPath from "./PropertyPath.js"
 
 
-export const SubscriptionSubRefTypeId: unique symbol = Symbol.for("reffuse/types/SubscriptionSubRef")
+export const SubscriptionSubRefTypeId: unique symbol = Symbol.for("effect-fc/types/SubscriptionSubRef")
 export type SubscriptionSubRefTypeId = typeof SubscriptionSubRefTypeId
 
 export interface SubscriptionSubRef<in out A, in out B> extends SubscriptionSubRef.Variance<A, B>, SubscriptionRef.SubscriptionRef<A> {
diff --git a/packages/example/src/routes/dev/async-rendering.tsx b/packages/example/src/routes/dev/async-rendering.tsx
index 7e92581..7b123c9 100644
--- a/packages/example/src/routes/dev/async-rendering.tsx
+++ b/packages/example/src/routes/dev/async-rendering.tsx
@@ -2,11 +2,12 @@ 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 { Effect } from "effect"
 import { Component, Hook } from "effect-fc"
 import * as React from "react"
 
 
+// Generator version
 const RouteComponent = Component.make(function* AsyncRendering() {
     const VMemoizedAsyncComponent = yield* Component.useFC(MemoizedAsyncComponent)
     const VAsyncComponent = yield* Component.useFC(AsyncComponent)
@@ -27,9 +28,29 @@ const RouteComponent = Component.make(function* AsyncRendering() {
     Component.withRuntime(runtime.context)
 )
 
-const AsyncComponent = Component.make(function* AsyncComponent() {
-    yield* Console.log("rendering")
+// Pipeline version
+// const RouteComponent = Component.make("RouteComponent")(() => Effect.Do,
+//     Effect.bind("VMemoizedAsyncComponent", () => Component.useFC(MemoizedAsyncComponent)),
+//     Effect.bind("VAsyncComponent", () => Component.useFC(AsyncComponent)),
+//     Effect.let("input", () => React.useState("")),
 
+//     Effect.map(({ input: [input, setInput], VAsyncComponent, VMemoizedAsyncComponent }) =>
+//         <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() {
     const VSubComponent = yield* Component.useFC(SubComponent)
     yield* Effect.sleep("500 millis")