Work

packages/effect-components/src/ReactComponent.ts

@@ -1,5 +1,5 @@
 import { Effect, Runtime, type Scope } from "effect"
-import type * as React from "react"
+import * as React from "react"
 
 
 export interface ReactComponent<P, E, R> {
@@ -8,8 +8,28 @@ export interface ReactComponent<P, E, R> {
 
 export const use = <P, E, R>(
     self: ReactComponent<P, E, R>,
-    fn: (Component: React.FC<P>) => React.ReactNode
+    fn: (Component: React.FC<P>) => React.ReactNode,
 ): Effect.Effect<React.ReactNode, never, R | Scope.Scope> => Effect.map(
     Effect.runtime(),
     runtime => fn(props => Runtime.runSync(runtime)(self(props))),
 )
+
+export const useFC = <P, E, R>(
+    self: ReactComponent<P, E, R>
+): Effect.Effect<React.FC<P>, never, R | Scope.Scope> => Effect.map(
+    Effect.runtime(),
+    runtime => props => Runtime.runSync(runtime)(self(props)),
+)
+
+export const createElement = <P, E, R>(
+    self: ReactComponent<P, E, R>,
+    props?: React.Attributes & P | null,
+    ...children: React.ReactNode[]
+): Effect.Effect<React.ReactNode, never, R | Scope.Scope> => Effect.map(
+    Effect.runtime(),
+    runtime => React.createElement(
+        props => Runtime.runSync(runtime)(self(props)),
+        props,
+        ...children,
+    ),
+)

packages/effect-components/src/hooks.ts

@@ -0,0 +1,49 @@
+import { Effect, type ExecutionStrategy, Runtime, Scope } from "effect"
+import * as React from "react"
+
+
+export interface ScopeOptions {
+    readonly finalizerExecutionStrategy?: ExecutionStrategy.ExecutionStrategy
+    readonly finalizerExecutionMode?: "sync" | "fork"
+}
+
+
+export const useScope: Effect.Effect<void> = Effect.gen(function*() {
+
+})
+
+export const useEffect = <E, R>(
+    effect: () => Effect.Effect<void, E, R | Scope.Scope>,
+    deps?: React.DependencyList,
+    options?: ScopeOptions,
+): Effect.Effect<void, never, R> => Effect.gen(function*() {
+    const runtime = yield* Effect.runtime<R>()
+
+    React.useEffect(() => {
+        const { scope, exit } = Effect.Do.pipe(
+            Effect.bind("scope", () => Scope.make(options?.finalizerExecutionStrategy)),
+            Effect.bind("exit", ({ scope }) => Effect.exit(Effect.provideService(effect(), Scope.Scope, scope))),
+            Runtime.runSync(runtime),
+        )
+
+        return () => { Runtime.runSync(runtime)(Scope.close(scope, exit)) }
+    }, deps)
+})
+
+export const useLayoutEffect = <E, R>(
+    effect: () => Effect.Effect<void, E, R | Scope.Scope>,
+    deps?: React.DependencyList,
+    options?: ScopeOptions,
+): Effect.Effect<void, never, R> => Effect.gen(function*() {
+    const runtime = yield* Effect.runtime<R>()
+
+    React.useLayoutEffect(() => {
+        const { scope, exit } = Effect.Do.pipe(
+            Effect.bind("scope", () => Scope.make(options?.finalizerExecutionStrategy)),
+            Effect.bind("exit", ({ scope }) => Effect.exit(Effect.provideService(effect(), Scope.Scope, scope))),
+            Runtime.runSync(runtime),
+        )
+
+        return () => { Runtime.runSync(runtime)(Scope.close(scope, exit)) }
+    }, deps)
+})

packages/effect-components/src/index.ts

@@ -1,2 +1,3 @@
+export * from "./hooks.js"
 export * as ReactComponent from "./ReactComponent.js"
-export { use } from "./ReactComponent.js"
+export { use, useFC, createElement } from "./ReactComponent.js"