├── .eslintrc
├── .gitignore
├── .npmignore
├── .travis.yml
├── LICENSE
├── README.md
├── dist
    ├── react-server.dev.js
    ├── react-server.js
    ├── react-server.min.js
    └── react.js
├── index.js
├── lib
    ├── React.js
    ├── ReactClass.js
    ├── ReactComponent.js
    ├── ReactComponentFactory.js
    ├── ReactCompositeComponent.js
    ├── ReactDomComponent.js
    ├── ReactTextComponent.js
    └── addons.js
├── package.json
├── register.js
├── tests
    ├── bench.js
    ├── fixtures
    │   ├── apps
    │   │   ├── chat
    │   │   │   ├── app.js
    │   │   │   ├── components
    │   │   │   │   ├── ChatApp.jsx
    │   │   │   │   ├── Html.jsx
    │   │   │   │   ├── MessageComposer.jsx
    │   │   │   │   ├── MessageListItem.jsx
    │   │   │   │   ├── MessageSection.jsx
    │   │   │   │   ├── ThreadListItem.jsx
    │   │   │   │   └── ThreadSection.jsx
    │   │   │   ├── configs
    │   │   │   │   └── routes.js
    │   │   │   ├── package.json
    │   │   │   ├── state.json
    │   │   │   └── stores
    │   │   │   │   ├── MessageStore.js
    │   │   │   │   ├── RouteStore.js
    │   │   │   │   ├── ThreadStore.js
    │   │   │   │   └── UnreadThreadStore.js
    │   │   ├── fluxible-router
    │   │   │   ├── app.js
    │   │   │   ├── components
    │   │   │   │   ├── About.js
    │   │   │   │   ├── Application.js
    │   │   │   │   ├── Home.js
    │   │   │   │   ├── Html.js
    │   │   │   │   ├── Nav.js
    │   │   │   │   ├── Page.js
    │   │   │   │   └── Timestamp.js
    │   │   │   ├── configs
    │   │   │   │   └── routes.js
    │   │   │   ├── package.json
    │   │   │   ├── state.json
    │   │   │   └── stores
    │   │   │   │   ├── ApplicationStore.js
    │   │   │   │   ├── PageStore.js
    │   │   │   │   ├── RouteStore.js
    │   │   │   │   └── TimeStore.js
    │   │   └── todo
    │   │   │   ├── app.js
    │   │   │   ├── components
    │   │   │       ├── Footer.jsx
    │   │   │       ├── Html.jsx
    │   │   │       ├── TodoApp.jsx
    │   │   │       └── TodoItem.jsx
    │   │   │   ├── package.json
    │   │   │   ├── state.json
    │   │   │   └── stores
    │   │   │       ├── PageStore.js
    │   │   │       └── TodoStore.js
    │   └── components
    │   │   ├── ContextChild.js
    │   │   ├── ContextParent.js
    │   │   ├── Hello.js
    │   │   └── HelloCreateClass.js
    ├── profile
    │   ├── react-server.js
    │   └── react.js
    └── unit
    │   ├── .eslintrc
    │   ├── apps.js
    │   ├── context.js
    │   ├── hello.js
    │   ├── native.js
    │   └── stateful.js
├── utils
    └── renderAppWithFreshReact.js
└── webpack.config.js


/.eslintrc:
--------------------------------------------------------------------------------
 1 | ---
 2 | parser: "babel-eslint"
 3 | env:
 4 |   node: true
 5 | rules:
 6 |   strict: 0
 7 |   indent: [2, 4]
 8 |   quotes: [0]
 9 |   no-unused-vars: 0 // see https://github.com/babel/babel-eslint/issues/21
10 |   no-underscore-dangle: 0
11 |   no-use-before-define: 0
12 |   no-unused-expressions: 0
13 |   yoda: 0
14 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | artifacts
2 | node_modules
3 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | coverage/
 2 | artifacts/
 3 | **/npm-debug.log
 4 | **/ynpm-debug.log
 5 | .DS_Store
 6 | *~
 7 | test/
 8 | tests/
 9 | docs/
10 | examples/
11 | screwdriver/
12 | Makefile
13 | dist/react.js
14 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | sudo: false
2 | language: node_js
3 | matrix:
4 |   allow_failures:
5 |     - node_js: "0.12"
6 | node_js:
7 |   - "0.10"
8 |   - "0.12"
9 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | BSD License
 2 | 
 3 | For React software
 4 | 
 5 | Copyright (c) 2013-2015, Facebook, Inc.
 6 | All rights reserved.
 7 | 
 8 | Redistribution and use in source and binary forms, with or without modification,
 9 | are permitted provided that the following conditions are met:
10 | 
11 |  * Redistributions of source code must retain the above copyright notice, this
12 |    list of conditions and the following disclaimer.
13 | 
14 |  * Redistributions in binary form must reproduce the above copyright notice,
15 |    this list of conditions and the following disclaimer in the documentation
16 |    and/or other materials provided with the distribution.
17 | 
18 |  * Neither the name Facebook nor the names of its contributors may be used to
19 |    endorse or promote products derived from this software without specific
20 |    prior written permission.
21 | 
22 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
23 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
24 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
25 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR
26 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
27 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
28 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
29 | ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
30 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
31 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
32 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # react-server
 2 | 
 3 | This project seeks to re-implement React's `renderToString` and 
 4 | `renderToStaticMarkup` methods to be more efficient for server rendering. The
 5 | resulting markup is intended to be equivalent to that of stock React so that
 6 | the client (which will use stock React) will be able to re-use the server
 7 | rendered markup.
 8 | 
 9 | ## Install
10 | 
11 | Not available on npm. You must install from git.
12 | 
13 | ## Usage
14 | 
15 | react-server is meant to be a drop in replacement for React specifically for the
16 | server. It should not be used on the client.
17 | 
18 | You can enable react-server by doing the following:
19 | 
20 | ```js
21 | require('react-server/register');
22 | ```
23 | 
24 | Internally this is overriding node's require cache to return react-server
25 | whenever `require('react')` or `require('react/addons')` is called.
26 | 
27 | ## Behavioral Differences
28 | 
29 | In order to gain these efficiencies, some of the inner workings of React have 
30 | been changed which may bleed in to how components are implemented.
31 | 
32 | ### Autobinding
33 | 
34 | `React.createClass` automatically binds all non-static methods to the component
35 | instance so that you do not need to automatically bind them. This is typically 
36 | used when registering event handlers or passing methods between components. If
37 | your component relies on this, it's not as simple as just using bind because 
38 | React on the client will warn about binding methods that are already autobound.
39 | Instead, you can create a closure:
40 | 
41 | ```
42 | React.createClass({
43 |     render: function () {
44 |         var self = this;
45 |         return <a onClick={function (e) {
46 |             self.handleClick(e);
47 |         }}>foo</a>
48 |     }
49 | });
50 | ```
51 | 
52 | ### Owner vs. Parent Context
53 | 
54 | react-server uses parent context which is slightly different to React 0.13's 
55 | owner context. React plans on switching to parent context in version 0.14, but
56 | react-server chose parent context due to its simpler implementation. In most
57 | cases, this is actually more reliable than the old owner context.
58 | 
59 | ## Missing Utilities
60 | 
61 | react-server may still be missing functionality from stock React. If you find 
62 | any missing pieces or broken functionality, please open an issue to let me know.
63 | 
64 | ## Testing
65 | 
66 | You can run the test suite and benchmarks simply by running:
67 | 
68 | ```
69 | npm test
70 | ```
71 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | var assign = require('object-assign');
 2 | 
 3 | // Monkey patch setState to be synchronous and not deal with update queue
 4 | var ReactComponent = require('react/lib/ReactComponent');
 5 | ReactComponent.prototype.setState = function (state) {
 6 |     this.state = assign({}, this.state, state);
 7 | };
 8 | 
 9 | var ReactServer = require('./lib/React');
10 | 
11 | // Ensure that all addons use ./lib/React as React dependency
12 | require.cache[require.resolve('react/lib/React')] = require.cache[require.resolve('./lib/React')];
13 | 
14 | ReactServer.addons = require('./lib/addons');
15 | 
16 | module.exports = ReactServer;
17 | 


--------------------------------------------------------------------------------
/lib/React.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2013-2015, Facebook, Inc.
 3 |  * All rights reserved.
 4 |  */
 5 | 
 6 | var assign = require('object-assign');
 7 | 
 8 | import ReactServerClass from './ReactClass';
 9 | import ReactClass from 'react/lib/ReactClass';
10 | 
11 | 
12 | // Prevent autobind on built-in components
13 | ReactClass.createClass = ReactServerClass.createClass;
14 | 
15 | import ReactDomComponent from './ReactDomComponent';
16 | import {
17 |     instantiateReactComponent,
18 |     injections as ReactComponentFactoryInjections
19 | } from './ReactComponentFactory.js';
20 | import ReactCompositeComponent from './ReactCompositeComponent';
21 | 
22 | import ReactChildren from 'react/lib/ReactChildren';
23 | import ReactComponent from 'react/lib/ReactComponent';
24 | import ReactDefaultInjection from 'react/lib/ReactDefaultInjection';
25 | import ReactDOM from 'react/lib/ReactDOM';
26 | import ReactElement from 'react/lib/ReactElement';
27 | import ReactInstanceHandles from 'react/lib/ReactInstanceHandles';
28 | import ReactMarkupChecksum from 'react/lib/ReactMarkupChecksum';
29 | import ReactNativeComponent from 'react/lib/ReactNativeComponent';
30 | 
31 | ReactDefaultInjection.inject();
32 | ReactComponentFactoryInjections.ReactCompositeComponent = ReactCompositeComponent;
33 | ReactComponentFactoryInjections.ReactDomComponent = ReactDomComponent;
34 | 
35 | var ReactServer = {
36 |     Children: {
37 |         map: ReactChildren.map,
38 |         forEach: ReactChildren.forEach,
39 |         count: ReactChildren.count,
40 |         only: require('react/lib/onlyChild')
41 |     },
42 |     Component: ReactComponent,
43 |     createClass: ReactServerClass.createClass,
44 |     createElement: ReactElement.createElement,
45 |     cloneElement: ReactElement.cloneElement,
46 |     createFactory: ReactElement.createFactory,
47 |     DOM: ReactDOM,
48 |     isValidElement: ReactElement.isValidElement,
49 |     PropTypes: require('react/lib/ReactPropTypes'),
50 |     renderToStaticMarkup: function (element, callback) {
51 |         var component = instantiateReactComponent(element);
52 |         var markup = component.mountComponent(null, {
53 |             renderToStaticMarkup: true
54 |         }, {});
55 |         callback && callback(null, markup);
56 |         return markup;
57 |     },
58 |     renderToString: function (element, callback) {
59 |         var rootNodeId = ReactInstanceHandles.createReactRootID();
60 |         var component = instantiateReactComponent(element);
61 |         var markup = component.mountComponent(rootNodeId, {
62 |             renderToStaticMarkup: false
63 |         }, {});
64 |         markup = ReactMarkupChecksum.addChecksumToMarkup(markup);
65 |         callback && callback(null, markup);
66 |         return markup;
67 |     },
68 |     version: '0.13.3',
69 | 
70 |     __spread: assign,
71 | 
72 |     // Allows seeing if react-server is used
73 |     __isReactServer: true
74 | };
75 | 
76 | module.exports = ReactServer;
77 | 


