Generated by XState Viz: https://xstate.js.org/viz

machine.js

/************* 
Fixed
*************/
const STATES = Object.fromEntries(["animalKingdom", "dogOrCat", "petAge", "enrolledInPuppySchool", "recommendedProduct"].map(x => [x, x]))
const GUARDS = Object.fromEntries(["isMammal", "isFish", "isDog", "isCat", "petNameValid"].map(x => [x, x]))
const TRANSITIONS = Object.fromEntries(["continue", "error"].map(x => [x, x]))


// FULLY SERIALIZED
// {
// 	// Question 1: dog or cat?
// 	"dogOrCat": {
// 		"on": {
// 			"continue": "petAge"
// 		},
// 	},
// 	// Question 2: pet age
// 	"petAge": {
// 		"on": {
// 			"continue": "recommendedProduct"
// 		},
// 	},
// 	// Question 3: recommended product 
// 	"recommendedProduct": {
// 		"type": "final"
// 	}
// };

// JS-keys
const states = {
	// Question 1: dog or cat?
	[STATES.dogOrCat]: {
		on: {
			[TRANSITIONS.continue]: STATES.petAge
		},
	},
	// Question 2: pet age
	[STATES.petAge]: {
		on: {
			[TRANSITIONS.continue]: STATES.recommendedProduct
		},
	},
	// Question 3: recommended product 
	[STATES.recommendedProduct]: {
		type: "final"
	}
}


Machine({
	id: 'petFlow',
	initial: "dogOrCat",
	states
})