VoloshchenkoAl/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

<script id="jsbin-javascript">
function createMachine(stateMachineDefinition) {
  const machine = {
    value: stateMachineDefinition.initialState,
    transition(currentState, event) {
      const currentStateDefinition = stateMachineDefinition[currentState];
      const destinationTransition = currentStateDefinition.transitions[event];

      if (!destinationTransition) {
        return;
      }

      const destinationState = destinationTransition.target;
      const destinationStateDefinition = stateMachineDefinition[destinationState];

      destinationTransition.action();
      currentStateDefinition.actions.onExit();
      destinationStateDefinition.actions.onEnter();

      machine.value = destinationState;

      return machine.value;
    },
  };

  return machine;
}

const machine = createMachine({
  initialState: 'off',
  off: {
    actions: {
      onEnter() {
        console.log('off: on enter');
      },
      onExit() {
        console.log('off: on exit');
      },
    },
    transitions: {
      switch: {
        target: 'on',
        action() {
          console.log('transition actions form off state');
        },
      },
    },
  },
  on: {
    actions: {
      onEnter() {
        console.log('on: on enter');
      },
      onExit() {
        console.log('on: on exit');
      },
    },
    transitions: {
      switch: {
        target: 'off',
        action() {
          console.log('transition actions form on state');
        },
      },
    },
  },
});

let state = machine.value;
console.log(`Current state ${state}`);

state = machine.transition(state, 'switch');
console.log(`Current state ${state}`);

state = machine.transition(state, 'switch');
console.log(`Current state ${state}`);
</script>


<script id="jsbin-source-javascript" type="text/javascript">function createMachine(stateMachineDefinition) {
  const machine = {
    value: stateMachineDefinition.initialState,
    transition(currentState, event) {
      const currentStateDefinition = stateMachineDefinition[currentState];
      const destinationTransition = currentStateDefinition.transitions[event];

      if (!destinationTransition) {
        return;
      }

      const destinationState = destinationTransition.target;
      const destinationStateDefinition = stateMachineDefinition[destinationState];

      destinationTransition.action();
      currentStateDefinition.actions.onExit();
      destinationStateDefinition.actions.onEnter();

      machine.value = destinationState;

      return machine.value;
    },
  };

  return machine;
}

const machine = createMachine({
  initialState: 'off',
  off: {
    actions: {
      onEnter() {
        console.log('off: on enter');
      },
      onExit() {
        console.log('off: on exit');
      },
    },
    transitions: {
      switch: {
        target: 'on',
        action() {
          console.log('transition actions form off state');
        },
      },
    },
  },
  on: {
    actions: {
      onEnter() {
        console.log('on: on enter');
      },
      onExit() {
        console.log('on: on exit');
      },
    },
    transitions: {
      switch: {
        target: 'off',
        action() {
          console.log('transition actions form on state');
        },
      },
    },
  },
});

let state = machine.value;
console.log(`Current state ${state}`);

state = machine.transition(state, 'switch');
console.log(`Current state ${state}`);

state = machine.transition(state, 'switch');
console.log(`Current state ${state}`);
</script></body>
</html>

## jsbin.qexivag.js
function createMachine(stateMachineDefinition) {
  const machine = {
    value: stateMachineDefinition.initialState,
    transition(currentState, event) {
      const currentStateDefinition = stateMachineDefinition[currentState];
      const destinationTransition = currentStateDefinition.transitions[event];

      if (!destinationTransition) {
        return;
      }

      const destinationState = destinationTransition.target;
      const destinationStateDefinition = stateMachineDefinition[destinationState];

      destinationTransition.action();
      currentStateDefinition.actions.onExit();
      destinationStateDefinition.actions.onEnter();

      machine.value = destinationState;

      return machine.value;
    },
  };

  return machine;
}

