refactor: machines and solid

segunadebayo · segunadebayo · commit 53857ef797df · 2025-02-14T15:15:41.000Z
diff --git a/examples/solid-ts/src/components/controls.tsx b/examples/solid-ts/src/components/controls.tsx
@@ -4,40 +4,47 @@ import type { UseControlsReturn } from "~/hooks/use-controls"
 
 export function Controls({ store }: { store: UseControlsReturn }) {
   const { config, state, setState } = store
+  const items = createMemo(() => {
+    const keys = Object.keys(store.config)
+    return keys.map((key) => {
+      const { type, label = key, options, placeholder, min, max } = (config[key] ?? {}) as any
+      const value = createMemo(() => deepGet(state(), key))
+      return { key, type, label, options, placeholder, min, max, value }
+    })
+  })
+
   return (
     <div class="controls-container">
-      <For each={Object.keys(store.config)}>
-        {(key) => {
-          const { type, label = key, options, placeholder, min, max } = (config[key] ?? {}) as any
-          const value = createMemo(() => deepGet(state(), key))
-          switch (type) {
+      <For each={items()}>
+        {(item) => {
+          switch (item.type) {
             case "boolean":
               return (
                 <div class="checkbox">
                   <input
-                    data-testid={key}
-                    id={label}
+                    data-testid={item.key}
+                    id={item.label}
                     type="checkbox"
-                    checked={value()}
+                    checked={item.value()}
                     onChange={(e) => {
-                      setState(key, e.currentTarget.checked)
+                      setState(item.key, e.currentTarget.checked)
                     }}
                   />
-                  <label for={label}>{label}</label>
+                  <label for={item.label}>{item.label}</label>
                 </div>
               )
             case "string":
               return (
                 <div class="text">
-                  <label style={{ "margin-right": "10px" }}>{label}</label>
+                  <label style={{ "margin-right": "10px" }}>{item.label}</label>
                   <input
-                    data-testid={key}
+                    data-testid={item.key}
                     type="text"
-                    placeholder={placeholder}
-                    value={value()}
+                    placeholder={item.placeholder}
+                    value={item.value()}
                     onKeyDown={(e) => {
                       if (e.key === "Enter") {
-                        setState(key, e.currentTarget.value)
+                        setState(item.key, e.currentTarget.value)
                       }
                     }}
                   />
@@ -46,39 +53,39 @@ export function Controls({ store }: { store: UseControlsReturn }) {
             case "select":
               return (
                 <div class="text">
-                  <label for={label} style={{ "margin-right": "10px" }}>
-                    {label}
+                  <label for={item.label} style={{ "margin-right": "10px" }}>
+                    {item.label}
                   </label>
                   <select
-                    data-testid={key}
-                    id={label}
-                    value={value()}
+                    data-testid={item.key}
+                    id={item.label}
+                    value={item.value()}
                     onChange={(e) => {
-                      setState(key, e.currentTarget.value)
+                      setState(item.key, e.currentTarget.value)
                     }}
                   >
                     <option>-----</option>
-                    <For each={options as any[]}>{(option) => <option value={option}>{option}</option>}</For>
+                    <For each={item.options as any[]}>{(option) => <option value={option}>{option}</option>}</For>
                   </select>
                 </div>
               )
             case "number":
               return (
                 <div class="text">
-                  <label for={label} style={{ "margin-right": "10px" }}>
-                    {label}
+                  <label for={item.label} style={{ "margin-right": "10px" }}>
+                    {item.label}
                   </label>
                   <input
-                    data-testid={key}
-                    id={label}
+                    data-testid={item.key}
+                    id={item.label}
                     type="number"
-                    min={min}
-                    max={max}
-                    value={value()}
+                    min={item.min}
+                    max={item.max}
+                    value={item.value()}
                     onKeyDown={(e) => {
                       if (e.key === "Enter") {
                         const val = parseFloat(e.currentTarget.value)
-                        setState(key, isNaN(val) ? 0 : val)
+                        setState(item.key, isNaN(val) ? 0 : val)
                       }
                     }}
                   />
diff --git a/examples/solid-ts/src/routes/number-input.tsx b/examples/solid-ts/src/routes/number-input.tsx
@@ -9,7 +9,7 @@ import { useControls } from "~/hooks/use-controls"
 export default function Page() {
   const controls = useControls(numberInputControls)
 
-  const service = useMachine(numberInput.machine, { id: createUniqueId() })
+  const service = useMachine(numberInput.machine, controls.mergeProps({ id: createUniqueId() }))
 
   const api = createMemo(() => numberInput.connect(service, normalizeProps))
 
diff --git a/examples/solid-ts/src/routes/qr-code.tsx b/examples/solid-ts/src/routes/qr-code.tsx
@@ -9,10 +9,13 @@ import { useControls } from "../hooks/use-controls"
 export default function Page() {
   const controls = useControls(qrCodeControls)
 
-  const service = useMachine(qrCode.machine, {
-    id: createUniqueId(),
-    encoding: { ecc: "H" },
-  })
+  const service = useMachine(
+    qrCode.machine,
+    controls.mergeProps<qrCode.Props>({
+      id: createUniqueId(),
+      encoding: { ecc: "H" },
+    }),
+  )
 
   const api = createMemo(() => qrCode.connect(service, normalizeProps))
 
diff --git a/examples/solid-ts/src/routes/radio-group.tsx b/examples/solid-ts/src/routes/radio-group.tsx
@@ -10,10 +10,13 @@ import { useControls } from "~/hooks/use-controls"
 export default function Page() {
   const controls = useControls(radioControls)
 
-  const service = useMachine(radio.machine, {
-    name: "fruits",
-    id: createUniqueId(),
-  })
+  const service = useMachine(
+    radio.machine,
+    controls.mergeProps<radio.Props>({
+      name: "fruits",
+      id: createUniqueId(),
+    }),
+  )
 
   const api = createMemo(() => radio.connect(service, normalizeProps))
 
diff --git a/examples/solid-ts/src/routes/rating-group.tsx b/examples/solid-ts/src/routes/rating-group.tsx
@@ -39,10 +39,13 @@ function Star() {
 export default function Page() {
   const controls = useControls(ratingControls)
 
-  const service = useMachine(rating.machine, {
-    id: createUniqueId(),
-    defaultValue: 2.5,
-  })
+  const service = useMachine(
+    rating.machine,
+    controls.mergeProps<rating.Props>({
+      id: createUniqueId(),
+      defaultValue: 2.5,
+    }),
+  )
 
   const api = createMemo(() => rating.connect(service, normalizeProps))
 
diff --git a/examples/solid-ts/src/routes/segment-control.tsx b/examples/solid-ts/src/routes/segment-control.tsx
@@ -9,11 +9,14 @@ import { useControls } from "~/hooks/use-controls"
 export default function Page() {
   const controls = useControls(radioControls)
 
-  const service = useMachine(radio.machine, {
-    id: createUniqueId(),
-    name: "fruit",
-    orientation: "horizontal",
-  })
+  const service = useMachine(
+    radio.machine,
+    controls.mergeProps<radio.Props>({
+      id: createUniqueId(),
+      name: "fruit",
+      orientation: "horizontal",
+    }),
+  )
 
   const api = createMemo(() => radio.connect(service, normalizeProps))
 
diff --git a/examples/solid-ts/src/routes/select.tsx b/examples/solid-ts/src/routes/select.tsx
@@ -11,10 +11,13 @@ import { useControls } from "~/hooks/use-controls"
 export default function Page() {
   const controls = useControls(selectControls)
 
-  const service = useMachine(select.machine, {
-    collection: select.collection({ items: selectData }),
-    id: createUniqueId(),
-  })
+  const service = useMachine(
+    select.machine,
+    controls.mergeProps<select.Props>(() => ({
+      collection: select.collection({ items: selectData }),
+      id: createUniqueId(),
+    })),
+  )
 
   const api = createMemo(() => select.connect(service, normalizeProps))
 
diff --git a/examples/solid-ts/src/routes/signature-pad.tsx b/examples/solid-ts/src/routes/signature-pad.tsx
@@ -12,12 +12,15 @@ export default function Page() {
 
   const controls = useControls(signaturePadControls)
 
-  const service = useMachine(signaturePad.machine, {
-    id: createUniqueId(),
-    onDrawEnd(details) {
-      details.getDataUrl("image/png").then(setUrl)
-    },
-  })
+  const service = useMachine(
+    signaturePad.machine,
+    controls.mergeProps<signaturePad.Props>({
+      id: createUniqueId(),
+      onDrawEnd(details) {
+        details.getDataUrl("image/png").then(setUrl)
+      },
+    }),
+  )
 
   const api = createMemo(() => signaturePad.connect(service, normalizeProps))
 
diff --git a/examples/solid-ts/src/routes/slider.tsx b/examples/solid-ts/src/routes/slider.tsx
@@ -10,10 +10,13 @@ import { useControls } from "~/hooks/use-controls"
 export default function Page() {
   const controls = useControls(sliderControls)
 
-  const service = useMachine(slider.machine, {
-    id: createUniqueId(),
-    defaultValue: [0],
-  })
+  const service = useMachine(
+    slider.machine,
+    controls.mergeProps<slider.Props>({
+      id: createUniqueId(),
+      defaultValue: [0],
+    }),
+  )
 
   const api = createMemo(() => slider.connect(service, normalizeProps))
 
diff --git a/examples/solid-ts/src/routes/splitter.tsx b/examples/solid-ts/src/routes/splitter.tsx
@@ -9,13 +9,16 @@ import { useControls } from "~/hooks/use-controls"
 export default function Page() {
   const controls = useControls(splitterControls)
 
-  const service = useMachine(splitter.machine, {
-    id: createUniqueId(),
-    defaultSize: [
-      { id: "a", size: 50 },
-      { id: "b", size: 50 },
-    ],
-  })
+  const service = useMachine(
+    splitter.machine,
+    controls.mergeProps<splitter.Props>({
+      id: createUniqueId(),
+      defaultSize: [
+        { id: "a", size: 50 },
+        { id: "b", size: 50 },
+      ],
+    }),
+  )
 
   const api = createMemo(() => splitter.connect(service, normalizeProps))
 
diff --git a/examples/solid-ts/src/routes/steps.tsx b/examples/solid-ts/src/routes/steps.tsx
@@ -9,10 +9,13 @@ import { useControls } from "../hooks/use-controls"
 export default function Page() {
   const controls = useControls(stepsControls)
 
-  const service = useMachine(steps.machine, {
-    id: createUniqueId(),
-    count: stepsData.length,
-  })
+  const service = useMachine(
+    steps.machine,
+    controls.mergeProps<steps.Props>({
+      id: createUniqueId(),
+      count: stepsData.length,
+    }),
+  )
 
   const api = createMemo(() => steps.connect(service, normalizeProps))
 
diff --git a/examples/solid-ts/src/routes/switch.tsx b/examples/solid-ts/src/routes/switch.tsx
@@ -9,10 +9,13 @@ import { useControls } from "~/hooks/use-controls"
 export default function Page() {
   const controls = useControls(switchControls)
 
-  const service = useMachine(zagSwitch.machine, {
-    name: "switch",
-    id: createUniqueId(),
-  })
+  const service = useMachine(
+    zagSwitch.machine,
+    controls.mergeProps<zagSwitch.Props>({
+      name: "switch",
+      id: createUniqueId(),
+    }),
+  )
 
   const api = createMemo(() => zagSwitch.connect(service, normalizeProps))
 
diff --git a/examples/solid-ts/src/routes/tabs.tsx b/examples/solid-ts/src/routes/tabs.tsx
@@ -9,10 +9,13 @@ import { useControls } from "~/hooks/use-controls"
 export default function Page() {
   const controls = useControls(tabsControls)
 
-  const service = useMachine(tabs.machine, {
-    id: createUniqueId(),
-    defaultValue: "nils",
-  })
+  const service = useMachine(
+    tabs.machine,
+    controls.mergeProps<tabs.Props>({
+      id: createUniqueId(),
+      defaultValue: "nils",
+    }),
+  )
 
   const api = createMemo(() => tabs.connect(service, normalizeProps))
 
diff --git a/examples/solid-ts/src/routes/tags-input.tsx b/examples/solid-ts/src/routes/tags-input.tsx
@@ -59,9 +59,9 @@ export default function Page() {
         </div>
       </main>
 
-      <Toolbar controls={controls}>
-        <StateVisualizer state={service} />
-      </Toolbar>
+      {/* <Toolbar viz controls={controls}>
+        <StateVisualizer state={service} context={["value"]} />
+      </Toolbar> */}
     </>
   )
 }
diff --git a/examples/solid-ts/src/routes/time-picker.tsx b/examples/solid-ts/src/routes/time-picker.tsx
@@ -14,9 +14,12 @@ function Wrapper(props: ParentProps) {
 export default function Page() {
   const controls = useControls(timePickerControls)
 
-  const service = useMachine(timePicker.machine, {
-    id: createUniqueId(),
-  })
+  const service = useMachine(
+    timePicker.machine,
+    controls.mergeProps<timePicker.Props>({
+      id: createUniqueId(),
+    }),
+  )
 
   const api = createMemo(() => timePicker.connect(service, normalizeProps))
 
diff --git a/examples/solid-ts/src/routes/timer-countdown.tsx b/examples/solid-ts/src/routes/timer-countdown.tsx
@@ -33,10 +33,10 @@ export default function Page() {
         </div>
 
         <div {...api().getControlProps()}>
-          <button onClick={api().start}>START</button>
-          <button onClick={api().pause}>PAUSE</button>
-          <button onClick={api().resume}>RESUME</button>
-          <button onClick={api().reset}>RESET</button>
+          <button {...api().getActionTriggerProps({ action: "start" })}>START</button>
+          <button {...api().getActionTriggerProps({ action: "pause" })}>PAUSE</button>
+          <button {...api().getActionTriggerProps({ action: "resume" })}>RESUME</button>
+          <button {...api().getActionTriggerProps({ action: "reset" })}>RESET</button>
         </div>
       </main>
 
diff --git a/examples/solid-ts/src/routes/timer-stopwatch.tsx b/examples/solid-ts/src/routes/timer-stopwatch.tsx
@@ -28,10 +28,10 @@ export default function Page() {
         </div>
 
         <div {...api().getControlProps()}>
-          <button onClick={api().start}>START</button>
-          <button onClick={api().pause}>PAUSE</button>
-          <button onClick={api().resume}>RESUME</button>
-          <button onClick={api().reset}>RESET</button>
+          <button {...api().getActionTriggerProps({ action: "start" })}>START</button>
+          <button {...api().getActionTriggerProps({ action: "pause" })}>PAUSE</button>
+          <button {...api().getActionTriggerProps({ action: "resume" })}>RESUME</button>
+          <button {...api().getActionTriggerProps({ action: "reset" })}>RESET</button>
         </div>
       </main>
 
diff --git a/examples/solid-ts/src/routes/toggle-group.tsx b/examples/solid-ts/src/routes/toggle-group.tsx
diff --git a/examples/solid-ts/src/routes/tour.tsx b/examples/solid-ts/src/routes/tour.tsx
diff --git a/packages/machines/select/src/select.types.ts b/packages/machines/select/src/select.types.ts
diff --git a/packages/machines/tags-input/src/tags-input.connect.ts b/packages/machines/tags-input/src/tags-input.connect.ts
diff --git a/packages/machines/tags-input/src/tags-input.machine.ts b/packages/machines/tags-input/src/tags-input.machine.ts
diff --git a/packages/machines/tags-input/src/tags-input.types.ts b/packages/machines/tags-input/src/tags-input.types.ts
diff --git a/packages/machines/time-picker/src/time-picker.types.ts b/packages/machines/time-picker/src/time-picker.types.ts
