├── .npmignore
├── .gitignore
├── package.json
├── gruntfile.js
├── LICENSE
├── README.md
├── spec
    └── react-bacon_spec.js
├── src
    └── react-bacon.js
└── dist
    └── react-bacon.js


/.npmignore:
--------------------------------------------------------------------------------
1 | /dist
2 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | tmp
3 | 
4 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-bacon",
 3 |   "version": "0.0.4",
 4 |   "description": "A little module for using React with Bacon.js",
 5 |   "main": "src/react-bacon.js",
 6 |   "repository": {
 7 |     "type": "git",
 8 |     "url": "https://github.com/jamesmacaulay/react-bacon"
 9 |   },
10 |   "author": "James MacAulay",
11 |   "license": "MIT",
12 |   "bugs": {
13 |     "url": "https://github.com/jamesmacaulay/react-bacon/issues"
14 |   },
15 |   "homepage": "https://github.com/jamesmacaulay/react-bacon",
16 |   "devDependencies": {
17 |     "react": "~0.10.0",
18 |     "grunt": "~0.4.4",
19 |     "grunt-contrib-jasmine": "~0.6.3",
20 |     "browserify": "~3.44.2",
21 |     "grunt-browserify": "~2.0.8",
22 |     "reactify": "~0.13.1",
23 |     "browserify-shim": "~3.4.1"
24 |   },
25 |   "dependencies": {
26 |     "baconjs": "~0.7.10"
27 |   },
28 |   "browserify-shim": {
29 |     "baconjs": "global:Bacon"
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/gruntfile.js:
--------------------------------------------------------------------------------
 1 | module.exports = function(grunt) {
 2 |   grunt.loadNpmTasks('grunt-contrib-jasmine');
 3 |   grunt.loadNpmTasks('grunt-browserify');
 4 | 
 5 |   grunt.initConfig({
 6 |     browserify: {
 7 |       umd: {
 8 |         files: {
 9 |           'dist/react-bacon.js': './src/react-bacon.js'
10 |         },
11 |         options: {
12 |           bundleOptions: {
13 |             standalone: 'ReactBacon'
14 |           },
15 |           transform: ['browserify-shim']
16 |         }
17 |       },
18 |       test: {
19 |         files: {
20 |           'tmp/specs.js': './spec/**/*_spec.js'
21 |         },
22 |         options: {
23 |           alias: ['./src/react-bacon.js:react-bacon'],
24 |           transform: ['reactify']
25 |         }
26 |       }
27 |     },
28 |     jasmine: {
29 |       options: {
30 |         specs: ['tmp/specs.js'],
31 |         reporter: 'spec'
32 |       },
33 |       src: ['dist/react-bacon.js']
34 |     }
35 |   });
36 | 
37 |   grunt.registerTask('spec', ['browserify:test', 'jasmine']);
38 |   grunt.registerTask('default', 'spec');
39 | };
40 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2014 James MacAulay
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ### _This project is no longer maintained_
 2 | 
 3 | It probably still works, but maybe not for long with the latest versions of React and/or Bacon.js. It's not a lot of code, so I encourage you to fork the project and turn it into exactly what you need.
 4 | 
 5 | If you'd like to take over maintenance of this project, feel free to get in touch either over [twitter](https://twitter.com/jamesmacaulay) or by [opening an issue](https://github.com/jamesmacaulay/react-bacon/issues/new).
 6 | 
 7 | # react-bacon
 8 | 
 9 | A little module for using [React](http://facebook.github.io/) with [Bacon.js](http://baconjs.github.io/).
10 | 
11 | Here's [a JSFiddle](http://jsfiddle.net/jamesmacaulay/Wc7bb/)!
12 | 
13 | ## Installation
14 | 
15 | For [browserify](http://browserify.org/) projects, `npm install --save react-bacon`.
16 | 
17 | For other projects, use the [UMD](https://github.com/umdjs/umd) distribution in [/dist/react-bacon.js](https://raw.githubusercontent.com/jamesmacaulay/react-bacon/master/dist/react-bacon.js).
18 | 
19 | If you are just putting it in a `<script>` tag, the library will be at `window.ReactBacon`.
20 | 
21 | ## Usage
22 | 
23 | Right now the library includes a single React mixin, `BaconMixin`.
24 | 
25 | `BaconMixin` provides a few different methods for your components:
26 | 
27 | ### component.propsProperty(_[propName]_)
28 | 
29 | Returns a memoized `Bacon.Property` backed by the component's props, skipping duplicate values. When a `propName` is present, the values of the property are those of the given prop. If no `propName` is given, the property's values are the whole props objects of the component.
30 | 
31 | The properties returned are cleaned up with a `Bacon.End` when the component unmounts.
32 | 
33 | ### component.stateProperty(_[stateName]_)
34 | 
35 | Like `propsProperty(propName)`, but for state values.
36 | 
37 | ### component.eventStream(functionName)
38 | 
39 | Registers an event handler function on the component with the given name, which simply sends its argument to the returned Bacon stream.
40 | 
41 | The stream is memoized by the `functionName`, and gets cleaned up with a `Bacon.End` when the component unmounts.
42 | 
43 | ### component.plug(observable, _[stateKey]_)
44 | 
45 | Plugs a Bacon observable into the component's state, and returns an unsubscribe function. If a `stateKey` is given, then values from the observable are assigned to the given key. If no `stateKey` is given, the values must be objects which are passed directly to `setState` to assign multiple state keys at once.
46 | 
47 | The component will unsubscribe from the stream when it unmounts.
48 | 
49 | ## Packaging
50 | 
51 | ```
52 | browserify --standalone ReactBacon src/react-bacon.js -o dist/react-bacon.js
53 | ```
54 | 


--------------------------------------------------------------------------------
/spec/react-bacon_spec.js:
--------------------------------------------------------------------------------
  1 | /** @jsx React.DOM */
  2 | 
  3 | var React = require('react/addons');
  4 | var Utils = React.addons.TestUtils;
  5 | var Bacon = require('baconjs');
  6 | var BaconMixin = require('react-bacon').BaconMixin;
  7 | 
  8 | describe('BaconMixin', function() {
  9 |   describe('#eventStream', function() {
 10 |     it('returns the stream for that defined name', function() {
 11 |       var stream;
 12 |       var Component = React.createClass({
 13 |         mixins: [BaconMixin],
 14 |         componentWillMount: function() {
 15 |           stream = this.eventStream('clicks');
 16 |         },
 17 |         render: function() {
 18 |           return <div />
 19 |         }
 20 |       });
 21 |       var component = Utils.renderIntoDocument(<Component />);
 22 |       expect(stream instanceof Bacon.EventStream).toBe(true);
 23 |     });
 24 | 
 25 |     it('returns always the same event stream', function() {
 26 |       var reference, anotherReference;
 27 |       var Component = React.createClass({
 28 |         mixins: [BaconMixin],
 29 |         componentWillMount: function() {
 30 |           reference = this.eventStream('clicks');
 31 |           anotherReference = this.eventStream('clicks');
 32 |         },
 33 |         render: function() {
 34 |           return <div />
 35 |         }
 36 |       });
 37 |       var component = Utils.renderIntoDocument(<Component />);
 38 |       expect(reference).toBe(anotherReference);
 39 |     });
 40 | 
 41 |     it('defines a function property with the name of the stream', function() {
 42 |       var Component = React.createClass({
 43 |         mixins: [BaconMixin],
 44 |         componentWillMount: function() {
 45 |           this.eventStream('clicks');
 46 |         },
 47 |         render: function() {
 48 |           return <div />
 49 |         }
 50 |       });
 51 | 
 52 |       var component = Utils.renderIntoDocument(<Component />);
 53 |       expect(component.clicks.constructor).toBe(Function);
 54 |     });
 55 | 
 56 |     it('that defined function can be used as event handler, and pushes to the stream', function() {
 57 |       var clickedDiv;
 58 |       var Component = React.createClass({
 59 |         mixins: [BaconMixin],
 60 |         componentWillMount: function() {
 61 |           this.eventStream('clicks').onValue(function() {
 62 |             clickedDiv = true;
 63 |           });
 64 |         },
 65 |         render: function() {
 66 |           return <div onClick={this.clicks}/>
 67 |         }
 68 |       });
 69 | 
 70 |       var component = Utils.renderIntoDocument(<Component />);
 71 |       var div = Utils.findRenderedDOMComponentWithTag(component, 'div');
 72 |       Utils.Simulate.click(div);
 73 | 
 74 |       expect(clickedDiv).toBe(true);
 75 |     });
 76 | 
 77 |     it('removes subscribers when the component unmounts', function() {
 78 |       var stream;
 79 |       var Component = React.createClass({
 80 |         mixins: [BaconMixin],
 81 |         componentWillMount: function() {
 82 |           stream = this.eventStream('clicks');
 83 |           stream.onValue(function() {
 84 |             // Does something
 85 |           });
 86 |         },
 87 |         render: function() {
 88 |           return <div onClick={this.clicks}/>
 89 |         }
 90 |       });
 91 | 
 92 |       var component = Utils.renderIntoDocument(<Component />);
 93 | 
 94 |       expect(stream.hasSubscribers()).toBe(true);
 95 | 
 96 |       var unmounted = React.unmountComponentAtNode(component.getDOMNode().parentNode);
 97 |       expect(unmounted).toBe(true);
 98 | 
 99 |       expect(stream.hasSubscribers()).toBe(false);
100 |     });
101 |   });
102 | });
103 | 


--------------------------------------------------------------------------------
/src/react-bacon.js:
--------------------------------------------------------------------------------
  1 | var Bacon = require('baconjs');
  2 | 
  3 | module.exports.BaconMixin = ((function(){
  4 |   'use strict';
  5 | 
  6 |   function propsOrStateProperty(component, allPropsOrStateKey, groupKey, filterKey) {
  7 |     var bacon = component._bacon = component._bacon || {};
  8 |     var allPropertyKey = 'properties.'+allPropsOrStateKey;
  9 |     var groupedPropertiesKey = 'properties.'+groupKey;
 10 |     var property = bacon[allPropertyKey];
 11 |     if (!property) {
 12 |       var bus = bacon['buses.'+allPropsOrStateKey] = new Bacon.Bus();
 13 |       property = bacon[allPropertyKey] = bus.toProperty(component[groupKey]).skipDuplicates();
 14 |     }
 15 |     if (filterKey != null) {
 16 |       var wholePropsOrStateProperty = property;
 17 |       var filteredPropertyKey = groupedPropertiesKey+'.'+filterKey;
 18 |       property = bacon[filteredPropertyKey];
 19 |       if (!property) {
 20 |         property = bacon[filteredPropertyKey] = wholePropsOrStateProperty.
 21 |           filter(function(x){return x;}).
 22 |           map(function(propsOrState){
 23 |             return propsOrState[filterKey];
 24 |           }).
 25 |           skipDuplicates().
 26 |           toProperty();
 27 |       }
 28 |     }
 29 |     return property;
 30 |   }
 31 |   return ({
 32 |     propsProperty: function(propName) {
 33 |       return propsOrStateProperty(this, 'allProps', 'props', propName);
 34 |     },
 35 |     stateProperty: function(stateName) {
 36 |       return propsOrStateProperty(this, 'allState', 'state', stateName);
 37 |     },
 38 |     eventStream: function(eventName) {
 39 |       var bacon = this._bacon = this._bacon || {};
 40 |       var buses = bacon['buses.events'] = bacon['buses.events'] || {};
 41 |       var bus = buses[eventName];
 42 |       if (!bus) {
 43 |         bus = buses[eventName] = new Bacon.Bus();
 44 |         this[eventName] = function sendEventToStream(event) {
 45 |           bus.push(event);
 46 |         };
 47 |       }
 48 |       return bus;
 49 |     },
 50 |     plug: function(stream, stateKey) {
 51 |       var unsubscribe;
 52 |       var component = this;
 53 |       var bacon = this._bacon = this._bacon || {};
 54 |       var unsubscribers = bacon.unsubscribers = bacon.unsubscribers || [];
 55 | 
 56 |       if (stateKey == null) {
 57 |         unsubscribe = stream.onValue(function(partialState) {
 58 |           component.setState(partialState);
 59 |         });
 60 |       } else {
 61 |         unsubscribe = stream.onValue(function(value) {
 62 |           var partialState = {};
 63 |           partialState[stateKey] = value;
 64 |           component.setState(partialState);
 65 |         });
 66 |       }
 67 |       unsubscribers.push(unsubscribe);
 68 |       return unsubscribe;
 69 |     },
 70 |     componentDidUpdate: function() {
 71 |       var bacon = this._bacon;
 72 |       if (bacon) {
 73 |         var allPropsBus = bacon['buses.allProps'];
 74 |         allPropsBus && allPropsBus.push(this.props);
 75 |         var allStateBus = bacon['buses.allState'];
 76 |         allStateBus && allStateBus.push(this.state);
 77 |       }
 78 |     },
 79 |     componentWillUnmount: function() {
 80 |       var bacon = this._bacon;
 81 |       if (bacon) {
 82 |         var allPropsBus = bacon['buses.allProps'];
 83 |         allPropsBus && allPropsBus.end();
 84 |         var allStateBus = bacon['buses.allState'];
 85 |         allStateBus && allStateBus.end();
 86 | 
 87 |         var eventBuses = bacon['buses.events'];
 88 |         if (eventBuses) {
 89 |           for (var eventName in eventBuses) {
 90 |             eventBuses[eventName].end();
 91 |           }
 92 |         }
 93 | 
 94 |         var unsubscribers = bacon.unsubscribers;
 95 |         if (unsubscribers) {
 96 |           unsubscribers.forEach(function(f) {f()});
 97 |         }
 98 |       }
 99 |     }
100 |   });
101 | })());
102 | 


--------------------------------------------------------------------------------
/dist/react-bacon.js:
--------------------------------------------------------------------------------
  1 | !function(e){if("object"==typeof exports)module.exports=e();else if("function"==typeof define&&define.amd)define(e);else{var f;"undefined"!=typeof window?f=window:"undefined"!=typeof global?f=global:"undefined"!=typeof self&&(f=self),f.ReactBacon=e()}}(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(_dereq_,module,exports){
  2 | var Bacon = (window.Bacon);
  3 | 
  4 | module.exports.BaconMixin = ((function(){
  5 |   'use strict';
  6 | 
  7 |   function propsOrStateProperty(component, allPropsOrStateKey, groupKey, filterKey) {
  8 |     var bacon = component._bacon = component._bacon || {};
  9 |     var allPropertyKey = 'properties.'+allPropsOrStateKey;
 10 |     var groupedPropertiesKey = 'properties.'+groupKey;
 11 |     var property = bacon[allPropertyKey];
 12 |     if (!property) {
 13 |       var bus = bacon['buses.'+allPropsOrStateKey] = new Bacon.Bus();
 14 |       property = bacon[allPropertyKey] = bus.toProperty(component[groupKey]).skipDuplicates();
 15 |     }
 16 |     if (filterKey != null) {
 17 |       var wholePropsOrStateProperty = property;
 18 |       var filteredPropertyKey = groupedPropertiesKey+'.'+filterKey;
 19 |       property = bacon[filteredPropertyKey];
 20 |       if (!property) {
 21 |         property = bacon[filteredPropertyKey] = wholePropsOrStateProperty.
 22 |           filter(function(x){return x;}).
 23 |           map(function(propsOrState){
 24 |             return propsOrState[filterKey];
 25 |           }).
 26 |           skipDuplicates().
 27 |           toProperty();
 28 |       }
 29 |     }
 30 |     return property;
 31 |   }
 32 |   return ({
 33 |     propsProperty: function(propName) {
 34 |       return propsOrStateProperty(this, 'allProps', 'props', propName);
 35 |     },
 36 |     stateProperty: function(stateName) {
 37 |       return propsOrStateProperty(this, 'allState', 'state', stateName);
 38 |     },
 39 |     eventStream: function(eventName) {
 40 |       var bacon = this._bacon = this._bacon || {};
 41 |       var buses = bacon['buses.events'] = bacon['buses.events'] || {};
 42 |       var bus = buses[eventName];
 43 |       if (!bus) {
 44 |         bus = buses[eventName] = new Bacon.Bus();
 45 |         this[eventName] = function sendEventToStream(event) {
 46 |           bus.push(event);
 47 |         };
 48 |       }
 49 |       return bus;
 50 |     },
 51 |     plug: function(stream, stateKey) {
 52 |       var unsubscribe;
 53 |       var component = this;
 54 |       var bacon = this._bacon = this._bacon || {};
 55 |       var unsubscribers = bacon.unsubscribers = bacon.unsubscribers || [];
 56 | 
 57 |       if (stateKey == null) {
 58 |         unsubscribe = stream.onValue(function(partialState) {
 59 |           component.setState(partialState);
 60 |         });
 61 |       } else {
 62 |         unsubscribe = stream.onValue(function(value) {
 63 |           var partialState = {};
 64 |           partialState[stateKey] = value;
 65 |           component.setState(partialState);
 66 |         });
 67 |       }
 68 |       unsubscribers.push(unsubscribe);
 69 |       return unsubscribe;
 70 |     },
 71 |     componentDidUpdate: function() {
 72 |       var bacon = this._bacon;
 73 |       if (bacon) {
 74 |         var allPropsBus = bacon['buses.allProps'];
 75 |         allPropsBus && allPropsBus.push(this.props);
 76 |         var allStateBus = bacon['buses.allState'];
 77 |         allStateBus && allStateBus.push(this.state);
 78 |       }
 79 |     },
 80 |     componentWillUnmount: function() {
 81 |       var bacon = this._bacon;
 82 |       if (bacon) {
 83 |         var allPropsBus = bacon['buses.allProps'];
 84 |         allPropsBus && allPropsBus.end();
 85 |         var allStateBus = bacon['buses.allState'];
 86 |         allStateBus && allStateBus.end();
 87 | 
 88 |         var eventBuses = bacon['buses.events'];
 89 |         if (eventBuses) {
 90 |           for (var eventName in eventBuses) {
 91 |             eventBuses[eventName].end();
 92 |           }
 93 |         }
 94 | 
 95 |         var unsubscribers = bacon.unsubscribers;
 96 |         if (unsubscribers) {
 97 |           unsubscribers.forEach(function(f) {f()});
 98 |         }
 99 |       }
100 |     }
101 |   });
102 | })());
103 | 
104 | },{}]},{},[1])
105 | (1)
106 | });


--------------------------------------------------------------------------------