install xstate

package.json

@@ -43,6 +43,7 @@
     "solid-trpc": "^0.1.0-ssr.1",
     "solidstart-17": "file:",
     "undici": "5.15.1",
+    "xstate": "^4.35.2",
     "zod": "^3.20.2"
   },
   "engines": {

src/deus-ex/checkoutMachine.ts

@@ -0,0 +1,96 @@
+import { ActorRefFrom, interpret } from "xstate";
+import { actions } from "xstate";
+import { assign } from "xstate";
+import { createMachine } from "xstate"
+
+export const checkoutMachine = createMachine({
+    "id": "Checkout",
+    context: {
+        vipCode: '',
+    },
+    "initial": "cart",
+    "states": {
+        "cart": {
+            "on": {
+                "CHECKOUT": {
+                    "target": "shipping"
+                },
+                "PAYPAL": {
+                    "target": "payment"
+                },
+                "ENTER_VIP_CODE": {
+                    "actions": "setVipCode"
+                    // "actions": [
+                    //     "setVipCode"
+                    // ]
+                }
+            }
+        },
+        "shipping": {
+            "on": {
+                "NEXT": {
+                    "target": "contact"
+                },
+                "SELECT_SHIPPING_ADDRESS": {},
+                "SELECT_SHIPPING_METHOD": {}
+            }
+        },
+        "contact": {
+            "on": {
+                "NEXT": {
+                    "target": "payment"
+                },
+                "ENTER_EMAIL": {},
+                "ENTER_MOBILE": {}
+            }
+        },
+        "payment": {
+            "on": {
+                "ORDER": {
+                    "target": "confirmation"
+                },
+                "SELECT_PAYMENT_METHOD": {},
+                "AGREE": {}
+            }
+        },
+        "confirmation": {
+            "type": "final"
+        }
+    },
+    // actions: {
+        // setVipCode: (context, event) => {
+            // console.log(`counterMachine.ts setVipCode context: ${JSON.stringify(context)} `);
+            // console.log(`counterMachine.ts setVipCode event: ${JSON.stringify(event)} `);
+            // console.log(`counterMachine.ts incrementCounter event: ${JSON.stringify(event)} `);
+
+            // console.log(`counterMachine.ts incrementCounter context: ${JSON.stringify(context)} `);
+
+            // context.count++;
+            // context.incrementCount++;
+        // },
+    // },
+
+    schema: {
+        // eslint-disable-next-line @typescript-eslint/ban-types
+        context: {} as {
+            vipCode: string;
+
+        },
+        events: {} as { "type": "CHECKOUT" } | { "type": "NEXT" } | { "type": "ORDER" } | { "type": "PAYPAL" } | { "type": "ENTER_VIP_CODE" } | { "type": "SELECT_SHIPPING_ADDRESS" } | { "type": "SELECT_SHIPPING_METHOD" } | { "type": "ENTER_EMAIL" } | { "type": "ENTER_MOBILE" } | { "type": "SELECT_PAYMENT_METHOD" } | { "type": "AGREE" }
+    },
+    predictableActionArguments: true,
+    preserveActionOrder: true,
+    // eslint-disable-next-line @typescript-eslint/consistent-type-imports
+    tsTypes: {} as import("./checkoutMachine.typegen").Typegen0,
+
+
+
+})
+
+
+
+// export default checkoutMachine
+
+export const checkoutMachineActor = interpret(checkoutMachine).start()
+
+

src/deus-ex/checkoutMachine.typegen.ts

@@ -0,0 +1,33 @@
+
+  // This file was automatically generated. Edits will be overwritten
+
+  export interface Typegen0 {
+        '@@xstate/typegen': true;
+        internalEvents: {
+          "xstate.init": { type: "xstate.init" };
+        };
+        invokeSrcNameMap: {
+
+        };
+        missingImplementations: {
+          actions: "setVipCode";
+          delays: never;
+          guards: never;
+          services: never;
+        };
+        eventsCausingActions: {
+          "setVipCode": "ENTER_VIP_CODE";
+        };
+        eventsCausingDelays: {
+
+        };
+        eventsCausingGuards: {
+
+        };
+        eventsCausingServices: {
+
+        };
+        matchesStates: "cart" | "confirmation" | "contact" | "payment" | "shipping";
+        tags: never;
+      }
+

src/routes/xstate/index.tsx

@@ -0,0 +1,128 @@
+import type { VoidComponent } from "solid-js"
+import { Title } from "solid-start"
+import type { ActorRefFrom} from "xstate"
+import { interpret } from "xstate"
+import Layout from "~/layouts/Layout"
+import { checkoutMachine } from "~/deus-ex/checkoutMachine"
+import { checkoutMachineActor } from "~/deus-ex/checkoutMachine"
+import { useMachine } from "./useMachine"
+import { createSignal } from "solid-js"
+import XCOMInfoPanel from "~/components/XCOMInfoPanel"
+
+// const actorHoisted = interpret(checkoutMachine).start()
+
+// console.log(`xstate | index.tsx | actorHoisted`, actorHoisted)
+
+
+type CheckoutActor = ActorRefFrom<typeof checkoutMachine>
+
+
+
+const XStatePage: VoidComponent = () => {
+
+    const actorPage = useMachine(checkoutMachine)
+
+    const [theState, setTheState] = createSignal(checkoutMachineActor.initialState)
+
+    // const stateValue = () => state().value.toString()
+
+
+
+    checkoutMachineActor.onTransition((newState) => {
+        console.log(`xstate | index.tsx | actorHoisted.onTransition | newState`, newState)
+        // console.log(`\nxstate | index.tsx | actorHoisted.onTransition | newState.context\n`, newState.context)
+        setTheState(newState)
+    })
+
+
+
+
+    return (
+        <Layout>
+            <Title>XState</Title>
+            <h1>XState</h1>
+
+            <h2><code>theState().value:</code>{theState().value.toString()}</h2>
+
+
+            {theState().value === "cart" && (
+                <XCOMInfoPanel>
+                    <h3>Cart</h3>
+
+                    <button class="btn btn-primary" onClick={() => checkoutMachineActor.send("CHECKOUT")}>NEXT</button>
+                </XCOMInfoPanel>
+            )}
+
+            {theState().value === "shipping" && (
+                <XCOMInfoPanel>
+                    <h3>Shipping</h3>
+
+                    <input class="input input-bordered" type="text" placeholder="VIP code"
+                        value={theState().context.vipCode || ""}
+                        data-xstate-event="ENTER_VIP_CODE"
+                        onChange={(e) => {
+                            const fixTarget = e.target as HTMLInputElement
+
+                            console.log(`\nxstate | index.tsx | fixTarget.value\n`, fixTarget.value)
+                            checkoutMachineActor.send({
+                            // actorPage.send({
+                                type: "ENTER_VIP_CODE",
+                                value: fixTarget.value
+                            })
+                        }
+                        }
+                    />
+
+                    <h4>asdf{theState().context.vipCode}qwer</h4>
+
+                </XCOMInfoPanel>
+            )}
+
+            {theState().value === "contact" && (
+                <XCOMInfoPanel>
+                    <h3>Contact</h3>
+                </XCOMInfoPanel>
+            )}
+
+            {theState().value === "payment" && (
+                <XCOMInfoPanel>
+                    <h3>Payment</h3>
+                </XCOMInfoPanel>
+            )}
+
+            {theState().value === "confirmation" && (
+                <XCOMInfoPanel>
+                    <h3>Confirmation</h3>
+                </XCOMInfoPanel>
+            )}
+
+
+
+            <h3><code>actorHoisted = interpret(checkoutMachine).start()</code></h3>
+            <pre>
+                {JSON.stringify(checkoutMachineActor, null, 4)}
+            </pre>
+
+
+
+            <h3><code>actorPage = useMachine(checkoutMachine)</code></h3>
+            <pre>
+                {JSON.stringify(actorPage, null, 4)}
+            </pre>
+
+
+
+            <h3><code>theState() = createSignal(actorHoisted.initialState)</code></h3>
+            <pre>
+                {JSON.stringify(theState(), null, 4)}
+            </pre>
+
+
+
+
+
+        </Layout>
+    )
+}
+
+export default XStatePage

src/routes/xstate/useMachine.ts

@@ -0,0 +1,66 @@
+/* eslint-disable solid/reactivity */
+import type {
+    AnyStateMachine,
+    EventFrom,
+    InterpreterFrom,
+    StateFrom,
+    StateValueFrom
+} from "xstate";
+import {
+    interpret
+} from "xstate";
+import type { Accessor} from "solid-js";
+import { createSignal, onCleanup, onMount } from "solid-js";
+
+interface UseMachineApi<M extends AnyStateMachine> {
+    can: (event: EventFrom<M> | EventFrom<M>["type"]) => boolean;
+    matches: (state: StateValueFrom<M>) => boolean;
+    select: <Result>(
+        selector: (state: StateFrom<M>) => Result
+    ) => Accessor<Result>;
+    send: InterpreterFrom<M>["send"];
+}
+
+export const useMachine = <M extends AnyStateMachine>(
+    machine: M
+): UseMachineApi<M> => {
+    const service = interpret(machine);
+    const unsubscribes: Array<() => void> = [];
+    onMount(() => {
+        service.start();
+    });
+    onCleanup(() => {
+        service.stop();
+        unsubscribes.forEach((unsubscribe) => unsubscribe());
+    });
+    return {
+        can: (event) => {
+            const [can, setCan] = createSignal(service.getSnapshot().can(event));
+            unsubscribes.push(
+                service.subscribe((s) => setCan(s.can(event))).unsubscribe
+            );
+            return can();
+        },
+        matches: (state) => {
+            const [matches, setMatches] = createSignal(
+                service.getSnapshot().matches(state)
+            );
+            unsubscribes.push(
+                service.subscribe((s) => setMatches(s.matches(state))).unsubscribe
+            );
+            return matches();
+        },
+        select: (selector) => {
+            const [result, setResult] = createSignal(
+                selector(service.getSnapshot() as StateFrom<M>)
+            );
+            unsubscribes.push(
+                service.subscribe((state) =>
+                    setResult(() => selector(state as StateFrom<M>))
+                ).unsubscribe
+            );
+            return result;
+        },
+        send: service.send
+    };
+};