0.1.5 (#15)

Co-authored-by: Renovate Bot <renovate-bot@valverde.cloud>
Co-authored-by: Julien Valverdé <julien.valverde@mailo.com>
Reviewed-on: #15

packages/effect-fc/package.json

@@ -1,7 +1,7 @@
 {
   "name": "effect-fc",
   "description": "Write React function components with Effect",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "type": "module",
   "files": [
     "./README.md",

packages/effect-fc/src/Component.ts

@@ -55,7 +55,7 @@ const ComponentProto = Object.freeze({
         this: Component<P, A, E, R>
     ) {
         const self = this
-        // biome-ignore lint/style/noNonNullAssertion: context initialization
+        // biome-ignore lint/style/noNonNullAssertion: React ref initialization
         const runtimeRef = React.useRef<Runtime.Runtime<Exclude<R, Scope.Scope>>>(null!)
         runtimeRef.current = yield* Effect.runtime<Exclude<R, Scope.Scope>>()
 

packages/effect-fc/src/Form.ts

@@ -1,10 +1,10 @@
 import * as AsyncData from "@typed/async-data"
-import { Array, Cause, Chunk, type Duration, Effect, Equal, Exit, Fiber, flow, identity, Option, ParseResult, Pipeable, Predicate, pipe, Ref, Schema, type Scope, Stream, type Subscribable, SubscriptionRef } from "effect"
+import { Array, Cause, Chunk, type Duration, Effect, Equal, Exit, Fiber, flow, identity, Option, ParseResult, Pipeable, Predicate, Ref, Schema, type Scope, Stream, SubscriptionRef } from "effect"
 import type { NoSuchElementException } from "effect/Cause"
 import * as React from "react"
 import * as Hooks from "./Hooks/index.js"
 import * as PropertyPath from "./PropertyPath.js"
-import * as SubscribableInternal from "./Subscribable.js"
+import * as Subscribable from "./Subscribable.js"
 import * as SubscriptionSubRef from "./SubscriptionSubRef.js"
 
 
@@ -16,7 +16,7 @@ extends Pipeable.Pipeable {
     readonly [FormTypeId]: FormTypeId
 
     readonly schema: Schema.Schema<A, I, R>
-    readonly submit: (value: NoInfer<A>) => Effect.Effect<SA, SE, SR>
+    readonly onSubmit: (value: NoInfer<A>) => Effect.Effect<SA, SE, SR>
     readonly debounce: Option.Option<Duration.DurationInput>
 
     readonly valueRef: SubscriptionRef.SubscriptionRef<Option.Option<A>>
@@ -34,7 +34,7 @@ extends Pipeable.Class() implements Form<A, I, R, SA, SE, SR> {
 
     constructor(
         readonly schema: Schema.Schema<A, I, R>,
-        readonly submit: (value: NoInfer<A>) => Effect.Effect<SA, SE, SR>,
+        readonly onSubmit: (value: NoInfer<A>) => Effect.Effect<SA, SE, SR>,
         readonly debounce: Option.Option<Duration.DurationInput>,
 
         readonly valueRef: SubscriptionRef.SubscriptionRef<Option.Option<A>>,
@@ -55,7 +55,7 @@ export namespace make {
     export interface Options<in out A, in out I, out R, in out SA = void, in out SE = A, out SR = never> {
         readonly schema: Schema.Schema<A, I, R>
         readonly initialEncodedValue: NoInfer<I>
-        readonly submit: (value: NoInfer<A>) => Effect.Effect<SA, SE, SR>,
+        readonly onSubmit: (value: NoInfer<A>) => Effect.Effect<SA, SE, SR>,
         readonly debounce?: Duration.DurationInput,
     }
 }
@@ -74,7 +74,7 @@ export const make: {
 
     return new FormImpl(
         options.schema,
-        options.submit,
+        options.onSubmit,
         Option.fromNullable(options.debounce),
 
         valueRef,
@@ -83,28 +83,14 @@ export const make: {
         validationFiberRef,
         submitStateRef,
 
-        pipe(
-            <A>([value, error, validationFiber, submitState]: readonly [
-                Option.Option<A>,
-                Option.Option<ParseResult.ParseError>,
-                Option.Option<Fiber.Fiber<void, never>>,
-                AsyncData.AsyncData<SA, SE>,
-            ]) => Option.isSome(value) && Option.isNone(error) && Option.isNone(validationFiber) && !AsyncData.isLoading(submitState),
-
-            filter => SubscribableInternal.make({
-                get: Effect.map(Effect.all([valueRef, errorRef, validationFiberRef, submitStateRef]), filter),
-                get changes() {
-                    return Stream.map(
-                        Stream.zipLatestAll(
-                            valueRef.changes,
-                            errorRef.changes,
-                            validationFiberRef.changes,
-                            submitStateRef.changes,
-                        ),
-                        filter,
-                    )
-                },
-            }),
+        Subscribable.map(
+            Subscribable.zipLatestAll(valueRef, errorRef, validationFiberRef, submitStateRef),
+            ([value, error, validationFiber, submitState]) => (
+                Option.isSome(value) &&
+                Option.isNone(error) &&
+                Option.isNone(validationFiber) &&
+                !AsyncData.isLoading(submitState)
+            ),
         ),
     )
 })
@@ -156,13 +142,14 @@ export const submit = <A, I, R, SA, SE, SR>(
         Effect.andThen(identity),
         Effect.tap(Ref.set(self.submitStateRef, AsyncData.loading())),
         Effect.andThen(flow(
-            self.submit,
+            self.onSubmit as (value: NoInfer<A>) => Effect.Effect<SA, SE | ParseResult.ParseError, SR>,
+            Effect.tapErrorTag("ParseError", e => Ref.set(self.errorRef, Option.some(e as ParseResult.ParseError))),
             Effect.exit,
             Effect.map(Exit.match({
                 onSuccess: a => AsyncData.success(a),
-                onFailure: e => AsyncData.failure(e),
+                onFailure: e => AsyncData.failure(e as Cause.Cause<SE>),
             })),
-            Effect.tap(v => Ref.set(self.submitStateRef, v))
+            Effect.tap(v => Ref.set(self.submitStateRef, v)),
         )),
     ),
 
@@ -185,48 +172,20 @@ export const field = <A, I, R, SA, SE, SR, const P extends PropertyPath.Paths<No
     self: Form<A, I, R, SA, SE, SR>,
     path: P,
 ): FormField<PropertyPath.ValueFromPath<A, P>, PropertyPath.ValueFromPath<I, P>> => new FormFieldImpl(
-    pipe(
-        Option.match({
-            onSome: (v: A) => Option.map(PropertyPath.get(v, path), Option.some),
-            onNone: () => Option.some(Option.none()),
-        }),
-        filter => SubscribableInternal.make({
-            get: Effect.flatMap(self.valueRef, filter),
-            get changes() { return Stream.flatMap(self.valueRef.changes, filter) },
-        }),
-    ),
-
+    Subscribable.mapEffect(self.valueRef, Option.match({
+        onSome: v => Option.map(PropertyPath.get(v, path), Option.some),
+        onNone: () => Option.some(Option.none()),
+    })),
     SubscriptionSubRef.makeFromPath(self.encodedValueRef, path),
-
-    pipe(
-        Option.match({
-            onSome: (v: ParseResult.ParseError) => Effect.andThen(
-                ParseResult.ArrayFormatter.formatError(v),
-                Array.filter(issue => PropertyPath.equivalence(issue.path, path)),
-            ),
-            onNone: () => Effect.succeed([]),
-        }),
-        filter => SubscribableInternal.make({
-            get: Effect.flatMap(self.errorRef.get, filter),
-            get changes() { return Stream.flatMap(self.errorRef.changes, filter) },
-        }),
-    ),
-
-    pipe(
-        Option.isSome,
-        filter => SubscribableInternal.make({
-            get: Effect.map(self.validationFiberRef.get, filter),
-            get changes() { return Stream.map(self.validationFiberRef.changes, filter) },
-        }),
-    ),
-
-    pipe(
-        AsyncData.isLoading,
-        filter => SubscribableInternal.make({
-            get: Effect.map(self.submitStateRef, filter),
-            get changes() { return Stream.map(self.submitStateRef.changes, filter) },
-        }),
-    ),
+    Subscribable.mapEffect(self.errorRef, Option.match({
+        onSome: flow(
+            ParseResult.ArrayFormatter.formatError,
+            Effect.map(Array.filter(issue => PropertyPath.equivalence(issue.path, path))),
+        ),
+        onNone: () => Effect.succeed([]),
+    })),
+    Subscribable.map(self.validationFiberRef, Option.isSome),
+    Subscribable.map(self.submitStateRef, AsyncData.isLoading)
 )
 
 

packages/effect-fc/src/Subscribable.ts

@@ -1,24 +1,17 @@
-import { type Effect, Effectable, Readable, type Stream, Subscribable } from "effect"
+import { Effect, Stream, Subscribable } from "effect"
 
 
-class SubscribableImpl<A, E, R>
-extends Effectable.Class<A, E, R> implements Subscribable.Subscribable<A, E, R> {
-    readonly [Readable.TypeId]: Readable.TypeId = Readable.TypeId
-    readonly [Subscribable.TypeId]: Subscribable.TypeId = Subscribable.TypeId
+export const zipLatestAll = <T extends ReadonlyArray<Subscribable.Subscribable<any, any, any>>>(
+    ...subscribables: T
+): Subscribable.Subscribable<
+    [T[number]] extends [never]
+        ? never
+        : { [K in keyof T]: T[K] extends Subscribable.Subscribable<infer A, infer _E, infer _R> ? A : never },
+    [T[number]] extends [never] ? never : T[number] extends Subscribable.Subscribable<infer _A, infer _E, infer _R> ? _E : never,
+    [T[number]] extends [never] ? never : T[number] extends Subscribable.Subscribable<infer _A, infer _E, infer _R> ? _R : never
+> => Subscribable.make({
+    get: Effect.all(subscribables.map(v => v.get)),
+    changes: Stream.zipLatestAll(...subscribables.map(v => v.changes)),
+}) as any
 
-    constructor(
-        readonly get: Effect.Effect<A, E, R>,
-        readonly changes: Stream.Stream<A, E, R>,
-    ) {
-        super()
-    }
-
-    commit() {
-        return this.get
-    }
-}
-
-export const make = <A, E, R>(values: {
-    readonly get: Effect.Effect<A, E, R>
-    readonly changes: Stream.Stream<A, E, R>
-}): Subscribable.Subscribable<A, E, R> => new SubscribableImpl(values.get, values.changes)
+export * from "effect/Subscribable"

packages/example/src/lib/form/TextFieldFormInput.tsx

@@ -1,5 +1,5 @@
 import { Callout, Flex, Spinner, Switch, TextField } from "@radix-ui/themes"
-import { Array, Option } from "effect"
+import { Array, Option, Struct } from "effect"
 import { Component, Form, Hooks } from "effect-fc"
 
 
@@ -10,7 +10,7 @@ extends TextField.RootProps, Form.useInput.Options {
 }
 
 interface OptionalProps
-extends Omit<TextField.RootProps, "defaultValue">, Form.useOptionalInput.Options<string> {
+extends Omit<TextField.RootProps, "optional" | "defaultValue">, Form.useOptionalInput.Options<string> {
     readonly optional: true
     readonly field: Form.FormField<any, Option.Option<string>>
 }
@@ -41,7 +41,7 @@ export class TextFieldFormInput extends Component.makeUntraced("TextFieldFormInp
                     value={input.value}
                     onChange={e => input.setValue(e.target.value)}
                     disabled={(input.optional && !input.enabled) || isSubmitting}
-                    {...props}
+                    {...Struct.omit(props, "optional", "defaultValue")}
                 >
                     {input.optional &&
                         <TextField.Slot side="left">

packages/example/src/routes/form.tsx

@@ -39,7 +39,7 @@ class RegisterForm extends Effect.Service<RegisterForm>()("RegisterForm", {
         ),
 
         initialEncodedValue: { email: "", password: "", birth: Option.none() },
-        submit: v => Effect.sleep("500 millis").pipe(
+        onSubmit: v => Effect.sleep("500 millis").pipe(
             Effect.andThen(Console.log(v)),
             Effect.andThen(Effect.sync(() => alert("Done!"))),
         ),
@@ -47,7 +47,7 @@ class RegisterForm extends Effect.Service<RegisterForm>()("RegisterForm", {
     })
 }) {}
 
-class RegisterPage extends Component.makeUntraced("RegisterPage")(function*() {
+class RegisterFormView extends Component.makeUntraced("RegisterFormView")(function*() {
     const form = yield* RegisterForm
     const submit = yield* Form.useSubmit(form)
     const [canSubmit] = yield* Hooks.useSubscribables(form.canSubmitSubscribable)
@@ -84,16 +84,18 @@ class RegisterPage extends Component.makeUntraced("RegisterPage")(function*() {
     )
 }) {}
 
+const RegisterPage = Component.makeUntraced("RegisterPage")(function*() {
+    const RegisterFormViewFC = yield* Effect.provide(
+        RegisterFormView,
+        yield* Hooks.useContext(RegisterForm.Default, { finalizerExecutionMode: "fork" }),
+    )
+
+    return <RegisterFormViewFC />
+}).pipe(
+    Component.withRuntime(runtime.context)
+)
+
 
 export const Route = createFileRoute("/form")({
-    component: Component.makeUntraced("RegisterRoute")(function*() {
-        const RegisterRouteFC = yield* Effect.provide(
-            RegisterPage,
-            yield* Hooks.useContext(RegisterForm.Default, { finalizerExecutionMode: "fork" }),
-        )
-
-        return <RegisterRouteFC />
-    }).pipe(
-        Component.withRuntime(runtime.context)
-    )
+    component: RegisterPage
 })