├── src
    ├── init.client.js
    ├── addons
    │   ├── tardis
    │   │   ├── bundles
    │   │   │   └── .gitignore
    │   │   ├── routes.jsx
    │   │   ├── components
    │   │   │   ├── Tardis.jsx
    │   │   │   └── TardisGallery.jsx
    │   │   ├── settings.default.js
    │   │   ├── styles.css
    │   │   └── TardisGallery.server.js
    │   └── utilities.js
    ├── nuclearDefinitions
    │   ├── stores
    │   │   ├── index.js
    │   │   ├── settings.js
    │   │   └── routerState.js
    │   ├── getters.js
    │   ├── actions.js
    │   └── index.js
    ├── babelBlacklist.js
    ├── defaults
    │   ├── styles
    │   │   ├── fonts.css
    │   │   ├── init.css
    │   │   └── react-native.css
    │   └── Scaffold.jsx
    ├── init.common.js
    ├── mixins
    │   ├── Settings.jsx
    │   ├── NuclearContext.jsx
    │   ├── SettingsContext.jsx
    │   ├── Title.jsx
    │   ├── Nuclear.jsx
    │   └── TitleContext.jsx
    ├── init.server.js
    ├── createHandlerWithAmbidexContext.jsx
    ├── render.client.js
    ├── createWebpackSettings.js
    └── Ambidex.server.js
├── .gitignore
├── .editorconfig
├── LICENSE.md
├── package.json
├── CHANGELOG.md
├── README.md
└── STYLE_GUIDE.md


/src/init.client.js:
--------------------------------------------------------------------------------
1 | module.exports = require("./init.common.js");
2 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | cache/
3 | .sass-cache/
4 | *.sublime-*
5 | npm-debug.log
6 | 


--------------------------------------------------------------------------------
/src/addons/tardis/bundles/.gitignore:
--------------------------------------------------------------------------------
1 | # Ignore everything in this directory
2 | *
3 | # Except this file
4 | !.gitignore
5 | 


--------------------------------------------------------------------------------
/src/nuclearDefinitions/stores/index.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   "routerState":  require("./routerState"),
3 |   "settings":     require("./settings"),
4 | };
5 | 


--------------------------------------------------------------------------------
/src/nuclearDefinitions/getters.js:
--------------------------------------------------------------------------------
1 | var routerState = ["routerState"];
2 | var settings    = ["settings"];
3 | 
4 | module.exports = {
5 |   routerState,
6 |   settings
7 | };
8 | 


--------------------------------------------------------------------------------
/src/nuclearDefinitions/actions.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   "simple":   [
3 |                 "loadSettings",
4 |                 "routerStateChanged",
5 |               ]
6 | };
7 | 


--------------------------------------------------------------------------------
/src/nuclearDefinitions/index.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   "simpleActions":  require("./actions").simple,
3 |   "stores":         require("./stores"),
4 |   "getters":        require("./getters"),
5 | };
6 | 


--------------------------------------------------------------------------------
/src/addons/tardis/routes.jsx:
--------------------------------------------------------------------------------
 1 | var React       = require("react/addons");
 2 | var ReactRouter = require("react-router");
 3 | 
 4 | var Route  = ReactRouter.Route;
 5 | 
 6 | module.exports =  <Route
 7 |                     path    = "/*"
 8 |                     handler = { require("./components/TardisGallery.jsx") }
 9 |                   />;
10 | 


--------------------------------------------------------------------------------
/src/babelBlacklist.js:
--------------------------------------------------------------------------------
1 | // Don't transpile the dependencies we know work with ES5.  Manually
2 | // blacklisting isn't super scalable, but it does allow developers to break
3 | // their codebases into modules easily without sweating JS versions.
4 | 
5 | module.exports = /node_modules\/(mach|react|babel|immutable|lazy\.js|webpack|socket.io|[\w\-]+\-loader\/)/;
6 | 


--------------------------------------------------------------------------------
/src/defaults/styles/fonts.css:
--------------------------------------------------------------------------------
1 | /*  Make Roboto (the font of Material Design and the Android UI) our default
2 |  *  font.                                                                   */
3 | 
4 | @import url("https://fonts.googleapis.com/css?family=Roboto:500,500italic,400,400italic,300,300italic|Roboto+Condensed:400");
5 | 
6 | body {
7 |   font-family:                  "Roboto", sans-serif;
8 | }
9 | 


--------------------------------------------------------------------------------
/src/nuclearDefinitions/stores/settings.js:
--------------------------------------------------------------------------------
 1 | var Immutable = require("immutable");
 2 | 
 3 | var settings = {
 4 |   "initialize":       function () {
 5 |                         this.on(
 6 |                           this.actions.loadSettings,
 7 | 
 8 |                           (lastValue, { settings }) => settings
 9 |                         );
10 |                       }
11 | };
12 | 
13 | module.exports = settings;
14 | 


--------------------------------------------------------------------------------
/src/init.common.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   "addons":         {
 3 |                       "utilities":    require("./addons/utilities.js"),
 4 |                     },
 5 | 
 6 |   "mixins":         {
 7 |                       "Nuclear":      require("./mixins/Nuclear.jsx"),
 8 |                       "Settings":     require("./mixins/Settings.jsx"),
 9 |                       "Title":        require("./mixins/Title.jsx"),
10 |                     },
11 | };
12 | 


--------------------------------------------------------------------------------
/src/nuclearDefinitions/stores/routerState.js:
--------------------------------------------------------------------------------
 1 | var Immutable = require("immutable");
 2 | 
 3 | var routerState = {
 4 |   "initialize":       function () {
 5 |                         this.on(
 6 |                           this.actions.routerStateChanged,
 7 | 
 8 |                           (lastValue, { routerState }) => Immutable.fromJS(routerState)
 9 |                         );
10 |                       }
11 | };
12 | 
13 | module.exports = routerState;
14 | 


--------------------------------------------------------------------------------
/src/defaults/styles/init.css:
--------------------------------------------------------------------------------
 1 | /*  React Native utilizes inline styles with flexbox for layout.  In the
 2 |  *  spirit of "Learn Once, Write Everywhere", Ambidex sets the same
 3 |  *  defaults as React Native for authors who use inline styles.
 4 |  *
 5 |  *  If you'd like to opt-out, just set settings.FILESYSTEM_PATHS["STYLES"]
 6 |  *  to a file you control.                                                  */
 7 | 
 8 | @import url("./fonts.css");
 9 | @import url("./react-native.css");
10 | 


--------------------------------------------------------------------------------
/src/mixins/Settings.jsx:
--------------------------------------------------------------------------------
 1 | var React = require("react/addons");
 2 | 
 3 | var SettingsMixin = {
 4 |   "contextTypes":               {
 5 |                                   "ambidexSettings":        React.PropTypes.object.isRequired,
 6 |                                 },
 7 | 
 8 |   "getAmbidexSettings":         function () {
 9 |                                   return this.context.ambidexSettings;
10 |                                 }
11 | };
12 | 
13 | module.exports = SettingsMixin;
14 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # EditorConfig helps developers define and maintain consistent
 2 | # coding styles between different editors and IDEs
 3 | # editorconfig.org
 4 | 
 5 | root = true
 6 | 
 7 | 
 8 | [*]
 9 | 
10 | # Change these settings to your own preference
11 | indent_style = space
12 | indent_size = 2
13 | 
14 | # We recommend you to keep these unchanged
15 | end_of_line = lf
16 | charset = utf-8
17 | trim_trailing_whitespace = true
18 | insert_final_newline = true
19 | 
20 | [*.md]
21 | trim_trailing_whitespace = false
22 | 
23 | [*.jsx]
24 | trim_trailing_whitespace = false
25 | 


--------------------------------------------------------------------------------
/src/addons/tardis/components/Tardis.jsx:
--------------------------------------------------------------------------------
 1 | var React       = require("react/addons");
 2 | 
 3 | var Tardis = React.createClass(
 4 |   {
 5 |     "render":                     function () { 
 6 |                                             // iOS will ignore the width/height of an iframe, 
 7 |                                             // but we can wrap it in an explicitly-sized div
 8 |                                     return  <div className = "Tardis">
 9 |                                               <iframe src = { this.props.url } />
10 |                                             </div>;
11 |                                   }
12 |   }
13 | );
14 | 
15 | module.exports = Tardis;
16 | 


--------------------------------------------------------------------------------
/src/mixins/NuclearContext.jsx:
--------------------------------------------------------------------------------
 1 | var React = require("react/addons");
 2 | 
 3 | var NuclearMixin = require("./Nuclear.jsx");
 4 | 
 5 | var NuclearContextMixin = {
 6 |   "propTypes":                  {
 7 |                                   "reactor":   React.PropTypes.object.isRequired,
 8 |                                 },
 9 | 
10 |   "childContextTypes":          NuclearMixin.contextTypes,
11 | 
12 |   "getChildContext":            function () {
13 |                                   return {
14 |                                     "ambidexReactor":    this.props.reactor,
15 |                                   }
16 |                                 },
17 | };
18 | 
19 | module.exports = NuclearContextMixin;
20 | 


--------------------------------------------------------------------------------
/src/mixins/SettingsContext.jsx:
--------------------------------------------------------------------------------
 1 | var React = require("react/addons");
 2 | 
 3 | var SettingsMixin = require("./Settings.jsx");
 4 | 
 5 | var SettingsContextMixin = {
 6 |   "propTypes":                  {
 7 |                                   "settings":     React.PropTypes.object.isRequired,
 8 |                                 },
 9 | 
10 |   "childContextTypes":          SettingsMixin.contextTypes,
11 | 
12 |   "getChildContext":            function () {
13 |                                   return {
14 |                                     "ambidexSettings":          this.props.settings,
15 |                                   }
16 |                                 },
17 | };
18 | 
19 | module.exports = SettingsContextMixin;
20 | 


--------------------------------------------------------------------------------
/src/init.server.js:
--------------------------------------------------------------------------------
 1 | var babelBlacklist = require("./babelBlacklist");
 2 | 
 3 | require("babel/register")(
 4 |   {
 5 |     "stage":   1,               // Allow experimental transforms (specifically, ...rest in objects)
 6 |     "ignore":  babelBlacklist,
 7 |   }
 8 | );
 9 | 
10 | require("make-node-env-global")();
11 | 
12 | var recursiveCloneWithDefaults = require("./addons/utilities.js").recursiveCloneWithDefaults;
13 | 
14 | module.exports = Object.assign(
15 |   require("./Ambidex.server.js"),
16 | 
17 |   recursiveCloneWithDefaults(
18 |     {
19 |       "addons": {
20 |                   "TardisGallery":  require("./addons/tardis/TardisGallery.server.js"),
21 |                 }
22 |     },
23 | 
24 |     require("./init.common.js")
25 |   )
26 | );
27 | 


--------------------------------------------------------------------------------
/src/createHandlerWithAmbidexContext.jsx:
--------------------------------------------------------------------------------
 1 | var React = require("react/addons");
 2 | 
 3 | var NuclearContextMixin   = require("./mixins/NuclearContext.jsx");
 4 | var SettingsContextMixin  = require("./mixins/SettingsContext.jsx");
 5 | var TitleContextMixin     = require("./mixins/TitleContext.jsx");
 6 | 
 7 | var createHandlerWithAmbidexContext = function (optionalFeatures) {
 8 |   var mixins = [
 9 |     SettingsContextMixin,
10 |     TitleContextMixin,
11 |   ];
12 | 
13 |   if (optionalFeatures.nuclear)
14 |     mixins.push(NuclearContextMixin);
15 | 
16 |   return React.createClass(
17 |     {
18 |       "mixins":                     mixins,
19 | 
20 |       "render":                     function () {
21 |                                       return <this.props.Handler />;
22 |                                     }
23 |     }
24 |   );
25 | };
26 | 
27 | module.exports = createHandlerWithAmbidexContext;
28 | 


--------------------------------------------------------------------------------
/src/addons/tardis/settings.default.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   "NAME":                           "TARDIS Gallery",
 3 |   "SHORT_NAME":                     "tardis_gallery",
 4 |   "HOST":                           "tardis.local",
 5 |   "PORT":                           "8080",
 6 |   "WEBPACK_PORT":                   "8078",
 7 | 
 8 |   "ENABLE_HOT_MODULE_REPLACEMENT":  NODE_ENV === "local",
 9 | 
10 |   "FILESYSTEM_PATHS":               {
11 |                                       "ROUTES":   `${ __dirname }/routes.jsx`,
12 |                                       "STYLES":   `${ __dirname }/styles.css`,
13 |                                       "BUNDLES":  `${ __dirname }/bundles/`,
14 |                                     },
15 | 
16 |   "SERVER_ONLY_MODULE_NAMES":       [
17 |                                     ],
18 | 
19 |   // TARDIS-specific settings:
20 | 
21 |   "APPEND_PATH_TO_URLS":            true
22 | };
23 | 


