├── .babelrc
├── .gitignore
├── .npmignore
├── LICENSE
├── README.md
├── package.json
├── src
    ├── ComponentData.js
    ├── Resolver.js
    ├── resolveRecursive.js
    ├── resolveSimple.js
    └── script.js
└── webpack.config.js


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["es2015", "react"]
3 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | npm-debug.log
4 | lib
5 | index.js
6 | recursive.js


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gragland/react-component-data/788397f133e4d327e074689f17b3f8e47abdaf2e/.npmignore


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


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # 🍯 React Component Data
  2 | 
  3 | Data fetching for server-rendered React applications. Components declare the data they'd like to receive as props. Plays nicely with React Router.
  4 | 
  5 | ## Usage
  6 | 
  7 | Install the package:
  8 | 
  9 | ```bash
 10 | $ npm install react-component-data --save 
 11 | ```
 12 | 
 13 | ### Component
 14 | 
 15 | The only change you need to make to your component is to give it a `getData()` static method which returns an object containing the props that it would like to receive. On server-side render (and subsequent client-side render/re-hydration) your component will get those props on its initial mount. If a component is not rendered server-side its props will be fetched asyncronously and you can manage your component's loading state however you wish.
 16 | 
 17 |      
 18 | ```jsx
 19 | import React from 'react';
 20 |     
 21 | class Component extends React.Component {
 22 | 
 23 |   static async getData(){
 24 |     const response = await fetchGithubRepos('gragland');
 25 |     return { projects: response.data };
 26 |   }
 27 |       
 28 |   static defaultProps = { projects: null };
 29 | 
 30 |   render() { 
 31 |     const projects = this.props.projects;
 32 | 
 33 |     { projects ? 
 34 |       <ProjectsList projects={projects} />
 35 |     :
 36 |       <LoadingSpinner />
 37 |     }
 38 |   }
 39 | }
 40 | ```    
 41 |   
 42 | 
 43 | If you don't use async/await just return a Promise.
 44 | ```jsx
 45 | static getData(){
 46 |   return new Promise((resolve, reject) => {
 47 |     fetchGithubRepos('gragland')
 48 |     .then((response) => {
 49 |       resolve({ projects: response.data });
 50 |     });
 51 |   });
 52 | }
 53 | ```    
 54 |  We'll continue to use async/await in our examples but keep in mind that you can use standard Promises instead.
 55 | 
 56 |   
 57 | ### Server
 58 | On the server-side you use `resolve()` to fetch your component's data and then pass the resulting data object as a prop to `<ComponentData>`.
 59 | 
 60 | ```jsx
 61 | import React from 'react';
 62 | import { renderToStaticMarkup, renderToString } from 'react-dom/server';
 63 | import ComponentData, { resolve } from 'react-component-data';
 64 | import Layout from './Layout.js';
 65 | import App from './App.js';
 66 | 
 67 | express()
 68 | .get('/', async function (req, res) {
 69 | 
 70 |   const data = await resolve(App);
 71 | 
 72 |   const body = renderToString( 
 73 |     <ComponentData data={data}>
 74 |       <App /> 
 75 |     </ComponentData>
 76 |   );
 77 | 
 78 |   res.send(
 79 |     renderToStaticMarkup( <Layout body={body} /> )
 80 |   );
 81 | 
 82 | }).listen( ... );
 83 | ```
 84 | ### Server (w/ React Router)
 85 | 
 86 | ```jsx
 87 | import React from 'react';
 88 | import { renderToStaticMarkup, renderToString } from 'react-dom/server';
 89 | import { match, RouterContext } from 'react-router';
 90 | import ComponentData, { resolve } from 'react-component-data'; 
 91 | import routes from './routes.js';
 92 | import Layout from './Layout.js';
 93 | 
 94 | express()
 95 | .use((req, res, next) => {
 96 |   match(
 97 |     { routes: routes, location: req.url }, 
 98 |     async (error, redirectLocation, renderProps) => {
 99 | 
100 |       const data = await resolve(RouterContext, renderProps);
101 | 
102 |       const body = renderToString( 
103 |         <ComponentData data={data}>
104 |           <RouterContext {...renderProps} /> 
105 |         </ComponentData>
106 |       );
107 | 
108 |       res.send(
109 |         renderToStaticMarkup( <Layout body={body} /> )
110 |       );
111 |     }
112 |  );
113 | }).listen( ... );
114 | ```    
115 | ### Entry
116 | ```jsx
117 | import React from 'react';
118 | import ReactDOM from 'react-dom';
119 | import ComponentData from 'react-component-data';
120 | import App from './App.js';
121 | 
122 | ReactDOM.render(
123 |   <ComponentData>
124 |     <App />
125 |   </ComponentData>,
126 |   document.getElementById('app')
127 | );
128 | ```
129 |  
130 | 
131 | 
132 | ### Entry (w/ React Router)
133 | ```jsx
134 | import React from 'react';
135 | import ReactDOM from 'react-dom';
136 | import { Router, browserHistory } from 'react-router';
137 | import ComponentData from 'react-component-data';
138 | import routes from './routes';
139 | 
140 | ReactDOM.render(
141 |   <ComponentData>
142 |     <Router history={browserHistory} routes={routes} />
143 |   </ComponentData>,
144 |   document.getElementById('app')
145 | );
146 | ```
147 | 
148 | 
149 | 
150 | ### 🌀 Recursive Resolve (experimental)
151 | If you have nested components with data dependencies then you can use the recursive resolve method. Rather then just resolve data for the top level component (or route component when used with React Router), it will recursively iterate through your entire component tree, resolving each component's data dependency and calling its componentWillMount lifecycle method before moving farther down the tree. 
152 | ```jsx   
153 | import ComponentData, { resolve } from 'react-component-data/recursive';
154 | ```
155 | 
156 | Usage is exactly the same as in the examples above, except that you'll also need to wrap each nested component that expects data with our `withData() `Higher Order Component like so:
157 | ```jsx
158 | import { withData } from 'react-component-data';
159 | 
160 | class NestedComponent extends React.Component { 
161 |   ...
162 | }
163 | 
164 | export default withData(NestedComponent);
165 | ```  
166 |  
167 | ## Demo
168 | <a href="https://unsplash.now.sh">unsplash.now.sh</a> ([source](https://github.com/gragland/unsplash-demo))
169 |   
170 | ## Acknowledgements
171 | 
172 | - Inspired by the very awesome [Next.js](https://github.com/zeit/next.js) framework by [▲ZEIT](https://zeit.co/).
173 | - Much of the recursive resolver code was gratiously copied from the [React Apollo](https://github.com/apollostack/react-apollo) project.
174 | 
175 |     
176 |     
177 | 
178 | 
179 | 
180 | 
181 | 
182 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-component-data",
 3 |   "version": "0.1.2",
 4 |   "description": "React Component Data",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "build": "npm run build-library && npm run build-library-recursive",
 8 |     "build-library": "NODE_ENV=production TYPE=library webpack --config webpack.config.js",
 9 |     "build-library-recursive": "NODE_ENV=production TYPE=library RECURSIVE=1 webpack --config webpack.config.js",
10 |     "build-script": "NODE_ENV=production TYPE=script webpack --config webpack.config.js",
11 |     "prepublish": "npm run build"
12 |   },
13 |   "peerDependencies": {
14 |     "react": ">=0.12.0 <16.0.0"
15 |   },
16 |   "devDependencies": {
17 |     "babel-core": "6.18.2",
18 |     "babel-loader": "6.2.8",
19 |     "babel-preset-es2015": "6.18.0",
20 |     "babel-preset-react": "6.16.0",
21 |     "webpack": "^1.14.0"
22 |   },
23 |   "dependencies": {
24 |     "lodash": "^4.17.2",
25 |     "object-assign": "^4.1.0",
26 |     "promise-polyfill": "^6.0.2"
27 |   },
28 |   "repository": {
29 |     "type": "git",
30 |     "url": "git://github.com/gragland/react-component-data"
31 |   },
32 |   "author": "Gabe Ragland <gabe.ragland@gmail.com>",
33 |   "license": "MIT",
34 |   "bugs": {
35 |     "url": "https://github.com/gragland/react-component-data/issues"
36 |   },
37 |   "keywords": [],
38 |   "homepage": "https://github.com/gragland/react-component-data"
39 | }
40 | 


--------------------------------------------------------------------------------
/src/ComponentData.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { Resolver } from './Resolver.js';
  3 | import { getScript, getScriptData, isClient } from './script.js';
  4 | 
  5 | /* 
  6 |   - Handles passing of data down the tree and re-hydration between server and client
  7 |   - Wraps child with <Resolver> which mediates getting data from this component via context or fetching it directly if not available ...
  8 |   - Or if child is React Router it adds the createElement hook to Router so that route components always get wrapped with <Resolver>
  9 |   - When rendered on the server:
 10 |     - Saves props.data to state and makes it available via context for <Resolver> components
 11 |     - Renders a <script> tag to the DOM that contains props.data (for client-side re-hydration)
 12 |   - When rendered on the client:
 13 |     - Gets <script> data from DOM (before DOM gets wiped by client-side render)
 14 |     - Saves <script> data to state and makes it available via context for <Resolver> components
 15 | */
 16 | 
 17 | class ComponentData extends React.PureComponent {
 18 | 
 19 |   constructor(props, context){
 20 |     super(props);
 21 | 
 22 |     this.state = {
 23 |       data: null
 24 |     };
 25 |   }
 26 | 
 27 |   getChildContext () {
 28 |     return {
 29 |       method: this.props.method,
 30 |       data: this.state.data,
 31 |       time: this.state.time
 32 |     };
 33 |   }
 34 | 
 35 |   componentWillMount(){
 36 |     let data;
 37 |     let time;
 38 | 
 39 |     // If client-side grab <script> data from DOM before it's wiped clean
 40 |     // This way we don't have to require that the library user add the <script> tag themself
 41 |     if (isClient()){
 42 |       data = getScriptData();
 43 | 
 44 |       const d = new Date();
 45 |       time = d.getTime();
 46 | 
 47 |     // If server-side then we expect all data to be passed in as a prop
 48 |     }else{
 49 |       data = this.props.data;
 50 |     }
 51 | 
 52 |     if (data){
 53 |       this.setState({ 
 54 |         data: data,
 55 |         time: time
 56 |       });
 57 |     }
 58 |   }
 59 | 
 60 |   render(){
 61 | 
 62 |     const { data } = this.state;
 63 | 
 64 |     const { children } = this.props;
 65 |     const Child = React.Children.only(children);
 66 | 
 67 |     let NewChild;
 68 | 
 69 |     if (Child.type.displayName === 'Router' || Child.type.displayName === 'RouterContext'){
 70 |       NewChild = React.cloneElement(Child, { createElement: routerCreateElement() });
 71 |     }else{
 72 |       NewChild = wrapWithResolver(Child.type, Child.props);
 73 |     }
 74 | 
 75 |     return (
 76 |       <span>
 77 |         {NewChild}
 78 |         { data && 
 79 |           <span>{getScript(data)}</span> 
 80 |         }
 81 |       </span>
 82 |     );
 83 |   }
 84 | };
 85 | 
 86 | ComponentData.childContextTypes = {
 87 |   method: React.PropTypes.string,
 88 |   data: React.PropTypes.object,
 89 |   time: React.PropTypes.number
 90 | };
 91 | 
 92 | ComponentData.defaultProps = {
 93 |   method: 'getData',
 94 |   data: null
 95 | }
 96 | 
 97 | // Value for React Router createElement prop
 98 | // We use location key so that Resolver re-mounts on route change
 99 | function routerCreateElement() {
100 |   return function(Component, props) {
101 |     return wrapWithResolver(Component, props, props.location.key);
102 |   }
103 | }
104 | 
105 | function wrapWithResolver(WrappedComponent, props, key){
106 |   return (
107 |     <Resolver key={key} mainComponent={true}>
108 |       <WrappedComponent {...props} />
109 |     </Resolver>
110 |   );
111 | }
112 | 
113 | // HOC (added manually to nested components)
114 | // TODO: Merge with wrapWithResolver()
115 | const withData = (WrappedComponent) => {
116 |   return (props, context) => (
117 |     <Resolver>
118 |       <WrappedComponent {...props} />
119 |     </Resolver>
120 |   );
121 | }
122 | 
123 | 
124 | export { ComponentData, withData };
125 | 


--------------------------------------------------------------------------------
/src/Resolver.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { isClient } from './script.js';
  3 | 
  4 | // Tiny Promise polyfill
  5 | // Much smaller filesize then using async/await and transpiling
  6 | import Promise from 'promise-polyfill'; 
  7 | 
  8 | export class Resolver extends React.PureComponent {
  9 | 
 10 |   constructor(props, context){
 11 |     super(props);
 12 | 
 13 |     this.state = {
 14 |       propsForChild: null
 15 |     };
 16 | 
 17 |     this.log = this.log.bind(this);
 18 |     this.clientResolveFromComponent = this.clientResolveFromComponent.bind(this);
 19 |   }
 20 | 
 21 |   componentWillMount(){
 22 | 
 23 |     this.log('Mounted');
 24 | 
 25 |     let propsForChild;
 26 | 
 27 |     // Grab data object via context
 28 |     const data  = (this.context ? this.context.data : null);
 29 | 
 30 |     if (data){
 31 | 
 32 |       this.log('Have data via context', data);
 33 | 
 34 |       // Get props for the child component out of data
 35 |       propsForChild = this.getPropsFromData(data);
 36 | 
 37 |       if (propsForChild){
 38 |         this.log('Have props from data', propsForChild);
 39 |         this.setState({ propsForChild: propsForChild });
 40 |       }else{
 41 |         this.log('No props from data');
 42 |       }
 43 | 
 44 |     }else{
 45 | 
 46 |       this.log('No data via context');
 47 | 
 48 |     }
 49 | 
 50 |     // If we're client-size and don't have props then fetch them via child Component.method()
 51 |     if (!propsForChild && isClient()){
 52 |       this.clientResolveFromComponent()
 53 |       .then((propsForChild) => {
 54 |         if (propsForChild){
 55 |           this.log(`Resolved Component.${this.context.method}()`, propsForChild);
 56 |           this.setState({ propsForChild: propsForChild });
 57 |         }else{
 58 |           this.log(`Unable to resolve Component.${this.context.method}()`);
 59 |         }
 60 |       });
 61 |     }
 62 | 
 63 |   }
 64 | 
 65 |   getChildName(){
 66 |     const child = React.Children.only(this.props.children);
 67 |     return child.type.displayName;
 68 |   }
 69 | 
 70 |   log(message, object){
 71 | 
 72 |     if (process.env.NODE_ENV !== 'production'){
 73 | 
 74 |       const string = `[RESOLVER - ${this.getChildName()}] ${message}`;
 75 |       if (object && isClient()){
 76 |         console.log(string, object);
 77 |       }else{
 78 |         console.log(string);
 79 |       }
 80 | 
 81 |     }
 82 |   }
 83 | 
 84 |   getPropsFromData(data){
 85 |     let props;
 86 | 
 87 |     const { time } = this.context;
 88 | 
 89 |     const { mainComponent } = this.props;
 90 | 
 91 |     // If more then 0.5 seconds has passed since data was made available via ComponentData context then consider it expired.
 92 |     // Re-hydration should realistically take around 1/100th of a second
 93 |     // Kinda hacky but this prevents context data from being used when browsing to a new route
 94 |     // Once we have a reliable way to index data by a unique component id then this won't be needed ...
 95 |     // ... unless we still want to have data expire after a certain amount of time (such as when we browse to a new route and then back)
 96 |     const d = new Date();
 97 |     const currTime = d.getTime();
 98 |     if (currTime - time > 500){
 99 |       return null;
100 |     }
101 | 
102 |     // If data._resolverComponents exists that means we are using our recursive resolver
103 |     // All components data will be indexed by component displayName
104 |     // TODO: Figure out a better index (combine multiple object properties, maybe all props?)
105 |     if (data && data._resolverComponents){
106 | 
107 |       props = data._resolverComponents[this.getChildName()];
108 | 
109 |     // If not using our recursive resolver and this is the mainComponent.
110 |     // This prevents child components using our withData HOC from being given the same props as the main component ...
111 |     // ... and forces them to fetch their own data client-side. When recursive is off we don't ....
112 |     // ... index data by component.displayName so we need a way for child component to know it's not their data.
113 |     }else if (data && mainComponent === true){
114 |       props = data;
115 |     }else{
116 |       props = null;
117 |     }
118 | 
119 |     return props;
120 |   }
121 | 
122 |   // Call component's static method, save data to state, pass as props to child component
123 |   clientResolveFromComponent(){
124 |     const Component = React.Children.only(this.props.children);
125 |     // Check if method is implemented
126 |     if (Component.type[this.context.method]){
127 |       // Support a promise or standard object by wrapping in Promise.resolve
128 |       return Promise.resolve(Component.type[this.context.method]());
129 |     }else{
130 |       return Promise.resolve(null);
131 |     }
132 |   }
133 | 
134 |   render(){
135 | 
136 |     const { children } = this.props;
137 |     const { propsForChild } = this.state;
138 | 
139 |     const Component = React.Children.only(children);
140 | 
141 |     if (propsForChild){
142 |       const ComponentWithProps = React.cloneElement(Component, propsForChild);
143 |       // Adding a key so component remounts
144 |       // Easier because no need to implement componentWillReceiveProps
145 |       const ComponentWithKey = React.cloneElement(ComponentWithProps, { key: 'hasInitialProps' });
146 |       return ComponentWithKey;
147 |     }else{
148 |       return Component;
149 |     }
150 |   }
151 | }
152 | 
153 | Resolver.defaultProps = {
154 |   mainComponent: false
155 | }
156 | 
157 | Resolver.contextTypes = {
158 |   method: React.PropTypes.string,
159 |   data: React.PropTypes.object,
160 |   time: React.PropTypes.number
161 | }
162 | 
163 | 
164 | 


--------------------------------------------------------------------------------
/src/resolveRecursive.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import flattenDeep from 'lodash/flattendeep';
  3 | import assign from 'object-assign';
  4 | import { getScript } from './script.js';
  5 | import Promise from 'promise-polyfill'; 
  6 | 
  7 | // Recurse an React Element tree, running visitor on each element.
  8 | // If visitor returns `false`, don't call the element's render function
  9 | // or recurse into its child elements
 10 | function walkTree(element, context, mergeProps, visitor) {
 11 |   const Component = element.type;
 12 | 
 13 |   if (typeof Component === 'function') {
 14 | 
 15 |     const props = assign({}, Component.defaultProps, element.props, (mergeProps || {}));
 16 | 
 17 |     let childContext = context;
 18 |     let child;
 19 | 
 20 |     // Are we are a react class?
 21 |     // https://github.com/facebook/react/blob/master/src/renderers/shared/stack/reconciler/ReactCompositeComponent.js#L66
 22 |     if (Component.prototype && Component.prototype.isReactComponent) {
 23 | 
 24 |       const instance = new Component(props, context);
 25 | 
 26 |       // In case the user doesn't pass these to super in the constructor
 27 |       instance.props = instance.props || props;
 28 |       instance.context = instance.context || context;
 29 | 
 30 |    
 31 |       // Override setState to just change the state, not queue up an update.
 32 |       // We can't do the default React thing as we aren't mounted "properly"
 33 |       // however, we don't need to re-render as well only support setState in
 34 |       // componentWillMount, which happens *before* rendere.
 35 |       instance.setState = (newState) => {
 36 |         instance.state = assign({}, instance.state, newState);
 37 |       };
 38 | 
 39 |       // This is a poor man's version of
 40 |       // https://github.com/facebook/react/blob/master/src/renderers/shared/stack/reconciler/ReactCompositeComponent.js#L181
 41 |       if (instance.componentWillMount) {
 42 |         instance.componentWillMount();
 43 |       }
 44 | 
 45 |       if (instance.getChildContext) {
 46 |         childContext = assign({}, context, instance.getChildContext());
 47 |       }
 48 | 
 49 |       // Query we need to resolve first so stop traversing.
 50 |       if (visitor(element, instance, context) === false) {
 51 |         return;
 52 |       }
 53 | 
 54 |       child = instance.render();
 55 | 
 56 |     } else { // just a stateless functional
 57 | 
 58 |       // Query we need to resolve first so stop traversing.
 59 |       if (visitor(element, null, context) === false) {
 60 |         return;
 61 |       }
 62 | 
 63 |       child = Component(props, context);
 64 |     }
 65 | 
 66 | 
 67 |     if (child) {
 68 |       walkTree(child, childContext, null, visitor);
 69 |     }
 70 | 
 71 | 
 72 |   } else { // a basic string or dom element, just get children
 73 | 
 74 |     // Query we need to resolve first so stop traversing.
 75 |     if (visitor(element, null, context) === false) {
 76 |       return;
 77 |     }
 78 | 
 79 |     // Multiple children, traverse each one.
 80 |     if (element.props && element.props.children) {
 81 |       React.Children.forEach(element.props.children, (child) => {
 82 |         if (child) {
 83 |           walkTree(child, context, null, visitor);
 84 |         }
 85 |       });
 86 |     }
 87 |   }
 88 | }
 89 | 
 90 | function getQueriesFromTree(rootElement, rootContext, fetchRoot, mergeProps){
 91 | 
 92 |   const queries = [];
 93 | 
 94 |   const isStaticMethod = true;
 95 |   const methodName = 'getData';
 96 | 
 97 |   walkTree(rootElement, rootContext, mergeProps, (element, instance, context) => {
 98 | 
 99 |     // IMPORTANT: (element === rootElement) is what prevents this from being an endless loop
100 |     // visitor() calls where element is passed in and it's the same as walkTree rootElement don't do anything
101 |     // The ones that do something are the recursive walkTree within walkTree calls that then lead to new visitor() calls
102 |     // This is because this function as rootElement in it's scope (and receives element, instance, context) 
103 |     const skipRoot = !fetchRoot && (element === rootElement);
104 | 
105 |     if (skipRoot){
106 |       return;
107 |     }
108 | 
109 |     if ( (isStaticMethod && (element && element.type && typeof element.type[methodName] === 'function')) ||
110 |           (!isStaticMethod && instance && typeof instance[methodName] === 'function')){
111 | 
112 |       const query = ( isStaticMethod ? element.type[methodName]() : instance[methodName]() );
113 | 
114 |       if (query) {
115 |         queries.push({ query, element, context });
116 | 
117 |         // Tell walkTree to not recurse inside this component;  we will
118 |         // wait for the query to execute before attempting it.
119 |         return false;
120 |       }
121 |     }
122 |   });
123 | 
124 |   return queries;
125 | }
126 | 
127 | const finalData = {};
128 | 
129 | // XXX component Cache
130 | function getDataFromTree(rootElement, rootContext, fetchRoot, mergeProps, isTopLevel){
131 | 
132 |   //console.log(`Now searching element (${rootElement.type.name || rootElement.type.displayName}):`, rootElement);
133 | 
134 |   // Get array of queries (fetchData promises) from tree
135 |   // This will traverse down recursively looking for fetchData() methods
136 |   let queries = getQueriesFromTree(rootElement, rootContext, fetchRoot, mergeProps);
137 | 
138 |   // No queries found. We're done!
139 |   if (!queries.length) {
140 |     return Promise.resolve();
141 |   }
142 | 
143 |   // We've traversed down as far as possible in thecurrent tree branch ...
144 |   // Wait on each query that we found, re-rendering the subtree when it's done.
145 |   const mappedQueries = queries.map(({ query, element, context }) =>  {
146 |     return query.then((newProps) => {
147 |       const displayName = element.type.displayName;
148 | 
149 |       if (!displayName){
150 |         // TODO: Use Promise.reject and catch()
151 |         throw new Error('[React Component Data] When resolving component data recursively each component must have a displayName set.');
152 |       }
153 | 
154 |       // Add to finalData array that will be returned
155 |       finalData[displayName] = newProps;
156 |       // Traverse children
157 |       // Component will use newProps returned by the query so we can find any children it might have as a result
158 |       return getDataFromTree(element, context, false, newProps);
159 |     })
160 |   });
161 | 
162 |   return Promise.all(mappedQueries).then((values) => {
163 |     // Only return final data at top level
164 |     // Not inside recursive getDataFromTree calls
165 |     if (isTopLevel){
166 |       return finalData;
167 |     }
168 |   });
169 | }
170 | 
171 | 
172 | export function resolve(component, props){
173 | 
174 |   if (!component.prototype || !component.prototype.isReactComponent) {
175 |     throw new Error('[React Component Data] Resolve expects a valid react component');
176 |   }
177 | 
178 |   const element = React.createElement(component, props);
179 | 
180 |   return getDataFromTree(element, null, true, null, true)
181 |   .then((finalData) => {
182 | 
183 |     return (finalData ? { _resolverComponents: finalData } : null);
184 |   });
185 | }
186 | 


--------------------------------------------------------------------------------
/src/resolveSimple.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import Promise from 'promise-polyfill'; 
 3 | 
 4 | export function resolve(component, props) {
 5 | 
 6 |   const methodName = 'getData';
 7 | 
 8 |   if (!component.prototype || !component.prototype.isReactComponent) {
 9 |     throw new Error('[React Component Data] Resolve expects a valid react component');
10 |   }
11 | 
12 |   const element = React.createElement(component, props);
13 | 
14 |   // If it's a component then call its data method
15 |   if (element.type[methodName]){
16 |     return Promise.resolve(element.type[methodName]());
17 |   }
18 | 
19 |   if (!element.props.router){
20 |     throw new Error('resolve() expects a React component or a React Router renderProps object');
21 |   }
22 | 
23 |   const { components } = element.props;
24 | 
25 |   // Filter out null values
26 |   const valid = components.filter((component) => component);
27 | 
28 |   if (!valid){
29 |     return null;
30 |   } 
31 | 
32 |   // Get components that have the data method
33 |   const withFunction = valid.filter((component) => component[methodName]);
34 | 
35 |   if (!withFunction[0] || !withFunction[0][methodName]){
36 |     return null;
37 |   } 
38 | 
39 |   // Call the first component's data method
40 |   // In the future we can consider fetching data for nested components
41 |   return Promise.resolve(withFunction[0][methodName]());
42 | }


--------------------------------------------------------------------------------
/src/script.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | export function isClient(){
 4 |   return typeof window !== 'undefined';
 5 | }
 6 | 
 7 | export function getScript(data){
 8 |   return ( data && <script id='COMPONENT_DATA_PAYLOAD' type='application/json' dangerouslySetInnerHTML={{__html: safeStringify(data)}}></script> );
 9 | }
10 | 
11 | export function getScriptData(){
12 |   const payloadElement = document.getElementById('COMPONENT_DATA_PAYLOAD');
13 |   return (payloadElement ? JSON.parse(payloadElement.innerHTML) : null);
14 | }
15 | 
16 | function safeStringify(obj){
17 |   return (obj ? JSON.stringify(obj).replace(/<\/script/g, '<\\/script').replace(/<!--/g, '<\\!--') : null);
18 | }
19 | 
20 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const webpack = require('webpack');
 2 | 
 3 | const common = {
 4 |   entry: (process.env.RECURSIVE ? {
 5 |     recursive: './src/recursive.js'
 6 |   } : {
 7 |     index: './src/index.js'
 8 |   }),
 9 |   module: {
10 |     loaders: [
11 |       { 
12 |         test: /\.js$/, 
13 |         loaders: ['babel-loader'], 
14 |         include: __dirname + '/src'
15 |       }
16 |     ]
17 |   },
18 |   externals: {
19 |     'react': {
20 |       'root': 'React',
21 |       'commonjs2': 'react',
22 |       'commonjs': 'react',
23 |       'amd': 'react'
24 |     }
25 |   }
26 | };
27 | 
28 | // Build for npm package
29 | // Parent project should run any minification plugins
30 | const library = {
31 |   output: {
32 |     path: __dirname,
33 |     filename: '[name].js',
34 |     library: 'ReactComponentData',
35 |     libraryTarget: 'umd'
36 |   },
37 |   plugins: [
38 |     // So we know not to show console.log
39 |     new webpack.DefinePlugin({
40 |       'process.env': {
41 |         NODE_ENV: JSON.stringify('production')
42 |       }
43 |     })
44 |   ]
45 | }
46 | 
47 | // Build for script tag
48 | const script = {
49 |   output: {
50 |     path: __dirname + '/dist/',
51 |     filename: '[name].js',
52 |     library: 'ReactComponentData',
53 |     libraryTarget: 'umd'
54 |   },
55 |   plugins: [
56 |     new webpack.DefinePlugin({
57 |       'process.env': {
58 |         NODE_ENV: JSON.stringify('production')
59 |       }
60 |     })
61 |   ]
62 | }
63 | 
64 | let config;
65 | 
66 | if (process.env.TYPE === 'library'){
67 |   config = Object.assign(common, library);
68 | }else
69 | if (process.env.TYPE === 'script'){
70 |   config = Object.assign(common, script);
71 | }
72 | 
73 | module.exports = config;
74 | 


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