MagicLog for better state debugging (WIP)

type `dev` or `utilities`?

example/main.js

@@ -1,19 +1,21 @@
 import Uppy from '../src/core/Core.js'
 import Modal from '../src/plugins/Modal'
 import Dummy from '../src/plugins/Dummy'
-// import DragDrop from '../src/plugins/DragDrop'
 import GoogleDrive from '../src/plugins/GoogleDrive'
 import ProgressBar from '../src/plugins/ProgressBar'
 import Tus10 from '../src/plugins/Tus10'
 
+import MagicLog from '../src/plugins/MagicLog'
+
 const uppy = new Uppy({debug: true})
   .use(Modal, {trigger: '#uppyModalOpener'})
-  // .use(DragDrop, {target: Modal})
   .use(GoogleDrive, {target: Modal, host: 'http://ya.ru'})
   .use(Dummy, {target: Modal})
   .use(ProgressBar, {target: Modal})
   .use(Tus10, {endpoint: 'http://master.tus.io:8080/files/'})
 
+  .use(MagicLog)
+
 uppy.run()
 
 document.querySelector('#uppyModalOpener').click()

src/plugins/MagicLog.js

@@ -0,0 +1,34 @@
+import Plugin from './Plugin'
+// import deepDiff from 'deep-diff'
+
+/**
+ * Magic Log
+ * Helps debug Uppy
+ * inspired by https://github.com/yoshuawuyts/choo-log
+ *
+ */
+export default class MagicLog extends Plugin {
+  constructor (core, opts) {
+    super(core, opts)
+    this.type = 'progressindicator'
+    this.id = 'MagicLog'
+    this.title = 'Magic Log'
+
+    // set default options
+    const defaultOptions = {}
+
+    // merge default options with the ones set by user
+    this.opts = Object.assign({}, defaultOptions, opts)
+  }
+
+  install () {
+    const uppy = this.core.emitter
+    uppy.on('state-update', (prev, state, patch) => {
+      console.group('State')
+      console.log('Prev', prev)
+      console.log('Next', state)
+      console.log('Patch', patch)
+      console.groupEnd()
+    })
+  }
+}