--------------------------------------------------------------------------------
/lib/ReactClass.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Copyright 2013-2015, Facebook, Inc.
  3 |  * All rights reserved.
  4 |  *
  5 |  * This source code is licensed under the BSD-style license found in the
  6 |  * LICENSE file in the root directory of this source tree. An additional grant
  7 |  * of patent rights can be found in the PATENTS file in the same directory.
  8 |  *
  9 |  * @providesModule ReactClass
 10 |  */
 11 | 
 12 | 'use strict';
 13 | 
 14 | var ReactComponent = require("react/lib/ReactComponent");
 15 | var ReactElement = require("react/lib/ReactElement");
 16 | var ReactErrorUtils = require("react/lib/ReactErrorUtils");
 17 | var ReactInstanceMap = require("react/lib/ReactInstanceMap");
 18 | var ReactLifeCycle = require("react/lib/ReactLifeCycle");
 19 | var ReactPropTypeLocations = require("react/lib/ReactPropTypeLocations");
 20 | var ReactPropTypeLocationNames = require("react/lib/ReactPropTypeLocationNames");
 21 | var ReactUpdateQueue = require("react/lib/ReactUpdateQueue");
 22 | 
 23 | var assign = require("object-assign");
 24 | var invariant = require("react/lib/invariant");
 25 | var keyMirror = require("react/lib/keyMirror");
 26 | var keyOf = require("react/lib/keyOf");
 27 | var warning = require("react/lib/warning");
 28 | 
 29 | var MIXINS_KEY = keyOf({mixins: null});
 30 | 
 31 | /**
 32 |  * Policies that describe methods in `ReactClassInterface`.
 33 |  */
 34 | var SpecPolicy = keyMirror({
 35 |     /**
 36 |      * These methods may be defined only once by the class specification or mixin.
 37 |      */
 38 |     DEFINE_ONCE: null,
 39 |     /**
 40 |      * These methods may be defined by both the class specification and mixins.
 41 |      * Subsequent definitions will be chained. These methods must return void.
 42 |      */
 43 |     DEFINE_MANY: null,
 44 |     /**
 45 |      * These methods are overriding the base class.
 46 |      */
 47 |     OVERRIDE_BASE: null,
 48 |     /**
 49 |      * These methods are similar to DEFINE_MANY, except we assume they return
 50 |      * objects. We try to merge the keys of the return values of all the mixed in
 51 |      * functions. If there is a key conflict we throw.
 52 |      */
 53 |     DEFINE_MANY_MERGED: null
 54 | });
 55 | 
 56 | 
 57 | var injectedMixins = [];
 58 | 
 59 | /**
 60 |  * Composite components are higher-level components that compose other composite
 61 |  * or native components.
 62 |  *
 63 |  * To create a new type of `ReactClass`, pass a specification of
 64 |  * your new class to `React.createClass`. The only requirement of your class
 65 |  * specification is that you implement a `render` method.
 66 |  *
 67 |  *   var MyComponent = React.createClass({
 68 |  *     render: function() {
 69 |  *       return <div>Hello World</div>;
 70 |  *     }
 71 |  *   });
 72 |  *
 73 |  * The class specification supports a specific protocol of methods that have
 74 |  * special meaning (e.g. `render`). See `ReactClassInterface` for
 75 |  * more the comprehensive protocol. Any other properties and methods in the
 76 |  * class specification will available on the prototype.
 77 |  *
 78 |  * @interface ReactClassInterface
 79 |  * @internal
 80 |  */
 81 | var ReactClassInterface = {
 82 | 
 83 |     /**
 84 |      * An array of Mixin objects to include when defining your component.
 85 |      *
 86 |      * @type {array}
 87 |      * @optional
 88 |      */
 89 |     mixins: SpecPolicy.DEFINE_MANY,
 90 | 
 91 |     /**
 92 |      * An object containing properties and methods that should be defined on
 93 |      * the component's constructor instead of its prototype (static methods).
 94 |      *
 95 |      * @type {object}
 96 |      * @optional
 97 |      */
 98 |     statics: SpecPolicy.DEFINE_MANY,
 99 | 
100 |     /**
101 |      * Definition of prop types for this component.
102 |      *
103 |      * @type {object}
104 |      * @optional
105 |      */
106 |     propTypes: SpecPolicy.DEFINE_MANY,
107 | 
108 |     /**
109 |      * Definition of context types for this component.
110 |      *
111 |      * @type {object}
112 |      * @optional
113 |      */
114 |     contextTypes: SpecPolicy.DEFINE_MANY,
115 | 
116 |     /**
117 |      * Definition of context types this component sets for its children.
118 |      *
119 |      * @type {object}
120 |      * @optional
121 |      */
122 |     childContextTypes: SpecPolicy.DEFINE_MANY,
123 | 
124 |     // ==== Definition methods ====
125 | 
126 |     /**
127 |      * Invoked when the component is mounted. Values in the mapping will be set on
128 |      * `this.props` if that prop is not specified (i.e. using an `in` check).
129 |      *
130 |      * This method is invoked before `getInitialState` and therefore cannot rely
131 |      * on `this.state` or use `this.setState`.
132 |      *
133 |      * @return {object}
134 |      * @optional
135 |      */
136 |     getDefaultProps: SpecPolicy.DEFINE_MANY_MERGED,
137 | 
138 |     /**
139 |      * Invoked once before the component is mounted. The return value will be used
140 |      * as the initial value of `this.state`.
141 |      *
142 |      *   getInitialState: function() {
143 |    *     return {
144 |    *       isOn: false,
145 |    *       fooBaz: new BazFoo()
146 |    *     }
147 |    *   }
148 |      *
149 |      * @return {object}
150 |      * @optional
151 |      */
152 |     getInitialState: SpecPolicy.DEFINE_MANY_MERGED,
153 | 
154 |     /**
155 |      * @return {object}
156 |      * @optional
157 |      */
158 |     getChildContext: SpecPolicy.DEFINE_MANY_MERGED,
159 | 
160 |     /**
161 |      * Uses props from `this.props` and state from `this.state` to render the
162 |      * structure of the component.
163 |      *
164 |      * No guarantees are made about when or how often this method is invoked, so
165 |      * it must not have side effects.
166 |      *
167 |      *   render: function() {
168 |    *     var name = this.props.name;
169 |    *     return <div>Hello, {name}!</div>;
170 |    *   }
171 |      *
172 |      * @return {ReactComponent}
173 |      * @nosideeffects
174 |      * @required
175 |      */
176 |     render: SpecPolicy.DEFINE_ONCE,
177 | 
178 | 
179 | 
180 |     // ==== Delegate methods ====
181 | 
182 |     /**
183 |      * Invoked when the component is initially created and about to be mounted.
184 |      * This may have side effects, but any external subscriptions or data created
185 |      * by this method must be cleaned up in `componentWillUnmount`.
186 |      *
187 |      * @optional
188 |      */
189 |     componentWillMount: SpecPolicy.DEFINE_MANY,
190 | 
191 |     /**
192 |      * Invoked when the component has been mounted and has a DOM representation.
193 |      * However, there is no guarantee that the DOM node is in the document.
194 |      *
195 |      * Use this as an opportunity to operate on the DOM when the component has
196 |      * been mounted (initialized and rendered) for the first time.
197 |      *
198 |      * @param {DOMElement} rootNode DOM element representing the component.
199 |      * @optional
200 |      */
201 |     componentDidMount: SpecPolicy.DEFINE_MANY,
202 | 
203 |     /**
204 |      * Invoked before the component receives new props.
205 |      *
206 |      * Use this as an opportunity to react to a prop transition by updating the
207 |      * state using `this.setState`. Current props are accessed via `this.props`.
208 |      *
209 |      *   componentWillReceiveProps: function(nextProps, nextContext) {
210 |    *     this.setState({
211 |    *       likesIncreasing: nextProps.likeCount > this.props.likeCount
212 |    *     });
213 |    *   }
214 |      *
215 |      * NOTE: There is no equivalent `componentWillReceiveState`. An incoming prop
216 |      * transition may cause a state change, but the opposite is not true. If you
217 |      * need it, you are probably looking for `componentWillUpdate`.
218 |      *
219 |      * @param {object} nextProps
220 |      * @optional
221 |      */
222 |     componentWillReceiveProps: SpecPolicy.DEFINE_MANY,
223 | 
224 |     /**
225 |      * Invoked while deciding if the component should be updated as a result of
226 |      * receiving new props, state and/or context.
227 |      *
228 |      * Use this as an opportunity to `return false` when you're certain that the
229 |      * transition to the new props/state/context will not require a component
230 |      * update.
231 |      *
232 |      *   shouldComponentUpdate: function(nextProps, nextState, nextContext) {
233 |    *     return !equal(nextProps, this.props) ||
234 |    *       !equal(nextState, this.state) ||
235 |    *       !equal(nextContext, this.context);
236 |    *   }
237 |      *
238 |      * @param {object} nextProps
239 |      * @param {?object} nextState
240 |      * @param {?object} nextContext
241 |      * @return {boolean} True if the component should update.
242 |      * @optional
243 |      */
244 |     shouldComponentUpdate: SpecPolicy.DEFINE_ONCE,
245 | 
246 |     /**
247 |      * Invoked when the component is about to update due to a transition from
248 |      * `this.props`, `this.state` and `this.context` to `nextProps`, `nextState`
249 |      * and `nextContext`.
250 |      *
251 |      * Use this as an opportunity to perform preparation before an update occurs.
252 |      *
253 |      * NOTE: You **cannot** use `this.setState()` in this method.
254 |      *
255 |      * @param {object} nextProps
256 |      * @param {?object} nextState
257 |      * @param {?object} nextContext
258 |      * @param {ReactReconcileTransaction} transaction
259 |      * @optional
260 |      */
261 |     componentWillUpdate: SpecPolicy.DEFINE_MANY,
262 | 
263 |     /**
264 |      * Invoked when the component's DOM representation has been updated.
265 |      *
266 |      * Use this as an opportunity to operate on the DOM when the component has
267 |      * been updated.
268 |      *
269 |      * @param {object} prevProps
270 |      * @param {?object} prevState
271 |      * @param {?object} prevContext
272 |      * @param {DOMElement} rootNode DOM element representing the component.
273 |      * @optional
274 |      */
275 |     componentDidUpdate: SpecPolicy.DEFINE_MANY,
276 | 
277 |     /**
278 |      * Invoked when the component is about to be removed from its parent and have
279 |      * its DOM representation destroyed.
280 |      *
281 |      * Use this as an opportunity to deallocate any external resources.
282 |      *
283 |      * NOTE: There is no `componentDidUnmount` since your component will have been
284 |      * destroyed by that point.
285 |      *
286 |      * @optional
287 |      */
288 |     componentWillUnmount: SpecPolicy.DEFINE_MANY,
289 | 
290 | 
291 | 
292 |     // ==== Advanced methods ====
293 | 
294 |     /**
295 |      * Updates the component's currently mounted DOM representation.
296 |      *
297 |      * By default, this implements React's rendering and reconciliation algorithm.
298 |      * Sophisticated clients may wish to override this.
299 |      *
300 |      * @param {ReactReconcileTransaction} transaction
301 |      * @internal
302 |      * @overridable
303 |      */
304 |     updateComponent: SpecPolicy.OVERRIDE_BASE
305 | 
306 | };
307 | 
308 | /**
309 |  * Mapping from class specification keys to special processing functions.
310 |  *
311 |  * Although these are declared like instance properties in the specification
312 |  * when defining classes using `React.createClass`, they are actually static
313 |  * and are accessible on the constructor instead of the prototype. Despite
314 |  * being static, they must be defined outside of the "statics" key under
315 |  * which all other static methods are defined.
316 |  */
317 | var RESERVED_SPEC_KEYS = {
318 |     displayName: function(Constructor, displayName) {
319 |         Constructor.displayName = displayName;
320 |     },
321 |     mixins: function(Constructor, mixins) {
322 |         if (mixins) {
323 |             for (var i = 0; i < mixins.length; i++) {
324 |                 mixSpecIntoComponent(Constructor, mixins[i]);
325 |             }
326 |         }
327 |     },
328 |     childContextTypes: function(Constructor, childContextTypes) {
329 |         if ("production" !== process.env.NODE_ENV) {
330 |             validateTypeDef(
331 |                 Constructor,
332 |                 childContextTypes,
333 |                 ReactPropTypeLocations.childContext
334 |             );
335 |         }
336 |         Constructor.childContextTypes = assign(
337 |             {},
338 |             Constructor.childContextTypes,
339 |             childContextTypes
340 |         );
341 |     },
342 |     contextTypes: function(Constructor, contextTypes) {
343 |         if ("production" !== process.env.NODE_ENV) {
344 |             validateTypeDef(
345 |                 Constructor,
346 |                 contextTypes,
347 |                 ReactPropTypeLocations.context
348 |             );
349 |         }
350 |         Constructor.contextTypes = assign(
351 |             {},
352 |             Constructor.contextTypes,
353 |             contextTypes
354 |         );
355 |     },
356 |     /**
357 |      * Special case getDefaultProps which should move into statics but requires
358 |      * automatic merging.
359 |      */
360 |     getDefaultProps: function(Constructor, getDefaultProps) {
361 |         if (Constructor.getDefaultProps) {
362 |             Constructor.getDefaultProps = createMergedResultFunction(
363 |                 Constructor.getDefaultProps,
364 |                 getDefaultProps
365 |             );
366 |         } else {
367 |             Constructor.getDefaultProps = getDefaultProps;
368 |         }
369 |     },
370 |     propTypes: function(Constructor, propTypes) {
371 |         if ("production" !== process.env.NODE_ENV) {
372 |             validateTypeDef(
373 |                 Constructor,
374 |                 propTypes,
375 |                 ReactPropTypeLocations.prop
376 |             );
377 |         }
378 |         Constructor.propTypes = assign(
379 |             {},
380 |             Constructor.propTypes,
381 |             propTypes
382 |         );
383 |     },
384 |     statics: function(Constructor, statics) {
385 |         mixStaticSpecIntoComponent(Constructor, statics);
386 |     }
387 | };
388 | 
389 | function validateTypeDef(Constructor, typeDef, location) {
390 |     for (var propName in typeDef) {
391 |         if (typeDef.hasOwnProperty(propName)) {
392 |             // use a warning instead of an invariant so components
393 |             // don't show up in prod but not in __DEV__
394 |             ("production" !== process.env.NODE_ENV ? warning(
395 |                 typeof typeDef[propName] === 'function',
396 |                 '%s: %s type `%s` is invalid; it must be a function, usually from ' +
397 |                 'React.PropTypes.',
398 |                 Constructor.displayName || 'ReactClass',
399 |                 ReactPropTypeLocationNames[location],
400 |                 propName
401 |             ) : null);
402 |         }
403 |     }
404 | }
405 | 
406 | function validateMethodOverride(proto, name) {
407 |     var specPolicy = ReactClassInterface.hasOwnProperty(name) ?
408 |         ReactClassInterface[name] :
409 |         null;
410 | 
411 |     // Disallow overriding of base class methods unless explicitly allowed.
412 |     if (ReactClassMixin.hasOwnProperty(name)) {
413 |         ("production" !== process.env.NODE_ENV ? invariant(
414 |             specPolicy === SpecPolicy.OVERRIDE_BASE,
415 |             'ReactClassInterface: You are attempting to override ' +
416 |             '`%s` from your class specification. Ensure that your method names ' +
417 |             'do not overlap with React methods.',
418 |             name
419 |         ) : invariant(specPolicy === SpecPolicy.OVERRIDE_BASE));
420 |     }
421 | 
422 |     // Disallow defining methods more than once unless explicitly allowed.
423 |     if (proto.hasOwnProperty(name)) {
424 |         ("production" !== process.env.NODE_ENV ? invariant(
425 |             specPolicy === SpecPolicy.DEFINE_MANY ||
426 |             specPolicy === SpecPolicy.DEFINE_MANY_MERGED,
427 |             'ReactClassInterface: You are attempting to define ' +
428 |             '`%s` on your component more than once. This conflict may be due ' +
429 |             'to a mixin.',
430 |             name
431 |         ) : invariant(specPolicy === SpecPolicy.DEFINE_MANY ||
432 |             specPolicy === SpecPolicy.DEFINE_MANY_MERGED));
433 |     }
434 | }
435 | 
436 | /**
437 |  * Mixin helper which handles policy validation and reserved
438 |  * specification keys when building React classses.
439 |  */
440 | function mixSpecIntoComponent(Constructor, spec) {
441 |     if (!spec) {
442 |         return;
443 |     }
444 | 
445 |     ("production" !== process.env.NODE_ENV ? invariant(
446 |         typeof spec !== 'function',
447 |         'ReactClass: You\'re attempting to ' +
448 |         'use a component class as a mixin. Instead, just use a regular object.'
449 |     ) : invariant(typeof spec !== 'function'));
450 |     ("production" !== process.env.NODE_ENV ? invariant(
451 |         !ReactElement.isValidElement(spec),
452 |         'ReactClass: You\'re attempting to ' +
453 |         'use a component as a mixin. Instead, just use a regular object.'
454 |     ) : invariant(!ReactElement.isValidElement(spec)));
455 | 
456 |     var proto = Constructor.prototype;
457 | 
458 |     // By handling mixins before any other properties, we ensure the same
459 |     // chaining order is applied to methods with DEFINE_MANY policy, whether
460 |     // mixins are listed before or after these methods in the spec.
461 |     if (spec.hasOwnProperty(MIXINS_KEY)) {
462 |         RESERVED_SPEC_KEYS.mixins(Constructor, spec.mixins);
463 |     }
464 | 
465 |     for (var name in spec) {
466 |         if (!spec.hasOwnProperty(name)) {
467 |             continue;
468 |         }
469 | 
470 |         if (name === MIXINS_KEY) {
471 |             // We have already handled mixins in a special case above
472 |             continue;
473 |         }
474 | 
475 |         var property = spec[name];
476 |         validateMethodOverride(proto, name);
477 | 
478 |         if (RESERVED_SPEC_KEYS.hasOwnProperty(name)) {
479 |             RESERVED_SPEC_KEYS[name](Constructor, property);
480 |         } else {
481 |             // Setup methods on prototype:
482 |             // The following member methods should not be automatically bound:
483 |             // 1. Expected ReactClass methods (in the "interface").
484 |             // 2. Overridden methods (that were mixed in).
485 |             var isReactClassMethod =
486 |                 ReactClassInterface.hasOwnProperty(name);
487 |             var isAlreadyDefined = proto.hasOwnProperty(name);
488 |             if (isAlreadyDefined) {
489 |                 var specPolicy = ReactClassInterface[name];
490 | 
491 |                 // These cases should already be caught by validateMethodOverride
492 |                 ("production" !== process.env.NODE_ENV ? invariant(
493 |                     isReactClassMethod && (
494 |                         (specPolicy === SpecPolicy.DEFINE_MANY_MERGED || specPolicy === SpecPolicy.DEFINE_MANY)
495 |                     ),
496 |                     'ReactClass: Unexpected spec policy %s for key %s ' +
497 |                     'when mixing in component specs.',
498 |                     specPolicy,
499 |                     name
500 |                 ) : invariant(isReactClassMethod && (
501 |                     (specPolicy === SpecPolicy.DEFINE_MANY_MERGED || specPolicy === SpecPolicy.DEFINE_MANY)
502 |                 )));
503 | 
504 |                 // For methods which are defined more than once, call the existing
505 |                 // methods before calling the new property, merging if appropriate.
506 |                 if (specPolicy === SpecPolicy.DEFINE_MANY_MERGED) {
507 |                     proto[name] = createMergedResultFunction(proto[name], property);
508 |                 } else if (specPolicy === SpecPolicy.DEFINE_MANY) {
509 |                     proto[name] = createChainedFunction(proto[name], property);
510 |                 }
511 |             } else {
512 |                 proto[name] = property;
513 |                 if ("production" !== process.env.NODE_ENV) {
514 |                     // Add verbose displayName to the function, which helps when looking
515 |                     // at profiling tools.
516 |                     if (typeof property === 'function' && spec.displayName) {
517 |                         proto[name].displayName = spec.displayName + '_' + name;
518 |                     }
519 |                 }
520 |             }
521 |         }
522 |     }
523 | }
524 | 
525 | function mixStaticSpecIntoComponent(Constructor, statics) {
526 |     if (!statics) {
527 |         return;
528 |     }
529 |     for (var name in statics) {
530 |         var property = statics[name];
531 |         if (!statics.hasOwnProperty(name)) {
532 |             continue;
533 |         }
534 | 
535 |         var isReserved = name in RESERVED_SPEC_KEYS;
536 |         ("production" !== process.env.NODE_ENV ? invariant(
537 |             !isReserved,
538 |             'ReactClass: You are attempting to define a reserved ' +
539 |             'property, `%s`, that shouldn\'t be on the "statics" key. Define it ' +
540 |             'as an instance property instead; it will still be accessible on the ' +
541 |             'constructor.',
542 |             name
543 |         ) : invariant(!isReserved));
544 | 
545 |         var isInherited = name in Constructor;
546 |         ("production" !== process.env.NODE_ENV ? invariant(
547 |             !isInherited,
548 |             'ReactClass: You are attempting to define ' +
549 |             '`%s` on your component more than once. This conflict may be ' +
550 |             'due to a mixin.',
551 |             name
552 |         ) : invariant(!isInherited));
553 |         Constructor[name] = property;
554 |     }
555 | }
556 | 
557 | /**
558 |  * Merge two objects, but throw if both contain the same key.
559 |  *
560 |  * @param {object} one The first object, which is mutated.
561 |  * @param {object} two The second object
562 |  * @return {object} one after it has been mutated to contain everything in two.
563 |  */
564 | function mergeIntoWithNoDuplicateKeys(one, two) {
565 |     ("production" !== process.env.NODE_ENV ? invariant(
566 |         one && two && typeof one === 'object' && typeof two === 'object',
567 |         'mergeIntoWithNoDuplicateKeys(): Cannot merge non-objects.'
568 |     ) : invariant(one && two && typeof one === 'object' && typeof two === 'object'));
569 | 
570 |     for (var key in two) {
571 |         if (two.hasOwnProperty(key)) {
572 |             ("production" !== process.env.NODE_ENV ? invariant(
573 |                 one[key] === undefined,
574 |                 'mergeIntoWithNoDuplicateKeys(): ' +
575 |                 'Tried to merge two objects with the same key: `%s`. This conflict ' +
576 |                 'may be due to a mixin; in particular, this may be caused by two ' +
577 |                 'getInitialState() or getDefaultProps() methods returning objects ' +
578 |                 'with clashing keys.',
579 |                 key
580 |             ) : invariant(one[key] === undefined));
581 |             one[key] = two[key];
582 |         }
583 |     }
584 |     return one;
585 | }
586 | 
587 | /**
588 |  * Creates a function that invokes two functions and merges their return values.
589 |  *
590 |  * @param {function} one Function to invoke first.
591 |  * @param {function} two Function to invoke second.
592 |  * @return {function} Function that invokes the two argument functions.
593 |  * @private
594 |  */
595 | function createMergedResultFunction(one, two) {
596 |     return function mergedResult() {
597 |         var a = one.apply(this, arguments);
598 |         var b = two.apply(this, arguments);
599 |         if (a == null) {
600 |             return b;
601 |         } else if (b == null) {
602 |             return a;
603 |         }
604 |         var c = {};
605 |         mergeIntoWithNoDuplicateKeys(c, a);
606 |         mergeIntoWithNoDuplicateKeys(c, b);
607 |         return c;
608 |     };
609 | }
610 | 
611 | /**
612 |  * Creates a function that invokes two functions and ignores their return vales.
613 |  *
614 |  * @param {function} one Function to invoke first.
615 |  * @param {function} two Function to invoke second.
616 |  * @return {function} Function that invokes the two argument functions.
617 |  * @private
618 |  */
619 | function createChainedFunction(one, two) {
620 |     return function chainedFunction() {
621 |         one.apply(this, arguments);
622 |         two.apply(this, arguments);
623 |     };
624 | }
625 | 
626 | var typeDeprecationDescriptor = {
627 |     enumerable: false,
628 |     get: function() {
629 |         var displayName = this.displayName || this.name || 'Component';
630 | 
631 |         Object.defineProperty(this, 'type', {
632 |             value: this
633 |         });
634 |         return this;
635 |     }
636 | };
637 | 
638 | /**
639 |  * Add more to the ReactClass base class. These are all legacy features and
640 |  * therefore not already part of the modern ReactComponent.
641 |  */
642 | var ReactClassMixin = {
643 | 
644 |     /**
645 |      * TODO: This will be deprecated because state should always keep a consistent
646 |      * type signature and the only use case for this, is to avoid that.
647 |      */
648 |     replaceState: function(newState, callback) {
649 |         ReactUpdateQueue.enqueueReplaceState(this, newState);
650 |         if (callback) {
651 |             ReactUpdateQueue.enqueueCallback(this, callback);
652 |         }
653 |     },
654 | 
655 |     /**
656 |      * Checks whether or not this composite component is mounted.
657 |      * @return {boolean} True if mounted, false otherwise.
658 |      * @protected
659 |      * @final
660 |      */
661 |     isMounted: function() {
662 |         var internalInstance = ReactInstanceMap.get(this);
663 |         return (
664 |         internalInstance &&
665 |         internalInstance !== ReactLifeCycle.currentlyMountingInstance
666 |         );
667 |     },
668 | 
669 |     /**
670 |      * Sets a subset of the props.
671 |      *
672 |      * @param {object} partialProps Subset of the next props.
673 |      * @param {?function} callback Called after props are updated.
674 |      * @final
675 |      * @public
676 |      * @deprecated
677 |      */
678 |     setProps: function(partialProps, callback) {
679 |         ReactUpdateQueue.enqueueSetProps(this, partialProps);
680 |         if (callback) {
681 |             ReactUpdateQueue.enqueueCallback(this, callback);
682 |         }
683 |     },
684 | 
685 |     /**
686 |      * Replace all the props.
687 |      *
688 |      * @param {object} newProps Subset of the next props.
689 |      * @param {?function} callback Called after props are updated.
690 |      * @final
691 |      * @public
692 |      * @deprecated
693 |      */
694 |     replaceProps: function(newProps, callback) {
695 |         ReactUpdateQueue.enqueueReplaceProps(this, newProps);
696 |         if (callback) {
697 |             ReactUpdateQueue.enqueueCallback(this, callback);
698 |         }
699 |     }
700 | };
701 | 
702 | var ReactClassComponent = function() {};
703 | assign(
704 |     ReactClassComponent.prototype,
705 |     ReactComponent.prototype,
706 |     ReactClassMixin
707 | );
708 | 
709 | /**
710 |  * Module for creating composite components.
711 |  *
712 |  * @class ReactClass
713 |  */
714 | var ReactClass = {
715 | 
716 |     /**
717 |      * Creates a composite component class given a class specification.
718 |      *
719 |      * @param {object} spec Class specification (which must define `render`).
720 |      * @return {function} Component constructor function.
721 |      * @public
722 |      */
723 |     createClass: function(spec) {
724 |         var Constructor = function(props, context) {
725 |             // This constructor is overridden by mocks. The argument is used
726 |             // by mocks to assert on what gets mounted.
727 | 
728 |             this.props = props;
729 |             this.context = context;
730 |             this.state = null;
731 | 
732 |             // ReactClasses doesn't have constructors. Instead, they use the
733 |             // getInitialState and componentWillMount methods for initialization.
734 | 
735 |             var initialState = this.getInitialState ? this.getInitialState() : null;
736 |             if ("production" !== process.env.NODE_ENV) {
737 |                 // We allow auto-mocks to proceed as if they're returning null.
738 |                 if (typeof initialState === 'undefined' &&
739 |                     this.getInitialState._isMockFunction) {
740 |                     // This is probably bad practice. Consider warning here and
741 |                     // deprecating this convenience.
742 |                     initialState = null;
743 |                 }
744 |             }
745 |             ("production" !== process.env.NODE_ENV ? invariant(
746 |                 typeof initialState === 'object' && !Array.isArray(initialState),
747 |                 '%s.getInitialState(): must return an object or null',
748 |                 Constructor.displayName || 'ReactCompositeComponent'
749 |             ) : invariant(typeof initialState === 'object' && !Array.isArray(initialState)));
750 |             this.state = initialState;
751 |         };
752 |         Constructor.prototype = new ReactClassComponent();
753 |         Constructor.prototype.constructor = Constructor;
754 | 
755 |         mixSpecIntoComponent(Constructor, spec);
756 | 
757 |         // Initialize the defaultProps property after all mixins have been merged
758 |         if (Constructor.getDefaultProps) {
759 |             Constructor.defaultProps = Constructor.getDefaultProps();
760 |         }
761 | 
762 |         if ("production" !== process.env.NODE_ENV) {
763 |             // This is a tag to indicate that the use of these method names is ok,
764 |             // since it's used with createClass. If it's not, then it's likely a
765 |             // mistake so we'll warn you to use the static property, property
766 |             // initializer or constructor respectively.
767 |             if (Constructor.getDefaultProps) {
768 |                 Constructor.getDefaultProps.isReactClassApproved = {};
769 |             }
770 |             if (Constructor.prototype.getInitialState) {
771 |                 Constructor.prototype.getInitialState.isReactClassApproved = {};
772 |             }
773 |         }
774 | 
775 |         ("production" !== process.env.NODE_ENV ? invariant(
776 |             Constructor.prototype.render,
777 |             'createClass(...): Class specification must implement a `render` method.'
778 |         ) : invariant(Constructor.prototype.render));
779 | 
780 |         if ("production" !== process.env.NODE_ENV) {
781 |             ("production" !== process.env.NODE_ENV ? warning(
782 |                 !Constructor.prototype.componentShouldUpdate,
783 |                 '%s has a method called ' +
784 |                 'componentShouldUpdate(). Did you mean shouldComponentUpdate()? ' +
785 |                 'The name is phrased as a question because the function is ' +
786 |                 'expected to return a value.',
787 |                 spec.displayName || 'A component'
788 |             ) : null);
789 |         }
790 | 
791 |         // Reduce time spent doing lookups by setting these on the prototype.
792 |         for (var methodName in ReactClassInterface) {
793 |             if (!Constructor.prototype[methodName]) {
794 |                 Constructor.prototype[methodName] = null;
795 |             }
796 |         }
797 | 
798 |         // Legacy hook
799 |         Constructor.type = Constructor;
800 |         if ("production" !== process.env.NODE_ENV) {
801 |             try {
802 |                 Object.defineProperty(Constructor, 'type', typeDeprecationDescriptor);
803 |             } catch (x) {
804 |                 // IE will fail on defineProperty (es5-shim/sham too)
805 |             }
806 |         }
807 | 
808 |         return Constructor;
809 |     }
810 | 
811 | };
812 | 
813 | module.exports = ReactClass;
814 | 


