elm-monitor

elm-monitor

Monitor your elm program with redux-devtools during development. It's really just for monitoring and inspecting state and actions. Action replay (time travel) is not supported.

How to use it?

• Install the dependency: $ npm install elm-monitor

• Import and initialize elm-monitor in your index.js:

  import monitor from 'elm-monitor';
  ...
  monitor();
  

• Copy or symlink Monitor.elm into your source folder, via e.g. ln -s ../node_modules/elm-monitor/src/Monitor.elm src

• Import Monitor.elm into your Main.elm with import Monitor

• Replace Browser.application with Monitor.application in your Main.elm

• Open Redux Devtools in your browser and reload your app.

Attention!

You should only use this during development. Elm won't build when Monitor.elm is used, because it depends on Debug.log.

What if I don't use Browser.application?

Besides being able to monitor Browser.application, Monitor.elm additionally exports:

• Monitor.worker - when using Platform.worker
• Monitor.sandbox - when using Browser.sandbox
• Monitor.element - when using Browser.element
• Monitor.document - when using Browser.document

How does it work under the hood?

It's quite simple. Monitor.elm just logs the state on init as well as every action and resulting state on update to the browser console. monitor.js connects to redux-devtools, patches console.log to extract messages logged by Monitor.elm, parses and transforms the log messages using elm/parser (thx @ChristophP) and passes them over to redux-devtools.

How does it map Elm to JS data structures?

• Int, Float -> Number
• Char, String -> String
• Unit () -> null
• List -> Array
• Tuple -> Array
• Type constructor -> Array [⟨Ctor⟩, param1, param2] or String ⟨Nothing⟩