Updates the way to pack library for releases

Author: birdofpreyru

CHANGELOG.md

@@ -1,5 +1,28 @@
 # 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.
+
 ### 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__/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/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

@@ -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

@@ -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;
 };

config/webpack/lib-base.js

@@ -28,6 +28,8 @@ const webpack = require('webpack');
  *
  * @param {String} ops.library Name of the library.
  *
+ * @param {String} ops.outputPath Output path.
+ *
  * @return {Object} Webpack config.
  */
 module.exports = function configFactory(ops) {
@@ -65,7 +67,7 @@ module.exports = function configFactory(ops) {
       globalObject: "typeof self !== 'undefined' ? self : this",
 
       library: ops.library,
-      path: path.resolve(__dirname, ops.context, 'dist'),
+      path: ops.outputPath,
       libraryTarget: 'umd',
     },
     plugins: [

config/webpack/lib-development.js

@@ -3,6 +3,7 @@
  */
 
 const baseFactory = require('./lib-base');
+const path = require('path');
 
 /**
  * Creates a new Webpack config.
@@ -25,5 +26,6 @@ module.exports = function configFactory(ops) {
     babelEnv: 'development',
     cssLocalIdent: '[path][name]___[local]___[hash:base64:6]',
     mode: 'development',
+    outputPath: path.resolve(__dirname, ops.context, 'dist/dev'),
   });
 };

config/webpack/lib-production.js

@@ -3,6 +3,7 @@
  */
 
 const baseFactory = require('./lib-base');
+const path = require('path');
 
 /**
  * Creates a new Webpack config.
@@ -25,5 +26,6 @@ module.exports = function configFactory(ops) {
     babelEnv: 'production',
     cssLocalIdent: '[hash:base64:6]',
     mode: 'production',
+    outputPath: path.resolve(__dirname, ops.context, 'dist/prod'),
   });
 };

index.js

@@ -0,0 +1,13 @@
+/**
+ * Entry point of the library.
+ *
+ * Depending on NODE_ENV variable, it proxies production or development build of
+ * the library.
+ */
+/* eslint-disable global-require, import/no-unresolved */
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./dist/prod');
+} else {
+  module.exports = require('./dist/dev');
+}

package-lock.json

@@ -101,21 +101,25 @@
     "React"
   ],
   "license": "MIT",
