Use normalized StateNode instead of raw config (#11)

README.md

@@ -3,6 +3,7 @@
 Convert a [xstate](https://github.com/davidkpiano/xstate) or [react-automata](https://github.com/MicheleBertoli/react-automata) statechart to a [plantuml](http://plantuml.com/state-diagram) state diagram
 
 ## Installation
+
 ```
 npm install xstate-plantuml
 ```
@@ -17,11 +18,6 @@ const config = {
   initial: 'green',
   states: {
     green: {
-      on: {
-        TIMER: 'yellow'
-      }
-    },
-    yellow: {
       on: {
         TIMER: 'red'
       }
@@ -34,24 +30,21 @@ const config = {
   }
 };
 
-console.log(convert(config));
+convert(config, options);
 ```
 
-## Supports
-
-- [x] Single machine
-- [x] Parallel machine
-- [x] Hierarchical machine
-- [ ] History machine
-- [x] Initial event
-- [x] Internal string events `{on: {x: '.y'}}`
-- [x] Internal obj events `{on {x: {target: 'y'}}}`
-- [x] String event `{on: {x: 'y'}}`
-- [x] Object event `{on: {x: {y: {}}}}`
-- [x] Array event `{on: {x: [{target: 'y'}]}}`
-- [x] String action `fetch`
-- [ ] Object action `{ type: 'fetch'}`
-- [ ] Function action
-- [x] `onEntry` actions
-- [x] `onExit` actions
-- [ ] `transition` actions
+## Examples
+
+### Hierarchical machine
+
+- [json](./examples/alarm.json)
+- [puml](./examples/alarm.puml)
+
+![alarm](./examples/alarm.png)
+
+### Parallel machine
+
+- [json](./examples/parallel.json)
+- [puml](./examples/parallel.puml)
+
+![parallel](./examples/parallel.png)

examples/alarm.json

@@ -0,0 +1,17 @@
+{
+  "key": "alarm",
+  "initial": "inactive",
+  "states": {
+    "inactive": { "on": { "ENABLE": "active.waiting" } },
+    "active": {
+      "states": {
+        "snoozing": { "on": { "TIMER": "beeping" } },
+        "waiting": { "on": { "TIMER": "beeping" } },
+        "beeping": { "on": { "SNOOZE": "snoozing" } }
+      },
+      "on": {
+        "DISABLE": "inactive"
+      }
+    }
+  }
+}

examples/alarm.puml

@@ -0,0 +1,25 @@
+@startuml
+left to right direction
+state "alarm" as alarm {
+  [*] --> alarm.inactive
+
+  state "inactive" as alarm.inactive {
+    alarm.inactive --> alarm.active.waiting : ENABLE
+  }
+
+  state "active" as alarm.active {
+    alarm.active --> alarm.inactive : DISABLE
+    state "snoozing" as alarm.active.snoozing {
+      alarm.active.snoozing --> alarm.active.beeping : TIMER
+    }
+
+    state "waiting" as alarm.active.waiting {
+      alarm.active.waiting --> alarm.active.beeping : TIMER
+    }
+
+    state "beeping" as alarm.active.beeping {
+      alarm.active.beeping --> alarm.active.snoozing : SNOOZE
+    }
+  }
+}
+@enduml

examples/parallel.json

@@ -0,0 +1,37 @@
+{
+  "key": "wordmachine",
+  "parallel": true,
+  "states": {
+    "bold": {
+      "initial": "off",
+      "states": {
+        "on": { "on": { "TOGGLE_BOLD": "off" } },
+        "off": { "on": { "TOGGLE_BOLD": "on" } }
+      }
+    },
+    "underline": {
+      "initial": "off",
+      "states": {
+        "on": { "on": { "TOGGLE_UNDERLINE": "off" } },
+        "off": { "on": { "TOGGLE_UNDERLINE": "on" } }
+      }
+    },
+    "italics": {
+      "initial": "off",
+      "states": {
+        "on": { "on": { "TOGGLE_ITALICS": "off" } },
+        "off": { "on": { "TOGGLE_ITALICS": "on" } }
+      }
+    },
+    "list": {
+      "initial": "none",
+      "states": {
+        "none": {
+          "on": { "BULLETS": "bullets", "NUMBERS": "numbers" }
+        },
+        "bullets": { "on": { "NONE": "none", "NUMBERS": "numbers" } },
+        "numbers": { "on": { "BULLETS": "bullets", "NONE": "none" } }
+      }
+    }
+  }
+}

examples/parallel.puml

@@ -1,35 +1,59 @@
 @startuml
-    state "bold" as bold {
-        state "on" as bold_on
-        state "off" as bold_off
-        [*] --> bold_off 
-        bold_on --> bold_off : TOGGLE_BOLD
-        bold_off --> bold_on : TOGGLE_BOLD
-    }
-    state "underline" as underline {
-        state "on" as underline_on
-        state "off" as underline_off
-        [*] --> underline_off 
-        underline_on --> underline_off : TOGGLE_UNDERLINE
-        underline_off --> underline_on : TOGGLE_UNDERLINE
-    }
-    state "italics" as italics {
-        state "on" as italics_on
-        state "off" as italics_off
-        [*] --> italics_off 
-        italics_on --> italics_off : TOGGLE_ITALICS
-        italics_off --> italics_on : TOGGLE_ITALICS
-    }
-    state "list" as list {
-        state "none" as list_none
-        state "bullets" as list_bullets
-        state "numbers" as list_numbers
-        [*] --> list_none 
-        list_none --> list_bullets : BULLETS
-        list_none --> list_numbers : NUMBERS
-        list_bullets --> list_none : NONE
-        list_bullets --> list_numbers : NUMBERS
-        list_numbers --> list_bullets : BULLETS
-        list_numbers --> list_none : NONE
+left to right direction
+state "wordmachine" as wordmachine {
+  state "bold" as wordmachine.bold {
+    [*] --> wordmachine.bold.off
+
+    state "on" as wordmachine.bold.on {
+      wordmachine.bold.on --> wordmachine.bold.off : TOGGLE_BOLD
     }
+
+    state "off" as wordmachine.bold.off {
+      wordmachine.bold.off --> wordmachine.bold.on : TOGGLE_BOLD
+    }
+  }
+
+  state "underline" as wordmachine.underline {
+    [*] --> wordmachine.underline.off
+
+    state "on" as wordmachine.underline.on {
+      wordmachine.underline.on --> wordmachine.underline.off : TOGGLE_UNDERLINE
+    }
+
+    state "off" as wordmachine.underline.off {
+      wordmachine.underline.off --> wordmachine.underline.on : TOGGLE_UNDERLINE
+    }
+  }
+
+  state "italics" as wordmachine.italics {
+    [*] --> wordmachine.italics.off
+
+    state "on" as wordmachine.italics.on {
+      wordmachine.italics.on --> wordmachine.italics.off : TOGGLE_ITALICS
+    }
+
+    state "off" as wordmachine.italics.off {
+      wordmachine.italics.off --> wordmachine.italics.on : TOGGLE_ITALICS
+    }
+  }
+
+  state "list" as wordmachine.list {
+    [*] --> wordmachine.list.none
+
+    state "none" as wordmachine.list.none {
+      wordmachine.list.none --> wordmachine.list.bullets : BULLETS
+      wordmachine.list.none --> wordmachine.list.numbers : NUMBERS
+    }
+
+    state "bullets" as wordmachine.list.bullets {
+      wordmachine.list.bullets --> wordmachine.list.none : NONE
+      wordmachine.list.bullets --> wordmachine.list.numbers : NUMBERS
+    }
+
+    state "numbers" as wordmachine.list.numbers {
+      wordmachine.list.numbers --> wordmachine.list.bullets : BULLETS
+      wordmachine.list.numbers --> wordmachine.list.none : NONE
+    }
+  }
+}
 @enduml