@storybook/core-common 6.4.0-beta.9 → 6.4.0-rc.11

package/dist/cjs/utils/normalize-stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.normalizeStories = exports.normalizeStoriesEntry = void 0;
+exports.normalizeStories = exports.normalizeStoriesEntry = exports.getDirectoryFromWorkingDir = void 0;
 
 var _fs = _interopRequireDefault(require("fs"));
 
@@ -13,10 +13,12 @@ var _utilDeprecate = _interopRequireDefault(require("util-deprecate"));
 
 var _tsDedent = _interopRequireDefault(require("ts-dedent"));
 
-var _micromatch = require("micromatch");
+var _picomatch = require("picomatch");
 
 var _slash = _interopRequireDefault(require("slash"));
 
+var _paths = require("./paths");
+
 var _globToRegexp = require("./glob-to-regexp");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -54,6 +56,22 @@ var isDirectory = function (configDir, entry) {
   }
 };
 
+var getDirectoryFromWorkingDir = function ({
+  configDir: configDir,
+  workingDir: workingDir,
+  directory: directory
+}) {
+  var directoryFromConfig = _path.default.resolve(configDir, directory);
+
+  var directoryFromWorking = _path.default.relative(workingDir, directoryFromConfig); // relative('/foo', '/foo/src') => 'src'
+  // but we want `./src` to match importPaths
+
+
+  return (0, _paths.normalizeStoryPath)(directoryFromWorking);
+};
+
+exports.getDirectoryFromWorkingDir = getDirectoryFromWorkingDir;
+
 var normalizeStoriesEntry = function (entry, {
   configDir: configDir,
   workingDir: workingDir
@@ -77,7 +95,7 @@ var normalizeStoriesEntry = function (entry, {
       }
     } else {
       var fixedEntry = detectBadGlob(entry);
-      var globResult = (0, _micromatch.scan)(fixedEntry);
+      var globResult = (0, _picomatch.scan)(fixedEntry);
 
       var _directory = globResult.isGlob ? globResult.prefix + globResult.base : _path.default.dirname(fixedEntry);
 
@@ -105,19 +123,13 @@ var normalizeStoriesEntry = function (entry, {
 
   var _specifierWithoutMatc = specifierWithoutMatcher,
       directoryRelativeToConfig = _specifierWithoutMatc.directory;
+  var directory = (0, _slash.default)(getDirectoryFromWorkingDir({
+    configDir: configDir,
+    workingDir: workingDir,
+    directory: directoryRelativeToConfig
+  })).replace(/\/$/, ''); // Now make the importFn matcher.
 
-  var absoluteDirectory = _path.default.resolve(configDir, directoryRelativeToConfig);
-
-  var directory = (0, _slash.default)(_path.default.relative(workingDir, absoluteDirectory)); // relative('/foo', '/foo/src') => 'src'
-  // but we want `./src` to match importPaths
-
-  if (!directory.startsWith('.')) {
-    directory = `./${directory}`;
-  }
-
-  directory = directory.replace(/\/$/, ''); // Now make the importFn matcher.
-
-  var importPathMatcher = (0, _globToRegexp.globToRegex)(`${directory}/${files}`);
+  var importPathMatcher = (0, _globToRegexp.globToRegexp)(`${directory}/${files}`);
   return _objectSpread(_objectSpread({}, specifierWithoutMatcher), {}, {
     directory: directory,
     importPathMatcher: importPathMatcher

package/dist/cjs/utils/paths.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.normalizeStoryPath = normalizeStoryPath;
 exports.nodePathsToArray = exports.nodeModulesPaths = exports.getProjectRoot = void 0;
 
 var _path = _interopRequireDefault(require("path"));
@@ -48,4 +49,13 @@ var nodePathsToArray = function (nodePath) {
   });
 };
 
-exports.nodePathsToArray = nodePathsToArray;
+exports.nodePathsToArray = nodePathsToArray;
+var relativePattern = /^\.{1,2}[/\\]/;
+/**
+ * Ensures that a path starts with `./` or `../`
+ */
+
+function normalizeStoryPath(filename) {
+  if (relativePattern.test(filename)) return filename;
+  return `.${_path.default.sep}${filename}`;
+}

package/dist/cjs/utils/to-importFn.js

@@ -3,22 +3,35 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.webpackIncludeRegexp = webpackIncludeRegexp;
 exports.toImportFnPart = toImportFnPart;
 exports.toImportFn = toImportFn;
 
 var _tsDedent = _interopRequireDefault(require("ts-dedent"));
 
+var _globToRegexp = require("./glob-to-regexp");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function toImportFnPart(specifier) {
+function webpackIncludeRegexp(specifier) {
   var directory = specifier.directory,
-      importPathMatcher = specifier.importPathMatcher; // It appears webpack passes *something* similar to the absolute path to the file
+      files = specifier.files; // It appears webpack passes *something* similar to the absolute path to the file
   // on disk (prefixed with something unknown) to the matcher.
-  // We don't want to include the absolute path in our bundle, so we will just pull the
-  // '^' and any leading '.' off the regexp and match on that.
+  // We don't want to include the absolute path in our bundle, so we will just pull any leading
+  // `./` or `../` off our directory and match on that.
   // It's imperfect as it could match extra things in extremely unusual cases, but it'll do for now.
+  // NOTE: directory is "slashed" so will contain only `/` (no `\`), even on windows
 
-  var webpackIncludeRegex = new RegExp(importPathMatcher.source.replace(/^\^\\\.*/, ''));
+  var directoryWithoutLeadingDots = directory.replace(/^(\.+\/)+/, '/');
+  var webpackIncludeGlob = ['.', '..'].includes(directory) ? files : `${directoryWithoutLeadingDots}/${files}`;
+  var webpackIncludeRegexpWithCaret = (0, _globToRegexp.globToRegexp)(webpackIncludeGlob); // picomatch is creating an exact match, but we are only matching the end of the filename
+
+  return new RegExp(webpackIncludeRegexpWithCaret.source.replace(/^\^/, ''));
+}
+
+function toImportFnPart(specifier) {
+  var directory = specifier.directory,
+      importPathMatcher = specifier.importPathMatcher;
   return (0, _tsDedent.default)`
       async (path) => {
         if (!${importPathMatcher}.exec(path)) {
@@ -27,7 +40,8 @@ function toImportFnPart(specifier) {
 
         const pathRemainder = path.substring(${directory.length + 1});
         return import(
-          /* webpackInclude: ${webpackIncludeRegex} */
+          /* webpackChunkName: "[request]" */
+          /* webpackInclude: ${webpackIncludeRegexp(specifier)} */
           '${directory}/' + pathRemainder
         );
       }

package/dist/cjs/utils/to-require-context.js

@@ -12,7 +12,7 @@ var toRequireContext = function (specifier) {
       files = specifier.files; // The importPathMatcher is a `./`-prefixed matcher that includes the directory
   // For `require.context()` we want the same thing, relative to directory
 
-  var match = (0, _globToRegexp.globToRegex)(`./${files}`);
+  var match = (0, _globToRegexp.globToRegexp)(`./${files}`);
   return {
     path: directory,
     recursive: !!files.match(/^\*{1,2}\//),

package/dist/esm/index.js

@@ -1,6 +1,7 @@
 export * from './presets';
 export * from './utils/babel';
 export * from './utils/check-webpack-version';
+export * from './utils/check-addon-order';
 export * from './utils/envs';
 export * from './utils/es6Transpiler';
 export * from './utils/handlebars';
@@ -24,4 +25,5 @@ export * from './utils/to-require-context';
 export * from './utils/normalize-stories';
 export * from './utils/to-importFn';
 export * from './utils/readTemplate';
+export * from './utils/findDistEsm';
 export * from './types';

package/dist/esm/presets.js

@@ -11,10 +11,11 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 import dedent from 'ts-dedent';
-import { join } from 'path';
+import { join, resolve } from 'path';
 import { logger } from '@storybook/node-logger';
 import resolveFrom from 'resolve-from';
 import { loadCustomPresets } from './utils/load-custom-presets';
+import { serverRequire } from './utils/interpret-require';
 
 var isObject = function (val) {
   return val != null && typeof val === 'object' && Array.isArray(val) === false;
@@ -31,13 +32,15 @@ export function filterPresetsConfig(presetsConfig) {
   });
 }
 
-function resolvePresetFunction(input, presetOptions, storybookOptions) {
+function resolvePresetFunction(input, presetOptions, framework, storybookOptions) {
+  var prepend = [framework].filter(Boolean);
+
   if (isFunction(input)) {
-    return input(_objectSpread(_objectSpread({}, storybookOptions), presetOptions));
+    return [...prepend, ...input(_objectSpread(_objectSpread({}, storybookOptions), presetOptions))];
   }
 
   if (Array.isArray(input)) {
-    return input;
+    return [...prepend, ...input];
   }
 
   return [];
@@ -178,11 +181,12 @@ export function loadPreset(input, level, storybookOptions) {
       var _contents = contents,
           addonsInput = _contents.addons,
           presetsInput = _contents.presets,
-          rest = _objectWithoutProperties(_contents, ["addons", "presets"]);
+          framework = _contents.framework,
+          rest = _objectWithoutProperties(_contents, ["addons", "presets", "framework"]);
 
-      var _subPresets = resolvePresetFunction(presetsInput, presetOptions, storybookOptions);
+      var _subPresets = resolvePresetFunction(presetsInput, presetOptions, framework, storybookOptions);
 
-      var subAddons = resolvePresetFunction(addonsInput, presetOptions, storybookOptions);
+      var subAddons = resolvePresetFunction(addonsInput, presetOptions, framework, storybookOptions);
       return [...loadPresets([..._subPresets], level + 1, storybookOptions), ...loadPresets([...subAddons.map(map(storybookOptions))].filter(Boolean), level + 1, storybookOptions), {
         name: name,
         preset: rest,
@@ -217,8 +221,8 @@ function loadPresets(presets, level, storybookOptions) {
 }
 
 function applyPresets(presets, extension, config, args, storybookOptions) {
-  var presetResult = new Promise(function (resolve) {
-    return resolve(config);
+  var presetResult = new Promise(function (res) {
+    return res(config);
   });
 
   if (!presets.length) {
@@ -275,6 +279,32 @@ export function getPresets(presets, storybookOptions) {
     }
   };
 }
+/**
+ * Get the `framework` provided in main.js and also do error checking up front
+ */
+
+var getFrameworkPackage = function (configDir) {
+  var main = serverRequire(resolve(configDir, 'main'));
+  if (!main) return null;
+  var frameworkPackage = main.framework,
+      _main$features = main.features,
+      features = _main$features === void 0 ? {} : _main$features;
+
+  if (features.breakingChangesV7 && !frameworkPackage) {
+    throw new Error(dedent`
+      Expected 'framework' in your main.js, didn't find one.
+
+      You can fix this automatically by running:
+
+      npx sb@next automigrate
+    
+      More info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#mainjs-framework-field
+    `);
+  }
+
+  return frameworkPackage;
+};
+
 export function loadAllPresets(options) {
   var _options$corePresets = options.corePresets,
       corePresets = _options$corePresets === void 0 ? [] : _options$corePresets,
@@ -284,7 +314,8 @@ export function loadAllPresets(options) {
       overridePresets = _options$overridePres === void 0 ? [] : _options$overridePres,
       restOptions = _objectWithoutProperties(options, ["corePresets", "frameworkPresets", "overridePresets"]);
 
-  var presetsConfig = [...corePresets, ...frameworkPresets, ...loadCustomPresets(options), ...overridePresets]; // Remove `@storybook/preset-typescript` and add a warning if in use.
+  var frameworkPackage = getFrameworkPackage(options.configDir);
+  var presetsConfig = [...corePresets, ...(frameworkPackage ? [] : frameworkPresets), ...loadCustomPresets(options), ...overridePresets]; // Remove `@storybook/preset-typescript` and add a warning if in use.
 
   var filteredPresetConfig = filterPresetsConfig(presetsConfig);
 

package/dist/esm/templates/base-preview-body.html

@@ -1,3 +1,268 @@
+<style>
+  @-webkit-keyframes rotate360 {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes rotate360 {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  @-webkit-keyframes glow {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.4;
+    }
+  }
+  @keyframes glow {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.4;
+    }
+  }
+  .isLoading {
+    cursor: progress;
+  }
+
+  .loader {
+    -webkit-animation: rotate360 0.7s linear infinite;
+    animation: rotate360 0.7s linear infinite;
+    border-color: rgba(97, 97, 97, 0.29);
+    border-radius: 50%;
+    border-style: solid;
+    border-top-color: #646464;
+    border-width: 2px;
+    display: inline-block;
+    height: 32px;
+    left: 50%;
+    margin-left: -16px;
+    margin-top: -16px;
+    mix-blend-mode: difference;
+    overflow: hidden;
+    position: absolute;
+    top: 50%;
+    transition: all 200ms ease-out;
+    vertical-align: top;
+    width: 32px;
+    z-index: 4;
+  }
+
+  .previewBlock {
+    background: #fff;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+    box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 0;
+    margin: 25px auto 40px;
+    max-width: 600px;
+  }
+
+  .previewBlock_header {
+    align-items: center;
+    box-shadow: rgba(0, 0, 0, 0.1) 0 -1px 0 0 inset;
+    display: flex;
+    gap: 14px;
+    height: 40px;
+    padding: 0 12px;
+  }
+
+  .previewBlock_icon {
+    -webkit-animation: glow 1.5s ease-in-out infinite;
+    animation: glow 1.5s ease-in-out infinite;
+    background: #e6e6e6;
+    height: 14px;
+    width: 14px;
+  }
+  .previewBlock_icon:last-child {
+    margin-left: auto;
+  }
+
+  .previewBlock_body {
+    -webkit-animation: glow 1.5s ease-in-out infinite;
+    animation: glow 1.5s ease-in-out infinite;
+    height: 182px;
+    position: relative;
+  }
+
+  .argstableBlock {
+    border-collapse: collapse;
+    border-spacing: 0;
+    font-size: 13px;
+    line-height: 20px;
+    margin: 25px auto 40px;
+    max-width: 600px;
+    text-align: left;
+    width: 100%;
+  }
+  .argstableBlock th:first-of-type,
+  .argstableBlock td:first-of-type {
+    padding-left: 20px;
+  }
+  .argstableBlock th:nth-of-type(2),
+  .argstableBlock td:nth-of-type(2) {
+    width: 35%;
+  }
+  .argstableBlock th:nth-of-type(3),
+  .argstableBlock td:nth-of-type(3) {
+    width: 15%;
+  }
+  .argstableBlock th:laste-of-type,
+  .argstableBlock td:laste-of-type {
+    width: 25%;
+    padding-right: 20px;
+  }
+  .argstableBlock th span,
+  .argstableBlock td span {
+    -webkit-animation: glow 1.5s ease-in-out infinite;
+    animation: glow 1.5s ease-in-out infinite;
+    background-color: rgba(0, 0, 0, 0.1);
+    border-radius: 0;
+    box-shadow: none;
+    color: transparent;
+  }
+  .argstableBlock th {
+    padding: 10px 15px;
+  }
+
+  .argstableBlock-body {
+    border-radius: 4px;
+    box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 1px, rgba(0, 0, 0, 0.065) 0 0 0 1px;
+  }
+  .argstableBlock-body tr {
+    background: transparent;
+    overflow: hidden;
+  }
+  .argstableBlock-body tr:not(:first-child) {
+    border-top: 1px solid #e6e6e6;
+  }
+  .argstableBlock-body tr:first-child td:first-child {
+    border-top-left-radius: 4px;
+  }
+  .argstableBlock-body tr:first-child td:last-child {
+    border-top-right-radius: 4px;
+  }
+  .argstableBlock-body tr:last-child td:first-child {
+    border-bottom-left-radius: 4px;
+  }
+  .argstableBlock-body tr:last-child td:last-child {
+    border-bottom-right-radius: 4px;
+  }
+  .argstableBlock-body td {
+    background: #fff;
+    padding-bottom: 10px;
+    padding-top: 10px;
+    vertical-align: top;
+  }
+  .argstableBlock-body td:not(:first-of-type) {
+    padding-left: 15px;
+    padding-right: 15px;
+  }
+  .argstableBlock-body button {
+    -webkit-animation: glow 1.5s ease-in-out infinite;
+    animation: glow 1.5s ease-in-out infinite;
+    background-color: rgba(0, 0, 0, 0.1);
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    color: transparent;
+    display: inline;
+    font-size: 12px;
+    line-height: 1;
+    padding: 10px 16px;
+  }
+
+  .argstableBlock-summary {
+    margin-top: 4px;
+  }
+
+  .argstableBlock-code {
+    margin-right: 4px;
+    margin-bottom: 4px;
+    padding: 2px 5px;
+  }
+</style>
+
+<div class="sb-preparing-story sb-wrapper">
+  <div class="loader"></div>
+</div>
+
+<div class="sb-preparing-docs sb-wrapper">
+  <div class="previewBlock">
+    <div class="previewBlock_header">
+      <div class="previewBlock_icon"></div>
+      <div class="previewBlock_icon"></div>
+      <div class="previewBlock_icon"></div>
+      <div class="previewBlock_icon"></div>
+    </div>
+    <div class="previewBlock_body">
+      <div class="loader"></div>
+    </div>
+  </div>
+  <table aria-hidden="true" class="argstableBlock">
+    <thead class="argstableBlock-head">
+      <tr>
+        <th><span>Name</span></th>
+        <th><span>Description</span></th>
+        <th><span>Default</span></th>
+        <th><span>Control </span></th>
+      </tr>
+    </thead>
+    <tbody class="argstableBlock-body">
+      <tr>
+        <td><span>propertyName</span><span title="Required">*</span></td>
+        <td>
+          <div><span>This is a short description</span></div>
+          <div class="argstableBlock-summary">
+            <div><span class="argstableBlock-code">summary</span></div>
+          </div>
+        </td>
+        <td>
+          <div><span class="argstableBlock-code">defaultValue</span></div>
+        </td>
+        <td><button>Set string</button></td>
+      </tr>
+      <tr>
+        <td><span>propertyName</span><span>*</span></td>
+        <td>
+          <div><span>This is a short description</span></div>
+          <div class="argstableBlock-summary">
+            <div><span class="argstableBlock-code">summary</span></div>
+          </div>
+        </td>
+        <td>
+          <div><span class="argstableBlock-code">defaultValue</span></div>
+        </td>
+        <td><button>Set string</button></td>
+      </tr>
+      <tr>
+        <td><span>propertyName</span><span>*</span></td>
+        <td>
+          <div><span>This is a short description</span></div>
+          <div class="argstableBlock-summary">
+            <div><span class="argstableBlock-code">summary</span></div>
+          </div>
+        </td>
+        <td>
+          <div><span class="argstableBlock-code">defaultValue</span></div>
+        </td>
+        <td><button>Set string</button></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
 <div class="sb-nopreview sb-wrapper">
   <div class="sb-nopreview_main">
     <h1 class="sb-nopreview_heading sb-heading">No Preview</h1>
@@ -6,7 +271,9 @@
       <li>Please check the Storybook config.</li>
       <li>Try reloading the page.</li>
     </ul>
-    <p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p>
+    <p>
+      If the problem persists, check the browser console, or the terminal you've run Storybook from.
+    </p>
   </div>
 </div>
 

package/dist/esm/templates/base-preview-head.html

@@ -1,7 +1,10 @@
-<base target="_parent">
+<base target="_parent" />
 
 <style>
-  :not(.sb-show-main) > .sb-main,
+  :not(.sb-show-main) > #root,
+  :not(.sb-show-main) > #docs-root,
+  :not(.sb-show-preparing-story) > .sb-preparing-story,
+  :not(.sb-show-preparing-docs) > .sb-preparing-docs,
   :not(.sb-show-nopreview) > .sb-nopreview,
   :not(.sb-show-errordisplay) > .sb-errordisplay {
     display: none;
@@ -50,7 +53,8 @@
     left: 0;
     right: 0;
     padding: 20px;
-    font-family: "Nunito Sans", -apple-system, ".SFNSText-Regular", "San Francisco", BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-family: 'Nunito Sans', -apple-system, '.SFNSText-Regular', 'San Francisco',
+      BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     overflow: auto;
   }
@@ -73,7 +77,7 @@
     margin: auto;
     padding: 30px;
     border-radius: 10px;
-    background: rgba(0,0,0,0.03);
+    background: rgba(0, 0, 0, 0.03);
   }
 
   .sb-nopreview_heading {
@@ -91,7 +95,8 @@
     padding: 10px;
     background: #000;
     color: #eee;
-    font-family: "Operator Mono", "Fira Code Retina", "Fira Code", "FiraCode-Retina", "Andale Mono", "Lucida Console", Consolas, Monaco, monospace;
+    font-family: 'Operator Mono', 'Fira Code Retina', 'Fira Code', 'FiraCode-Retina', 'Andale Mono',
+      'Lucida Console', Consolas, Monaco, monospace;
   }
 
   .sb-errordisplay pre {

package/dist/esm/templates/index.ejs

@@ -2,16 +2,16 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title><%= options.title || 'Storybook'%></title>
+    <title><%= htmlWebpackPlugin.options.title || 'Storybook'%></title>
 
-    <% if (files.favicon) { %>
-    <link rel="shortcut icon" href="<%= files.favicon%>" />
+    <% if (htmlWebpackPlugin.files.favicon) { %>
+    <link rel="shortcut icon" href="<%= htmlWebpackPlugin.files.favicon%>" />
     <% } %>
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     <% if (typeof headHtmlSnippet !== 'undefined') { %> <%= headHtmlSnippet %> <% } %> <%
-    files.css.forEach(file => { %>
+    htmlWebpackPlugin.files.css.forEach(file => { %>
     <link href="<%= file %>" rel="stylesheet" />
     <% }); %>
 
@@ -23,25 +23,21 @@
     </style>
   </head>
   <body>
-    <% if (typeof bodyHtmlSnippet !== 'undefined') { %>
-      <%= bodyHtmlSnippet %>
-    <% } %>
+    <% if (typeof bodyHtmlSnippet !== 'undefined') { %> <%= bodyHtmlSnippet %> <% } %>
 
     <div id="root"></div>
     <div id="docs-root"></div>
 
     <% if (typeof globals !== 'undefined' && Object.keys(globals).length) { %>
-      <script>
-        <% for (var varName in globals) { %>
-            <% if (globals[varName] != undefined) { %>
-              window['<%=varName%>'] = <%= JSON.stringify(globals[varName]) %>;
-            <% } %>
-        <% } %>
-      </script>
-    <% } %>
-    
-    <% files.js.forEach(file => { %>
-      <script src="<%= file %>"></script>
+    <script>
+      <% for (var varName in globals) { %>
+          <% if (globals[varName] != undefined) { %>
+            window['<%=varName%>'] = <%= JSON.stringify(globals[varName]) %>;
+          <% } %>
+      <% } %>
+    </script>
+    <% } %> <% htmlWebpackPlugin.files.js.forEach(file => { %>
+    <script src="<%= file %>"></script>
     <% }); %>
   </body>
 </html>