added ability to read from state component with .value

added ability for child state components to delete itself
fixed cdn build names

Author: Pyrolistical

CHANGELOG.md

@@ -0,0 +1,9 @@
+## 1.1.0 (June 9, 2018)
+ * added ability to read from state component with .value
+ * added ability for child state components to delete itself
+ * fixed cdn build names
+
+## 1.0.0 (June 9, 2018)
+ * implemented `createState`, which returns an `StateProvider`, `GlobalState`, `addState`
+ * support react and preact
+ * cdn builds

README.md

@@ -54,6 +54,12 @@ Highlights
  * state is composed of data + actions
  * actions return an update to merge into the state
  * actions can be `async`
+ * read state `value` directly off state components and call `delete` to remove itself (make sure it is actually no longer used or else `undefined` will be rendered)
  * use dynamic import to code split new data/actions/state/components
  * supports preact, just import 'flipstate/preact'. Requires https://github.com/valotas/preact-context
  * incoming dev tool which will allow you to flip to any state
+
+Samples
+-------
+ * [Counter](https://codesandbox.io/s/rro76qy63m)
+ * [Code splitting](https://codesandbox.io/s/pwk9kwl2nm)

build.js

@@ -8,15 +8,15 @@ async function main () {
   const configs = [
     {
       input: 'index.js',
-      output: 'context-state',
+      output: 'flipstate',
       globals: {
         react: 'React'
       },
       external: ['react']
     },
     {
       input: 'preact.js',
-      output: 'context-state.preact',
+      output: 'flipstate.preact',
       globals: {
         preact: 'preact',
         'preact-context': 'preactContext'
@@ -42,7 +42,7 @@ async function main () {
       await bundle.write({
         file: `dist/${output}${min ? '.min' : ''}.js`,
         format: 'umd',
-        name: 'contextState',
+        name: 'flipstate',
         globals
       })
     }))

factory.js

@@ -70,10 +70,12 @@ export default (h, Component, createContext) => (initialSpecification = {}) => {
 
       that = this
       update = (partial) => {
-        const nextState = deepMerge(this.state, partial)
-        this.setState(nextState)
+        this.setState((state) => deepMerge(state, partial))
       }
       this.state = wireSpecification(this, [], initialSpecification)
+
+      this.value = this.value.bind(this)
+      this.dangerouslySetState = this.dangerouslySetState.bind(this)
     }
 
     componentWillMount () {
@@ -82,6 +84,14 @@ export default (h, Component, createContext) => (initialSpecification = {}) => {
       })
     }
 
+    value () {
+      return this.state
+    }
+
+    dangerouslySetState (state) {
+      this.setState(state)
+    }
+
     render () {
       return h(State.Provider, {
         value: this.state
@@ -99,15 +109,41 @@ export default (h, Component, createContext) => (initialSpecification = {}) => {
       } else {
         preAddedStates.push({scope, specification})
       }
-      return ({children, render}) => {
-        const closure = typeof children === 'function'
-          ? children
-          : children[0] || render
-        if (!closure) {
-          return
+      let referenceCount = 0
+      let markForDeletion = false
+      class ChildState extends Component {
+        componentDidMount () {
+          referenceCount++
+        }
+
+        componentWillUnmount () {
+          referenceCount--
+          if (markForDeletion && referenceCount === 0) {
+            update(createObjectByPath(scope, undefined))
+          }
+        }
+
+        render () {
+          const {children, render} = this.props
+          const closure = typeof children === 'function'
+            ? children
+            : children[0] || render
+          if (!closure) {
+            return
+          }
+          return h(State.Consumer, {}, (state) => closure(path(scope, state)))
         }
-        return h(State.Consumer, {}, (state) => closure(path(scope, state)))
       }
+      Object.defineProperty(ChildState, 'value', {
+        get: () => path(scope, that.state)
+      })
+      Object.defineProperty(ChildState, 'delete', {
+        value () {
+          markForDeletion = true
+        },
+        writable: false
+      })
+      return ChildState
     }
   }
 }

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "flipstate",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Scalable state management with Context API",
   "main": "index.js",
   "scripts": {

package.json

@@ -4,13 +4,13 @@
     <meta charset="UTF-8" />
     <script src="https://unpkg.com/preact@8.2.9/dist/preact.js"></script>
     <script src="https://unpkg.com/preact-context@1.0.2/dist/context.js"></script>
-    <script src="../dist/context-state.preact.js"></script>
+    <script src="../dist/flipstate.preact.js"></script>
   </head>
 
   <body>
     <script>
       const {h, render} = preact
-      const createState = contextState
+      const createState = flipstate
 
       const {
         StateProvider,

sample/preact.html

@@ -4,15 +4,15 @@
     <meta charset="UTF-8" />
     <script src="https://unpkg.com/react@16.4.0/umd/react.development.js"></script>
     <script src="https://unpkg.com/react-dom@16.4.0/umd/react-dom.development.js"></script>
-    <script src="../dist/context-state.js"></script>
+    <script src="../dist/flipstate.js"></script>
   </head>
 
   <body>
     <div id="entry"></div>
     <script>
       const h = React.createElement
       const {render} = ReactDOM
-      const createState = contextState
+      const createState = flipstate
 
       const {
         StateProvider,