Draft version of the client-side initialization code

Author: birdofpreyru

README.md

@@ -63,6 +63,7 @@ only need to call `adopt-dev-deps` again if you update
   the specified aspect ratio regardless the width you set.
 
 ### <a name="utilities">Utilities</a>
+- [**Client**](docs/client.md) &mdash; Client-side initialization code.
 - [**Config**](docs/config.md) &mdash; Isomorphic app config;
 - [**Global Styles**](docs/global-styles.md) &mdash; Global styles necessary for
   a generic application;

__tests__/__snapshots__/index.js.snap

@@ -8,6 +8,7 @@ Object {
   "Link": [Function],
   "NavLink": [Function],
   "ScalableRect": [Function],
+  "client": [Function],
   "config": undefined,
   "isomorphy": Object {
     "buildTimestamp": [Function],
@@ -115,6 +116,7 @@ Object {
   "Link": [Function],
   "NavLink": [Function],
   "ScalableRect": [Function],
+  "client": [Function],
   "config": Config {
     "SECRET": Object {
       "dummySecretKey": "Dummy Secret Value",

docs/client.md

@@ -0,0 +1,4 @@
+# Client
+Client-side intialization code.
+
+*Documentation will be added here*

package-lock.json

@@ -28,6 +28,7 @@
     "request-ip": "^2.0.2",
     "serialize-javascript": "^1.4.0",
     "serve-favicon": "^2.5.0",
+    "shortid": "^2.2.8",
     "url-parse": "^1.2.0",
     "winston": "^2.4.0"
   },
@@ -105,5 +106,5 @@
     "prepublishOnly": "npm run build",
     "test": "npm run lint && npm run jest"
   },
-  "version": "0.3.0"
+  "version": "0.3.1"
 }

package.json

@@ -0,0 +1,84 @@
+/**
+ * Initialization of client-side code.
+ */
+
+/* global BUILD_INFO document window */
+
+import forge from 'node-forge';
+import React from 'react';
+import ReactDom from 'react-dom';
+import shortId from 'shortid';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+
+/**
+ * Renders given application into DOM, providing it with Redux store, if given.
+ * @param {Function} Application Root ReactJS component of the app.
+ * @param {Object} store Optional. Redux store.
+ */
+function render(Application, store) {
+  let app = <BrowserRouter><Application /></BrowserRouter>;
+  if (store) app = <Provider store={store}>{app}</Provider>;
+  ReactDom.hydrate(app, document.getElementById('react-view'));
+}
+
+/**
+ * Initializes the code at client side. It takes care about receiving the data
+ * injected at the server-side, and also about setting up client side of hot
+ * module reloading (HMR).
+ * @param {Object} options Parameters accepted by the function.
+ * @param {Function} options.Application Root component of the application to be
+ *  rendered at the client side.
+ * @param {String} options.appModulePath Optional. Path to the root module of
+ *  the application. It should be provided to setup HMR.
+ * @param {Function} options.customInit Optional. A custom function to be called
+ *  before initial client-side rendering. It should return a promise that
+ *  resolves to an object with the following params:
+ *  - store {Object} - Optional. Redux store to be used.
+ */
+export default async function Init(options) {
+  /* Injection of build-time data information into the client-side bundle. */
+  window.TRU_BUILD_INFO = BUILD_INFO;
+  window.TRU_FRONT_END = true;
+
+  /* Removes data injection script out of the document. */
+  const block = document.querySelector('script[id="inj"]');
+  document.getElementsByTagName('body')[0].removeChild(block);
+
+  /* Decodes data injected at the server side. */
+  const { key } = window.TRU_BUILD_INFO;
+  let data = forge.util.decode64(window.INJ);
+  const decipher = forge.cipher.createDecipher('AES-CBC', key);
+  decipher.start({ iv: data.slice(0, 32) });
+  decipher.update(forge.util.createBuffer(data.slice(32)));
+  decipher.finish();
+  data = JSON.parse(forge.util.decodeUtf8(decipher.output.data));
+
+  window.CONFIG = data.CONFIG;
+  window.ISTATE = data.ISTATE;
+
+  let store;
+  if (options.customInit) ({ store } = await options.customInit());
+  render(options.Application, store);
+
+  if (module.hot && options.appModulePath) {
+    module.hot.accept(
+      options.appModulePath,
+      () => render(options.Application, store),
+    );
+
+    /* HMR of CSS code each time webpack hot middleware updates the code. */
+    /* eslint-disable no-underscore-dangle */
+    const hotReporter = window.__webpack_hot_middleware_reporter__;
+    /* eslint-enable no-underscore-dangle */
+    const hotSuccess = hotReporter.success;
+    hotReporter.success = () => {
+      const stamp = shortId();
+      const links = document.querySelectorAll('link[rel=stylesheet]');
+      for (let i = 0; i < links.length; i += 1) {
+        links[i].href = `${links[i].href.match(/[^?]*/)}?v=${stamp}`;
+      }
+      hotSuccess();
+    };
+  }
+}

src/client/index.js

@@ -1,3 +1,4 @@
+import client from 'client';
 import Avatar from 'components/Avatar';
 import Button from 'components/Button';
 import Link from 'components/Link';
@@ -13,6 +14,7 @@ const server = utils.isomorphy.isServerSide() ?
   requireWeak('topcoder-react-utils/dist/server') : null;
 
 module.exports = {
+  client,
   Avatar,
   Button,
   Link,