Merge branch 'develop'

Author: birdofpreyru

CHANGELOG.md

@@ -1,5 +1,33 @@
 # Topcoder React Utils Changelog
 
+### v0.6.0
+- A better way to build the library: both dev and prod builds are created; and
+  the proper version is selected depending on `NODE_ENV` value at the buildtime
+  (client-side) or runtime (server-side) of the host code.
+
+  **BREAKING CHANGE:** You should update the way you include style the global
+  stylesheet into the host code, from:
+  ```jsx
+  require('topcoder-react-utils/dist/style.css');
+  ```
+  to
+  ```jsx
+  /* eslint-disable global-require */
+  if (process.env.NODE_ENV === 'production') {
+    require('topcoder-react-utils/dist/prod/style.css');
+  } else {
+    require('topcoder-react-utils/dist/dev/style.css');
+  }
+  /* eslint-enable global-require */
+  ```
+  This will include the proper version of compiled global styles into the host
+  code.
+
+- Also most of NPM dependencies updated to their latest versions, which might
+  demand some fixes in your code.
+
+- Adds optional `type` prop to [`<Button>`](docs/button.md)
+
 ### v0.5.0
 All dependencies are force-updated to their latest versions. It might introduce
 breaking changes.

README.md

@@ -26,8 +26,14 @@ $ npm install --save topcoder-react-utils
 $ ./node_modules/.bin/topcoder-lib-setup
 ```
 Then import the global stylesheet into the root ReactJS component of your app:
-```js
-import 'topcoder-react-utils/dist/style.css';
+```jsx
+/* eslint-disable global-require */
+if (process.env.NODE_ENV === 'production') {
+  require('topcoder-react-utils/dist/prod/style.css');
+} else {
+  require('topcoder-react-utils/dist/dev/style.css');
+}
+/* eslint-enable global-require */
 ```
 
 To upgrade this library to the latest version just execute again

__tests__/server/renderer.jsx

@@ -40,8 +40,9 @@ const TEST_WEBPACK_CONFIG = {
   },
 };
 
