Upgrade to webpack 4.

.babelrc

@@ -5,7 +5,7 @@
         ["env", {
           "targets": {
             "node": "6.11.4",
-          }
+          },
         }]
       ]
     },
@@ -14,7 +14,10 @@
         ["env", {
           "targets": {
             "node": "6.11.4",
-          }
+          },
+          "modules": "commonjs",
+          "useBuiltIns": "usage",
+          "debug": false,
         }]
       ]
     },
@@ -32,4 +35,4 @@
       ]
     }
   }
-}
+}

.eslintrc

@@ -30,7 +30,6 @@
   "plugins": [
     "jest"
   ],
-  // Do NOT change these rules
   "rules": {
     "indent": [2, 2, {"SwitchCase": 1}],
     "max-len": [2, 80, 4, {
@@ -64,5 +63,6 @@
     "no-constant-condition": ["error"],
     "arrow-parens": ["error", "always"],
     "no-console": 0,
+    "function-paren-newline": 0,
   }
 }

.travis.yml

@@ -0,0 +1,37 @@
+sudo: false
+dist: trusty
+language: node_js
+
+node_js:
+  - 8
+
+env:
+  global:
+    - NODE_ENV=production
+
+branches:
+  only:
+    - master
+    - beta
+
+notifications:
+  email: false
+
+# Ensure node and npm major version matches from package.json
+before_install:
+  - nvm install "$(jq -r '.engines.node' package.json | egrep -oe "[0-9]+" | head -n1)"
+  - npm i -g npm@$(jq -r '.engines.npm' package.json | egrep -oe "[0-9]+" | head -n1)
+
+install:
+  - npm ci
+
+cache:
+  directories:
+    - "$HOME/.npm"
+
+script:
+    - npm run build
+    - sleep 10 # Give server enough time to spin up
+
+# Disabling sanity test curl test until REACT_APP_WPAPI_ROOT is ready
+#    - curl -s --fail "http://localhost:3001" > /dev/null

CONTRIBUTING.md

@@ -3,7 +3,7 @@
 At this point contribution guidelines are limited. This document contains information on setting up and developing locally; otherwise the primary concern for contributors is whether or not you are a member of the Alley Interactive organization (Huron's sponsor).
 
 ## Development
-There are two primary comonents to Huron: the CLI and the web (browser) script. Since each of these is used for different purposes, there is a different build pipeline for each.
+There are two primary components to Huron: the CLI and the web (browser) script. Since each of these is used for different purposes, there is a different build pipeline for each.
 
 Generally speaking, there are three NPM scripts you'll need to compile the Huron source:
 * `dev-cli`: This script will start Webpack for the CLI (`/src/cli`) only using Webpack's watcher. Hot Module Reloading is also enabled with this script.
@@ -14,7 +14,7 @@ Generally speaking, there are three NPM scripts you'll need to compile the Huron
 In order to allow users to reference the `.bin` version of the Huron cli via NPM, we need to bundle the CLI into a single `.js` file. To do this we utilize an internal Webpack install, for which the configuration is located in `/config/webpack-node.config.js`. As detailed above, you should use the `dev-cli` command during development, as this will allow you to hot reload your changes. Currently there is no HMR handling for the CLI scripts, so this functionality may be buggy.
 
 ### Web
-Huron's browser-facing scripts will run through the user's own (or Huron's default) Webpack configuration and, as such, cannot be pre-compiled by Webpack. Therefore, we simply transpile the source for the web scripts using babel-cli to ensure some measure of browser compatibility. Note: At some point, it may be worth exploring further the possibility of dynamically inserting the babel-loader specifically for the huron web scripts when the user run's the CLI.
+Huron's browser-facing scripts will run through the user's own (or Huron's default) Webpack configuration and, as such, cannot be pre-compiled by Webpack. Therefore, we simply transpile the source for the web scripts using babel-cli to ensure some measure of browser compatibility. Note: At some point, it may be worth exploring further the possibility of dynamically inserting the babel-loader specifically for the huron web scripts when the user runs the CLI.
 
 ## Submitting your changes
 Note for all new package versions: the github release should _always_ match the corresponding release to NPM. In addition, publishes from the `beta` branch must always include a `-beta.0` after the version number to indicate a beta pre-release. In addition, generally speaking, every merge of a Pull Request should be associated with a version bump. If you are writing changes for documentation only, a version bump is not necessary. When working on changes for Huron, please follow these guildelines:

README.md

@@ -79,9 +79,11 @@ In Huron, everything is a "prototype" (even a style guide). Unlike previous vers
  * A separate HTML document is automatically built for each of your configured prototypes using the HTML webpack plugin and a custom EJS [template](templates/prototype-template.ejs). More information on this can be found in the [templates readme](templates/README.md).
 
 ## Using CSS Modules
-If you're using CSS modules in your production site, it makes sense to also use it when developing in-browser prototypes. Huron supports usage of certain CSS modules implementations (specifically any that is capable of producing JSON output containing localized classes). All that's needed in order to configure this is the `classNames` configuration property, more details for which are in the [configuration docs](src/default-config/README.md). Once you have that set up, all classes will be be provided to every template. These classes are available on a `classNames` object, under which all classes are nested and organized by filename. For example, if your build produces two JSON files for localized classes called `article.json` and `home.json`, you can access those classes in your huron templates via `classNames.article[className]` and `classNames.home[className]` respectively.
+If you're using CSS modules in your production site, it makes sense to also use it when developing in-browser prototypes. Huron supports usage of certain CSS modules implementations (specifically any that is capable of producing JSON output containing localized classes). All that's needed in order to configure this is the `classNames` configuration property, more details for which are in the [configuration docs](src/default-config/README.md).
 
-A sample of how to set this up can be found in the [`huron-examples` repo](https://github.com/alleyinteractive/huron-examples)
+Once you have that set up, all classes within the provided JSON file will be be provided to every template on a global classNames object. Because huron only accepts a single classnames file, the recommended approach is to nest classnames under top-level keys corresponding to component names. For example, if you have article and newsletter components, set up your JSON output so you can access classes for those components in your huron templates via `classNames.article[className]` and `classNames.newsletter[className]` respectively.
+
+A sample of how to set this up can be found in the [`huron-examples` repo](https://github.com/alleyinteractive/huron-examples). (Note: Needs to be updated to show a filepath and not a directory).
 
 ## For more specific information
 This file contains basic information on Huron installation and writing prototypes. However, there are several other subsections of this documentation:

config/webpack.browser.config.js

@@ -2,40 +2,39 @@
 const webpack = require('webpack');
 const path = require('path');
 
-module.exports = function getConfig(env) {
-  const context = path.join(__dirname, '../');
-
-  return {
-    context,
-    entry: {
-      web: ['./src/web/index'],
-    },
-    devtool: 'cheap-module-source-map',
-    plugins: [
-      new webpack.NamedModulesPlugin(),
+module.exports = {
+  context: path.join(__dirname, '../'),
+  entry: {
+    web: ['./src/web/index'],
+  },
+  devtool: 'cheap-module-source-map',
+  optimization: {
+    namedModules: true, // NamedModulesPlugin()
+  },
+  plugins: [
+    new webpack.NamedModulesPlugin(),
+  ],
+  output: {
+    path: path.join(__dirname, '../dist/web'),
+    filename: 'index.js',
+    chunkFilename: '[name].chunk.min.js',
+    publicPath: '../',
+    library: 'huron',
+    libraryTarget: 'commonjs2',
+  },
+  module: {
+    rules: [
+      {
+        enforce: 'pre',
+        test: /\.js$/,
+        exclude: [/\.min\.js$/],
+        use: 'eslint-loader',
+      },
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: 'babel-loader',
+      },
     ],
-    output: {
-      path: path.join(context, 'dist/web'),
-      filename: 'index.js',
-      chunkFilename: '[name].chunk.min.js',
-      publicPath: '../',
-      library: 'huron',
-      libraryTarget: 'commonjs2',
-    },
-    module: {
-      rules: [
-        {
-          enforce: 'pre',
-          test: /\.js$/,
-          exclude: [/node_modules/, /\.min\.js$/],
-          use: 'eslint-loader',
-        },
-        {
-          test: /\.js$/,
-          exclude: /node_modules/,
-          use: 'babel-loader',
-        },
-      ],
-    },
-  };
+  },
 };

config/webpack.server.config.js

@@ -1,55 +1,49 @@
+/* eslint-disable import/no-extraneous-dependencies */
 // Requires
-const webpack = require('webpack');
 const path = require('path');
- /* eslint-disable */
 const nodeExternals = require('webpack-node-externals');
 const CleanPlugin = require('clean-webpack-plugin');
-/* eslint-enable */
 
-module.exports = function getConfig(env) {
-  const context = path.join(__dirname, '../');
-
-  return {
-    context,
-    entry: {
-      cli: ['./src/cli/index'],
-    },
-    plugins: [
-      new CleanPlugin(['dist/cli'], {
-        root: context,
-        exclude: 'index.js',
-      }),
+module.exports = {
+  context: path.join(__dirname, '../'),
+  entry: {
+    cli: ['./src/cli/index'],
+  },
+  plugins: [
+    new CleanPlugin(['dist/cli'], {
+      root: path.join(__dirname, '../'),
+      exclude: 'index.js',
+    }),
+  ],
+  target: 'node',
+  devtool: 'cheap-module-source-map',
+  output: {
+    path: path.join(__dirname, '../dist/cli'),
+    filename: 'index.js',
+    chunkFilename: '[name].chunk.min.js',
+    publicPath: '../',
+  },
+  externals: ['localConfig', 'localHuron'].concat(nodeExternals({
+    whitelist: [/webpack\/hot/],
+  })),
+  node: {
+    __filename: false,
+    __dirname: false,
+  },
+  module: {
+    noParse: [/requireExternal/],
+    rules: [
+      {
+        enforce: 'pre',
+        test: /\.js$/,
+        exclude: [/\.min\.js$/],
+        use: 'eslint-loader',
+      },
+      {
+        test: /\.js$/,
+        exclude: [/\.min\.js$/],
+        use: 'babel-loader',
+      },
     ],
-    target: 'node',
-    devtool: 'cheap-module-source-map',
-    output: {
-      path: path.join(context, 'dist/cli'),
-      filename: 'index.js',
-      chunkFilename: '[name].chunk.min.js',
-      publicPath: '../',
-    },
-    externals: ['localConfig', 'localHuron'].concat(nodeExternals({
-      whitelist: [/webpack\/hot/],
-    })),
-    node: {
-      __filename: false,
-      __dirname: false,
-    },
-    module: {
-      noParse: [/requireExternal/],
-      rules: [
-        {
-          enforce: 'pre',
-          test: /\.js$/,
-          exclude: [/node_modules/, /\.min\.js$/],
-          use: 'eslint-loader',
-        },
-        {
-          test: /\.js$/,
-          exclude: [/node_modules/, /\.min\.js$/],
-          use: 'babel-loader',
-        },
-      ],
-    },
-  };
+  },
 };