added hooks for devtool

ensure production builds do not include devtool

Author: Pyrolistical

.eslintrc

@@ -16,6 +16,7 @@
     "react"
   ],
   "rules": {
+    "no-useless-return": "off"
   },
   "globals": {
   }

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 1.2.0 (June 11, 2018)
+ * added hooks for devtool
+ * ensure production builds do not include devtool
+
 ## 1.1.2 (June 10, 2018)
  * added composed state samples to readme
 

build.js

@@ -1,6 +1,8 @@
 const {rollup} = require('rollup')
-const commonjs = require('rollup-plugin-commonjs')
+const conditional = require('rollup-plugin-conditional')
 const nodeResolve = require('rollup-plugin-node-resolve')
+const commonjs = require('rollup-plugin-commonjs')
+const stripCode = require('rollup-plugin-strip-code')
 const babel = require('rollup-plugin-babel')
 const {terser} = require('rollup-plugin-terser')
 
@@ -24,14 +26,20 @@ async function main () {
       external: ['preact', 'preact-context']
     }
   ]
-  function build (min = false) {
+  function build ({devBuild = false, min = false} = {}) {
     return Promise.all(configs.map(async ({input, output, globals, external}) => {
       const bundle = await rollup({
         input: input,
         external,
         plugins: [
           nodeResolve(),
           commonjs(),
+          conditional(!devBuild, [
+            stripCode({
+              start_comment: ' START DEVELOPMENT BUILD ONLY ',
+              end_comment: ' END DEVELOPMENT BUILD ONLY '
+            })
+          ]),
           babel({
             externalHelpers: false,
             exclude: 'node_modules/**'
@@ -40,15 +48,15 @@ async function main () {
         ]
       })
       await bundle.write({
-        file: `dist/${output}${min ? '.min' : ''}.js`,
+        file: `dist/${output}${devBuild ? '.dev' : ''}${min ? '.min' : ''}.js`,
         format: 'umd',
         name: 'flipstate',
         globals
       })
     }))
   }
 
-  return Promise.all([build(), build(true)])
+  return Promise.all([build(), build({devBuild: true}), build({min: true})])
 }
 
 main()

dev-tool.js

@@ -0,0 +1,46 @@
+export default (getThat, getUpdate) => {
+  if (!process || !process.env || process.env.NODE_ENV === 'production') {
+    return () => {}
+  }
+  let devToolSubscribed
+  function sendStateToDevTool () {
+    const {origin, source} = devToolSubscribed
+    source.postMessage({
+      protocol: 'flipstate-devtool v1',
+      type: 'application state',
+      location: window.location.href,
+      state: JSON.stringify(getThat().state)
+    }, origin)
+    devToolSubscribed = undefined
+  }
+  window.addEventListener('message', (event) => {
+    const {origin, data = {}, source} = event
+    if (!origin.startsWith('http://localhost:') && origin !== 'https://concept-not-found.github.io') {
+      return
+    }
+    switch (data.type) {
+      case 'get state':
+        devToolSubscribed = {
+          source,
+          origin
+        }
+        return sendStateToDevTool()
+      case 'set state':
+        return getUpdate()(JSON.parse(data.state))
+      case 'subscribe state update':
+        devToolSubscribed = {
+          source,
+          origin
+        }
+        return
+      default:
+        // ignore messages we don't understand
+    }
+  }, false)
+
+  return () => {
+    if (devToolSubscribed) {
+      sendStateToDevTool()
+    }
+  }
+}

factory.js

@@ -1,7 +1,7 @@
-import isObject from 'is-plain-object'
+import isPlainObject from 'is-plain-object'
 
 function deepMerge (target, source) {
-  if (!isObject(target) || !isObject(source)) {
+  if (!isPlainObject(target) || !isPlainObject(source)) {
     return source
   }
   const destination = {}
@@ -37,7 +37,10 @@ function path ([head, ...tail], object) {
   return path(tail, object[head])
 }
 
-export default (h, Component, createContext) => (initialSpecification = {}) => {
+export default (devTool, h, Component, createContext) => (initialSpecification = {}) => {
+  /* START DEVELOPMENT BUILD ONLY */
+  const onStateUpdate = devTool(() => that, () => update)
+  /* END DEVELOPMENT BUILD ONLY */
   const State = createContext({})
 
   let update
@@ -75,7 +78,6 @@ export default (h, Component, createContext) => (initialSpecification = {}) => {
       this.state = wireSpecification(this, [], initialSpecification)
 
       this.value = this.value.bind(this)
-      this.dangerouslySetState = this.dangerouslySetState.bind(this)
     }
 
     componentWillMount () {
@@ -88,11 +90,10 @@ export default (h, Component, createContext) => (initialSpecification = {}) => {
       return this.state
     }
 
-    dangerouslySetState (state) {
-      this.setState(state)
-    }
-
     render () {
+      /* START DEVELOPMENT BUILD ONLY */
+      onStateUpdate()
+      /* END DEVELOPMENT BUILD ONLY */
       return h(State.Provider, {
         value: this.state
       }, this.props.children)

index.js

@@ -1,5 +1,9 @@
 import {createElement, Component, createContext} from 'react'
 
+/* START DEVELOPMENT BUILD ONLY */
+import devTool from './dev-tool'
+/* END DEVELOPMENT BUILD ONLY */
+
 import factory from './factory'
 
-export default factory(createElement, Component, createContext)
+export default factory(devTool, createElement, Component, createContext)

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "flipstate",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "Scalable state management with Context API",
   "main": "index.js",
   "scripts": {
@@ -44,7 +44,9 @@
     "rollup": "0.60.1",
     "rollup-plugin-babel": "3.0.4",
     "rollup-plugin-commonjs": "9.1.3",
+    "rollup-plugin-conditional": "1.1.1",
     "rollup-plugin-node-resolve": "3.3.0",
+    "rollup-plugin-strip-code": "0.2.5",
     "rollup-plugin-terser": "1.0.1"
   }
 }

package.json

@@ -1,6 +1,10 @@
 import {h, Component} from 'preact'
 import {createContext} from 'preact-context'
 
+/* START DEVELOPMENT BUILD ONLY */
+import devTool from './dev-tool'
+/* END DEVELOPMENT BUILD ONLY */
+
 import factory from './factory'
 
-export default factory(h, Component, createContext)
+export default factory(devTool, h, Component, createContext)