@typeonce/effect-machine-devtools 0.31.1 → 0.32.0

package/src/internal/browser/invoke-outcomes-example.ts

@@ -9,27 +9,33 @@ class ChildDone extends Schema.TaggedClass<ChildDone>("InvokeGalleryChildDone")(
 }) {}
 class FinishChild extends Schema.TaggedClass<FinishChild>("InvokeGalleryFinishChild")("FinishChild", {}) {}
 
-const ChildStates = Machine.states({
-  Working: ChildWorking,
-  Done: { schema: ChildDone, type: "final", output: Schema.String }
+const ChildStates = Machine.state({
+  initial: "Working",
+  states: {
+    Working: ChildWorking,
+    Done: { schema: ChildDone, type: "final", output: Schema.String }
+  }
 })
 
 export const invokeGalleryChildMachine = Machine.make({
   id: "invoke-gallery-child",
-  states: ChildStates.states,
-  events: Machine.events(FinishChild),
-  initial: (to) => to.Working().resolve(({ target }) => target.decoded(new ChildWorking({ task: "render-preview" })))
+  root: ChildStates,
+  events: Machine.eventsFromSchemas(FinishChild),
+  initialConfiguration: (root) =>
+    root.resolve(({ target }) => target.from((to) => to.Working.decoded(new ChildWorking({ task: "render-preview" }))))
 }).handle({
-  Working: {
-    on: {
-      FinishChild: (to) =>
-        to.full.Done().resolve(({ state, target }) =>
-          target.decoded(new ChildDone({ result: `${state.task}:complete` }))
-        )
+  states: {
+    Working: {
+      on: {
+        FinishChild: (to) =>
+          to.branch.Done().resolve(({ state, target }) =>
+            target.decoded(new ChildDone({ result: `${state.task}:complete` }))
+          )
+      }
+    },
+    Done: {
+      output: ({ state }) => state.result
     }
-  },
-  Done: {
-    output: ({ state }) => state.result
   }
 })
 
@@ -77,155 +83,159 @@ class StreamValue extends Schema.TaggedClass<StreamValue>("InvokeGalleryStreamVa
   value: Schema.Number
 }) {}
 
-const GalleryEvents = Machine.events(RunEffect, RunStream, RunTimer, RunProcess, RunChild, Reset)
-const GalleryInternalEvents = Machine.internalEvents(StreamValue)
+const GalleryEvents = Machine.eventsFromSchemas(RunEffect, RunStream, RunTimer, RunProcess, RunChild, Reset)
+const GalleryInternalEvents = Machine.internalEventsFromSchemas(StreamValue)
 const processLogic = Machine.logic({
   initial: "starting" as "starting" | "ready",
   run: () => Effect.fail("process stopped")
 })
 
-const GalleryStates = Machine.states({
-  Gallery: {
-    schema: Gallery,
-    initial: "Choose",
-    states: {
-      Choose,
-      LoadingDocument,
-      StreamingUpdates,
-      WaitingForTimeout,
-      WatchingProcess,
-      RunningChild
-    }
-  },
-  Completed,
-  Failed
+const GalleryStates = Machine.state({
+  initial: "Gallery",
+  states: {
+    Gallery: {
+      schema: Gallery,
+      initial: "Choose",
+      states: {
+        Choose,
+        LoadingDocument,
+        StreamingUpdates,
+        WaitingForTimeout,
+        WatchingProcess,
+        RunningChild
+      }
+    },
+    Completed,
+    Failed
+  }
 })
 
 export const invokeOutcomesMachine = Machine.make({
   id: "invoke-outcomes",
-  states: GalleryStates.states,
+  root: GalleryStates,
   events: GalleryEvents,
   internalEvents: GalleryInternalEvents,
-  initial: (to) =>
-    to.Gallery.initial.resolve(({ target }) =>
-      target.decoded(
-        new Gallery({ selectedDemo: null }),
-        (gallery) => gallery.Choose.decoded(new Choose({}))
+  initialConfiguration: (root) =>
+    root.resolve(({ target }) =>
+      target.from((to) =>
+        to.Gallery.decoded(new Gallery({ selectedDemo: null }), (gallery) => gallery.Choose.decoded(new Choose({})))
       )
     )
 }).handle({
-  Gallery: {
-    initialize: ({ builder }) => builder.decoded(new Choose({})),
-    on: {
-      Reset: (to) => to.local.Choose().resolve(({ target }) => target.decoded(new Choose({})))
-    },
-    states: {
-      Choose: {
-        on: {
-          RunEffect: (to) =>
-            to.local.LoadingDocument().resolve(({ event, target }) =>
-              target.decoded(new LoadingDocument({ request: event.request }))
-            ),
-          RunStream: (to) =>
-            to.local.StreamingUpdates().resolve(({ target }) => target.decoded(new StreamingUpdates({ values: [] }))),
-          RunTimer: (to) =>
-            to.local.WaitingForTimeout().resolve(({ target }) =>
-              target.decoded(new WaitingForTimeout({ delay: "2 seconds" }))
-            ),
-          RunProcess: (to) =>
-            to.local.WatchingProcess().resolve(({ target }) => target.decoded(new WatchingProcess({ revision: 1 }))),
-          RunChild: (to) => to.local.RunningChild().resolve(({ target }) => target.decoded(new RunningChild({})))
-        }
+  states: {
+    Gallery: {
+      initialize: ({ builder }) => builder.decoded(new Choose({})),
+      on: {
+        Reset: (to) => to.local.Choose().resolve(({ target }) => target.decoded(new Choose({})))
       },
-      LoadingDocument: {
-        invoke: (from) =>
-          from.effect(
-            "load-document",
-            ({ state }) =>
-              state.request === "fail" ? Effect.fail("document unavailable") : Effect.succeed("document loaded")
-          ).onDone((to) =>
-            to.full.Completed().resolve(({ output, target }) =>
-              target.decoded(new Completed({ source: "effect", result: output }))
+      states: {
+        Choose: {
+          on: {
+            RunEffect: (to) =>
+              to.local.LoadingDocument().resolve(({ event, target }) =>
+                target.decoded(new LoadingDocument({ request: event.request }))
+              ),
+            RunStream: (to) =>
+              to.local.StreamingUpdates().resolve(({ target }) => target.decoded(new StreamingUpdates({ values: [] }))),
+            RunTimer: (to) =>
+              to.local.WaitingForTimeout().resolve(({ target }) =>
+                target.decoded(new WaitingForTimeout({ delay: "2 seconds" }))
+              ),
+            RunProcess: (to) =>
+              to.local.WatchingProcess().resolve(({ target }) => target.decoded(new WatchingProcess({ revision: 1 }))),
+            RunChild: (to) => to.local.RunningChild().resolve(({ target }) => target.decoded(new RunningChild({})))
+          }
+        },
+        LoadingDocument: {
+          invoke: (from) =>
+            from.effect(
+              "load-document",
+              ({ state }) =>
+                state.request === "fail" ? Effect.fail("document unavailable") : Effect.succeed("document loaded")
+            ).onDone((to) =>
+              to.branch.Completed().resolve(({ output, target }) =>
+                target.decoded(new Completed({ source: "effect", result: output }))
+              )
+            ).onFailure((to) =>
+              to.branch.Failed().resolve(({ error, target }) =>
+                target.decoded(new Failed({ source: "effect", message: error }))
+              )
             )
-          ).onFailure((to) =>
-            to.full.Failed().resolve(({ error, target }) =>
-              target.decoded(new Failed({ source: "effect", message: error }))
-            )
-          )
-      },
-      StreamingUpdates: {
-        invoke: (from) =>
-          from.stream(
-            "document-updates",
-            () => Stream.fromIterable([1, 2, 3]).pipe(Stream.concat(Stream.fail("stream disconnected")))
-          ).onElement((to) =>
-            to.none.resolve(({ element }, enqueue) => {
-              enqueue.raise(GalleryInternalEvents.StreamValue({ value: element }))
-            })
-          ).onDone((to) =>
-            to.full.Completed().resolve(({ state, target }) =>
-              target.decoded(new Completed({ source: "stream", result: state.values.join(", ") }))
+        },
+        StreamingUpdates: {
+          invoke: (from) =>
+            from.stream(
+              "document-updates",
+              () => Stream.fromIterable([1, 2, 3]).pipe(Stream.concat(Stream.fail("stream disconnected")))
+            ).onElement((to) =>
+              to.none.resolve(({ element }, enqueue) => {
+                enqueue.raise(GalleryInternalEvents.StreamValue({ value: element }))
+              })
+            ).onDone((to) =>
+              to.branch.Completed().resolve(({ state, target }) =>
+                target.decoded(new Completed({ source: "stream", result: state.values.join(", ") }))
+              )
+            ).onFailure((to) =>
+              to.branch.Failed().resolve(({ error, target }) =>
+                target.decoded(new Failed({ source: "stream", message: error }))
+              )
+            ),
+          on: {
+            StreamValue: (to) =>
+              to.local.StreamingUpdates().resolve(({ event, state, target }) =>
+                target.decoded(new StreamingUpdates({ values: [...state.values, event.value] }))
+              )
+          }
+        },
+        WaitingForTimeout: {
+          invoke: (from) =>
+            from.timer("request-timeout", "2 seconds").onDone((to) =>
+              to.branch.Completed().resolve(({ target }) =>
+                target.decoded(new Completed({ source: "timer", result: "timeout elapsed" }))
+              )
             )
-          ).onFailure((to) =>
-            to.full.Failed().resolve(({ error, target }) =>
-              target.decoded(new Failed({ source: "stream", message: error }))
+        },
+        WatchingProcess: {
+          invoke: (from) =>
+            from.logic("status-worker", {
+              address: Machine.childAddress("status-worker"),
+              logic: processLogic
+            }).onFailure((to) =>
+              to.branch.Failed().resolve(({ error, target }) =>
+                target.decoded(new Failed({ source: "process", message: String(error) }))
+              )
+            ).onSnapshot((to) =>
+              to.branches({
+                ready: { title: "Worker reports ready", target: to.branch.Completed() },
+                waiting: { title: "Worker is still starting", target: to.none }
+              }).resolve(({ select, snapshot }) =>
+                snapshot.state === "ready"
+                  ? select.ready.decoded(new Completed({ source: "process", result: "ready" }))
+                  : select.waiting()
+              )
             )
-          ),
-        on: {
-          StreamValue: (to) =>
-            to.local.StreamingUpdates().resolve(({ event, state, target }) =>
-              target.decoded(new StreamingUpdates({ values: [...state.values, event.value] }))
+        },
+        RunningChild: {
+          invoke: (from) =>
+            from.child(InvokedChild).onDone((to) =>
+              to.branch.Completed().resolve(({ output, target }) =>
+                target.decoded(new Completed({ source: "child machine", result: output }))
+              )
             )
         }
-      },
-      WaitingForTimeout: {
-        invoke: (from) =>
-          from.timer("request-timeout", "2 seconds").onDone((to) =>
-            to.full.Completed().resolve(({ target }) =>
-              target.decoded(new Completed({ source: "timer", result: "timeout elapsed" }))
-            )
-          )
-      },
-      WatchingProcess: {
-        invoke: (from) =>
-          from.logic("status-worker", {
-            address: Machine.childAddress("status-worker"),
-            logic: processLogic
-          }).onFailure((to) =>
-            to.full.Failed().resolve(({ error, target }) =>
-              target.decoded(new Failed({ source: "process", message: String(error) }))
-            )
-          ).onSnapshot((to) =>
-            to.branches({
-              ready: { title: "Worker reports ready", target: to.full.Completed() },
-              waiting: { title: "Worker is still starting", target: to.none }
-            }).resolve(({ select, snapshot }) =>
-              snapshot.state === "ready"
-                ? select.ready.decoded(new Completed({ source: "process", result: "ready" }))
-                : select.waiting()
-            )
-          )
-      },
-      RunningChild: {
-        invoke: (from) =>
-          from.child(InvokedChild).onDone((to) =>
-            to.full.Completed().resolve(({ output, target }) =>
-              target.decoded(new Completed({ source: "child machine", result: output }))
-            )
-          )
       }
-    }
-  },
-  Completed: {
-    on: {
-      Reset: (to) =>
-        to.full.Gallery.initial.resolve(({ target }) => target.decoded(new Gallery({ selectedDemo: null })))
-    }
-  },
-  Failed: {
-    on: {
-      Reset: (to) =>
-        to.full.Gallery.initial.resolve(({ target }) => target.decoded(new Gallery({ selectedDemo: null })))
+    },
+    Completed: {
+      on: {
+        Reset: (to) =>
+          to.branch.Gallery.initial.resolve(({ target }) => target.decoded(new Gallery({ selectedDemo: null })))
+      }
+    },
+    Failed: {
+      on: {
+        Reset: (to) =>
+          to.branch.Gallery.initial.resolve(({ target }) => target.decoded(new Gallery({ selectedDemo: null })))
+      }
     }
   }
 })

package/src/internal/browser/layout-resilience-example.ts

@@ -20,33 +20,36 @@ const AuthState = Schema.TaggedUnion({
   Navigating: { href: Schema.String }
 })
 
-const AuthStates = Machine.states({
-  Editing: {
-    schema: AuthState.cases.Editing,
-    initial: "Form",
-    states: {
-      Form: {
-        initial: "Ready",
-        states: {
-          Ready: {},
-          Failed: AuthState.cases.EditingFailed
-        }
-      },
-      SubmittingLogin: {},
-      RequestingVerification: {}
-    }
-  },
-  Verification: {
-    schema: AuthState.cases.Verification,
-    initial: "CodeEntry",
-    states: {
-      CodeEntry: {}
-    }
-  },
-  Navigating: AuthState.cases.Navigating
+const AuthStates = Machine.state({
+  initial: "Editing",
+  states: {
+    Editing: {
+      schema: AuthState.cases.Editing,
+      initial: "Form",
+      states: {
+        Form: {
+          initial: "Ready",
+          states: {
+            Ready: {},
+            Failed: AuthState.cases.EditingFailed
+          }
+        },
+        SubmittingLogin: {},
+        RequestingVerification: {}
+      }
+    },
+    Verification: {
+      schema: AuthState.cases.Verification,
+      initial: "CodeEntry",
+      states: {
+        CodeEntry: {}
+      }
+    },
+    Navigating: AuthState.cases.Navigating
+  }
 })
 
-const AuthEvents = Machine.events(
+const AuthEvents = Machine.eventsFromSchemas(
   Schema.TaggedUnion({
     EmailChanged: { value: Schema.String },
     LoginMethodChanged: { value: LoginMethod },
@@ -57,89 +60,97 @@ const AuthEvents = Machine.events(
 
 export const layoutResilienceMachine = Machine.make({
   id: "layout-resilience",
-  states: AuthStates.states,
+  root: AuthStates,
   events: AuthEvents,
-  initial: (to) =>
-    to.Editing.initial.resolve(({ target }) =>
-      target.from({
-        mode: "login",
-        email: "",
-        loginMethod: "code",
-        password: ""
-      }, (editing) => editing.Form.from((form) => form.Ready.from()))
+  initialConfiguration: (root) =>
+    root.resolve(({ target }) =>
+      target.from((to) =>
+        to.Editing.from({
+          mode: "login",
+          email: "",
+          loginMethod: "code",
+          password: ""
+        }, (editing) => editing.Form.from((form) => form.Ready.from()))
+      )
     )
 }).handle({
-  Editing: {
-    states: {
-      Form: {
-        on: {
-          EmailChanged: (to) =>
-            to.branch.Editing.update(({ current, event, owner }) => owner.from({ ...current, email: event.value })),
-          LoginMethodChanged: (to) =>
-            to.branch.Editing.update(({ current, event, owner }) =>
-              owner.from({ ...current, loginMethod: event.value })
-            ),
-          PasswordChanged: (to) =>
-            to.branch.Editing.update(({ current, event, owner }) => owner.from({ ...current, password: event.value })),
-          Submit: (to) =>
-            to.branches({
-              requestVerification: {
-                title: "Request a verification code",
-                target: to.branch.Editing.RequestingVerification()
-              },
-              login: {
-                title: "Submit password login",
-                target: to.branch.Editing.SubmittingLogin()
-              },
-              invalid: {
-                title: "Show validation failure",
-                target: to.local.Failed()
-              }
-            }).resolve(({ event, select }) => {
-              if (event.route === "login") return select.login.from()
-              if (event.route === "verification") return select.requestVerification.from()
-              return select.invalid.from({ message: "Enter valid authentication details." })
-            })
+  states: {
+    Editing: {
+      states: {
+        Form: {
+          on: {
+            EmailChanged: (to) =>
+              to.branch.Editing.update.resolve(({ current, event, owner }) =>
+                owner.from({ ...current, email: event.value })
+              ),
+            LoginMethodChanged: (to) =>
+              to.branch.Editing.update.resolve(({ current, event, owner }) =>
+                owner.from({ ...current, loginMethod: event.value })
+              ),
+            PasswordChanged: (to) =>
+              to.branch.Editing.update.resolve(({ current, event, owner }) =>
+                owner.from({ ...current, password: event.value })
+              ),
+            Submit: (to) =>
+              to.branches({
+                requestVerification: {
+                  title: "Request a verification code",
+                  target: to.branch.Editing.RequestingVerification()
+                },
+                login: {
+                  title: "Submit password login",
+                  target: to.branch.Editing.SubmittingLogin()
+                },
+                invalid: {
+                  title: "Show validation failure",
+                  target: to.local.Failed()
+                }
+              }).resolve(({ event, select }) => {
+                if (event.route === "login") return select.login.from()
+                if (event.route === "verification") return select.requestVerification.from()
+                return select.invalid.from({ message: "Enter valid authentication details." })
+              })
+          },
+          states: {
+            Ready: {},
+            Failed: {}
+          }
         },
-        states: {
-          Ready: {},
-          Failed: {}
+        SubmittingLogin: {
+          invoke: (from) =>
+            from.effect("submit-login", ({ containingState }) =>
+              containingState.email === "fail"
+                ? Effect.fail("invalid credentials")
+                : Effect.succeed("/creator")).onDone((to) =>
+                to.branch.Navigating().resolve(({ output, target }) => target.from({ href: output }))).onFailure((to) =>
+                to.branch.Editing.Form.Failed().resolve(({ target }) =>
+                  target.from({ message: "Email or password is incorrect." })
+                ))
+        },
+        RequestingVerification: {
+          invoke: (from) =>
+            from.effect("request-verification", ({ containingState }) =>
+              containingState.email === "fail"
+                ? Effect.fail("verification unavailable")
+                : Effect.succeed(undefined)).onDone((to) =>
+                to.branch.Verification.initial.resolve(({ containingState, target }) =>
+                  target.from({
+                    mode: containingState.mode,
+                    email: containingState.email,
+                    code: ""
+                  })
+                )).onFailure((to) =>
+                to.branch.Editing.Form.Failed().resolve(({ target }) =>
+                  target.from({ message: "The verification code could not be sent." })
+                ))
         }
-      },
-      SubmittingLogin: {
-        invoke: (from) =>
-          from.effect("submit-login", ({ containingState }) =>
-            containingState.email === "fail"
-              ? Effect.fail("invalid credentials")
-              : Effect.succeed("/creator")).onDone((to) =>
-              to.full.Navigating().resolve(({ output, target }) => target.from({ href: output }))).onFailure((to) =>
-              to.branch.Editing.Form.Failed().resolve(({ target }) =>
-                target.from({ message: "Email or password is incorrect." })
-              ))
-      },
-      RequestingVerification: {
-        invoke: (from) =>
-          from.effect("request-verification", ({ containingState }) =>
-            containingState.email === "fail"
-              ? Effect.fail("verification unavailable")
-              : Effect.succeed(undefined)).onDone((to) =>
-              to.full.Verification.initial.resolve(({ containingState, target }) =>
-                target.from({
-                  mode: containingState.mode,
-                  email: containingState.email,
-                  code: ""
-                })
-              )).onFailure((to) =>
-              to.branch.Editing.Form.Failed().resolve(({ target }) =>
-                target.from({ message: "The verification code could not be sent." })
-              ))
       }
-    }
-  },
-  Verification: {
-    states: {
-      CodeEntry: {}
-    }
-  },
-  Navigating: {}
+    },
+    Verification: {
+      states: {
+        CodeEntry: {}
+      }
+    },
+    Navigating: {}
+  }
 })