From c02e9f5ce04a8586bbf67c4d1dae870b08be06dd Mon Sep 17 00:00:00 2001 From: Ash Simmonds Date: Mon, 23 Jan 2023 01:08:50 +1030 Subject: [PATCH 1/7] install xstate --- package-lock.json | 21 ++++++++++++++++++++ package.json | 1 + src/routes/xstate/checkoutMachine.ts | 0 src/routes/xstate/index.tsx | 29 ++++++++++++++++++++++++++++ 4 files changed, 51 insertions(+) create mode 100644 src/routes/xstate/checkoutMachine.ts create mode 100644 src/routes/xstate/index.tsx diff --git a/package-lock.json b/package-lock.json index 1856ce7..d0b6942 100644 --- a/package-lock.json +++ b/package-lock.json @@ -26,6 +26,7 @@ "solid-trpc": "^0.1.0-ssr.1", "solidstart-17": "file:", "undici": "5.15.1", + "xstate": "^4.35.2", "zod": "^3.20.2" }, "devDependencies": { @@ -7937,6 +7938,15 @@ "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==", "dev": true }, + "node_modules/xstate": { + "version": "4.35.2", + "resolved": "https://registry.npmjs.org/xstate/-/xstate-4.35.2.tgz", + "integrity": "sha512-5X7EyJv5OHHtGQwN7DsmCAbSnDs3Mxl1cXQ4PVaLwi+7p/RRapERnd1dFyHjYin+KQoLLfuXpl1dPBThgyIGNg==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/xstate" + } + }, "node_modules/xtend": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz", @@ -12705,6 +12715,7 @@ "typescript": "^4.9.4", "undici": "5.15.1", "vite": "^3.1.8", + "xstate": "*", "zod": "^3.20.2" }, "dependencies": { @@ -17959,6 +17970,11 @@ "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==", "dev": true }, + "xstate": { + "version": "4.35.2", + "resolved": "https://registry.npmjs.org/xstate/-/xstate-4.35.2.tgz", + "integrity": "sha512-5X7EyJv5OHHtGQwN7DsmCAbSnDs3Mxl1cXQ4PVaLwi+7p/RRapERnd1dFyHjYin+KQoLLfuXpl1dPBThgyIGNg==" + }, "xtend": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz", @@ -18607,6 +18623,11 @@ "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==", "dev": true }, + "xstate": { + "version": "4.35.2", + "resolved": "https://registry.npmjs.org/xstate/-/xstate-4.35.2.tgz", + "integrity": "sha512-5X7EyJv5OHHtGQwN7DsmCAbSnDs3Mxl1cXQ4PVaLwi+7p/RRapERnd1dFyHjYin+KQoLLfuXpl1dPBThgyIGNg==" + }, "xtend": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz", diff --git a/package.json b/package.json index 614c5ff..b39df5c 100644 --- a/package.json +++ b/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": { diff --git a/src/routes/xstate/checkoutMachine.ts b/src/routes/xstate/checkoutMachine.ts new file mode 100644 index 0000000..e69de29 diff --git a/src/routes/xstate/index.tsx b/src/routes/xstate/index.tsx new file mode 100644 index 0000000..e491c9c --- /dev/null +++ b/src/routes/xstate/index.tsx @@ -0,0 +1,29 @@ +import type { VoidComponent } from "solid-js"; +import { Title } from "solid-start" +import Layout from "~/layouts/Layout" + +const XStatePage: VoidComponent = () => { + + + return ( + + XState +

XState

+ + + +

Basic layout

