0.1.1 (#2)

Co-authored-by: Julien Valverdé <julien.valverde@mailo.com>
Reviewed-on: https://gitea:3000/Thilawyn/effect-fc/pulls/2

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
     "typescript.tsdk": "node_modules/typescript/lib"
-}
+}

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

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",

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)

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> {

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")