From 4d99fb1cc12a4d052c2ae153d5c2e07d342a9509 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20Valverd=C3=A9?= Date: Fri, 18 Jul 2025 11:51:07 +0200 Subject: [PATCH 1/6] withRuntime fix --- .vscode/settings.json | 2 +- packages/effect-fc/src/Component.ts | 13 ++++++++++--- 2 files changed, 11 insertions(+), 4 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/src/Component.ts b/packages/effect-fc/src/Component.ts index f01360b..6acfbb5 100644 --- a/packages/effect-fc/src/Component.ts +++ b/packages/effect-fc/src/Component.ts @@ -331,13 +331,20 @@ export const withOptions: { export const withRuntime: { ( context: React.Context>, - ): (self: Component) => React.FC

+ ): (self: Component & Suspense) => React.FC

( - self: Component, + context: React.Context>, + ): (self: Component) => React.FC

+ ( + self: Component & Suspense, + context: React.Context>, + ): React.FC

+ ( + self: Component, context: React.Context>, ): React.FC

} = Function.dual(2, ( - self: Component, + self: Component, context: React.Context>, ): React.FC

=> function WithRuntime(props) { const runtime = React.useContext(context) -- 2.49.1 From 19e74c1673fd954bbaf148903121c73240773050 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20Valverd=C3=A9?= Date: Fri, 18 Jul 2025 12:10:40 +0200 Subject: [PATCH 2/6] Fix --- packages/effect-fc/src/Component.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/effect-fc/src/Component.ts b/packages/effect-fc/src/Component.ts index 6acfbb5..79efb67 100644 --- a/packages/effect-fc/src/Component.ts +++ b/packages/effect-fc/src/Component.ts @@ -331,10 +331,10 @@ export const withOptions: { export const withRuntime: { ( context: React.Context>, - ): (self: Component & Suspense) => React.FC

- ( - context: React.Context>, - ): (self: Component) => React.FC

+ ): { + (self: Component & Suspense): React.FC

+ (self: Component): React.FC

+ } ( self: Component & Suspense, context: React.Context>, -- 2.49.1 From 4baece6811f1ae1bcd8316d9b163dc883281f2c5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20Valverd=C3=A9?= Date: Fri, 18 Jul 2025 15:29:47 +0200 Subject: [PATCH 3/6] Fix --- packages/effect-fc/src/Component.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/effect-fc/src/Component.ts b/packages/effect-fc/src/Component.ts index 79efb67..85331ac 100644 --- a/packages/effect-fc/src/Component.ts +++ b/packages/effect-fc/src/Component.ts @@ -329,12 +329,12 @@ export const withOptions: { )) export const withRuntime: { - ( + , R>( context: React.Context>, - ): { - (self: Component & Suspense): React.FC

- (self: Component): React.FC

- } + ): (self: T) => React.FC & SuspenseProps + : Component.Props + > ( self: Component & Suspense, context: React.Context>, -- 2.49.1 From ea8256122e8ce6b263289a13bf29642d903dee9e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20Valverd=C3=A9?= Date: Fri, 18 Jul 2025 15:34:22 +0200 Subject: [PATCH 4/6] Version bump --- packages/effect-fc/README.md | 2 +- packages/effect-fc/package.json | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) 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", -- 2.49.1 From f6696102452e5a4c4c92ce604c09c3305c1730f0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20Valverd=C3=A9?= Date: Fri, 18 Jul 2025 16:18:03 +0200 Subject: [PATCH 5/6] Fix --- .../src/routes/dev/async-rendering.tsx | 27 ++++++++++++++++--- 1 file changed, 24 insertions(+), 3 deletions(-) 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 }) => +// +// setInput(e.target.value)} +// /> + +// +// +// +// ), +// ).pipe( +// Component.withRuntime(runtime.context) +// ) + + +const AsyncComponent = Component.make(function* AsyncComponent() { const VSubComponent = yield* Component.useFC(SubComponent) yield* Effect.sleep("500 millis") -- 2.49.1 From 74a96d425553cf33fe3169b58bdbd690d2bf9d1b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20Valverd=C3=A9?= Date: Fri, 18 Jul 2025 16:20:41 +0200 Subject: [PATCH 6/6] Fix --- packages/effect-fc/src/types/SubscriptionSubRef.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 extends SubscriptionSubRef.Variance, SubscriptionRef.SubscriptionRef { -- 2.49.1