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

machine.js

//import { Machine, assign } from './xstate.js';

// Ensure correct dirty checks when Svelte is running in immutable mode.
function clone(object) {
	if ('object' === typeof object) {
		if (null === object) return object;
		if (Array.isArray(object)) return [...object];
		if (object instanceof Set) return new Set(object);
		if (object instanceof Map) return new Map(object);
		return Object.assign({}, object);
	}
	return object;
}

const detailMachine = key => {
	const CONTEXT_KEY = key || 'item';
	const CACHE_KEY = `${CONTEXT_KEY}_cache`;
	return Machine(
		{
			id: 'detail',
			strict: true,
			initial: 'editing',
			context: {},
			states: {
				editing: {
					initial: 'clean',
					entry: 'doCache',
					states: {
						clean: {
							on: {
								change: {
									target: 'dirty',
									internal: true
								}
							}
						},
						dirty: {
							entry: 'doChange',
							on: {
								change: {
									actions: 'doChange'
								},
								cancel: {
									target: 'clean',
									actions: 'undoCache'
								}
							}
						}
					}
				},
				viewing: {
					on: {
						edit: { target: 'editing' }
					}
				}
			}
		},
		{
			actions: {
				doChange: assign({
					[CONTEXT_KEY]: (c, e) => clone({ ...e[CONTEXT_KEY], timestamp: null })
				}),
				doCache: assign({ [CACHE_KEY]: (c, e) => clone(c[CONTEXT_KEY]) }),
				undoCache: assign({
					[CONTEXT_KEY]: (c, e) => clone(c[CACHE_KEY])
				})
			}
		}
	);
};

const machine = detailMachine('detail');