Issue 1608 - setup topcoder-react-utils as a dependency of Connect App

.eslintrc.json

@@ -28,7 +28,7 @@
     "react/jsx-closing-bracket-location": 2,
     "jsx-quotes": [2, "prefer-double"],
     "react/jsx-boolean-value": 2,
-    "react/wrap-multilines": 2,
+    "react/jsx-wrap-multilines": 2,
     "react/self-closing-comp": 2,
     "react/no-is-mounted": 2
   },

config/babel/webpack-coffee.js

@@ -0,0 +1,12 @@
+/**
+ * Babel config for CoffeeScript only.
+ *
+ * We disable modules for `env` preset of `babel` for CoffeeScript to avoid error
+ * 'Uncaught ReferenceError exports is not defined'
+ */
+const topCoderBabelConfig = require('topcoder-react-utils/config/babel/webpack')
+
+const envPresetIndex = topCoderBabelConfig.presets.find((preset) => preset === 'env')
+topCoderBabelConfig.presets.splice(envPresetIndex, 1, ['env', { modules: false }])
+
+module.exports = topCoderBabelConfig

config/webpack/common-modifications.js

@@ -0,0 +1,39 @@
+/**
+ * Function which is applied to webpack config from topcoder-react-utils
+ * and perform some common modification specific to connect app which cannot be applied using
+ * webpack merge.
+ */
+
+module.exports = function (config) {
+  /*
+    Exclude some folders from babel-loader
+   */
+  const jsxRule = config.module.rules.find(rule => /jsx/.test(rule.test.toString()))
+  jsxRule.exclude = [
+    /node_modules[\\/](?!appirio-tech.*|topcoder|tc-)/,
+    /src[\\/]assets[\\/]fonts/
+  ]
+
+  /*
+    Include packages `appirio-tech-react-components` and `tc-ui`
+    to `.scss` rule
+   */
+  const scssRule = config.module.rules.find(rule => /scss/.test(rule.test.toString()))
+  scssRule.exclude = /node_modules[\\/](?!appirio-tech-react-components|tc-ui)/
+
+  /*
+    Remove outputPath as otherwise in development mode files cannot be found
+    in the webpack in-memory filesystem
+    TODO understand why it happens, fix it another way, remove this
+   */
+  const imagesRule = config.module.rules.find(rule => /gif/.test(rule.test.toString()))
+  delete imagesRule.options.outputPath
+
+  /*
+    Remove outputPath as otherwise in development mode files cannot be found
+    in the webpack in-memory filesystem
+    TODO understand why it happens, fix it another way, remove this
+   */
+  const fontsRule = config.module.rules.find(rule => /woff2/.test(rule.test.toString()))
+  delete fontsRule.options.outputPath
+}

config/webpack/common.js

@@ -0,0 +1,98 @@
+/**
+ * Common part of webpack config specific to connect app
+ *
+ * This config is merged to development and production configs
+ * and is not supposed to be used directly by itself.
+ */
+'use strict'
+
+const _ = require('lodash')
+const path = require('path')
+const webpack = require('webpack')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const constants = require('../constants')
+
+const dirname = path.resolve(__dirname, '../..')
+
+module.exports = {
+  /*
+    Connect app has different output folder rather than topcoder-react-utils
+    So update it
+   */
+  output: {
+    path: path.join(dirname, '/dist'),
+    filename: '[name].[hash].js',
+    chunkFilename: '[name].[hash].js',
+    publicPath: '/'
+  },
+
+  resolve: {
+    /*
+      Connect app depends on `appirio-tech-react-components` which uses
+      CoffeeScript so we have to add support for these formats
+     */
+    extensions: [
+      '.coffee',
+      '.litcoffee',
+      '.cjsx'
+    ],
+    alias: {
+    /*
+      Connect app uses handlebars which has some issue with webpack
+      We have to create an alias to concrete file in order to import it
+     */
+      handlebars: 'handlebars/dist/handlebars.min.js'
+    }
+  },
+
+  module: {
+    rules: [{
+      /*
+        Connect app depends on `appirio-tech-react-components` which uses
+        CoffeeScript so we have to add support for it
+
+        Note, that we use custom babel config for coffee script which disables modules
+       */
+      test: /\.(coffee|litcoffee|cjsx)$/,
+      use: [
+        {
+          loader: 'babel-loader',
+          options: {
+            babelrc: false,
+            forceEnv: 'development', // by default set env to 'development'
+            presets: [path.resolve(dirname, './config/babel/webpack-coffee.js')],
+            plugins: ['lodash']
+          }
+        },
+        'coffee-loader',
+        'cjsx-loader'
+      ]
+    }, {
+      /*
+        Load SVG files not handled by inline-react-svg babel plugin
+      */
+      test: /\.svg$/,
+      loader: 'file-loader'
+    }],
+  },
+
+  plugins: [
+    /*
+      Connect app has a custom html template file, so we use it
+     */
+    new HtmlWebpackPlugin({
+      template: path.join(dirname, '/src/index.html'),
+      inject: 'body'
+    }),
+
+    /*
+      Connect app requires a lot of env vars which are defined in constants.
+
+      WARNING this plugin will be a duplicate of the same plugin from topcoder-react-utils,
+              most likely this hides variables defined in topcoder-react-utils
+     */
+    new webpack.DefinePlugin({
+      'process.env': _.mapValues(constants, (value) => JSON.stringify(value))
+    })
+  ]
+}

