rewrote hyperactiv/react

README.md

@@ -5,6 +5,7 @@
     <a href="https://www.npmjs.com/package/hyperactiv"><img alt="npm-badge" src="https://img.shields.io/npm/v/hyperactiv.svg?colorB=ff733e" height="20"></a>
     <a href="https://travis-ci.org/elbywan/hyperactiv"><img alt="travis-badge" src="https://travis-ci.org/elbywan/hyperactiv.svg?branch=master"></a>
     <a href='https://coveralls.io/github/elbywan/hyperactiv?branch=master'><img src='https://coveralls.io/repos/github/elbywan/hyperactiv/badge.svg?branch=master' alt='Coverage Status' /></a>
+    <a href="https://bundlephobia.com/result?p=hyperactiv"><img src='https://img.shields.io/bundlephobia/minzip/hyperactiv.svg'/></a>
     <a href="https://github.com/elbywan/hyperactiv/blob/master/LICENSE"><img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="license-badge" height="20"></a>
 </h1>
 
@@ -15,7 +16,7 @@
 
 ## Description
 
-Hyperactiv is a super small (~ 150 lines of code) library which **observes** object mutations and **computes** functions depending on those changes.
+Hyperactiv is a super small (< 1kb minzipped) library which **observes** object mutations and **computes** functions depending on those changes.
 
 In other terms, whenever an *observed object property* is **mutated**, the *computed functions* that **depend** on this property will be **called**.
 
@@ -367,7 +368,7 @@ The components are rendered in a smart fashion, meaning only when they depend on
 ```js
 // Import the helpers
 import reactHyperactiv from 'hyperactiv/react'
-const { watch, store } = reactHyperactiv
+const { Watch, store } = reactHyperactiv
 ```
 
 Alternatively, if you prefer script tags :
@@ -377,37 +378,39 @@ Alternatively, if you prefer script tags :
 ```
 
 ```js
-const { watch, store } = window['react-hyperactiv']
+const { Watch, store } = window['react-hyperactiv']
 ```
 
 Then :
 
 ```js
-// Store.
-
 const appStore = store({
     firstName: 'Igor',
     lastName: 'Gonzola'
 })
 
-// Base component.
-
-class _App extends React.Component {
+class App extends React.Component {
     render() {
         return (
-             <div>
-                { /* Whenever these inputs are changed, the store will update and the component will re-render. */ }
-                <input type="text" value={ appStore.firstName } onChange={ e => appStore.firstName = e.target.value } />
-                <input type="text" value={ appStore.lastName } onChange={ e => appStore.lastName = e.target.value } />
-                <div>Hello, { appStore.firstName } { appStore.lastName } !</div>
-            </div>
+            <Watch render={ () =>
+                <div>
+                    { /* Whenever these inputs are changed, the store will update and the component will re-render. */ }
+                    <input
+                        value={ appStore.firstName }
+                        onChange={ e => appStore.firstName = e.target.value }
+                    />
+                    <input
+                        value={ appStore.lastName }
+                        onChange={ e => appStore.lastName = e.target.value }
+                    />
+                    <div>
+                        Hello, { appStore.firstName } { appStore.lastName } !
+                    </div>
+                </div>
+            } />
         )
     }
 }
-
-// Watched component.
-
-const App = watch(_App)
 ```
 
 #### Catch the chain of mutated properties and perform an action

config/rollup.config.js

@@ -1,12 +1,13 @@
-import uglify from 'rollup-plugin-uglify'
+import { uglify } from 'rollup-plugin-uglify'
 import { minify } from 'uglify-es'
 
 export default {
     input: './src/index.js',
     output: {
         file: 'dist/index.js',
         format: 'umd',
-        name: 'hyperactiv'
+        name: 'hyperactiv',
+        sourcemap: true
     },
     plugins: [
         uglify({}, minify)

config/rollup.handlers.config.js

@@ -1,12 +1,13 @@
-import uglify from 'rollup-plugin-uglify'
+import { uglify } from 'rollup-plugin-uglify'
 import { minify } from 'uglify-es'
 
 export default {
     input: './src/handlers/index.js',
     output: {
         file: 'handlers/index.js',
         format: 'umd',
-        name: 'hyperactiv-handlers'
+        name: 'hyperactiv-handlers',
+        sourcemap: true
     },
     plugins: [
         uglify({}, minify)

config/rollup.react.config.js

@@ -1,4 +1,4 @@
-import uglify from 'rollup-plugin-uglify'
+import { uglify } from 'rollup-plugin-uglify'
 import { minify } from 'uglify-es'
 
 export default {
@@ -9,14 +9,17 @@ export default {
         name: 'react-hyperactiv',
         globals: {
             react: 'React',
-            'react-dom': 'ReactDOM'
-        }
+            'react-dom': 'ReactDOM',
+            hyperactiv: 'hyperactiv'
+        },
+        sourcemap: true
     },
     plugins: [
         uglify({}, minify)
     ],
     external: [
         'react',
-        'react-dom'
+        'react-dom',
+        'hyperactiv'
     ]
 }

docs/paint/index.html

@@ -33,8 +33,8 @@ <h3>Paint demo</h3>
     <div class="color-buttons">
         <button onclick="window.setColor(this, 'red')">Red</button>
         <button onclick="window.setColor(this, 'green')">Green</button>
-        <button class='selected' onclick="window.setColor(this, 'blue')">Blue</button>
-        <button onclick="window.setColor(this, 'random')">Random</button>
+        <button onclick="window.setColor(this, 'blue')">Blue</button>
+        <button class='selected' onclick="window.setColor(this, 'random')">Random</button>
         <input type="color" onchange="window.setColor(this, hexToRgb(this.value))"/>
     </div>
     <div id="container"></div>

docs/todos/index.html

@@ -9,8 +9,8 @@
     <link href="../index.css" rel="stylesheet">
     <link href="todos.css" rel="stylesheet">
     <script src="https://unpkg.com/hyperactiv"></script>
-    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
-    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/react@16.4.2/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@16.4.2/umd/react-dom.development.js"></script>
     <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
     <script src="https://unpkg.com/hyperactiv/react/index.js"></script>
 </head>