[client-narratives] change bundle structure to accommodate YAML parsing

The move to client-parsing of narratives has caused two changes to bundle structure.

Firstly, since the `loadJSON` function now references the markdown parsing code, the dependency graph tries to pull in the related libraries into the chunk with most of the Auspice code (currently chunk 5). Previously these were a separate chunk lazily loaded with (e.g.) the footer parsing component. Since it's very common to display markdown footers, it makes life simple to include these libraries in the other-vendors bundle. It is possible to lazily load the markdown parsing function as needed, but more complicated.

Secondly, the YAML frontmatter parser (previously server-side only) has a dependency on `js-yaml` which itself has dependency on "esprima" and others. Esprima is unnecessary for our purposes and we use a webpack loader to ignore it. For simplicity, we shift `js-yaml` to the other-vendors bundle. An alternative approach would be to bundle  pre-minified 'js-yaml' bundle.

bundlesize.config.json

@@ -9,12 +9,12 @@
       "maxSize": "75 kB"
     },
     {
-      "path": "./dist/auspice.chunk.core-vendors.bundle.9b6a9c4b675fe63ec02a.js",
+      "path": "./dist/auspice.chunk.core-vendors.bundle.bc9da2d0914e5d660906.js",
       "maxSize": "220 kB"
     },
     {
-      "path": "./dist/auspice.chunk.other-vendors.bundle.99f3458f271574f53feb.js",
-      "maxSize": "60 kB"
+      "path": "./dist/auspice.chunk.other-vendors.bundle.9d99e2afe0ac9ee19164.js",
+      "maxSize": "80 kB"
     },
     {
       "path": "./dist/auspice.chunk.locales.bundle.*.js",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "auspice",
-  "version": "2.17.2",
+  "version": "2.17.3",
   "description": "Web app for visualizing pathogen evolution",
   "author": "James Hadfield, Trevor Bedford and Richard Neher",
   "license": "AGPL-3.0-only",
@@ -41,10 +41,10 @@
     "@babel/core": "^7.3.4",
     "@babel/plugin-proposal-class-properties": "^7.3.4",
     "@babel/plugin-proposal-decorators": "^7.3.0",
-    "@babel/plugin-transform-runtime": "^7.8.3",
-    "@babel/preset-react": "^7.0.0",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-transform-runtime": "^7.8.3",
     "@babel/preset-env": "^7.9.6",
+    "@babel/preset-react": "^7.0.0",
     "@hot-loader/react-dom": "^16.13.0",
     "argparse": "^1.0.10",
     "awesomplete": "^1.1.2",
@@ -92,6 +92,7 @@
     "marked": "^0.7.0",
     "mousetrap": "^1.6.2",
     "node-fetch": "^2.1.2",
+    "null-loader": "^4.0.0",
     "outer-product": "0.0.4",
     "papaparse": "^4.3.5",
     "prettyjson": "^1.2.1",
@@ -118,9 +119,9 @@
     "styled-components": "^4.0.3",
     "typeface-lato": "^0.0.75",
     "webpack": "^4.30.0",
+    "webpack-bundle-analyzer": "^3.3.2",
     "webpack-chunk-hash": "^0.6.0",
     "webpack-cli": "^3.1.2",
-    "webpack-bundle-analyzer": "^3.3.2",
     "webpack-dev-middleware": "^3.1.3",
     "webpack-hot-middleware": "^2.24.3",
     "whatwg-fetch": "^0.10.1",

src/actions/loadData.js

@@ -8,7 +8,7 @@ import { fetchJSON, fetchWithErrorHandling } from "../util/serverInteraction";
 import { warningNotification, errorNotification } from "./notifications";
 import { hasExtension, getExtension } from "../util/extensions";
 import { parseMarkdownNarrativeFile } from "../util/parseNarrative";
-import { parseMarkdown } from "../util/parseMarkdown"; // TODO: does this affect bundle structure
+import { parseMarkdown } from "../util/parseMarkdown";
 
 
 /**

src/util/parseNarrative.js

@@ -11,9 +11,10 @@
 
 /* eslint no-param-reassign: off */
 
-const { loadFront } = require('yaml-front-matter'); // TODO - check webpack bundling of this new library
+const { loadFront } = require('yaml-front-matter');
 const queryString = require("query-string");
 
+
 const parseMarkdownNarrativeFile = (fileContents, markdownParser) => {
   const frontMatter = loadFront(fileContents);
 

webpack.config.js

@@ -165,9 +165,14 @@ const generateConfig = ({extensionPath, devMode=false, customOutputPath, analyze
     "react-input-autosize",
     "typeface-lato",
     // "papaparse", <= This is only for the drag-and-drop of files and can be separated
-    "dom-to-image"
-    // "marked",
-    // "dompurify", <= These two are only for MD display and can be separated
+    "dom-to-image",
+    // marked + dompurify are used for MD display of the footer in (most) datasets
+    "marked",
+    "dompurify",
+    // `yaml-front-matter` only used for narrative parsing, but included here to simplify the import code
+    // and avoid it being bundled with most of the Auspice code. It imports "js-yaml".
+    "yaml-front-matter",
+    "js-yaml"
   ];
 
   /**
@@ -251,6 +256,12 @@ const generateConfig = ({extensionPath, devMode=false, customOutputPath, analyze
         {
           test: /\.(gif|png|jpe?g|svg|woff2?|eot|otf|ttf)$/i,
           use: "file-loader"
+        },
+        {
+          // esprima is a (large) dependency of js-yaml which is unnecessary in a browser
+          // see https://github.com/nodeca/js-yaml/issues/230
+          test: /node_modules\/esprima/,
+          use: 'null-loader'
         }
       ]
     }