--------------------------------------------------------------------------------
/src/addons/tardis/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   background-color:             #313E4B;
 3 |   margin:                       8px;
 4 | }
 5 | 
 6 | .TardisGallery {
 7 |   display:                      flex;
 8 |   justify-content:              space-between;
 9 |   flex-wrap:                    wrap;
10 | }
11 | 
12 | .Tardis {
13 |   position:                     relative;
14 |   display:                      inline-block;
15 |   border:                       1px solid hsla(0, 100%, 100%, 0.5);
16 | 
17 |   /* iOS will ignore the size of an iframe so wrap it in a size-constrained div */
18 |   width:                        320px;
19 |   height:                       568px;
20 |   margin:                       7px;
21 | 
22 |   -webkit-overflow-scrolling:   touch;
23 |   overflow-y:                   scroll;
24 | }
25 | 
26 | .Tardis iframe {
27 |   position:                     relative;
28 | 
29 |   width:                        100%;
30 |   height:                       100%;
31 | 
32 |   border:                       none;
33 | }
34 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2014 eBay Software Foundation
 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
13 | all 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
21 | THE SOFTWARE.


--------------------------------------------------------------------------------
/src/defaults/styles/react-native.css:
--------------------------------------------------------------------------------
 1 | /*  Sets all block level elements (https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements#Elements)
 2 |  *  to the React Native defaults (https://github.com/facebook/css-layout/blob/ecc61dae85407148c3fb0077e16bb718592e4e8d/README.md#default-values)
 3 |  */
 4 | 
 5 | * {
 6 |   position:                     relative;
 7 |   box-sizing:                   border-box;
 8 |   border:                       0 solid black;
 9 |   margin:                       0;
10 |   padding:                      0;
11 |   -webkit-tap-highlight-color:  transparent;
12 | }
13 | 
14 | address,
15 | article,
16 | aside,
17 | blockquote,
18 | dd,
19 | div,
20 | dl,
21 | fieldset,
22 | figcaption,
23 | figure,
24 | footer,
25 | form,
26 | h1,
27 | h2,
28 | h3,
29 | h4,
30 | h5,
31 | h6,
32 | header,
33 | hgroup,
34 | main,
35 | nav,
36 | noscript,
37 | ol,
38 | output,
39 | p,
40 | section,
41 | ul {
42 |   /* TODO: figure out why autoprefixer-loader isn't working here */
43 |   display:                      -webkit-flex;
44 |   display:                      flex;
45 | 
46 |   -webkit-flex-direction:       column;
47 |   flex-direction:               column;
48 | 
49 |   -webkit-flex-shrink:          0;
50 |   flex-shrink:                  0;
51 | 
52 |   -webkit-align-items:          stretch;
53 |   align-items:                  stretch;
54 | }
55 | 


--------------------------------------------------------------------------------
/src/mixins/Title.jsx:
--------------------------------------------------------------------------------
 1 | var React = require("react/addons");
 2 | 
 3 | /*  Since React components are designed to be idempotent, calling
 4 |  *  componentWillMount/DidUpdate repeatedly needs to be harmless.  
 5 |  *
 6 |  *  If we pushed a primative (like a string) directly onto the stack,
 7 |  *  we'd have to worry about duplicates.  Therefore, we simply register
 8 |  *  that this component implements sectionTitle and let Ambidex look up
 9 |  *  its title when Ambidex needs to know it.
10 |  */
11 | 
12 | var TitleMixin = {  
13 |   "contextTypes":               {
14 |                                   "ambidexRegisterTitledComponent":   React.PropTypes.func.isRequired,
15 |                                 },
16 | 
17 |   "_registerAsTitledComponent": function () {
18 |                                   if (this.sectionTitle || this.getSectionTitle) {
19 |                                     this.context.ambidexRegisterTitledComponent(this);
20 |                                   }
21 |                                 },
22 | 
23 |   "componentWillMount":         function () {
24 |                                   this._registerAsTitledComponent();
25 |                                 },
26 | 
27 |   "componentWillReceiveProps":  function () {
28 |                                   this._registerAsTitledComponent();
29 |                                 },
30 | };
31 | 
32 | module.exports = TitleMixin;
33 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ambidex",
 3 |   "version": "0.2.0-beta5",
 4 |   "description": "Effortlessly host your React app on both the client and the server.  Some call it isomorphic JavaScript - we call it Ambidex.",
 5 |   "contributors": [
 6 |     "Brenton Simpson <bresimpson@ebay.com> (http://appsforartists.com)"
 7 |   ],
 8 |   "license": "MIT",
 9 |   "files": [
10 |     "src"
11 |   ],
12 |   "browser": "src/init.client.js",
13 |   "main": "src/init.server.js",
14 |   "optionalDependencies": {
15 |     "react-hot-loader": "1.1.4",
16 |     "webpack-dev-server": "1.7.0"
17 |   },
18 |   "peerDependencies": {
19 |     "react": "0.13",
20 |     "experimental-nuclear-js": "~0.0.0",
21 |     "react-tap-event-plugin": "0.1.3",
22 |     "react-router": "0.13"
23 |   },
24 |   "dependencies": {
25 |     "autoprefixer-loader": "1.0",
26 |     "css-loader": "0.9.0",
27 |     "immutable": "3",
28 |     "babel": "5",
29 |     "babel-loader": "5",
30 |     "lazy.js": "0.4.0",
31 |     "mach": "1.2.0",
32 |     "make-node-env-global": "1.0.0",
33 |     "prfun": "1.0.2",
34 |     "style-loader": "0.8.3",
35 |     "to-camel-case": "0.2.1",
36 |     "webpack": "1.5.3"
37 |   },
38 |   "repository": {
39 |     "type": "git",
40 |     "url": "git@github.com:appsforartists/ambidex.git"
41 |   },
42 |   "bugs": {
43 |     "url": "https://github.com/appsforartists/ambidex/issues"
44 |   },
45 |   "homepage": "https://github.com/appsforartists/ambidex",
46 |   "devDependencies": {
47 |     "rf-release": "^0.4.0"
48 |   }
49 | }
50 | 


--------------------------------------------------------------------------------
/src/mixins/Nuclear.jsx:
--------------------------------------------------------------------------------
 1 | var React = require("react/addons");
 2 | 
 3 | var NuclearMixin = {
 4 |   "contextTypes":               {
 5 |                                   "ambidexReactor":        React.PropTypes.object.isRequired,
 6 |                                 },
 7 | 
 8 |   "getInitialState":            function () {
 9 |                                   // this.reactor shouldn't ever change, so keeping it simple
10 |                                   // and not worrying about componentWillUpdate
11 |                                   this.reactor = this.context.ambidexReactor;
12 | 
13 |                                   return this.getDataBindings === undefined
14 |                                     ? {}
15 |                                     : this.reactor.ReactMixin.getInitialState.apply(this);
16 |                                 },
17 | 
18 |                                 // Should probably be more intropective about this for futureproofness;
19 |                                 // but for now, this does the job
20 |   "componentDidMount":          function () {
21 |                                   if (this.getDataBindings !== undefined) {
22 |                                     return this.reactor.ReactMixin.componentDidMount.apply(this, arguments);
23 |                                   }
24 |                                 },
25 | 
26 |   "componentWillUnmount":       function () {
27 |                                   if (this.getDataBindings !== undefined) {
28 |                                     return this.reactor.ReactMixin.componentWillUnmount.apply(this, arguments);
29 |                                   }
30 |                                 },
31 | };
32 | 
33 | module.exports = NuclearMixin;
34 | 


--------------------------------------------------------------------------------
/src/addons/tardis/components/TardisGallery.jsx:
--------------------------------------------------------------------------------
 1 | var React       = require("react/addons");
 2 | var ReactRouter = require("react-router");
 3 | var Ambidex     = require("ambidex");
 4 | 
 5 | var Tardis = require("./Tardis.jsx");
 6 | 
 7 | var TardisGallery = React.createClass(
 8 |   {
 9 |     "mixins":                     [
10 |                                     Ambidex.mixins.Settings,
11 |                                     Ambidex.mixins.Title,
12 |                                     ReactRouter.State
13 |                                   ],
14 | 
15 |     "getSectionTitle":            function () {
16 |                                     return this.getAmbidexSettings().NAME;
17 |                                   },
18 | 
19 |     "render":                     function () {
20 |                                     var settings = this.getAmbidexSettings();
21 | 
22 |                                     // forward any path the user types into the gallery on to each TARDIS
23 |                                     var path = settings.APPEND_PATH_TO_URLS
24 |                                       ? this.getPath()
25 |                                       : "";
26 | 
27 |                                     var tardises = settings.URLS.map(
28 |                                       (url) => {
29 |                                         url = url.indexOf("//") === -1
30 |                                           ? "//" + url
31 |                                           : url;
32 | 
33 |                                         return  <Tardis 
34 |                                                   url = { url + path } 
35 |                                                   key = { url + path } 
36 |                                                 />
37 |                                       }
38 |                                     );
39 | 
40 |                                     return  <div className = "TardisGallery">
41 |                                               { tardises } 
42 |                                             </div>
43 |                                   }
44 |   }
45 | );
46 | 
47 | module.exports = TardisGallery;
48 | 


--------------------------------------------------------------------------------
/src/addons/utilities.js:
--------------------------------------------------------------------------------
 1 | var Lazy = require("lazy.js");
 2 | 
 3 | var utilities = {
 4 |   "noOp":                         function () {
 5 |                                   },
 6 | 
 7 |   "echo":                         function () {
 8 |                                     switch (arguments.length) {
 9 |                                       case 0:
10 |                                         return undefined;
11 | 
12 |                                       case 1:
13 |                                         return arguments[0];
14 | 
15 |                                       default:
16 |                                         return Array.prototype.slice.call(arguments);
17 |                                     };
18 |                                   },
19 | 
20 |   "echoFirst":                    function () {
21 |                                     return arguments[0];
22 |                                   },
23 | 
24 |   "hasValue":                     function (value) {
25 |                                     return value !== null && value !== undefined;
26 |                                   },
27 | 
28 |   "hasContent":                   function (value) {
29 |                                     try {
30 |                                       return Boolean(Object.keys(value).length)
31 | 
32 |                                     } catch (error) {
33 |                                       return utilities.hasValue(value);
34 |                                     }
35 |                                   },
36 | 
37 |   "recursiveCloneWithDefaults":   function (instance, defaults) {
38 |                                     instance = instance || {};
39 | 
40 |                                     return Lazy(instance).defaults(defaults).map(
41 |                                       (value, key) => value.constructor === Object
42 |                                                         ? [key, utilities.recursiveCloneWithDefaults(instance[key] || {}, defaults[key] || {})]
43 |                                                         : [key, value]
44 |                                     ).toObject();
45 |                                   },
46 | };
47 | 
48 | module.exports = utilities;
49 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | v0.2.0-beta5 - Tue, 28 Apr 2015 03:37:14 GMT
 2 | --------------------------------------------
 3 | 
 4 | - [657c396](../../commit/657c396) [changed] JSX compilers from react-tools to jstransform@11.0.0
 5 | - [5309a18](../../commit/5309a18) [added] XSS protection to Funx deserialization
 6 | - [d43473c](../../commit/d43473c) [fixed] warning when passing Buffers to Scaffold
 7 | 
 8 | 
 9 | v0.2.0-beta4 - Fri, 10 Apr 2015 23:18:06 GMT