config/webpack/development.js

@@ -1,65 +1,43 @@
+/**
+ * Webpack config for development mode
+ */
 const path = require('path')
-const webpack = require('webpack')
 const webpackMerge = require('webpack-merge')
 
-const defaultConfig = require('./default')
-
 const dirname = path.resolve(__dirname, '../..')
 
-module.exports = webpackMerge.strategy({
-  entry: 'prepend' // to put 'react-hot-loader/patch' first
-})(defaultConfig, {
-  entry: [
-    'react-hot-loader/patch'
-  ],
+const commonProjectConfig = require('./common')
+const applyCommonModifications = require('./common-modifications')
+const configFactory = require('topcoder-react-utils/config/webpack/app-development')
 
-  devtool: 'eval',
+// get standard TopCoder development webpack config
+const developmentTopCoderConfig = configFactory({
+  context: dirname,
 
-  module: {
-    rules: [{
-      test: /\.(js|jsx)$/,
-      loader: 'babel-loader',
-      exclude: /node_modules\/(?!appirio-tech.*|topcoder|tc-)/,
-      options: {
-        babelrc: false,
-        presets: [ ['env', { modules: false }], 'react', 'stage-2' ],
-        plugins: [
-          'lodash',
-          // add react hot reloader
-          'react-hot-loader/babel',
-          'inline-react-svg'
-        ]
-      }
-    }, {
-      test: /\.scss$/,
-      use: [
-        'style-loader',
-        {
-          loader: 'css-loader',
-          options: {
-            sourceMap: true
-          }
-        },
-        'resolve-url-loader',
-        {
-          loader: 'sass-loader',
-          options: {
-            sourceMap: true,
-            includePaths: [
-              path.join(dirname, '/node_modules/bourbon/app/assets/stylesheets'),
-              path.join(dirname, '/node_modules/tc-ui/src/styles')
-            ]
-          }
-        }
-      ]
-    }]
-  },
+  entry: './src/index'
+})
 
-  plugins: [
-    // don't add HotModuleReplacementPlugin, because run webpack-dev-server with --hot param
-    // otherwise this plugin will be added twice and cause bugs
-    // new webpack.HotModuleReplacementPlugin(),
+// merge standard development TopCoder config with common config specific to connect app
+const combinedConfig = webpackMerge.smart(
+  developmentTopCoderConfig,
+  commonProjectConfig
+)
 
-    new webpack.NamedModulesPlugin()
-  ]
-})
+// apply common modifications specific to connect app which cannot by applied by webpack merge
+applyCommonModifications(combinedConfig)
+
+/*
+  Remove HotModuleReplacementPlugin, because we run webpack-dev-server with --hot param
+  Otherwise this plugin will be added twice and cause bugs
+ */
+const hotReloadPluginIndex = combinedConfig.plugins.findIndex(plugin => plugin.constructor.name === 'HotModuleReplacementPlugin')
+combinedConfig.plugins.splice(hotReloadPluginIndex, 1)
+
+/*
+  Remove 'webpack-hot-middleware/client?reload=true' as we use webpack-dev-server, not middleware
+ */
+combinedConfig.entry.main = combinedConfig.entry.main.filter((entry) => (
+  entry !== 'webpack-hot-middleware/client?reload=true'
+))
+
+module.exports = combinedConfig