Merge 5e08a2a into 3778264

layouts/html.hbs

@@ -85,7 +85,7 @@
       });
       {{/babel}}
     </script>
-    <script src="{{relativePath}}/bundle.js" data-webpack-inline></script>
+    {{> script/partials/bundle-script-tags }}
     {{#if global_config.googleAnalyticsId}}
       <!-- Global site tag (gtag.js) - Google Analytics -->
       <script async src="https://www.googletagmanager.com/gtag/js?id={{global_config.googleAnalyticsId}}"></script>

script/partials/bundle-script-tags.hbs

@@ -0,0 +1,2 @@
+<script src="{{relativePath}}/bundle.js" type="module" data-webpack-inline></script>
+<script src="{{relativePath}}/bundle-legacy.js" nomodule></script>

static/entry-legacy.js

@@ -0,0 +1,8 @@
+// Import global polyfills
+import 'core-js/stable';
+
+import * as HitchhikerJS from './js/HitchhikerJS';
+window.HitchhikerJS = HitchhikerJS;
+
+// Import all SCSS
+import Scss from './scss/answers/_default.scss';

static/entry.js

@@ -1,35 +1,5 @@
-// Import global polyfills
-import 'core-js/stable';
+import * as HitchhikerJS from './js/HitchhikerJS';
+window.HitchhikerJS = HitchhikerJS;
 
 // Import all SCSS
-import Scss from './scss/answers/_default.scss';
-
-// Import all JS assets
-import Formatters from './js/formatters';
-window.Formatter = Formatters;
-
-export { Formatters };
-export { getDefaultMapApiKey } from './js/default-map-api-key';
-export { isStaging } from './js/is-staging';
-export { isMobile }  from 'is-mobile';
-export { getInjectedProp } from './js/get-injected-prop';
-export { isHighlighted } from './js/is-highlighted';
-
-// Used to transfigure the page for the Overlay
-import Overlay from './js/overlay/answers-frame/overlay';
-window.Overlay = new Overlay();
-
-// Import code used in Collapsible Filters, and give it the alias of window.CollapsibleFilters.
-import CollapsibleFilters from './js/collapsible-filters';
-export { CollapsibleFilters };
-global.CollapsibleFilters = CollapsibleFilters;
-
-// Import custom modules which can be accessed from HitchhikerJS.CustomModules
-import * as CustomModules from './js/custom-modules';
-export { CustomModules };
-
-import StorageKeys from './js/constants/storage-keys';
-export { StorageKeys };
-
-import transformFacets from './js/transform-facets';
-export { transformFacets }
+import Scss from './scss/answers/_default.scss';

static/js/HitchhikerJS.js

@@ -0,0 +1,29 @@
+// Import all JS assets
+import Formatters from './formatters';
+window.Formatter = Formatters;
+
+export { Formatters };
+export { getDefaultMapApiKey } from './default-map-api-key';
+export { isStaging } from './is-staging';
+export { isMobile }  from 'is-mobile';
+export { getInjectedProp } from './get-injected-prop';
+export { isHighlighted } from './is-highlighted';
+
+// Used to transfigure the page for the Overlay
+import Overlay from './overlay/answers-frame/overlay';
+window.Overlay = new Overlay();
+
+// Import code used in Collapsible Filters, and give it the alias of window.CollapsibleFilters.
+import CollapsibleFilters from './collapsible-filters';
+export { CollapsibleFilters };
+global.CollapsibleFilters = CollapsibleFilters;
+
+// Import custom modules which can be accessed from HitchhikerJS.CustomModules
+import * as CustomModules from './custom-modules';
+export { CustomModules };
+
+import StorageKeys from './constants/storage-keys';
+export { StorageKeys };
+
+import transformFacets from './transform-facets';
+export { transformFacets }

static/webpack-config.js

@@ -48,15 +48,14 @@ module.exports = function () {
   ];
 
   const commonConfig = {
-    devtool: 'source-map',
     stats: 'errors-warnings',
     performance: {
       maxAssetSize: 1536000,
       maxEntrypointSize: 1024000
     },
     target: ['web', 'es5'],
     entry: {
-      'HitchhikerJS': `./${jamboConfig.dirs.output}/static/entry.js`,
+      'bundle': `./${jamboConfig.dirs.output}/static/entry.js`,
       'iframe': `./${jamboConfig.dirs.output}/static/js/iframe.js`,
       'answers': `./${jamboConfig.dirs.output}/static/js/iframe.js`,
       'overlay-button': `./${jamboConfig.dirs.output}/static/js/overlay/button-frame/entry.js`,
@@ -74,8 +73,7 @@ module.exports = function () {
       filename: pathData => {
         const chunkName = pathData.chunk.name;
         return {
-          VerticalFullPageMap: 'locator-bundle.js',
-          HitchhikerJS: 'bundle.js',
+          VerticalFullPageMap: 'locator-bundle.js'
         }[chunkName] || '[name].js'
       },
       library: '[name]',
@@ -141,12 +139,12 @@ module.exports = function () {
   if (isDevelopment) {
     const devConfig = require(
       `./${jamboConfig.dirs.output}/static/webpack/webpack.dev.js`
-    )();
+    )(jamboConfig);
     return merge(commonConfig, devConfig);
   } else {
     const prodConfig = require(
       `./${jamboConfig.dirs.output}/static/webpack/webpack.prod.js`
-    )();
+    )(jamboConfig);
     return merge(commonConfig, prodConfig);
   }
 };

static/webpack/webpack.dev.js

@@ -1,6 +1,7 @@
 module.exports = () => {
   return {
     mode: 'development',
+    devtool: 'eval',
     optimization: {
       minimize: false
     }

static/webpack/webpack.prod.js

@@ -1,9 +1,13 @@
 const { ESBuildMinifyPlugin } = require('esbuild-loader')
 
-module.exports = () => {
+module.exports = (jamboConfig) => {
   const InlineAssetHtmlPlugin = require('./InlineAssetHtmlPlugin');
   return {
     mode: 'production',
+    devtool: 'source-map',
+    entry: {
+      'bundle-legacy': `./${jamboConfig.dirs.output}/static/entry-legacy.js`,
+    },
     plugins: [
       new InlineAssetHtmlPlugin()
     ],
@@ -41,4 +45,4 @@ module.exports = () => {
       ]
     },
   };
-}
+}