├── .gitignore
├── .jshintrc
├── .npmignore
├── CHANGELOG.md
├── LICENSE
├── Makefile
├── README.md
├── examples
    └── simple
    │   ├── client.js
    │   └── server.js
├── package.json
├── scripts
    └── register-babel.js
└── src
    ├── Async.js
    ├── AsyncComponent.js
    ├── __tests__
        ├── Async-browser-test.js
        ├── injectIntoMarkup-server-test.js
        └── renderToString-server-test.js
    ├── index.js
    ├── index.web.js
    ├── injectIntoMarkup.js
    └── renderToString.js


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


--------------------------------------------------------------------------------
/.jshintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "undef": true,
 3 |   "unused": "vars",
 4 |   "asi": true,
 5 |   "expr": true,
 6 |   "globalstrict": true,
 7 |   "globals": {
 8 |     "console": false,
 9 |     "window": false,
10 |     "require": false,
11 |     "module": false,
12 |     "exports": false
13 |   }
14 | }
15 | 


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


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
  1 | ## 3.0.0 (unreleased)
  2 | 
  3 |   - Rewrite React Async to consume observables instead of fetching state
  4 |     asynchronously.
  5 | 
  6 | ## 2.1.0
  7 | 
  8 |   - Support for React 0.13
  9 | 
 10 | ## 2.0.1
 11 | 
 12 |   - Bug fixes to make `isAsyncComponent()` not throw on DOM components.
 13 | 
 14 | ## 2.0.0
 15 | 
 16 |   - React Async is now compatible with React >= 0.12.0 only.
 17 | 
 18 |   - `ReactAsync.renderComponentToStringWithAsyncState` is renamed to
 19 |     `ReactAsync.renderToStringAsync`. The old name still works but issues a
 20 |     deprecation warning.
 21 | 
 22 | ## 1.0.2
 23 | 
 24 |   - Setting empty async state when getInitialStateAsync returns `false`
 25 | 
 26 | ## 1.0.1
 27 | 
 28 |   - Avoid setting an empty state (set `{}` in that case).
 29 | 
 30 | ## 1.0.0
 31 | 
 32 |   - Add support for returning promise from getInitialStateAsync.
 33 | 
 34 | ## 0.10.1
 35 | 
 36 |   - fix React.renderComponentToString inside Fiber but.
 37 | 
 38 | ## 0.10.0
 39 | 
 40 |   - support for React 0.11
 41 | 
 42 | ## 0.9.4
 43 | 
 44 |   - expose `<Preloaded />` component directly on `ReactAsync`.
 45 | 
 46 | ## 0.9.3
 47 | 
 48 |   - remove BaseMixin.componentWillReceiveProps so `asyncState` only takes effect
 49 |     during first render.
 50 | 
 51 | ## 0.9.2
 52 | 
 53 |   - escape unicode character in JSON data transfered from server to browser
 54 | 
 55 | ## 0.9.1
 56 | 
 57 |   - proper escaping for JSON data transfered from server to browser
 58 | 
 59 | ## 0.9.0
 60 | 
 61 |   - Preloaded component to defer rendering of async components unless their
 62 |     state is available.
 63 | 
 64 | ## 0.8.0
 65 | 
 66 |   - Hooks to serialize/deserialize async state — stateFromJSON/stateToJSON.
 67 | 
 68 | ## 0.7.0
 69 | 
 70 |   - Bump react dep to 0.10.0.
 71 | 
 72 | ## 0.6.1
 73 | 
 74 |   - Fix bug with updating injected state (via asyncState prop).
 75 | 
 76 | ## 0.6.0
 77 | 
 78 |   - Fibers are now optional, they are only needed if you want to pre-render
 79 |     React components by fetching async state recursively, e.g. using
 80 |     `ReactAsync.renderComponentToStringWithAsyncState`
 81 | 
 82 |   - `ReactAsync.createClass` is removed, use `React.createClass` with
 83 |     `ReactAsync.Mixin` mixin instead.
 84 | 
 85 |   - `ReactAsync.renderComponent` is removed, use `React.renderComponent`
 86 |     instead.
 87 | 
 88 |   - `ReactAsync.renderComponentToString` is renamed to
 89 |     `ReactAsync.renderComponentToStringWithAsyncState`
 90 | 
 91 |   - Add `ReactAsync.isAsyncComponent` to test if a component is an async
 92 |     component.
 93 | 
 94 |   - Add `ReactAsync.prefetchAsyncState` to prefetch state of an async component.
 95 | 
 96 | ## 0.5.1
 97 | 
 98 |   - Check if async component is still mounted before updating its state from and
 99 |     async call.
100 | 
101 | ## 0.5.0
102 | 
103 |   - `ReactAsync.renderComponentToString` now can accept callback w/ 3rd argument
104 |     `data`. In this case data will not be injected automatically into the
105 |     markup.
106 | 
107 |   - `ReactAsync.injectIntoMarkup(markup, data, scripts)` to inject data into
108 |     markup as JSON blob and a list of scripts (URLs) as <script> elements.
109 | 
110 | ## 0.4.0
111 | 
112 |   - Upgrade for React 0.9.0.
113 | 
114 |   - React is now a peer dependency of react-async.
115 | 


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


