JSFiddle - React, Tailwind, and code Playground

by evgkch

HTML

<div id="app"></div>

JavaScript

// mousedown, mouseup, mousemove, mousedrag, mousedrop
const MOUSEDOWN = 'mousedown';
const MOUSEUP = 'mouseup';
const MOUSEMOVE = 'mousemove';
const MOUSEDRAG = 'mousedrag';
const MOUSEDROP= 'mousedrop';

const transitions = {
	[MOUSEMOVE]: [
  	{
    	to: MOUSEMOVE,
      when: action => action.type == 'onmousemove'
    },
    {
    	to: MOUSEDOWN,
      when: action => action.type == 'onmousedown'
    },
  ],
	[MOUSEDOWN]: [
  	{
    	to: MOUSEUP,
      when: action => action.type == 'onmouseup'
    },
    {
    	to: MOUSEDRAG,
      when: action => action.type == 'onmousemove'
    },
  ],
  [MOUSEUP]: [
  	{
    	to: MOUSEMOVE,
      when: action => action.type == 'onmousemove'
    },
    {
    	to: MOUSEDOWN,
      when: action => action.type == 'onmousedown'
    },
   ],
   [MOUSEDRAG]: [
   	{
    	to: MOUSEDRAG,
      when: action => action.type == 'onmousemove'
    },
    {
    	to: MOUSEDROP,
      when: action => action.type == 'onmouseup'
    },
   ],
   [MOUSEDROP]: [
     {
       to: MOUSEMOVE,
       when: action => action.type == 'onmousemove'
     },
     {
       to: MOUSEDOWN,
       when: action => action.type == 'onmousedown'
     },
   ],
};

const parse = transitions=>{
	const states = new Set;
  const actions = new Set;
  for (let state in transitions)
  {
  	states.add(state);
    transitions[state].forEach(transition=>{
			states.add(transition.to);
      const action = transition.when.toString().match(/(?:\.type\s*={2,3}\s*'([\w\d]+)')/)[1];
      if (action)
      	actions.add(action);
      else
      	throw new Error('action must has type prop');
    });
  };
  console.log(states);
  console.log(actions);
};

parse(transitions)