✨ add devtools

README.md

@@ -1 +1,3 @@
-# myrtille
+# @fabienjuif/myrtille
+
+![npm](https://img.shields.io/npm/v/@fabienjuif/myrtille.svg) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/@fabienjuif/myrtille.svg)

devtools.js

@@ -0,0 +1,35 @@
+// https://github.com/developit/unistore/blob/master/devtools.js
+module.exports = (store) => {
+  if (!window) return
+  const extension = window.__REDUX_DEVTOOLS_EXTENSION__ || window.top.__REDUX_DEVTOOLS_EXTENSION__
+  let ignoreState = false
+
+	if (!extension) {
+		console.warn('Please install/enable Redux devtools extension')
+		store.devtools = null
+
+		return store
+	}
+
+	if (!store.devtools) {
+		store.devtools = extension.connect()
+		store.devtools.subscribe((message) => {
+			if (message.type === 'DISPATCH' && message.state) {
+        ignoreState = true
+        store.setState(JSON.parse(message.state))
+      } else if (message.type === 'ACTION') store.dispatch(JSON.parse(message.payload))
+		})
+		store.devtools.init(store.getState())
+		store.subscribe((store, oldState, action) => {
+      if (ignoreState) {
+        ignoreState = false
+        return
+      }
+
+      const actionName = action && action.type || '🤔 UNKNOWN'
+      store.devtools.send(actionName, store.getState())
+		})
+	}
+
+	return store
+}

index.js

@@ -1,5 +1,6 @@
 const produce = require('immer').default
 const { getFromPath } = require('./util')
+const connectToDevtools = require('./devtools')
 
 const matchRegister = (matcher, callback) => (state, action, store) => {
   if (typeof matcher === 'string' && matcher === action.type) callback(state, action, store)
@@ -22,14 +23,16 @@ const createStore = (init) => {
   let dispatching = false
   const nextDispatchs = []
 
-  const tryNotify = store => {
+  const runAndNotify = (implementation, action = { type: '@@DIRECT_MUTATION' }) => {
     const oldState = store.getState()
 
-    return (action = { type: '@@DIRECT_MUTATION' }) => {
-      if (oldState !== store.getState()) {
-        for (let i = 0; i < subscribers.length; i += 1) {
-          subscribers[i](store, oldState, action)
-        }
+    implementation()
+
+    if (dispatching) return
+
+    if (oldState !== store.getState()) {
+      for (let i = 0; i < subscribers.length; i += 1) {
+        subscribers[i](store, oldState, action)
       }
     }
   }
@@ -40,18 +43,18 @@ const createStore = (init) => {
       return
     }
 
-    dispatching = true
-
     let innerAction = action
     if (typeof action === 'string') innerAction = { type: action }
 
-    const notify = tryNotify(store)
-    for (let i = 0; i < reactions.length; i += 1) {
-      reactions[i](store, innerAction)
-    }
-    notify()
+    runAndNotify(() => {
+      dispatching = true
 
-    dispatching = false
+      for (let i = 0; i < reactions.length; i += 1) {
+        reactions[i](store, innerAction)
+      }
+
+      dispatching = false
+    }, action)
 
     if (nextDispatchs.length) {
       const nextAction = nextDispatchs.pop()
@@ -68,15 +71,20 @@ const createStore = (init) => {
   }
 
   const mutate = (callback) => {
-    const notify = tryNotify(store)
-
-    state = produce(state, draft => { callback(draft) })
+    runAndNotify(() => {
+      state = produce(state, draft => { callback(draft) })
+    })
+  }
 
-    notify()
+  const setState = (newState) => {
+    runAndNotify(() => {
+      state = newState
+    })
   }
 
   store = {
     contexts: {},
+    setState,
     getState: () => state,
     mutate,
     dispatch,
@@ -106,6 +114,7 @@ const createStore = (init) => {
     }
   }
 
+  connectToDevtools(store)
   return store
 }
 

package.json

@@ -1,14 +1,26 @@
 {
   "name": "@fabienjuif/myrtille",
-  "version": "0.2.2",
+  "version": "0.3.1",
   "main": "index.js",
   "module": "index.js",
   "license": "MIT",
+  "repository": "git@github.com:fabienjuif/myrtille.git",
   "dependencies": {
     "immer": "^3.1.3"
   },
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
-  }
+  },
+  "keywords": [
+    "state",
+    "store",
+    "state-management",
+    "immutable",
+    "oneway",
+    "reaction",
+    "dispatch",
+    "event",
+    "not-redux"
+  ]
 }