Refactoring + fixes

Author: birdofpreyru

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Topcoder React Utils Changelog
 
+### v0.3.0
+- Added the standard, configurable server setup;
+- Jest utils are now exposed in a different way;
+- Config / isomorphy / webpack utils added;
+- Updated dependencies.
+
 ### v0.2.0
 - Webpack configs for apps updated to emulate `process.env.BABEL_ENV` instead of
   `process.env.NODE_ENV`. The original intent behind emulation of that constant

README.md

@@ -76,6 +76,8 @@ only need to call `adopt-dev-deps` again if you update
   with standard configuration, that serves a ReactJS application with or without
   server-side rendering, supports development tools (Hop Module Reloading), and
   can be further configured for the needs of specific projects.
+- [**Webpack**](docs/webpack-utils.md) — Various utils related to the
+  Webpack bundling process.
 
 ### <a name="development">Development</a>
 For convenient development you can link this package into your host package:

__tests__/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    "../config/babel/node-ssr"
+  ],
+  "plugins": [
+    ["module-resolver", {
+      "alias": {
+        "topcoder-react-utils/dist": "./src"
+      }
+    }]
+  ]
+}

__tests__/__snapshots__/index.js.snap

@@ -4,18 +4,106 @@ exports[`Exports expected stuff 1`] = `
 Object {
   "Avatar": [Function],
   "Button": [Function],
+  "JU": Object {
+    "findInDomByClass": [Function],
+    "render": [Function],
+    "renderDom": [Function],
+    "shallowRender": [Function],
+    "shallowSnapshot": [Function],
+    "simulate": Object {
+      "abort": [Function],
+      "animationEnd": [Function],
+      "animationIteration": [Function],
+      "animationStart": [Function],
+      "beforeInput": [Function],
+      "blur": [Function],
+      "canPlay": [Function],
+      "canPlayThrough": [Function],
+      "cancel": [Function],
+      "change": [Function],
+      "click": [Function],
+      "close": [Function],
+      "compositionEnd": [Function],
+      "compositionStart": [Function],
+      "compositionUpdate": [Function],
+      "contextMenu": [Function],
+      "copy": [Function],
+      "cut": [Function],
+      "doubleClick": [Function],
+      "drag": [Function],
+      "dragEnd": [Function],
+      "dragEnter": [Function],
+      "dragExit": [Function],
+      "dragLeave": [Function],
+      "dragOver": [Function],
+      "dragStart": [Function],
+      "drop": [Function],
+      "durationChange": [Function],
+      "emptied": [Function],
+      "encrypted": [Function],
+      "ended": [Function],
+      "error": [Function],
+      "focus": [Function],
+      "input": [Function],
+      "invalid": [Function],
+      "keyDown": [Function],
+      "keyPress": [Function],
+      "keyUp": [Function],
+      "load": [Function],
+      "loadStart": [Function],
+      "loadedData": [Function],
+      "loadedMetadata": [Function],
+      "mouseDown": [Function],
+      "mouseEnter": [Function],
+      "mouseLeave": [Function],
+      "mouseMove": [Function],
+      "mouseOut": [Function],
+      "mouseOver": [Function],
+      "mouseUp": [Function],
+      "paste": [Function],
+      "pause": [Function],
+      "play": [Function],
+      "playing": [Function],
+      "progress": [Function],
+      "rateChange": [Function],
+      "reset": [Function],
+      "scroll": [Function],
+      "seeked": [Function],
+      "seeking": [Function],
+      "select": [Function],
+      "stalled": [Function],
+      "submit": [Function],
+      "suspend": [Function],
+      "timeUpdate": [Function],
+      "toggle": [Function],
+      "touchCancel": [Function],
+      "touchEnd": [Function],
+      "touchMove": [Function],
+      "touchStart": [Function],
+      "transitionEnd": [Function],
+      "volumeChange": [Function],
+      "waiting": [Function],
+      "wheel": [Function],
+    },
+    "snapshot": [Function],
+  },
   "Link": [Function],
   "NavLink": [Function],
   "ScalableRect": [Function],
-  "utils": Object {
-    "config": Config {},
-    "isomorphy": Object {
-      "buildTimestamp": [Function],
-      "isClientSide": [Function],
-      "isDevBuild": [Function],
-      "isProdBuild": [Function],
-      "isServerSide": [Function],
-    },
+  "config": Config {
+    "dummyConfigKey": "Dummy config value",
+  },
+  "isomorphy": Object {
+    "buildTimestamp": [Function],
+    "isClientSide": [Function],
+    "isDevBuild": [Function],
+    "isProdBuild": [Function],
+    "isServerSide": [Function],
+  },
+  "server": [Function],
+  "webpack": Object {
+    "default": undefined,
+    "requireWeak": [Function],
   },
 }
 `;