--------------------------------------------------------------------------------
/lib/ReactComponent.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2013-2015, Facebook, Inc.
 3 |  * All rights reserved.
 4 |  */
 5 | 
 6 | class ReactComponent {
 7 |     constructor(element) {
 8 |         this.element = element;
 9 |         this.type = element.type;
10 |         this.props = element.props;
11 |     }
12 | }
13 | 
14 | export default ReactComponent;
15 | 


--------------------------------------------------------------------------------
/lib/ReactComponentFactory.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2013-2015, Facebook, Inc.
 3 |  * All rights reserved.
 4 |  *
 5 |  * This source code is licensed under the BSD-style license found in the
 6 |  * LICENSE file in the root directory of this source tree. An additional grant
 7 |  * of patent rights can be found in the PATENTS file in the same directory.
 8 |  *
 9 |  * @providesModule instantiateReactComponent
10 |  * @typechecks static-only
11 |  */
12 | 
13 | 'use strict';
14 | 
15 | var ReactCompositeComponent = require("./ReactCompositeComponent");
16 | var ReactDomComponent = require("./ReactDomComponent");
17 | var ReactTextComponent = require("./ReactTextComponent");
18 | var ReactEmptyComponent = require("react/lib/ReactEmptyComponent");
19 | var ReactNativeComponent = require("react/lib/ReactNativeComponent");
20 | 
21 | var assign = require("object-assign");
22 | var invariant = require("react/lib/invariant");
23 | var warning = require("react/lib/warning");
24 | 
25 | export const injections = {
26 |     ReactDomComponent: null,
27 |     ReactCompositeComponent: null,
28 |     ReactTextComponent: ReactTextComponent
29 | };
30 | 
31 | export function instantiateReactComponent(element, parentCompositeType) {
32 |     var instance;
33 | 
34 |     if (element === null || element === false) {
35 |         element = ReactEmptyComponent.emptyElement;
36 |     }
37 | 
38 |     if (typeof element === 'object') {
39 | 
40 |         if ("production" !== process.env.NODE_ENV) {
41 |             ("production" !== process.env.NODE_ENV ? warning(
42 |                 element && (typeof element.type === 'function' ||
43 |                 typeof element.type === 'string'),
44 |                 'Only functions or strings can be mounted as React components.'
45 |             ) : null);
46 |         }
47 | 
48 |         // Special case string values
49 |         if (parentCompositeType === element.type &&
50 |             typeof element.type === 'string') {
51 |             // Avoid recursion if the wrapper renders itself.
52 |             instance = new (injections.ReactDomComponent)(element);
53 |             // All native components are currently wrapped in a composite so we're
54 |             // safe to assume that this is what we should instantiate.
55 |         } else {
56 |             instance = new (injections.ReactCompositeComponent)(element);
57 |         }
58 |     } else if (typeof element === 'string' || typeof element === 'number') {
59 |         instance = new (injections.ReactTextComponent)(element);
60 |     } else {
61 |         ("production" !== process.env.NODE_ENV ? invariant(
62 |             false,
63 |             'Encountered invalid React node of type %s',
64 |             typeof element
65 |         ) : invariant(false));
66 |     }
67 | 
68 |     // Internal instances should fully constructed at this point, so they should
69 |     // not get any new fields added to them at this point.
70 |     if ("production" !== process.env.NODE_ENV) {
71 |         if (Object.preventExtensions) {
72 |             Object.preventExtensions(instance);
73 |         }
74 |     }
75 | 
76 |     return instance;
77 | }
78 | 


--------------------------------------------------------------------------------
/lib/ReactCompositeComponent.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Copyright 2013-2015, Facebook, Inc.
  3 |  * All rights reserved.
  4 |  */
  5 | 
  6 | import assign from 'object-assign';
  7 | import ReactComponent from './ReactComponent';
  8 | import ReactNativeComponent from 'react/lib/ReactNativeComponent';
  9 | import {instantiateReactComponent} from './ReactComponentFactory';
 10 | import ReactPropTypeLocations from 'react/lib/ReactPropTypeLocations';
 11 | import ReactPropTypeLocationNames from 'react/lib/ReactPropTypeLocationNames';
 12 | import ReactElement from 'react/lib/ReactElement';
 13 | 
 14 | import invariant from 'react/lib/invariant';
 15 | import warning from 'react/lib/warning';
 16 | 
 17 | class ReactCompositeComponent extends ReactComponent {
 18 |     constructor(element) {
 19 |         super(element);
 20 |     }
 21 | 
 22 |     mountComponent(rootNodeID, transaction, context) {
 23 |         var Component = ReactNativeComponent.getComponentClassForElement(
 24 |             this.element
 25 |         );
 26 |         var instance = new Component(this.props, context);
 27 |         if (instance.state === undefined) {
 28 |             instance.state = null;
 29 |         }
 30 |         this._validateComponentInstance(Component, instance);
 31 | 
 32 |         instance.componentWillMount && instance.componentWillMount();
 33 | 
 34 |         var renderedChild = instance.render();
 35 |         this._validateRenderedChild(renderedChild);
 36 | 
 37 |         var instantiatedChild = instantiateReactComponent(renderedChild, this.type);
 38 | 
 39 |         var childContext = instance.getChildContext && instance.getChildContext();
 40 |         if (childContext) {
 41 |             this._validateChildContext(instance, childContext);
 42 |         }
 43 | 
 44 |         if (childContext) {
 45 |             childContext = assign({}, context, childContext);
 46 |         }
 47 | 
 48 |         return instantiatedChild.mountComponent(rootNodeID, transaction, childContext || context);
 49 |     }
 50 | 
 51 |     getName() {
 52 |         return this.type.displayName || this.type.name || null;
 53 |     }
 54 | 
 55 |     _validateComponentInstance(Component, instance) {
 56 |         if ("production" !== process.env.NODE_ENV) {
 57 |             // This will throw later in _renderValidatedComponent, but add an early
 58 |             // warning now to help debugging
 59 |             ("production" !== process.env.NODE_ENV ? warning(
 60 |                 instance.render != null,
 61 |                 '%s(...): No `render` method found on the returned component ' +
 62 |                 'instance: you may have forgotten to define `render` in your ' +
 63 |                 'component or you may have accidentally tried to render an element ' +
 64 |                 'whose type is a function that isn\'t a React component.',
 65 |                 Component.displayName || Component.name || 'Component'
 66 |             ) : null);
 67 |             // Since plain JS classes are defined without any special initialization
 68 |             // logic, we can not catch common errors early. Therefore, we have to
 69 |             // catch them here, at initialization time, instead.
 70 |             ("production" !== process.env.NODE_ENV ? warning(
 71 |                 !instance.getInitialState ||
 72 |                 instance.getInitialState.isReactClassApproved,
 73 |                 'getInitialState was defined on %s, a plain JavaScript class. ' +
 74 |                 'This is only supported for classes created using React.createClass. ' +
 75 |                 'Did you mean to define a state property instead?',
 76 |                 this.getName() || 'a component'
 77 |             ) : null);
 78 |             ("production" !== process.env.NODE_ENV ? warning(
 79 |                 !instance.getDefaultProps ||
 80 |                 instance.getDefaultProps.isReactClassApproved,
 81 |                 'getDefaultProps was defined on %s, a plain JavaScript class. ' +
 82 |                 'This is only supported for classes created using React.createClass. ' +
 83 |                 'Use a static property to define defaultProps instead.',
 84 |                 this.getName() || 'a component'
 85 |             ) : null);
 86 |             ("production" !== process.env.NODE_ENV ? warning(
 87 |                 !instance.propTypes,
 88 |                 'propTypes was defined as an instance property on %s. Use a static ' +
 89 |                 'property to define propTypes instead.',
 90 |                 this.getName() || 'a component'
 91 |             ) : null);
 92 |             ("production" !== process.env.NODE_ENV ? warning(
 93 |                 !instance.contextTypes,
 94 |                 'contextTypes was defined as an instance property on %s. Use a ' +
 95 |                 'static property to define contextTypes instead.',
 96 |                 this.getName() || 'a component'
 97 |             ) : null);
 98 |             ("production" !== process.env.NODE_ENV ? warning(
 99 |                 typeof instance.componentShouldUpdate !== 'function',
100 |                 '%s has a method called ' +
101 |                 'componentShouldUpdate(). Did you mean shouldComponentUpdate()? ' +
102 |                 'The name is phrased as a question because the function is ' +
103 |                 'expected to return a value.',
104 |                 (this.getName() || 'A component')
105 |             ) : null);
106 |             ("production" !== process.env.NODE_ENV ? invariant(
107 |                 typeof instance.state === 'object' && !Array.isArray(instance.state),
108 |                 '%s.state: must be set to an object or null',
109 |                 this.getName() || 'ReactCompositeComponent'
110 |             ) : invariant(typeof instance.state === 'object' && !Array.isArray(instance.state)));
111 |         }
112 |     }
113 | 
114 |     _validateChildContext(instance, childContext) {
115 |         ("production" !== process.env.NODE_ENV ? invariant(
116 |             typeof instance.constructor.childContextTypes === 'object',
117 |             '%s.getChildContext(): childContextTypes must be defined in order to ' +
118 |             'use getChildContext().',
119 |             this.getName() || 'ReactCompositeComponent'
120 |         ) : invariant(typeof instance.constructor.childContextTypes === 'object'));
121 |         if ("production" !== process.env.NODE_ENV) {
122 |             this._validatePropTypes(
123 |                 instance.constructor.childContextTypes,
124 |                 childContext,
125 |                 ReactPropTypeLocations.childContext
126 |             );
127 |         }
128 |         for (var name in childContext) {
129 |             ("production" !== process.env.NODE_ENV ? invariant(
130 |                 name in instance.constructor.childContextTypes,
131 |                 '%s.getChildContext(): key "%s" is not defined in childContextTypes.',
132 |                 this.getName() || 'ReactCompositeComponent',
133 |                 name
134 |             ) : invariant(name in instance.constructor.childContextTypes));
135 |         }
136 |         return childContext;
137 |     }
138 | 
139 |     /**
140 |      * Assert that the props are valid
141 |      *
142 |      * @param {object} propTypes Map of prop name to a ReactPropType
143 |      * @param {object} props
144 |      * @param {string} location e.g. "prop", "context", "child context"
145 |      * @private
146 |      */
147 |     _validatePropTypes(propTypes, props, location) {
148 |         // TODO: Stop validating prop types here and only use the element
149 |         // validation.
150 |         var componentName = this.getName();
151 |         for (var propName in propTypes) {
152 |             if (propTypes.hasOwnProperty(propName)) {
153 |                 var error;
154 |                 try {
155 |                     // This is intentionally an invariant that gets caught. It's the same
156 |                     // behavior as without this statement except with a better message.
157 |                     ("production" !== process.env.NODE_ENV ? invariant(
158 |                         typeof propTypes[propName] === 'function',
159 |                         '%s: %s type `%s` is invalid; it must be a function, usually ' +
160 |                         'from React.PropTypes.',
161 |                         componentName || 'React class',
162 |                         ReactPropTypeLocationNames[location],
163 |                         propName
164 |                     ) : invariant(typeof propTypes[propName] === 'function'));
165 |                     error = propTypes[propName](props, propName, componentName, location);
166 |                 } catch (ex) {
167 |                     error = ex;
168 |                 }
169 |                 if (error instanceof Error) {
170 |                     // We may want to extend this logic for similar errors in
171 |                     // React.render calls, so I'm abstracting it away into
172 |                     // a function to minimize refactoring in the future
173 |                     var name = this.getName();
174 |                     var addendum = name ? ' Check the render method of `' + name + '`.' : '';
175 | 
176 |                     if (location === ReactPropTypeLocations.prop) {
177 |                         // Preface gives us something to blacklist in warning module
178 |                         ("production" !== process.env.NODE_ENV ? warning(
179 |                             false,
180 |                             'Failed Composite propType: %s%s',
181 |                             error.message,
182 |                             addendum
183 |                         ) : null);
184 |                     } else {
185 |                         ("production" !== process.env.NODE_ENV ? warning(
186 |                             false,
187 |                             'Failed Context Types: %s%s',
188 |                             error.message,
189 |                             addendum
190 |                         ) : null);
191 |                     }
192 |                 }
193 |             }
194 |         }
195 |     }
196 | 
197 |     _validateRenderedChild(renderedChild) {
198 |         ("production" !== process.env.NODE_ENV ? invariant(
199 |             // TODO: An `isValidNode` function would probably be more appropriate
200 |             renderedChild === null || renderedChild === false ||
201 |             ReactElement.isValidElement(renderedChild),
202 |             '%s.render(): A valid ReactComponent must be returned. You may have ' +
203 |             'returned undefined, an array or some other invalid object.',
204 |             this.getName() || 'ReactCompositeComponent'
205 |         ) : invariant(// TODO: An `isValidNode` function would probably be more appropriate
206 |             renderedChild === null || renderedChild === false ||
207 |             ReactElement.isValidElement(renderedChild)));
208 |     }
209 | }
210 | 
211 | export default ReactCompositeComponent;
212 | 