-  "main": "dist/index.js",
+  "main": "index.js",
   "name": "topcoder-react-utils",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/topcoder-platform/topcoder-react-utils.git"
   },
   "scripts": {
-    "build": "npm run clean && ./node_modules/.bin/webpack --env=production --colors --display-optimization-bailout --profile --progress && BABEL_ENV=production babel src/server --out-dir dist/server && BABEL_ENV=production babel src/shared/utils/jest.jsx --out-file dist/shared/utils/jest.js && BABEL_ENV=production babel src/client/init.js --out-file dist/client/init.js",
-    "build:dev": "npm run clean && (./node_modules/.bin/webpack --env=development --bail --colors --display-optimization-bailout --profile --progress --watch | BABEL_ENV=development babel src/server --out-dir dist/server --watch | BABEL_ENV=development babel src/shared/utils/jest.jsx --out-file dist/shared/utils/jest.js --watch | BABEL_ENV=development babel src/client/init.js --out-file dist/client/init.js --watch)",
-    "clean": "./node_modules/.bin/rimraf dist && mkdir -p dist/shared/utils && mkdir -p dist/client",
+    "build": "npm run clean && npm run build:dev && npm run build:prod",
+    "build:dev": "npm run mkDistDir:dev && ./node_modules/.bin/webpack --env=development --bail --colors --display-optimization-bailout --profile --progress && BABEL_ENV=development babel src/server --out-dir dist/dev/server && BABEL_ENV=development babel src/shared/utils/jest.jsx --out-file dist/dev/shared/utils/jest.js && BABEL_ENV=development babel src/client/init.js --out-file dist/dev/client/init.js",
+    "build:dev:watch": "npm run clean && npm run mkDistDir:dev && (./node_modules/.bin/webpack --env=development --bail --colors --display-optimization-bailout --profile --progress --watch | BABEL_ENV=development babel src/server --out-dir dist/dev/server --watch | BABEL_ENV=development babel src/shared/utils/jest.jsx --out-file dist/dev/shared/utils/jest.js --watch | BABEL_ENV=development babel src/client/init.js --out-file dist/dev/client/init.js --watch)",
+    "build:prod": "npm run mkDistDir:prod && ./node_modules/.bin/webpack --env=production --colors --display-optimization-bailout --profile --progress && BABEL_ENV=production babel src/server --out-dir dist/prod/server && BABEL_ENV=production babel src/shared/utils/jest.jsx --out-file dist/prod/shared/utils/jest.js && BABEL_ENV=production babel src/client/init.js --out-file dist/prod/client/init.js",
+    "clean": "./node_modules/.bin/rimraf dist",
     "jest": "NODE_CONFIG_ENV=test jest --no-cache --maxWorkers=4 --config config/jest/default.js",
     "lint": "npm run lint:js && npm run lint:scss",
     "lint:js": "eslint --ext .js,.jsx .",
     "lint:scss": "./node_modules/.bin/stylelint **/*.scss --syntax scss",
+    "mkDistDir:dev": "mkdir -p dist/dev/shared/utils && mkdir -p dist/dev/client",
+    "mkDistDir:prod": "mkdir -p dist/prod/shared/utils && mkdir -p dist/prod/client",
     "test": "npm run lint && npm run jest"
   },
-  "version": "0.5.3"
+  "version": "0.6.0"
 }

package.json

@@ -13,10 +13,12 @@ import * as utils from 'utils';
 
 import 'styles/global.scss';
 
+import { isProdBuild } from 'utils/isomorphy';
 import { requireWeak } from 'utils/webpack';
 
-const server = utils.isomorphy.isServerSide() ?
-  requireWeak('topcoder-react-utils/dist/server') : null;
+let serverUrl = isProdBuild() ? 'prod' : 'dev';
+serverUrl = `topcoder-react-utils/dist/${serverUrl}/server`;
+const server = utils.isomorphy.isServerSide() ? requireWeak(serverUrl) : null;
 
 module.exports = {
   actions,

src/index.js

@@ -3,8 +3,10 @@ import * as isomorphy from './isomorphy';
 import * as redux from './redux';
 import * as webpack from './webpack';
 
-const JU = isomorphy.isServerSide() ?
-  webpack.requireWeak('topcoder-react-utils/dist/shared/utils/jest') : null;
+let juUrl = isomorphy.isProdBuild() ? 'prod' : 'dev';
+juUrl = `topcoder-react-utils/dist/${juUrl}/shared/utils/jest`;
+
+const JU = isomorphy.isServerSide() ? webpack.requireWeak(juUrl) : null;
 
 export {
   config,

src/shared/utils/index.js

@@ -2,8 +2,6 @@
  * Collection of helpers to deal with isomorphic aspects of the code.
  */
 
-import _ from 'lodash';
-
 /* global window */
 
 /**
@@ -26,7 +24,7 @@ export function isServerSide() {
  * @return {String} Code mode: "development" or "production".
  */
 function getMode() {
-  return _.get(global.TRU_BUILD_INFO, 'mode');
+  return process.env.NODE_ENV;
 }
 
 /**

src/shared/utils/isomorphy.js

@@ -5,4 +5,4 @@ const ROOT = path.resolve(__dirname, '../../../..');
 
 /* eslint-disable global-require, import/no-dynamic-require */
 module.exports = modulePath =>
-  require(modulePath.replace(/^topcoder-react-utils\/dist/, ROOT));
+  require(modulePath.replace(/^topcoder-react-utils\/dist\/dev/, ROOT));