const machine = createMachine({
  initialState: 'off',
  off: {
    actions: {
      onEnter() {
        console.log('off: on enter');
      },
      onExit() {
        console.log('off: on exit');
      },
    },
    transitions: {
      switch: {
        target: 'on',
        action() {
          console.log('transition actions form off state');
        },
      },
    },
  },
  on: {
    actions: {
      onEnter() {
        console.log('on: on enter');
      },
      onExit() {
        console.log('on: on exit');
      },
    },
    transitions: {
      switch: {
        target: 'off',
        action() {
          console.log('transition actions form on state');
        },
      },
    },
  },
});

let state = machine.value;
console.log(`Current state ${state}`);

state = machine.transition(state, 'switch');
console.log(`Current state ${state}`);

state = machine.transition(state, 'switch');
console.log(`Current state ${state}`);
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	</head>
	<body>

	<script id="jsbin-javascript">
	function createMachine(stateMachineDefinition) {
	const machine = {
	value: stateMachineDefinition.initialState,
	transition(currentState, event) {
	const currentStateDefinition = stateMachineDefinition[currentState];
	const destinationTransition = currentStateDefinition.transitions[event];

	if (!destinationTransition) {
	return;
	}

	const destinationState = destinationTransition.target;
	const destinationStateDefinition = stateMachineDefinition[destinationState];

	destinationTransition.action();
	currentStateDefinition.actions.onExit();
	destinationStateDefinition.actions.onEnter();

	machine.value = destinationState;

	return machine.value;
	},
	};

	return machine;
	}

	const machine = createMachine({
	initialState: 'off',
	off: {
	actions: {
	onEnter() {
	console.log('off: on enter');
	},
	onExit() {
	console.log('off: on exit');
	},
	},
	transitions: {
	switch: {
	target: 'on',
	action() {
	console.log('transition actions form off state');
	},
	},
	},
	},
	on: {
	actions: {
	onEnter() {
	console.log('on: on enter');
	},
	onExit() {
	console.log('on: on exit');
	},
	},
	transitions: {
	switch: {
	target: 'off',
	action() {
	console.log('transition actions form on state');
	},
	},
	},
	},
	});

	let state = machine.value;
	console.log(`Current state ${state}`);

	state = machine.transition(state, 'switch');
	console.log(`Current state ${state}`);

	state = machine.transition(state, 'switch');
	console.log(`Current state ${state}`);
	</script>



	<script id="jsbin-source-javascript" type="text/javascript">function createMachine(stateMachineDefinition) {
	const machine = {
	value: stateMachineDefinition.initialState,
	transition(currentState, event) {
	const currentStateDefinition = stateMachineDefinition[currentState];
	const destinationTransition = currentStateDefinition.transitions[event];

	if (!destinationTransition) {
	return;
	}

	const destinationState = destinationTransition.target;
	const destinationStateDefinition = stateMachineDefinition[destinationState];

	destinationTransition.action();
	currentStateDefinition.actions.onExit();
	destinationStateDefinition.actions.onEnter();

	machine.value = destinationState;

	return machine.value;
	},
	};

	return machine;
	}

	const machine = createMachine({
	initialState: 'off',
	off: {
	actions: {
	onEnter() {
	console.log('off: on enter');
	},
	onExit() {
	console.log('off: on exit');
	},
	},
	transitions: {
	switch: {
	target: 'on',
	action() {
	console.log('transition actions form off state');
	},
	},
	},
	},
	on: {
	actions: {
	onEnter() {
	console.log('on: on enter');
	},
	onExit() {
	console.log('on: on exit');
	},
	},
	transitions: {
	switch: {
	target: 'off',
	action() {
	console.log('transition actions form on state');
	},
	},
	},
	},
	});

	let state = machine.value;
	console.log(`Current state ${state}`);

	state = machine.transition(state, 'switch');
	console.log(`Current state ${state}`);

	state = machine.transition(state, 'switch');
	console.log(`Current state ${state}`);
	</script></body>
	</html>