10 | --------------------------------------------
11 | 
12 | - [5309a18](../../commit/5309a18) [added] XSS protection to Funx deserialization
13 | - [d43473c](../../commit/d43473c) [fixed] warning when passing Buffers to Scaffold
14 | 
15 | 
16 | v0.2.0-beta3 - Fri, 27 Mar 2015 22:46:38 GMT
17 | --------------------------------------------
18 | 
19 | - [6b5fb17](../../commit/6b5fb17) [changed] flux implementation from isomorphic-reflux to funx
20 | - [956a4ce](../../commit/956a4ce) [removed] SASS styles from TARDIS
21 | 
22 | 
23 | v0.2.0-beta2 - Sun, 01 Mar 2015 17:18:20 GMT
24 | --------------------------------------------
25 | 
26 | - [9de0db9](../../commit/9de0db9) [fixed] isomorphic-reflux version
27 | - [b7063dd](../../commit/b7063dd) [added] Scaffold.propTypes
28 | - [6ead0f7](../../commit/6ead0f7) [fixed] mixed content warning on HTTPS pages
29 | - [44103ed](../../commit/44103ed) [added] manual -webkit prefixes to default styles
30 | 
31 | 
32 | v0.2.0-beta1 - Tue, 24 Feb 2015 01:56:04 GMT
33 | --------------------------------------------
34 | 
35 | - [64be9ea](../../commit/64be9ea) [added] warning if undefined action or store requested
36 | - [eb4bc82](../../commit/eb4bc82) [added] default stylesheet
37 | - [5c5bd36](../../commit/5c5bd36) **[removed] sass-loader**
38 | - [b82ab33](../../commit/b82ab33) [changed] dependencies to latest versions
39 | 
40 | 
41 | v0.1.4 - Tue, 24 Feb 2015 01:34:18 GMT
42 | --------------------------------------
43 | 
44 | - [653165a](../../commit/653165a) [fixed] connectStoresToLocalState's arguments assertion
45 | - [150a295](../../commit/150a295) [fixed] `undefined` error in UglifyJS
46 | 
47 | 
48 | v0.1.3 - Thu, 05 Feb 2015 01:49:27 GMT
49 | --------------------------------------
50 | 
51 | - [48f7cbd](../../commit/48f7cbd) [added] missing polyfill for "".includes
52 | 
53 | 
54 | v0.1.2 - Thu, 05 Feb 2015 01:47:02 GMT
55 | --------------------------------------
56 | 
57 | - _(This release was redacted.  [rf-release](https://github.com/ryanflorence/rf-release) committed some files that didn't belong in this tag, so I stashed those and committed the rest as 0.1.3.)_
58 | 
59 | 
60 | v0.1.1 - Mon, 2 Feb 2014 08:16:25 PST
61 | ---------------------------------------
62 | 
63 | - [473794d](../../commit/473794d) [changed] Webpack's resolve root to match `ambidex` on npm
64 | 
65 | 
66 | v0.1.0 - Wed, 28 Nov 2014 22:24:53 PST
67 | ---------------------------------------
68 | 
69 | - [e418368](../../commit/e418368) Releasing developer preview for 2015 React Conf
70 | 


--------------------------------------------------------------------------------
/src/addons/tardis/TardisGallery.server.js:
--------------------------------------------------------------------------------
  1 | var mach    = require("mach");
  2 | 
  3 | var Ambidex   = require("../../Ambidex.server.js");
  4 | var utilities = require("../utilities.js");
  5 | 
  6 | function TardisGallery(
  7 |   {
  8 |     ambidexPromises,
  9 |     settings
 10 |   }
 11 | ) {
 12 |   var customSettings = settings;
 13 | 
 14 |   settings = utilities.recursiveCloneWithDefaults(
 15 |     customSettings,
 16 |     require("./settings.default.js")
 17 |   );
 18 | 
 19 |   // Introspect URLS from ambidexes, if they aren't already set
 20 |   if (settings.URLS) {
 21 |     settings.APPEND_PATH_TO_URLS = customSettings.APPEND_PATH_TO_URLS || false;
 22 | 
 23 |     if (ambidexPromises) {
 24 |       var { HOST, PORT } = ambidexPromises[0].ambidexInProgress._get("settings");
 25 | 
 26 |       settings.URLS = settings.URLS.map(
 27 |         URL => URL.startsWith("/") && !URL.startsWith("//")
 28 |           ? `//${ HOST }:${ PORT }${ URL }`
 29 |           : URL
 30 |       );
 31 |     }
 32 |   } else {
 33 |     settings.URLS = ambidexPromises.map(
 34 |       promise => {
 35 |         var { HOST, PORT } = promise.ambidexInProgress._get("settings");
 36 | 
 37 |         return `//${ HOST }:${ PORT }`
 38 |       }
 39 |     );
 40 |   }
 41 | 
 42 |   var self = new Ambidex({ settings });
 43 |   self.mapper = mach.mapper();
 44 | 
 45 |   ambidexPromises = ambidexPromises.concat(self);
 46 | 
 47 |   ambidexPromises.forEach(
 48 |     promise => promise.ambidexInProgress._isBeingServedExternally = true
 49 |   );
 50 | 
 51 |   // Make sure the Ambidexes are dormant, then serve them by HOST with mapper
 52 |   return Promise.all(
 53 |     ambidexPromises
 54 |   ).then(
 55 |     ambidexes => Promise.all(
 56 |       ambidexes.map(
 57 |         ambidex => {
 58 |           if (ambidex.stack.nodeServer && ambidex.stack.nodeServer.address()) {
 59 |             return new Promise(
 60 |               (resolve, reject) => {
 61 |                 ambidex.stack.nodeServer.close(
 62 |                   () => resolve(ambidex)
 63 |                 );
 64 |               }
 65 |             );
 66 | 
 67 |           } else {
 68 |             return ambidex;
 69 |           }
 70 |         }
 71 |       )
 72 |     )
 73 |   ).then(
 74 |     ambidexes => {
 75 |       ambidexes.forEach(
 76 |         ambidex => {
 77 |           var { HOST, BASE_URL } = ambidex._get("settings");
 78 | 
 79 |           if (!BASE_URL)
 80 |             BASE_URL = "/"
 81 | 
 82 |           if (!BASE_URL.startsWith("/"))
 83 |             BASE_URL = "/" + BASE_URL
 84 | 
 85 |           if (!BASE_URL.endsWith("/"))
 86 |             BASE_URL = BASE_URL + "/"
 87 | 
 88 |           self.mapper.map(
 89 |             ambidex === self.ambidexInProgress
 90 |               ? "/"
 91 |               : `http://${ HOST }${ BASE_URL }`,
 92 |             ambidex.stack
 93 |           );
 94 |         }
 95 |       );
 96 | 
 97 |       return ambidexes;
 98 |     }
 99 |   ).then(
100 |     ambidexes => {
101 |       ambidexes.forEach(
102 |         ambidex => console.info(`Starting mach for ${ ambidex._get("settings").NAME } on ${ settings.HOST }:${ settings.PORT }…`)
103 |       );
104 | 
105 |       self.mapper.nodeServer = mach.serve(
106 |         self.mapper,
107 |         settings.VM_PORT || settings.PORT
108 |       );
109 | 
110 |       return self;
111 |     }
112 |   ).catch(
113 |     error => console.error(error.stack)
114 |   );
115 | }
116 | 
117 | module.exports = TardisGallery;
118 | 
119 | 


--------------------------------------------------------------------------------
/src/mixins/TitleContext.jsx:
--------------------------------------------------------------------------------
 1 | var React = require("react/addons");
 2 | 
 3 | var utilities  = require("../addons/utilities.js");
 4 | var TitleMixin = require("./Title.jsx");
 5 | 
 6 | var TitleContextMixin = {
 7 |   "propTypes":                  {
 8 |                                   "settings":   React.PropTypes.object.isRequired,
 9 |                                   "setTitle":   React.PropTypes.func.isRequired,
10 | 
11 | 
12 |                                   // Since there are no post-render lifecycle hooks that fire on the 
13 |                                   // server, we fake one here.
14 | 
15 |                                   "listenForServerDidRender":   React.PropTypes.func,
16 |                                 },
17 | 
18 |   "getInitialState":            function () {
19 |                                   return {
20 |                                     "titledComponents":   []
21 |                                   }
22 |                                 },
23 | 
24 |   "childContextTypes":          TitleMixin.contextTypes,
25 | 
26 |   "getChildContext":            function () {
27 |                                   return {
28 |                                     "ambidexRegisterTitledComponent":   this._registerTitledComponent,
29 |                                   }
30 |                                 },
31 | 
32 |   "componentWillReceiveProps":  function () {
33 |                                   // clear titledComponents between renders
34 |                                   this.setState(
35 |                                     {
36 |                                       "titledComponents":   []
37 |                                     }
38 |                                   );
39 |                                 },
40 | 
41 |   "componentWillMount":         function () {
42 |                                   if (this.props.listenForServerDidRender) {
43 |                                     this.props.listenForServerDidRender(this._updateTitle);
44 |                                   }
45 |                                 },
46 | 
47 |   "componentDidMount":          function () {
48 |                                   this._updateTitle();
49 |                                 },
50 | 
51 |   "componentDidUpdate":         function () {
52 |                                   this._updateTitle();
53 |                                 },
54 | 
55 |   "_registerTitledComponent":   function (newTitledComponent) {
56 |                                   var titledComponents = this.state.titledComponents;
57 | 
58 |                                   if (titledComponents.indexOf(newTitledComponent) === -1)
59 |                                     titledComponents.push(newTitledComponent);
60 |                                 },
61 | 
62 |   "_updateTitle":               function () {
63 |                                   this.props.setTitle(
64 |                                     this.state.titledComponents.map(
65 |                                       titledComponent => titledComponent.sectionTitle || titledComponent.getSectionTitle()
66 | 
67 |                                     ).filter(
68 |                                       potentialSectionTitle => Boolean(potentialSectionTitle) || potentialSectionTitle === 0
69 | 
70 |                                     ).join(
71 |                                       this.props.settings.TITLE_SEPARATOR || " "
72 |                                     )
73 |                                   );
74 |                                 }
75 | };
76 | 
77 | module.exports = TitleContextMixin;
78 | 


--------------------------------------------------------------------------------
/src/render.client.js:
--------------------------------------------------------------------------------
  1 | require("babel/polyfill");
  2 | 
  3 | var Ambidex              = require("ambidex");
  4 | var React                = require("react/addons");
  5 | var ReactRouter          = require("react-router");
  6 | var Immutable            = require("immutable");
  7 | var injectTapEventPlugin = require("react-tap-event-plugin");
  8 | 
  9 | var {
 10 |   Reactor
 11 | } = require("experimental-nuclear-js");
 12 | 
 13 | var createHandlerWithAmbidexContext = require("./createHandlerWithAmbidexContext.jsx");
 14 | 
 15 | 
 16 | injectTapEventPlugin();
 17 | 
 18 | var containerSelector = "body";
 19 | 
 20 | var HandlerWithAmbidexContext = createHandlerWithAmbidexContext(
 21 |   // enable/disable features based on what settings the developer has passed in
 22 |   {
 23 |     "nuclear":  Boolean(__ambidexPaths.nuclearDefinitions)
 24 |   }
 25 | );
 26 | 
 27 | var reactor;
 28 | var router = ReactRouter.create(
 29 |   {
 30 |     "routes":   require(__ambidexPaths.routes),
 31 |     "location": ReactRouter.HistoryLocation,
 32 |   }
 33 | );
 34 | 
 35 | if (__ambidexPaths.nuclearDefinitions) {
 36 |   function createReactor () {
 37 |     // Anything that changes here needs to change in Ambidex.server.js too
 38 | 
 39 |     var result = new Reactor(
 40 |       {
 41 |         "debug":      NODE_ENV !== "production",
 42 |         "ambidex":    require("./nuclearDefinitions"),
 43 | 
 44 |         ...require(__ambidexPaths.nuclearDefinitions),
 45 |       }
 46 |     );
 47 | 
 48 |     result.ambidex.actions.redirect = function (
 49 |       {
 50 |         path,
 51 |         routeName,
 52 |         params        = {},
 53 |         query         = {},
 54 |         clearReactor  = false,
 55 |       }
 56 |     ) {
 57 |       path = path || router.makePath(
 58 |         routeName,
 59 |         params,
 60 |         query
 61 |       );
 62 | 
 63 |       if (path === router.getCurrentPath())
 64 |         return;
 65 | 
 66 |       if (clearReactor) {
 67 |         reactor.dispatch = Ambidex.addons.utilities.noOp;
 68 |         reactor = createReactor();
 69 |       }
 70 | 
 71 |       router.transitionTo(path);
 72 |     };
 73 | 
 74 |     result.ambidex.actions.requireAuthentication = function (
 75 |       {
 76 |         routeName = "login",
 77 |         params    = {},
 78 |         query     = {},
 79 |         next,
 80 |       } = {}
 81 |     ) {
 82 |       if (next || !query.next)
 83 |         query.next = router.getCurrentPath();
 84 | 
 85 | 
 86 |       result.ambidex.actions.redirect(
 87 |         {
 88 |           routeName,
 89 |           params,
 90 |           query,
 91 |           "clearReactor": true,
 92 |         }
 93 |       );
 94 |     };
 95 | 
 96 |     result.ambidex.actions.loadSettings(
 97 |       {
 98 |         "settings":   __ambidexSettings
 99 |       }
100 |     );
101 | 
102 |     return result;
103 |   };
104 | 
105 |   reactor = createReactor();
106 | }
107 | 
108 | var initialRenderComplete;
109 | 
110 | var mountReact = function() {
111 |   var container = document.querySelector(containerSelector);
112 | 
113 |   if (!container) {
114 |     return initialRenderComplete = false;
115 | 
116 |   } else {
117 |     router.run(
118 |       (Handler, routerState) => {
119 |         if (reactor) {
120 |           if (initialRenderComplete) {
121 |             reactor.ambidex.actions.routerStateChanged(
122 |               {
123 |                 routerState
124 |               }
125 |             );
126 | 
127 |           } else {
128 |             reactor.deserialize(window.__ambidexStoreStateByName);
129 |           }
130 |         }
131 | 
132 |         // Anything that changes here needs to change in Ambidex.server.js too
133 |         React.render(
134 |           <HandlerWithAmbidexContext
135 |             settings  = { __ambidexSettings }
136 |             setTitle  = {
137 |                           title => {
138 |                             document.title = title
139 |                           }
140 |                         }
141 | 
142 |             { ...{Handler, reactor} }
143 |           />,
144 | 
145 |           container
146 |         );
147 |       }
148 |     );
149 | 
150 |     return initialRenderComplete = true;
151 |   }
152 | };
153 | 
154 | if (!mountReact()) {
155 |   window.addEventListener(
156 |     "DOMContentLoaded",
157 |     mountReact
158 |   );
159 | }
160 | 


--------------------------------------------------------------------------------
/src/createWebpackSettings.js:
--------------------------------------------------------------------------------
  1 | var Webpack = require("webpack");
  2 | var Lazy    = require("lazy.js");
  3 | 
  4 | var babelBlacklist = require("./babelBlacklist");
  5 | 
  6 | function getSettings (options) {
  7 |   var settings = {
  8 |     "entry":      {},
  9 | 
 10 |     "resolve":    {
 11 |                     "extensions": [
 12 |                       "",
 13 |                       ".js",
 14 |                       ".jsx",
 15 |                       ".scss"
 16 |                     ]
 17 |                   },
 18 | 
 19 |     "module":     {
 20 |                     "loaders":  [
 21 |                                   {
 22 |                                     "test":     /\.jsx?$/,
 23 |                                     "loader":   "babel-loader?stage=1",
 24 |                                     "exclude":  babelBlacklist
 25 |                                   },
 26 |                                   {
 27 |                                     "test":     /\.css$/,
 28 |                                     "loader":   "style-loader!css-loader!autoprefixer-loader"
 29 |                                   }
 30 |                                 ]
 31 |                   },
 32 | 
 33 |     "output":     {
 34 |                     "filename":       "[name].js",
 35 |                     "chunkFilename":  "chunk_[id].js",
 36 |                     "publicPath":     "/bundles/",
 37 |                     "pathinfo":       true
 38 |                   },
 39 | 
 40 |     "plugins":    [
 41 |                     new Webpack.optimize.DedupePlugin(),
 42 |                     new Webpack.optimize.OccurenceOrderPlugin(),
 43 |                   ],
 44 |   };
 45 | 
 46 |   // `settings.context` tells Webpack where to look up its relative paths.
 47 |   // This includes things you wouldn't expect, like the NPM modules for each
 48 |   // loader.
 49 |   //
 50 |   // Since `options.paths` already gives us absolute paths to our external
 51 |   // dependencies, we set `context` to our own `__dirname`.  This makes sure
 52 |   // the dependencies are always loaded, even if our caller doesn't have them
 53 |   // installed.
 54 | 
 55 |   settings.context = __dirname;
 56 |   settings.resolveLoader = settings.resolveLoader || {};
 57 |   settings.resolveLoader.root = __dirname.replace("/ambidex/src", "/ambidex/node_modules");
 58 | 
 59 |   if (options.hasOwnProperty("paths")) {
 60 | 
 61 |     if (options.paths.hasOwnProperty("BUNDLES"))
 62 |       settings.output.path = options.paths["BUNDLES"];
 63 | 
 64 | 
 65 |     Lazy(options.paths).each(
 66 |       (value, key) => {
 67 |         key = key.toLowerCase();
 68 | 
 69 |         if (!value.endsWith("/")) {
 70 |           settings.entry[key] = Array.isArray(settings.entry[key])
 71 |             ? settings.entry[key]
 72 |             : [];
 73 | 
 74 |           settings.entry[key].push(value);
 75 |         }
 76 |       }
 77 |     );
 78 |   }
 79 | 
 80 |   if (options.hasOwnProperty("devServerOrigin")) {
 81 | 
 82 |     // Add the HMR client to each exported bundle
 83 |     for (var bundleName in settings.entry) {
 84 |       settings.entry[bundleName].push(
 85 |         "webpack-dev-server/client?" + options.devServerOrigin, // e.g. localhost:8081
 86 |         "webpack/hot/dev-server"
 87 |       );
 88 |     }
 89 | 
 90 |     settings.output.publicPath = options.devServerOrigin + settings.output.publicPath;
 91 | 
 92 | 
 93 |     // react-hot-loader will keep the components updated when HMR happens
 94 |     var jsxLoaderSettings = settings.module.loaders.filter(
 95 |       function (loader, i, loaders) {
 96 |         return loader.test.exec(".jsx");
 97 |       }
 98 |     )[0];
 99 | 
100 |     jsxLoaderSettings.loader = "react-hot-loader!" + jsxLoaderSettings.loader;
101 | 
102 |     settings.plugins.push(
103 |       new Webpack.HotModuleReplacementPlugin()
104 |     );
105 |   }
106 | 
107 |   if (options.hasOwnProperty("constants")) {
108 |     settings.plugins.push(
109 |       new Webpack.DefinePlugin(options.constants)
110 |     );
111 |   }
112 | 
113 |   if (options.hasOwnProperty("ignoredModuleNames") && options.ignoredModuleNames.length) {
114 |     settings.plugins.push(
115 |       new Webpack.IgnorePlugin(
116 |         RegExp(options.ignoredModuleNames.join("|"))
117 |       )
118 |     );
119 |   }
120 | 
121 |   if (options.hasOwnProperty("minimizeFileSize") && options.minimizeFileSize) {
122 |     settings.plugins.push(
123 |       new Webpack.optimize.UglifyJsPlugin(
124 |         {
125 |           "output":   {
126 |                         "inline_script":   true
127 |                       }
128 |         }
129 |       )
130 |     );
131 |   }
132 | 
133 |   return settings;
134 | }
135 | 
136 | module.exports = getSettings;
137 | 


--------------------------------------------------------------------------------
/src/defaults/Scaffold.jsx:
--------------------------------------------------------------------------------
  1 | var React = require("react");
  2 |                                                               
  3 | var Scaffold = React.createClass(
  4 |   {
  5 |     "propTypes":                  {
  6 |                                     "title":                React.PropTypes.string.isRequired,
  7 | 
  8 |                                     "style":                React.PropTypes.shape(
  9 |                                                               {
 10 |                                                                 "src":      React.PropTypes.string,
 11 |                                                                 "__html":   React.PropTypes.string,
 12 |                                                               }
 13 |                                                             ).isRequired,
 14 | 
 15 |                                     "script":               React.PropTypes.shape(
 16 |                                                               {
 17 |                                                                 "src":      React.PropTypes.string,
 18 |                                                                 "__html":   React.PropTypes.string,
 19 |                                                               }
 20 |                                                             ).isRequired,
 21 | 
 22 |                                     "body":                 React.PropTypes.shape(
 23 |                                                               {
 24 |                                                                 "__html":   React.PropTypes.string.isRequired,
 25 |                                                               }
 26 |                                                             ).isRequired,
 27 | 
 28 |                                     "favIconSrc":           React.PropTypes.string,
 29 |                                     "storeStateByName":     React.PropTypes.object,
 30 |                                   },
 31 | 
 32 |     "getDefaultProps":            function () {
 33 |                                     return {
 34 |                                       "storeStateByName":   {},
 35 |                                     }
 36 |                                   },
 37 | 
 38 |     "render":                     function () {
 39 |                                     // use Webpack's bundles for dev, but inline for production
 40 |                                     var styleTag = this.props.style.hasOwnProperty("src")
 41 |                                       ? <script
 42 |                                           src = { this.props.style.src }
 43 |                                         ></script>
 44 |                                       : <script
 45 |                                           dangerouslySetInnerHTML = { this.props.style }
 46 |                                         />;
 47 |                                                                       
 48 |                                     var scriptTag = this.props.script.hasOwnProperty("src")
 49 |                                       ? <script
 50 |                                           src = { this.props.script.src }
 51 |                                           defer
 52 |                                         ></script>
 53 |                                       : <script
 54 |                                           dangerouslySetInnerHTML = { this.props.script }
 55 |                                         />;
 56 | 
 57 |                                     return  <html>
 58 |                                               <head>
 59 |                                                 <title>
 60 |                                                   { this.props.title }
 61 |                                                 </title>
 62 |                                                                       
 63 |                                                 {/* This is the magic viewport.  Don't touch it!  
 64 |                                                   * It opts us in to Chrome's GPU accelerated fast-path:
 65 |                                                   * https://www.youtube.com/watch?v=3Bq521dIjCM&feature=youtu.be&t=23m50s 
 66 |                                                   */}
 67 |                                                 <meta
 68 |                                                   name    = "viewport"
 69 |                                                   content = "
 70 |                                                               width=device-width,
 71 |                                                               minimum-scale=1.0,
 72 |                                                               initial-scale=1.0,
 73 |                                                               user-scalable=yes
 74 |                                                             "
 75 |                                                 />
 76 |                                                                       
 77 |                                                 <link
 78 |                                                   rel  = "icon"
 79 |                                                   href = { this.props.favIconSrc }
 80 |                                                 />
 81 |                                                                       
 82 |                                                 { styleTag }
 83 |                                               </head>
 84 |                                                                       
 85 |                                               <body
 86 |                                                 dangerouslySetInnerHTML = { this.props.body }
 87 |                                               />
 88 |                                                 
 89 |                                               <script
 90 |                                                 dangerouslySetInnerHTML = { 
 91 |                                                                             {
 92 |                                                                               "__html":   `window.__ambidexStoreStateByName = ${ 
 93 |                                                                                             JSON.stringify(
 94 |                                                                                               this.props.storeStateByName
 95 |                                                                                             
 96 |                                                                                             // This prevents XSS injections if we happen to get
 97 |                                                                                             // </script> back from the API.
 98 |                                                                                             //
 99 |                                                                                             // There's probably more to be done to harden Ambidex.
100 |                                                                                             ).replace(
101 |                                                                                               /\//g, "\\/"
102 |                                                                                             ) 
103 |                                                                                           }` 
104 |                                                                             }
105 |                                                                           }
106 |                                               />
107 |                                                       
108 |                                               { scriptTag }
109 |                                             </html>;
110 |                                   }
111 |   }
112 | );
113 |                                                               
114 | module.exports = Scaffold;
115 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | [![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/appsforartists/Ambidex?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
  2 | 
  3 | ## Introduction ##
  4 | 
  5 | **Ambidex** lets you render the exact same [React.js](https://github.com/facebook/react) app on both the client and the server.  It abstracts away the [differences](#mix-ins) between them, so you can focus your creativity where it matters most: _on your product._
  6 | 
  7 | [![eBay Open Source](https://raw.githubusercontent.com/raptorjs/optimizer/ba5b56a3361f95d4ab6be5d6a6d53590315c3428/images/ebay.png)](https://github.com/eBay/)  
  8 | _Ambidex is being incubated in the [eBay](https://github.com/eBay/) Mobile Innovations lab._
  9 | 
 10 | 
 11 | ## Presentations ##
 12 | 
 13 |  -  [**The Ultimate Workflow:** _Tweak your page in real time without leaving the comfort of your editor_](https://www.youtube.com/watch?v=yaymfLj5tjA)  
 14 |     _Presented at [React.js Conf 2015](http://conf.reactjs.com)_
 15 | 
 16 |     - [Slides](http://goo.gl/ZYoyRZ)
 17 |     - [Video](https://www.youtube.com/watch?v=yaymfLj5tjA)
 18 | 
 19 | 
 20 | ## Ingredients ##
 21 | 
 22 | Ambidex brings together the best of a bunch other fantastic projects, including:
 23 | 
 24 |  - [**React**](https://github.com/facebook/react/) _by [Facebook](https://github.com/facebook/)_
 25 |  - [**React Router**](https://github.com/rackt/react-router/) _by [Ryan Florence](https://github.com/rpflorence/) and [Michael Jackson](https://github.com/mjackson/)_
 26 |  - [**React Hot Loader**](https://github.com/gaearon/react-hot-loader/) _by [Dan Abramov](https://github.com/gaearon/)_
 27 |  - [**Webpack**](https://github.com/webpack/webpack/) _by [Tobias Koppers](https://github.com/sokra)_
 28 |  - [**Mach**](https://github.com/mjackson/mach/) _by [Michael Jackson](https://github.com/mjackson/)_
 29 | 
 30 | 
 31 | ## Requirements ##
 32 | 
 33 | Ambidex has been tested on 
 34 | 
 35 |  - `iojs v1.0.1`
 36 |  - `npm  v2.2.0`
 37 | 
 38 | It should also work on `node v0.11.13` with the `--harmony` flag, but no promises.
 39 | 
 40 | 
 41 | ## Stability ##
 42 | 
 43 | Ambidex is a work-in-progress.  It is the foundation of our web-centric work in the eBay Mobile Innovation lab, but it has not yet been deployed in production.
 44 | 
 45 | It is being developed in the open so we, as a community, can share ideas and best practices around being insanely productive with React.  When you see something you'd like to improve, please [start an issue](https://github.com/appsforartists/Ambidex/issues/new) or [send us a message](https://gitter.im/appsforartists/Ambidex?utm_source=readme&utm_medium=readme&utm_campaign=pr-readme&utm_content=readme).
 46 | 
 47 | 
 48 | ## How it works ##
 49 | 
 50 | Ambidex renders the initial request on the server and subsequent requests in the browser.  Rendering on the server is beneficial for [SEO](http://en.wikipedia.org/wiki/Search_engine_optimization), [time-to-glass](https://www.youtube.com/watch?v=Il4swGfTOSM), and supporting clients that don't speak JavaScript (like robots).  Rendering on the client saves bandwidth, reduces server load, and makes your app feel more responsive (because changes happen instantly).  Ambidex brings you the benefits of both.
 51 | 
 52 | It is designed to be used in conjunction with a [Service-Oriented Architecture](http://en.wikipedia.org/wiki/Service-oriented_architecture).  This means your data layer should be provided as a [RESTful](http://en.wikipedia.org/wiki/Representational_state_transfer) API that functions independently of your web app.
 53 | 
 54 | This architecture has two advantages:
 55 | 
 56 | 1. Your data platform is capable of supporting any client, including native mobile apps or those of third parties.
 57 | 
 58 | 2. Your app can access data directly from the browser, so it doesn't waste server cycles requesting largely-redundant HTML on every page load.
 59 | 
 60 | 
 61 | ## Getting Started ##
 62 | 
 63 | _(Dive right in by perusing our [sample application](https://github.com/appsforartists/ambidex-example--bike-index/tree/master/application).)_
 64 | 
 65 | Here's how you instantiate Ambidex:
 66 | 
 67 | ```javascript
 68 | new Ambidex(
 69 |   {
 70 |     "settings":             require(`./settings.${ process.env["NODE_ENV"] }.js`),
 71 | 
 72 |     "middlewareInjector":   function (stack) {
 73 |                               // If you want to edit your Mach stack (for instance, 
 74 |                               // to serve static files with mach.file) do that here.
 75 |                             }
 76 |   }
 77 | ).then(
 78 |   (ambidex) => {
 79 | 
 80 |   }
 81 | );
 82 | ```
 83 | 
 84 | Notice that the Ambidex constructor returns a promise.  This promise will be resolved when your app is serving as expected.
 85 | 
 86 | Each `Ambidex` instance has three public properties:
 87 | 
 88 |  - `ambidex.stack`: the [Mach](https://github.com/mjackson/mach/) stack that is serving your app,
 89 |  - `ambidex.webpack`: the [Webpack](https://github.com/webpack/webpack/) instance that bundles your files, and
 90 |  - `ambidex.webpackDevServer`: the [Webpack Dev Server](https://github.com/webpack/webpack-dev-server/) instance that serves your files when `ENABLE_HOT_MODULE_REPLACEMENT` is `true`.
 91 | 
 92 | ### Settings ###
 93 | 
 94 | Each instance of Ambidex starts with a `settings` dictionary.  Here are the individual settings supported:
 95 | 
 96 | #### `settings["NAME"]` ####
 97 | The name your app will be referred to in the logs, `"My Awesome App"`.
 98 | 
 99 | #### `settings["SHORT_NAME"]` _(optional)_ ####
100 | A variation of that name without spaces or capital letters - your app will appear in process monitors like `top` under this name, `"my_awesome_app"`
101 | 
102 | 
103 | #### `settings["HOST"]` ####
104 | The hostname that your app will be made available at, `"example.appspot.com"`.
105 | 
106 | #### `settings["PORT"]` ####
107 | The port that goes in your browser's address bar, `"80"`.
108 | 
109 | #### `settings["VM_PORT"]` _(optional)_ ####
110 | If your app is behind a load balancer, this is the port that Ambidex should serve your app so the load balancer can find it, `"8080"`.
111 | 
112 | #### `settings["BASE_URL"]` _(optional)_ ####
113 | If your app is behind displayed inside a `TardisGallery`, mount its route tree here.  This allows you to serve different variations of your app alongside one another; for instance, you might serve version A at `"/A/"` and version B at `/B/`.
114 | 
115 | #### `settings["ENABLE_HOT_MODULE_REPLACEMENT"]` _(optional)_ ####
116 | If this is `true`, you'll be able to edit your app live with [**react-hot-loader**](https://github.com/gaearon/react-hot-loader).  This should be `true` for whatever environment(s) you're developing on.
117 | 
118 | #### `settings["TITLE_SEPARATOR"]` _(optional)_ ####
119 | This string gets put in between [section titles](#ambidexmixinstitle), such as `" - "`.
120 | 
121 | #### `settings["FAV_ICON_URL"]` ####
122 | For instance, `"/static/logo.svg"`.
123 | 
124 | #### `settings.FILESYSTEM_PATHS` ####
125 | In order to make your app Ambidextrous, we need to know where certain files are kept.  The values in this dictionary answer that question.
126 | 
127 | #### `settings.FILESYSTEM_PATHS["BASE"]` ####
128 | All the other `FILESYSTEM_PATHS` are relative to this one.  If you set this to `__dirname` (no quotes), they will be relative to your settings file.
129 | 
130 | #### `settings.FILESYSTEM_PATHS["ROUTES"]` ####
131 | The module at this path should export the root `<Route>` of your route tree.
132 | 
133 | #### `settings.FILESYSTEM_PATHS["STYLES"]` _(optional)_ ####
134 | By default, Ambidex will set the same [defaults as React Native](https://github.com/facebook/css-layout/blob/ecc61dae85407148c3fb0077e16bb718592e4e8d/README.md#default-values), such as using [flexbox](http://css-tricks.com/snippets/css/a-guide-to-flexbox/) for [all block-level elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements#Elements).  It also defaults to [Roboto](http://www.google.com/fonts/specimen/Roboto), the [Material Design font used across Android](https://www.google.com/design/spec/style/typography.html#).
135 | 
136 | If you'd like to override those defaults, simply point `FILESYSTEM_PATHS["STYLES"]` your own CSS file.
137 | 
138 | #### `settings.FILESYSTEM_PATHS["FUNX_DEFINITIONS"]` _(optional)_ ####
139 | This module should export a dictionary of Funx definitions, e.g.:
140 | 
141 | ```javascript
142 | module.exports = {
143 |   "apiDefinitions":     {
144 |                           "Bikes":        require("./apis/Bikes.js"),
145 |                         },
146 | 
147 |   "storeDefinitions":   {
148 |                           "stateful":   {
149 |                                           "Bikes":        require("./stores/Bikes.js"),
150 |                                         },
151 |                                         
152 |                           "ephemeral":  {
153 |                                           "currentBike":    function (Bikes, routerState) {
154 |                                                               return routerState.has("bikeID")
155 |                                                                 ? Bikes.getOrFetch(
156 |                                                                     {
157 |                                                                       "bikeID":  routerState.get("bikeID")
158 |                                                                     }
159 |                                                                   )
160 |                                                                 : null
161 |                                                             },
162 | 
163 |                                           "readyToRender":  function (routerState, currentBike) {
164 |                                                               if (routerState.has("bikeID") && !currentBike)
165 |                                                                 return false;
166 | 
167 |                                                               return true;
168 |                                                             },
169 |                                         },
170 |                         }
171 | }
172 | ```
173 | 
174 | Until I have time to document this better, see [Gravel's `funxDefinitions`](https://github.com/appsforartists/gravel/blob/master/src/funxDefinitions.js) for a very simple example.
175 | 
176 | #### `settings.FILESYSTEM_PATHS["BUNDLES"]` ####
177 | When `"ENABLE_HOT_MODULE_REPLACEMENT"` is `false` (e.g. in production), Ambidex will run Webpack on all your files and serve the results inline in every response.  To do so, it need to be able to cache them on the filesystem.
178 | 
179 | `"BUNDLES"` should resolve to a folder where it can store these files.  Each instance of Ambidex needs its own unique bundles folder.
180 | 
181 |                                     
182 | #### `settings["SERVER_ONLY_MODULE_NAMES"]` _(optional)_ ####
183 | This is an array of module names that should be ignored by Webpack because they are not compatible with the browser (and will only ever run on the server).  For instance, `["jsdom"]`.
184 | 
185 | 
186 | #### `settings["CUSTOM_SETTINGS"]` _(optional)_ ####
187 | `settings` is just a dictionary - you can put any values inside it that you find useful.  For instance, you might add `"STATIC_URL"` so your components know which CDN hosts your static assets.  
188 | 
189 | However, as Ambidex evolves, so too will the available settings.  To ensure new features don't collide with your app-specific inclusions, put any settings that Ambidex won't consume in `settings.CUSTOM_SETTINGS`.
190 | 
191 | Remember, because your routes need to be compiled to JavaScript source code to be run on the client, anything you put in here needs to survive JSON serialization.
192 | 
193 | ### Organizing your `settings` files ###
194 | 
195 | Of course, you'll need different settings for your production server than you will for your local machine, but nobody wants to maintain the same information in many places.  Therefore, it's a common pattern to have a separate `settings` file for each environment you'll need, and one more that holds everything that they all share.  
196 | 
197 | For instance, a professional project that utilizes many environments might be organized like this:
198 | 
199 |  - [`settings.common.js`](https://github.com/appsforartists/ambidex-example--bike-index/blob/master/application/settings.common.js)
200 |  - [`settings.local.js`](https://github.com/appsforartists/ambidex-example--bike-index/blob/master/application/settings.local.js)
201 |  - `settings.development.js`
202 |  - `settings.integration.js`
203 |  - `settings.qa.js`
204 |  - `settings.production.js`
205 | 
206 | Each of those will include and extend (or even override) [`settings.common.js`](https://github.com/appsforartists/ambidex-example--bike-index/blob/master/application/settings.common.js).  They should be very small files that describe only what is unique about that environment.
207 | 
208 | ### Mix-ins ###
209 | 
210 | There are subtle differences between the ways the client and server operate.  We need to abstract them out to make your app Ambidextrous.  That's what these mix-ins are for. 
211 | 
212 | #### `Ambidex.mixins.Title` ####
213 | 
214 | Any [route handler](https://github.com/rackt/react-router/blob/master/docs/api/components/RouteHandler.md) can include the `Title` mix-in.
215 | 
216 | When your route tree renders, Ambidex will check each handler for a section title:
217 | 
218 |  - If your title is _static_, [declare it as `sectionTitle`](https://github.com/appsforartists/ambidex-example--bike-index/blob/6548ca987e7549c33c1ce6251a8b888a3fb87b52/application/bike-index/components/Main.jsx#L17).  
219 |  
220 |  - If your title is _dynamic_, [return it from `getSectionTitle()`](https://github.com/appsforartists/ambidex-example--bike-index/blob/6548ca987e7549c33c1ce6251a8b888a3fb87b52/application/bike-index/components/BikeDetails.jsx#L15-19).  
221 | 
222 | [`settings["TITLE_SEPARATOR"]`](#settingstitle_separator) will be interspersed between each section title.  The result will be returned in the `<title>` tag when rendered on the server, or set on the client with `document.title`.
223 | 
224 | 
225 | #### `Ambidex.mixins.Funx` ####
226 | 
227 | The biggest difference between running your app on the server and running it on the client is how you load data when someone clicks a link:
228 | 
229 |  - The server only gets to respond once, so it must wait until every piece of data has loaded before responding.
230 | 
231 |  - The client doesn't have this limitation, and users expect it to respond immediately.  The best strategy here is to change pages immediately (even though your stores are probably empty) and to fill the component with new data as it arrives.
232 | 
233 | The first challenge to overcome is knowing which data needs to be loaded for a particular page to be rendered.  The server only knows which page to show by inspecting the URL; it can also use the URL determine which data to load.
234 | 
235 | You can [create named parameters in ReactRouter](https://github.com/rackt/react-router/blob/master/docs/guides/overview.md#dynamic-segments) by placing a colon before the parameter name. For example, this route has a single named parameter, `bikeID`:
236 | 
237 | ```javascript
238 | <Route
239 |   path    = "/bikes/:bikeID/edit/"
240 |   name    = "editBike"
241 |   handler = { require('./bike-index/components/BikeDetails.jsx') }
242 | />
243 | ```
244 | 
245 | When Ambidex renders a route, it receives a [state object from ReactRouter](https://github.com/rackt/react-router/blob/master/docs/api/run.md#state).  It puts all of state's parameters into an [Immutable Map](http://facebook.github.io/immutable-js/docs/#/Map) and wraps it in a [Funx](https://github.com/appsforartists/funx) store called `routerState`.  Listen for `routerState` from your ephemeral stores to expose particular subsets your stateful stores.
246 | 
247 | You must provide an ephemeral store called `readyToRender` that listens returns `true` when all your data dependencies are loaded and ready to be handed to the client.
248 | 
249 | See an example of using `routerState` and creating a `readyToRender` store in the [`funxDefinitions`](#settingsfilesystem_pathsreflux_actions_for_router_state) section.
250 | 
251 | -----
252 | 
253 | Now that you've sorted out what data needs to be loaded, you need to pass it to your React components.  
254 | 
255 | The best way is with `Ambidex.mixinCreators.connectStoresToLocalState(storeNames)`.  It will listen to the specified stores and persist their most recent values on your component's state.  Whenever a store updates, your component will too.
256 | 
257 | If you'd rather do it manually, you can instead use `Ambidex.mixins.Funx`, which adds `getFunxAction` and `getFunxStore` methods to your components.
258 | 
259 | #### `Ambidex.mixins.Settings` ####
260 | 
261 | It can be really useful to access the combined [`settings` dictionary](#settings) from your components.  Simply [mix in `Settings`](https://github.com/appsforartists/ambidex-example--bike-index/blob/6548ca987e7549c33c1ce6251a8b888a3fb87b52/application/bike-index/components/Main.jsx#L13) and call [`this.getAmbidexSettings()` from inside your component](https://github.com/appsforartists/ambidex-example--bike-index/blob/6548ca987e7549c33c1ce6251a8b888a3fb87b52/application/bike-index/components/Main.jsx#L26).
262 | 


--------------------------------------------------------------------------------
/STYLE_GUIDE.md:
--------------------------------------------------------------------------------
  1 | This is an evolving document collecting the code style that the eBay Mobile Innovations team has found creates the most readible, least error-prone codebases.
  2 | 
  3 | ### Core Principles ###
  4 | 
  5 |  - Arbitrary code style changes are distracting.  They also make a codebase look sloppy (which pulls into question the quality of the codebase itself).  The codebase should **appear to have been authored by a single person**, regardless of how many actually contributed.
  6 | 
  7 |  - Optimize for readability.  You will may encounter edge cases where strictly following these rules does not increase overall readability.  Feel free to deviate from these guidelines _if doing so will improve readability for someone who's used to following them_.
  8 | 
  9 | ### Summary ###
 10 | 
 11 |  - Indentation counts - use it to show structure.
 12 |  - Align open/closing tags and characters (except the opening `{` of a function definition or `(` of a function call).
 13 |  - Use whitespace between lines and around special characters to improve readability.
 14 |  - Make your code look consistent with the rest of the codebase.
 15 |  - Put each prop, list item, key/value pair, and argument on its own line.
 16 | 
 17 | #### JavaScript and JSX ####
 18 | 
 19 | ##### Language Version #####
 20 | 
 21 | We take advantage of language enhancements like [JavaScript Harmony](https://developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla) when it's convenient to do so.  For client-side code, we use [jsx-loader](https://github.com/petehunt/jsx-loader) with Webpack and for server-side code we use [node-jsx](https://github.com/petehunt/node-jsx).  Both packages provide [these JS Harmony features](https://github.com/facebook/jstransform/tree/master/visitors).
 22 | 
 23 | You'll often find a small file called `init.js` in the root of a package's source tree.  Its purpose is to pass all our modules through node-jsx, so we can use Harmony throughout our codebase.  Its implementation looks something like this:
 24 | 
 25 | ```javascript
 26 | // Runs all app code through node-jsx, so we can use conveniences like fat-arrow lambdas
 27 | 
 28 | require("node-jsx").install(
 29 |   {
 30 |     "extension":  ".js",
 31 |     "harmony":    true
 32 |   }
 33 | );
 34 | 
 35 | module.exports = require("./ActualMainFile.js");
 36 | ```
 37 | 
 38 | 
 39 | ##### Naming #####
 40 | 
 41 | We follow the conventions set by JavaScript's standard library and best practices established by the ecosystem:
 42 | 
 43 | | Type                              | Example                                                                        |
 44 | | --------------------------------- | ------------------------------------------------------------------------------ |
 45 | | Classes, Constructors, and Mixins | `var CapitalCamelCase = React.createClass`                                     |
 46 | | Instances                         | `var lowerCamelCase`                                                           |
 47 | | Instances (with acronyms)         | `var capitalizeHTML`                                                           |
 48 | | Functions (except constructors)   | `var lowerCamelCase = function () {`                                           |
 49 | | Constants                         | `var CAPITAL_SNAKE_CASE`                                                       |
 50 | | Files (source code)               | match the case of the thing they export (`Component.jsx` or `justAFunction.js`)|
 51 | | Files (assets)                    | `kebab-case.svg` ([because SEO](https://www.youtube.com/watch?v=AQcSFsQyct8))  |
 52 | | Folders and URLs                  | `/kebab-case/` ([because SEO](https://www.youtube.com/watch?v=AQcSFsQyct8))    |
 53 | 
 54 | Additionally, you may find that you need to write code that should only be run on the client or on the server.  Name it accordingly:
 55 | 
 56 |  - thing.client.js
 57 |  - thing.server.js
 58 |  - thing.common.js _(code here is shared by both thing.client.js and thing.server.js)_
 59 | 
 60 | We can then use the `FileNameReplacementPlugin` for Webpack and the [`browser` key in `package.json`](https://gist.github.com/defunctzombie/4339901) to make sure it's only loaded when it should be.
 61 | 
 62 | ###### Variable Names ######
 63 | 
 64 | Explicit and readable is better than terse and arcane: `setAttribute` is better than `attr`.
 65 | 
 66 | ###### Argument Organization ######
 67 | 
 68 | Use Named Parameters (via [JS Harmony's Object Destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)) to make function calls easier to read.
 69 | 
 70 | [Example](#example-6)
 71 | 
 72 | ###### `className`s ######
 73 | 
 74 | CSS `className`s serve two purposes:
 75 | 
 76 |  - describing what kind of thing it is (e.g. if it was a component, what would its name be) - use `UpperCamelCase` for these.
 77 | 
 78 |  - describing what state that thing is in (left or right side, open or closed, etc.) - use `lowerCamelCase` for these.
 79 | 
 80 | Use [`classSet`](http://facebook.github.io/react/docs/class-name-manipulation.html) or `[].join(" ")` to put each class on its own line:
 81 | 
 82 | ```javascript
 83 |                                     return  <div
 84 |                                               className = {
 85 |                                                             classSet(
 86 |                                                               {
 87 |                                                                 "CollapsableShingles":  true,
 88 |                                                                 "collapsed":            !this.state.isRoot && this.state.collapsed
 89 |                                                               }
 90 |                                                             )
 91 |                                                           }
 92 |                                             >
 93 | ```
 94 | 
 95 | ```javascript
 96 |                                               <div
 97 |                                                 className = {
 98 |                                                   [
 99 |                                                     this.props.side,
100 |                                                     "Drawer"
101 |                                                   ].join(" ")
102 |                                                 }
103 |                                               >
104 | ```
105 | 
106 | 
107 | ##### Organization #####
108 | 
109 | Use [CommonJS modules](http://nodejs.org/docs/latest/api/modules.html) to break your code up into self-contained sections.  Each module will export a single thing (like a React class); however, when constructing a namespace, that single thing will be a dictionary of other things.
110 | 
111 | Use whitespace to break code into chunks and declare variables where you use them.
112 | 
113 | [Example](#example-1)
114 | 
115 | ##### Whitespace #####
116 | 
117 | Use it, particularly:
118 | 
119 |  - around operators like `=, +, -, /, *`
120 |  - between items in a list
121 |  - inside the braces of a prop declaration
122 |  - around the parens of a function declaration
123 |  - around the fat arrow lambda, `=>`
124 | 
125 | In lists, dictionaries, and JSX expressions, each item/prop should exist on its own line.  Unless the {list,dictionary,JSX} is empty, the close (`], }, ), />`) should also be on its own line.
126 | 
127 | [Example](#example-5)
128 | 
129 | Add a line before the `} else {` of an if/else block.  Use two lines between different blocks of code (especially if the block itself contains empty lines).
130 | 
131 | [Example](#example-2)
132 | 
133 | ##### Indentation #####
134 | 
135 | Use 2-space soft tabs.  This should be set for you automatically with [EditorConfig](http://editorconfig.org/).
136 | 
137 | 2-space indentation has become commonplace in the community in recent years.  It also makes alignment for deeply-nested structures more sane.
138 | 
139 | ##### Alignment #####
140 | 
141 | Dictionaries, variable declarations, and CSS property lists have two columns (keys and values).  Keep all the keys aligned in the left column and the values aligned in the right.
142 | 
143 | Match the indentation of your opening brace/paren/bracket/tag when closing it.  Exceptions can be made for the opening brace of a function declaration.
144 | 
145 | [Example](#example-5)
146 | 
147 | Adjacent blocks don't need to have aligned columns, but all the items within a block should be aligned.
148 | 
149 | Your columns in a React class should be wide enough to fit the key `"componentWillReceiveProps"`; put your keys in position 5 and your values in position 35.
150 | 
151 | [Example](#example-3)
152 | 
153 | Each leg in a ternary should be on its own line, indented from its condition.
154 | 
155 | [Example](#example-3)
156 | 
157 | ##### Examples #####
158 | 
159 | ###### Example #1 ######
160 | 
161 | Notice:
162 | 
163 |  - `var middlewareInjector` appears in the same block it's used in
164 |  - each parameter in `stack.route()` gets its own line:
165 | 
166 | ```javascript
167 | Ambidex.prototype._initStack = function () {
168 |   var self = this;
169 | 
170 |   self.stack = new mach.stack();
171 |   self.stack.use(mach.logger);
172 |   self.stack.use(mach.gzip);
173 |   self.stack.use(mach.charset, "utf-8");
174 | 
175 |   var middlewareInjector = self._get("middlewareInjector");
176 |   if (middlewareInjector) {
177 |     middlewareInjector(self.stack);
178 |   }
179 | 
180 |   self.stack.route(
181 |     "*",
182 |     self._getRequestProcessor()
183 |   );
184 | };
185 | ```
186 | 
187 | ###### Example #2 ######
188 | 
189 | Notice:
190 | 
191 |  - The blank line above `} else {`
192 |  - The comment is aligned with the column it describes.
193 | 
194 | ```javascript
195 |                                     if (this.props.linkTo) {
196 |                                       LinkClass         = ReactRouter.Link;
197 |                                       linkAttributes.to = this.props.linkTo;
198 | 
199 |                                     } else {
200 |                                                             // React.DOM.a is now just "a"
201 |                                       LinkClass           = "a";
202 |                                       linkAttributes.href = this.props.href;
203 |                                     }
204 | ```
205 | 
206 | -------------------------------------------------------------------------------
207 | 
208 | ###### Example #3 ######
209 | 
210 | Notice:
211 | 
212 |  - Keys and values are each aligned in `propTypes` and in the `IconButton`'s props.  Each one gets its own line.
213 |  - The `IconButton`'s `<` and `/>` are aligned.  The `a`'s `<`, `>`, and `</a>` are also aligned.
214 |  - There are blank lines between each method definition.
215 |  - The methods' bodys (including each closing `}`) are aligned in a column at position 35.
216 |  - The legs of the ternary are each on their own indented line.
217 |  - `<nav>` and `</nav>` are aligned with the end of `return `.
218 |  - There are spaces around the `=`s and `()`s, and within the `{}`s.
219 |  - Dictionary keys are quoted.
220 | 
221 | ```javascript
222 | var React = require("react/addons");
223 | 
224 | var IconButton = require("./IconButton.jsx");
225 | var Silhouette = require("./Silhouette.jsx");
226 | 
227 | var AppBar = React.createClass(
228 |   {
229 |     "propTypes":                  {
230 |                                     "imagesURL":          React.PropTypes.string.isRequired,
231 |                                     "logoSrc":            React.PropTypes.string.isRequired,
232 |                                     "actionButtons":      React.PropTypes.element,
233 |                                     "shouldShowNavIcon":  React.PropTypes.bool,
234 |                                     "showNavAction":      React.PropTypes.func,
235 |                                     "makeLogoSilhouette": React.PropTypes.bool,
236 |                                   },
237 | 
238 |     "getDefaultProps":            function () {
239 |                                     return {
240 |                                       "makeLogoSilhouette": false
241 |                                     }
242 |                                   },
243 | 
244 |     "render":                     function () {
245 |                                     if (this.props.shouldShowNavIcon) {
246 |                                       var maybeNavIcon =  <IconButton
247 |                                                             src            = { this.props.imagesURL + "nav.svg" }
248 |                                                             onTouchTap     = { this.props.showNavAction }
249 |                                                             makeSilhouette = { true }
250 |                                                           />
251 |                                     }
252 | 
253 |                                     var ImageClass = this.props.makeLogoSilhouette
254 |                                       ? Silhouette
255 |                                       : "img";
256 | 
257 |                                     return  <nav className = "AppBar">
258 |                                               { maybeNavIcon }
259 | 
260 |                                               <a
261 |                                                 href      = "/"
262 |                                                 className = "Logo"
263 |                                               >
264 |                                                 <ImageClass src = { this.props.logoSrc } />
265 |                                               </a>
266 | 
267 |                                               <div className = "ActionButtons">
268 |                                                 { this.props.actionButtons }
269 |                                               </div>
270 |                                             </nav>;
271 |                                   }
272 |   }
273 | );
274 | 
275 | module.exports = AppBar;
276 | ```
277 | 
278 | -------------------------------------------------------------------------------
279 | 
280 | ###### Example #4 ######
281 | 
282 | Notice how the argument (`domainName`) and the return value (`<Tardis />`) are each aligned to their own column in this lambda:
283 | 
284 | ```javascript
285 |                                     var tardises = domainNames.map(
286 |                                       (domainName) => <Tardis
287 |                                                         url = { "//" + domainName + path }
288 |                                                         key = { "//" + domainName + path }
289 |                                                       />
290 |                                     );
291 | ```
292 | 
293 | -------------------------------------------------------------------------------
294 | 
295 | ###### Example #5 ######
296 | 
297 | Notice:
298 | 
299 |  - The indentation of each item makes the structure of the whole clear.
300 |  - Opening and closing braces/brackets/tags/parens are aligned, even in a deeply nested structure.
301 |  - The closing brace for `onSelect` is aligned with the beginning of the function declaration (just before `lineage`) rather than its opening brace.
302 |  - Usually, you'd want a newline after the first `{` in `onSelect`; however, defining the method on the same line as its name improves readability, so we omit the newline.
303 | 
304 | ```javascript
305 |                                     return  <Main
306 |                                               { ...this.props }
307 | 
308 |                                               leftSideBar             = {
309 |                                                                           <DrawerNavMenu
310 |                                                                             items         = {
311 |                                                                                               [
312 |                                                                                                 {
313 |                                                                                                   "label":      "Search",
314 |                                                                                                   "iconSrc":    STATIC_URL + "generic/images/search.svg",
315 |                                                                                                   "component":  <SearchPane/>
316 |                                                                                                 },
317 | 
318 |                                                                                                 {
319 |                                                                                                   "label":      "Shop",
320 |                                                                                                   "iconSrc":    STATIC_URL + "shopping/images/shirt.svg",
321 |                                                                                                   "component":  <CollapsableShingles
322 |                                                                                                                   model     = { self.state.categoryTreeModel }
323 |                                                                                                                   onSelect  = { lineage => {
324 |                                                                                                                                   self.navigation.go.toCategoryByLineage(lineage);
325 |                                                                                                                                   NavActions.hide();
326 |                                                                                                                                   return false;
327 |                                                                                                                                 }
328 |                                                                                                                               }
329 |                                                                                                                 />
330 |                                                                                                 },
331 | 
332 |                                                                                                 {
333 |                                                                                                   "label":      "Help",
334 |                                                                                                   "iconSrc":    STATIC_URL + "generic/images/help.svg",
335 |                                                                                                   "component":  <div>
336 |                                                                                                                   Help goes here!
337 |                                                                                                                 </div>
338 |                                                                                                 },
339 |                                                                                               ]
340 |                                                                                             }
341 |                                                                             selectedIndex = { 1 }
342 |                                                                           />
343 |                                                                         }
344 | 
345 |                                               makeLogoSilhouette      = { false }
346 |                                               logoSrc                 = { STATIC_URL + "example-merchant/images/logo.svg" }
347 |                                               appBarActionButtons     = {
348 |                                                                           <div>
349 |                                                                             <IconButton
350 |                                                                               src             = { STATIC_URL + "shopping/images/cart.svg" }
351 |                                                                               onTouchTap      = { CartActions.show }
352 |                                                                               makeSilhouette  = { true }
353 |                                                                             />
354 |                                                                           </div>
355 |                                                                         }
356 | 
357 |                                               rightSideBar            = {
358 |                                                                           <Cart />
359 |                                                                         }
360 |                                               rightSideBarHideAction  = { CartActions.hide }
361 |                                               rightSideBarIsOpen      = { self.state.rightSideBarIsOpen }
362 |                                             />;
363 | ```
364 | 
365 | -------------------------------------------------------------------------------
366 | 
367 | ###### Example #6 ######
368 | 
369 | Notice:
370 | 
371 |  - Function arguments are wrapped in `{}` so callers may pass them in by name.
372 | 
373 | ```javascript
374 | function TardisGallery(
375 |   {
376 |     ambidexPromises,
377 |     settings
378 |   }
379 | ) {
380 |   // ...
381 | }
382 | ```
383 | 
384 | 


--------------------------------------------------------------------------------
/src/Ambidex.server.js:
--------------------------------------------------------------------------------
  1 | // Adds `Promise.promisify`
  2 | require('prfun');
  3 | 
  4 | var fs                = require("fs");
  5 | 
  6 | fs = {
  7 |   "exists":           // Can't use Promisify because fs.exists doesn't have an error callback
  8 |                       (path) => {
  9 |                         return new Promise(
 10 |                           (resolve) => {
 11 |                             return require("fs").exists(path, resolve);
 12 |                           }
 13 |                         );
 14 |                       },
 15 | 
 16 |   "readFile":         Promise.promisify(fs.readFile)
 17 | };
 18 | 
 19 | var path              = require("path");
 20 | 
 21 | var Immutable         = require("immutable");
 22 | var Lazy              = require("lazy.js");
 23 | var mach              = require("mach");
 24 | var React             = require("react/addons");
 25 | var ReactRouter       = require("react-router");
 26 | var Webpack           = require("webpack");
 27 | var WebpackDevServer  = require("webpack-dev-server");
 28 | 
 29 | var {
 30 |   Reactor
 31 | } = require("experimental-nuclear-js");
 32 | 
 33 | var toCamelCase       = require("to-camel-case");
 34 | 
 35 | if (WebpackDevServer)
 36 |   WebpackDevServer.prototype.listen = Promise.promisify(WebpackDevServer.prototype.listen);
 37 | 
 38 | var createWebpackSettings           = require("./createWebpackSettings");
 39 | var createHandlerWithAmbidexContext = require("./createHandlerWithAmbidexContext");
 40 | var utilities                       = require("./addons/utilities");
 41 | 
 42 | function Ambidex (
 43 |   {
 44 |     settings,
 45 |     middlewareInjector
 46 |   }
 47 | ) {
 48 |   var  rejectInitializationPromise;
 49 |   var resolveInitializationPromise;
 50 | 
 51 |   var initializationPromise = new Promise(
 52 |     (resolve, reject) => {
 53 |       rejectInitializationPromise = (error) => {
 54 |         console.error(error.stack);
 55 |         reject(error);
 56 |       };
 57 | 
 58 |       resolveInitializationPromise = resolve;
 59 |     }
 60 |   );
 61 | 
 62 |   initializationPromise.ambidexInProgress = this;
 63 | 
 64 |   try {
 65 |     if (this === global)
 66 |       throw new Error("You forgot the `new` in `new Ambidex(…).then(ambidex => …)`");
 67 | 
 68 |     if (!settings)
 69 |       throw new Error("Ambidex requires a settings dictionary to be passed in:\n\t`new Ambidex({\"settings\": {…}}).then(ambidex => …)`");
 70 | 
 71 |     this._set("settings",           settings);
 72 |     this._set("middlewareInjector", middlewareInjector);
 73 | 
 74 | 
 75 |     if (settings.SHORT_NAME)
 76 |       process.title = settings.SHORT_NAME;
 77 | 
 78 |     this._verifyPaths(
 79 | 
 80 |     ).then(
 81 |       () => {
 82 |         this._initStack();
 83 |         this._initWebpack();
 84 | 
 85 |         return this._startServing().then(
 86 |           () => resolveInitializationPromise(this)
 87 |         );
 88 |       }
 89 |     ).catch(
 90 |       error =>  rejectInitializationPromise(error)
 91 |     );
 92 | 
 93 |     return initializationPromise;
 94 | 
 95 |   } catch (error) {
 96 |     rejectInitializationPromise(error);
 97 |   }
 98 | }
 99 | 
100 | Ambidex.prototype._has = function (key) {
101 |   return this.hasOwnProperty("_" + key);
102 | };
103 | 
104 | Ambidex.prototype._get = function (key) {
105 |   return this["_" + key];
106 | };
107 | 
108 | Ambidex.prototype._set = function (key, value) {
109 |   return this["_" + key] = value;
110 | }
111 | 
112 | Ambidex.prototype._verifyPaths = function () {
113 |   /*  - Converts all FILESYSTEM_PATHS to absolute,
114 |    *  - Makes sure they all exist,
115 |    *  - Stores them on this with `this._set("routesPath", FILESYSTEM_PATHS["ROUTES"])`, and
116 |    *  - `this.set("routes, require(ROUTES_PATH))`
117 |    */
118 | 
119 |   var settings  = this._get("settings");
120 |   var paths     = settings.FILESYSTEM_PATHS;
121 | 
122 |   paths["STYLES"] = paths["STYLES"] || __dirname + "/defaults/styles/init.css";
123 | 
124 |   [
125 |     "BASE",
126 |     "BUNDLES",
127 |   ].forEach(
128 |     (key) => {
129 |       if (paths[key]) {
130 |         paths[key] = paths[key].endsWith("/")
131 |           ? settings.FILESYSTEM_PATHS[key]
132 |           : settings.FILESYSTEM_PATHS[key] + "/";
133 |       }
134 |     }
135 |   );
136 | 
137 |   var basePath  = paths["BASE"];
138 | 
139 |   return Promise.all(
140 |     Lazy(paths).omit(["BASE"]).map(
141 |       (path, name) => {
142 |         path = path.startsWith("/")
143 |           ? path
144 |           : basePath + path;
145 | 
146 |         return fs.exists(path).then(
147 |           pathIsValid =>  {
148 |             if (pathIsValid) {
149 |               this._set(toCamelCase(name) + "Path", path);
150 | 
151 |             } else {
152 |               throw new Error("Ambidex could not find `" + path + "`.  Make sure routes.FILESYSTEM_PATHS[\"BASE\"] and [\"" + name + "\"] are set correctly.");
153 |             }
154 |           }
155 |         );
156 |       }
157 |     ).toArray()
158 | 
159 |   ).then(
160 |     () => {
161 |       this._set("basePath", basePath);
162 | 
163 |       this._reloadExternalModules();
164 |     }
165 |   );
166 | };
167 | 
168 | Ambidex.prototype._reloadExternalModules = function () {
169 |   this._set(
170 |     "Scaffold",
171 |     require(this._get("scaffoldPath") || __dirname + "/defaults/Scaffold.jsx")
172 |   );
173 | 
174 |   this._set(
175 |     "routes",
176 | 
177 |     require(this._get("routesPath"))
178 |   );
179 | 
180 |   // optional paths go here:
181 |   [
182 |     "nuclearDefinitions",
183 |   ].forEach(
184 |     objectName => {
185 |       var path = this._get(objectName + "Path");
186 | 
187 |       if (path) {
188 |         this._set(
189 |           objectName,
190 |           require(path)
191 |         );
192 |       }
193 |     }
194 |   );
195 | };
196 | 
197 | Ambidex.prototype._initWebpack = function () {
198 |   var settings = this._get("settings");
199 | 
200 |   var webpackSettingsOptions = {
201 |     "paths":              {
202 |                             "JSX":      __dirname + "/render.client.js",
203 |                             "STYLES":   this._get("stylesPath"),
204 |                             "BUNDLES":  this._get("bundlesPath"),
205 |                           },
206 |   };
207 | 
208 |   if (settings.ENABLE_HOT_MODULE_REPLACEMENT) {
209 |     webpackSettingsOptions.devServerOrigin = "http://" + settings.HOST + ":" + settings.WEBPACK_PORT;
210 | 
211 |   } else {
212 |     webpackSettingsOptions.minimizeFileSize = true;
213 |   }
214 | 
215 |   if (settings.SERVER_ONLY_MODULE_NAMES)
216 |     webpackSettingsOptions.ignoredModuleNames = settings.SERVER_ONLY_MODULE_NAMES;
217 | 
218 |   /*  Webpack constants are effectively string replacements.  Webpack looks for the keys that appear below and
219 |    *  substitutes them with the values on the right.  Therefore, the values must be stringified.  Otherwise:
220 |    *
221 |    *      "__constant":   "my string"     // the quotation marks create a string, but the string itself contains none
222 |    *      …
223 |    *      var myVariable = __constant;
224 |    *
225 |    *  would result in a syntax error:
226 |    *
227 |    *      var myVariable = my string;
228 |    *
229 |    *  For the same reason, we must stringify each path individually.  Otherwise, Webpack would be able to replace
230 |    *  `__ambidexPaths`, but would choke on `__ambidexPaths.routes`, as it wouldn't understand how to parse the
231 |    *  JSONified structure `__ambidexPaths` contained.
232 |    *
233 |    *  See https://github.com/webpack/webpack/issues/634#issuecomment-67832382
234 |    */
235 | 
236 |   webpackSettingsOptions.constants = {
237 |     "NODE_ENV":           JSON.stringify(NODE_ENV),
238 | 
239 |     "__ambidexSettings":  JSON.stringify(settings),
240 |     "__ambidexPaths":     Lazy(
241 |                             [
242 |                               "routes",
243 |                               "nuclearDefinitions",
244 |                             ]
245 |                           ).map(
246 |                             key => [key, JSON.stringify(this._get(key + "Path")) || "null"]
247 |                           ).toObject()
248 |   }
249 | 
250 |   // Make sure everything in `settings` is JSON-safe, so we fail consistently if we're passed unJSONifyable data
251 |   settings = this._set("settings", JSON.parse(webpackSettingsOptions.constants.__ambidexSettings));
252 | 
253 |   this._webpackSettings = createWebpackSettings(webpackSettingsOptions);
254 | 
255 |   this.webpack      = new Webpack(this._webpackSettings);
256 |   this.webpack.run  = Promise.promisify(this.webpack.run);
257 | 
258 |   if (settings.ENABLE_HOT_MODULE_REPLACEMENT) {
259 |     this.stack.use(
260 |       app => request => request.call(app).then(
261 |                           (response) => {
262 |                             response.headers["Access-Control-Allow-Origin"] = request.protocol + "//" + settings.HOST + ":" + settings.WEBPACK_PORT;
263 |                             return response;
264 |                           }
265 |                         )
266 |     );
267 | 
268 |     // There's no need to manually wait for Webpack to be finshed if the dev server
269 |     // is handling requests, so put a no-op Promise here.
270 |     this._webpackRan = Promise.resolve(null);
271 | 
272 |   } else {
273 |     this._webpackRan = this.webpack.run().then(
274 |       (stats) => {
275 |         console.log(stats.toString());
276 | 
277 |         var bundlesPath = this._get("bundlesPath");
278 | 
279 |         return [
280 |           stats,
281 | 
282 |           fs.readFile(
283 |             path.resolve(bundlesPath, "styles.js")
284 |           ),
285 | 
286 |           fs.readFile(
287 |             path.resolve(bundlesPath, "jsx.js")
288 |           )
289 |         ];
290 |       }
291 |     ).then(
292 |       promises => Promise.all(promises)
293 | 
294 |     ).then(
295 |       (resolvedPromises) => {
296 |         this._styleHTML  = resolvedPromises[1].toString();
297 |         this._scriptHTML = resolvedPromises[2].toString();
298 | 
299 |         // pass webpackStats through, since our other return values (HTML) are already exposed on this
300 |         return resolvedPromises[0];
301 |       }
302 |     ).catch(
303 |       (error) => {
304 |         console.error("Error packing bundles with Webpack:");
305 |         console.error(error.stack);
306 |       }
307 |     );
308 |   }
309 | };
310 | 
311 | Ambidex.prototype._initStack = function () {
312 |   var settings = this._get("settings");
313 | 
314 |   this.stack = new mach.stack();
315 |   this.stack.use(mach.logger);
316 |   this.stack.use(mach.gzip);
317 |   this.stack.use(mach.charset, "utf-8");
318 | 
319 |   var middlewareInjector = this._get("middlewareInjector");
320 |   if (middlewareInjector) {
321 |     middlewareInjector(this.stack);
322 |   }
323 | 
324 |   if (settings.FAV_ICON_URL) {
325 |     this.stack.get(
326 |       "/favicon.ico",
327 |       connection => connection.redirect(
328 |                       301,
329 |                       settings.FAV_ICON_URL
330 |                     )
331 |     );
332 |   }
333 | 
334 |   this.stack.route(
335 |     "*",
336 |     this._getRequestProcessor()
337 |   );
338 | };
339 | 
340 | // mach will hijack the `this` binding of a request processor
341 | // so we return a closure to preserve access to `this`
342 | Ambidex.prototype._getRequestProcessor = function () {
343 |   var settings                = this._get("settings");
344 |   var Scaffold                = this._get("Scaffold");
345 |   var nuclearDefinitionsPath  = this._get("nuclearDefinitionsPath");
346 | 
347 |   if (nuclearDefinitionsPath) {
348 |     var nuclearDefinitions = {
349 |       "ambidex":  require("./nuclearDefinitions"),
350 | 
351 |       ...require(nuclearDefinitionsPath),
352 |     };
353 |   }
354 | 
355 |   return (connection) => {
356 |     var bundlesURL = this._webpackSettings.output.publicPath;
357 | 
358 |     var router = ReactRouter.create(
359 |       {
360 |         "routes":   this._get("routes"),
361 |         "location": connection.location.path,
362 |       }
363 |     );
364 | 
365 |     // mach won't wait for a result unless we return a promise,
366 |     // so make sure we have one
367 |     var routerRan = new Promise(
368 |       (resolve, reject) => {
369 |         try {
370 |           router.run(
371 |             (Handler, routerState) => resolve([Handler, routerState])
372 |           );
373 | 
374 |         } catch (error) {
375 |           reject(error);
376 |         }
377 |       }
378 |     );
379 | 
380 |     return Promise.all(
381 |       [
382 |         routerRan,
383 |         this._webpackRan
384 |       ]
385 |     ).then(
386 |       // V8 doesn't seem to like resolving multiple values, so we have to wrap them in an extra array =\
387 |       ([[Handler, routerState]], webpackStats) => {
388 |         // Running ReactRouter against the <html> element is buggy, so we only
389 |         // render <body> with ReactRouter and do the rest as static markup with
390 |         // <Scaffold>
391 | 
392 |         var scaffoldProps = {
393 |           "title":      "",
394 |           "favIconSrc": settings.FAV_ICON_URL,
395 |           "style":      {},
396 |           "script":     {},
397 |           "body":       {},
398 |         };
399 | 
400 |         if (settings.ENABLE_HOT_MODULE_REPLACEMENT) {
401 |           scaffoldProps["style"].src  = bundlesURL + "styles.js";
402 |           scaffoldProps["script"].src = bundlesURL + "jsx.js";
403 | 
404 |         } else {
405 |           // Inline the source if we aren't using Hot Module Replacement to reduce
406 |           // unneccesary requests
407 |           scaffoldProps["style"].__html  = this._styleHTML;
408 |           scaffoldProps["script"].__html = this._scriptHTML;
409 |         }
410 | 
411 |         // Anything that changes here probably needs to change in render.client.js too
412 | 
413 |         // This is a placeholder until ReactRouter's new API ships and we can properly
414 |         // wait for data on the server
415 |         var maybeWaitingForReadyToRender = Promise.resolve(null);
416 | 
417 |         var HandlerWithAmbidexContext = createHandlerWithAmbidexContext(
418 |           {
419 |             "nuclear":   Boolean(nuclearDefinitionsPath)
420 |           }
421 |         );
422 | 
423 |         if (nuclearDefinitions) {
424 |           var reactor = new Reactor(nuclearDefinitions);
425 | 
426 |           try {
427 |             var cookie = connection.request.cookies["nuclearState"];
428 | 
429 |             if (cookie) {
430 |               reactor.deserialize(
431 |                 JSON.parse(
432 |                   cookie
433 |                 )
434 |               );
435 |             }
436 |           } catch (error) {
437 |             console.error("Error parsing cookie:", error.message);
438 |           }
439 | 
440 |           reactor.ambidex.actions.redirect = function (
441 |             {
442 |               path,
443 |               routeName,
444 |               params    = {},
445 |               query     = {},
446 |               permanent = false,
447 |             }
448 |           ) {
449 |             connection.redirect(
450 |               permanent
451 |                 ? 301
452 |                 : 302,
453 | 
454 |               path || router.makePath(
455 |                 routeName,
456 |                 params,
457 |                 query
458 |               )
459 |             );
460 |           };
461 | 
462 |           reactor.ambidex.actions.requireAuthentication = function (
463 |             {
464 |               routeName = "login",
465 |               params    = {},
466 |               query     = {},
467 |               next,
468 |             } = {}
469 |           ) {
470 |             if (next || !query.next)
471 |               query.next = connection.location.path;
472 | 
473 |             reactor.ambidex.actions.redirect(
474 |               {
475 |                 routeName,
476 |                 params,
477 |                 query,
478 |               }
479 |             );
480 |           };
481 | 
482 | 
483 |           reactor.ambidex.actions.loadSettings(
484 |             {
485 |               settings
486 |             }
487 |           );
488 | 
489 |           reactor.ambidex.actions.routerStateChanged(
490 |             {
491 |               routerState
492 |             }
493 |           );
494 |         }
495 | 
496 |         return maybeWaitingForReadyToRender.then(
497 |           () => {
498 |             // There's no React lifecycle hook that fires on the server post-render
499 |             // so we (sadly) have to fake one here to get titles to work properly.
500 |             var serverDidRenderCallback;
501 | 
502 |             scaffoldProps["body"].__html = React.renderToString(
503 |               <HandlerWithAmbidexContext
504 |                 setTitle                  = {
505 |                                               title => {
506 |                                                 scaffoldProps["title"] = title;
507 |                                               }
508 |                                             }
509 | 
510 |                 listenForServerDidRender  = {
511 |                                               callback => {
512 |                                                 serverDidRenderCallback = callback;
513 |                                               }
514 |                                             }
515 | 
516 |                 { ...{Handler, settings, reactor} }
517 |               />
518 |             );
519 | 
520 |             if (serverDidRenderCallback)
521 |               serverDidRenderCallback();
522 | 
523 |             if (reactor)
524 |               scaffoldProps["storeStateByName"] = reactor.serialize();
525 | 
526 |             return connection.html(
527 |               [
528 |                 "<!DOCTYPE html>",
529 | 
530 |                 React.renderToStaticMarkup(
531 |                   <Scaffold
532 |                     { ...scaffoldProps }
533 |                   />
534 |                 )
535 |               ].join("\n")
536 |             );
537 |           }
538 |         );
539 |       }
540 |     ).catch(
541 |       error => {
542 |         console.error(error.stack);
543 | 
544 |         return {
545 |           "status":   error.httpStatus || 500,
546 |           "content": "An error has occurred.  Check your server logs."
547 |         };
548 |       }
549 |     )
550 |   }
551 | };
552 | 
553 | Ambidex.prototype._startServing = function () {
554 |   return Promise.all(
555 |     [
556 |       this._startServingWebpack(),
557 |       this._startServingStack(),
558 |     ]
559 |   );
560 | };
561 | 
562 | Ambidex.prototype._startServingStack = function () {
563 |   var settings = this._get("settings");
564 | 
565 | 
566 |   // mach.serve isn't async, but we make a promise anyway because Webpack is, and we want to be consistent.
567 |   return new Promise(
568 |     (resolve, reject) => {
569 |       var isAlreadyBeingServed = Boolean(
570 |             this._isBeingServedExternally
571 | 
572 |         ||  (
573 |                  this.stack.nodeServer
574 |               && this.stack.nodeServer.address()
575 |             )
576 |       );
577 | 
578 |       try {
579 |         if (!isAlreadyBeingServed) {
580 |           var port = settings.VM_PORT || settings.PORT;
581 | 
582 |           console.info(`Starting mach for ${ settings.NAME } on ${ settings.HOST }:${ port }…`);
583 | 
584 |           this.stack.nodeServer = mach.serve(
585 |             this.stack,
586 |             settings.VM_PORT || settings.PORT
587 |           );
588 |         }
589 | 
590 |         resolve();
591 | 
592 |       } catch (error) {
593 |         reject(error);
594 |       }
595 |     }
596 |   );
597 | };
598 | 
599 | Ambidex.prototype._startServingWebpack = function () {
600 |   var settings = this._get("settings");
601 | 
602 |   if (settings.ENABLE_HOT_MODULE_REPLACEMENT) {
603 | 
604 |     this.webpackDevServer = new WebpackDevServer(
605 |       this.webpack,
606 |       {
607 |         "hot":        true,
608 |         "publicPath": this._webpackSettings.output.publicPath
609 |       }
610 |     );
611 | 
612 |     /*  The function below reloads the server's copies of user-supplied code
613 |      *  whenever HMR is triggered.
614 |      *
615 |      *  There are many ways we could do this:
616 |      *
617 |      *  One approach would be to listen for "done" and purge whatever modules
618 |      *  were built (or cached) by Webpack, but that leads to instability in
619 |      *  modules like ReactRouter and Mach that aren't designed to be reloaded
620 |      *  in the same process.
621 |      *
622 |      *  Another approach would be to just erase everything in require.cache.
623 |      *  Not only is that inefficient, but it also creates a memory leak that
624 |      *  locks up Node.
625 |      *
626 |      *  Therefore, the approach we're using is to erase anything in the
627 |      *  user-supplied basePath that isn't a node module.  If the user is editing
628 |      *  code in multiple modules, they'll have to restart the server for the time
629 |      *  being, but for the general case, this provides HMR for server-rendered
630 |      *  code (not just the client-rendered HMR we get out-of-the-box with
631 |      *  Webpack) in a safe and reliable way.
632 |      */
633 | 
634 |     var firstCompileCompleted;
635 | 
636 |     this.webpack.plugin(
637 |       "after-compile",
638 | 
639 |       (compilation, callWhenFinished) => {
640 |         if (firstCompileCompleted) {
641 |           // Don't crash the server trying to reload a malformed module
642 |           if (compilation.errors.length === 0) {
643 |             var basePath = this._get("basePath");
644 | 
645 |             Object.keys(require.cache).forEach(
646 |               path => {
647 |                 if (path.includes(basePath)) {
648 |                   if (path.replace(basePath, "").indexOf("node_modules") === -1) {
649 |                     delete require.cache[path]
650 |                   }
651 |                 }
652 |               }
653 |             );
654 | 
655 |             this._reloadExternalModules();
656 |           }
657 |         } else {
658 |           firstCompileCompleted = true;
659 |         }
660 | 
661 |         callWhenFinished();
662 |       }
663 |     );
664 | 
665 |     return this.webpackDevServer.listen(
666 |       settings.WEBPACK_PORT
667 |     ).then(
668 |       (result) => {
669 |         console.info(`Starting Webpack Dev Server for ${ settings.NAME } on ${ settings.HOST }:${ settings.WEBPACK_PORT }…`);
670 |       }
671 |     );
672 |   } else {
673 |     return null;
674 |   }
675 | };
676 | 
677 | module.exports = Ambidex;
678 | 


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