More webpack updates - package size optimizations and long term caching

babel.config.js

@@ -9,31 +9,25 @@ const utils = require('./cli/utils');
 module.exports = function babelConfig(api) {
   utils.verbose(`Generating Babel Config`);
   const presets = [
-    "@babel/env",
+    [
+      "@babel/preset-env",
+      {
+        useBuiltIns: false, // use the full lib to make sure vendor bundle stays stable
+        targets: !api.env('test') ? "cover 95%" : { node: 'current' },
+        bugfixes: true
+      }
+    ],
     "@babel/preset-react"
   ];
   const plugins = [
     ["@babel/plugin-proposal-decorators", { legacy: true }],
     "@babel/plugin-proposal-class-properties",
     "babel-plugin-styled-components",
-    "babel-plugin-syntax-dynamic-import",
-    "@babel/plugin-transform-runtime",
+    "@babel/plugin-syntax-dynamic-import",
     "lodash"
   ];
   if (api.env("development")) {
-    if (process.env.BABEL_EXTENSION_PATH && !process.env.BABEL_EXTENSION_PATH.includes(__dirname)) {
-      utils.verbose("Not using react-hot-loader/babel plugin with auspice extensions as this produces an error. TO FIX.");
-      /* with extensions from a dir not within the main auspice directory we get the error:
-       * Module not found: Error: Can't resolve 'react-hot-loader' in ...extension directory...
-       * Which I can't fix. Tried:
-       * require.resolve("react-hot-loader/babel")
-       * setting babelrcRoots
-       * but google seems to have failed me.
-       * It may be a bug with "react-hot-loader/babel" as the other plugins work just fine!
-       */
-    } else {
-      plugins.push("react-hot-loader/babel");
-    }
+    plugins.push("react-hot-loader/babel");
   }
   if (process.env.BABEL_INCLUDE_TIMING_FUNCTIONS === "false") {
     plugins.push(["strip-function-call", {strip: ["timerStart", "timerEnd"]}]);

bundlesize.config.json

@@ -1,12 +1,24 @@
 {
   "files": [
     {
-      "path": "./dist/auspice.bundle.js",
-      "maxSize": "200 kB"
+      "path": "./dist/auspice.bundle.*.js",
+      "maxSize": "2 kB"
     },
     {
-      "path": "./dist/auspice.chunk.*.bundle.js",
-      "maxSize": "120 kB"
+      "path": "./dist/auspice.chunk.+([0-9]).bundle.*.js",
+      "maxSize": "75 kB"
+    },
+    {
+      "path": "./dist/auspice.chunk.core-vendors.bundle.9b6a9c4b675fe63ec02a.js",
+      "maxSize": "220 kB"
+    },
+    {
+      "path": "./dist/auspice.chunk.other-vendors.bundle.99f3458f271574f53feb.js",
+      "maxSize": "60 kB"
+    },
+    {
+      "path": "./dist/auspice.chunk.locales.bundle.*.js",
+      "maxSize": "100 kB"
     }
   ]
 }

cli/develop.js

@@ -50,6 +50,14 @@ const run = (args) => {
   process.env.BABEL_ENV = "development";
   process.env.BABEL_EXTENSION_PATH = extensionPath;
 
+  /* Redirects / to webpack-generated index */
+  app.use((req, res, next) => {
+    if (!/^\/__webpack_hmr|^\/charon|\.[A-Za-z0-9]{1,4}$/.test(req.path)) {
+      req.url = webpackConfig.output.publicPath;
+    }
+    next();
+  });
+
   app.use((webpackDevMiddleware)(
     compiler,
     {logLevel: 'warn', publicPath: webpackConfig.output.publicPath}
@@ -66,10 +74,7 @@ const run = (args) => {
     handlerMsg = loadAndAddHandlers({app, handlersArg: args.handlers, datasetDir: args.datasetDir, narrativeDir: args.narrativeDir});
   }
 
-  /* this must be the last "get" handler, else the "*" swallows all other requests */
-  app.get("*", (req, res) => {
-    res.sendFile(path.join(baseDir, "index.html"));
-  });
+  app.get("*", (req, res) => res.redirect("/"));
 
   const server = app.listen(app.get('port'), app.get('host'), () => {
     utils.log("\n\n---------------------------------------------------");

cli/utils.js

@@ -109,12 +109,12 @@ const exportIndexDotHtml = ({relative=false}) => {
     return;
   }
   const outputFilePath = path.join(process.cwd(), "index.html");
-  let data = fs.readFileSync(path.resolve(__dirname, "../index.html"), {encoding: "utf8"});
+  let data = fs.readFileSync(path.join(process.cwd(), "dist/index.html"), {encoding: "utf8"});
   verbose(`Writing ${outputFilePath}`);
   if (relative) {
     data = data
       .replace(/\/favicon/g, "favicon")
-      .replace(/\/dist\/bundle.js/, "dist/bundle.js");
+      .replace(/\/dist\/auspice\.bundle\.([0-9a-f]{20})\.js/, "dist/auspice.bundle.$1.js");
   }
   fs.writeFileSync(outputFilePath, data);
 };

cli/view.js

@@ -125,7 +125,7 @@ const run = (args) => {
 
   /* this must be the last "get" handler, else the "*" swallows all other requests */
   app.get("*", (req, res) => {
-    res.sendFile(path.join(auspiceBuild.baseDir, "index.html"));
+    res.sendFile(path.join(auspiceBuild.baseDir, "dist/index.html"));
   });
 
   const server = app.listen(app.get('port'), app.get('host'), () => {

docs-src/docs/customise-client/api.md

@@ -29,8 +29,6 @@ A useful reference may be the [customisation JSON file](https://github.com/nexts
 * `googleAnalyticsKey` You can specify a Google Analytics key to enable (some) analytics functionality. More documentation to come.
 * `serverAddress` Specify the address / prefix which the auspice client uses for API requests.
 
-> For customisation code which uses [React](https://reactjs.org/) components, you must import these as `import React from "@libraries/react";` to ensure that the version of react is the same as what Auspice uses.
-
 ---
 
 ## Sidebar Theme

docs/customise-client/api.html

@@ -76,9 +76,6 @@ <h2><a class="anchor" aria-hidden="true" id="available-customisations"></a><a hr
 <li><code>googleAnalyticsKey</code> You can specify a Google Analytics key to enable (some) analytics functionality. More documentation to come.</li>
 <li><code>serverAddress</code> Specify the address / prefix which the auspice client uses for API requests.</li>
 </ul>
-<blockquote>
-<p>For customisation code which uses <a href="https://reactjs.org/">React</a> components, you must import these as <code>import React from &quot;@libraries/react&quot;;</code> to ensure that the version of react is the same as what Auspice uses.</p>
-</blockquote>
 <hr>
 <h2><a class="anchor" aria-hidden="true" id="sidebar-theme"></a><a href="#sidebar-theme" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Sidebar Theme</h2>
 <p>The appearence of the sidebar can be customised by specifing a theme in the config JSON used to build Auspice.

docs/customise-client/api/index.html

@@ -76,9 +76,6 @@ <h2><a class="anchor" aria-hidden="true" id="available-customisations"></a><a hr
 <li><code>googleAnalyticsKey</code> You can specify a Google Analytics key to enable (some) analytics functionality. More documentation to come.</li>
 <li><code>serverAddress</code> Specify the address / prefix which the auspice client uses for API requests.</li>
 </ul>
-<blockquote>
-<p>For customisation code which uses <a href="https://reactjs.org/">React</a> components, you must import these as <code>import React from &quot;@libraries/react&quot;;</code> to ensure that the version of react is the same as what Auspice uses.</p>
-</blockquote>
 <hr>
 <h2><a class="anchor" aria-hidden="true" id="sidebar-theme"></a><a href="#sidebar-theme" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Sidebar Theme</h2>
 <p>The appearence of the sidebar can be customised by specifing a theme in the config JSON used to build Auspice.