Change base component to Value (#149)

`<State />` component has too much own logic which makes `State` based
components more complex with additional `set` and `onChangeProp`
helpers.

In this diff I reimplemented `<Value />` as class and `<State />` and
another components as `Value` based.

This reduced bundle size with ~0.8kb (parsed) and significantly
simplified components implementation.

Author: TrySound

.size-snapshot.json

@@ -1,25 +1,25 @@
 {
   "dist/react-powerplug.umd.js": {
-    "bundled": 22187,
-    "minified": 8780,
-    "gzipped": 2415
+    "bundled": 20373,
+    "minified": 8144,
+    "gzipped": 2218
   },
   "dist/react-powerplug.cjs.js": {
-    "bundled": 20000,
-    "minified": 10012,
-    "gzipped": 2407
+    "bundled": 18338,
+    "minified": 9263,
+    "gzipped": 2228
   },
   "dist/react-powerplug.esm.js": {
-    "bundled": 19370,
-    "minified": 9474,
-    "gzipped": 2267,
+    "bundled": 17708,
+    "minified": 8725,
+    "gzipped": 2092,
     "treeshaked": {
       "rollup": {
-        "code": 204,
-        "import_statements": 204
+        "code": 197,
+        "import_statements": 197
       },
       "webpack": {
-        "code": 1506
+        "code": 1495
       }
     }
   }

src/components/Active.js

@@ -1,23 +1,19 @@
 import * as React from 'react'
-import State from './State'
+import Value from './Value'
 import renderProps from '../utils/renderProps'
-import onChangeProp from '../utils/onChangeProp'
 
 const Active = ({ onChange, ...props }) => (
-  <State
-    initial={{ active: false }}
-    onChange={onChangeProp(onChange, 'active')}
-  >
-    {({ state, setState }) =>
+  <Value initial={false} onChange={onChange}>
+    {({ value, set }) =>
       renderProps(props, {
-        active: state.active,
+        active: value,
         bind: {
-          onMouseDown: () => setState({ active: true }),
-          onMouseUp: () => setState({ active: false }),
+          onMouseDown: () => set(true),
+          onMouseUp: () => set(false),
         },
       })
     }
-  </State>
+  </Value>
 )
 
 export default Active

src/components/Counter.js

@@ -1,29 +1,22 @@
 import * as React from 'react'
-import State from './State'
+import Value from './Value'
 import renderProps from '../utils/renderProps'
-import set from '../utils/set'
-import onChangeProp from '../utils/onChangeProp'
 
-const add = value => state => ({
-  count: state.count + value,
-})
+const add = diff => value => value + diff
 
 const Counter = ({ initial = 0, onChange, ...props }) => (
-  <State
-    initial={{ count: initial }}
-    onChange={onChangeProp(onChange, 'count')}
-  >
-    {({ state, setState }) =>
+  <Value initial={initial} onChange={onChange}>
+    {({ value, set }) =>
       renderProps(props, {
-        count: state.count,
-        inc: () => setState(add(1)),
-        dec: () => setState(add(-1)),
-        incBy: value => setState(add(value)),
-        decBy: value => setState(add(-value)),
-        set: value => setState(s => ({ count: set(value, s.count) })),
+        count: value,
+        inc: () => set(add(1)),
+        dec: () => set(add(-1)),
+        incBy: value => set(add(value)),
+        decBy: value => set(add(-value)),
+        set: value => set(value),
       })
     }
-  </State>
+  </Value>
 )
 
 export default Counter

src/components/Focus.js

@@ -1,23 +1,19 @@
 import * as React from 'react'
-import State from './State'
+import Value from './Value'
 import renderProps from '../utils/renderProps'
-import onChangeProp from '../utils/onChangeProp'
 
 const Focus = ({ onChange, ...props }) => (
-  <State
-    initial={{ focused: false }}
-    onChange={onChangeProp(onChange, 'focused')}
-  >
-    {({ state, setState }) =>
+  <Value initial={false} onChange={onChange}>
+    {({ value, set }) =>
       renderProps(props, {
-        focused: state.focused,
+        focused: value,
         bind: {
-          onFocus: () => setState({ focused: true }),
-          onBlur: () => setState({ focused: false }),
+          onFocus: () => set(true),
+          onBlur: () => set(false),
         },
       })
     }
-  </State>
+  </Value>
 )
 
 export default Focus

src/components/FocusManager.js

@@ -1,32 +1,28 @@
 import * as React from 'react'
-import State from './State'
+import Value from './Value'
 import renderProps from '../utils/renderProps'
-import onChangeProp from '../utils/onChangeProp'
 
 const FocusManager = ({ onChange, ...props }) => {
   let canBlur = true
   return (
-    <State
-      initial={{ focused: false }}
-      onChange={onChangeProp(onChange, 'focused')}
-    >
-      {({ state, setState }) =>
+    <Value initial={false} onChange={onChange}>
+      {({ value, set }) =>
         renderProps(props, {
-          focused: state.focused,
+          focused: value,
           blur: () => {
-            if (state.focused) {
+            if (value) {
               document.activeElement.blur()
             }
           },
           bind: {
             tabIndex: -1,
             onBlur: () => {
               if (canBlur) {
-                setState({ focused: false })
+                set(false)
               }
             },
             onFocus: () => {
-              setState({ focused: true })
+              set(true)
             },
             onMouseDown: () => {
               canBlur = false
@@ -37,7 +33,7 @@ const FocusManager = ({ onChange, ...props }) => {
           },
         })
       }
-    </State>
+    </Value>
   )
 }
 

src/components/Form.js

@@ -1,29 +1,31 @@
 import * as React from 'react'
-import State from './State'
+import Value from './Value'
 import renderProps from '../utils/renderProps'
-import set from '../utils/set'
 
 const Form = ({ initial = {}, onChange, ...props }) => (
-  <State initial={{ ...initial }} onChange={onChange}>
-    {({ state, setState }) =>
+  <Value initial={{ ...initial }} onChange={onChange}>
+    {({ value: values, set }) =>
       renderProps(props, {
-        values: { ...state },
+        values,
         input: id => {
-          const value = state[id] || ''
-          const setValue = value => setState({ [id]: value })
+          const value = values[id] || ''
+          const setValue = updater =>
+            typeof updater === 'function'
+              ? set(prev => ({ ...prev, [id]: updater(prev[id]) }))
+              : set({ ...values, [id]: updater })
 
           return {
+            value,
+            set: setValue,
             bind: {
-              onChange: event => setValue(event.target.value),
               value,
+              onChange: event => setValue(event.target.value),
             },
-            set: value => setState(s => ({ [id]: set(value, s.value) })),
-            value,
           }
         },
       })
     }
-  </State>
+  </Value>
 )
 
 export default Form

src/components/Hover.js

@@ -1,23 +1,19 @@
 import * as React from 'react'
-import State from './State'
+import Value from './Value'
 import renderProps from '../utils/renderProps'
-import onChangeProp from '../utils/onChangeProp'
 
 const Hover = ({ onChange, ...props }) => (
-  <State
-    initial={{ hovered: false }}
-    onChange={onChangeProp(onChange, 'hovered')}
-  >
-    {({ state, setState }) =>
+  <Value initial={false} onChange={onChange}>
+    {({ value, set }) =>
       renderProps(props, {
-        hovered: state.hovered,
+        hovered: value,
         bind: {
-          onMouseEnter: () => setState({ hovered: true }),
-          onMouseLeave: () => setState({ hovered: false }),
+          onMouseEnter: () => set(true),
+          onMouseLeave: () => set(false),
         },
       })
     }
-  </State>
+  </Value>
 )
 
 export default Hover

src/components/Input.js

@@ -1,25 +1,20 @@
 import * as React from 'react'
-import State from './State'
+import Value from './Value'
 import renderProps from '../utils/renderProps'
-import set from '../utils/set'
-import onChangeProp from '../utils/onChangeProp'
 
 const Input = ({ initial = '', onChange, ...props }) => (
-  <State
-    initial={{ value: initial }}
-    onChange={onChangeProp(onChange, 'value')}
-  >
-    {({ state, setState }) =>
+  <Value initial={initial} onChange={onChange}>
+    {({ value, set }) =>
       renderProps(props, {
+        value,
+        set: value => set(value),
         bind: {
-          onChange: event => setState({ value: event.target.value }),
-          value: state.value,
+          value,
+          onChange: event => set(event.target.value),
         },
-        set: value => setState(s => ({ value: set(value, s.value) })),
-        value: state.value,
       })
     }
-  </State>
+  </Value>
 )
 
 export default Input

src/components/List.js

@@ -1,27 +1,23 @@
 import * as React from 'react'
-import State from './State'
+import Value from './Value'
 import renderProps from '../utils/renderProps'
-import set from '../utils/set'
-import onChangeProp from '../utils/onChangeProp'
 
 const complement = fn => (...args) => !fn(...args)
 
 const List = ({ initial = [], onChange, ...props }) => (
-  <State initial={{ list: initial }} onChange={onChangeProp(onChange, 'list')}>
-    {({ state, setState }) =>
+  <Value initial={initial} onChange={onChange}>
+    {({ value, set }) =>
       renderProps(props, {
-        list: state.list,
-        first: () => state.list[0],
-        last: () => state.list[Math.max(0, state.list.length - 1)],
-        set: list => setState(s => ({ list: set(list, s.list) })),
-        push: (...values) => setState(s => ({ list: [...s.list, ...values] })),
-        pull: predicate =>
-          setState(s => ({ list: s.list.filter(complement(predicate)) })),
-        sort: compareFn =>
-          setState(s => ({ list: [...s.list].sort(compareFn) })),
+        list: value,
+        first: () => value[0],
+        last: () => value[Math.max(0, value.length - 1)],
+        set: list => set(list),
+        push: (...values) => set(list => [...list, ...values]),
+        pull: predicate => set(list => list.filter(complement(predicate))),
+        sort: compareFn => set(list => [...list].sort(compareFn)),
       })
     }
-  </State>
+  </Value>
 )
 
 export default List

src/components/Map.js

@@ -1,18 +1,18 @@
 import * as React from 'react'
-import State from './State'
+import Value from './Value'
 import renderProps from '../utils/renderProps'
 
 const Map = ({ initial = {}, onChange, ...props }) => (
-  <State initial={{ ...initial }} onChange={onChange}>
-    {({ state, setState }) =>
+  <Value initial={{ ...initial }} onChange={onChange}>
+    {({ value, set }) =>
       renderProps(props, {
-        values: state,
-        set: (key, value) => setState({ [key]: value }),
-        over: (key, fn) => setState(s => ({ [key]: fn(s[key]) })),
-        get: key => state[key],
+        values: value,
+        set: (key, value) => set(prev => ({ ...prev, [key]: value })),
+        over: (key, fn) => set(prev => ({ ...prev, [key]: fn(prev[key]) })),
+        get: key => value[key],
       })
     }
-  </State>
+  </Value>
 )
 
 export default Map