@typeonce/effect-machine-devtools 0.24.0 → 0.26.0

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

@@ -3,8 +3,14 @@ import { Schema } from "effect"
 
 // Shared by the live browser UI and its project-inspection fixture.
 
-class Application extends Schema.TaggedClass<Application>("Application")("Application", {}) {}
-class Workflow extends Schema.TaggedClass<Workflow>("Workflow")("Workflow", {}) {}
+class Application extends Schema.TaggedClass<Application>("Application")("Application", {
+  workspace: Schema.String,
+  revision: Schema.Number
+}) {}
+class Workflow extends Schema.TaggedClass<Workflow>("Workflow")("Workflow", {
+  document: Schema.String,
+  unsavedChanges: Schema.Number
+}) {}
 class Idle extends Schema.TaggedClass<Idle>("Idle")("Idle", {}) {}
 class Running extends Schema.TaggedClass<Running>("Running")("Running", {}) {}
 class Editing extends Schema.TaggedClass<Editing>("Editing")("Editing", {}) {}
@@ -59,11 +65,11 @@ const States = Machine.states({
 
 export const snapshot = {
   path: "application" as const,
-  value: new Application({}),
+  value: new Application({ workspace: "effect-machine", revision: 7 }),
   states: {
     workflow: {
       path: "application.workflow" as const,
-      value: new Workflow({}),
+      value: new Workflow({ document: "Machine.ts", unsavedChanges: 2 }),
       state: { path: "application.workflow.idle" as const, value: new Idle({}) }
     },
     connection: {
@@ -103,9 +109,12 @@ export const machine = Machine.make({
                     target.decoded(
                       new Running({}),
                       (running) => running.editing.decoded(new Editing({}))
-                    ).update(owner.decoded(new Workflow({})))
+                    ).update(owner.decoded(new Workflow({ document: "Machine.ts", unsavedChanges: 3 })))
                   ),
-              Refresh: (to) => to.local.update(({ owner }) => owner.decoded(new Workflow({})))
+              Refresh: (to) =>
+                to.local.update(({ owner }) =>
+                  owner.decoded(new Workflow({ document: "Machine.ts", unsavedChanges: 0 }))
+                )
             }
           },
           running: {

package/src/internal/browser/input-form.ts

@@ -1,4 +1,3 @@
-import type { InputIssue } from "../../DevToolsProtocol.js"
 import type { InputSchema } from "../../MachineDocument.js"
 
 type JsonPrimitive = string | number | boolean | null
@@ -217,9 +216,7 @@ const project = (
     case "null":
       return { _tag: "Literal", ...common, value: null }
     case "object": {
-      if (!isRecord(resolved.properties)) {
-        return { _tag: "Object", ...common, fields: [] }
-      }
+      if (!isRecord(resolved.properties)) return { _tag: "Object", ...common, fields: [] }
       const required = new Set(
         Array.isArray(resolved.required)
           ? resolved.required.filter((item): item is string => typeof item === "string")
@@ -253,417 +250,3 @@ const project = (
 }
 
 export const projectInputSchema = (document: InputSchema): InputField => project(document.schema, document.definitions)
-
-export interface InputFormResult {
-  readonly ok: boolean
-  readonly value?: unknown
-}
-
-export interface InputForm {
-  readonly element: HTMLFormElement
-  readonly hasFields: boolean
-  readonly supported: boolean
-  readonly read: () => InputFormResult
-  readonly clearIssues: () => void
-  readonly setIssues: (issues: ReadonlyArray<InputIssue>) => void
-  readonly setPending: (pending: boolean) => void
-}
-
-interface Control {
-  readonly element: HTMLElement
-  readonly interactive: boolean
-  readonly supported: boolean
-  readonly read: () => unknown
-}
-
-interface RenderContext {
-  readonly issueTargets: Map<string, HTMLElement>
-}
-
-let nextControlId = 0
-
-const element = <Tag extends keyof HTMLElementTagNameMap>(
-  tag: Tag,
-  className?: string,
-  text?: string
-): HTMLElementTagNameMap[Tag] => {
-  const node = document.createElement(tag)
-  if (className !== undefined) node.className = className
-  if (text !== undefined) node.textContent = text
-  return node
-}
-
-const valueKey = (value: JsonPrimitive): string => JSON.stringify(value)
-
-const labelText = (field: InputField, fallback: string): string => field.title ?? fallback
-
-const description = (field: InputField): HTMLElement | undefined =>
-  field.description === undefined ? undefined : element("p", "input-description", field.description)
-
-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 "enum"
-    case "Literal":
-      return "literal"
-    case "Object":
-      return "object"
-    case "Array":
-      return `${fieldType(field.item)}[]`
-    case "Union":
-      return "union"
-    case "Unsupported":
-      return "unsupported"
-  }
-}
-
-const fieldConstraints = (field: InputField): ReadonlyArray<string> => {
-  switch (field._tag) {
-    case "String":
-      return [
-        field.minLength === undefined ? undefined : `min ${field.minLength} characters`,
-        field.maxLength === undefined ? undefined : `max ${field.maxLength} characters`,
-        field.pattern === undefined ? undefined : `pattern ${field.pattern}`,
-        field.defaultValue === undefined ? undefined : `default ${field.defaultValue}`
-      ].filter((value): value is string => value !== undefined)
-    case "Number":
-      return [
-        field.minimum === undefined ? undefined : `min ${field.minimum}`,
-        field.maximum === undefined ? undefined : `max ${field.maximum}`,
-        field.defaultValue === undefined ? undefined : `default ${field.defaultValue}`
-      ].filter((value): value is string => value !== undefined)
-    case "Enum":
-      return [
-        `${field.values.length} options`,
-        field.defaultValue === undefined ? undefined : `default ${String(field.defaultValue)}`
-      ].filter((value): value is string => value !== undefined)
-    case "Literal":
-      return [`fixed ${String(field.value)}`]
-    case "Object":
-      return [`${field.fields.length} fields`]
-    case "Array":
-      return [
-        field.minItems === 0 ? undefined : `min ${field.minItems} items`,
-        field.maxItems === undefined ? undefined : `max ${field.maxItems} items`
-      ].filter((value): value is string => value !== undefined)
-    case "Union":
-      return [`${field.alternatives.length} variants`]
-    case "Boolean":
-    case "Unsupported":
-      return []
-  }
-}
-
-const renderControl = (
-  field: InputField,
-  name: string,
-  context: RenderContext,
-  path: ReadonlyArray<string | number>
-): Control => {
-  switch (field._tag) {
-    case "String": {
-      const input = element("input", "input-control")
-      input.type = field.format === "date-time"
-        ? "datetime-local"
-        : field.format === "date"
-        ? "date"
-        : field.format === "email"
-        ? "email"
-        : field.format === "uri"
-        ? "url"
-        : "text"
-      input.name = name
-      input.value = field.defaultValue ?? ""
-      if (field.minLength !== undefined) input.minLength = field.minLength
-      if (field.maxLength !== undefined) input.maxLength = field.maxLength
-      if (field.pattern !== undefined) input.pattern = field.pattern
-      return { element: input, interactive: true, supported: true, read: () => input.value }
-    }
-    case "Number": {
-      const input = element("input", "input-control")
-      input.type = "number"
-      input.name = name
-      input.step = field.integer ? "1" : "any"
-      if (field.defaultValue !== undefined) input.value = String(field.defaultValue)
-      if (field.minimum !== undefined) input.min = String(field.minimum)
-      if (field.maximum !== undefined) input.max = String(field.maximum)
-      return {
-        element: input,
-        interactive: true,
-        supported: true,
-        read: () => input.value === "" ? undefined : Number(input.value)
-      }
-    }
-    case "Boolean": {
-      const wrapper = element("label", "boolean-control")
-      const input = element("input")
-      input.type = "checkbox"
-      input.name = name
-      input.checked = field.defaultValue ?? false
-      wrapper.append(input, element("span", undefined, "Enabled"))
-      return { element: wrapper, interactive: true, supported: true, read: () => input.checked }
-    }
-    case "Enum": {
-      const select = element("select", "input-control")
-      select.name = name
-      field.values.forEach((value) => {
-        const option = element("option", undefined, String(value))
-        option.value = valueKey(value)
-        option.selected = Object.is(value, field.defaultValue)
-        select.append(option)
-      })
-      return {
-        element: select,
-        interactive: true,
-        supported: true,
-        read: () => JSON.parse(select.value) as JsonPrimitive
-      }
-    }
-    case "Literal": {
-      const output = element("output", "literal-control", String(field.value))
-      return { element: output, interactive: false, supported: true, read: () => field.value }
-    }
-    case "Object": {
-      const group = element("fieldset", "input-object")
-      const legend = element("legend", undefined, labelText(field, name))
-      group.append(legend)
-      const controls: Array<{
-        readonly key: string
-        readonly included: HTMLInputElement | undefined
-        readonly control: Control
-      }> = []
-      for (const property of field.fields) {
-        const row = element("div", "input-field")
-        const heading = element("div", "input-field-heading")
-        const label = element("label", "input-label", labelText(property.field, property.key))
-        const identity = element("div", "input-field-identity")
-        identity.append(label, element("span", "input-field-type", fieldType(property.field)))
-        const required = property.required ? element("span", "input-required", "required") : undefined
-        let included: HTMLInputElement | undefined
-        const propertyPath = [...path, property.key]
-        const control = renderControl(property.field, `${name}.${property.key}`, context, propertyPath)
-        const labelled = control.element instanceof HTMLInputElement || control.element instanceof HTMLSelectElement
-          ? control.element
-          : control.element.querySelector<HTMLInputElement | HTMLSelectElement>(":scope > input, :scope > select")
-        if (labelled !== null) {
-          const id = `machine-input-${nextControlId++}`
-          labelled.id = id
-          label.htmlFor = id
-        }
-        if (property.required) {
-          if (control.element instanceof HTMLSelectElement) {
-            control.element.required = true
-          } else if (control.element instanceof HTMLInputElement) {
-            control.element.required = property.field._tag === "Number" ||
-              (property.field._tag === "String" &&
-                (property.field.format !== undefined || (property.field.minLength ?? 0) > 0))
-          }
-          heading.append(identity, required!)
-        } else {
-          const optional = element("label", "input-optional")
-          included = element("input")
-          included.type = "checkbox"
-          optional.append(included, element("span", undefined, "include"))
-          heading.append(identity, optional)
-          control.element.toggleAttribute("inert", true)
-          control.element.classList.add("is-disabled")
-          control.element.querySelectorAll<HTMLInputElement | HTMLSelectElement | HTMLButtonElement>(
-            "input, select, button"
-          ).forEach((item) => item.disabled = true)
-          if (
-            control.element instanceof HTMLInputElement ||
-            control.element instanceof HTMLSelectElement ||
-            control.element instanceof HTMLButtonElement
-          ) control.element.disabled = true
-          included.addEventListener("change", () => {
-            control.element.toggleAttribute("inert", !included!.checked)
-            control.element.classList.toggle("is-disabled", !included!.checked)
-            control.element.querySelectorAll<HTMLInputElement | HTMLSelectElement | HTMLButtonElement>(
-              "input, select, button"
-            ).forEach((item) => item.disabled = !included!.checked)
-            if (
-              control.element instanceof HTMLInputElement ||
-              control.element instanceof HTMLSelectElement ||
-              control.element instanceof HTMLButtonElement
-            ) control.element.disabled = !included!.checked
-          })
-        }
-        const issues = element("div", "input-errors")
-        issues.hidden = true
-        context.issueTargets.set(JSON.stringify(propertyPath), issues)
-        row.append(heading, control.element)
-        const constraints = fieldConstraints(property.field)
-        if (constraints.length > 0) {
-          const metadata = element("div", "input-constraints")
-          constraints.forEach((constraint) => metadata.append(element("span", undefined, constraint)))
-          row.append(metadata)
-        }
-        const details = description(property.field)
-        if (details !== undefined) row.append(details)
-        row.append(issues)
-        group.append(row)
-        controls.push({ key: property.key, included, control })
-      }
-      return {
-        element: group,
-        interactive: controls.some(({ control }) => control.interactive),
-        supported: controls.every(({ control }) => control.supported),
-        read: () =>
-          Object.fromEntries(
-            controls
-              .filter(({ included }) => included === undefined || included.checked)
-              .map(({ key, control }) => [key, control.read()])
-              .filter((entry) => entry[1] !== undefined)
-          )
-      }
-    }
-    case "Array": {
-      const group = element("fieldset", "input-array")
-      group.append(element("legend", undefined, labelText(field, name)))
-      const items = element("div", "input-array-items")
-      const controls: Array<{
-        readonly row: HTMLElement
-        readonly control: Control
-        readonly remove: HTMLButtonElement
-      }> = []
-      const add = element("button", "input-array-add", "Add item")
-      add.type = "button"
-      const refreshActions = (): void => {
-        add.disabled = field.maxItems !== undefined && controls.length >= field.maxItems
-        controls.forEach(({ remove }) => remove.disabled = controls.length <= field.minItems)
-      }
-      const addItem = (): void => {
-        if (field.maxItems !== undefined && controls.length >= field.maxItems) return
-        const row = element("div", "input-array-item")
-        const control = renderControl(field.item, `${name}.${controls.length}`, context, [...path, controls.length])
-        const remove = element("button", "input-array-remove", "Remove")
-        remove.type = "button"
-        remove.addEventListener("click", () => {
-          row.remove()
-          const index = controls.findIndex((item) => item.row === row)
-          if (index >= 0) controls.splice(index, 1)
-          refreshActions()
-        })
-        row.append(control.element, remove)
-        items.append(row)
-        controls.push({ row, control, remove })
-        refreshActions()
-      }
-      for (let index = 0; index < field.minItems; index++) addItem()
-      add.addEventListener("click", addItem)
-      group.append(items, add)
-      return {
-        element: group,
-        interactive: true,
-        supported: controls.every(({ control }) => control.supported) && field.item._tag !== "Unsupported",
-        read: () => controls.map(({ control }) => control.read())
-      }
-    }
-    case "Union": {
-      const group = element("fieldset", "input-union")
-      group.append(element("legend", undefined, labelText(field, name)))
-      const select = element("select", "input-control")
-      const body = element("div", "input-union-body")
-      let selected = 0
-      const controls = field.alternatives.map((alternative, index) => {
-        const control = renderControl(alternative, `${name}.${index}`, context, path)
-        const option = element("option", undefined, labelText(alternative, `Option ${index + 1}`))
-        option.value = String(index)
-        select.append(option)
-        return control
-      })
-      const update = (): void => {
-        selected = Number(select.value)
-        body.replaceChildren(controls[selected]?.element ?? element("div"))
-      }
-      select.addEventListener("change", update)
-      group.append(select, body)
-      update()
-      return {
-        element: group,
-        interactive: true,
-        supported: controls.every(({ supported }) => supported),
-        read: () => controls[selected]?.read()
-      }
-    }
-    case "Unsupported": {
-      const message = element("p", "input-unsupported", field.reason)
-      return { element: message, interactive: false, supported: false, read: () => undefined }
-    }
-  }
-}
-
-export const renderInputForm = (
-  schema: InputSchema,
-  options: {
-    readonly name: string
-    readonly fixed?: Readonly<Record<string, JsonPrimitive>>
-    readonly omit?: ReadonlyArray<string>
-  }
-): InputForm => {
-  const form = element("form", "schema-form")
-  const formIssues = element("div", "input-errors input-errors-form")
-  formIssues.hidden = true
-  const context: RenderContext = { issueTargets: new Map() }
-  const projected = projectInputSchema(schema)
-  const visible = projected._tag === "Object" && options.omit !== undefined
-    ? { ...projected, fields: projected.fields.filter(({ key }) => !options.omit!.includes(key)) }
-    : projected
-  const control = renderControl(visible, options.name, context, [])
-  form.append(formIssues, control.element)
-  const clearIssues = (): void => {
-    formIssues.replaceChildren()
-    formIssues.hidden = true
-    context.issueTargets.forEach((target) => {
-      target.replaceChildren()
-      target.hidden = true
-    })
-  }
-  const setIssues = (issues: ReadonlyArray<InputIssue>): void => {
-    clearIssues()
-    const grouped = new Map<HTMLElement, Array<string>>()
-    for (const issue of issues) {
-      let target: HTMLElement = formIssues
-      for (let length = issue.path.length; length > 0; length--) {
-        const candidate = context.issueTargets.get(JSON.stringify(issue.path.slice(0, length)))
-        if (candidate !== undefined) {
-          target = candidate
-          break
-        }
-      }
-      const messages = grouped.get(target) ?? []
-      if (!messages.includes(issue.message)) messages.push(issue.message)
-      grouped.set(target, messages)
-    }
-    grouped.forEach((messages, target) => {
-      messages.forEach((message) => target.append(element("div", undefined, message)))
-      target.hidden = false
-    })
-  }
-  return {
-    element: form,
-    hasFields: control.interactive,
-    supported: control.supported,
-    read: () => {
-      clearIssues()
-      if (!form.reportValidity() || !control.supported) return { ok: false }
-      const value = control.read()
-      return {
-        ok: true,
-        value: isRecord(value) && options.fixed !== undefined ? { ...value, ...options.fixed } : value
-      }
-    },
-    clearIssues,
-    setIssues,
-    setPending: (pending) => {
-      form.toggleAttribute("inert", pending)
-      form.setAttribute("aria-busy", String(pending))
-    }
-  }
-}