+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +
+
+ + + + + + ) +} + +export default XStatePage From 2e6389dc626db194a6d9eb28f5fee6d81b023bd2 Mon Sep 17 00:00:00 2001 From: Ash Simmonds Date: Mon, 23 Jan 2023 01:31:20 +1030 Subject: [PATCH 2/7] scaffold out checkoutMachine --- src/routes/xstate/checkoutMachine.ts | 67 ++++++++++++++++++++++++++++ src/routes/xstate/index.tsx | 8 ++++ 2 files changed, 75 insertions(+) diff --git a/src/routes/xstate/checkoutMachine.ts b/src/routes/xstate/checkoutMachine.ts index e69de29..435f33d 100644 --- a/src/routes/xstate/checkoutMachine.ts +++ b/src/routes/xstate/checkoutMachine.ts @@ -0,0 +1,67 @@ +import type { ActorRefFrom } from "xstate"; +import { createMachine } from "xstate" + +export const checkoutMachine = createMachine({ + "id": "Checkout", + "initial": "cart", + "states": { + "cart": { + "on": { + "CHECKOUT": { + "target": "shipping" + }, + "PAYPAL": { + "target": "payment" + }, + "ENTER_VIP_CODE": {} + } + }, + "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" + } + } + , + schema: { + context: {} as { + + }, + 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" } + }, + context: {}, + predictableActionArguments: true, + preserveActionOrder: true, +}) + + + + + +export type CheckoutActor = ActorRefFrom + diff --git a/src/routes/xstate/index.tsx b/src/routes/xstate/index.tsx index e491c9c..ed09f3a 100644 --- a/src/routes/xstate/index.tsx +++ b/src/routes/xstate/index.tsx @@ -1,6 +1,14 @@ import type { VoidComponent } from "solid-js"; import { Title } from "solid-start" +import { interpret } from "xstate"; import Layout from "~/layouts/Layout" +import { checkoutMachine } from "./checkoutMachine" + +const actor = interpret(checkoutMachine) + +console.log(`xstate | index.tsx | actor`, actor) + + const XStatePage: VoidComponent = () => { From b6360f3ad574582677a51ddc17739d2ace49954e Mon Sep 17 00:00:00 2001 From: Ash Simmonds Date: Mon, 23 Jan 2023 05:56:36 +1030 Subject: [PATCH 3/7] add the useMachine dunno if will be use ful --- src/routes/xstate/useMachine.ts | 65 +++++++++++++++++++++++++++++++++ 1 file changed, 65 insertions(+) create mode 100644 src/routes/xstate/useMachine.ts diff --git a/src/routes/xstate/useMachine.ts b/src/routes/xstate/useMachine.ts new file mode 100644 index 0000000..f346b42 --- /dev/null +++ b/src/routes/xstate/useMachine.ts @@ -0,0 +1,65 @@ +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 { + can: (event: EventFrom | EventFrom["type"]) => boolean; + matches: (state: StateValueFrom) => boolean; + select: ( + selector: (state: StateFrom) => Result + ) => Accessor; + send: InterpreterFrom["send"]; +} + +export const useMachine = ( + machine: M +): UseMachineApi => { + 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) + ); + unsubscribes.push( + service.subscribe((state) => + setResult(() => selector(state as StateFrom)) + ).unsubscribe + ); + return result; + }, + send: service.send + }; +}; From c8b2b45c68877bee691ac72a4f182bdf3558e060 Mon Sep 17 00:00:00 2001 From: Ash Simmonds Date: Mon, 23 Jan 2023 05:56:50 +1030 Subject: [PATCH 4/7] spaghetti of output on the page --- src/routes/xstate/index.tsx | 47 ++++++++++++++++++++++++++++++------- 1 file changed, 38 insertions(+), 9 deletions(-) diff --git a/src/routes/xstate/index.tsx b/src/routes/xstate/index.tsx index ed09f3a..8d74f6e 100644 --- a/src/routes/xstate/index.tsx +++ b/src/routes/xstate/index.tsx @@ -1,31 +1,60 @@ import type { VoidComponent } from "solid-js"; import { Title } from "solid-start" -import { interpret } from "xstate"; +import { interpret } from "xstate" import Layout from "~/layouts/Layout" import { checkoutMachine } from "./checkoutMachine" +import { useMachine } from "./useMachine" +import { createSignal } from "solid-js" -const actor = interpret(checkoutMachine) +const actorHoisted = interpret(checkoutMachine).start() -console.log(`xstate | index.tsx | actor`, actor) +console.log(`xstate | index.tsx | actor`, actorHoisted) const XStatePage: VoidComponent = () => { + const actorPage = useMachine(checkoutMachine) + + const [checkoutMachineState, setCheckoutMachineState] = createSignal(actorHoisted.initialState) + + const stateValue = () => checkoutMachineState().value.toString() + + + + return ( XState

XState

+

stateValue():{stateValue()}

+ + + + + + +

actorHoisted = interpret(checkoutMachine).start()

+ 
+                {JSON.stringify(actorHoisted, null, 4)}
+
+ + + +

actorPage = useMachine(checkoutMachine)

+ 
+                {JSON.stringify(actorPage, null, 4)}
+
+ + +

checkoutMachineState() = createSignal(actorHoisted.initialState)

+ 
+                {JSON.stringify(checkoutMachineState(), null, 4)}
+
-

Basic layout

-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. -
-
From 94dc91b70aebce49d31fe01f90a4c66481cade1a Mon Sep 17 00:00:00 2001 From: Ash Simmonds Date: Mon, 23 Jan 2023 06:40:50 +1030 Subject: [PATCH 5/7] setup deus-ex --- .../xstate => deus-ex}/checkoutMachine.ts | 15 +++++++-- src/deus-ex/checkoutMachine.typegen.ts | 33 +++++++++++++++++++ src/routes/xstate/useMachine.ts | 1 + 3 files changed, 46 insertions(+), 3 deletions(-) rename src/{routes/xstate => deus-ex}/checkoutMachine.ts (79%) create mode 100644 src/deus-ex/checkoutMachine.typegen.ts diff --git a/src/routes/xstate/checkoutMachine.ts b/src/deus-ex/checkoutMachine.ts similarity index 79% rename from src/routes/xstate/checkoutMachine.ts rename to src/deus-ex/checkoutMachine.ts index 435f33d..d4c2b59 100644 --- a/src/routes/xstate/checkoutMachine.ts +++ b/src/deus-ex/checkoutMachine.ts @@ -1,8 +1,12 @@ -import type { ActorRefFrom } from "xstate"; +import type { ActorRefFrom} from "xstate"; +import { assign } from "xstate"; import { createMachine } from "xstate" export const checkoutMachine = createMachine({ "id": "Checkout", + context: { + vipCode: null, + }, "initial": "cart", "states": { "cart": { @@ -13,7 +17,11 @@ export const checkoutMachine = createMachine({ "PAYPAL": { "target": "payment" }, - "ENTER_VIP_CODE": {} + "ENTER_VIP_CODE": { + actions: assign({ + vipCode: (context, event) => event.value + }) + } } }, "shipping": { @@ -54,9 +62,10 @@ export const checkoutMachine = createMachine({ }, 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" } }, - context: {}, predictableActionArguments: true, preserveActionOrder: true, + // eslint-disable-next-line @typescript-eslint/consistent-type-imports + tsTypes: {} as import("./checkoutMachine.typegen").Typegen0, }) diff --git a/src/deus-ex/checkoutMachine.typegen.ts b/src/deus-ex/checkoutMachine.typegen.ts new file mode 100644 index 0000000..da40024 --- /dev/null +++ b/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: never; + delays: never; + guards: never; + services: never; + }; + eventsCausingActions: { + + }; + eventsCausingDelays: { + + }; + eventsCausingGuards: { + + }; + eventsCausingServices: { + + }; + matchesStates: "cart" | "confirmation" | "contact" | "payment" | "shipping"; + tags: never; + } + \ No newline at end of file diff --git a/src/routes/xstate/useMachine.ts b/src/routes/xstate/useMachine.ts index f346b42..4adabfd 100644 --- a/src/routes/xstate/useMachine.ts +++ b/src/routes/xstate/useMachine.ts @@ -1,3 +1,4 @@ +/* eslint-disable solid/reactivity */ import type { AnyStateMachine, EventFrom, From 38df65a571c915e4833efd9b8a93376a863ed7ed Mon Sep 17 00:00:00 2001 From: Ash Simmonds Date: Mon, 23 Jan 2023 06:41:08 +1030 Subject: [PATCH 6/7] basic reactive interface --- src/routes/xstate/index.tsx | 63 ++++++++++++++++++++++++++++++++----- 1 file changed, 56 insertions(+), 7 deletions(-) diff --git a/src/routes/xstate/index.tsx b/src/routes/xstate/index.tsx index 8d74f6e..02e6220 100644 --- a/src/routes/xstate/index.tsx +++ b/src/routes/xstate/index.tsx @@ -2,13 +2,14 @@ import type { VoidComponent } from "solid-js"; import { Title } from "solid-start" import { interpret } from "xstate" import Layout from "~/layouts/Layout" -import { checkoutMachine } from "./checkoutMachine" +import { checkoutMachine } 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 | actor`, actorHoisted) +console.log(`xstate | index.tsx | actorHoisted`, actorHoisted) @@ -16,12 +17,18 @@ const XStatePage: VoidComponent = () => { const actorPage = useMachine(checkoutMachine) - const [checkoutMachineState, setCheckoutMachineState] = createSignal(actorHoisted.initialState) + const [theState, setTheState] = createSignal(actorHoisted.initialState) - const stateValue = () => checkoutMachineState().value.toString() + // const stateValue = () => state().value.toString() + actorHoisted.onTransition((newState) => { + console.log(`xstate | index.tsx | actorHoisted.onTransition | state`, newState) + setTheState(newState) + }) + + return ( @@ -29,10 +36,52 @@ const XStatePage: VoidComponent = () => { XState

XState

-

stateValue():{stateValue()}

+

theState().value:{theState().value.toString()}

+ + + {theState().value === "cart" && ( + +

Cart

+ + + + )} + + {theState().value === "shipping" && ( + +

Shipping

+ + actorHoisted.send({ + type: "ENTER_VIP_CODE", + value: e.target.value + })} + /> + +

asdf{theState().context.vipCode}qwer

+ + + )} + {theState().value === "contact" && ( + +

Contact

+ + )} + {theState().value === "payment" && ( + +

Payment

+ + )} + {theState().value === "confirmation" && ( + +

Confirmation

+ + )} @@ -50,9 +99,9 @@ const XStatePage: VoidComponent = () => { -

checkoutMachineState() = createSignal(actorHoisted.initialState)

+

theState() = createSignal(actorHoisted.initialState)

-                {JSON.stringify(checkoutMachineState(), null, 4)}
+                {JSON.stringify(theState(), null, 4)}
From 7f8f4bec11f5b3c0c3e928c8df4f79f1c29d404d Mon Sep 17 00:00:00 2001 From: Ash Simmonds Date: Mon, 23 Jan 2023 11:30:30 +1030 Subject: [PATCH 7/7] random crap can't be bothered finishing right now --- src/deus-ex/checkoutMachine.ts | 36 +++++++++++++++++++------ src/deus-ex/checkoutMachine.typegen.ts | 4 +-- src/routes/xstate/index.tsx | 37 +++++++++++++++++--------- 3 files changed, 55 insertions(+), 22 deletions(-) diff --git a/src/deus-ex/checkoutMachine.ts b/src/deus-ex/checkoutMachine.ts index d4c2b59..f137800 100644 --- a/src/deus-ex/checkoutMachine.ts +++ b/src/deus-ex/checkoutMachine.ts @@ -1,11 +1,12 @@ -import type { ActorRefFrom} from "xstate"; +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: null, + vipCode: '', }, "initial": "cart", "states": { @@ -18,9 +19,10 @@ export const checkoutMachine = createMachine({ "target": "payment" }, "ENTER_VIP_CODE": { - actions: assign({ - vipCode: (context, event) => event.value - }) + "actions": "setVipCode" + // "actions": [ + // "setVipCode" + // ] } } }, @@ -54,10 +56,24 @@ export const checkoutMachine = createMachine({ "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" } @@ -66,11 +82,15 @@ export const checkoutMachine = createMachine({ 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() -export type CheckoutActor = ActorRefFrom diff --git a/src/deus-ex/checkoutMachine.typegen.ts b/src/deus-ex/checkoutMachine.typegen.ts index da40024..eef50de 100644 --- a/src/deus-ex/checkoutMachine.typegen.ts +++ b/src/deus-ex/checkoutMachine.typegen.ts @@ -10,13 +10,13 @@ }; missingImplementations: { - actions: never; + actions: "setVipCode"; delays: never; guards: never; services: never; }; eventsCausingActions: { - + "setVipCode": "ENTER_VIP_CODE"; }; eventsCausingDelays: { diff --git a/src/routes/xstate/index.tsx b/src/routes/xstate/index.tsx index 02e6220..99a2563 100644 --- a/src/routes/xstate/index.tsx +++ b/src/routes/xstate/index.tsx @@ -1,15 +1,20 @@ -import type { VoidComponent } from "solid-js"; +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() +// const actorHoisted = interpret(checkoutMachine).start() -console.log(`xstate | index.tsx | actorHoisted`, actorHoisted) +// console.log(`xstate | index.tsx | actorHoisted`, actorHoisted) + + +type CheckoutActor = ActorRefFrom @@ -17,14 +22,15 @@ const XStatePage: VoidComponent = () => { const actorPage = useMachine(checkoutMachine) - const [theState, setTheState] = createSignal(actorHoisted.initialState) + const [theState, setTheState] = createSignal(checkoutMachineActor.initialState) // const stateValue = () => state().value.toString() - actorHoisted.onTransition((newState) => { - console.log(`xstate | index.tsx | actorHoisted.onTransition | state`, newState) + 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) }) @@ -43,7 +49,7 @@ const XStatePage: VoidComponent = () => {

Cart

- + )} @@ -54,10 +60,17 @@ const XStatePage: VoidComponent = () => { actorHoisted.send({ - type: "ENTER_VIP_CODE", - value: e.target.value - })} + 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 + }) + } + } />

asdf{theState().context.vipCode}qwer

@@ -87,7 +100,7 @@ const XStatePage: VoidComponent = () => {

actorHoisted = interpret(checkoutMachine).start()

-                {JSON.stringify(actorHoisted, null, 4)}
+                {JSON.stringify(checkoutMachineActor, null, 4)}