--------------------------------------------------------------------------------
/lib/ReactDomComponent.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Copyright 2013-2015, Facebook, Inc.
  3 |  * All rights reserved.
  4 |  */
  5 | 
  6 | import ReactComponent from './ReactComponent';
  7 | import assign from 'object-assign';
  8 | import traverseAllChildren from 'react/lib/traverseAllChildren';
  9 | import {instantiateReactComponent} from './ReactComponentFactory';
 10 | 
 11 | var invariant = require("react/lib/invariant");
 12 | var warning = require("react/lib/warning");
 13 | 
 14 | var validatedTagCache = {};
 15 | var VALID_TAG_REGEX = /^[a-zA-Z][a-zA-Z:_\.\-\d]*$/; // Simplified subset
 16 | var hasOwnProperty = {}.hasOwnProperty;
 17 | function validateDangerousTag(tag) {
 18 |     if (!hasOwnProperty.call(validatedTagCache, tag)) {
 19 |         ("production" !== process.env.NODE_ENV ? invariant(VALID_TAG_REGEX.test(tag), 'Invalid tag: %s', tag) : invariant(VALID_TAG_REGEX.test(tag)));
 20 |         validatedTagCache[tag] = true;
 21 |     }
 22 | }
 23 | 
 24 | class ReactDomComponent extends ReactComponent {
 25 |     constructor(element) {
 26 |         super(element);
 27 |         validateDangerousTag(this.type);
 28 |     }
 29 | 
 30 |     mountComponent(rootNodeId, transaction, context) {
 31 |         this._validateProps(this.props);
 32 |         return (
 33 |             createOpenTagMarkup(this, rootNodeId, transaction, context) +
 34 |             createContentMarkup(this, rootNodeId, transaction, context) +
 35 |             createCloseTagMarkup(this, rootNodeId, transaction, context)
 36 |         );
 37 |     }
 38 | 
 39 |     _validateProps(props) {
 40 |         if (!props) {
 41 |             return;
 42 |         }
 43 |         // Note the use of `==` which checks for null or undefined.
 44 |         if (props.dangerouslySetInnerHTML != null) {
 45 |             ("production" !== process.env.NODE_ENV ? invariant(
 46 |                 props.children == null,
 47 |                 'Can only set one of `children` or `props.dangerouslySetInnerHTML`.'
 48 |             ) : invariant(props.children == null));
 49 |             ("production" !== process.env.NODE_ENV ? invariant(
 50 |                 typeof props.dangerouslySetInnerHTML === 'object' &&
 51 |                 '__html' in props.dangerouslySetInnerHTML,
 52 |                 '`props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. ' +
 53 |                 'Please visit https://fb.me/react-invariant-dangerously-set-inner-html ' +
 54 |                 'for more information.'
 55 |             ) : invariant(typeof props.dangerouslySetInnerHTML === 'object' &&
 56 |                 '__html' in props.dangerouslySetInnerHTML));
 57 |         }
 58 |         if ("production" !== process.env.NODE_ENV) {
 59 |             ("production" !== process.env.NODE_ENV ? warning(
 60 |                 props.innerHTML == null,
 61 |                 'Directly setting property `innerHTML` is not permitted. ' +
 62 |                 'For more information, lookup documentation on `dangerouslySetInnerHTML`.'
 63 |             ) : null);
 64 |             ("production" !== process.env.NODE_ENV ? warning(
 65 |                 !props.contentEditable || props.children == null,
 66 |                 'A component is `contentEditable` and contains `children` managed by ' +
 67 |                 'React. It is now your responsibility to guarantee that none of ' +
 68 |                 'those nodes are unexpectedly modified or duplicated. This is ' +
 69 |                 'probably not intentional.'
 70 |             ) : null);
 71 |         }
 72 |         ("production" !== process.env.NODE_ENV ? invariant(
 73 |             props.style == null || typeof props.style === 'object',
 74 |             'The `style` prop expects a mapping from style properties to values, ' +
 75 |             'not a string. For example, style={{marginRight: spacing + \'em\'}} when ' +
 76 |             'using JSX.'
 77 |         ) : invariant(props.style == null || typeof props.style === 'object'));
 78 |     }
 79 | }
 80 | 
 81 | function mountChildren(component, rootNodeID, transaction, context) {
 82 |     var mountImages = [];
 83 |     var element = component.element;
 84 |     var childrenToUse = component.props.children;
 85 |     traverseAllChildren(childrenToUse, function mountChild(traverseContext, child, name) {
 86 |         if (child == null) {
 87 |             return;
 88 |         }
 89 |         var childInstance = instantiateReactComponent(child, element.type);
 90 |         // Inlined for performance, see `ReactInstanceHandles.createReactID`.
 91 |         var rootID = rootNodeID + name;
 92 |         var mountImage = childInstance.mountComponent(
 93 |             rootID,
 94 |             transaction,
 95 |             context
 96 |         );
 97 |         mountImages.push(mountImage);
 98 |     }, mountImages);
 99 | 
100 |     return mountImages;
101 | }
102 | 
103 | var omittedCloseTags = {
104 |     'area': true,
105 |     'base': true,
106 |     'br': true,
107 |     'col': true,
108 |     'embed': true,
109 |     'hr': true,
110 |     'img': true,
111 |     'input': true,
112 |     'keygen': true,
113 |     'link': true,
114 |     'meta': true,
115 |     'param': true,
116 |     'source': true,
117 |     'track': true,
118 |     'wbr': true
119 |     // NOTE: menuitem's close tag should be omitted, but that causes problems.
120 | };
121 | function createCloseTagMarkup(component, rootNodeId, transaction, context) {
122 |     return omittedCloseTags[component.type] ? '' : '</' + component.type + '>';
123 | }
124 | 
125 | /**
126 |  * Creates markup for the open tag and all attributes.
127 |  *
128 |  * This method has side effects because events get registered.
129 |  *
130 |  * Iterating over object properties is faster than iterating over arrays.
131 |  * @see http://jsperf.com/obj-vs-arr-iteration
132 |  *
133 |  * @private
134 |  * @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction
135 |  * @return {string} Markup of opening tag.
136 |  */
137 | var CSSPropertyOperations = require('react/lib/CSSPropertyOperations');
138 | var DOMPropertyOperations = require('react/lib/DOMPropertyOperations');
139 | function createOpenTagMarkup(component, rootNodeId, transaction, context) {
140 |     var props = component.props;
141 |     var ret = '<' + component.type;
142 | 
143 |     for (var propKey in props) {
144 |         if (!props.hasOwnProperty(propKey)) {
145 |             continue;
146 |         }
147 |         var propValue = props[propKey];
148 |         if (propValue == null) {
149 |             continue;
150 |         }
151 | 
152 |         if (propKey === 'style') {
153 |             if (propValue) {
154 |                 propValue = assign({}, props.style);
155 |             }
156 |             propValue = CSSPropertyOperations.createMarkupForStyles(propValue);
157 |         }
158 |         var markup =
159 |             DOMPropertyOperations.createMarkupForProperty(propKey, propValue);
160 |         if (markup) {
161 |             ret += ' ' + markup;
162 |         }
163 |     }
164 | 
165 |     // For static pages, no need to put React ID and checksum. Saves lots of
166 |     // bytes.
167 |     if (transaction.renderToStaticMarkup) {
168 |         return ret + '>';
169 |     }
170 | 
171 |     var markupForID = DOMPropertyOperations.createMarkupForID(rootNodeId);
172 |     return ret + ' ' + markupForID + '>';
173 | }
174 | 
175 | /**
176 |  * Creates markup for the content between the tags.
177 |  *
178 |  * @private
179 |  * @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction
180 |  * @param {object} context
181 |  * @return {string} Content markup.
182 |  */
183 | var escapeTextContentForBrowser = require('react/lib/escapeTextContentForBrowser');
184 | var CONTENT_TYPES = {'string': true, 'number': true};
185 | function createContentMarkup(component, rootNodeId, transaction, context) {
186 |     var tag = component.type;
187 |     var prefix = '';
188 |     if (tag === 'listing' ||
189 |         tag === 'pre' ||
190 |         tag === 'textarea') {
191 |         // Add an initial newline because browsers ignore the first newline in
192 |         // a <listing>, <pre>, or <textarea> as an "authoring convenience" -- see
193 |         // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inbody.
194 |         prefix = '\n';
195 |     }
196 | 
197 |     var props = component.props;
198 | 
199 |     // Intentional use of != to avoid catching zero/false.
200 |     var innerHTML = props.dangerouslySetInnerHTML;
201 |     if (innerHTML != null) {
202 |         if (innerHTML.__html != null) {
203 |             return prefix + innerHTML.__html;
204 |         }
205 |     } else {
206 |         var contentToUse =
207 |             CONTENT_TYPES[typeof props.children] ? props.children : null;
208 |         var childrenToUse = contentToUse != null ? null : props.children;
209 |         if (contentToUse != null) {
210 |             return prefix + escapeTextContentForBrowser(contentToUse);
211 |         } else if (childrenToUse != null ) {
212 |             return prefix + mountChildren(component, rootNodeId, transaction, context).join('');
213 |         }
214 |     }
215 |     return prefix;
216 | }
217 | 
218 | export default ReactDomComponent;
219 | 


--------------------------------------------------------------------------------
/lib/ReactTextComponent.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2013-2015, Facebook, Inc.
 3 |  * All rights reserved.
 4 |  *
 5 |  * This source code is licensed under the BSD-style license found in the
 6 |  * LICENSE file in the root directory of this source tree. An additional grant
 7 |  * of patent rights can be found in the PATENTS file in the same directory.
 8 |  *
 9 |  * @providesModule ReactDOMTextComponent
10 |  * @typechecks static-only
11 |  */
12 | 
13 | var DOMPropertyOperations = require("react/lib/DOMPropertyOperations");
14 | var assign = require("object-assign");
15 | var escapeTextContentForBrowser = require("react/lib/escapeTextContentForBrowser");
16 | 
17 | /**
18 |  * Text nodes violate a couple assumptions that React makes about components:
19 |  *
20 |  *  - When mounting text into the DOM, adjacent text nodes are merged.
21 |  *  - Text nodes cannot be assigned a React root ID.
22 |  *
23 |  * This component is used to wrap strings in elements so that they can undergo
24 |  * the same reconciliation that is applied to elements.
25 |  *
26 |  * TODO: Investigate representing React components in the DOM with text nodes.
27 |  *
28 |  * @class ReactDOMTextComponent
29 |  * @extends ReactComponent
30 |  * @internal
31 |  */
32 | class ReactTextComponent {
33 |     constructor(text) {
34 |         this._text = '' + text;
35 |     }
36 | 
37 |     mountComponent(rootID, transaction, context) {
38 |         var escapedText = escapeTextContentForBrowser(this._text);
39 | 
40 |         if (transaction.renderToStaticMarkup) {
41 |             // Normally we'd wrap this in a `span` for the reasons stated above, but
42 |             // since this is a situation where React won't take over (static pages),
43 |             // we can simply return the text as it is.
44 |             return escapedText;
45 |         }
46 | 
47 |         return (
48 |             '<span ' + DOMPropertyOperations.createMarkupForID(rootID) + '>' +
49 |             escapedText +
50 |             '</span>'
51 |         );
52 |     }
53 | }
54 | 
55 | export default ReactTextComponent;
56 | 


--------------------------------------------------------------------------------
/lib/addons.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2013-2015, Facebook, Inc.
 3 |  * All rights reserved.
 4 |  *
 5 |  * This source code is licensed under the BSD-style license found in the
 6 |  * LICENSE file in the root directory of this source tree. An additional grant
 7 |  * of patent rights can be found in the PATENTS file in the same directory.
 8 |  *
 9 |  * @providesModule ReactWithAddons
10 |  */
11 | 
12 | /**
13 |  * This module exists purely in the open source project, and is meant as a way
14 |  * to create a separate standalone build of React. This build has "addons", or
15 |  * functionality we've built and think might be useful but doesn't have a good
16 |  * place to live inside React core.
17 |  */
18 | 
19 | 'use strict';
20 | 
21 | var LinkedStateMixin = require("react/lib/LinkedStateMixin");
22 | var ReactComponentWithPureRenderMixin = require("react/lib/ReactComponentWithPureRenderMixin");
23 | var ReactCSSTransitionGroup = require("react/lib/ReactCSSTransitionGroup");
24 | var ReactFragment = require("react/lib/ReactFragment");
25 | var ReactTransitionGroup = require("react/lib/ReactTransitionGroup");
26 | var ReactUpdates = require("react/lib/ReactUpdates");
27 | 
28 | var cx = require("react/lib/cx");
29 | var cloneWithProps = require("react/lib/cloneWithProps");
30 | var update = require("react/lib/update");
31 | 
32 | 
33 | // Fix binding issue with ReactCSSTransitionGroup
34 | ReactCSSTransitionGroup.prototype.componentWillMount = function () {
35 |     this._wrapChild = this._wrapChild.bind(this);
36 | };
37 | 
38 | module.exports = {
39 |     CSSTransitionGroup: ReactCSSTransitionGroup,
40 |     LinkedStateMixin: LinkedStateMixin,
41 |     PureRenderMixin: ReactComponentWithPureRenderMixin,
42 |     TransitionGroup: ReactTransitionGroup,
43 | 
44 |     batchedUpdates: ReactUpdates.batchedUpdates,
45 |     classSet: cx,
46 |     cloneWithProps: cloneWithProps,
47 |     createFragment: ReactFragment.create,
48 |     update: update
49 | };
50 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-server",
 3 |   "version": "1.0.3",
 4 |   "description": "",
 5 |   "main": "dist/react-server.js",
 6 |   "scripts": {
 7 |     "bench": "NODE_ENV=production node tests/bench",
 8 |     "build": "npm run build-dev; npm run build-prod; npm run build-min",
 9 |     "build-dev": "NODE_ENV=development webpack --output-file react-server.dev.js",
10 |     "build-prod": "NODE_ENV=production webpack --output-file react-server.js",
11 |     "build-min": "NODE_ENV=production webpack -p --output-file react-server.min.js",
12 |     "build-react": " webpack ./node_modules/react/addons.js --output-file=react.js",
13 |     "lint": "eslint index.js lib/*.js tests/**/*.js",
14 |     "prepublish": "npm run build",
15 |     "profile": "node --prof --prof_lazy --log ./tests/profile/react-server.js; node-tick-processor v8.log | grep -v 'unknown code' > artifacts/profile-react-server.txt; rm v8.log",
16 |     "profile-react": "node --prof --prof_lazy --log ./tests/profile/react.js; node-tick-processor v8.log | grep -v 'unknown code' > artifacts/profile-react.txt; rm v8.log",
17 |     "test": "npm run build; npm run build-react; mocha tests/unit/* --compilers js:babel/register --timeout 15000; npm run bench"
18 |   },
19 |   "author": "Michael Ridgway <mridgway@yahoo-inc.com>",
20 |   "license": "BSD-3-Clause",
21 |   "dependencies": {
22 |     "object-assign": "^4.0.1",
23 |     "react": "^0.13.2"
24 |   },
25 |   "optionalDependencies": {
26 |     "profiler": "^1.2.3"
27 |   },
28 |   "devDependencies": {
29 |     "babel": "^5.2.12",
30 |     "babel-core": "^5.2.9",
31 |     "babel-eslint": "^3.1.1",
32 |     "babel-loader": "^5.0.0",
33 |     "benchtable": "0.0.4",
34 |     "classnames": "^2.1.1",
35 |     "es6-promise": "^3.0.2",
36 |     "eslint": "^0.21.0",
37 |     "fluxible": "^0.4.9",
38 |     "fluxible-router": "^0.1.4",
39 |     "mocha": "^2.2.4",
40 |     "mockery": "^1.4.0",
41 |     "react-router": "^0.13.3",
42 |     "webpack": "^1.8.11"
43 |   }
44 | }
45 | 


--------------------------------------------------------------------------------
/register.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * This file overrides node's require cache so that require('react') will
 3 |  * actually resolve to react-server.
 4 |  */
 5 | 'use strict';
 6 | 
 7 | var requirePath = 'production' === process.env.NODE_ENV ?
 8 |     './dist/react-server' : './dist/react-server.dev.js';
 9 | 
10 | // Ensure the cache for react-server is populated
11 | require(requirePath);
12 | 
13 | require.cache[require.resolve('react')] = require.cache[require.resolve(requirePath)];
14 | require.cache[require.resolve('react/addons')] = require.cache[require.resolve(requirePath)];
15 | 


--------------------------------------------------------------------------------
/tests/bench.js:
--------------------------------------------------------------------------------
 1 | require('babel/register');
 2 | var assert = require('assert');
 3 | var renderAppWithFreshReact = require('../utils/renderAppWithFreshReact');
 4 | var Benchtable = require('benchtable');
 5 | 
 6 | var appPath = require.resolve('./fixtures/apps/chat');
 7 | var statePath = require.resolve('./fixtures/apps/chat/state.json');
 8 | var reactServerPath = require.resolve('../dist/react-server');
 9 | var reactStockPath = require.resolve('../dist/react');
10 | 
11 | renderAppWithFreshReact(reactServerPath, appPath, statePath).then(function (serverApp) {
12 |     return renderAppWithFreshReact(reactStockPath, appPath, statePath).then(function (stockApp) {
13 |         assert(serverApp.markup, stockApp.markup);
14 | 
15 |         var suite = new Benchtable();
16 | 
17 |         // add tests
18 |         suite
19 |             .addFunction('RenderChat', function(React, context) {
20 |                 React.renderToString(context.createElement());
21 |             })
22 |             .addInput('react-server', [serverApp.React, serverApp.context])
23 |             .addInput('react', [stockApp.React, stockApp.context])
24 |             // add listeners
25 |             .on('error', function (e) {
26 |                 throw e.target.error;
27 |             })
28 |             .on('cycle', function(event) {
29 |                 console.log(String(event.target));
30 |             })
31 |             .on('complete', function() {
32 |                 console.log('The Fastest test suite is ' + '\u001b[32m' + this.filter('fastest').pluck('name') + '\u001b[0m\n');
33 |                 console.log(this.table.toString());
34 |             })
35 |             // run async
36 |             .run({ async: true, defer: true});
37 |     });
38 | }).catch(function (e) {
39 |     console.log(e);
40 | });
41 | 


--------------------------------------------------------------------------------
/tests/fixtures/apps/chat/app.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2014, Yahoo! Inc.
 3 |  * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
 4 |  */
 5 | 'use strict';
 6 | var React = require('react');
 7 | var Fluxible = require('fluxible');
 8 | 
 9 | var app = new Fluxible({
10 |     component: require('./components/ChatApp.jsx')
11 | });
12 | 
13 | app.registerStore(require('./stores/RouteStore'));
14 | app.registerStore(require('./stores/MessageStore'));
15 | app.registerStore(require('./stores/ThreadStore'));
16 | app.registerStore(require('./stores/UnreadThreadStore'));
17 | 
18 | module.exports = app;
19 | 


