0.2.1 (#26)

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

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

@@ -28,11 +28,11 @@ export class TextFieldFormInput extends Component.makeUntraced("TextFieldFormInp
         // biome-ignore lint/correctness/useHookAtTopLevel: "optional" reactivity not supported
         : { optional: false, ...yield* Form.useInput(props.field, props) }
 
-    const [issues, isValidating, isSubmitting] = yield* Subscribable.useSubscribables(
-        props.field.issuesSubscribable,
-        props.field.isValidatingSubscribable,
-        props.field.isSubmittingSubscribable,
-    )
+    const [issues, isValidating, isSubmitting] = yield* Subscribable.useSubscribables([
+        props.field.issues,
+        props.field.isValidating,
+        props.field.isSubmitting,
+    ])
 
     return (
         <Flex direction="column" gap="1">

packages/example/src/routeTree.gen.ts

@@ -9,6 +9,8 @@
 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
 
 import { Route as rootRouteImport } from './routes/__root'
+import { Route as ResultRouteImport } from './routes/result'
+import { Route as QueryRouteImport } from './routes/query'
 import { Route as FormRouteImport } from './routes/form'
 import { Route as BlankRouteImport } from './routes/blank'
 import { Route as IndexRouteImport } from './routes/index'
@@ -16,6 +18,16 @@ import { Route as DevMemoRouteImport } from './routes/dev/memo'
 import { Route as DevContextRouteImport } from './routes/dev/context'
 import { Route as DevAsyncRenderingRouteImport } from './routes/dev/async-rendering'
 
+const ResultRoute = ResultRouteImport.update({
+  id: '/result',
+  path: '/result',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const QueryRoute = QueryRouteImport.update({
+  id: '/query',
+  path: '/query',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const FormRoute = FormRouteImport.update({
   id: '/form',
   path: '/form',
@@ -51,6 +63,8 @@ export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/blank': typeof BlankRoute
   '/form': typeof FormRoute
+  '/query': typeof QueryRoute
+  '/result': typeof ResultRoute
   '/dev/async-rendering': typeof DevAsyncRenderingRoute
   '/dev/context': typeof DevContextRoute
   '/dev/memo': typeof DevMemoRoute
@@ -59,6 +73,8 @@ export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/blank': typeof BlankRoute
   '/form': typeof FormRoute
+  '/query': typeof QueryRoute
+  '/result': typeof ResultRoute
   '/dev/async-rendering': typeof DevAsyncRenderingRoute
   '/dev/context': typeof DevContextRoute
   '/dev/memo': typeof DevMemoRoute
@@ -68,6 +84,8 @@ export interface FileRoutesById {
   '/': typeof IndexRoute
   '/blank': typeof BlankRoute
   '/form': typeof FormRoute
+  '/query': typeof QueryRoute
+  '/result': typeof ResultRoute
   '/dev/async-rendering': typeof DevAsyncRenderingRoute
   '/dev/context': typeof DevContextRoute
   '/dev/memo': typeof DevMemoRoute
@@ -78,6 +96,8 @@ export interface FileRouteTypes {
     | '/'
     | '/blank'
     | '/form'
+    | '/query'
+    | '/result'
     | '/dev/async-rendering'
     | '/dev/context'
     | '/dev/memo'
@@ -86,6 +106,8 @@ export interface FileRouteTypes {
     | '/'
     | '/blank'
     | '/form'
+    | '/query'
+    | '/result'
     | '/dev/async-rendering'
     | '/dev/context'
     | '/dev/memo'
@@ -94,6 +116,8 @@ export interface FileRouteTypes {
     | '/'
     | '/blank'
     | '/form'
+    | '/query'
+    | '/result'
     | '/dev/async-rendering'
     | '/dev/context'
     | '/dev/memo'
@@ -103,6 +127,8 @@ export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   BlankRoute: typeof BlankRoute
   FormRoute: typeof FormRoute
+  QueryRoute: typeof QueryRoute
+  ResultRoute: typeof ResultRoute
   DevAsyncRenderingRoute: typeof DevAsyncRenderingRoute
   DevContextRoute: typeof DevContextRoute
   DevMemoRoute: typeof DevMemoRoute
@@ -110,6 +136,20 @@ export interface RootRouteChildren {
 
 declare module '@tanstack/react-router' {
   interface FileRoutesByPath {
+    '/result': {
+      id: '/result'
+      path: '/result'
+      fullPath: '/result'
+      preLoaderRoute: typeof ResultRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/query': {
+      id: '/query'
+      path: '/query'
+      fullPath: '/query'
+      preLoaderRoute: typeof QueryRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/form': {
       id: '/form'
       path: '/form'
@@ -159,6 +199,8 @@ const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   BlankRoute: BlankRoute,
   FormRoute: FormRoute,
+  QueryRoute: QueryRoute,
+  ResultRoute: ResultRoute,
   DevAsyncRenderingRoute: DevAsyncRenderingRoute,
   DevContextRoute: DevContextRoute,
   DevMemoRoute: DevMemoRoute,

packages/example/src/routes/form.tsx

@@ -1,6 +1,6 @@
-import { Button, Container, Flex } from "@radix-ui/themes"
+import { Button, Container, Flex, Text } from "@radix-ui/themes"
 import { createFileRoute } from "@tanstack/react-router"
-import { Console, Effect, Option, ParseResult, Schema } from "effect"
+import { Console, Effect, Match, Option, ParseResult, Schema } from "effect"
 import { Component, Form, Subscribable } from "effect-fc"
 import { TextFieldFormInput } from "@/lib/form/TextFieldFormInput"
 import { DateTimeUtcFromZonedInput } from "@/lib/schema"
@@ -23,6 +23,21 @@ const RegisterFormSchema = Schema.Struct({
     birth: Schema.OptionFromSelf(DateTimeUtcFromZonedInput),
 })
 
+const RegisterFormSubmitSchema = Schema.Struct({
+    email: Schema.transformOrFail(
+        Schema.String,
+        Schema.String,
+        {
+            decode: (input, _options, ast) => input !== "admin@admin.com"
+                ? ParseResult.succeed(input)
+                : ParseResult.fail(new ParseResult.Type(ast, input, "This email is already in use.")),
+            encode: ParseResult.succeed,
+        },
+    ),
+    password: Schema.String,
+    birth: Schema.OptionFromSelf(Schema.DateTimeUtcFromSelf),
+})
+
 class RegisterForm extends Effect.Service<RegisterForm>()("RegisterForm", {
     scoped: Form.service({
         schema: RegisterFormSchema.pipe(
@@ -39,19 +54,22 @@ class RegisterForm extends Effect.Service<RegisterForm>()("RegisterForm", {
         ),
 
         initialEncodedValue: { email: "", password: "", birth: Option.none() },
-        onSubmit: v => Effect.sleep("500 millis").pipe(
-            Effect.andThen(Console.log(v)),
-            Effect.andThen(Effect.sync(() => alert("Done!"))),
-        ),
+        f: Effect.fnUntraced(function*([value]) {
+            yield* Effect.sleep("500 millis")
+            return yield* Schema.decode(RegisterFormSubmitSchema)(value)
+        }),
         debounce: "500 millis",
     })
 }) {}
 
 class RegisterFormView extends Component.makeUntraced("RegisterFormView")(function*() {
     const form = yield* RegisterForm
-    const submit = yield* Form.useSubmit(form)
-    const [canSubmit] = yield* Subscribable.useSubscribables(form.canSubmitSubscribable)
+    const [canSubmit, submitResult] = yield* Subscribable.useSubscribables([
+        form.canSubmit,
+        form.mutation.result,
+    ])
 
+    const runPromise = yield* Component.useRunPromise()
     const TextFieldFormInputFC = yield* TextFieldFormInput
 
     yield* Component.useOnMount(() => Effect.gen(function*() {
@@ -64,27 +82,35 @@ class RegisterFormView extends Component.makeUntraced("RegisterFormView")(functi
         <Container width="300">
             <form onSubmit={e => {
                 e.preventDefault()
-                void submit()
+                void runPromise(form.submit)
             }}>
                 <Flex direction="column" gap="2">
                     <TextFieldFormInputFC
-                        field={Form.useField(form, ["email"])}
+                        field={yield* form.field(["email"])}
                     />
 
                     <TextFieldFormInputFC
-                        field={Form.useField(form, ["password"])}
+                        field={yield* form.field(["password"])}
                     />
 
                     <TextFieldFormInputFC
                         optional
                         type="datetime-local"
-                        field={Form.useField(form, ["birth"])}
+                        field={yield* form.field(["birth"])}
                         defaultValue=""
                     />
 
                     <Button disabled={!canSubmit}>Submit</Button>
                 </Flex>
             </form>
+
+            {Match.value(submitResult).pipe(
+                Match.tag("Initial", () => <></>),
+                Match.tag("Running", () => <Text>Submitting...</Text>),
+                Match.tag("Success", () => <Text>Submitted successfully!</Text>),
+                Match.tag("Failure", e => <Text>Error: {e.cause.toString()}</Text>),
+                Match.exhaustive,
+            )}
         </Container>
     )
 }) {}

packages/example/src/routes/query.tsx

@@ -0,0 +1,116 @@
+import { HttpClient, type HttpClientError } from "@effect/platform"
+import { Button, Container, Flex, Heading, Slider, Text } from "@radix-ui/themes"
+import { createFileRoute } from "@tanstack/react-router"
+import { Array, Cause, Chunk, Console, Effect, flow, Match, Option, Schema, Stream } from "effect"
+import { Component, ErrorObserver, Mutation, Query, Result, Subscribable, SubscriptionRef } from "effect-fc"
+import { runtime } from "@/runtime"
+
+
+const Post = Schema.Struct({
+    userId: Schema.Int,
+    id: Schema.Int,
+    title: Schema.String,
+    body: Schema.String,
+})
+
+const ResultView = Component.makeUntraced("Result")(function*() {
+    const runPromise = yield* Component.useRunPromise()
+
+    const [idRef, query, mutation] = yield* Component.useOnMount(() => Effect.gen(function*() {
+        const idRef = yield* SubscriptionRef.make(1)
+        const key = Stream.zipLatest(Stream.make("posts" as const), idRef.changes)
+
+        const query = yield* Query.service({
+            key,
+            f: ([, id]) => HttpClient.HttpClient.pipe(
+                Effect.tap(Effect.sleep("500 millis")),
+                Effect.andThen(client => client.get(`https://jsonplaceholder.typicode.com/posts/${ id }`)),
+                Effect.andThen(response => response.json),
+                Effect.andThen(Schema.decodeUnknown(Post)),
+            ),
+        })
+
+        const mutation = yield* Mutation.make({
+            f: ([id]: readonly [id: number]) => HttpClient.HttpClient.pipe(
+                Effect.tap(Effect.sleep("500 millis")),
+                Effect.andThen(client => client.get(`https://jsonplaceholder.typicode.com/posts/${ id }`)),
+                Effect.andThen(response => response.json),
+                Effect.andThen(Schema.decodeUnknown(Post)),
+            ),
+        })
+
+        return [idRef, query, mutation] as const
+    }))
+
+    const [id, setId] = yield* SubscriptionRef.useSubscriptionRefState(idRef)
+    const [queryResult, mutationResult] = yield* Subscribable.useSubscribables([query.result, mutation.result])
+
+    yield* Component.useOnMount(() => ErrorObserver.ErrorObserver<HttpClientError.HttpClientError>().pipe(
+        Effect.andThen(observer => observer.subscribe),
+        Effect.andThen(Stream.fromQueue),
+        Stream.unwrapScoped,
+        Stream.runForEach(flow(
+            Cause.failures,
+            Chunk.findFirst(e => e._tag === "RequestError" || e._tag === "ResponseError"),
+            Option.match({
+                onSome: e => Console.log("ResultView HttpClient error", e),
+                onNone: () => Effect.void,
+            }),
+        )),
+        Effect.forkScoped,
+    ))
+
+    return (
+        <Container>
+            <Flex direction="column" align="center" gap="2">
+                <Slider
+                    value={[id]}
+                    onValueChange={flow(Array.head, Option.getOrThrow, setId)}
+                />
+
+                <div>
+                    {Match.value(queryResult).pipe(
+                        Match.tag("Running", () => <Text>Loading...</Text>),
+                        Match.tag("Success", result => <>
+                            <Heading>{result.value.title}</Heading>
+                            <Text>{result.value.body}</Text>
+                            {Result.isRefreshing(result) && <Text>Refreshing...</Text>}
+                        </>),
+                        Match.tag("Failure", result =>
+                            <Text>An error has occured: {result.cause.toString()}</Text>
+                        ),
+                        Match.orElse(() => <></>),
+                    )}
+                </div>
+
+                <Flex direction="row" justify="center" align="center" gap="1">
+                    <Button onClick={() => runPromise(query.refresh)}>Refresh</Button>
+                    <Button onClick={() => runPromise(query.refetch)}>Refetch</Button>
+                </Flex>
+
+                <div>
+                    {Match.value(mutationResult).pipe(
+                        Match.tag("Running", () => <Text>Loading...</Text>),
+                        Match.tag("Success", result => <>
+                            <Heading>{result.value.title}</Heading>
+                            <Text>{result.value.body}</Text>
+                            {Result.isRefreshing(result) && <Text>Refreshing...</Text>}
+                        </>),
+                        Match.tag("Failure", result =>
+                            <Text>An error has occured: {result.cause.toString()}</Text>
+                        ),
+                        Match.orElse(() => <></>),
+                    )}
+                </div>
+
+                <Flex direction="row" justify="center" align="center" gap="1">
+                    <Button onClick={() => runPromise(Effect.andThen(idRef, id => mutation.mutate([id])))}>Mutate</Button>
+                </Flex>
+            </Flex>
+        </Container>
+    )
+})
+
+export const Route = createFileRoute("/query")({
+    component: Component.withRuntime(ResultView, runtime.context)
+})

packages/example/src/routes/result.tsx

@@ -0,0 +1,60 @@
+import { HttpClient, type HttpClientError } from "@effect/platform"
+import { Container, Heading, Text } from "@radix-ui/themes"
+import { createFileRoute } from "@tanstack/react-router"
+import { Cause, Chunk, Console, Effect, flow, Match, Option, Schema, Stream } from "effect"
+import { Component, ErrorObserver, Result, Subscribable } from "effect-fc"
+import { runtime } from "@/runtime"
+
+
+const Post = Schema.Struct({
+    userId: Schema.Int,
+    id: Schema.Int,
+    title: Schema.String,
+    body: Schema.String,
+})
+
+const ResultView = Component.makeUntraced("Result")(function*() {
+    const [resultSubscribable] = yield* Component.useOnMount(() => HttpClient.HttpClient.pipe(
+        Effect.andThen(client => client.get("https://jsonplaceholder.typicode.com/posts/1")),
+        Effect.andThen(response => response.json),
+        Effect.andThen(Schema.decodeUnknown(Post)),
+        Effect.tap(Effect.sleep("250 millis")),
+        Result.forkEffect,
+    ))
+    const [result] = yield* Subscribable.useSubscribables([resultSubscribable])
+
+    yield* Component.useOnMount(() => ErrorObserver.ErrorObserver<HttpClientError.HttpClientError>().pipe(
+        Effect.andThen(observer => observer.subscribe),
+        Effect.andThen(Stream.fromQueue),
+        Stream.unwrapScoped,
+        Stream.runForEach(flow(
+            Cause.failures,
+            Chunk.findFirst(e => e._tag === "RequestError" || e._tag === "ResponseError"),
+            Option.match({
+                onSome: e => Console.log("ResultView HttpClient error", e),
+                onNone: () => Effect.void,
+            }),
+        )),
+        Effect.forkScoped,
+    ))
+
+    return (
+        <Container>
+            {Match.value(result).pipe(
+                Match.tag("Running", () => <Text>Loading...</Text>),
+                Match.tag("Success", result => <>
+                    <Heading>{result.value.title}</Heading>
+                    <Text>{result.value.body}</Text>
+                </>),
+                Match.tag("Failure", result =>
+                    <Text>An error has occured: {result.cause.toString()}</Text>
+                ),
+                Match.orElse(() => <></>),
+            )}
+        </Container>
+    )
+})
+
+export const Route = createFileRoute("/result")({
+    component: Component.withRuntime(ResultView, runtime.context)
+})

packages/example/src/todo/Todo.tsx

@@ -1,6 +1,6 @@
 import { Box, Button, Flex, IconButton } from "@radix-ui/themes"
 import { GetRandomValues, makeUuid4 } from "@typed/id"
-import { Chunk, Effect, Match, Option, Ref, Runtime, Schema, Stream } from "effect"
+import { Chunk, type DateTime, Effect, Match, Option, Ref, Schema, Stream } from "effect"
 import { Component, Form, Subscribable } from "effect-fc"
 import { FaArrowDown, FaArrowUp } from "react-icons/fa"
 import { FaDeleteLeft } from "react-icons/fa6"
@@ -31,7 +31,6 @@ export type TodoProps = (
 )
 
 export class Todo extends Component.makeUntraced("Todo")(function*(props: TodoProps) {
-    const runtime = yield* Effect.runtime()
     const state = yield* TodosState
 
     const [
@@ -55,17 +54,15 @@ export class Todo extends Component.makeUntraced("Todo")(function*(props: TodoPr
                     Match.exhaustive,
                 )
             ),
-            onSubmit: function(todo) {
-                return Match.value(props).pipe(
-                    Match.tag("new", () => Ref.update(state.ref, Chunk.prepend(todo)).pipe(
-                        Effect.andThen(makeTodo),
-                        Effect.andThen(Schema.encode(TodoFormSchema)),
-                        Effect.andThen(v => Ref.set(this.encodedValueRef, v)),
-                    )),
-                    Match.tag("edit", ({ id }) => Ref.set(state.getElementRef(id), todo)),
-                    Match.exhaustive,
-                )
-            },
+            f: ([todo, form]) => Match.value(props).pipe(
+                Match.tag("new", () => Ref.update(state.ref, Chunk.prepend(todo)).pipe(
+                    Effect.andThen(makeTodo),
+                    Effect.andThen(Schema.encode(TodoFormSchema)),
+                    Effect.andThen(v => Ref.set(form.encodedValue, v)),
+                )),
+                Match.tag("edit", ({ id }) => Ref.set(state.getElementRef(id), todo)),
+                Match.exhaustive,
+            ),
             autosubmit: props._tag === "edit",
             debounce: "250 millis",
         })
@@ -73,17 +70,19 @@ export class Todo extends Component.makeUntraced("Todo")(function*(props: TodoPr
         return [
             indexRef,
             form,
-            Form.field(form, ["content"]),
-            Form.field(form, ["completedAt"]),
+            yield* form.field(["content"]),
+            yield* form.field(["completedAt"]),
         ] as const
     }), [props._tag, props._tag === "edit" ? props.id : undefined])
 
-    const [index, size, canSubmit] = yield* Subscribable.useSubscribables(
+    const [index, size, canSubmit] = yield* Subscribable.useSubscribables([
         indexRef,
         state.sizeSubscribable,
-        form.canSubmitSubscribable,
-    )
-    const submit = yield* Form.useSubmit(form)
+        form.canSubmit,
+    ])
+
+    const runSync = yield* Component.useRunSync()
+    const runPromise = yield* Component.useRunPromise<DateTime.CurrentTimeZone>()
     const TextFieldFormInputFC = yield* TextFieldFormInput
 
 
@@ -102,7 +101,7 @@ export class Todo extends Component.makeUntraced("Todo")(function*(props: TodoPr
                         />
 
                         {props._tag === "new" &&
-                            <Button disabled={!canSubmit} onClick={() => submit()}>
+                            <Button disabled={!canSubmit} onClick={() => void runPromise(form.submit)}>
                                 Add
                             </Button>
                         }
@@ -114,19 +113,19 @@ export class Todo extends Component.makeUntraced("Todo")(function*(props: TodoPr
                 <Flex direction="column" justify="center" align="center" gap="1">
                     <IconButton
                         disabled={index <= 0}
-                        onClick={() => Runtime.runSync(runtime)(state.moveLeft(props.id))}
+                        onClick={() => runSync(state.moveLeft(props.id))}
                     >
                         <FaArrowUp />
                     </IconButton>
 
                     <IconButton
                         disabled={index >= size - 1}
-                        onClick={() => Runtime.runSync(runtime)(state.moveRight(props.id))}
+                        onClick={() => runSync(state.moveRight(props.id))}
                     >
                         <FaArrowDown />
                     </IconButton>
 
-                    <IconButton onClick={() => Runtime.runSync(runtime)(state.remove(props.id))}>
+                    <IconButton onClick={() => runSync(state.remove(props.id))}>
                         <FaDeleteLeft />
                     </IconButton>
                 </Flex>

packages/example/src/todo/Todos.tsx

@@ -7,7 +7,7 @@ import { TodosState } from "./TodosState.service"
 
 export class Todos extends Component.makeUntraced("Todos")(function*() {
     const state = yield* TodosState
-    const [todos] = yield* Subscribable.useSubscribables(state.ref)
+    const [todos] = yield* Subscribable.useSubscribables([state.ref])
 
     yield* Component.useOnMount(() => Effect.andThen(
         Console.log("Todos mounted"),