├── .eslintrc ├── .gitignore ├── .npmignore ├── CHANGELOG.md ├── LICENSE ├── README.md ├── examples ├── autocomplete │ ├── bundle.js │ ├── index.html │ ├── index.js │ └── package.json └── basic-state-stream │ ├── bundle.js │ ├── index.html │ ├── index.js │ └── package.json ├── index.js ├── lib ├── component.js ├── funcSubject.js ├── lifecycleMixin.js ├── propsMixin.js └── stateStreamMixin.js ├── package.json └── test ├── component.js ├── funcSubject.js ├── lifecycleMixin.js ├── propsMixin.js ├── stateStreamMixin.js └── testUtils.js /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ "react" ], 3 | "env": { 4 | "node": true, 5 | "es6": false, 6 | "browser": true 7 | }, 8 | "ecmaFeatures": { 9 | "jsx": true 10 | }, 11 | "rules": { 12 | "quotes": [1, "single"], 13 | "comma-dangle": [1, "never"], 14 | "strict": [2, "global"], 15 | "brace-style": [2, "1tbs", { "allowSingleLine": false }], 16 | "indent": [2,2], 17 | "no-underscore-dangle": 0, 18 | "no-unused-vars": 2, 19 | "no-trailing-spaces": 0, 20 | "camelcase": 0, 21 | "no-alert": 0, 22 | "no-shadow": 0, 23 | "no-loop-func": 0, 24 | "yoda": 0, 25 | "no-proto": 0, 26 | "no-constant-condition": 0 27 | }, 28 | "globals": { 29 | "__DEV__": true, 30 | "Promise": true 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .brackets.json 3 | npm-debug.log 4 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .brackets.json 3 | npm-debug.log 4 | examples 5 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | #v0.3.0 2 | 3 | - Remove Deprecated EventHandler 4 | - Components do not implements `LifecycleMixin` behavior anymore 5 | - StateStream mixin is now initialized in `componentWillMount` (previously done in `getInitialState`) 6 | - new top level method `cleanAllSubscriptions` 7 | - RxReact.Component 8 | - methods are not enumerable anymore 9 | - empty function on unused lifecycle methods for consitency 10 | - FuncSubject: 11 | - new map function 12 | - `FuncSubject.behavior` 13 | - `FuncSubject.replay` 14 | - `FuncSubject.async` 15 | - `FuncSubject.factory` 16 | 17 | 18 | #v0.2 19 | 20 | - Add `PropsMixin` 21 | - Add `Component` Base Class 22 | - Add `FuncSubject` 23 | - Deprecate EventHandler (Renamed `FuncSubject`) 24 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | 2 | Apache License 3 | Version 2.0, January 2004 4 | http://www.apache.org/licenses/ 5 | 6 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 7 | 8 | 1. Definitions. 9 | 10 | "License" shall mean the terms and conditions for use, reproduction, 11 | and distribution as defined by Sections 1 through 9 of this document. 12 | 13 | "Licensor" shall mean the copyright owner or entity authorized by 14 | the copyright owner that is granting the License. 15 | 16 | "Legal Entity" shall mean the union of the acting entity and all 17 | other entities that control, are controlled by, or are under common 18 | control with that entity. For the purposes of this definition, 19 | "control" means (i) the power, direct or indirect, to cause the 20 | direction or management of such entity, whether by contract or 21 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 22 | outstanding shares, or (iii) beneficial ownership of such entity. 23 | 24 | "You" (or "Your") shall mean an individual or Legal Entity 25 | exercising permissions granted by this License. 26 | 27 | "Source" form shall mean the preferred form for making modifications, 28 | including but not limited to software source code, documentation 29 | source, and configuration files. 30 | 31 | "Object" form shall mean any form resulting from mechanical 32 | transformation or translation of a Source form, including but 33 | not limited to compiled object code, generated documentation, 34 | and conversions to other media types. 35 | 36 | "Work" shall mean the work of authorship, whether in Source or 37 | Object form, made available under the License, as indicated by a 38 | copyright notice that is included in or attached to the work 39 | (an example is provided in the Appendix below). 40 | 41 | "Derivative Works" shall mean any work, whether in Source or Object 42 | form, that is based on (or derived from) the Work and for which the 43 | editorial revisions, annotations, elaborations, or other modifications 44 | represent, as a whole, an original work of authorship. For the purposes 45 | of this License, Derivative Works shall not include works that remain 46 | separable from, or merely link (or bind by name) to the interfaces of, 47 | the Work and Derivative Works thereof. 48 | 49 | "Contribution" shall mean any work of authorship, including 50 | the original version of the Work and any modifications or additions 51 | to that Work or Derivative Works thereof, that is intentionally 52 | submitted to Licensor for inclusion in the Work by the copyright owner 53 | or by an individual or Legal Entity authorized to submit on behalf of 54 | the copyright owner. For the purposes of this definition, "submitted" 55 | means any form of electronic, verbal, or written communication sent 56 | to the Licensor or its representatives, including but not limited to 57 | communication on electronic mailing lists, source code control systems, 58 | and issue tracking systems that are managed by, or on behalf of, the 59 | Licensor for the purpose of discussing and improving the Work, but 60 | excluding communication that is conspicuously marked or otherwise 61 | designated in writing by the copyright owner as "Not a Contribution." 62 | 63 | "Contributor" shall mean Licensor and any individual or Legal Entity 64 | on behalf of whom a Contribution has been received by Licensor and 65 | subsequently incorporated within the Work. 66 | 67 | 2. Grant of Copyright License. Subject to the terms and conditions of 68 | this License, each Contributor hereby grants to You a perpetual, 69 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 70 | copyright license to reproduce, prepare Derivative Works of, 71 | publicly display, publicly perform, sublicense, and distribute the 72 | Work and such Derivative Works in Source or Object form. 73 | 74 | 3. Grant of Patent License. Subject to the terms and conditions of 75 | this License, each Contributor hereby grants to You a perpetual, 76 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 77 | (except as stated in this section) patent license to make, have made, 78 | use, offer to sell, sell, import, and otherwise transfer the Work, 79 | where such license applies only to those patent claims licensable 80 | by such Contributor that are necessarily infringed by their 81 | Contribution(s) alone or by combination of their Contribution(s) 82 | with the Work to which such Contribution(s) was submitted. If You 83 | institute patent litigation against any entity (including a 84 | cross-claim or counterclaim in a lawsuit) alleging that the Work 85 | or a Contribution incorporated within the Work constitutes direct 86 | or contributory patent infringement, then any patent licenses 87 | granted to You under this License for that Work shall terminate 88 | as of the date such litigation is filed. 89 | 90 | 4. Redistribution. You may reproduce and distribute copies of the 91 | Work or Derivative Works thereof in any medium, with or without 92 | modifications, and in Source or Object form, provided that You 93 | meet the following conditions: 94 | 95 | (a) You must give any other recipients of the Work or 96 | Derivative Works a copy of this License; and 97 | 98 | (b) You must cause any modified files to carry prominent notices 99 | stating that You changed the files; and 100 | 101 | (c) You must retain, in the Source form of any Derivative Works 102 | that You distribute, all copyright, patent, trademark, and 103 | attribution notices from the Source form of the Work, 104 | excluding those notices that do not pertain to any part of 105 | the Derivative Works; and 106 | 107 | (d) If the Work includes a "NOTICE" text file as part of its 108 | distribution, then any Derivative Works that You distribute must 109 | include a readable copy of the attribution notices contained 110 | within such NOTICE file, excluding those notices that do not 111 | pertain to any part of the Derivative Works, in at least one 112 | of the following places: within a NOTICE text file distributed 113 | as part of the Derivative Works; within the Source form or 114 | documentation, if provided along with the Derivative Works; or, 115 | within a display generated by the Derivative Works, if and 116 | wherever such third-party notices normally appear. The contents 117 | of the NOTICE file are for informational purposes only and 118 | do not modify the License. You may add Your own attribution 119 | notices within Derivative Works that You distribute, alongside 120 | or as an addendum to the NOTICE text from the Work, provided 121 | that such additional attribution notices cannot be construed 122 | as modifying the License. 123 | 124 | You may add Your own copyright statement to Your modifications and 125 | may provide additional or different license terms and conditions 126 | for use, reproduction, or distribution of Your modifications, or 127 | for any such Derivative Works as a whole, provided Your use, 128 | reproduction, and distribution of the Work otherwise complies with 129 | the conditions stated in this License. 130 | 131 | 5. Submission of Contributions. Unless You explicitly state otherwise, 132 | any Contribution intentionally submitted for inclusion in the Work 133 | by You to the Licensor shall be under the terms and conditions of 134 | this License, without any additional terms or conditions. 135 | Notwithstanding the above, nothing herein shall supersede or modify 136 | the terms of any separate license agreement you may have executed 137 | with Licensor regarding such Contributions. 138 | 139 | 6. Trademarks. This License does not grant permission to use the trade 140 | names, trademarks, service marks, or product names of the Licensor, 141 | except as required for reasonable and customary use in describing the 142 | origin of the Work and reproducing the content of the NOTICE file. 143 | 144 | 7. Disclaimer of Warranty. Unless required by applicable law or 145 | agreed to in writing, Licensor provides the Work (and each 146 | Contributor provides its Contributions) on an "AS IS" BASIS, 147 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 148 | implied, including, without limitation, any warranties or conditions 149 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 150 | PARTICULAR PURPOSE. You are solely responsible for determining the 151 | appropriateness of using or redistributing the Work and assume any 152 | risks associated with Your exercise of permissions under this License. 153 | 154 | 8. Limitation of Liability. In no event and under no legal theory, 155 | whether in tort (including negligence), contract, or otherwise, 156 | unless required by applicable law (such as deliberate and grossly 157 | negligent acts) or agreed to in writing, shall any Contributor be 158 | liable to You for damages, including any direct, indirect, special, 159 | incidental, or consequential damages of any character arising as a 160 | result of this License or out of the use or inability to use the 161 | Work (including but not limited to damages for loss of goodwill, 162 | work stoppage, computer failure or malfunction, or any and all 163 | other commercial damages or losses), even if such Contributor 164 | has been advised of the possibility of such damages. 165 | 166 | 9. Accepting Warranty or Additional Liability. While redistributing 167 | the Work or Derivative Works thereof, You may choose to offer, 168 | and charge a fee for, acceptance of support, warranty, indemnity, 169 | or other liability obligations and/or rights consistent with this 170 | License. However, in accepting such obligations, You may act only 171 | on Your own behalf and on Your sole responsibility, not on behalf 172 | of any other Contributor, and only if You agree to indemnify, 173 | defend, and hold each Contributor harmless for any liability 174 | incurred by, or claims asserted against, such Contributor by reason 175 | of your accepting any such warranty or additional liability. 176 | 177 | END OF TERMS AND CONDITIONS 178 | 179 | APPENDIX: How to apply the Apache License to your work. 180 | 181 | To apply the Apache License to your work, attach the following 182 | boilerplate notice, with the fields enclosed by brackets "[]" 183 | replaced with your own identifying information. (Don't include 184 | the brackets!) The text should be enclosed in the appropriate 185 | comment syntax for the file format. We also recommend that a 186 | file or class name and description of purpose be included on the 187 | same "printed page" as the copyright notice for easier 188 | identification within third-party archives. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # RxReact 2 | 3 | > [ReactJS](http://facebook.github.io/react/) bindings for [RxJS](https://github.com/Reactive-Extensions/RxJS) 4 | 5 | 6 | # Installation 7 | 8 | Install this module with npm: 9 | 10 | ``` 11 | npm install rx-react 12 | ``` 13 | 14 | # Usage: 15 | 16 | RxReact provides a set of utilities to work with RxJS and React : 17 | 18 | * The `StateStreamMixin` 19 | * The `LifecycleMixin` 20 | * The `PropsMixin` 21 | * The `RxReact.Component` base class 22 | * The `FuncSubject` helper 23 | 24 | 25 | 26 | ## StateStreamMixin 27 | 28 | The `StateStreamMixin` allows to bind a component state to an RxJS `Observable` stream. 29 | The way to achieve the binding is to provide a `getStateStream` method on your component that returns an RxJS `Observable`, the `StateStream` mixin will automatically merge the state of your component with the values published by the returned observable. The subscription will be automaticly cleaned on component unmount. 30 | 31 | Example: 32 | 33 | ```javascript 34 | var StateStreamMixin = require('rx-react').StateStreamMixin; 35 | var React = require('react'); 36 | var Rx = require('rx'); 37 | 38 | 39 | var Timer = React.createClass({ 40 | mixins: [StateStreamMixin], 41 | getStateStream: function () { 42 | return Rx.Observable.interval(1000).map(function (interval) { 43 | return { 44 | secondsElapsed: interval 45 | }; 46 | }); 47 | }, 48 | render: function () { 49 | var secondsElapsed = this.state ? this.state.secondsElapsed : 0; 50 | return ( 51 |
Seconds Elapsed: {secondsElapsed}
52 | ); 53 | } 54 | }); 55 | 56 | React.render(, document.getElementById('timer-holder')); 57 | ``` 58 | 59 | 60 | ## LifecycleMixin 61 | 62 | The `LifecycleMixin` allows you to consume React components lifecycle events as RxJS `Observable`. 63 | The `LifecycleMixin` will inject a property `lifecycle` to the component, that property contains an observable for each lifecycle events. 64 | 65 | Example : 66 | 67 | ```javascript 68 | var LifecycleMixin = require('rx-react').LifecycleMixin; 69 | var React = require('react'); 70 | var Rx = require('rx'); 71 | 72 | 73 | var Component = React.createClass({ 74 | mixins: [LifecycleMixin], 75 | componentWillMount: function () { 76 | this.lifecycle.componentDidMount.subscribe(function () { 77 | console.log('componentDidMount'); 78 | }); 79 | 80 | this.lifecycle.componentWillReceiveProps.subscribe(function (props) { 81 | console.log('componentWillReceiveProps : ' JSON.stringify(props)); 82 | }); 83 | 84 | this.lifecycle.componentWillUpdate.subscribe(function ({nextProps, nextState}) { 85 | console.log('componentWillUpdate : ' JSON.stringify({nextProps, nextState})); 86 | }); 87 | 88 | this.lifecycle.componentDidUpdate.subscribe(function ({prevProps, prevState}) { 89 | console.log('componentDidUpdate : ' JSON.stringify({prevProps, prevState})); 90 | }); 91 | this.lifecycle.componentWillUnmount.subscribe(function () { 92 | console.log('componentWillUnmount'); 93 | }); 94 | }, 95 | render: function() { 96 | //... 97 | } 98 | }); 99 | ``` 100 | 101 | ## PropsMixin 102 | 103 | The `PropsMixin` allows to obtain a stream of props as RxJS `Observable` for your component. 104 | Example : 105 | 106 | ```javascript 107 | var PropsMixin = require('rx-react').PropsMixin; 108 | var React = require('react'); 109 | 110 | 111 | var Component = React.createClass({ 112 | mixins: [PropsMixin], 113 | componentWillMount: function () { 114 | this.propsStream.subscribe(function (props) { 115 | console.log(props.message); 116 | } 117 | }, 118 | render: function() { 119 | //... 120 | } 121 | }); 122 | 123 | var comp = React.render(, domNode); // log 'Hello World!' 124 | comp.setProps({message: 'Hello John'}); // log 'Hello John' 125 | ``` 126 | This is particulary useful in combination with the `StateStreamMixin` when your component states depends on Props. 127 | 128 | 129 | ## Component 130 | 131 | The `RxReact.Component` is a base class combining the behavior of the `PropsStreamMixin` and the `StateStreamMixin`. 132 | It extends `React.Component`. 133 | Example: 134 | 135 | ```javascript 136 | var RxReact = require('rx-react'); 137 | var Rx = require('rx'); 138 | 139 | class MyComponent extends RxReact.Component { 140 | getStateStream() { 141 | return Rx.Observable.interval(1000).map(function (interval) { 142 | return { 143 | secondsElapsed: interval 144 | }; 145 | }); 146 | } 147 | 148 | render() { 149 | var secondsElapsed = this.state ? this.state.secondsElapsed : 0; 150 | return ( 151 |
Seconds Elapsed: {secondsElapsed}
152 | ); 153 | } 154 | } 155 | ``` 156 | Note that when you extend lifecycle methods, you must call the `super` method. 157 | 158 | > Before the 0.3.x versions `RxReact.Component` also implemented lifecyle mixin behavior, for some perf reasons and because most of the time it's unnecessary this has been removed. 159 | > If you want reenable this behavior use `FuncSubject` as lifecycle method, or manually apply the `LifecycleMixin` on your class. 160 | 161 | ## FuncSubject 162 | 163 | The `FuncSubject` helper allows to create an RxJS `Observable` that can be injected as callback for React event handlers, refs, etc... 164 | To create an handler use the `create` function of `FuncSubject` 165 | 166 | ```javascript 167 | var myHandler = FuncSubject.create() 168 | ``` 169 | 170 | Example: 171 | 172 | ```javascript 173 | var FuncSubject = require('rx-react').FuncSubject; 174 | var React = require('react'); 175 | var Rx = require('rx'); 176 | 177 | 178 | var Button = React.createClass({ 179 | componentWillMount: function () { 180 | this.buttonClicked = FuncSubject.create(); 181 | 182 | this.buttonClicked.subscribe(function (event) { 183 | alert('button clicked'); 184 | }) 185 | }, 186 | render: function() { 187 | return