--------------------------------------------------------------------------------
/tests/fixtures/apps/chat/components/ChatApp.jsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2013-2014 Facebook, Inc.
 3 |  *
 4 |  * Licensed under the Apache License, Version 2.0 (the "License");
 5 |  * you may not use this file except in compliance with the License.
 6 |  * You may obtain a copy of the License at
 7 |  *
 8 |  * http://www.apache.org/licenses/LICENSE-2.0
 9 |  *
10 |  * Unless required by applicable law or agreed to in writing, software
11 |  * distributed under the License is distributed on an "AS IS" BASIS,
12 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 |  * See the License for the specific language governing permissions and
14 |  * limitations under the License.
15 |  */
16 | 'use strict';
17 | var MessageSection = require('./MessageSection.jsx');
18 | var React = require('react');
19 | var ThreadSection = require('./ThreadSection.jsx');
20 | var provideContext = require('fluxible/addons/provideContext');
21 | var handleHistory = require('fluxible-router').handleHistory;
22 | 
23 | var ChatApp = React.createClass({
24 |     render: function() {
25 |         return React.cloneElement(
26 |             <div className="chatapp">
27 |                 <ThreadSection />
28 |                 <MessageSection />
29 |             </div>
30 |         );
31 |     }
32 | });
33 | 
34 | // wrap with history handler
35 | ChatApp = handleHistory(ChatApp);
36 | 
37 | // and wrap that with context
38 | ChatApp = provideContext(ChatApp);
39 | 
40 | module.exports = ChatApp;
41 | 


--------------------------------------------------------------------------------
/tests/fixtures/apps/chat/components/Html.jsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2014, Yahoo! Inc.
 3 |  * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
 4 |  */
 5 | 'use strict';
 6 | var React = require('react');
 7 | 
 8 | /**
 9 |  * React class to handle the rendering of the HTML head section
10 |  *
11 |  * @class Html
12 |  * @constructor
13 |  */
14 | var Html = React.createClass({
15 |     /**
16 |      * Refer to React documentation render
17 |      *
18 |      * @method render
19 |      * @return {Object} HTML head section
20 |      */
21 |     render: function() {
22 |         return (
23 |             <html>
24 |             <head>
25 |                 <meta charSet="utf-8" />
26 |                 <title>{this.props.title}</title>
27 |                 <meta name="viewport" content="width=device-width, user-scalable=no" />
28 |                 <link rel="stylesheet" href="https://rawgit.com/facebook/flux/master/examples/flux-chat/css/chatapp.css" />
29 |             </head>
30 |             <body>
31 |                 <div id="app" dangerouslySetInnerHTML={{__html: this.props.markup}}></div>
32 |             </body>
33 |             <script dangerouslySetInnerHTML={{__html: this.props.state}}></script>
34 |             <script src="/public/js/client.js" defer></script>
35 |             </html>
36 |         );
37 |     }
38 | });
39 | 
40 | module.exports = Html;
41 | 


--------------------------------------------------------------------------------
/tests/fixtures/apps/chat/components/MessageComposer.jsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2013-2014 Facebook, Inc.
 3 |  *
 4 |  * Licensed under the Apache License, Version 2.0 (the "License");
 5 |  * you may not use this file except in compliance with the License.
 6 |  * You may obtain a copy of the License at
 7 |  *
 8 |  * http://www.apache.org/licenses/LICENSE-2.0
 9 |  *
10 |  * Unless required by applicable law or agreed to in writing, software
11 |  * distributed under the License is distributed on an "AS IS" BASIS,
12 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 |  * See the License for the specific language governing permissions and
14 |  * limitations under the License.
15 |  */
16 | 'use strict';
17 | var React = require('react');
18 | var ENTER_KEY_CODE = 13;
19 | 
20 | var MessageComposer = React.createClass({
21 | 
22 |     contextTypes: {
23 |         executeAction: React.PropTypes.func.isRequired
24 |     },
25 | 
26 |     getInitialState: function() {
27 |         return {text: ''};
28 |     },
29 | 
30 |     render: function() {
31 |         return (
32 |             <textarea
33 |                 className="message-composer"
34 |                 name="message"
35 |                 value={this.state.text}
36 |                 onChange={this._onChange}
37 |                 onKeyDown={this._onKeyDown}
38 |             />
39 |         );
40 |     },
41 | 
42 |     _onChange: function(event, value) {
43 |         this.setState({text: event.target.value});
44 |     },
45 | 
46 |     _onKeyDown: function(event) {
47 |         if (event.keyCode === ENTER_KEY_CODE) {
48 |             event.preventDefault();
49 |             event.stopPropagation();
50 | 
51 |             var text = this.state.text.trim();
52 |             if (text) {
53 |                 //this.context.executeAction(createMessage, {
54 |                 //    text: text
55 |                 //});
56 |             }
57 |             this.setState({text: ''});
58 |         }
59 |     }
60 | 
61 | });
62 | 
63 | module.exports = MessageComposer;
64 | 


--------------------------------------------------------------------------------
/tests/fixtures/apps/chat/components/MessageListItem.jsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2013-2014 Facebook, Inc.
 3 |  *
 4 |  * Licensed under the Apache License, Version 2.0 (the "License");
 5 |  * you may not use this file except in compliance with the License.
 6 |  * You may obtain a copy of the License at
 7 |  *
 8 |  * http://www.apache.org/licenses/LICENSE-2.0
 9 |  *
10 |  * Unless required by applicable law or agreed to in writing, software
11 |  * distributed under the License is distributed on an "AS IS" BASIS,
12 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 |  * See the License for the specific language governing permissions and
14 |  * limitations under the License.
15 |  */
16 | 'use strict';
17 | var React = require('react');
18 | 
19 | var ReactPropTypes = React.PropTypes;
20 | 
21 | var MessageListItem = React.createClass({
22 | 
23 |     propTypes: {
24 |         message: ReactPropTypes.object
25 |     },
26 | 
27 |     render: function() {
28 |         var message = this.props.message;
29 |         return (
30 |             <li className="message-list-item">
31 |                 <h5 className="message-author-name">{message.authorName}</h5>
32 |                 <div className="message-time">
33 |                     {(new Date(message.timestamp)).toTimeString()}
34 |                 </div>
35 |                 <div className="message-text">{message.text}</div>
36 |             </li>
37 |         );
38 |     }
39 | 
40 | });
41 | 
42 | module.exports = MessageListItem;
43 | 


--------------------------------------------------------------------------------
/tests/fixtures/apps/chat/components/MessageSection.jsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2013-2014 Facebook, Inc.
 3 |  *
 4 |  * Licensed under the Apache License, Version 2.0 (the "License");
 5 |  * you may not use this file except in compliance with the License.
 6 |  * You may obtain a copy of the License at
 7 |  *
 8 |  * http://www.apache.org/licenses/LICENSE-2.0
 9 |  *
10 |  * Unless required by applicable law or agreed to in writing, software
11 |  * distributed under the License is distributed on an "AS IS" BASIS,
12 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 |  * See the License for the specific language governing permissions and
14 |  * limitations under the License.
15 |  */
16 | 'use strict';
17 | var React = require('react');
18 | var MessageComposer = require('./MessageComposer.jsx');
19 | var MessageListItem = require('./MessageListItem.jsx');
20 | var MessageStore = require('../stores/MessageStore');
21 | var ThreadStore = require('../stores/ThreadStore');
22 | var connectToStores = require('fluxible/addons/connectToStores');
23 | 
24 | function getMessageListItem(message) {
25 |     return (
26 |         <MessageListItem
27 |             key={message.id}
28 |             message={message}
29 |         />
30 |     );
31 | }
32 | 
33 | var MessageSection = React.createClass({
34 | 
35 |     componentDidMount: function() {
36 |         this._scrollToBottom();
37 |     },
38 | 
39 |     render: function() {
40 |         var messageListItems = this.props.messages.map(getMessageListItem);
41 |         return (
42 |             <div className="message-section">
43 |                 <h3 className="message-thread-heading">{this.props.thread.name}</h3>
44 |                 <ul className="message-list" ref="messageList">
45 |                     {messageListItems}
46 |                 </ul>
47 |                 <MessageComposer />
48 |             </div>
49 |         );
50 |     },
51 | 
52 |     componentDidUpdate: function() {
53 |         this._scrollToBottom();
54 |     },
55 | 
56 |     _scrollToBottom: function() {
57 |         var ul = this.refs.messageList.getDOMNode();
58 |         ul.scrollTop = ul.scrollHeight;
59 |     },
60 | 
61 |     /**
62 |      * Event handler for 'change' events coming from the MessageStore
63 |      */
64 |     _onChange: function() {
65 |         this.setState(this.getStateFromStores());
66 |     }
67 | 
68 | });
69 | 
70 | module.exports = connectToStores(
71 |     MessageSection,
72 |     [ThreadStore, MessageStore],
73 |     {
74 |         MessageStore: function (store) {
75 |             return {
76 |                 messages: store.getAllForCurrentThread()
77 |             };
78 |         },
79 |         ThreadStore: function (store) {
80 |             return {
81 |                 thread: store.getCurrent()
82 |             };
83 |         }
84 |     }
85 | );
86 | 


--------------------------------------------------------------------------------
/tests/fixtures/apps/chat/components/ThreadListItem.jsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2013-2014 Facebook, Inc.
 3 |  *
 4 |  * Licensed under the Apache License, Version 2.0 (the "License");
 5 |  * you may not use this file except in compliance with the License.
 6 |  * You may obtain a copy of the License at
 7 |  *
 8 |  * http://www.apache.org/licenses/LICENSE-2.0
 9 |  *
10 |  * Unless required by applicable law or agreed to in writing, software
11 |  * distributed under the License is distributed on an "AS IS" BASIS,
12 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 |  * See the License for the specific language governing permissions and
14 |  * limitations under the License.
15 |  */
16 | 'use strict';
17 | var React = require('react');
18 | var classNames = require('classnames');
19 | 
20 | var ReactPropTypes = React.PropTypes;
21 | 
22 | var ThreadListItem = React.createClass({
23 | 
24 |     propTypes: {
25 |         thread: ReactPropTypes.object,
26 |         currentThreadID: ReactPropTypes.bool
27 |     },
28 | 
29 |     render: function() {
30 |         var thread = this.props.thread;
31 |         var lastMessage = thread.lastMessage;
32 |         var classSet = classNames({
33 |             'thread-list-item': true,
34 |             'active': this.props.isActive
35 |         });
36 |         return (
37 |             <li className={classSet}>
38 |                 <h5 className="thread-name">{thread.name}</h5>
39 |                 <div className="thread-time">
40 |                     {(new Date(lastMessage.timestamp)).toTimeString()}
41 |                 </div>
42 |                 <div className="thread-last-message">
43 |                     {lastMessage.text}
44 |                 </div>
45 |             </li>
46 |         );
47 |     },
48 | });
49 | 
50 | module.exports = ThreadListItem;
51 | 


--------------------------------------------------------------------------------
/tests/fixtures/apps/chat/components/ThreadSection.jsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2013-2014 Facebook, Inc.
 3 |  *
 4 |  * Licensed under the Apache License, Version 2.0 (the "License");
 5 |  * you may not use this file except in compliance with the License.
 6 |  * You may obtain a copy of the License at
 7 |  *
 8 |  * http://www.apache.org/licenses/LICENSE-2.0
 9 |  *
10 |  * Unless required by applicable law or agreed to in writing, software
11 |  * distributed under the License is distributed on an "AS IS" BASIS,
12 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 |  * See the License for the specific language governing permissions and
14 |  * limitations under the License.
15 |  */
16 | 'use strict';
17 | var React = require('react');
18 | var MessageStore = require('../stores/MessageStore');
19 | var ThreadListItem = require('../components/ThreadListItem.jsx');
20 | var ThreadStore = require('../stores/ThreadStore');
21 | var UnreadThreadStore = require('../stores/UnreadThreadStore');
22 | var connectToStores = require('fluxible/addons/connectToStores');
23 | var NavLink = require('fluxible-router').NavLink;
24 | 
25 | var ThreadSection = React.createClass({
26 | 
27 |     render: function() {
28 |         var threadListItems = this.props.threads.map(function(thread) {
29 |             return (
30 |                 <NavLink href={"/thread/" + thread.id} key={thread.id}>
31 |                     <ThreadListItem
32 |                         key={thread.id}
33 |                         thread={thread}
34 |                     />
35 |                 </NavLink>
36 |             );
37 |         }, this);
38 |         var unread =
39 |             this.props.unreadCount === 0 ?
40 |                 null :
41 |                 <span>Unread threads: {this.props.unreadCount}</span>;
42 |         return (
43 |             <div className="thread-section">
44 |                 <div className="thread-count">
45 |                     {unread}
46 |                 </div>
47 |                 <ul className="thread-list">
48 |                     {threadListItems}
49 |                 </ul>
50 |             </div>
51 |         );
52 |     },
53 | 
54 |     /**
55 |      * Event handler for 'change' events coming from the stores
56 |      */
57 |     _onChange: function() {
58 |         this.setState(this.getStateFromStores());
59 |     }
60 | 
61 | });
62 | 
63 | module.exports = connectToStores(
64 |     ThreadSection,
65 |     [ThreadStore, UnreadThreadStore],
66 |     {
67 |         ThreadStore: function (store) {
68 |             return {
69 |                 threads: store.getAllChrono(),
70 |                 currentThreadID: store.getCurrentID()
71 |             };
72 |         },
73 |         UnreadThreadStore: function (store) {
74 |             return {
75 |                 unreadCount: store.getCount()
76 |             };
77 |         }
78 |     }
79 | );
80 | 


--------------------------------------------------------------------------------
/tests/fixtures/apps/chat/configs/routes.js:
--------------------------------------------------------------------------------
 1 | //var showChat = require('../actions/showChat');
 2 | //var openThread = require('../actions/openThread');
 3 | 
 4 | module.exports = {
 5 |     home: {
 6 |         path: '/',
 7 |         method: 'get',
 8 |         action: function (context, payload, done) {
 9 |             //context.executeAction(showChat, {}, done);
10 |         }
11 |     },
12 |     thread: {
13 |         path: '/thread/:id',
14 |         method: 'get',
15 |         action: function (context, payload, done) {
16 |             var threadID = payload.get('params').get('id');
17 |             //context.executeAction(showChat, { threadID: threadID }, function() {
18 |             //    context.executeAction(openThread, { threadID: threadID }, function() {
19 |             //        done();
20 |             //    })
21 |             //});
22 |         }
23 |     }
24 | };
25 | 