__tests__/index.js

@@ -1,4 +1,6 @@
-import * as exports from '../src';
+jest.mock('utils/isomorphy');
+
+const exports = require('../src');
 
 test('Exports expected stuff', () => {
   expect(exports).toMatchSnapshot();

__tests__/shared/utils/config.js

@@ -18,10 +18,10 @@ beforeEach(() => {
   window.CONFIG = _.clone(CLIENT_SIDE_CONFIG);
 });
 
-afterEach(() => delete global.FRONT_END);
+afterEach(() => delete window.TRU_FRONT_END);
 
 test('Serves injected config at the client side', () => {
-  global.FRONT_END = true;
+  window.TRU_FRONT_END = true;
   expect(isClientSide()).toBe(true);
   expect(require('utils/config')).toEqual(CLIENT_SIDE_CONFIG);
 });

__tests__/shared/utils/isomorphy.js

@@ -1,48 +1,65 @@
 /* Helper for loading of tested module. */
+
+/* global window */
+
 const m = () => require('utils/isomorphy');
 
 afterEach(() => {
-  delete global.BUILD_INFO;
-  delete global.BUILD_TIMESTAMP;
-  delete global.FRONT_END;
+  delete global.TRU_BUILD_INFO;
+  delete window.TRU_BUILD_INFO;
+  delete window.TRU_FRONT_END;
   delete process.env.BABEL_ENV;
-  process.env.NODE_ENV = 'test';
 });
 
 beforeEach(() => jest.resetModules());
 
 test('Client-side detection', () => {
-  global.FRONT_END = 'true';
+  window.TRU_FRONT_END = true;
   expect(m().isClientSide()).toBe(true);
   expect(m().isServerSide()).toBe(false);
 });
 
 test('Server-side detection', () => {
-  expect(global.FRONT_END).toBeUndefined();
   expect(m().isClientSide()).toBe(false);
   expect(m().isServerSide()).toBe(true);
 });
 
-test('Dev code build detection', () => {
+test('Dev mode detection - client side', () => {
+  window.TRU_BUILD_INFO = { mode: 'development' };
+  window.TRU_FRONT_END = true;
+  expect(m().isDevBuild()).toBe(true);
+  expect(m().isProdBuild()).toBe(false);
+});
+
+test('Dev mode detection - server side', () => {
   process.env.BABEL_ENV = 'development';
   expect(m().isDevBuild()).toBe(true);
   expect(m().isProdBuild()).toBe(false);
+  delete process.env.BABEL_ENV;
+});
+
+test('Prod mode - client side', () => {
+  window.TRU_BUILD_INFO = { mode: 'production' };
+  window.TRU_FRONT_END = true;
+  expect(m().isDevBuild()).toBe(false);
+  expect(m().isProdBuild()).toBe(true);
 });
 
-test('Prod code build detection', () => {
+test('Prod mode - server side', () => {
   process.env.BABEL_ENV = 'production';
   expect(m().isDevBuild()).toBe(false);
   expect(m().isProdBuild()).toBe(true);
+  delete process.env.BABEL_ENV;
 });
 
-test('Build timestamp on client-side', () => {
-  global.BUILD_TIMESTAMP = 'DUMMY_TIMESTAMP';
-  global.FRONT_END = true;
-  expect(m().buildTimestamp()).toBe('DUMMY_TIMESTAMP');
+test('Build timestamp - client-side', () => {
+  window.TRU_BUILD_INFO = { timestamp: 'Test build timestamp' };
+  window.TRU_FRONT_END = true;
+  expect(m().buildTimestamp()).toBe('Test build timestamp');
 });
 
-test('Build timestamp on server-side', () => {
-  global.BUILD_INFO = { timestamp: 'DUMMY_TIMESTAMP' };
-  expect(global.FRONT_END).toBeUndefined();
-  expect(m().buildTimestamp()).toBe('DUMMY_TIMESTAMP');
+test('Build timestamp - server-side', () => {
+  global.TRU_BUILD_INFO = { timestamp: 'Test build timestamp' };
+  expect(window.FRONT_END).toBeUndefined();
+  expect(m().buildTimestamp()).toBe('Test build timestamp');
 });

config/test.js

@@ -0,0 +1,3 @@
+module.exports = {
+  dummyConfigKey: 'Dummy config value',
+};

config/webpack/lib-base.js

@@ -35,7 +35,6 @@ module.exports = function configFactory(ops) {
     entry: ops.entry,
     externals: [
       'babel-runtime',
-      'config',
       'lodash',
       'moment',
       'prop-types',

docs/config-utils.md

@@ -8,9 +8,9 @@ both at server- and client-side.
 
 Use it this way:
 ```js
-import { utils } from 'topcoder-react-utils';
+import { config } from 'topcoder-react-utils';
 
-const config = utils.config;
+// Some code relying on the config.
 ```
 
 Keep in mind that config still can be different at client- and server-side, due

docs/isomorphy-utils.md

@@ -2,37 +2,30 @@
 Collection of helpers to deal with isomorphic aspects of the code.
 
 **Why?** — Most of our ReactJS code should be isomorphic, i.e. it should
-be functional both when executed at client-side (in browser), and when executed
-at server-side (in NodeJS), without extra care of the caller. In some cases, it
-demands to explicitely check, where the code is executed, and proceed depending
-on that. This module provides functions that allow to do such checks, and to get
-some additional information about the currently running code.
+be functional both when executed at the client-side (in browser), and when
+executed at the server-side (in NodeJS), without extra care of the caller.
+In some cases, it demands to explicitely check, where the code is executed, and
+proceed depending on that. This module provides functions that allow to do such
+checks, and to get some additional information about the currently running code.
 
-All functions provided by this module should be imported and used like:
-```js
-import { utils } from 'topcoder-react-utils';
-
-utils.isomorphy.isClientSide();
-```
-
-Note that `isClientSide()` and `isServerSide()` functions rely on the global
-`FRONT_END` variable being defined only inside JS bundle build for the frontend
-execution by our standard Wepback config for apps. It is assumed that this
-variable won't be present in NodeJS environment.
+**Important Notes:**
+- All functionality of this module relies on `topcoder-react-utils`
+  configuration / client initialization / server code beign used in your
+  project;
+- `isDevBuild()` and `isProdBuild()` functions return dev/prod mode of the
+  currently executed code. While the server launched in dev mode always serve
+  dev version of the frontend code, the server launched in prod mode can serve
+  either prod, or dev versions of the code, depending on which of them was build
+  before by the caller. Note that the mode depends on the value `BABEL_ENV`
+  environment variable (at the build time, for the front-end code; or at
+  the present time, for the server-side code). `NODE_ENV` variable, in turn,
+  defines the runtime environment, which can be configured via
+  [`config`](./config-utils.md).
 
-`isDevBuild()` and `isProdBuild()` functions rely on `BABEL_ENV` environment
-variable, and they tell about the build-time configuration of the code, which
-should be the same at the client- and server-side to ensure proper server-side
-rendering. This is independent of `NODE_ENV` environment variable, which sets
-the runtime configuration of the app, e.g. the API keys and endpoints to call
-for development and production, etc.
+[Example](#example)
 
-`buildTimestamp()` function  relies on the global `BUILD_TIMESTAMP` variable
-defined in the frontend JS bundle build by our standard Webpack congif for app;
-at the server-side it relies on our standard server to expose, via the global
-`BUILD_INFO` object, the build info about the bundle served by the server.
+### Reference
 
-### Provided Functions
 - **`buildTimestamp()`** — Returns build timestamp of the frontend JS
   bundle, in form of ISO date/time string. At the server-side it will be the
   timestamp of bundle being served by the server.
@@ -42,6 +35,14 @@ at the server-side it relies on our standard server to expose, via the global
   is running; `false` otherwise.
 - **`isProdBuild()`** — Returns `true` if the production version of the
   code is running; `false` otherwise.
-  variable (`NODE_ENV`, in turns, determines runtime configuration of the app).
 - **`isServerSide()`** — Returns `true` if executed at the server-side
   (in NodeJS); `false` otherwise.
+
+### Example
+```js
+import { isomorphy } from 'topcoder-react-utils';
+
+if (isomorphy.isClientSide()) {
+  // Do some useful staff here, if executed at the client-side.
+}
+```