Merge branch 'master' into feature/redux

kriasoft · malmax · Apr 16, 2016 · Apr 16, 2016 · Apr 18, 2016 · Apr 21, 2016
commit f448fbe6736a25e34001896560a8b767d8df52d7
diff --git a/package.json b/package.json
@@ -32,10 +32,10 @@
     "passport": "^0.3.2",
     "passport-facebook": "^2.1.1",
     "pretty-error": "^2.1.0",
-    "prop-types": "^15.5.6",
-    "query-string": "^4.3.2",
-    "react": "^15.5.3",
-    "react-dom": "^15.5.3",
+    "prop-types": "^15.5.8",
+    "query-string": "^4.3.4",
+    "react": "^15.5.4",
+    "react-dom": "^15.5.4",
     "react-redux": "^5.0.4",
     "redux": "^3.6.0",
     "redux-logger": "^3.0.1",

diff --git a/src/client.js b/src/client.js
@@ -13,9 +13,11 @@ import FastClick from 'fastclick';
 import queryString from 'query-string';
 import { createPath } from 'history/PathUtils';
 import App from './components/App';
+import createFetch from './createFetch';
 import configureStore from './store/configureStore';
-import { updateMeta } from './core/DOMUtils';
-import { ErrorReporter, deepForceUpdate } from './core/devUtils';
+import history from './history';
+import { updateMeta } from './DOMUtils';
+import { ErrorReporter, deepForceUpdate } from './devUtils';
 
 /* eslint-disable global-require */
 
@@ -29,9 +31,14 @@ const context = {
     const removeCss = styles.map(x => x._insertCss());
     return () => { removeCss.forEach(f => f()); };
   },
+  // Universal HTTP client
+  fetch: createFetch({
+    baseUrl: window.App.apiUrl,
+  }),
   // Initialize a new Redux store
   // http://redux.js.org/docs/basics/UsageWithReact.html
-  store: configureStore(window.APP_STATE, { history }),
+  store: configureStore(window.App.state, { history }),
+  storeSubscription: null,
 };
 
 // Switch off the native scroll restoration behavior and handle it manually
@@ -113,7 +120,6 @@ async function onLocationChange(location, action) {
       ...context,
       path: location.pathname,
       query: queryString.parse(location.search),
-      fetch: context.fetch,
     });
 
     // Prevent multiple page renders during the routing process

diff --git a/src/components/App.js b/src/components/App.js
@@ -7,20 +7,19 @@
  * LICENSE.txt file in the root directory of this source tree.
  */
 
-import React, { Children } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
+import { Provider as ReduxProvider } from 'react-redux';
 
 const ContextType = {
   // Enables critical path CSS rendering
   // https://github.com/kriasoft/isomorphic-style-loader
   insertCss: PropTypes.func.isRequired,
+  // Universal HTTP client
+  fetch: PropTypes.func.isRequired,
   // Integrate Redux
   // http://redux.js.org/docs/basics/UsageWithReact.html
-  store: PropTypes.shape({
-    subscribe: PropTypes.func.isRequired,
-    dispatch: PropTypes.func.isRequired,
-    getState: PropTypes.func.isRequired,
-  }).isRequired,
+  ...ReduxProvider.childContextTypes,
 };
 
 /**
@@ -61,7 +60,7 @@ class App extends React.PureComponent {
   render() {
     // NOTE: If you need to add or modify header, footer etc. of the app,
     // please do that inside the Layout component.
-    return Children.only(this.props.children);
+    return React.Children.only(this.props.children);
   }
 
 }

diff --git a/src/components/Html.js b/src/components/Html.js
@@ -10,7 +10,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import serialize from 'serialize-javascript';
-import { analytics } from '../config';
+import config from '../config';
+
+/* eslint-disable react/no-danger */
 
 class Html extends React.Component {
   static propTypes = {
@@ -21,19 +23,17 @@ class Html extends React.Component {
       cssText: PropTypes.string.isRequired,
     }).isRequired),
     scripts: PropTypes.arrayOf(PropTypes.string.isRequired),
