Merge 909bf58 into 818f783

.eslintignore

@@ -1,3 +1,4 @@
 /test/hyperactiv.js
 /dist
-/handlers
+/handlers
+/websocket

README.md

@@ -359,6 +359,32 @@ obj.a = 2
 console.log(obj.sum) // -> 4
 ```
 
+#### Reactive Classes
+
+Ground up support for reactive class models using mixins
+
+```javascript
+const { Observable, Computable } = require("hyperactiv/mixins");
+
+class SomeClass extends Computable(Observable(Object)) {
+    constructor(data, opts) {
+        super(data, opts)
+
+        this.value = 10 // writes to observed object automagically
+    }
+}
+```
+
+Alternatively, if you prefer script tags on the browser:
+
+```html
+<script src="https://unpkg.com/hyperactiv/mixins/index.js"></script>
+```
+
+```js
+const { Observable, Computable } = window['hyperactiv-mixins']
+```
+
 #### React store
 
 Hyperactiv contains built-in helpers to easily create a reactive store which re-renders your React components.
@@ -424,7 +450,8 @@ const handler = function(keys, value) {
 }
 
 // The deep flag ensures that the handler will be triggered when the mutation happens in a nested array/object
-const observer = observe(object, { handler, deep: true })
+const observer = observe(object, { bubble: true, deep: true })
+observer.__handler = handler
 object.a.b[0].c = 'value'
 
 // The handler is triggered after each mutation
@@ -434,6 +461,13 @@ object.a.b[0].c = 'value'
 // 'value'
 ```
 
+Or if you use the Observable mixin you can catch mutations with the `onChange` method
+
+```javascript
+let o = new Observable(Object);
+o.onChange((keys, value, old, obj) => { })
+```
+
 ## API
 
 ### observe
@@ -447,7 +481,7 @@ observe(Object | Array, {
     batch: boolean,
     deep: boolean,
     bind: boolean,
-    handler: function
+    bubble: boolean
 }) => Proxy
 ```
 
@@ -471,11 +505,9 @@ Observe nested objects and when setting new properties.
 
 - `bind: boolean`
 
-Automatically bind methods to the observed object.
+Bubble mutations up the object hierarchy, triggering handlers along the way.
 
-- `handler: Function(ancestry: String[], value: Object, originalObject: Object)`
-
-Callback performed whenever the observed object is mutated.
+- `bubble: boolean`
 
 ### computed
 
@@ -509,9 +541,14 @@ dispose(Function) => void
 
 ### handlers
 
-Helper handlers used to perform various tasks whenever an observed object is mutated.
+You can "wire tap" any observed object by assigning a callback to the `__handler` property.  When `bubble` is set along with `deep`, the `__handler` will receive mutations from nested objects.
+
+```javascript
+const observer = observe(object, { bubble: true, deep: true })
+observer.__handler = (keys, value, oldValue, observedObject) => { }
+```
 
-Note that handlers are written separately from the main hyperactiv codebase and need to be imported from a separate path.
+Helper handlers can be used to perform various tasks whenever an observed object is mutated.
 
 ```js
 import handlers from 'hyperactiv/handlers'
@@ -526,6 +563,8 @@ Or alternatively if you prefer script tags :
 const { ... } = window['hyperactiv-handlers']
 ```
 
+__Note__: Handlers are written separately from the main hyperactiv codebase and need to be imported from a separate path.
+
 #### write
 
 Will generate a handler to transpose writes onto another object.
@@ -580,4 +619,54 @@ let copy = {}, copy2 = {}, obj = observe({ observed: 'object' }, {
         write(copy2)
     ])
 })
+```
+
+## WebSocket
+
+Establishing a one-way data sync over WebSocket is easy.
+
+### WebSocket Server
+
+```javascript
+const WebSocket = require('ws');
+const extendWebSocketServerWithHostMethod = require('hyperactiv/websocket/server').server;
+const wss = extendWebSocketServerWithHostMethod(new WebSocket.Server({ port: 8080 }));
+const hostedObject = wss.host({ });
+```
+
+### Express Server
+
+```javascript
+const http = require('http');
+const express = require('express');
+const WebSocket = require('ws');
+const extendWebSocketServerWithHostMethod = require('hyperactiv/websocket/server').server;
+const app = express();
+const server = http.createServer(app);
+const wss = extendWebSocketServerWithHostMethod(new WebSocket.Server({ server }));
+server.listen(8080);
+
+const hostedObject = wss.host({ });
+```
+
+### WebSocket Client
+
+```javascript
+const WebSocket = require('ws');
+const subscribeToHostedOject = require('hyperactiv/websocket/server').client;
+const remoteObject = subscribeToHostedOject(new WebSocket("ws://localhost:8080"));
+```
+
+### Browser Client
+
+```html
+<html>
+    <head>
+        <script src="https://unpkg.com/hyperactiv" ></script>
+        <script src="https://unpkg.com/hyperactiv/websocket/browser.js"></script>
+    </head>
+    <body onload="window['hyperactiv-websocket']('ws://localhost:8080', window.remoteObject = { })">
+        Check developer console for "remoteObject"
+    </body>
+</html>
 ```

config/rollup.mixins.config.js

@@ -0,0 +1,14 @@
+import uglify from 'rollup-plugin-uglify'
+import { minify } from 'uglify-es'
+
+export default {
+    input: './src/mixins.js',
+    output: {
+        file: 'mixins/index.js',
+        format: 'umd',
+        name: 'hyperactiv-mixins'
+    },
+    plugins: [
+        uglify({}, minify)
+    ]
+}

config/rollup.websocket.config.js

@@ -0,0 +1,24 @@
+import uglify from 'rollup-plugin-uglify'
+import { minify } from 'uglify-es'
+
+export default [
+    {
+        input: './src/websocket/browser.js',
+        output: {
+            file: 'websocket/browser.js',
+            format: 'umd',
+            name: 'hyperactiv-websocket'
+        },
+        plugins: [
+            uglify({}, minify)
+        ]
+    },
+    {
+        input: './src/websocket/server.js',
+        output: {
+            file: 'websocket/server.js',
+            format: 'cjs',
+            name: 'hyperactiv-websocket'
+        }
+    }
+]