--------------------------------------------------------------------------------
/Makefile:
--------------------------------------------------------------------------------
 1 | BIN = ./node_modules/.bin
 2 | SRC = $(shell find src -name '*.js')
 3 | LIB = $(SRC:src/%=lib/%)
 4 | 
 5 | BABEL_OPTS = \
 6 | 	--stage 0
 7 | 
 8 | TEST_SUITES         = $(wildcard ./src/__tests__/*.js)
 9 | TEST_SUITES_COMMON  = $(filter-out %-browser-test.js %-server-test.js, $(TEST_SUITES))
10 | TEST_SUITES_BROWSER = $(filter %-browser-test.js, $(TEST_SUITES))
11 | TEST_SUITES_SERVER  = $(filter %-server-test.js, $(TEST_SUITES))
12 | 
13 | build: $(LIB)
14 | 
15 | example::
16 | 	@$(BIN)/babel-node $(BABEL_OPTS) ./example/server.js
17 | 
18 | install link:
19 | 	@npm $@
20 | 
21 | test:: test-server test-browser
22 | 
23 | test-server::
24 | 	@$(BIN)/mocha \
25 | 		-R dot \
26 | 		--compilers js:./scripts/register-babel \
27 | 		$(TEST_SUITES_COMMON) \
28 | 		$(TEST_SUITES_SERVER)
29 | 
30 | ci-server::
31 | 	@$(BIN)/mocha \
32 | 		--watch \
33 | 		-R dot \
34 | 		--compilers js:./scripts/register-babel \
35 | 		$(TEST_SUITES_COMMON) \
36 | 		$(TEST_SUITES_SERVER)
37 | 
38 | test-browser::
39 | 	@$(BIN)/mochify \
40 | 		--transform [ babelify $(BABEL_OPTS) ] \
41 | 		$(TEST_SUITES_COMMON) \
42 | 		$(TEST_SUITES_BROWSER)
43 | 
44 | ci-browser:: build
45 | 	@$(BIN)/mochify \
46 | 		--watch \
47 | 		--transform [ babelify $(BABEL_OPTS) ] \
48 | 		$(TEST_SUITES_COMMON:lib/%=./src/%) \
49 | 		$(TEST_SUITES_BROWSER:lib/%=./src/%)
50 | 
51 | release-patch: test lint
52 | 	@$(call release,patch)
53 | 
54 | release-minor: test lint
55 | 	@$(call release,minor)
56 | 
57 | release-major: test lint
58 | 	@$(call release,major)
59 | 
60 | publish:
61 | 	git push --tags origin HEAD:master
62 | 	npm publish
63 | 
64 | lib/%.js: src/%.js
65 | 	@echo "building $@"
66 | 	@mkdir -p $(@D)
67 | 	@$(BIN)/babel $(BABEL_OPTS) --source-maps-inline -o $@ $<
68 | 
69 | clean:
70 | 	@rm -f $(LIB)
71 | 
72 | define release
73 | 	npm version $(1)
74 | endef
75 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # React Async
 2 | 
 3 | **VERSION DESCRIBED IN THIS DOCUMENT IS NOT RELEASED YET**
 4 | 
 5 | React Async provides a way for React components to subscribe for observable
 6 | values.
 7 | 
 8 | ## Installation
 9 | 
10 | React Async is packaged on npm:
11 | ```sh
12 | $ npm install react-async
13 | ```
14 | 
15 | ## Basic usage
16 | 
17 | React Async provides a component decorator `@Async` which given a set of
18 | observable specifications wraps a regular React component and returns a new one
19 | which subscribes to observables and re-renders the component when new data
20 | arrives.
21 | 
22 | The basic example looks like:
23 | 
24 | ```js
25 | import React from 'react';
26 | import Async from 'react-async';
27 | import Rx from 'rx';
28 | 
29 | function defineXHRObservable(url) {
30 |   return {
31 |     id: url,
32 |     start() {
33 |       return Rx.fromPromise(fetch(url))
34 |     }
35 |   }
36 | }
37 | 
38 | function MyComponentObservables(props) {
39 |   return {
40 |     user: defineXHRObservable(`/api/user?user${props.userID}`)
41 |   }
42 | }
43 | 
44 | @Async(MyComponentObservables)
45 | class MyComponent extends React.Component {
46 | 
47 |   render() {
48 |     let {user} = this.props
49 |     ...
50 |   }
51 | 
52 | }
53 | ```
54 | 
55 | The `@Async` decorator injects data from observables via props so in `render()`
56 | method of `<MyComponent />` the `user` property will contain the data fetched
57 | via XHR.
58 | 
59 | ## Rendering async components on server with fetched async state
60 | 
61 | While React provides `renderToString(element)` function which can produce markup
62 | for a component, this function is synchronous. That means that it can't be used
63 | when you want to get markup from server populated with data.
64 | 
65 | React Async provides another version of `renderToString(element)` which is
66 | asynchronous and fetches all data defined in observable specifications before
67 | rendering a passed component tree.
68 | 
69 | First, you'd need to install `fibers` package from npm to use that function:
70 | ```sh
71 | $ npm install fibers
72 | ```
73 | 
74 | Then use it like:
75 | ```js
76 | import {renderToString} from 'react-async';
77 | 
78 | renderToString(
79 |   <Component />,
80 |   function(err, markup) {
81 |     // send markup to browser
82 |   })
83 | ```
84 | 
85 | This way allows you to have asynchronous components arbitrary deep in the
86 | hierarchy.
87 | 


--------------------------------------------------------------------------------
/examples/simple/client.js:
--------------------------------------------------------------------------------
  1 | import Promise from 'bluebird';
  2 | import React from 'react';
  3 | import axios from 'axios';
  4 | import ReactMount from 'react/lib/ReactMount';
  5 | import {Async} from '../../src';
  6 | import Rx from 'rx';
  7 | 
  8 | ReactMount.allowFullPageRender = true;
  9 | 
 10 | function get(url) {
 11 |   return {
 12 |     id: url,
 13 |     keepData: true,
 14 |     start() {
 15 |       return Rx.Observable.fromPromise(axios.get(url).then(response => response.data));
 16 |     }
 17 |   };
 18 | }
 19 | 
 20 | function AppObservables({name}) {
 21 |   return {
 22 |     message: get(`http://localhost:3000/api/message?name=${name}`)
 23 |   };
 24 | }
 25 | 
 26 | @Async(AppObservables)
 27 | class App extends React.Component {
 28 | 
 29 |   constructor(props) {
 30 |     super(props);
 31 |     this.state = {name: 'Andrey'};
 32 |   }
 33 | 
 34 |   componentDidMount() {
 35 |     Rx.Observable.interval(1000).forEach(() => {
 36 |       this.setState({name: this.state.name + 1});
 37 |     });
 38 |   }
 39 | 
 40 |   render() {
 41 |     let {message} = this.props;
 42 |     let {name} = this.state;
 43 |     return (
 44 |       <html>
 45 |         <head>
 46 |         </head>
 47 |         <body>
 48 |           <div>{message ? message.message : 'Loading...'}</div>
 49 |           <Nested name={this.state.name} />
 50 |           <Timer />
 51 |         </body>
 52 |       </html>
 53 |     );
 54 |   }
 55 | }
 56 | 
 57 | @Async
 58 | class Nested extends React.Component {
 59 | 
 60 |   static observe({name}) {
 61 |     return {
 62 |       message: get(`http://localhost:3000/api/message?name=${name}`)
 63 |     };
 64 |   }
 65 | 
 66 |   render() {
 67 |     let {message} = this.props;
 68 |     return <div>{message ? message.message : 'Loading...'}</div>
 69 |   }
 70 | }
 71 | 
 72 | @Async
 73 | class Timer extends React.Component {
 74 | 
 75 |   static observe() {
 76 |     return {
 77 |       count: {
 78 |         id: null,
 79 |         start(count) {
 80 |           // produce a new value each second
 81 |           let observable = Rx.Observable.interval(1000);
 82 |           // if we are resuming counting then shift by a previously computed
 83 |           // value on server
 84 |           if (count !== undefined) {
 85 |             return observable.map(x => x + count).startWith(count);
 86 |           } else {
 87 |             return observable;
 88 |           }
 89 |         }
 90 |       }
 91 |     };
 92 |   }
 93 | 
 94 |   render() {
 95 |     return <div>Count: {this.props.count}</div>;
 96 |   }
 97 | }
 98 | 
 99 | if (typeof window !== 'undefined') {
100 |   React.render(<App />, document);
101 | }
102 | 
103 | export default App;
104 | 


--------------------------------------------------------------------------------
/examples/simple/server.js:
--------------------------------------------------------------------------------
 1 | import express from 'express';
 2 | import browserify from 'connect-browserify';
 3 | import React from 'react';
 4 | import * as ReactAsync from '../../src';
 5 | import App from './client';
 6 | 
 7 | express()
 8 |   .get(
 9 |     '/bundle.js',
10 |     browserify({
11 |       entry: require.resolve('./client'),
12 |       debug: true,
13 |       watch: true,
14 |       transforms: [
15 |         ['babelify', {stage: 0, optional: 'runtime'}]
16 |       ]
17 |     }, {watch: true}))
18 |   .get('/', function(req, res, next) {
19 |     if (process.env.NO_PRERENDER) {
20 |       let markup = React.renderToString(<App />);
21 |       markup = ReactAsync.injectIntoMarkup(markup, {}, ['./bundle.js']);
22 |       res.send(markup);
23 |     } else {
24 |       ReactAsync.renderToString( <App />, function(err, markup, data) {
25 |         if (err) {
26 |           return next(err);
27 |         }
28 |         markup = ReactAsync.injectIntoMarkup(markup, data, ['./bundle.js']);
29 |         res.send(markup);
30 |       });
31 |     }
32 |   })
33 |   .get('/api/message', function(req, res) {
34 |     res.send({message: `Hello, ${req.query.name}`});
35 |   })
36 |   .listen(3000, function() {
37 |     console.log('Point your browser to http://localhost:3000');
38 |   });
39 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-async",
 3 |   "version": "3.0.0-dev",
 4 |   "description": "React components with async data fetching",
 5 |   "main": "lib/index.js",
 6 |   "browser": {
 7 |     "./lib/index.js": "./lib/index.web.js",
 8 |     "./src/index.js": "./src/index.web.js"
 9 |   },
10 |   "dependencies": {
11 |     "ascii-json": "~0.2.0"
12 |   },
13 |   "peerDependencies": {
14 |     "react": "^0.13.0"
15 |   },
16 |   "devDependencies": {
17 |     "axios": "^0.5.2",
18 |     "babel": "^5.0.8",
19 |     "babelify": "^6.0.1",
20 |     "bluebird": "^2.9.24",
21 |     "browserify": "^6.1.0",
22 |     "connect-browserify": "~3.2.1",
23 |     "express": "~4.9.8",
24 |     "fibers": "~1.0.1",
25 |     "mocha": "~1.21.5",
26 |     "mochify": "^1.4.0",
27 |     "phantomjs": "^1.9.11",
28 |     "react": "^0.13.0",
29 |     "rx": "^2.5.1",
30 |     "semver": "~4.1.0"
31 |   },
32 |   "scripts": {
33 |     "test": "make test"
34 |   },
35 |   "repository": {
36 |     "type": "git",
37 |     "url": "git://github.com/andreypopp/react-async"
38 |   },
39 |   "keywords": [
40 |     "react-component",
41 |     "async",
42 |     "server-rendering",
43 |     "isomorphic",
44 |     "react"
45 |   ],
46 |   "author": "Andrey Popp <8mayday@gmail.com>",
47 |   "license": "MIT",
48 |   "bugs": {
49 |     "url": "https://github.com/andreypopp/react-async/issues"
50 |   },
51 |   "homepage": "https://github.com/andreypopp/react-async"
52 | }
53 | 


--------------------------------------------------------------------------------
/scripts/register-babel.js:
--------------------------------------------------------------------------------
1 | require('babel/register')({stage: 0});
2 | 


--------------------------------------------------------------------------------
/src/Async.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @copyright 2015 Andrey Popp <8mayday@gmail.com>
 3 |  */
 4 | 
 5 | import React from 'react';
 6 | import invariant from 'react/lib/invariant';
 7 | import AsyncComponent from './AsyncComponent';
 8 | 
 9 | /**
10 |  * This is a component class decorator which receives a component class, an
11 |  * observable specification and returns a new component class which subscribes
12 |  * to observables and re-render the decorated component with data from
13 |  * observables injected via props.
14 |  *
15 |  * There are several syntaxes to call the decorator.
16 |  *
17 |  * ES7 class decorator syntax:
18 |  *
19 |  *    @Async(observe)
20 |  *    class Component extends React.Component {
21 |  *
22 |  *      ...
23 |  *    }
24 |  *
25 |  * ES7 class decorator syntax with observable specifications defined inline:
26 |  *
27 |  *    @Async
28 |  *    class Component extends React.Component {
29 |  *
30 |  *      static observe(props) {
31 |  *        ...
32 |  *      }
33 |  *    }
34 |  *
35 |  * ES6:
36 |  *
37 |  *    class Component extends React.Component {
38 |  *      ...
39 |  *    }
40 |  *    Component = Async(Component, observe)
41 |  *
42 |  * All three syntaxes result in an equivalent behaviour.
43 |  */
44 | export default function Async(obj, observe) {
45 |   if (obj && obj.prototype && typeof obj.prototype.render === 'function') {
46 |     if (observe === undefined) {
47 |       invariant(
48 |         typeof obj.observe === 'function',
49 |         'class should define static observe() method'
50 |       );
51 |       observe = obj.observe;
52 |     }
53 |     return decorateComponentClass(observe, obj);
54 |   } else {
55 |     return decorateComponentClass.bind(null, obj);
56 |   }
57 | }
58 | 
59 | function decorateComponentClass(observe, Component) {
60 |   return class extends AsyncComponent {
61 | 
62 |     constructor(props) {
63 |       super(props);
64 |     }
65 | 
66 |     static observe(props, state) {
67 |       return observe(props, state);
68 |     }
69 | 
70 |     render() {
71 |       let props = {...this.props};
72 |       for (let name in this.observed) {
73 |         if (this.observed.hasOwnProperty(name)) {
74 |           props[name] = this.observed[name].data;
75 |         }
76 |       }
77 |       return <Component {...props} />;
78 |     }
79 |   };
80 | }
81 | 


--------------------------------------------------------------------------------
/src/AsyncComponent.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @copyright 2015 Andrey Popp <8mayday@gmail.com>
  3 |  */
  4 | 
  5 | import React from 'react';
  6 | import ExecutionEnvironment from 'react/lib/ExecutionEnvironment';
  7 | import invariant from 'react/lib/invariant';
  8 | import emptyFunction from 'react/lib/emptyFunction';
  9 | 
 10 | let Fiber;
 11 | let Future;
 12 | let __require = require;
 13 | 
 14 | try {
 15 |   Fiber = __require('fibers');
 16 |   Future = __require('fibers/future');
 17 | } catch (err) {
 18 | 
 19 | }
 20 | 
 21 | const DUMMY_OBSERVABLE = {
 22 |   subscribe: emptyFunction
 23 | };
 24 | 
 25 | const DUMMY_SUBSCRIPTION = {
 26 |   dispose: emptyFunction
 27 | };
 28 | 
 29 | export default class AsyncComponent extends React.Component {
 30 | 
 31 |   static observe(props, state, context) {
 32 |     invariant(
 33 |       false,
 34 |       'AsyncComponent subclass should implement observe() class method'
 35 |     );
 36 |   }
 37 | 
 38 |   constructor(props) {
 39 |     super(props);
 40 |     this._skipObservedReconciliation = true;
 41 |     this.observed = null;
 42 |   }
 43 | 
 44 |   setState(nextState, cb) {
 45 |     this._skipObservedReconciliation = false;
 46 |     super.setState(nextState, cb);
 47 |   }
 48 | 
 49 |   componentWillMount() {
 50 |     this._startObservables(this.props, this.state, this.context);
 51 |   }
 52 | 
 53 |   componentWillReceiveProps() {
 54 |     this._skipObservedReconciliation = false;
 55 |   }
 56 | 
 57 |   componentWillUpdate(props, state, context) {
 58 |     if (!this._skipObservedReconciliation) {
 59 |       this._reconcileObservables(props, state, context);
 60 |     }
 61 |   }
 62 | 
 63 |   componentDidUpdate() {
 64 |     this._skipObservedReconciliation = true;
 65 |   }
 66 | 
 67 |   componentWillUnmount() {
 68 |     for (let name in this.observed) {
 69 |       this.observed[name].subscription.dispose();
 70 |     }
 71 |     this.observed = null;
 72 |   }
 73 | 
 74 |   _componentFingerprint() {
 75 |     let instance = this._reactInternalInstance;
 76 |     let rootNodeID = instance._rootNodeID;
 77 |     let mountDepth = 0;
 78 |     while (instance._currentElement._owner) {
 79 |       mountDepth += 1;
 80 |       instance = instance._currentElement._owner;
 81 |     }
 82 |     return `${rootNodeID}__${mountDepth}`;
 83 |   }
 84 | 
 85 |   _observe(props, state, context) {
 86 |     let observed = {...this.constructor.observe(props, state, context)};
 87 |     let names = Object.keys(observed);
 88 |     for (let i = 0; i < names.length; i++) {
 89 |       let name = names[i];
 90 |       let o = observed[names[i]];
 91 |       invariant(
 92 |         o && (o.id !== undefined && typeof o.start === 'function' ||
 93 |               typeof o.subscribe === 'function'),
 94 |         'observable description should be an observable or provide ' +
 95 |         'an object with "id" token and "start" function as properties, ' +
 96 |         'but %s observable description of %s component vioaltes this',
 97 |         name, this.constructor.name
 98 |       );
 99 |       if (o && typeof o.subscribe === 'function') {
100 |         let observable = o;
101 |         o = {
102 |           id: observable,
103 |           start() {
104 |             return observable;
105 |           }
106 |         };
107 |       }
108 |       observed[name] = o;
109 |     }
110 |     return observed;
111 |   }
112 | 
113 |   _startObservables(props, state, context) {
114 |     let fingerprint = this._componentFingerprint();
115 |     let shouldWaitForTick = (
116 |       Fiber !== undefined &&
117 |       Fiber.current !== undefined &&
118 |       Fiber.current.__reactAsyncDataPacket__ !== undefined
119 |     );
120 |     // we need to assign to this now because onNext can be synchronously called
121 |     this.observed = this._observe(props, state, context);
122 |     let nextNames = Object.keys(this.observed);
123 |     let storedObserved = retrieveObservedInfo(fingerprint);
124 |     for (let i = 0; i < nextNames.length; i++) {
125 |       let name = nextNames[i];
126 |       let next = this.observed[name];
127 |       let stored = storedObserved[name];
128 |       if (stored) {
129 |         next.id = stored.id;
130 |         next.data = stored.data;
131 |         next.completed = stored.completed;
132 |       }
133 |       if (shouldWaitForTick) {
134 |         next.observable = next.start();
135 |       } else if (ExecutionEnvironment.canUseDOM) {
136 |         if (!next.completed) {
137 |           next.observable = next.start(next.data);
138 |           next.subscription = next.observable.subscribe({
139 |             onNext: this._onNext.bind(this, name),
140 |             onCompleted: this._onCompleted.bind(this, name),
141 |             onError: this._onError.bind(this, name)
142 |           });
143 |         } else {
144 |           next.observable = DUMMY_OBSERVABLE;
145 |           next.subscription = DUMMY_SUBSCRIPTION;
146 |         }
147 |       }
148 |     }
149 | 
150 |     if (shouldWaitForTick) {
151 |       this.observed = waitForTick(this.observed);
152 |       storeObservedInfo(fingerprint, this.observed);
153 |     };
154 |   }
155 | 
156 |   _reconcileObservables(props, state, context) {
157 |     let prevObserved = this.observed;
158 |     this.observed = this._observe(props, state, context);
159 |     let prevNames = Object.keys(prevObserved);
160 |     let nextNames = Object.keys(this.observed);
161 | 
162 |     // reconcile new observed dictionary
163 |     for (let i = 0; i < nextNames.length; i++) {
164 |       let name = nextNames[i];
165 |       let prev = prevObserved[name];
166 |       let next = this.observed[name];
167 |       if (prev !== undefined && prev.id === next.id) {
168 |         this.observed[name] = prev;
169 |       } else {
170 |         prev.subscription.dispose();
171 |         next.observable = next.start();
172 |         next.subscription = next.observable.subscribe({
173 |           onNext: this._onNext.bind(this, name),
174 |           onCompleted: this._onCompleted.bind(this, name),
175 |           onError: this._onError.bind(this, name)
176 |         });
177 |         this.observed[name] = next;
178 |       }
179 |     }
180 | 
181 |     // cancel prev observed which were not mentioned in next observed
182 |     for (let i = 0; i < prevNames.length; i++) {
183 |       let name = prevNames[i];
184 |       if (nextNames.indexOf(name) === -1) {
185 |         prevObserved[prevName].subscription.dispose();
186 |       }
187 |     }
188 |   }
189 | 
190 |   _onNext(name, data) {
191 |     this.observed[name].data = data;
192 |     this.forceUpdate();
193 |   }
194 | 
195 |   _onCompleted(name) {
196 |     this.observed[name].subscription.dispose();
197 |   }
198 | 
199 |   _onError(name, err) {
200 |     // TODO: we need a way to propagate errors up back
201 |     console.error(`error in observable "${name}" of ${this.constructor.name} component`);
202 |     throw err;
203 |   }
204 | 
205 | }
206 | 
207 | function waitForTick(observed) {
208 |   let nextObserved = {};
209 |   let completed = {};
210 |   let futures = [];
211 |   for (let name in observed) {
212 |     let o = observed[name];
213 |     nextObserved[name] = {...o};
214 |     let future = waitForNext(name, o.observable, {
215 |       onNext(name, data) {
216 |         nextObserved[name].data = data;
217 |       },
218 |       onCompleted(name) {
219 |         nextObserved[name].completed = true;
220 |       },
221 |       onError(name, err) {
222 | 
223 |       }
224 |     });
225 |     futures.push(future);
226 |   }
227 |   Future.wait.apply(Future, futures);
228 |   return nextObserved;
229 | }
230 | 
231 | function waitForNext(name, observable, observer) {
232 |   let subscription;
233 |   let scheduled = false;
234 |   let makeFuture = Future.wrap((cb) => {
235 |     subscription = observable.subscribe({
236 |       onNext(data) {
237 |         observer.onNext(name, data);
238 |         // we defer resolution to next tick so onCompleted has a chance to
239 |         // execute
240 |         if (!scheduled) {
241 |           scheduled = true;
242 |           process.nextTick(function() {
243 |             cb(null);
244 |           });
245 |         };
246 |       },
247 |       onCompleted() {
248 |         observer.onCompleted(name);
249 |       },
250 |       onError(err) {
251 |         observer.onError(name, err);
252 |         if (!scheduled) {
253 |           scheduled = true;
254 |           cb(err);
255 |         };
256 |       }
257 |     });
258 |   })
259 |   let future = makeFuture();
260 |   future.resolve(function() {
261 |     subscription.dispose();
262 |   });
263 |   return future;
264 | }
265 | 
266 | function retrieveObservedInfo(key) {
267 |   if (!ExecutionEnvironment.canUseDOM || window.__reactAsyncDataPacket__ === undefined) {
268 |     return {};
269 |   } else {
270 |     return window.__reactAsyncDataPacket__[key] || {};
271 |   }
272 | }
273 | 
274 | function storeObservedInfo(key, observed) {
275 |   let packet = {};
276 |   for (let name in observed) {
277 |     let {id, data, completed} = observed[name];
278 |     completed = !!completed;
279 |     packet[name] = {id, data, completed};
280 |   }
281 |   Fiber.current.__reactAsyncDataPacket__[key] = packet;
282 | }
283 | 


--------------------------------------------------------------------------------
/src/__tests__/Async-browser-test.js:
--------------------------------------------------------------------------------
  1 | import assert from 'assert';
  2 | import React from 'react';
  3 | import TestUtils from 'react/lib/ReactTestUtils';
  4 | import Async from '../Async';
  5 | 
  6 | class SubscriptionMock {
  7 |   constructor() {
  8 |     this.disposed = false;
  9 |   }
 10 | 
 11 |   dispose() {
 12 |     this.disposed = true;
 13 |   }
 14 | }
 15 | 
 16 | class ObservableMock {
 17 | 
 18 |   constructor() {
 19 |     this.onNext = null;
 20 |     this.onError = null;
 21 |     this.onCompleted = null;
 22 |   }
 23 | 
 24 |   subscribe({onNext, onError, onCompleted}) {
 25 |     this.onNext = onNext;
 26 |     this.onError = onError;
 27 |     this.onCompleted = onCompleted;
 28 |     return new SubscriptionMock();
 29 |   }
 30 | }
 31 | 
 32 | function start() {
 33 |   return new ObservableMock();
 34 | }
 35 | 
 36 | function rerender(component, element) {
 37 |   let container = React.findDOMNode(component).parentNode;
 38 |   React.render(element, container);
 39 | }
 40 | 
 41 | function render(element) {
 42 |   return TestUtils.renderIntoDocument(element);
 43 | }
 44 | 
 45 | function unmount(component) {
 46 |   let container = React.findDOMNode(component).parentNode;
 47 |   React.unmountComponentAtNode(container);
 48 | }
 49 | 
 50 | describe('AsyncComponent (browser)', function() {
 51 | 
 52 |   let renderCount = 0;
 53 | 
 54 |   @Async
 55 |   class Component extends React.Component {
 56 | 
 57 |     static observe(props) {
 58 |       return {one: props.observable};
 59 |     }
 60 | 
 61 |     render() {
 62 |       renderCount += 1;
 63 |       return <div />;
 64 |     }
 65 |   }
 66 | 
 67 |   beforeEach(function() {
 68 |     renderCount = 0;
 69 |   });
 70 | 
 71 |   it('starts observables on componentWillMount', function() {
 72 |     let component = render(<Component observable={{id: 'id', start}} />);
 73 |     assert.ok(component.observed);
 74 |     assert.ok(component.observed.one);
 75 |     let observed = component.observed.one;
 76 |     assert.ok(observed.id, 'id');
 77 |     assert.ok(observed.observable);
 78 |     assert.ok(observed.subscription);
 79 |     assert.ok(!observed.subscription.disposed);
 80 |     assert.ok(observed.observable.onNext);
 81 |     assert.ok(observed.observable.onError);
 82 |   });
 83 | 
 84 |   it('subscribe to observables on componentWillMount', function() {
 85 |     let observable = new ObservableMock();
 86 |     let component = render(<Component observable={observable} />);
 87 |     assert.ok(component.observed);
 88 |     assert.ok(component.observed.one);
 89 |     let observed = component.observed.one;
 90 |     assert.ok(observed.id, 'id');
 91 |     assert.ok(observed.observable);
 92 |     assert.ok(observed.observable === observable);
 93 |     assert.ok(observed.subscription);
 94 |     assert.ok(!observed.subscription.disposed);
 95 |     assert.ok(observed.observable.onNext);
 96 |     assert.ok(observed.observable.onError);
 97 |   });
 98 | 
 99 |   it('disposes subscriptions on componentWillUnmount', function() {
100 |     let component = render(<Component observable={{id: 'id', start}} />);
101 |     let subscription = component.observed.one.subscription;
102 |     unmount(component);
103 |     assert.ok(subscription.disposed);
104 |   });
105 | 
106 |   it('disposes subscriptions when observable is completed', function() {
107 |     let component = render(<Component observable={{id: 'id', start}} />);
108 |     let {subscription, observable} = component.observed.one;
109 |     assert.ok(!subscription.disposed);
110 |     observable.onCompleted();
111 |     assert.ok(subscription.disposed);
112 |   });
113 | 
114 |   it('disposes subscriptions on componentWillUnmount (when observable passed)', function() {
115 |     let observable = new ObservableMock();
116 |     let component = render(<Component observable={observable} />);
117 |     let subscription = component.observed.one.subscription;
118 |     unmount(component);
119 |     assert.ok(subscription.disposed);
120 |   });
121 | 
122 |   it('disposes old observable and starts new on id change', function() {
123 |     let component = render(<Component observable={{id: 'id', start}} />);
124 |     let prevObserved = component.observed.one;
125 |     assert.ok(!prevObserved.subscription.disposed);
126 |     rerender(component, <Component observable={{id: 'id2', start}} />);
127 |     let nextObserved = component.observed.one;
128 |     assert.ok(prevObserved.subscription.disposed);
129 |     assert.ok(!nextObserved.subscription.disposed);
130 |     unmount(component);
131 |     assert.ok(prevObserved.subscription.disposed);
132 |     assert.ok(nextObserved.subscription.disposed);
133 |   });
134 | 
135 |   it('disposes an old observable and subscribe on a new one', function() {
136 |     let prevObservable = new ObservableMock();
137 |     let nextObservable = new ObservableMock();
138 |     let component = render(<Component observable={prevObservable} />);
139 |     let prevObserved = component.observed.one;
140 |     assert.ok(!prevObserved.subscription.disposed);
141 |     rerender(component, <Component observable={nextObservable} />);
142 |     let nextObserved = component.observed.one;
143 |     assert.ok(prevObserved.subscription.disposed);
144 |     assert.ok(!nextObserved.subscription.disposed);
145 |     unmount(component);
146 |     assert.ok(prevObserved.subscription.disposed);
147 |     assert.ok(nextObserved.subscription.disposed);
148 |   });
149 |   
150 |   it('keeps observable running if id does not change', function() {
151 |     let observable = new ObservableMock();
152 |     let component = render(<Component observable={{id: null, start}} />);
153 |     let prevObserved = component.observed.one;
154 |     assert.ok(!prevObserved.subscription.disposed);
155 |     rerender(component, <Component observable={{id: null, start}} />);
156 |     let nextObserved = component.observed.one;
157 |     assert.ok(!nextObserved.subscription.disposed);
158 |     assert.ok(!prevObserved.subscription.disposed);
159 |     assert.ok(nextObserved.observable === nextObserved.observable);
160 |     assert.ok(nextObserved.subscription === nextObserved.subscription);
161 |     unmount(component);
162 |     assert.ok(nextObserved.subscription.disposed);
163 |     assert.ok(prevObserved.subscription.disposed);
164 |   });
165 | 
166 |   it('keeps observable running if id does not change (observable passed)', function() {
167 |     let observable = new ObservableMock();
168 |     let component = render(<Component observable={observable} />);
169 |     let prevObserved = component.observed.one;
170 |     assert.ok(!prevObserved.subscription.disposed);
171 |     rerender(component, <Component observable={observable} />);
172 |     let nextObserved = component.observed.one;
173 |     assert.ok(!nextObserved.subscription.disposed);
174 |     assert.ok(!prevObserved.subscription.disposed);
175 |     assert.ok(nextObserved.observable === nextObserved.observable);
176 |     assert.ok(nextObserved.subscription === nextObserved.subscription);
177 |     unmount(component);
178 |     assert.ok(nextObserved.subscription.disposed);
179 |     assert.ok(prevObserved.subscription.disposed);
180 |   });
181 | 
182 |   it('re-renders if data comes out of observable', function() {
183 |     let component = render(<Component observable={{id: 'id', start}} />);
184 |     let observed = component.observed.one;
185 |     assert.equal(renderCount, 1);
186 |     observed.observable.onNext('data');
187 |     assert.equal(renderCount, 2);
188 |     observed.observable.onNext('data2');
189 |     assert.equal(renderCount, 3);
190 |     unmount(component);
191 |   });
192 | 
193 |   it('re-renders if data comes out of observable (observable passed)', function() {
194 |     let observable = new ObservableMock();
195 |     let component = render(<Component observable={observable} />);
196 |     let observed = component.observed.one;
197 |     assert.equal(renderCount, 1);
198 |     observed.observable.onNext('data');
199 |     assert.equal(renderCount, 2);
200 |     observed.observable.onNext('data2');
201 |     assert.equal(renderCount, 3);
202 |     unmount(component);
203 |   });
204 | 
205 |   it('stores last seen data in observable desc', function() {
206 |     let component = render(<Component observable={{id: 'id', start}} />);
207 |     let observed = component.observed.one;
208 |     assert.strictEqual(observed.data, undefined);
209 |     observed.observable.onNext('data');
210 |     assert.strictEqual(observed.data, 'data');
211 |     observed.observable.onNext('data2');
212 |     assert.strictEqual(observed.data, 'data2');
213 |     unmount(component);
214 |   });
215 | 
216 |   it('stores last seen data in observable desc (observable passed)', function() {
217 |     let observable = new ObservableMock();
218 |     let component = render(<Component observable={observable} />);
219 |     let observed = component.observed.one;
220 |     assert.strictEqual(observed.data, undefined);
221 |     observed.observable.onNext('data');
222 |     assert.strictEqual(observed.data, 'data');
223 |     observed.observable.onNext('data2');
224 |     assert.strictEqual(observed.data, 'data2');
225 |     unmount(component);
226 |   });
227 | 
228 | });
229 | 


--------------------------------------------------------------------------------
/src/__tests__/injectIntoMarkup-server-test.js:
--------------------------------------------------------------------------------
 1 | let assert                  = require('assert');
 2 | let ReactAsync              = require('../index');
 3 | 
 4 | describe('ReactAsync.injectIntoMarkup (server)', function() {
 5 | 
 6 |   let OLD_NODE_ENV;
 7 | 
 8 |   beforeEach(function() {
 9 |     OLD_NODE_ENV = process.env.NODE_ENV;
10 |     process.env.NODE_ENV = 'production';
11 |   });
12 | 
13 |   afterEach(function() {
14 |     process.env.NODE_ENV = OLD_NODE_ENV;
15 |   });
16 | 
17 |   it('injects data into markup', function() {
18 |     let data = {foo: 'bar'};
19 | 
20 |     let markup = '<html><head></head><body>This is an injection test</body>';
21 |     let injected = ReactAsync.injectIntoMarkup(markup, data);
22 | 
23 |     assert.ok(injected.indexOf('<script>window.__reactAsyncDataPacket__ = {"foo":"bar"}</script></body>') > -1);
24 |   })
25 | 
26 |   it('injects data and scripts into markup', function() {
27 |     let data = {foo: 'bar'};
28 |     let scripts = ['./a.js', './b.js'];
29 | 
30 |     let markup = '<html><head></head><body>This is another injection test</body>';
31 |     let injected = ReactAsync.injectIntoMarkup(markup, data, scripts);
32 | 
33 |     assert.ok(injected.indexOf('<script>window.__reactAsyncDataPacket__ = {"foo":"bar"}</script>') > -1)
34 |     assert.ok(injected.indexOf('<script src="./a.js"></script>') > -1)
35 |     assert.ok(injected.indexOf('<script src="./b.js"></script></body>') > -1)
36 |   });
37 | 
38 |   it('appends data and scipt to markup if it does not contain <body> element', function() {
39 |     let data = {foo: 'bar'};
40 |     let markup = '<div>hello</div>';
41 | 
42 |     let injected = ReactAsync.injectIntoMarkup(markup, data);
43 |     assert.ok(injected.indexOf(markup) > -1);
44 |     assert.ok(injected.indexOf('<script>window.__reactAsyncDataPacket__ = {"foo":"bar"}</script>') > -1);
45 |   });
46 | 
47 |   it('escapes HTML end tags in JSON before injecting into markup', function() {
48 |     let data = {foo: '<script></script>'};
49 |     let markup = '<html><head></head><body>Escape test</body>';
50 |     let injected = ReactAsync.injectIntoMarkup(markup, data);
51 |     assert.ok(injected.indexOf('<script><\\/script>') > -1);
52 |   });
53 | 
54 |   it('escapes non-ascii characters', function() {
55 |     let data = {foo: '☺'};
56 | 
57 |     let markup = '<html><head></head><body>This is an injection test</body>';
58 |     let injected = ReactAsync.injectIntoMarkup(markup, data);
59 | 
60 |     assert.ok(injected.indexOf('<script>window.__reactAsyncDataPacket__ = {"foo":"\\u263a"}</script></body>') > -1);
61 |   })
62 | });
63 | 


--------------------------------------------------------------------------------
/src/__tests__/renderToString-server-test.js:
--------------------------------------------------------------------------------
  1 | import assert from 'assert';
  2 | import Promise from 'bluebird';
  3 | import Rx from 'rx';
  4 | import React from 'react';
  5 | import Async, {renderToString} from '../';
  6 | 
  7 | function defineObservableValue(value) {
  8 |   return {
  9 |     id: null,
 10 |     start() {
 11 |       return Rx.Observable.fromPromise(Promise.delay(0).then(() => value));
 12 |     }
 13 |   };
 14 | }
 15 | 
 16 | describe('ReactAsync.renderToString (server)', function() {
 17 | 
 18 |   it('fetches data before rendering a component', function(done) {
 19 | 
 20 |     function observe() {
 21 |       return {message: defineObservableValue('hello')};
 22 |     }
 23 | 
 24 |     @Async(observe)
 25 |     class Component extends React.Component {
 26 | 
 27 |       render() {
 28 |         return <div className={this.props.className}>{this.props.message}</div>;
 29 |       }
 30 |     }
 31 | 
 32 |     renderToString(<Component />, function(err, markup, data) {
 33 |       if (err) {
 34 |         return done(err);
 35 |       }
 36 | 
 37 |       assert.ok(markup.indexOf('hello') > -1);
 38 |       assert.equal(Object.keys(data).length, 1)
 39 |       let id = Object.keys(data)[0];
 40 |       assert.ok(data[id]);
 41 |       assert.deepEqual(data[id], {message: {id: null, data: 'hello', completed: true}});
 42 |       done();
 43 |     });
 44 |   });
 45 | 
 46 |   it('fetches data before rendering a component with observe defined inline', function(done) {
 47 | 
 48 |     @Async
 49 |     class Component extends React.Component {
 50 | 
 51 |       static observe() {
 52 |         return {message: defineObservableValue('hello')};
 53 |       }
 54 | 
 55 |       render() {
 56 |         return <div className={this.props.className}>{this.props.message}</div>;
 57 |       }
 58 |     }
 59 | 
 60 |     renderToString(<Component />, function(err, markup, data) {
 61 |       if (err) {
 62 |         return done(err);
 63 |       }
 64 | 
 65 |       assert.ok(markup.indexOf('hello') > -1);
 66 |       assert.equal(Object.keys(data).length, 1)
 67 |       let id = Object.keys(data)[0];
 68 |       assert.ok(data[id]);
 69 |       assert.deepEqual(data[id], {message: {id: null, data: 'hello', completed: true}});
 70 |       done();
 71 |     });
 72 |   });
 73 | 
 74 |   it('fetches data before rendering a component defined with React.createClass', function(done) {
 75 | 
 76 |     function observe() {
 77 |       return {message: defineObservableValue('hello, legacy')};
 78 |     }
 79 | 
 80 |     let LegacyComponent = React.createClass({
 81 |       render() {
 82 |         return <div>{this.props.message}</div>;
 83 |       }
 84 |     });
 85 | 
 86 |     LegacyComponent = Async(LegacyComponent, observe);
 87 | 
 88 |     renderToString(<LegacyComponent />, function(err, markup, data) {
 89 |       if (err) {
 90 |         return done(err);
 91 |       }
 92 | 
 93 |       assert.ok(markup.indexOf('hello') > -1);
 94 |       assert.equal(Object.keys(data).length, 1)
 95 |       let id = Object.keys(data)[0];
 96 |       assert.ok(data[id]);
 97 |       assert.deepEqual(data[id], {message: {id: null, data: 'hello, legacy', completed: true}});
 98 |       done();
 99 |     });
100 |   });
101 | 
102 |   it('fetches data before rendering a component deep nested', function(done) {
103 | 
104 |     @Async
105 |     class Component extends React.Component {
106 |       static observe() {
107 |         return {message: defineObservableValue('hello')};
108 |       }
109 | 
110 |       render() {
111 |         return <div className={this.props.className}>{this.props.message}</div>;
112 |       }
113 |     }
114 | 
115 |     class Outer extends React.Component {
116 | 
117 |       render() {
118 |         return <Component />;
119 |       }
120 |     }
121 | 
122 |     renderToString(<Outer />, function(err, markup, data) {
123 |       if (err) {
124 |         return done(err);
125 |       }
126 | 
127 |       assert.ok(markup.indexOf('hello') > -1);
128 | 
129 |       assert.equal(Object.keys(data).length, 1)
130 |       let id = Object.keys(data)[0];
131 |       assert.ok(data[id]);
132 |       assert.deepEqual(data[id], {message: {id: null, data: 'hello', completed: true}});
133 | 
134 |       done();
135 |     });
136 |   });
137 | 
138 |   it('handles async components which have same root node id', function(done) {
139 | 
140 |     @Async
141 |     class Component extends React.Component {
142 | 
143 |       static observe() {
144 |         return {message: defineObservableValue('hello')};
145 |       }
146 | 
147 |       render() {
148 |         return <div className={this.props.className}>{this.props.message}</div>;
149 |       }
150 |     }
151 | 
152 |     @Async
153 |     class OuterAsync extends React.Component {
154 | 
155 |       static observe() {
156 |         return {className: defineObservableValue('outer')};
157 |       }
158 | 
159 |       render() {
160 |         return <Component className={this.props.className} />;
161 |       }
162 |     }
163 | 
164 |     renderToString(<OuterAsync />, function(err, markup, data) {
165 |       if (err) {
166 |         return done(err);
167 |       }
168 | 
169 |       assert.ok(markup.indexOf('hello') > -1);
170 |       assert.ok(markup.indexOf('outer') > -1);
171 | 
172 |       assert.equal(Object.keys(data).length, 2)
173 |       done();
174 |     });
175 |   });
176 | 
177 |   it('should automatically inject data when only two callback arguments are provided', function(done) {
178 | 
179 |     @Async
180 |     class Component extends React.Component {
181 | 
182 |       static observe() {
183 |         return {message: defineObservableValue('hello')};
184 |       }
185 | 
186 |       render() {
187 |         return <div>{this.props.message}</div>;
188 |       }
189 |     }
190 | 
191 |     renderToString(<Component />, function(err, markup) {
192 |       if (err) {
193 |         return done(err);
194 |       }
195 | 
196 |       assert.ok(markup.indexOf('hello') > -1);
197 |       assert.ok(markup.indexOf('<script>window.__reactAsyncDataPacket__ = {') > -1);
198 | 
199 |       done();
200 |     });
201 | 
202 |   })
203 | 
204 |   it('should not inject data when three callback arguments are provided', function(done) {
205 | 
206 |     @Async
207 |     class Component extends React.Component {
208 | 
209 |       static observe() {
210 |         return {message: defineObservableValue('hello')};
211 |       }
212 | 
213 |       render() {
214 |         return <div>{this.props.message}</div>;
215 |       }
216 |     }
217 | 
218 |     renderToString(<Component />, function(err, markup, data) {
219 |       if (err) {
220 |         return done(err);
221 |       }
222 | 
223 |       assert.ok(markup.indexOf('hello') > -1);
224 |       assert.ok(markup.indexOf('<script>window.__reactAsyncDataPacket__ = {') < 0);
225 | 
226 |       done();
227 |     });
228 | 
229 |   });
230 | 
231 | });
232 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @copyright 2015 Andrey Popp <8mayday@gmail.com>
 3 |  */
 4 | 
 5 | import Async from './Async';
 6 | import renderToString from './renderToString';
 7 | import injectIntoMarkup from './injectIntoMarkup';
 8 | 
 9 | export default Async;
10 | export {Async, renderToString, injectIntoMarkup};
11 | 


--------------------------------------------------------------------------------
/src/index.web.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @copyright 2015 Andrey Popp <8mayday@gmail.com>
 3 |  */
 4 | 
 5 | import invariant from 'react/lib/invariant';
 6 | import Async from './Async';
 7 | 
 8 | export default Async;
 9 | export {Async, renderToString, injectIntoMarkup};
10 | 
11 | function renderToString() {
12 |   invariant(
13 |     false,
14 |     'ReactAsync.renderToString(): this function can be used only in Node.js/Io.js execution environment'
15 |   );
16 | }
17 | 
18 | function injectIntoMarkup() {
19 |   invariant(
20 |     false,
21 |     'ReactAsync.injectIntoMarkup(): this function can be used only in Node.js/Io.js execution environment'
22 |   );
23 | }
24 | 


--------------------------------------------------------------------------------
/src/injectIntoMarkup.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @copyright 2015 Andrey Popp <8mayday@gmail.com>
 3 |  */
 4 | 
 5 | import {escapeNonAsciis} from 'ascii-json';
 6 | 
 7 | /**
 8 |  * Inject data and optional client scripts into markup.
 9 |  */
10 | export default function injectIntoMarkup(markup, data, scripts) {
11 |   let json = process.env.NODE_ENV === 'production' ?
12 |     JSON.stringify(data) :
13 |     JSON.stringify(data, null, 2);
14 |   let escapedJson = escapeNonAsciis(json).replace(/<\//g, '<\\/');
15 |   let injected = `<script>window.__reactAsyncDataPacket__ = ${escapedJson}</script>`;
16 | 
17 |   if (scripts) {
18 |     injected = injected + scripts
19 |       .map(script => `<script src="${script}"></script>`)
20 |       .join('');
21 |   }
22 | 
23 |   if (markup.indexOf('</body>') > -1) {
24 |     return markup.replace('</body>', injected + '$&');
25 |   } else {
26 |     return markup + injected;
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/src/renderToString.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @copyright 2015 Andrey Popp <8mayday@gmail.com>
 3 |  */
 4 | 
 5 | import React from 'react';
 6 | import invariant from 'react/lib/invariant';
 7 | import injectIntoMarkup from './injectIntoMarkup';
 8 | 
 9 | let Fiber;
10 | try {
11 |   Fiber = require('fibers');
12 | } catch(err) {
13 |   // do nothing
14 | }
15 | 
16 | /**
17 |  * An alternative async version of React.renderToString(<Element />) which
18 |  * fetches data for all async components recursively first.
19 |  */
20 | export default function renderToString(element, cb) {
21 |   invariant(
22 |     Fiber !== undefined,
23 |     'ReactAsync.renderToString(): cannot import "fibers" package, ' +
24 |     'you need to have it installed to use this function. ' +
25 |     'Install it by running the following command "npm install fibers" ' +
26 |     'in the project directory.'
27 |   );
28 | 
29 |   let fiber = Fiber(function() {
30 |     try {
31 |       Fiber.current.__reactAsyncDataPacket__ = {};
32 | 
33 |       let data = Fiber.current.__reactAsyncDataPacket__;
34 |       let markup = React.renderToString(element);
35 | 
36 |       // Inject data if callback doesn't receive the data argument
37 |       if (cb.length === 2) {
38 |         markup = injectIntoMarkup(markup, data);
39 |       }
40 | 
41 |       cb(null, markup, data);
42 |     } catch(e) {
43 |       cb(e);
44 |     } finally {
45 |       delete Fiber.current.__reactAsyncDataPacket__;
46 |     }
47 |   });
48 | 
49 |   fiber.run();
50 | }
51 | 


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