-    // eslint-disable-next-line react/forbid-prop-types
-    state: PropTypes.object,
+    app: PropTypes.object, // eslint-disable-line
     children: PropTypes.string.isRequired,
   };
 
   static defaultProps = {
     styles: [],
     scripts: [],
-    state: null,
   };
 
   render() {
-    const { title, description, styles, scripts, state, children } = this.props;
+    const { title, description, styles, scripts, app, children } = this.props;
     return (
       <html className="no-js" lang="en">
         <head>
@@ -52,18 +52,8 @@ class Html extends React.Component {
           )}
         </head>
         <body>
-          <div
-            id="app"
-            // eslint-disable-next-line react/no-danger
-            dangerouslySetInnerHTML={{ __html: children }}
-          />
-          {state && (
-            <script
-              // eslint-disable-next-line react/no-danger
-              dangerouslySetInnerHTML={{ __html:
-              `window.APP_STATE=${serialize(state, { isJSON: true })}` }}
-            />
-          )}
+          <div id="app" dangerouslySetInnerHTML={{ __html: children }} />
+          <script dangerouslySetInnerHTML={{ __html: `window.App=${serialize(app)}` }} />
           {scripts.map(script => <script key={script} src={script} />)}
           {config.analytics.googleTrackingId &&
             <script

diff --git a/src/server.js b/src/server.js
@@ -29,7 +29,7 @@ import schema from './data/schema';
 import assets from './assets.json'; // eslint-disable-line import/no-unresolved
 import configureStore from './store/configureStore';
 import { setRuntimeVariable } from './actions/runtime';
-import { port, auth } from './config';
+import config from './config';
 
 const app = express();
 
@@ -100,19 +100,27 @@ app.use('/graphql', expressGraphQL(req => ({
 // -----------------------------------------------------------------------------
 app.get('*', async (req, res, next) => {
   try {
-    const store = configureStore({
-      user: req.user || null,
-    }, {
+    const css = new Set();
+
+    const fetch = createFetch({
+      baseUrl: config.api.serverUrl,
       cookie: req.headers.cookie,
     });
 
+    const initialState = {
+      user: req.user || null,
+    };
+
+    const store = configureStore(initialState, {
+      fetch,
+      // I should not use `history` on server.. but how I do redirection? follow universal-router
+    });
+
     store.dispatch(setRuntimeVariable({
       name: 'initialNow',
       value: Date.now(),
     }));
 
-    const css = new Set();
-
     // Global (context) variables that can be easily accessed from any React component
     // https://facebook.github.io/react/docs/context.html
     const context = {
@@ -122,16 +130,17 @@ app.get('*', async (req, res, next) => {
         // eslint-disable-next-line no-underscore-dangle
         styles.forEach(style => css.add(style._getCss()));
       },
-      // Initialize a new Redux store
-      // http://redux.js.org/docs/basics/UsageWithReact.html
+      fetch,
+      // You can access redux through react-redux connect
       store,
+      storeSubscription: null,
     };
 
     const route = await router.resolve({
-      ...context,
       path: req.path,
       query: req.query,
-      fetch: context.fetch,
+      fetch,
+      store,
     });
 
     if (route.redirect) {
@@ -140,20 +149,24 @@ app.get('*', async (req, res, next) => {
     }
 
     const data = { ...route };
-    data.children = ReactDOM.renderToString(<App context={context}>{route.component}</App>);
+    data.children = ReactDOM.renderToString(
+      <App context={context} store={store}>
+        {route.component}
+      </App>,
+    );
     data.styles = [
       { id: 'css', cssText: [...css].join('') },
     ];
     data.scripts = [
       assets.vendor.js,
       assets.client.js,
     ];
-    data.state = context.store.getState();
     if (assets[route.chunk]) {
       data.scripts.push(assets[route.chunk].js);
     }
     data.app = {
       apiUrl: config.api.clientUrl,
+      state: context.store.getState(),
     };
 
     const html = ReactDOM.renderToStaticMarkup(<Html {...data} />);

diff --git a/src/store/createHelpers.js b/src/store/createHelpers.js
@@ -1,6 +1,4 @@
-import fetch from '../core/fetch';
-
-function createGraphqlRequest(fetchKnowingCookie) {
+function createGraphqlRequest(fetch) {
   return async function graphqlRequest(query, variables) {
     const fetchConfig = {
       method: 'post',
@@ -11,41 +9,16 @@ function createGraphqlRequest(fetchKnowingCookie) {
       body: JSON.stringify({ query, variables }),
       credentials: 'include',
     };
-    const resp = await fetchKnowingCookie('/graphql', fetchConfig);
+    const resp = await fetch('/graphql', fetchConfig);
     if (resp.status !== 200) throw new Error(resp.statusText);
     return resp.json();
   };
 }
 
-function createFetchKnowingCookie({ cookie }) {
-  if (!process.env.BROWSER) {
-    return (url, options = {}) => {
-      const isLocalUrl = /^\/($|[^/])/.test(url);
-
-      // pass cookie only for itself.
-      // We can't know cookies for other sites BTW
-      if (isLocalUrl && options.credentials === 'include') {
-        const headers = {
-          ...options.headers,
-          cookie,
-        };
-        return fetch(url, { ...options, headers });
-      }
-
-      return fetch(url, options);
-    };
-  }
-
-  return fetch;
-}
-
-export default function createHelpers(config) {
-  const fetchKnowingCookie = createFetchKnowingCookie(config);
-  const graphqlRequest = createGraphqlRequest(fetchKnowingCookie);
-
+export default function createHelpers({ fetch, history }) {
   return {
-    fetch: fetchKnowingCookie,
-    graphqlRequest,
-    history: config.history,
+    fetch,
+    history,
+    graphqlRequest: createGraphqlRequest(fetch),
   };
 }
diff --git a/yarn.lock b/yarn.lock
@@ -4118,7 +4118,7 @@ lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
 
-lodash@4.12.0:
+lodash@4.12.0, lodash@^4.2.0, lodash@^4.2.1:
   version "4.12.0"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.12.0.tgz#2bd6dc46a040f59e686c972ed21d93dc59053258"
 
@@ -4130,7 +4130,7 @@ lodash@^3.10.1:
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
 
-lodash@^4.0.0, lodash@^4.1.0, lodash@^4.14.0, lodash@^4.17.2, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.5.1, lodash@^4.6.1:
+lodash@^4.0.0, lodash@^4.1.0, lodash@^4.14.0, lodash@^4.17.2, lodash@^4.17.4, lodash@^4.3.0, lodash@^4.5.1, lodash@^4.6.1:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
 
@@ -5391,7 +5391,7 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.0.0, prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.7, prop-types@~15.5.7:
+prop-types@^15.0.0, prop-types@^15.5.4, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@~15.5.7:
   version "15.5.8"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.8.tgz#6b7b2e141083be38c8595aa51fc55775c7199394"
   dependencies:
@@ -5550,7 +5550,7 @@ react-redux@^5.0.4:
     loose-envify "^1.1.0"
     prop-types "^15.0.0"
 
-react@^15.5.3:
+react@^15.5.4:
   version "15.5.4"
   resolved "https://registry.yarnpkg.com/react/-/react-15.5.4.tgz#fa83eb01506ab237cdc1c8c3b1cea8de012bf047"
   dependencies: