@typeonce/effect-machine-devtools 0.27.0 → 0.28.0

package/src/internal/browser/chart-model.ts

@@ -5,16 +5,8 @@ import type {
   State as VisualizationState,
   Transition as VisualizationTransition
 } from "../../MachineDocument.js"
-import { type InputField, projectInputSchema } from "./input-form.js"
 import { stateLabel, triggerLabel } from "./visualizer-model.js"
 
-export interface ChartField {
-  readonly key: string
-  readonly label: string
-  readonly type: string
-  readonly required: boolean
-}
-
 export interface ChartActivity {
   readonly id: string
   readonly kind: VisualizationActivity["type"]
@@ -29,7 +21,6 @@ export interface ChartNode {
   readonly children: ReadonlyArray<string>
   readonly active: boolean
   readonly initial: boolean
-  readonly fields: ReadonlyArray<ChartField>
   readonly activities: ReadonlyArray<ChartActivity>
 }
 
@@ -69,53 +60,6 @@ export interface ChartModel {
   readonly initials: ReadonlyArray<ChartInitial>
 }
 
-const literalType = (value: string | number | boolean | null): string =>
-  typeof value === "string" ? JSON.stringify(value) : String(value)
-
-const fieldType = (field: InputField): string => {
-  switch (field._tag) {
-    case "String":
-      return field.format ?? "string"
-    case "Number":
-      return field.integer ? "integer" : "number"
-    case "Boolean":
-      return "boolean"
-    case "Enum":
-      return field.values.map(literalType).join(" | ")
-    case "Literal":
-      return literalType(field.value)
-    case "Object":
-      return "object"
-    case "Array":
-      return `${fieldType(field.item)}[]`
-    case "Union":
-      return field.alternatives.map(fieldType).join(" | ")
-    case "Unsupported":
-      return "unknown"
-  }
-}
-
-const stateFields = (state: VisualizationState): ReadonlyArray<ChartField> => {
-  if (state.valueSchema === null) return []
-  const projected = projectInputSchema(state.valueSchema)
-  if (projected._tag !== "Object") {
-    return [{
-      key: "value",
-      label: projected.title ?? "value",
-      type: fieldType(projected),
-      required: true
-    }]
-  }
-  return projected.fields
-    .filter(({ key }) => key !== "_tag")
-    .map(({ field, key, required }) => ({
-      key,
-      label: field.title ?? key,
-      type: fieldType(field),
-      required
-    }))
-}
-
 const activityLabel = (activity: VisualizationActivity): string => {
   switch (activity.type) {
     case "machine":
@@ -177,7 +121,6 @@ export const makeChartModel = (document: VisualizationDocument): ChartModel => {
     children: [...state.children],
     active: active.has(state.path),
     initial: initialPaths.has(state.path),
-    fields: stateFields(state),
     activities: state.activityIds.flatMap((id): ReadonlyArray<ChartActivity> => {
       const activity = activities.get(id)
       return activity === undefined ? [] : [{ id, kind: activity.type, label: activityLabel(activity) }]

package/src/internal/browser/chart-renderer.ts

@@ -6,8 +6,7 @@ import {
   type LaidOutChart,
   type LaidOutChartNode,
   layoutChart,
-  maxVisibleActivities,
-  maxVisibleFields
+  maxVisibleActivities
 } from "./chart-layout.js"
 import { makeChartModel } from "./chart-model.js"
 
@@ -130,7 +129,7 @@ const statusLabel = (active: boolean, initial: boolean): string => {
 const status = (active: boolean, initial: boolean): HTMLSpanElement => {
   const dot = element(
     "span",
-    `chart-state-status${active ? " is-active" : ""}${initial ? " is-initial" : ""}`
+    `chart-state-status${active ? " is-active" : ""}`
   )
   dot.dataset.initial = String(initial)
   dot.setAttribute("aria-label", statusLabel(active, initial))
@@ -147,26 +146,8 @@ const stateContent = (layout: LaidOutChartNode, stateStatus: HTMLElement): Docum
   heading.append(identity)
   fragment.append(heading)
 
-  if (layout.node.fields.length > 0) {
-    const fields = element("div", "chart-state-section")
-    fields.append(element("div", "chart-section-label", "value"))
-    layout.node.fields.slice(0, maxVisibleFields).forEach((field) => {
-      const row = element("div", "chart-field-row")
-      row.append(
-        element("span", "chart-field-name", `${field.label}${field.required ? "" : "?"}`),
-        element("span", "chart-field-type", field.type)
-      )
-      fields.append(row)
-    })
-    if (layout.node.fields.length > maxVisibleFields) {
-      fields.append(more(layout.node.fields.length - maxVisibleFields))
-    }
-    fragment.append(fields)
-  }
-
   if (layout.node.activities.length > 0) {
     const activities = element("div", "chart-state-section")
-    activities.append(element("div", "chart-section-label", "invokes"))
     layout.node.activities.slice(0, maxVisibleActivities).forEach((activity) => {
       const row = element("div", `chart-activity-row chart-activity-${activity.kind}`)
       row.append(
@@ -314,7 +295,19 @@ const render = (
   const directionArrow = svgElement("path")
   directionArrow.setAttribute("d", "M 1 1 L 7 4 L 1 7 z")
   directionMarker.append(directionArrow)
-  definitions.append(marker, directionMarker)
+  const initialMarker = svgElement("marker")
+  initialMarker.id = "chart-initial-arrow"
+  initialMarker.setAttribute("viewBox", "0 0 8 8")
+  initialMarker.setAttribute("refX", "7")
+  initialMarker.setAttribute("refY", "4")
+  initialMarker.setAttribute("markerWidth", "7")
+  initialMarker.setAttribute("markerHeight", "7")
+  initialMarker.setAttribute("markerUnits", "userSpaceOnUse")
+  initialMarker.setAttribute("orient", "auto")
+  const initialArrow = svgElement("path")
+  initialArrow.setAttribute("d", "M 1 1 L 7 4 L 1 7 z")
+  initialMarker.append(initialArrow)
+  definitions.append(marker, directionMarker, initialMarker)
   svg.append(definitions)
   const nodesLayer = element("div", "chart-nodes")
   const labelsLayer = element("div", "chart-labels")
@@ -340,6 +333,7 @@ const render = (
   const transitionElements = new Map<string, Array<Element>>()
   const edgeElements = new Map<string, Array<Element>>()
   const transitionControls = new Map<string, Array<HTMLButtonElement>>()
+  const parentByState = new Map(layout.nodes.map(({ node }) => [node.path, node.parent]))
   const chartEdges = new Map(
     layout.edges.flatMap((laidOut) => laidOut.kind === "transition" ? [[laidOut.edge.id, laidOut.edge] as const] : [])
   )
@@ -429,13 +423,15 @@ const render = (
   }
 
   for (const laidOut of layout.edges) {
+    const parentChild = laidOut.kind === "transition" && laidOut.edge.target !== null &&
+      parentByState.get(laidOut.edge.target) === laidOut.edge.source
     const group = svgElement(
       "g",
       `chart-edge-group chart-edge-${laidOut.kind}${
         laidOut.kind === "transition"
           ? ` chart-transition-${laidOut.edge.kind} chart-edge-trigger-${laidOut.edge.trigger.type}${
             laidOut.edge.activityKind === null ? "" : ` chart-edge-activity-${laidOut.edge.activityKind}`
-          }`
+          }${parentChild ? " chart-edge-parent-child" : ""}`
           : ""
       }`
     )
@@ -444,10 +440,23 @@ const render = (
     const route = chartEdgePathData(laidOut.points)
     casing.setAttribute("d", route)
     visible.setAttribute("d", route)
-    visible.setAttribute("marker-end", "url(#chart-arrow)")
+    visible.setAttribute(
+      "marker-end",
+      laidOut.kind === "initial" ? "url(#chart-initial-arrow)" : "url(#chart-arrow)"
+    )
     const hit = svgElement("path", "chart-edge-hit")
     hit.setAttribute("d", route)
     group.append(casing, visible)
+    if (parentChild) {
+      const origin = laidOut.points[0]
+      if (origin !== undefined) {
+        const sourceAnchor = svgElement("circle", "chart-edge-parent-origin")
+        sourceAnchor.setAttribute("cx", String(origin.x))
+        sourceAnchor.setAttribute("cy", String(origin.y))
+        sourceAnchor.setAttribute("r", "4")
+        group.append(sourceAnchor)
+      }
+    }
     if (laidOut.kind === "transition") {
       const cue = chartDirectionCue(laidOut.points)
       if (cue !== null) {
@@ -467,10 +476,11 @@ const render = (
       "button",
       `chart-edge-label chart-edge-label-${laidOut.edge.trigger.type}${
         laidOut.edge.activityKind === null ? "" : ` chart-edge-activity-${laidOut.edge.activityKind}`
-      }`,
+      }${parentChild ? " chart-edge-label-parent-child" : ""}`,
       laidOut.edge.label
     )
     label.type = "button"
+    if (parentChild) label.title = "Transition declared by the parent state"
     label.dataset.transitionId = laidOut.edge.transitionId
     position(label, {
       x: laidOut.label.x - laidOut.labelWidth / 2,

package/src/internal/browser/hierarchy-routing-example.ts

@@ -0,0 +1,91 @@
+import { Machine } from "@typeonce/effect-machine"
+import { Effect, Schema } from "effect"
+
+const ReviewState = Schema.TaggedUnion({
+  Review: { title: Schema.String },
+  ReviewFailed: { message: Schema.String },
+  Complete: { slug: Schema.String }
+})
+
+const ReviewStates = Machine.states({
+  Workflow: {
+    initial: "Review",
+    states: {
+      Review: {
+        schema: ReviewState.cases.Review,
+        initial: "Form",
+        states: {
+          Form: {},
+          Failed: ReviewState.cases.ReviewFailed
+        }
+      },
+      Saving: {},
+      Publishing: {},
+      Complete: ReviewState.cases.Complete
+    }
+  }
+})
+
+const ReviewEvents = Machine.events(
+  Schema.TaggedUnion({
+    Submit: { route: Schema.Literals(["save", "invalid"]) }
+  })
+)
+
+const saveReview: Effect.Effect<string, string> = Effect.succeed("deterministic-chart")
+const publishReview = Effect.succeed("deterministic-chart")
+
+export const hierarchyRoutingMachine = Machine.make({
+  id: "hierarchy-routing",
+  states: ReviewStates.states,
+  events: ReviewEvents,
+  initial: (to) =>
+    to.Workflow.initial.resolve(({ target }) =>
+      target.from((workflow) =>
+        workflow.Review.from({ title: "A deterministic chart" }, (review) => review.Form.from())
+      )
+    )
+}).handle({
+  Workflow: {
+    states: {
+      Review: {
+        on: {
+          Submit: (to) =>
+            to.branches({
+              save: {
+                title: "Save the review",
+                target: to.branch.Workflow.Saving()
+              },
+              invalid: {
+                title: "Show validation failure",
+                target: to.local.Failed()
+              }
+            }).resolve(({ event, select }) =>
+              event.route === "save"
+                ? select.save.from()
+                : select.invalid.from({ message: "Add a title before continuing." })
+            )
+        },
+        states: {
+          Form: {},
+          Failed: {}
+        }
+      },
+      Saving: {
+        invoke: (from) =>
+          from.effect("save-review", () => saveReview).onDone((to) => to.branch.Workflow.Publishing()).onFailure((to) =>
+            to.branch.Workflow.Review.Failed().resolve(({ target }) =>
+              target.from({ message: "The review could not be saved." })
+            )
+          )
+      },
+      Publishing: {
+        invoke: (from) =>
+          from.effect("publish-review", () => publishReview).onDone((to) =>
+            to.branch.Workflow.Complete().resolve(({ output, target }) => target.from({ slug: output }))
+          )
+      },
+      Complete: {}
+    }
+  }
+})

package/src/internal/browser/machine-index.ts

@@ -3,6 +3,19 @@ import { mountVisualizer } from "./visualizer.js"
 
 let selectedKey: string | undefined
 
+export const machineIndexScrollLeft = (
+  scrollLeft: number,
+  viewportWidth: number,
+  selectedLeft: number,
+  selectedWidth: number
+): number => {
+  if (selectedLeft < scrollLeft) return selectedLeft
+  const selectedRight = selectedLeft + selectedWidth
+  return selectedRight > scrollLeft + viewportWidth
+    ? selectedRight - viewportWidth
+    : scrollLeft
+}
+
 const createElement = <Tag extends keyof HTMLElementTagNameMap>(
   tag: Tag,
   className?: string,
@@ -36,6 +49,7 @@ const statusLabel = (result: MachineResult): string => {
 }
 
 export const mountMachineIndex = (root: HTMLElement, snapshot: RegistrySnapshot): void => {
+  const previousScrollLeft = root.querySelector<HTMLElement>(".machine-index")?.scrollLeft ?? 0
   const results = [...snapshot.results].sort((left, right) => resultLabel(left).localeCompare(resultLabel(right)))
   if (selectedKey === undefined || !results.some((result) => result.key === selectedKey)) {
     selectedKey = results[0]?.key
@@ -78,4 +92,13 @@ export const mountMachineIndex = (root: HTMLElement, snapshot: RegistrySnapshot)
 
   shell.append(index, view)
   root.replaceChildren(shell)
+  const selected = index.querySelector<HTMLElement>(".machine-row.is-selected")
+  index.scrollLeft = selected === null
+    ? previousScrollLeft
+    : machineIndexScrollLeft(
+      previousScrollLeft,
+      index.clientWidth,
+      selected.offsetLeft,
+      selected.offsetWidth
+    )
 }

package/src/internal/browser/shared-terminal-routing-example.ts

@@ -0,0 +1,141 @@
+import { Machine } from "@typeonce/effect-machine"
+import { Effect, Schema } from "effect"
+
+const ReplicationStates = Machine.states({
+  Connecting: {},
+  IdentifyingSource: {},
+  ReadingServerInfo: {},
+  ReadingSlot: {},
+  CreatingSlot: {},
+  CopyingSnapshot: {},
+  CatchingUp: {},
+  ApplyingChanges: {},
+  Ready: {},
+  SessionUnavailable: {},
+  Stopping: {},
+  Stopped: {},
+  Failed: {}
+})
+
+const ReplicationEvents = Machine.events(
+  Schema.TaggedUnion({
+    Retry: {},
+    SessionUnavailable: {},
+    StopRequested: {}
+  })
+)
+
+const operation = (): Effect.Effect<void, string> => Effect.succeed(undefined)
+
+export const sharedTerminalRoutingMachine = Machine.make({
+  id: "shared-terminal-routing",
+  states: ReplicationStates.states,
+  events: ReplicationEvents,
+  initial: (to) => to.Connecting()
+}).handle({
+  Connecting: {
+    invoke: (from) =>
+      from.effect("connect", operation)
+        .onDone((to) => to.full.IdentifyingSource())
+        .onFailure((to) => to.full.Failed()),
+    on: {
+      SessionUnavailable: (to) => to.full.SessionUnavailable(),
+      StopRequested: (to) => to.full.Stopping()
+    }
+  },
+  IdentifyingSource: {
+    invoke: (from) =>
+      from.effect("identify-source", operation)
+        .onDone((to) => to.full.ReadingServerInfo())
+        .onFailure((to) => to.full.Failed()),
+    on: {
+      SessionUnavailable: (to) => to.full.SessionUnavailable(),
+      StopRequested: (to) => to.full.Stopping()
+    }
+  },
+  ReadingServerInfo: {
+    invoke: (from) =>
+      from.effect("read-server-info", operation)
+        .onDone((to) => to.full.ReadingSlot())
+        .onFailure((to) => to.full.Failed()),
+    on: {
+      SessionUnavailable: (to) => to.full.SessionUnavailable(),
+      StopRequested: (to) => to.full.Stopping()
+    }
+  },
+  ReadingSlot: {
+    invoke: (from) =>
+      from.effect("read-slot", operation)
+        .onDone((to) => to.full.CreatingSlot())
+        .onFailure((to) => to.full.Failed()),
+    on: {
+      SessionUnavailable: (to) => to.full.SessionUnavailable(),
+      StopRequested: (to) => to.full.Stopping()
+    }
+  },
+  CreatingSlot: {
+    invoke: (from) =>
+      from.effect("create-slot", operation)
+        .onDone((to) => to.full.CopyingSnapshot())
+        .onFailure((to) => to.full.Failed()),
+    on: {
+      SessionUnavailable: (to) => to.full.SessionUnavailable(),
+      StopRequested: (to) => to.full.Stopping()
+    }
+  },
+  CopyingSnapshot: {
+    invoke: (from) =>
+      from.effect("copy-snapshot", operation)
+        .onDone((to) => to.full.CatchingUp())
+        .onFailure((to) => to.full.Failed()),
+    on: {
+      SessionUnavailable: (to) => to.full.SessionUnavailable(),
+      StopRequested: (to) => to.full.Stopping()
+    }
+  },
+  CatchingUp: {
+    invoke: (from) =>
+      from.effect("catch-up", operation)
+        .onDone((to) => to.full.ApplyingChanges())
+        .onFailure((to) => to.full.Failed()),
+    on: {
+      SessionUnavailable: (to) => to.full.SessionUnavailable(),
+      StopRequested: (to) => to.full.Stopping()
+    }
+  },
+  ApplyingChanges: {
+    invoke: (from) =>
+      from.effect("apply-changes", operation)
+        .onDone((to) => to.full.Ready())
+        .onFailure((to) => to.full.Failed()),
+    on: {
+      SessionUnavailable: (to) => to.full.SessionUnavailable(),
+      StopRequested: (to) => to.full.Stopping()
+    }
+  },
+  Ready: {
+    on: {
+      SessionUnavailable: (to) => to.full.SessionUnavailable(),
+      StopRequested: (to) => to.full.Stopping()
+    }
+  },
+  SessionUnavailable: {
+    on: {
+      Retry: (to) => to.full.Connecting(),
+      StopRequested: (to) => to.full.Stopping()
+    }
+  },
+  Stopping: {
+    invoke: (from) =>
+      from.effect("stop-session", operation)
+        .onDone((to) => to.full.Stopped())
+        .onFailure((to) => to.full.Failed())
+  },
+  Stopped: {},
+  Failed: {
+    on: {
+      Retry: (to) => to.full.Connecting(),
+      StopRequested: (to) => to.full.Stopping()
+    }
+  }
+})