mapbox · davidtheclark · Jul 13, 2017 · Jul 13, 2017
diff --git a/bin/batfish.js b/bin/batfish.js
@@ -93,8 +93,8 @@ if (configPath) {
           configPath
         )}`
       );
-      throw error;
     }
+    throw error;
   }
 }
 

diff --git a/docs/configuration.md b/docs/configuration.md
@@ -40,6 +40,7 @@ You can specify an alternate location.
 - [postcssPlugins](#postcssplugins)
 - [fileLoaderExtensions](#fileloaderextensions)
 - [jsxtremeMarkdownOptions](#jsxtrememarkdownoptions)
+- [inlineJs](#inlinejs)
 - [production](#production)
 - [port](#port)
 
@@ -78,6 +79,7 @@ Origin where the site will be deployed.
 `string` - Optional.
 
 Absolute path to a module exporting a React component that will wrap all of your pages.
+The component can be exported with `module.exports`, `export default`, or `export { Wrapper }`.
 
 ### notFoundPath
 
@@ -138,7 +140,7 @@ Otherwise, Babel might end up looking in the wrong place for the npm package.
 
 ### babelExclude
 
-`WebpackCondition` - Optional. Default: `/node_modules/`
+`WebpackCondition` - Optional. Default: `/node_modules\/!(@mapbox\/batfish\/)/`
 
 Any [valid Webpack Condition](https://webpack.js.org/configuration/module/#condition) will work here.
 
@@ -155,15 +157,15 @@ These stylesheets need to be publicly available at the designated URL so Batfish
 
 `Array<string>` - Optional. Default: `['last 4 versions', 'not ie < 10']`
 
-All of the CSS you load via Webpack is run through [Autoprefixer](https://github.com/postcss/autoprefixer).
+All of the CSS you load via Webpack is run through [Autoprefixer].
 Use a [Browserslist](https://github.com/ai/browserslist) value to specify which browsers you need to support with vendor prefixes.
 
 ### postcssPlugins
 
 `Array<Function>` - Optional.
 
 All of the CSS you load via Webpack is run through [PostCSS](http://postcss.org/), so you can apply any [PostCSS plugins](https://github.com/postcss/postcss/blob/master/docs/plugins.md) to it.
-By default, only [Autoprefixer](https://github.com/postcss/autoprefixer) is applied.
+By default, only [Autoprefixer] is applied.
 
 This value is passed directly to [postcss-loader](https://github.com/postcss/postcss-loader#plugins).
 
@@ -181,6 +183,20 @@ Provide any of the following [jsxtreme-markdown] options (please read about them
 
 **To add syntax highlighting to your Markdown pages, you'll probably want to use `remarkPlugins` or `rehypePlugins`.**
 
+### inlineJs
+
+`Array<Object>` - Optional.
+
+If you want to inline JS into static HTML before the Webpack bundle, this is the best way to do it.
+
+On the development server, they will be added at the beginning of the Webpack bundle for debugging (sourcemaps should be available).
+For the static build, they will be injected directly into the `<head>`.
+
+Each item is an object with the following properties:
+
+- **filename** `string` - Absolute path to the JS file.
+- **uglify** `boolean` - Default: `true`. Whether or not to process the file with [UglifyJs] before inserting into the `<head>` during the static build.
+
 ### production
 
 `boolean` - Optional. Default: `false` for `start`, `true` for `build`
@@ -193,3 +209,6 @@ Whether or not to build for production (e.g. minimize files, trim React).
 
 Preferred port for development servers.
 If the specified port is unavailable, another port is used.
+
+[UglifyJs]: https://github.com/mishoo/UglifyJS2
+[Autoprefixer]: https://github.com/postcss/autoprefixer
diff --git a/docs/recipes.md b/docs/recipes.md
diff --git a/examples/inline-js/batfish.config.js b/examples/inline-js/batfish.config.js
@@ -4,7 +4,7 @@ const path = require('path');
 
 module.exports = () => {
   return {
-    wrapperPath: path.join(__dirname, './src/components/wrapper.js'),
-    siteOrigin: 'https://www.mapbox.com'
+    siteOrigin: 'https://www.mapbox.com',
+    inlineJs: [{ filename: path.join(__dirname, './src/js/inline-me.js') }]
   };
 };
diff --git a/examples/inline-js/src/components/wrapper.js b/examples/inline-js/src/components/wrapper.js
diff --git a/examples/inline-js/src/pages/index.js b/examples/inline-js/src/pages/index.js
@@ -2,7 +2,6 @@
 
 const React = require('react');
 const Helmet = require('react-helmet').Helmet;
-const inlineMe = require('raw-loader!../js/inline-me');
 
 class Home extends React.Component {
   render() {
@@ -12,9 +11,6 @@ class Home extends React.Component {
           <script>
             {"console.log('the home page has rendered')"}
           </script>
-          <script>
-            {inlineMe}
-          </script>
         </Helmet>
         here's some regular content
       </div>

diff --git a/lib/create-webpack-config-base.js b/lib/create-webpack-config-base.js
@@ -109,9 +109,14 @@ function createWebpackConfigBase(batfishConfig) {
             __dirname,
             './helmet-style-loader.js'
           )
-        }
+        },
+        // Loader names need to be strings, and to allow them to be looked
+        // up within batfish's module dependencies, not just the project's,
+        // we need this.
+        modules: [path.join(__dirname, '../node_modules'), 'node_modules']
       },
       resolve: {
+        // This is how we expose the batfish/* fake modules during compilation.
         alias: {
           'batfish/context': batfishContextPath,
           'batfish/wrapper': batfishConfig.wrapperPath,

diff --git a/lib/create-webpack-config-client.js b/lib/create-webpack-config-client.js
@@ -71,9 +71,17 @@ function createWebpackConfigClient(batfishConfig, options) {
       clientPlugins.push(uglifyPlugin);
     }
 
+    const appEntry = [];
+    if (!batfishConfig.production && batfishConfig.inlineJs) {
+      batfishConfig.inlineJs.forEach(jsData => {
+        appEntry.push(jsData.filename);
+      });
+    }
+    appEntry.push(path.join(__dirname, '../src/batfish-app.js'));
+
     const clientConfig = {
       entry: {
-        app: [path.join(__dirname, '../src/batfish-app.js')],
+        app: appEntry,
         vendor: vendorModules
       },
       output: {

diff --git a/lib/create-webpack-config-static.js b/lib/create-webpack-config-static.js
@@ -23,9 +23,9 @@ function createWebpackConfigStatic(batfishConfig) {
         libraryTarget: 'commonjs2'
       },
       target: 'node',
-      // Ignore all JS modules in node_modules: the compiled static-render-pages.js
-      // can require them in without Webpack assistance.
-      externals: [/node_modules\/.*?\.(?!(jsx?|json))[a-zA-Z]+$/],
+      // Ignore all non-relative paths except batfish ones, since those should be
+      // node modules that static-render-pages can handle.
+      externals: [/^(?!batfish)[a-z0-9]/],
       plugins: [
         // Ensure that all files will be grouped into one file,
         // even if they would otherwise be split into separate chunks.

diff --git a/lib/validate-config.js b/lib/validate-config.js
@@ -30,7 +30,7 @@ function validateConfig(config, configPath) {
     temporaryDirectory: path.join(projectDirectory, '_tmp'),
     wrapperPath: path.join(__dirname, '../src/empty-wrapper.js'),
     externalStylesheets: [],
-    babelExclude: /node_modules/,
+    babelExclude: /node_modules\/!(@mapbox\/batfish\/)/,
     siteBasePath: '',
     autoprefixerBrowsers: ['last 4 versions', 'not ie < 10'],
     fileLoaderExtensions: [

diff --git a/package.json b/package.json
@@ -114,7 +114,7 @@
     "sitemap-static": "^0.4.2",
     "slugg": "^1.2.1",
     "style-loader": "^0.18.2",
-    "uglify-js": "^3.0.15",
+    "uglify-js": "^3.0.24",
     "webpack": "^3.2.0",
     "webpack-chunk-hash": "^0.4.0",
     "webpack-merge": "^4.1.0",

diff --git a/src/batfish-app.js b/src/batfish-app.js
@@ -2,9 +2,10 @@
 
 const React = require('react');
 const ReactDOM = require('react-dom');
-const Wrapper = require('batfish/wrapper');
 const Router = require('./router');
 const findMatchingRoute = require('./find-matching-route');
+let Wrapper = require('batfish/wrapper');
+Wrapper = Wrapper.default || Wrapper.Wrapper || Wrapper;
 
 // The initialization of any Batfish.
 // Get the current page and render it, wrapped in the user's Wrapper component.

diff --git a/src/static-render-pages.js b/src/static-render-pages.js
@@ -12,6 +12,7 @@ const fs = require('fs');
 const pify = require('pify');
 const mkdirp = require('mkdirp');
 const path = require('path');
+const UglifyJs = require('uglify-js');
 const batfishContext = require('batfish/context');
 const Wrapper = require('batfish/wrapper');
 const StaticHtmlPage = require('./static-html-page');
@@ -28,6 +29,20 @@ const constants = require('../lib/constants');
  */
 function staticRenderPages(batfishConfig, assets, manifestJs) {
   const renderPage = route => {
+    let inlineJs;
+    if (batfishConfig.production && batfishConfig.inlineJs) {
+      inlineJs = batfishConfig.inlineJs
+        .map(jsData => {
+          let code = fs.readFileSync(jsData.filename, 'utf8');
+          if (jsData.uglify !== false) {
+            const uglified = UglifyJs.minify(code);
+            if (uglified.error) throw uglified.error;
+            code = uglified.code;
+          }
+          return `<script>${code}</script>`;
+        })
+        .join('\n');
+    }
     return route.getPage().then(pageModule => {
       // We render the page content separately from the StaticHtmlPage, because the page
       // content is what will be re-rendered when the bundled JS loads so it must
@@ -60,6 +75,7 @@ function staticRenderPages(batfishConfig, assets, manifestJs) {
             head.base.toString(),
             head.meta.toString(),
             head.link.toString(),
+            inlineJs,
             head.script.toString(),
             constants.INLINE_CSS_MARKER,
             `<script id="loadCss">${loadCssScript}</script>`,

diff --git a/yarn.lock b/yarn.lock
@@ -7004,7 +7004,7 @@ ua-parser-js@0.7.12, ua-parser-js@^0.7.9:
   version "0.7.12"
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.12.tgz#04c81a99bdd5dc52263ea29d24c6bf8d4818a4bb"
 
-uglify-js@3.0.x, uglify-js@^3.0.15:
+uglify-js@3.0.x:
   version "3.0.21"
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.0.21.tgz#db66690c7a129a2dbb2417f820ca15c119215a05"
   dependencies:
@@ -7020,6 +7020,13 @@ uglify-js@^2.6, uglify-js@^2.8.29:
   optionalDependencies:
     uglify-to-browserify "~1.0.0"
 
+uglify-js@^3.0.24:
+  version "3.0.24"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.0.24.tgz#ee93400ad9857fb7a1671778db83f6a23f033121"
+  dependencies:
+    commander "~2.9.0"
+    source-map "~0.5.1"
+
 uglify-to-browserify@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz#6e0924d6bda6b5afe349e39a6d632850a0f882b7"
-Original file line number
+Diff line change
@@ Expand Up / @@ -93,8 +93,8 @@ if (configPath) { @@
               configPath
             )}`
           );
-          throw error;
         }
+        throw error;
       }
     }
@@ Expand Down @@