-const testBuildInfo =
-  JSON.parse(fs.readFileSync(`${TEST_CONTEXT}/.build-info`));
+const testBuildInfo = JSON.parse(
+  fs.readFileSync(`${TEST_CONTEXT}/.build-info`),
+);
 
 beforeAll(() => {
   Helmet.canUseDOM = false;
@@ -84,11 +85,11 @@ async function coreTest(webpackConfig, options) {
   }
 }
 
-test('Base rendering of HTML template', () =>
-  coreTest(TEST_WEBPACK_CONFIG, {}));
+test('Base rendering of HTML template',
+  () => coreTest(TEST_WEBPACK_CONFIG, {}));
 
-test('Config overriding for injection', () =>
-  coreTest(TEST_WEBPACK_CONFIG, {
+test('Config overriding for injection',
+  () => coreTest(TEST_WEBPACK_CONFIG, {
     beforeRender: async (res, sanitizedConfig) => {
       expect(res).toEqual(TEST_HTTP_REQUEST);
       expect(sanitizedConfig).toBeInstanceOf(Object);
@@ -102,22 +103,28 @@ test('Config overriding for injection', () =>
     },
   }));
 
-test('Hemlet integration works', () =>
-  coreTest(TEST_WEBPACK_CONFIG, {
+test('Hemlet integration works',
+  () => coreTest(TEST_WEBPACK_CONFIG, {
     Application: () => (
       <div>
-        <p>Hello World!</p>
+        <p>
+          Hello World!
+        </p>
         <Helmet>
-          <title>Test Page Title</title>
+          <title>
+            Test Page Title
+          </title>
           <meta property="description" content="Test Page Description" />
         </Helmet>
-        <p>Goodbye World!</p>
+        <p>
+          Goodbye World!
+        </p>
       </div>
     ),
   }));
 
-test('Injection of additional JS scripts', () =>
-  coreTest(TEST_WEBPACK_CONFIG, {
+test('Injection of additional JS scripts',
+  () => coreTest(TEST_WEBPACK_CONFIG, {
     beforeRender: async () => ({
       extraScripts: [
         '<script>Dummy JS Sript</script>',
@@ -126,14 +133,18 @@ test('Injection of additional JS scripts', () =>
     }),
   }));
 
-test('Server-side rendering (SSR); injection of CSS chunks & Redux state', () =>
-  coreTest(TEST_WEBPACK_CONFIG, {
+test('Server-side rendering (SSR); injection of CSS chunks & Redux state',
+  () => coreTest(TEST_WEBPACK_CONFIG, {
     Application: () => (
       <Route
         component={({ staticContext }) => {
           staticContext.chunks.push('test-chunk-a');
           staticContext.chunks.push('test-chunk-b');
-          return <div>Hello Wold!</div>;
+          return (
+            <div>
+              Hello Wold!
+            </div>
+          );
         }}
       />
     ),
@@ -148,7 +159,11 @@ test('Setting of response HTTP status the server-side rendering', () => {
       <Route
         component={({ staticContext }) => {
           staticContext.status = 404; // eslint-disable-line no-param-reassign
-          return <div>404 Error Test</div>;
+          return (
+            <div>
+              404 Error Test
+            </div>
+          );
         }}
       />
     ),

__tests__/server/server.js

@@ -13,8 +13,8 @@ jest.mock('webpack', () => {
   return mock;
 });
 
-jest.mock('webpack-hot-middleware', () =>
-  jest.fn(() => (req, res, next) => next()));
+jest.mock('webpack-hot-middleware',
+  () => jest.fn(() => (req, res, next) => next()));
 
 const TEST_CONTEXT = `${__dirname}/test_data`;
 

__tests__/shared/actions/collection.js

@@ -13,8 +13,8 @@ afterAll(() => MockDate.reset());
 
 test('Exports expected actions', () => expect(actions).toMatchSnapshot());
 
-test('`addItems` payload creator', () =>
-  expect(a.addItems({ id1: 'Item 1', id2: 'Item 2' })).toMatchSnapshot());
+test('`addItems` payload creator',
+  () => expect(a.addItems({ id1: 'Item 1', id2: 'Item 2' })).toMatchSnapshot());
 
 test('`bookItems` payload creator', () => {
   expect(a.bookItems('id1')).toMatchSnapshot();
@@ -33,8 +33,9 @@ test('`freeItems` payload creator', () => {
   expect(a.freeItems(['id1', 'id2', 'id3'])).toMatchSnapshot();
 });
 
-test('`loadItemInit` payload creator', () =>
-  expect(a.loadItemInit('operation-id', 'item-id')).toMatchSnapshot());
+test('`loadItemInit` payload creator',
+  () => expect(a.loadItemInit('operation-id', 'item-id')).toMatchSnapshot());
 
-test('`loadItemDone` payload creator', () =>
-  expect(a.loadItemDone('operation-id', 'item-id', 'item')).toMatchSnapshot());
+test('`loadItemDone` payload creator', () => {
+  expect(a.loadItemDone('operation-id', 'item-id', 'item')).toMatchSnapshot();
+});

__tests__/shared/actions/index.js

@@ -4,5 +4,5 @@
 
 import actions from 'actions';
 
-test('Exports expected actions', () =>
-  expect(actions).toMatchSnapshot());
+test('Exports expected actions',
+  () => expect(actions).toMatchSnapshot());

__tests__/shared/components/Button.jsx

@@ -76,4 +76,3 @@ describe('Matches snapshots', () => {
     ));
   });
 });
-

__tests__/shared/components/GenericLink.jsx

@@ -3,13 +3,20 @@
 import GenericLink from 'components/GenericLink';
 import PT from 'prop-types';
 import React from 'react';
-import { findInDomByClass, renderDom, simulate, snapshot } from 'utils/jest';
+import {
+  findInDomByClass,
+  renderDom,
+  simulate,
+  snapshot,
+} from 'utils/jest';
 
 function Link(props) {
+  const { className, onClick } = props;
   return (
     <button
-      onClick={props.onClick}
-      className={props.className}
+      onClick={onClick}
+      className={className}
+      type="button"
     >
       {JSON.stringify(props)}
     </button>

__tests__/shared/components/ScalableRect.jsx

@@ -3,7 +3,11 @@ import React from 'react';
 import { snapshot } from 'utils/jest';
 
 test('Snapshots match', () => {
-  snapshot(<ScalableRect>CONTENT</ScalableRect>);
+  snapshot((
+    <ScalableRect>
+      CONTENT
+    </ScalableRect>
+  ));
   snapshot((
     <ScalableRect
       className="CLASS_NAME"

__tests__/shared/components/__snapshots__/Button.jsx.snap

@@ -5,6 +5,7 @@ exports[`Matches snapshots when active 1`] = `
   className="BUTTON_CLASS ACTIVE_CLASS REGULAR_CLASS"
   onClick={[Function]}
   onMouseDown={null}
+  type="button"
 >
   BUTTON
 </button>
@@ -15,6 +16,7 @@ exports[`Matches snapshots when active 2`] = `
   className="BUTTON_CLASS ACTIVE_CLASS"
   onClick={[Function]}
   onMouseDown={null}
+  type="button"
 >
   BUTTON
 </button>

__tests__/shared/components/__snapshots__/GenericLink.jsx.snap

@@ -4,6 +4,7 @@ exports[`Matches snapshots in a minimalistic example 1`] = `
 <button
   className={null}
   onClick={[Function]}
+  type="button"
 >
   {"to":"SOME/TEST/URL","className":null,"onMouseDown":null,"replace":false,"children":"LINK"}
 </button>

__tests__/shared/utils/isomorphy.js

@@ -9,6 +9,7 @@ afterEach(() => {
   delete window.TRU_BUILD_INFO;
   delete window.TRU_FRONT_END;
   delete process.env.BABEL_ENV;
+  process.env.NODE_ENV = 'test';
 });
 
 beforeEach(() => jest.resetModules());
@@ -25,27 +26,27 @@ test('Server-side detection', () => {
 });
 
 test('Dev mode detection - client side', () => {
-  window.TRU_BUILD_INFO = { mode: 'development' };
+  process.env.NODE_ENV = 'development';
   window.TRU_FRONT_END = true;
   expect(m().isDevBuild()).toBe(true);
   expect(m().isProdBuild()).toBe(false);
 });
 
 test('Dev mode detection - server side', () => {
-  global.TRU_BUILD_INFO = { mode: 'development' };
+  process.env.NODE_ENV = 'development';
   expect(m().isDevBuild()).toBe(true);
   expect(m().isProdBuild()).toBe(false);
 });
 
 test('Prod mode - client side', () => {
-  window.TRU_BUILD_INFO = { mode: 'production' };
+  process.env.NODE_ENV = 'production';
   window.TRU_FRONT_END = true;
   expect(m().isDevBuild()).toBe(false);
   expect(m().isProdBuild()).toBe(true);
 });
 
 test('Prod mode - server side', () => {
-  global.TRU_BUILD_INFO = { mode: 'production' };
+  process.env.NODE_ENV = 'production';
   expect(m().isDevBuild()).toBe(false);
   expect(m().isProdBuild()).toBe(true);
 });

config/babel/node-ssr.js

@@ -17,8 +17,9 @@ config.plugins = config.plugins.concat([
   ['css-modules-transform', cssModulesTransformPluginOps],
 ]);
 
-const moduleResolverPluginOps
-  = config.plugins.find(x => x[0] === 'module-resolver')[1];
+const moduleResolverPluginOps = config.plugins.find(
+  x => x[0] === 'module-resolver',
+)[1];
 
 moduleResolverPluginOps.transformFunctions = [
   'resolveWeak',
@@ -41,7 +42,7 @@ switch (process.env.BABEL_ENV) {
 
 module.exports = (apt, ops = {}) => {
   const baseAssetsOutputPath = ops.baseAssetsOutputPath || '';
-  transformAssetsPluginOptions.name
-    = `${baseAssetsOutputPath}/images/[hash].[ext]`;
+  transformAssetsPluginOptions.name = `${
+    baseAssetsOutputPath}/images/[hash].[ext]`;
   return config;
 };

config/webpack/app-base.js

@@ -67,9 +67,6 @@ module.exports = function configFactory(ops) {
       /* A random 32-bit key, that can be used for encryption. */
       key: forge.random.getBytesSync(32),
 
-      /* This will be equal to "development" or "production" */
-      mode: ops.babelEnv,
-
       /* Build timestamp. */
       timestamp: now.utc().toISOString(),
     };
@@ -83,10 +80,10 @@ module.exports = function configFactory(ops) {
   else if (!_.isArray(entry.polyfills)) {
     entry.polyfills = [entry.polyfills];
   }
+
   entry.polyfills = _.union(entry.polyfills, [
     'babel-polyfill',
     'nodelist-foreach-polyfill',
-    'topcoder-react-utils/dist/client/init',
   ]);
 
   return {

config/webpack/app-development.js

@@ -3,9 +3,9 @@
  */
 
 const _ = require('lodash');
-const baseFactory = require('./app-base');
 const webpack = require('webpack');
 const webpackMerge = require('webpack-merge');
+const baseFactory = require('./app-base');
 
 /**
  * Creates a new development Webpack config, and performs some auxiliary
@@ -53,5 +53,6 @@ module.exports = function configFactory(ops) {
     'react-hot-loader/patch',
     'webpack-hot-middleware/client?reload=true',
   ].concat(res.entry.main);
+  res.entry.polyfills.push('topcoder-react-utils/dist/dev/client/init');
   return res;
 };

config/webpack/app-production.js

@@ -2,10 +2,10 @@
  * Production Webpack configuration for ReactJS applications.
  */
 
-const baseFactory = require('./app-base');
 const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const webpack = require('webpack');
 const webpackMerge = require('webpack-merge');
+const baseFactory = require('./app-base');
 
 /**
  * Creates a new production Webpack config, and performs some auxiliary
@@ -28,7 +28,7 @@ const webpackMerge = require('webpack-merge');
  * @param {String} ops.publicPath Base URL for the output of the build assets.
  */
 module.exports = function configFactory(ops) {
-  return webpackMerge.smart(baseFactory({
+  const res = webpackMerge.smart(baseFactory({
     ...ops,
     babelEnv: 'production',
     mode: 'production',
@@ -52,4 +52,6 @@ module.exports = function configFactory(ops) {
       }),
     ],
   });
+  res.entry.polyfills.push('topcoder-react-utils/dist/prod/client/init');
+  return res;
 };