chore(examples): make it an isomorphic app

tomchentw · May 1, 2015 · 931aaab · 931aaab
1 parent f74ee5a
commit 931aaab
Show file tree

Hide file tree

Showing 10 changed files with 291 additions and 37 deletions.
diff --git a/.gitignore b/.gitignore
@@ -42,5 +42,6 @@ node_modules
 .module-cache
 bower_components
 public/assets
+public/tmp
 public/index.html
 public/*.gz
diff --git a/examples/gh-pages/IsomorphicReactPluginFactory.js b/examples/gh-pages/IsomorphicReactPluginFactory.js
@@ -0,0 +1,145 @@
+"use strict";
+
+var React = require("react");
+var evaluate = require("eval");
+
+var SEPERATOR = "----------------------------------------";// 40 chars
+
+function IsomorphicReactPluginFactory (_options_) {
+  var options = _options_ || {};
+  this.serverComponentPath = options.serverComponentPath;
+  this.serverMarkupPath = options.serverMarkupPath;
+  this.htmlOutputPath = options.htmlOutputPath;
+
+  if ("string" !== typeof options.htmlDoctype) {
+    options.htmlDoctype = "<!DOCTYPE html>";
+  }
+  this.htmlDoctype = options.htmlDoctype;
+
+  var evaluateOptions = this.evaluateOptions = options.evaluateOptions || {};
+  if (false !== evaluateOptions.includeGlobals) {
+    evaluateOptions.includeGlobals = true;
+  }
+
+  return {
+    clientPlugin: new ClientPlugin(this),
+    serverPlugin: new ServerPlugin(this),
+  };
+}
+
+IsomorphicReactPluginFactory.prototype.receivedClientAssets = function (clientAssets) {
+  this.clientAssets = clientAssets;
+  if (this.serverAssets) {
+    this.runCompilation();
+  }
+}
+
+IsomorphicReactPluginFactory.prototype.receivedServerEmit = function (serverAssets, done) {
+  this.serverAssets = serverAssets;
+  this.done = done;
+  if (this.clientAssets) {
+    this.runCompilation();
+  }
+}
+
+IsomorphicReactPluginFactory.prototype.evaluate = function (serverPath, errorMessage) {
+  var serverAsset = this.serverAssets[serverPath];
+  if (undefined === serverAsset) {
+    throw new Error(errorMessage + ": \"" + serverPath + "\"");
+  }
+
+  var source = serverAsset.source();
+  var includeGlobals = this.evaluateOptions.includeGlobals;
+
+  try {
+    return evaluate(source, includeGlobals);
+  } catch (error) {
+    error.message = serverPath + "\n" + SEPERATOR + SEPERATOR + error.message;
+    error.stack = error.stack + "\n" + SEPERATOR + SEPERATOR + source + "\n" + SEPERATOR + SEPERATOR;
+    throw error;
+  }
+}
+
+IsomorphicReactPluginFactory.prototype.runCompilation = function () {
+  var error;
+
+  try {
+    var ServerComponent = this.evaluate(this.serverComponentPath, "Component for server rendering is missing");
+    var componentString = React.renderToString(React.createElement(ServerComponent));
+
+    var MarkupComponent = this.evaluate(this.serverMarkupPath, "Component for markup generation is missing");
+    var htmlString = React.renderToStaticMarkup(
+      React.createElement(MarkupComponent, {
+        componentString: componentString,
+        clientAssets: this.clientAssets,
+      })
+    );
+
+    this.serverAssets[this.htmlOutputPath] = createAssetFromContents(
+      this.htmlDoctype + htmlString
+    );
+
+  } catch (_error_) {
+    error = _error_;
+  }
+  this.done(error);
+}
+
+function ClientPlugin (isomorphicReactPluginFactory) {
+  this.pluginFactory = isomorphicReactPluginFactory;
+}
+
+ClientPlugin.prototype.apply = function (compiler) {
+  compiler.plugin("emit", (function (compilation, done) {
+    var assets = getAssetsFromCompilation(compilation);
+
+    this.pluginFactory.receivedClientAssets(assets);
+
+    done();
+  }).bind(this));
+}
+
+function ServerPlugin (isomorphicReactPluginFactory) {
+  this.pluginFactory = isomorphicReactPluginFactory;
+}
+
+ServerPlugin.prototype.apply = function (compiler) {
+  compiler.plugin("emit", (function (compilation, done) {
+
+    this.pluginFactory.receivedServerEmit(compilation.assets, done);
+  }).bind(this));
+}
+
+module.exports = IsomorphicReactPluginFactory;
+
+// Shamelessly stolen from html-webpack-plugin - Thanks @ampedandwired :)
+function getAssetsFromCompilation (compiler) {
+  var assets = {};
+  var webpackStatsJson = compiler.getStats().toJson();
+  for (var chunk in webpackStatsJson.assetsByChunkName) {
+    var chunkValue = webpackStatsJson.assetsByChunkName[chunk];
+
+    // Webpack outputs an array for each chunk when using sourcemaps
+    if (chunkValue instanceof Array) {
+      // Is the main bundle always the first element?
+      chunkValue = chunkValue[0];
+    }
+
+    if (compiler.options.output.publicPath) {
+      chunkValue = compiler.options.output.publicPath + chunkValue;
+    }
+    assets[chunk] = chunkValue;
+  }
+  return assets;
+}
+
+function createAssetFromContents(contents) {
+  return {
+    source: function() {
+      return contents;
+    },
+    size: function() {
+      return contents.length;
+    }
+  };
+}
diff --git a/examples/gh-pages/index.html b/examples/gh-pages/index.html
diff --git a/examples/gh-pages/package.json b/examples/gh-pages/package.json
@@ -2,15 +2,17 @@
   "name": "gh-pages",
   "version": "1.0.0",
   "scripts": {
-    "build_client": "webpack -p",
-    "dev": "webpack && webpack-dev-server --inline --hot --content-base ../../public"
+    "clean": "rm -f ../../public/index.html && rm -rf ../../public/assets && rm -rf ../../public/tmp",
+    "build_client": "npm run clean && webpack -p",
+    "dev": "npm run clean && webpack-dev-server --content-base ../../public"
   },
-   "devDependencies": {
+  "devDependencies": {
     "babel-core": "^5.1.13",
     "babel-loader": "^5.0.0",
     "bootstrap-sass": "^3.3.4",
     "classnames": "^1.2.1",
     "css-loader": "^0.12.0",
+    "eval": "^0.1.0",
     "file-loader": "^0.8.1",
     "github-fork-ribbon-css": "git+https://github.com/tomchentw/github-fork-ribbon-css.git#gh-pages",
     "html-webpack-plugin": "^1.1.0",

diff --git a/examples/gh-pages/scripts/ReactRoot.js b/examples/gh-pages/scripts/ReactRoot.js
@@ -134,8 +134,12 @@ const ALL_ACTIONS = ACTIONS.concat(DROPDOWN_ACTIONS.filter((x) => { return !!x;
 const ReactRoot = React.createClass({
 
   getInitialState () {
-    var hash = location.hash || ACTIONS[0].path,
-        action = ALL_ACTIONS.filter((action) => { return action.path === hash; })[0];
+    const location = (
+      "undefined" !== typeof window && location || {
+      }
+    );
+    const hash = location.hash || ACTIONS[0].path;
+    const action = ALL_ACTIONS.filter((action) => { return action.path === hash; })[0];
 
     return {
       action: action,

diff --git a/examples/gh-pages/scripts/components/GettingStarted.js b/examples/gh-pages/scripts/components/GettingStarted.js
@@ -68,7 +68,7 @@ const GettingStarted = React.createClass({
         ref="map"
         googleMapsApi={googleMapsApi}
         zoom={3}
-        center={new google.maps.LatLng(-25.363882, 131.044922)}
+        center={{lat: -25.363882, lng: 131.044922}}
         onClick={this._handle_map_click}>
         {state.markers.map(toMarker, this)}
       </GoogleMaps>
@@ -88,7 +88,9 @@ const GettingStarted = React.createClass({
 export default React.createClass({
   render () {
     return (
-      <GettingStarted googleMapsApi={google.maps} {...this.props} />
+      <GettingStarted googleMapsApi={
+        "undefined" !== typeof google ? google.maps : null
+      } {...this.props} />
     );
   }
 });
diff --git a/examples/gh-pages/scripts/components/basics/Geolocation.js b/examples/gh-pages/scripts/components/basics/Geolocation.js
@@ -1,13 +1,14 @@
 import React from "react/addons";
 import {GoogleMaps, Circle, InfoWindow} from "react-google-maps";
 
-var {geolocation} = navigator;
+const geolocation = (
+  "undefined" !== typeof window && navigator && navigator.geolocation || {
+    getCurrentPosition: (success, failure) => {
+      failure("Your browser doesn't support geolocation.");
+    },
+  }
+);
 
-if (!geolocation) {
-  geolocation = {
-    getCurrentPosition: (success, failure) => { failure("Your browser doesn't support geolocation."); }
-  };
-}
 /*
  * https://developers.google.com/maps/documentation/javascript/examples/map-geolocation
  */

diff --git a/examples/gh-pages/scripts/html.js b/examples/gh-pages/scripts/html.js
@@ -0,0 +1,32 @@
+import React from "react/addons";
+
+const {PropTypes} = React;
+
+const ReactHtml = React.createClass({
+
+  propTypes: {
+    componentString: PropTypes.string.isRequired,
+    clientAssets: PropTypes.object.isRequired,
+  },
+
+  render () {
+    const {props, state} = this,
+          {clientAssets} = props;
+
+    return (
+      <html>
+        <head>
+          <title>React Google Maps | tomchentw</title>
+          <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp" />
+          <script type="text/javascript" src="prism.min.js" />
+        </head>
+        <body>
+          <div id="react-container" dangerouslySetInnerHTML={{__html: props.componentString}}/>
+          <script type="text/javascript" src={clientAssets["assets/main"]} />
+        </body>
+      </html>
+    );
+  }
+});
+
+export default ReactHtml;
diff --git a/examples/gh-pages/scripts/server.js b/examples/gh-pages/scripts/server.js
@@ -0,0 +1,5 @@
+import React from "react/addons";
+
+import ReactRoot from "./ReactRoot";
+
+export default ReactRoot;