--------------------------------------------------------------------------------
/tests/fixtures/apps/chat/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "flux-example-chat",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "description": "Example application",
 6 |   "main": "app.js",
 7 |   "author": "Michael Ridgway <mridgway@yahoo-inc.com>",
 8 |   "scripts": {
 9 |     "dev": "grunt --gruntfile ../Gruntfile.js --taskName chat"
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/tests/fixtures/apps/chat/state.json:
--------------------------------------------------------------------------------
1 | {"context":{"dispatcher":{"stores":{"RouteStore":{"currentUrl":"/","currentNavigate":{"url":"/","type":"pageload"},"currentNavigateError":null,"isNavigateComplete":true,"routes":null},"MessageStore":{"messages":{"m_1":{"id":"m_1","threadID":"t_1","threadName":"Jing and Bill","authorName":"Bill","text":"Hey Jing, want to give a Flux talk at ForwardJS?","timestamp":1432249731052},"m_2":{"id":"m_2","threadID":"t_1","threadName":"Jing and Bill","authorName":"Bill","text":"Seems like a pretty cool conference.","timestamp":1432249741052},"m_3":{"id":"m_3","threadID":"t_1","threadName":"Jing and Bill","authorName":"Jing","text":"Sounds good.  Will they be serving dessert?","timestamp":1432249751052},"m_4":{"id":"m_4","threadID":"t_2","threadName":"Dave and Bill","authorName":"Bill","text":"Hey Dave, want to get a beer after the conference?","timestamp":1432249761052},"m_5":{"id":"m_5","threadID":"t_2","threadName":"Dave and Bill","authorName":"Dave","text":"Totally!  Meet you at the hotel bar.","timestamp":1432249771052},"m_6":{"id":"m_6","threadID":"t_3","threadName":"Functional Heads","authorName":"Bill","text":"Hey Brian, are you going to be talking about functional stuff?","timestamp":1432249781052,"isRead":true},"m_7":{"id":"m_7","threadID":"t_3","threadName":"Bill and Brian","authorName":"Brian","text":"At ForwardJS?  Yeah, of course.  See you there!","timestamp":1432249791052,"isRead":true}},"sortedByDate":["m_1","m_2","m_3","m_4","m_5","m_6","m_7"]},"ThreadStore":{"currentID":"t_3","threads":{"t_1":{"id":"t_1","name":"Jing and Bill","lastMessage":{"id":"m_3","threadID":"t_1","threadName":"Jing and Bill","authorName":"Jing","text":"Sounds good.  Will they be serving dessert?","timestamp":1432249751052}},"t_2":{"id":"t_2","name":"Dave and Bill","lastMessage":{"id":"m_5","threadID":"t_2","threadName":"Dave and Bill","authorName":"Dave","text":"Totally!  Meet you at the hotel bar.","timestamp":1432249771052}},"t_3":{"id":"t_3","name":"Bill and Brian","lastMessage":{"id":"m_7","threadID":"t_3","threadName":"Bill and Brian","authorName":"Brian","text":"At ForwardJS?  Yeah, of course.  See you there!","timestamp":1432249791052,"isRead":true}}}},"UnreadThreadStore":{}}},"plugins":{"FetchrPlugin":{"xhrContext":{"_csrf":"nhMfcNhI-1eeTz7vemTk0BDX-ELdyEHLMZ7g"},"xhrPath":"/api"}}},"plugins":{}}
2 | 


--------------------------------------------------------------------------------
/tests/fixtures/apps/chat/stores/MessageStore.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2014, Yahoo! Inc.
 3 |  * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
 4 |  */
 5 | 'use strict';
 6 | var createStore = require('fluxible/addons').createStore;
 7 | var ThreadStore = require('./ThreadStore');
 8 | 
 9 | 
10 | var MessageStore = createStore({
11 |     storeName: 'MessageStore',
12 |     handlers: {
13 |         'RECEIVE_MESSAGES': 'receiveMessages',
14 |         'OPEN_THREAD': 'openThread'
15 |     },
16 |     initialize: function () {
17 |         this.messages = {};
18 |         this.sortedByDate = [];
19 |     },
20 |     receiveMessages: function (messages) {
21 |         var self = this;
22 |         messages.forEach(function (message) {
23 |             self.messages[message.id] = message;
24 |         });
25 |         self.sortedByDate = Object.keys(self.messages);
26 |         self.sortedByDate.sort(function(a, b) {
27 |             if (self.messages[a].date < self.messages[b].date) {
28 |                 return -1;
29 |             } else if (self.messages[a].date > self.messages[b].date) {
30 |                 return 1;
31 |             }
32 |             return 0;
33 |         });
34 |         self.emitChange();
35 |     },
36 |     openThread: function (payload) {
37 |         var self = this;
38 |         // Mark all read
39 |         Object.keys(self.messages).forEach(function (key) {
40 |             var message = self.messages[key];
41 |             if (message.threadID === payload.threadID) {
42 |                 message.isRead = true;
43 |             }
44 |         });
45 |         self.emitChange();
46 |     },
47 |     getAll: function () {
48 |         return this.messages;
49 |     },
50 |     get: function (id) {
51 |         return this.messages[id];
52 |     },
53 |     getAllForThread: function(threadID) {
54 |         var self = this;
55 |         var threadMessages = [];
56 |         self.sortedByDate.forEach(function (key) {
57 |             var message = self.messages[key];
58 |             if (message.threadID === threadID) {
59 |                 threadMessages.push(message);
60 |             }
61 |         });
62 |         return threadMessages;
63 |     },
64 |     getAllForCurrentThread: function() {
65 |         var currentThreadID = this.dispatcher.getStore(ThreadStore).getCurrentID();
66 |         return this.getAllForThread(currentThreadID);
67 |     },
68 |     dehydrate: function () {
69 |         return {
70 |             messages: this.messages,
71 |             sortedByDate: this.sortedByDate
72 |         };
73 |     },
74 |     rehydrate: function (state) {
75 |         this.messages = state.messages;
76 |         this.sortedByDate = state.sortedByDate;
77 |     }
78 | });
79 | 
80 | 
81 | module.exports = MessageStore;
82 | 


--------------------------------------------------------------------------------
/tests/fixtures/apps/chat/stores/RouteStore.js:
--------------------------------------------------------------------------------
1 | var RouteStore = require('fluxible-router').RouteStore;
2 | var routes = require('../configs/routes');
3 | 
4 | module.exports = RouteStore.withStaticRoutes(routes);
5 | 


--------------------------------------------------------------------------------
/tests/fixtures/apps/chat/stores/ThreadStore.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Copyright 2014, Yahoo! Inc.
  3 |  * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
  4 |  */
  5 | 'use strict';
  6 | var createStore = require('fluxible/addons').createStore;
  7 | 
  8 | 
  9 | var ThreadStore = createStore({
 10 |     storeName: 'ThreadStore',
 11 |     handlers: {
 12 |         'RECEIVE_MESSAGES': 'receiveMessages',
 13 |         'OPEN_THREAD': 'openThread'
 14 |     },
 15 |     initialize: function () {
 16 |         this.currentID = null;
 17 |         this.threads = {};
 18 |     },
 19 |     openThread: function (payload) {
 20 |         this.currentID = payload.threadID;
 21 |         this.threads[this.currentID].lastMessage.isRead = true;
 22 |         this.emitChange();
 23 |     },
 24 |     get: function(id) {
 25 |         return this.threads[id];
 26 |     },
 27 |     getAll: function() {
 28 |         return this.threads;
 29 |     },
 30 |     getAllChrono: function() {
 31 |         var self = this;
 32 |         var orderedThreads = [];
 33 | 
 34 |         Object.keys(this.threads).forEach(function (key) {
 35 |             var thread = self.threads[key];
 36 |             orderedThreads.push(thread);
 37 |         });
 38 | 
 39 |         orderedThreads.sort(function(a, b) {
 40 |             if (a.lastMessage.date < b.lastMessage.date) {
 41 |                 return -1;
 42 |             } else if (a.lastMessage.date > b.lastMessage.date) {
 43 |                 return 1;
 44 |             }
 45 |             return 0;
 46 |         });
 47 |         return orderedThreads;
 48 |     },
 49 |     getCurrentID: function() {
 50 |         return this.currentID;
 51 |     },
 52 |     getCurrentThreadName: function() {
 53 |         return this.threads[this.currentID].name;
 54 |     },
 55 |     getCurrent: function() {
 56 |         return this.get(this.getCurrentID());
 57 |     },
 58 |     createMessage: function(details) {
 59 |         return {
 60 |             id: String('m_' + details.timestamp),
 61 |             threadID: this.getCurrentID(),
 62 |             threadName: String(this.getCurrentThreadName()),
 63 |             authorName: String(details.authorName),
 64 |             timestamp: parseInt(details.timestamp, 10),
 65 |             text: String(details.text),
 66 |             isRead: !!details.isRead
 67 |         };
 68 |     },
 69 |     receiveMessages: function (messages) {
 70 |         var self = this;
 71 |         this.dispatcher.waitFor('MessageStore', function () {
 72 |             messages.forEach(function(message) {
 73 |                 var threadID = message.threadID;
 74 |                 var thread = self.threads[threadID];
 75 |                 if (thread && thread.lastTimestamp > message.timestamp) {
 76 |                     return;
 77 |                 }
 78 |                 self.threads[threadID] = {
 79 |                     id: threadID,
 80 |                     name: message.threadName,
 81 |                     lastMessage: message
 82 |                 };
 83 |             });
 84 |             self.emitChange();
 85 |         });
 86 |     },
 87 |     dehydrate: function () {
 88 |         return {
 89 |             currentID: this.currentID,
 90 |             threads: this.threads
 91 |         };
 92 |     },
 93 |     rehydrate: function (state) {
 94 |         this.currentID = state.currentID;
 95 |         this.threads = state.threads;
 96 |     }
 97 | });
 98 | 
 99 | 
100 | module.exports = ThreadStore;
101 | 


--------------------------------------------------------------------------------
/tests/fixtures/apps/chat/stores/UnreadThreadStore.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2014, Yahoo! Inc.
 3 |  * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
 4 |  */
 5 | 'use strict';
 6 | var createStore = require('fluxible/addons').createStore;
 7 | var ThreadStore = require('./ThreadStore');
 8 | 
 9 | 
10 | var UnreadThreadStore = createStore({
11 |     storeName: 'UnreadThreadStore',
12 |     handlers: {
13 |         'RECEIVE_MESSAGES': 'receiveMessages',
14 |         'OPEN_THREAD': 'openThread'
15 |     },
16 |     initialize: function () {
17 |         this.messages = {};
18 |     },
19 |     receiveMessages: function (messages) {
20 |         this.emitChange();
21 |     },
22 |     openThread: function (payload) {
23 |         this.emitChange();
24 |     },
25 |     getCount: function () {
26 |         var threads = this.dispatcher.getStore(ThreadStore).getAll();
27 |         var unreadCount = 0;
28 |         for (var id in threads) {
29 |             if (!threads[id].lastMessage.isRead) {
30 |                 unreadCount++;
31 |             }
32 |         }
33 |         return unreadCount;
34 |     },
35 |     dehydrate: function () {
36 |         return {};
37 |     },
38 |     rehydrate: function (state) {
39 |         return;
40 |     }
41 | });
42 | 
43 | 
44 | module.exports = UnreadThreadStore;
45 | 


--------------------------------------------------------------------------------
/tests/fixtures/apps/fluxible-router/app.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2014, Yahoo! Inc.
 3 |  * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
 4 |  */
 5 | import React from 'react';
 6 | import Fluxible from 'fluxible';
 7 | import Application from './components/Application';
 8 | import RouteStore from './stores/RouteStore';
 9 | import ApplicationStore from './stores/ApplicationStore';
10 | import TimeStore from './stores/TimeStore';
11 | import PageStore from './stores/PageStore';
12 | 
13 | let app = new Fluxible({
14 |     component: Application,
15 |     stores: [
16 |         RouteStore,
17 |         ApplicationStore,
18 |         TimeStore,
19 |         PageStore
20 |     ]
21 | });
22 | 
23 | export default app;
24 | 


--------------------------------------------------------------------------------
/tests/fixtures/apps/fluxible-router/components/About.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2014, Yahoo! Inc.
 3 |  * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
 4 |  */
 5 | import React from 'react';
 6 | 
 7 | class About extends React.Component {
 8 |     render() {
 9 |         return <p>This is a description of the site.</p>;
10 |     }
11 | }
12 | 
13 | export default About;
14 | 


--------------------------------------------------------------------------------
/tests/fixtures/apps/fluxible-router/components/Application.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2014, Yahoo! Inc.
 3 |  * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
 4 |  */
 5 | import React from 'react';
 6 | import Nav from './Nav';
 7 | import Timestamp from './Timestamp';
 8 | import ApplicationStore from '../stores/ApplicationStore';
 9 | import {connectToStores, provideContext} from 'fluxible/addons';
10 | import {handleHistory} from 'fluxible-router';
11 | 
12 | class Application extends React.Component {
13 |     constructor(props, context) {
14 |         super(props, context);
15 |     }
16 |     componentDidUpdate(prevProps) {
17 |         let newProps = this.props;
18 |         if (newProps.ApplicationStore.pageTitle === prevProps.ApplicationStore.pageTitle) {
19 |             return;
20 |         }
21 |         document.title = newProps.ApplicationStore.pageTitle;
22 |     }
23 |     render() {
24 |         var Handler = this.props.currentRoute.get('handler');
25 |         //render content
26 |         return (
27 |             <div>
28 |                 <Nav />
29 |                 <Handler />
30 |                 <Timestamp />
31 |             </div>
32 |         );
33 |     }
34 | }
35 | 
36 | Application.contextTypes = {
37 |     getStore: React.PropTypes.func,
38 |     executeAction: React.PropTypes.func
39 | };
40 | 
41 | Application = connectToStores(Application, [ApplicationStore], function (stores, props) {
42 |     return {
43 |         ApplicationStore: stores.ApplicationStore.getState()
44 |     };
45 | });
46 | 
47 | Application = handleHistory(Application, {enableScroll: false});
48 | 
49 | Application = provideContext(Application);
50 | 
51 | export default Application;
52 | 


--------------------------------------------------------------------------------
/tests/fixtures/apps/fluxible-router/components/Home.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2014, Yahoo! Inc.
 3 |  * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
 4 |  */
 5 | import React from 'react';
 6 | 
 7 | class Home extends React.Component {
 8 |     render() {
 9 |         return <p>Welcome to the site!</p>;
10 |     }
11 | }
12 | 
13 | export default Home;
14 | 


--------------------------------------------------------------------------------
/tests/fixtures/apps/fluxible-router/components/Html.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2014, Yahoo! Inc.
 3 |  * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
 4 |  */
 5 | import React from 'react';
 6 | import ApplicationStore from '../stores/ApplicationStore';
 7 | 
 8 | class HtmlComponent extends React.Component {
 9 |     render() {
10 |         return (
11 |             <html>
12 |                 <head>
13 |                     <meta charSet="utf-8" />
14 |                     <title>{this.props.context.getStore(ApplicationStore).getPageTitle()}</title>
15 |                     <meta name="viewport" content="width=device-width, user-scalable=no" />
16 |                     <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css" />
17 |                 </head>
18 |                 <body>
19 |                     <div id="app" dangerouslySetInnerHTML={{__html: this.props.markup}}></div>
20 |                 </body>
21 |                 <script dangerouslySetInnerHTML={{__html: this.props.state}}></script>
22 |                 <script src="/public/js/client.js" defer></script>
23 |             </html>
24 |         )
25 |     }
26 | }
27 | 
28 | export default HtmlComponent;
29 | 


--------------------------------------------------------------------------------
/tests/fixtures/apps/fluxible-router/components/Nav.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2014, Yahoo! Inc.
 3 |  * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
 4 |  */
 5 | import React from 'react';
 6 | import {NavLink} from 'fluxible-router';
 7 | 
 8 | class Nav extends React.Component {
 9 |     render() {
10 |         return (
11 |             <ul className="pure-menu pure-menu-open pure-menu-horizontal">
12 |                 <li><NavLink routeName="home" activeStyle={{backgroundColor: '#ccc'}}>Home</NavLink></li>
13 |                 <li><NavLink routeName="about" activeStyle={{backgroundColor: '#ccc'}}>About</NavLink></li>
14 |             </ul>
15 |         );
16 |     }
17 | }
18 | 
19 | export default Nav;
20 | 


--------------------------------------------------------------------------------
/tests/fixtures/apps/fluxible-router/components/Page.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2014, Yahoo! Inc.
 3 |  * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
 4 |  */
 5 | import React from 'react';
 6 | import PageStore from '../stores/PageStore';
 7 | 
 8 | class Page extends React.Component {
 9 |     constructor(props, context) {
10 |         super(props, context);
11 |         this.state = context.getStore(PageStore).getState();
12 |         this._changeListener = this._onStoreChange.bind(this);
13 |     }
14 |     componentDidMount() {
15 |         this.context.getStore(PageStore).addChangeListener(this._changeListener);
16 |     }
17 |     componentWillUnmount() {
18 |         this.context.getStore(PageStore).removeChangeListener(this._changeListener);
19 |     }
20 |     _onStoreChange() {
21 |         this.setState(this.context.getStore(PageStore).getState());
22 |     }
23 |     render() {
24 |         return (
25 |             <p>{this.state.content}</p>
26 |         );
27 |     }
28 | }
29 | 
30 | Page.contextTypes = {
31 |     getStore: React.PropTypes.func,
32 |     executeAction: React.PropTypes.func
33 | };
34 | 
35 | export default Page;


--------------------------------------------------------------------------------
/tests/fixtures/apps/fluxible-router/components/Timestamp.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2014, Yahoo! Inc.
 3 |  * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
 4 |  */
 5 | import React from 'react';
 6 | import TimeStore from '../stores/TimeStore';
 7 | 
 8 | class Timestamp extends React.Component {
 9 |     constructor(props, context) {
10 |         super(props, context);
11 |         this.state = context.getStore(TimeStore).getState();
12 |         this._changeListener = this._onStoreChange.bind(this);
13 |     }
14 |     componentDidMount() {
15 |         this.context.getStore(TimeStore).addChangeListener(this._changeListener);
16 |     }
17 |     componentWillUnmount() {
18 |         this.context.getStore(TimeStore).removeChangeListener(this._changeListener);
19 |     }
20 |     _onStoreChange() {
21 |         this.setState(this.context.getStore(TimeStore).getState());
22 |     }
23 |     onReset() {
24 |         //this.context.executeAction(updateTime);
25 |     }
26 |     render() {
27 |         return (
28 |             <em onClick={this.onReset.bind(this)} style={{fontSize: '.8em'}}>{this.state.time}</em>
29 |         );
30 |     }
31 | }
32 | 
33 | Timestamp.contextTypes = {
34 |     getStore: React.PropTypes.func,
35 |     executeAction: React.PropTypes.func
36 | };
37 | 
38 | export default Timestamp;
39 | 


--------------------------------------------------------------------------------
/tests/fixtures/apps/fluxible-router/configs/routes.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |     home: {
 3 |         path: '/',
 4 |         method: 'get',
 5 |         handler: require('../components/Home'),
 6 |         label: 'Home',
 7 |         action: (context, payload, done) => {
 8 |             context.dispatch('UPDATE_PAGE_TITLE', { pageTitle: 'Home | flux-examples | routing' });
 9 |             done();
10 |         }
11 |     },
12 |     about: {
13 |         path: '/about',
14 |         method: 'get',
15 |         handler: require('../components/About'),
16 |         label: 'About',
17 |         action: (context, payload, done) => {
18 |             context.dispatch('UPDATE_PAGE_TITLE', { pageTitle: 'About | flux-examples | routing' });
19 |             done();
20 |         }
21 |     },
22 |     dynamicpage: {
23 |         path: '/page/:id',
24 |         method: 'get',
25 |         handler: require('../components/Page'),
26 |         action: (context, payload, done) => {
27 |             var pageId = payload.get('params').get('id');
28 |             context.dispatch('LOAD_PAGE', { id: pageId });
29 |             context.dispatch('UPDATE_PAGE_TITLE', { pageTitle: pageId + ' [Dynamic Page] | flux-examples | routing' });
30 |             done();
31 |         }
32 |     }
33 | };
34 | 


--------------------------------------------------------------------------------
/tests/fixtures/apps/fluxible-router/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "flux-example-routing",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "description": "Example application",
 6 |   "main": "app.js",
 7 |   "author": "Michael Ridgway <mridgway@yahoo-inc.com>",
 8 |   "scripts": {
 9 |     "dev": "grunt --gruntfile ../Gruntfile.js --taskName fluxible-router"
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/tests/fixtures/apps/fluxible-router/state.json:
--------------------------------------------------------------------------------
1 | {"context":{"dispatcher":{"stores":{"RouteStore":{"currentUrl":"/","currentNavigate":{"url":"/"},"currentNavigateError":null,"isNavigateComplete":true,"routes":null},"TimeStore":{"time":"Thu May 21 2015 16:12:02 GMT-0700 (PDT)"},"ApplicationStore":{"pageTitle":"Home | flux-examples | routing"}}},"plugins":{}},"plugins":{}}
2 | 


--------------------------------------------------------------------------------
/tests/fixtures/apps/fluxible-router/stores/ApplicationStore.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2014, Yahoo! Inc.
 3 |  * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
 4 |  */
 5 | import {BaseStore} from 'fluxible/addons';
 6 | 
 7 | class ApplicationStore extends BaseStore {
 8 |     constructor(dispatcher) {
 9 |         super(dispatcher);
10 |         this.pageTitle = '';
11 |     }
12 |     updatePageTitle(payload) {
13 |         this.pageTitle = payload.pageTitle;
14 |         this.emitChange();
15 |     }
16 |     getPageTitle() {
17 |         return this.pageTitle;
18 |     }
19 |     getState() {
20 |         return {
21 |             pageTitle: this.pageTitle
22 |         };
23 |     }
24 |     dehydrate() {
25 |         return this.getState();
26 |     }
27 |     rehydrate(state) {
28 |         this.pageTitle = state.pageTitle;
29 |     }
30 | }
31 | 
32 | ApplicationStore.storeName = 'ApplicationStore'; // PR open in dispatchr to remove this need
33 | ApplicationStore.handlers = {
34 |     'UPDATE_PAGE_TITLE'    : 'updatePageTitle'
35 | };
36 | 
37 | export default ApplicationStore;
38 | 


--------------------------------------------------------------------------------
/tests/fixtures/apps/fluxible-router/stores/PageStore.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2014, Yahoo! Inc.
 3 |  * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
 4 |  */
 5 | import {BaseStore} from 'fluxible/addons';
 6 | 
 7 | class PageStore extends BaseStore {
 8 |     constructor(dispatcher) {
 9 |         super(dispatcher);
10 |         this.content = 'initial content...';
11 |     }
12 |     handleContentChange(payload) {
13 |         this.content = 'content for page with id '+payload.id;
14 |         this.emitChange();
15 |     }
16 |     getState() {
17 |         return {
18 |             content: this.content
19 |         };
20 |     }
21 |     dehydrate() {
22 |         return this.getState();
23 |     }
24 |     rehydrate(state) {
25 |         this.content = state.content;
26 |     }
27 | }
28 | 
29 | PageStore.storeName = 'PageStore'; // PR open in dispatchr to remove this need
30 | PageStore.handlers = {
31 |     'LOAD_PAGE': 'handleContentChange'
32 | };
33 | 
34 | export default PageStore;
35 | 


--------------------------------------------------------------------------------
/tests/fixtures/apps/fluxible-router/stores/RouteStore.js:
--------------------------------------------------------------------------------
1 | import {RouteStore} from 'fluxible-router';
2 | import routes from '../configs/routes';
3 | 
4 | export default RouteStore.withStaticRoutes(routes);
5 | 


--------------------------------------------------------------------------------
/tests/fixtures/apps/fluxible-router/stores/TimeStore.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2014, Yahoo! Inc.
 3 |  * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
 4 |  */
 5 | import {BaseStore} from 'fluxible/addons';
 6 | 
 7 | class TimeStore extends BaseStore {
 8 |     constructor(dispatcher) {
 9 |         super(dispatcher);
10 |         this.time = new Date();
11 |     }
12 |     handleTimeChange(payload) {
13 |         this.time = new Date();
14 |         this.emitChange();
15 |     }
16 |     getState() {
17 |         return {
18 |             time: this.time.toString()
19 |         };
20 |     }
21 |     dehydrate() {
22 |         return this.getState();
23 |     }
24 |     rehydrate(state) {
25 |         this.time = new Date(state.time);
26 |     }
27 | }
28 | 
29 | TimeStore.storeName = 'TimeStore'; // PR open in dispatchr to remove this need
30 | TimeStore.handlers = {
31 |     'NAVIGATE_START': 'handleTimeChange',
32 |     'UPDATE_TIME': 'handleTimeChange'
33 | };
34 | 
35 | export default TimeStore;
36 | 


--------------------------------------------------------------------------------
/tests/fixtures/apps/todo/app.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2014, Yahoo! Inc.
 3 |  * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
 4 |  */
 5 | 'use strict';
 6 | var React = require('react');
 7 | var Fluxible = require('fluxible');
 8 | 
 9 | var app = new Fluxible({
10 |     component: require('./components/TodoApp.jsx')
11 | });
12 | 
13 | app.registerStore(require('./stores/TodoStore'));
14 | app.registerStore(require('./stores/PageStore'));
15 | 
16 | 
17 | module.exports = app;
18 | 


--------------------------------------------------------------------------------
/tests/fixtures/apps/todo/components/Footer.jsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2014, Yahoo! Inc.
 3 |  * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
 4 |  */
 5 | 'use strict';
 6 | var React = require('react');
 7 | 
 8 | var Component = React.createClass({
 9 |     render: function() {
10 |         var nowShowing = this.props.nowShowing;
11 |         var onFilterChange = this.props.onFilterChange;
12 |         var activeTodoLabel = 'item' + (this.props.count > 1 ? 's' : '');
13 |         var clearButton;
14 | 
15 |         if (this.props.completedCount > 0) {
16 |             clearButton = (
17 |                 <button
18 |                     id="clear-completed"
19 |                     onClick={this.props.onClearCompleted}>
20 | 
21 |                     Clear completed ({this.props.completedCount})
22 |                 </button>
23 |             );
24 |         }
25 | 
26 |         return (
27 |             <footer id="footer">
28 |                 <span id="todo-count">
29 |                     <strong>{this.props.count}</strong> {activeTodoLabel} left
30 |                 </span>
31 |                 <ul id="filters">
32 |                     <li>
33 |                         <a
34 |                             href="#"
35 |                             onClick={onFilterChange.bind(null, 'ALL_TODOS')}
36 |                             className={nowShowing === 'ALL_TODOS' ? 'selected' : ''}>
37 | 
38 |                             All
39 |                         </a>
40 |                     </li>
41 |                     {' '}
42 |                     <li>
43 |                         <a
44 |                             href="#"
45 |                             onClick={onFilterChange.bind(null, 'ACTIVE_TODOS')}
46 |                             className={nowShowing === 'ACTIVE_TODOS' ? 'selected' : ''}>
47 | 
48 |                             Active
49 |                         </a>
50 |                     </li>
51 |                     {' '}
52 |                     <li>
53 |                         <a
54 |                             href="#"
55 |                             onClick={onFilterChange.bind(null, 'COMPLETED_TODOS')}
56 |                             className={nowShowing === 'COMPLETED_TODOS' ? 'selected' : ''}>
57 | 
58 |                             Completed
59 |                         </a>
60 |                     </li>
61 |                 </ul>
62 |                 {clearButton}
63 |             </footer>
64 |         );
65 |     }
66 | });
67 | 
68 | 
69 | module.exports = Component;
70 | 


--------------------------------------------------------------------------------
/tests/fixtures/apps/todo/components/Html.jsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2014, Yahoo! Inc.
 3 |  * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
 4 |  */
 5 | 'use strict';
 6 | var React = require('react');
 7 | var PageStore = require('../stores/PageStore');
 8 | var FluxibleMixin = require('fluxible').FluxibleMixin;
 9 | 
10 | var Component = React.createClass({
11 |     render: function() {
12 |         return (
13 |             <html>
14 |             <head>
15 |                 <meta charSet="utf-8" />
16 |                 <title>{this.props.context.getStore(PageStore).getPageTitle()}</title>
17 |                 <meta name="viewport" content="width=device-width, user-scalable=no" />
18 |                 <link rel="stylesheet" href="/public/base.css" />
19 |                 <link rel="stylesheet" href="/public/styles.css" />
20 |             </head>
21 |             <body>
22 |                 <section id="todoapp" dangerouslySetInnerHTML={{__html: this.props.markup}}></section>
23 |                 <footer id="info">
24 |                     <p>Double-click to edit a todo</p>
25 |                     <p>Some assets from <a href="http://todomvc.com">TodoMVC</a></p>
26 |                     <p>Some code inspried by <a href="http://todomvc.com/examples/react/">TodoMVC React (Pete Hunt)</a></p>
27 |                     <p>Showing off <a href="http://fluxible.io">Fluxible</a></p>
28 |                 </footer>
29 |             </body>
30 |             <script dangerouslySetInnerHTML={{__html: this.props.state}}></script>
31 |             <script src="/public/js/client.js" defer></script>
32 |             </html>
33 |         );
34 |     }
35 | });
36 | 
37 | 
38 | module.exports = Component;
39 | 


--------------------------------------------------------------------------------
/tests/fixtures/apps/todo/components/TodoApp.jsx:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Copyright 2014, Yahoo! Inc.
  3 |  * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
  4 |  */
  5 | 'use strict';
  6 | var React = require('react');
  7 | var provideContext = require('fluxible/addons/provideContext');
  8 | var connectToStores = require('fluxible/addons/connectToStores');
  9 | var TodoStore = require('../stores/TodoStore');
 10 | var TodoItem = require('./TodoItem');
 11 | var Footer = require('./Footer');
 12 | 
 13 | var ENTER_KEY = 13;
 14 | 
 15 | var TodoApp = React.createClass({
 16 |     contextTypes: {
 17 |         executeAction: React.PropTypes.func.isRequired
 18 |     },
 19 |     getInitialState: function () {
 20 |         return {
 21 |             nowShowing: 'ALL_TODOS'
 22 |         };
 23 |     },
 24 |     handleNewTodoKeyDown: function (event) {
 25 |         if (event.which !== ENTER_KEY) {
 26 |             return;
 27 |         }
 28 | 
 29 |         event.preventDefault();
 30 | 
 31 |         var text = this.refs.newField.getDOMNode().value.trim();
 32 | 
 33 |         if (text) {
 34 |             this.context.executeAction(createTodo, {
 35 |                 text: text
 36 |             });
 37 |             this.refs.newField.getDOMNode().value = '';
 38 |         }
 39 |     },
 40 |     changeFilter: function (filter, event) {
 41 |         this.setState({ nowShowing: filter });
 42 |         event.preventDefault();
 43 |     },
 44 |     clearCompleted: function () {
 45 |         var ids = this.props.items.filter(function (todo) {
 46 |             return todo.completed;
 47 |         }).map(function (todo) {
 48 |             return todo.id;
 49 |         });
 50 | 
 51 |         //this.context.executeAction(deleteTodo, {
 52 |         //    ids: ids
 53 |         //});
 54 |     },
 55 |     toggleAll: function (event) {
 56 |         var checked = event.target.checked;
 57 |         //this.context.executeAction(toggleAll, {
 58 |         //    checked: checked
 59 |         //});
 60 |     },
 61 |     toggle: function (todo) {
 62 |         //this.context.executeAction(updateTodo, {
 63 |         //    id: todo.id,
 64 |         //    completed: !todo.completed,
 65 |         //    text: todo.text
 66 |         //});
 67 |     },
 68 |     destroy: function (todo) {
 69 |         //this.context.executeAction(deleteTodo, {
 70 |         //    ids: [todo.id]
 71 |         //});
 72 |     },
 73 |     edit: function (todo, callback) {
 74 |         // refer TodoItem.handleEdit for the reasoning behind callback
 75 |         this.setState({ editing: todo.id }, function () {
 76 |             callback();
 77 |         });
 78 |     },
 79 |     save: function (todo, completed, text) {
 80 |         this.context.executeAction(updateTodo, {
 81 |             id: todo.id,
 82 |             completed: completed,
 83 |             text: text
 84 |         });
 85 | 
 86 |         this.setState({ editing: null });
 87 |     },
 88 |     cancel: function () {
 89 |         this.setState({ editing: null });
 90 |     },
 91 |     render: function() {
 92 |         var todos = this.props.items;
 93 |         var main;
 94 |         var footer;
 95 | 
 96 |         var shownTodos = todos.filter(function (todo) {
 97 |             switch(this.state.nowShowing) {
 98 |                 case 'ACTIVE_TODOS':
 99 |                     return !todo.completed;
100 |                 case 'COMPLETED_TODOS':
101 |                     return todo.completed;
102 |                 case 'ALL_TODOS':
103 |                     return true;
104 |             }
105 |         }, this);
106 | 
107 |         var todoItems = shownTodos.map(function (todo) {
108 |             return (
109 |                 <TodoItem
110 |                     key={todo.id}
111 |                     todo={todo}
112 |                     onToggle={this.toggle.bind(this, todo)}
113 |                     onDestroy={this.destroy.bind(this, todo)}
114 |                     onEdit={this.edit.bind(this, todo)}
115 |                     editing={this.state.editing === todo.id}
116 |                     onSave={this.save.bind(this, todo)}
117 |                     onCancel={this.cancel}
118 |                 />
119 |             );
120 |         }, this);
121 | 
122 |         var activeTodoCount = todos.reduce(function (total, todo) {
123 |             return todo.completed ? total : total + 1;
124 |         }, 0);
125 | 
126 |         var completedCount = todos.length - activeTodoCount;
127 | 
128 |         if (activeTodoCount || completedCount) {
129 |             footer = <Footer
130 |                 count={activeTodoCount}
131 |                 completedCount={completedCount}
132 |                 nowShowing={this.state.nowShowing}
133 |                 onClearCompleted={this.clearCompleted}
134 |                 onFilterChange={this.changeFilter}
135 |             />;
136 |         }
137 | 
138 |         if (todos.length) {
139 |             main = (
140 |                 <section id="main">
141 |                     <input
142 |                         id="toggle-all"
143 |                         type="checkbox"
144 |                         onChange={this.toggleAll}
145 |                         checked={activeTodoCount === 0}
146 |                     />
147 |                     <ul id="todo-list">
148 |                         {todoItems}
149 |                     </ul>
150 |                 </section>
151 |             );
152 |         }
153 | 
154 |         return (
155 |             <div>
156 |                 <header id="header">
157 |                     <h1>todos</h1>
158 |                     <input
159 |                         ref="newField"
160 |                         id="new-todo"
161 |                         placeholder="What needs to be done?"
162 |                         onKeyDown={this.handleNewTodoKeyDown}
163 |                         autoFocus={true}
164 |                     />
165 |                 </header>
166 |                 {main}
167 |                 {footer}
168 |             </div>
169 |         );
170 |     }
171 | });
172 | 
173 | TodoApp = connectToStores(TodoApp, [TodoStore], function (stores, props) {
174 |     return {
175 |         items: stores.TodoStore.getAll()
176 |     };
177 | });
178 | 
179 | TodoApp = provideContext(TodoApp);
180 | 
181 | module.exports = TodoApp;
182 | 


--------------------------------------------------------------------------------
/tests/fixtures/apps/todo/components/TodoItem.jsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2014, Yahoo! Inc.
 3 |  * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
 4 |  */
 5 | 'use strict';
 6 | var React = require('react');
 7 | var classNames = require('classnames');
 8 | 
 9 | 
10 | var ESCAPE_KEY = 27;
11 | var ENTER_KEY = 13;
12 | 
13 | 
14 | var Component = React.createClass({
15 |     getInitialState: function () {
16 |         return { editText: this.props.todo.text };
17 |     },
18 |     handleSubmit: function (event) {
19 |         var completed = this.props.todo.completed;
20 |         var text = this.state.editText.trim();
21 | 
22 |         if (text) {
23 |             this.props.onSave(completed, text);
24 |             this.setState({ editText: text });
25 |         }
26 |         else {
27 |             this.props.onDestroy();
28 |         }
29 |     },
30 |     handleEdit: function () {
31 |         this.props.onEdit(function () {
32 |             var node = this.refs.editField.getDOMNode();
33 |             node.focus();
34 |             node.setSelectionRange(node.value.length, node.value.length);
35 |         }.bind(this));
36 | 
37 |         this.setState({ editText: this.props.todo.text });
38 |     },
39 |     handleKeyDown: function (event) {
40 |         if (event.which === ESCAPE_KEY) {
41 |             this.setState({ editText: this.props.todo.text });
42 |             this.props.onCancel(event);
43 |         }
44 |         else if (event.which === ENTER_KEY) {
45 |             this.refs.editField.getDOMNode().blur();
46 |         }
47 |     },
48 |     handleChange: function (event) {
49 |         this.setState({ editText: event.target.value });
50 |     },
51 |     render: function () {
52 |         var classSet = classNames({
53 |             completed: this.props.todo.completed,
54 |             editing: this.props.editing,
55 |             pending: this.props.todo.pending,
56 |             failure: this.props.todo.failure
57 |         });
58 | 
59 |         return (
60 |             <li className={classSet}>
61 |                 <div className="view">
62 |                     <input
63 |                         className="toggle"
64 |                         type="checkbox"
65 |                         checked={this.props.todo.completed}
66 |                         onChange={this.props.onToggle}
67 |                         disabled={this.props.todo.failure}
68 |                     />
69 |                     <label onDoubleClick={this.props.todo.failure ? undefined : this.handleEdit}>
70 |                         {this.props.todo.text}
71 |                     </label>
72 |                     <button
73 |                         className="destroy"
74 |                         onClick={this.props.onDestroy}
75 |                         disabled={this.props.todo.failure}
76 |                     />
77 |                 </div>
78 |                 <input
79 |                     ref="editField"
80 |                     className="edit"
81 |                     value={this.state.editText}
82 |                     onBlur={this.handleSubmit}
83 |                     onChange={this.handleChange}
84 |                     onKeyDown={this.handleKeyDown}
85 |                 />
86 |             </li>
87 |         );
88 |     }
89 | });
90 | 
91 | 
92 | module.exports = Component;
93 | 


--------------------------------------------------------------------------------
/tests/fixtures/apps/todo/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "flux-example-todo",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "description": "Example application",
 6 |   "main": "app.js",
 7 |   "author": "Reza Akhavan <jedireza@yahoo-inc.com>",
 8 |   "scripts": {
 9 |     "dev": "grunt todo --gruntfile ../Gruntfile.js --taskName todo"
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/tests/fixtures/apps/todo/state.json:
--------------------------------------------------------------------------------
1 | {"context":{"dispatcher":{"stores":{"PageStore":{"pageTitle":"showTodos | flux-examples"},"TodoStore":{"todos":[{"id":"td_1432250113392","text":"test"},{"id":"td_1432250114133","text":"test"},{"id":"td_1432250115389","text":"foo"}]}}},"plugins":{"FetchrPlugin":{"xhrContext":{"_csrf":"4wtcxZRX-k_0a5WruM16sFWWpflg1PX2VM7s"},"xhrPath":"/api"}}},"plugins":{}}
2 | 


--------------------------------------------------------------------------------
/tests/fixtures/apps/todo/stores/PageStore.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2014, Yahoo! Inc.
 3 |  * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
 4 |  */
 5 | 'use strict';
 6 | var createStore = require('fluxible/addons').createStore;
 7 | 
 8 | var PageStore = createStore({
 9 |     storeName: 'PageStore',
10 |     handlers: {
11 |         'UPDATE_PAGE_TITLE': 'updatePageTitle'
12 |     },
13 |     initialize: function () {
14 |         this.pageTitle = '';
15 |     },
16 |     updatePageTitle: function (title) {
17 |         this.pageTitle = title;
18 |         this.emitChange();
19 |     },
20 |     getPageTitle: function () {
21 |         return this.pageTitle;
22 |     },
23 |     dehydrate: function () {
24 |         return {
25 |             pageTitle: this.pageTitle
26 |         };
27 |     },
28 |     rehydrate: function (state) {
29 |         this.pageTitle = state.pageTitle;
30 |     }
31 | });
32 | 
33 | 
34 | module.exports = PageStore;
35 | 


--------------------------------------------------------------------------------
/tests/fixtures/apps/todo/stores/TodoStore.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2014, Yahoo! Inc.
 3 |  * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
 4 |  */
 5 | 'use strict';
 6 | var createStore = require('fluxible/addons').createStore;
 7 | 
 8 | 
 9 | module.exports = createStore({
10 |     storeName: 'TodoStore',
11 |     handlers: {
12 |         'RECEIVE_TODOS_SUCCESS': '_receiveTodos',
13 |         'CREATE_TODO_START': '_createTodoStart',
14 |         'CREATE_TODO_FAILURE': '_createTodoFailure',
15 |         'CREATE_TODO_SUCCESS': '_createTodoSuccess',
16 |         'UPDATE_TODO_START': '_updateTodoStart',
17 |         'UPDATE_TODO_SUCCESS': '_updateTodoSuccess',
18 |         'DELETE_TODO_SUCCESS': '_receiveTodos',
19 |         'TOGGLE_ALL_TODO_SUCCESS': '_receiveTodos'
20 |     },
21 |     initialize: function () {
22 |         this.todos = [];
23 |     },
24 |     _receiveTodos: function (todos) {
25 |         this.todos = todos;
26 |         this.emitChange();
27 |     },
28 |     _createTodoStart: function (todo) {
29 |         this.todos.push(todo);
30 |         this.emitChange();
31 |     },
32 |     _createTodoSuccess: function (newTodo) {
33 |         this.todos.forEach(function (todo, index) {
34 |             if (todo.id === newTodo.id) {
35 |                 this.todos.splice(index, 1, newTodo);
36 |             }
37 |         }, this);
38 | 
39 |         this.emitChange();
40 |     },
41 |     _createTodoFailure: function (failedTodo) {
42 |         this.todos.forEach(function (todo, index) {
43 |             if (todo.id === failedTodo.id) {
44 |                 todo.failure = true;
45 |             }
46 |         }, this);
47 | 
48 |         this.emitChange();
49 |     },
50 |     _updateTodoStart: function (theTodo) {
51 |         this.todos.forEach(function (todo, index) {
52 |             if (todo.id === theTodo.id) {
53 |                 this.todos.splice(index, 1, theTodo);
54 |             }
55 |         }, this);
56 | 
57 |         this.emitChange();
58 |     },
59 |     _updateTodoSuccess: function (theTodo) {
60 |         this.todos.forEach(function (todo, index) {
61 |             if (todo.id === theTodo.id) {
62 |                 this.todos.splice(index, 1, theTodo);
63 |             }
64 |         }, this);
65 | 
66 |         this.emitChange();
67 |     },
68 |     getAll: function () {
69 |         return this.todos;
70 |     },
71 |     createTodo: function(details) {
72 |         return {
73 |             id: String('td_' + details.timestamp),
74 |             editing: false,
75 |             completed: false,
76 |             text: String(details.text),
77 |             pending: true
78 |         };
79 |     },
80 |     dehydrate: function () {
81 |         return {
82 |             todos: this.todos
83 |         };
84 |     },
85 |     rehydrate: function (state) {
86 |         this.todos = state.todos;
87 |     }
88 | });
89 | 


--------------------------------------------------------------------------------
/tests/fixtures/components/ContextChild.js:
--------------------------------------------------------------------------------
 1 | import React from '../../../index';
 2 | 
 3 | class ContextChild extends React.Component {
 4 |     constructor(props, context) {
 5 |         super(props, context);
 6 |     }
 7 | 
 8 |     render() {
 9 |         return <div>{this.context.foo}</div>;
10 |     }
11 | }
12 | 
13 | ContextChild.contextTypes = {
14 |     foo: React.PropTypes.string.isRequired
15 | };
16 | 
17 | export default ContextChild;
18 | 


--------------------------------------------------------------------------------
/tests/fixtures/components/ContextParent.js:
--------------------------------------------------------------------------------
 1 | import React from '../../../index';
 2 | import ContextChild from './ContextChild';
 3 | 
 4 | class ContextParent extends React.Component {
 5 |     constructor(props, context) {
 6 |         super(props, context);
 7 |     }
 8 | 
 9 |     getChildContext() {
10 |         return {
11 |             foo: 'bar'
12 |         };
13 |     }
14 | 
15 |     render() {
16 |         return <ContextChild />;
17 |     }
18 | }
19 | 
20 | ContextParent.childContextTypes = {
21 |     foo: React.PropTypes.string
22 | };
23 | 
24 | 
25 | export default ContextParent;
26 | 


--------------------------------------------------------------------------------
/tests/fixtures/components/Hello.js:
--------------------------------------------------------------------------------
 1 | import React from '../../../index';
 2 | 
 3 | class Hello extends React.Component {
 4 |     render () {
 5 |         if (this.props.children) {
 6 |             return <div {...this.props}>{this.props.children}</div>;
 7 |         }
 8 |         return <div {...this.props}>Hello world!</div>;
 9 |     }
10 | }
11 | 
12 | export default Hello;
13 | 


--------------------------------------------------------------------------------
/tests/fixtures/components/HelloCreateClass.js:
--------------------------------------------------------------------------------
 1 | import React from '../../../index';
 2 | 
 3 | export default React.createClass({
 4 |     render() {
 5 |         if (this.props.children) {
 6 |             return <div {...this.props}>{this.props.children}</div>;
 7 |         }
 8 |         return <div {...this.props}>Hello world!</div>;
 9 |     }
10 | });
11 | 


--------------------------------------------------------------------------------
/tests/profile/react-server.js:
--------------------------------------------------------------------------------
 1 | require('babel/register');
 2 | var profiler = require('profiler');
 3 | var renderAppWithFreshReact = require('../../utils/renderAppWithFreshReact');
 4 | var reactPath = require.resolve('../../dist/react-server');
 5 | var statePath = require.resolve('../fixtures/apps/chat/state.json');
 6 | var appPath = require.resolve('../fixtures/apps/chat/app');
 7 | 
 8 | renderAppWithFreshReact(reactPath, appPath, statePath).then(function (app) {
 9 |     profiler.resume();
10 |     for (var i = 0; i<10000; ++i) {
11 |         app.React.renderToStaticMarkup(app.context.createElement());
12 |     }
13 |     profiler.pause();
14 | }).catch(function (e) {
15 |     console.error(e.stack || e);
16 | });
17 | 


--------------------------------------------------------------------------------
/tests/profile/react.js:
--------------------------------------------------------------------------------
 1 | require('babel/register');
 2 | var profiler = require('profiler');
 3 | var renderAppWithFreshReact = require('../../utils/renderAppWithFreshReact');
 4 | var reactPath = require.resolve('../../dist/react');
 5 | var statePath = require.resolve('../fixtures/apps/chat/state.json');
 6 | var appPath = require.resolve('../fixtures/apps/chat/app');
 7 | 
 8 | renderAppWithFreshReact(reactPath, appPath, statePath).then(function (app) {
 9 |     profiler.resume();
10 |     for (var i = 0; i<10000; ++i) {
11 |         app.React.renderToStaticMarkup(app.context.createElement());
12 |     }
13 |     profiler.pause();
14 | }).catch(function (e) {
15 |     console.error(e.stack || e);
16 | });
17 | 


--------------------------------------------------------------------------------
/tests/unit/.eslintrc:
--------------------------------------------------------------------------------
 1 | ---
 2 | parser: "babel-eslint"
 3 | env:
 4 |   node: true,
 5 |   mocha: true
 6 | rules:
 7 |   strict: 0
 8 |   indent: [2, 4]
 9 |   no-unused-vars: 0 // see https://github.com/babel/babel-eslint/issues/21
10 |   handle-callback-err: 0
11 | 


--------------------------------------------------------------------------------
/tests/unit/apps.js:
--------------------------------------------------------------------------------
 1 | var assert = require('assert');
 2 | var renderAppWithFreshReact = require('../../utils/renderAppWithFreshReact');
 3 | 
 4 | describe('Apps', function () {
 5 |     var apps = {
 6 |         Chat: {
 7 |             appPath: require.resolve('../fixtures/apps/chat'),
 8 |             statePath: require.resolve('../fixtures/apps/chat/state.json')
 9 |         },
10 |         FluxibleRouter: {
11 |             appPath: require.resolve('../fixtures/apps/fluxible-router'),
12 |             statePath: require.resolve('../fixtures/apps/fluxible-router/state.json')
13 |         },
14 |         Todo: {
15 |             appPath: require.resolve('../fixtures/apps/todo'),
16 |             statePath: require.resolve('../fixtures/apps/todo/state.json')
17 |         }
18 |     };
19 |     var ReactPaths = {
20 |         react: require.resolve('../../node_modules/react'),
21 |         'react-server': require.resolve('../../dist/react-server.dev')
22 |     };
23 | 
24 |     Object.keys(apps).forEach(function (appName) {
25 |         var appPath = apps[appName].appPath;
26 |         var statePath = apps[appName].statePath;
27 | 
28 |         describe(appName, function () {
29 |             it('should render the same output', function (done) {
30 |                 // run in series so mockery doesn't conflict
31 |                 renderAppWithFreshReact(ReactPaths.react, appPath, statePath).then(function (stockOutput) {
32 |                     renderAppWithFreshReact(ReactPaths['react-server'], appPath, statePath).then(function (serverOutput) {
33 |                         assert.notEqual(serverOutput.React.__isReactServer, stockOutput.React.__isReactServer);
34 |                         assert.equal(
35 |                             serverOutput.markup,
36 |                             stockOutput.markup
37 |                         );
38 |                         done();
39 |                     }).catch(done);
40 |                 }).catch(done);
41 |             });
42 |         });
43 | 
44 |     });
45 | });
46 | 


--------------------------------------------------------------------------------
/tests/unit/context.js:
--------------------------------------------------------------------------------
 1 | var assert = require('assert');
 2 | var React = require('../../dist/react-server.dev');
 3 | var ContextParent = require('../fixtures/components/ContextParent');
 4 | 
 5 | describe('Context', function () {
 6 |     it('should pass child context', function (done) {
 7 |         React.renderToStaticMarkup(<ContextParent />, function (err, markup) {
 8 |             assert.equal(markup, '<div>bar</div>');
 9 |             done();
10 |         });
11 |     });
12 | });
13 | 


--------------------------------------------------------------------------------
/tests/unit/hello.js:
--------------------------------------------------------------------------------
 1 | var assert = require('assert');
 2 | var React = require('../../dist/react-server.dev');
 3 | var HelloComponent = require('../fixtures/components/Hello');
 4 | var HelloCreateClass = require('../fixtures/components/HelloCreateClass');
 5 | 
 6 | describe('Hello', function () {
 7 |     it('should render hello world', function (done) {
 8 |         React.renderToStaticMarkup(<div>Hello world!</div>, function (err, markup) {
 9 |             assert.equal(markup, '<div>Hello world!</div>');
10 |             done();
11 |         });
12 |     });
13 |     it('should render hello world with custom component', function (done) {
14 |         React.renderToStaticMarkup(<HelloComponent />, function (err, markup) {
15 |             assert.equal(markup, '<div>Hello world!</div>');
16 |             done();
17 |         });
18 |     });
19 |     it('should render hello world with create class', function (done) {
20 |         React.renderToStaticMarkup(<HelloCreateClass />, function (err, markup) {
21 |             assert.equal(markup, '<div>Hello world!</div>');
22 |             done();
23 |         });
24 |     });
25 |     it('should render nested hello world', function (done) {
26 |         React.renderToStaticMarkup(
27 |             <HelloComponent>
28 |                 <HelloComponent />
29 |             </HelloComponent>
30 |         , function (err, markup) {
31 |             assert.equal(markup, '<div><div>Hello world!</div></div>');
32 |             done();
33 |         });
34 |     });
35 |     it('should render multi hello world', function (done) {
36 |         React.renderToStaticMarkup(
37 |             <ul>
38 |                 <li><HelloComponent /></li>
39 |                 <li><HelloComponent /></li>
40 |             </ul>
41 |             , function (err, markup) {
42 |                 assert.equal(markup, '<ul><li><div>Hello world!</div></li><li><div>Hello world!</div></li></ul>');
43 |                 done();
44 |             });
45 |     });
46 |     it('should render multi mixed children', function (done) {
47 |         React.renderToStaticMarkup(<div>Hello <span>world!</span></div>, function (err, markup) {
48 |             assert.equal(markup, '<div>Hello <span>world!</span></div>');
49 |             done();
50 |         });
51 |     });
52 |     it('should render nested multi hello world', function (done) {
53 |         React.renderToStaticMarkup(
54 |             <HelloComponent>
55 |                 <HelloComponent />
56 |                 <HelloComponent />
57 |             </HelloComponent>
58 |             , function (err, markup) {
59 |                 assert.equal(markup, '<div><div>Hello world!</div><div>Hello world!</div></div>');
60 |                 done();
61 |             });
62 |     });
63 |     it('should render hello world with props', function (done) {
64 |         React.renderToStaticMarkup(<HelloComponent id="foo" />, function (err, markup) {
65 |             assert.equal(markup, '<div id="foo">Hello world!</div>');
66 |             done();
67 |         });
68 |     });
69 | });
70 | 


--------------------------------------------------------------------------------
/tests/unit/native.js:
--------------------------------------------------------------------------------
 1 | var assert = require('assert');
 2 | var React = require('../../dist/react-server.dev');
 3 | 
 4 | describe('Native Components', function () {
 5 |     //it('should render button', function (done) {
 6 |     //    React.renderToStaticMarkup(<textarea id="foo" />, function (err, markup) {
 7 |     //        assert.equal(markup, '<textarea id="foo"></textarea>');
 8 |     //        done();
 9 |     //    });
10 |     //});
11 |     //it('should render form', function (done) {
12 |     //    React.renderToStaticMarkup(<textarea id="foo" />, function (err, markup) {
13 |     //        assert.equal(markup, '<textarea id="foo"></textarea>');
14 |     //        done();
15 |     //    });
16 |     //});
17 |     //it('should render iframe', function (done) {
18 |     //    React.renderToStaticMarkup(<textarea id="foo" />, function (err, markup) {
19 |     //        assert.equal(markup, '<textarea id="foo"></textarea>');
20 |     //        done();
21 |     //    });
22 |     //});
23 |     //it('should render img', function (done) {
24 |     //    React.renderToStaticMarkup(<textarea id="foo" />, function (err, markup) {
25 |     //        assert.equal(markup, '<textarea id="foo"></textarea>');
26 |     //        done();
27 |     //    });
28 |     //});
29 |     //it('should render input', function (done) {
30 |     //    React.renderToStaticMarkup(<textarea id="foo" />, function (err, markup) {
31 |     //        assert.equal(markup, '<textarea id="foo"></textarea>');
32 |     //        done();
33 |     //    });
34 |     //});
35 |     //it('should render option', function (done) {
36 |     //    React.renderToStaticMarkup(<textarea id="foo" />, function (err, markup) {
37 |     //        assert.equal(markup, '<textarea id="foo"></textarea>');
38 |     //        done();
39 |     //    });
40 |     //});
41 |     //it('should render select', function (done) {
42 |     //    React.renderToStaticMarkup(<textarea id="foo" />, function (err, markup) {
43 |     //        assert.equal(markup, '<textarea id="foo"></textarea>');
44 |     //        done();
45 |     //    });
46 |     //});
47 |     it('should render textarea', function (done) {
48 |         React.renderToStaticMarkup(
49 |             <textarea className="message-composer" name="message" value="" />,
50 |             function (err, markup) {
51 |                 assert.equal(markup, '<textarea class="message-composer" name="message">\n</textarea>');
52 |                 done();
53 |             }
54 |         );
55 |     });
56 |     //it('should render text', function (done) {
57 |     //    React.renderToStaticMarkup(<textarea id="foo" />, function (err, markup) {
58 |     //        assert.equal(markup, '<textarea id="foo"></textarea>');
59 |     //        done();
60 |     //    });
61 |     //});
62 | });
63 | 


--------------------------------------------------------------------------------
/tests/unit/stateful.js:
--------------------------------------------------------------------------------
 1 | var assert = require('assert');
 2 | var React = require('../../index');
 3 | var StatefulComponentNoInitialState = React.createClass({
 4 |     componentWillMount: function () {
 5 |         this.setState({
 6 |             foo: 'baz'
 7 |         });
 8 |     },
 9 |     render: function () {
10 |         return <div>{this.state.foo}</div>;
11 |     }
12 | });
13 | var StatefulComponent = React.createClass({
14 |     getInitialState: function () {
15 |         return {
16 |             foo: 'bar'
17 |         };
18 |     },
19 |     componentWillMount: function () {
20 |         this.setState({
21 |             foo: 'baz'
22 |         });
23 |     },
24 |     render: function () {
25 |         return <div>{this.state.foo}</div>;
26 |     }
27 | });
28 | 
29 | describe('StateFul', function () {
30 |     it('should render with updated state', function (done) {
31 |         React.renderToStaticMarkup(<StatefulComponent />, function (err, markup) {
32 |             assert.equal(markup, '<div>baz</div>');
33 |             done();
34 |         });
35 |     });
36 |     it('should render without initial state', function (done) {
37 |         React.renderToStaticMarkup(<StatefulComponentNoInitialState />, function (err, markup) {
38 |             assert.equal(markup, '<div>baz</div>');
39 |             done();
40 |         });
41 |     });
42 | });
43 | 


--------------------------------------------------------------------------------
/utils/renderAppWithFreshReact.js:
--------------------------------------------------------------------------------
 1 | var mockery = require('mockery');
 2 | var PromiseLib = require('es6-promise').Promise;
 3 | 
 4 | module.exports = function renderAppWithFreshReact(reactPath, appPath, statePath) {
 5 |     return new PromiseLib(function (resolve, reject) {
 6 |         mockery.enable({
 7 |             useCleanCache: true,
 8 |             warnOnUnregistered: false,
 9 |             warnOnReplace: true
10 |         });
11 |         var state = require(statePath);
12 |         var React = require(reactPath);
13 |         mockery.registerMock('react', React);
14 |         mockery.registerMock('react/addons', React);
15 |         var app = require(appPath);
16 |         app.rehydrate(state).then(function (context) {
17 |             var markup = React.renderToStaticMarkup(context.createElement());
18 |             mockery.deregisterAll();
19 |             mockery.resetCache();
20 |             mockery.disable();
21 |             resolve({
22 |                 context: context,
23 |                 React: React,
24 |                 markup: markup
25 |             });
26 |         }).catch(reject);
27 |     });
28 | };
29 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var webpack = require('webpack');
 2 | 
 3 | module.exports = {
 4 |     entry: './index.js',
 5 |     output: {
 6 |         library: "React",
 7 |         libraryTarget: "umd",
 8 |         path: __dirname + '/dist'
 9 |     },
10 |     module: {
11 |         loaders: [
12 |             { test: /\.(js)$/, exclude: /node_modules/, loader: require.resolve('babel-loader') }
13 |         ]
14 |     },
15 |     plugins: [
16 |         new webpack.DefinePlugin({
17 |             'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production')
18 |         })
19 |     ]
20 | };
21 | 


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