@storybook/builder-webpack5 6.4.0-beta.9 → 6.4.0-rc.11

package/dist/cjs/preview/base-webpack.config.js

@@ -16,7 +16,7 @@ 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; }
 
 async function createDefaultWebpackConfig(storybookBaseConfig, options) {
-  var _storybookBaseConfig$;
+  var _options, _storybookBaseConfig$;
 
   if (options.presetsList.some(function (preset) {
     return /@storybook(\/|\\)preset-create-react-app/.test(typeof preset === 'string' ? preset : preset.name);
@@ -49,6 +49,12 @@ async function createDefaultWebpackConfig(storybookBaseConfig, options) {
   }
 
   var isProd = storybookBaseConfig.mode !== 'development';
+  var coreOptions = await options.presets.apply('core');
+  var cacheConfig = (_options = coreOptions.builder.options) !== null && _options !== void 0 && _options.fsCache ? {
+    cache: {
+      type: 'filesystem'
+    }
+  } : {};
   return _objectSpread(_objectSpread({}, storybookBaseConfig), {}, {
     module: _objectSpread(_objectSpread({}, storybookBaseConfig.module), {}, {
       rules: [...storybookBaseConfig.module.rules, cssLoaders, {
@@ -76,5 +82,5 @@ async function createDefaultWebpackConfig(storybookBaseConfig, options) {
         assert: false
       })
     })
-  });
+  }, cacheConfig);
 }

package/dist/cjs/preview/iframe-webpack.config.js

@@ -46,8 +46,7 @@ var storybookPaths = ['addons', 'api', 'channels', 'channel-postmessage', 'compo
 }, {});
 
 var _default = async function _default(options) {
-  var configDir = options.configDir,
-      babelOptions = options.babelOptions,
+  var babelOptions = options.babelOptions,
       _options$outputDir = options.outputDir,
       outputDir = _options$outputDir === void 0 ? _path.default.join('.', 'public') : _options$outputDir,
       quiet = options.quiet,
@@ -58,13 +57,15 @@ var _default = async function _default(options) {
       presets = options.presets,
       typescriptOptions = options.typescriptOptions,
       modern = options.modern,
-      features = options.features;
+      features = options.features,
+      serverChannelUrl = options.serverChannelUrl;
   var envs = await presets.apply('env');
   var logLevel = await presets.apply('logLevel', undefined);
   var frameworkOptions = await presets.apply(`${framework}Options`, {});
   var headHtmlSnippet = await presets.apply('previewHead');
   var bodyHtmlSnippet = await presets.apply('previewBody');
   var template = await presets.apply('previewMainTemplate');
+  var coreOptions = await presets.apply('core');
   var babelLoader = (0, _babelLoaderPreview.createBabelLoader)(babelOptions, framework);
   var isProd = configType === 'PRODUCTION';
   var configs = [...(await presets.apply('config', [], options)), (0, _coreCommon.loadPreviewOrConfigFile)(options)].filter(Boolean);
@@ -79,16 +80,17 @@ var _default = async function _default(options) {
   if (features !== null && features !== void 0 && features.storyStoreV7) {
     var storiesFilename = 'storybook-stories.js';
 
-    var storiesPath = _path.default.resolve(_path.default.join(configDir, storiesFilename));
+    var storiesPath = _path.default.resolve(_path.default.join(workingDir, storiesFilename));
 
     virtualModuleMapping[storiesPath] = (0, _coreCommon.toImportFn)(stories);
 
-    var configEntryPath = _path.default.resolve(_path.default.join(configDir, 'storybook-config-entry.js'));
+    var configEntryPath = _path.default.resolve(_path.default.join(workingDir, 'storybook-config-entry.js'));
 
     virtualModuleMapping[configEntryPath] = (0, _coreCommon.handlebars)(await (0, _coreCommon.readTemplate)(_path.default.join(__dirname, 'virtualModuleModernEntry.js.handlebars')), {
       storiesFilename: storiesFilename,
       configs: configs
-    });
+    } // We need to double escape `\` for webpack. We may have some in windows paths
+    ).replace(/\\/g, '\\\\');
     entries.push(configEntryPath);
   } else {
     var frameworkInitEntry = _path.default.resolve(_path.default.join(workingDir, 'storybook-init-framework-entry.js'));
@@ -150,25 +152,24 @@ var _default = async function _default(options) {
       chunksSortMode: 'none',
       alwaysWriteToDisk: true,
       inject: false,
-      templateParameters: function (compilation, files, templateOptions) {
-        return {
-          compilation: compilation,
-          files: files,
-          options: templateOptions,
-          version: packageJson.version,
-          globals: {
-            LOGLEVEL: logLevel,
-            FRAMEWORK_OPTIONS: frameworkOptions,
-            FEATURES: features,
-            STORIES: stories.map(function (specifier) {
-              return _objectSpread(_objectSpread({}, specifier), {}, {
-                importPathMatcher: specifier.importPathMatcher.source
-              });
-            })
-          },
-          headHtmlSnippet: headHtmlSnippet,
-          bodyHtmlSnippet: bodyHtmlSnippet
-        };
+      template: template,
+      templateParameters: {
+        version: packageJson.version,
+        globals: {
+          CONFIG_TYPE: configType,
+          LOGLEVEL: logLevel,
+          FRAMEWORK_OPTIONS: frameworkOptions,
+          CHANNEL_OPTIONS: coreOptions === null || coreOptions === void 0 ? void 0 : coreOptions.channelOptions,
+          FEATURES: features,
+          STORIES: stories.map(function (specifier) {
+            return _objectSpread(_objectSpread({}, specifier), {}, {
+              importPathMatcher: specifier.importPathMatcher.source
+            });
+          }),
+          SERVER_CHANNEL_URL: serverChannelUrl
+        },
+        headHtmlSnippet: headHtmlSnippet,
+        bodyHtmlSnippet: bodyHtmlSnippet
       },
       minify: {
         collapseWhitespace: true,
@@ -177,11 +178,12 @@ var _default = async function _default(options) {
         removeScriptTypeAttributes: false,
         removeStyleLinkTypeAttributes: true,
         useShortDoctype: true
-      },
-      template: template
+      }
     }), new _webpack.DefinePlugin(_objectSpread(_objectSpread({}, (0, _coreCommon.stringifyProcessEnvs)(envs)), {}, {
       NODE_ENV: JSON.stringify(process.env.NODE_ENV)
-    })), isProd ? null : new _WatchMissingNodeModulesPlugin.default(_coreCommon.nodeModulesPaths), isProd ? null : new _webpack.HotModuleReplacementPlugin(), new _caseSensitivePathsWebpackPlugin.default(), quiet ? null : new _webpack.ProgressPlugin({}), shouldCheckTs ? new _forkTsCheckerWebpackPlugin.default(tsCheckOptions) : null].filter(Boolean),
+    })), new _webpack.ProvidePlugin({
+      process: 'process/browser.js'
+    }), isProd ? null : new _WatchMissingNodeModulesPlugin.default(_coreCommon.nodeModulesPaths), isProd ? null : new _webpack.HotModuleReplacementPlugin(), new _caseSensitivePathsWebpackPlugin.default(), quiet ? null : new _webpack.ProgressPlugin({}), shouldCheckTs ? new _forkTsCheckerWebpackPlugin.default(tsCheckOptions) : null].filter(Boolean),
     module: {
       rules: [babelLoader, (0, _coreCommon.es6Transpiler)(), {
         test: /\.md$/,
@@ -192,7 +194,7 @@ var _default = async function _default(options) {
       extensions: ['.mjs', '.js', '.jsx', '.ts', '.tsx', '.json', '.cjs'],
       modules: ['node_modules'].concat(envs.NODE_PATH || []),
       mainFields: [modern ? 'sbmodern' : null, 'browser', 'module', 'main'].filter(Boolean),
-      alias: _objectSpread(_objectSpread(_objectSpread({}, _paths.default), storybookPaths), {}, {
+      alias: _objectSpread(_objectSpread(_objectSpread({}, features !== null && features !== void 0 && features.emotionAlias ? _paths.default : {}), storybookPaths), {}, {
         react: _path.default.dirname(require.resolve('react/package.json')),
         'react-dom': _path.default.dirname(require.resolve('react-dom/package.json'))
       }),

package/dist/cjs/preview/virtualModuleEntry.template.js

@@ -64,6 +64,12 @@ Object.keys(config).forEach(function (key) {
         return addParameters(v, false);
       }
 
+    case 'decorateStory':
+    case 'renderToDOM':
+      {
+        return null; // This key is not handled directly in v6 mode.
+      }
+
     default:
       {
         // eslint-disable-next-line prefer-template

package/dist/cjs/preview/virtualModuleModernEntry.js.handlebars

@@ -1,22 +1,28 @@
 import fetch from 'unfetch';
+import global from 'global';
 
-import { composeConfigs, PreviewWeb } from '@storybook/preview-web';    
-import { ClientApi } from '@storybook/client-api';    
+import { composeConfigs, PreviewWeb } from '@storybook/preview-web';
+import { ClientApi } from '@storybook/client-api';
 import { addons } from '@storybook/addons';
-import createChannel from '@storybook/channel-postmessage';
+import createPostMessageChannel from '@storybook/channel-postmessage';
+import createWebSocketChannel from '@storybook/channel-websocket';
 
 import { importFn } from './{{storiesFilename}}';
 
+const { SERVER_CHANNEL_URL } = global;
+
 const getProjectAnnotations = () =>
-  composeConfigs([
-    {{#each configs}}
-    require('{{this}}'),
-    {{/each}}
-  ]);
+  composeConfigs([{{#each configs}}require('{{this}}'),{{/each}}]);
 
-const channel = createChannel({ page: 'preview' });
+const channel = createPostMessageChannel({ page: 'preview' });
 addons.setChannel(channel);
 
+if (SERVER_CHANNEL_URL) {
+  const serverChannel = createWebSocketChannel({ url: SERVER_CHANNEL_URL, });
+  addons.setServerChannel(serverChannel);
+  window.__STORYBOOK_SERVER_CHANNEL__ = serverChannel;
+}
+
 const preview = new PreviewWeb();
 
 window.__STORYBOOK_PREVIEW__ = preview;
@@ -36,4 +42,4 @@ if (module.hot) {
     // getProjectAnnotations has changed so we need to patch the new one in
     preview.onGetProjectAnnotationsChanged({ getProjectAnnotations });
   });
-}
+}

package/dist/esm/preview/base-webpack.config.js

@@ -7,7 +7,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 import "core-js/modules/es.promise.js";
 import { logger } from '@storybook/node-logger';
 export async function createDefaultWebpackConfig(storybookBaseConfig, options) {
-  var _storybookBaseConfig$;
+  var _options, _storybookBaseConfig$;
 
   if (options.presetsList.some(function (preset) {
     return /@storybook(\/|\\)preset-create-react-app/.test(typeof preset === 'string' ? preset : preset.name);
@@ -39,6 +39,12 @@ export async function createDefaultWebpackConfig(storybookBaseConfig, options) {
   }
 
   var isProd = storybookBaseConfig.mode !== 'development';
+  var coreOptions = await options.presets.apply('core');
+  var cacheConfig = (_options = coreOptions.builder.options) !== null && _options !== void 0 && _options.fsCache ? {
+    cache: {
+      type: 'filesystem'
+    }
+  } : {};
   return _objectSpread(_objectSpread({}, storybookBaseConfig), {}, {
     module: _objectSpread(_objectSpread({}, storybookBaseConfig.module), {}, {
       rules: [...storybookBaseConfig.module.rules, cssLoaders, {
@@ -66,5 +72,5 @@ export async function createDefaultWebpackConfig(storybookBaseConfig, options) {
         assert: false
       })
     })
-  });
+  }, cacheConfig);
 }

package/dist/esm/preview/iframe-webpack.config.js

@@ -7,7 +7,7 @@ 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 path from 'path';
-import { DefinePlugin, HotModuleReplacementPlugin, ProgressPlugin } from 'webpack';
+import { DefinePlugin, HotModuleReplacementPlugin, ProgressPlugin, ProvidePlugin } from 'webpack';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
 import WatchMissingNodeModulesPlugin from 'react-dev-utils/WatchMissingNodeModulesPlugin';
@@ -24,8 +24,7 @@ var storybookPaths = ['addons', 'api', 'channels', 'channel-postmessage', 'compo
   });
 }, {});
 export default (async function (options) {
-  var configDir = options.configDir,
-      babelOptions = options.babelOptions,
+  var babelOptions = options.babelOptions,
       _options$outputDir = options.outputDir,
       outputDir = _options$outputDir === void 0 ? path.join('.', 'public') : _options$outputDir,
       quiet = options.quiet,
@@ -36,13 +35,15 @@ export default (async function (options) {
       presets = options.presets,
       typescriptOptions = options.typescriptOptions,
       modern = options.modern,
-      features = options.features;
+      features = options.features,
+      serverChannelUrl = options.serverChannelUrl;
   var envs = await presets.apply('env');
   var logLevel = await presets.apply('logLevel', undefined);
   var frameworkOptions = await presets.apply(`${framework}Options`, {});
   var headHtmlSnippet = await presets.apply('previewHead');
   var bodyHtmlSnippet = await presets.apply('previewBody');
   var template = await presets.apply('previewMainTemplate');
+  var coreOptions = await presets.apply('core');
   var babelLoader = createBabelLoader(babelOptions, framework);
   var isProd = configType === 'PRODUCTION';
   var configs = [...(await presets.apply('config', [], options)), loadPreviewOrConfigFile(options)].filter(Boolean);
@@ -56,13 +57,14 @@ export default (async function (options) {
 
   if (features !== null && features !== void 0 && features.storyStoreV7) {
     var storiesFilename = 'storybook-stories.js';
-    var storiesPath = path.resolve(path.join(configDir, storiesFilename));
+    var storiesPath = path.resolve(path.join(workingDir, storiesFilename));
     virtualModuleMapping[storiesPath] = toImportFn(stories);
-    var configEntryPath = path.resolve(path.join(configDir, 'storybook-config-entry.js'));
+    var configEntryPath = path.resolve(path.join(workingDir, 'storybook-config-entry.js'));
     virtualModuleMapping[configEntryPath] = handlebars(await readTemplate(path.join(__dirname, 'virtualModuleModernEntry.js.handlebars')), {
       storiesFilename: storiesFilename,
       configs: configs
-    });
+    } // We need to double escape `\` for webpack. We may have some in windows paths
+    ).replace(/\\/g, '\\\\');
     entries.push(configEntryPath);
   } else {
     var frameworkInitEntry = path.resolve(path.join(workingDir, 'storybook-init-framework-entry.js'));
@@ -123,25 +125,24 @@ export default (async function (options) {
       chunksSortMode: 'none',
       alwaysWriteToDisk: true,
       inject: false,
-      templateParameters: function (compilation, files, templateOptions) {
-        return {
-          compilation: compilation,
-          files: files,
-          options: templateOptions,
-          version: packageJson.version,
-          globals: {
-            LOGLEVEL: logLevel,
-            FRAMEWORK_OPTIONS: frameworkOptions,
-            FEATURES: features,
-            STORIES: stories.map(function (specifier) {
-              return _objectSpread(_objectSpread({}, specifier), {}, {
-                importPathMatcher: specifier.importPathMatcher.source
-              });
-            })
-          },
-          headHtmlSnippet: headHtmlSnippet,
-          bodyHtmlSnippet: bodyHtmlSnippet
-        };
+      template: template,
+      templateParameters: {
+        version: packageJson.version,
+        globals: {
+          CONFIG_TYPE: configType,
+          LOGLEVEL: logLevel,
+          FRAMEWORK_OPTIONS: frameworkOptions,
+          CHANNEL_OPTIONS: coreOptions === null || coreOptions === void 0 ? void 0 : coreOptions.channelOptions,
+          FEATURES: features,
+          STORIES: stories.map(function (specifier) {
+            return _objectSpread(_objectSpread({}, specifier), {}, {
+              importPathMatcher: specifier.importPathMatcher.source
+            });
+          }),
+          SERVER_CHANNEL_URL: serverChannelUrl
+        },
+        headHtmlSnippet: headHtmlSnippet,
+        bodyHtmlSnippet: bodyHtmlSnippet
       },
       minify: {
         collapseWhitespace: true,
@@ -150,11 +151,12 @@ export default (async function (options) {
         removeScriptTypeAttributes: false,
         removeStyleLinkTypeAttributes: true,
         useShortDoctype: true
-      },
-      template: template
+      }
     }), new DefinePlugin(_objectSpread(_objectSpread({}, stringifyProcessEnvs(envs)), {}, {
       NODE_ENV: JSON.stringify(process.env.NODE_ENV)
-    })), isProd ? null : new WatchMissingNodeModulesPlugin(nodeModulesPaths), isProd ? null : new HotModuleReplacementPlugin(), new CaseSensitivePathsPlugin(), quiet ? null : new ProgressPlugin({}), shouldCheckTs ? new ForkTsCheckerWebpackPlugin(tsCheckOptions) : null].filter(Boolean),
+    })), new ProvidePlugin({
+      process: 'process/browser.js'
+    }), isProd ? null : new WatchMissingNodeModulesPlugin(nodeModulesPaths), isProd ? null : new HotModuleReplacementPlugin(), new CaseSensitivePathsPlugin(), quiet ? null : new ProgressPlugin({}), shouldCheckTs ? new ForkTsCheckerWebpackPlugin(tsCheckOptions) : null].filter(Boolean),
     module: {
       rules: [babelLoader, es6Transpiler(), {
         test: /\.md$/,
@@ -165,7 +167,7 @@ export default (async function (options) {
       extensions: ['.mjs', '.js', '.jsx', '.ts', '.tsx', '.json', '.cjs'],
       modules: ['node_modules'].concat(envs.NODE_PATH || []),
       mainFields: [modern ? 'sbmodern' : null, 'browser', 'module', 'main'].filter(Boolean),
-      alias: _objectSpread(_objectSpread(_objectSpread({}, themingPaths), storybookPaths), {}, {
+      alias: _objectSpread(_objectSpread(_objectSpread({}, features !== null && features !== void 0 && features.emotionAlias ? themingPaths : {}), storybookPaths), {}, {
         react: path.dirname(require.resolve('react/package.json')),
         'react-dom': path.dirname(require.resolve('react-dom/package.json'))
       }),

package/dist/esm/preview/virtualModuleEntry.template.js

@@ -64,6 +64,12 @@ Object.keys(config).forEach(function (key) {
         return addParameters(v, false);
       }
 
+    case 'decorateStory':
+    case 'renderToDOM':
+      {
+        return null; // This key is not handled directly in v6 mode.
+      }
+
     default:
       {
         // eslint-disable-next-line prefer-template

package/dist/esm/preview/virtualModuleModernEntry.js.handlebars

@@ -1,22 +1,28 @@
 import fetch from 'unfetch';
+import global from 'global';
 
-import { composeConfigs, PreviewWeb } from '@storybook/preview-web';    
-import { ClientApi } from '@storybook/client-api';    
+import { composeConfigs, PreviewWeb } from '@storybook/preview-web';
+import { ClientApi } from '@storybook/client-api';
 import { addons } from '@storybook/addons';
-import createChannel from '@storybook/channel-postmessage';
+import createPostMessageChannel from '@storybook/channel-postmessage';
+import createWebSocketChannel from '@storybook/channel-websocket';
 
 import { importFn } from './{{storiesFilename}}';
 
+const { SERVER_CHANNEL_URL } = global;
+
 const getProjectAnnotations = () =>
-  composeConfigs([
-    {{#each configs}}
-    require('{{this}}'),
-    {{/each}}
-  ]);
+  composeConfigs([{{#each configs}}require('{{this}}'),{{/each}}]);
 
-const channel = createChannel({ page: 'preview' });
+const channel = createPostMessageChannel({ page: 'preview' });
 addons.setChannel(channel);
 
+if (SERVER_CHANNEL_URL) {
+  const serverChannel = createWebSocketChannel({ url: SERVER_CHANNEL_URL, });
+  addons.setServerChannel(serverChannel);
+  window.__STORYBOOK_SERVER_CHANNEL__ = serverChannel;
+}
+
 const preview = new PreviewWeb();
 
 window.__STORYBOOK_PREVIEW__ = preview;
@@ -36,4 +42,4 @@ if (module.hot) {
     // getProjectAnnotations has changed so we need to patch the new one in
     preview.onGetProjectAnnotationsChanged({ getProjectAnnotations });
   });
-}
+}

package/dist/modern/preview/base-webpack.config.js

@@ -7,7 +7,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 import "core-js/modules/es.promise.js";
 import { logger } from '@storybook/node-logger';
 export async function createDefaultWebpackConfig(storybookBaseConfig, options) {
-  var _storybookBaseConfig$;
+  var _options, _storybookBaseConfig$;
 
   if (options.presetsList.some(function (preset) {
     return /@storybook(\/|\\)preset-create-react-app/.test(typeof preset === 'string' ? preset : preset.name);
@@ -39,6 +39,12 @@ export async function createDefaultWebpackConfig(storybookBaseConfig, options) {
   }
 
   var isProd = storybookBaseConfig.mode !== 'development';
+  var coreOptions = await options.presets.apply('core');
+  var cacheConfig = (_options = coreOptions.builder.options) !== null && _options !== void 0 && _options.fsCache ? {
+    cache: {
+      type: 'filesystem'
+    }
+  } : {};
   return _objectSpread(_objectSpread({}, storybookBaseConfig), {}, {
     module: _objectSpread(_objectSpread({}, storybookBaseConfig.module), {}, {
       rules: [...storybookBaseConfig.module.rules, cssLoaders, {
@@ -66,5 +72,5 @@ export async function createDefaultWebpackConfig(storybookBaseConfig, options) {
         assert: false
       })
     })
-  });
+  }, cacheConfig);
 }

package/dist/modern/preview/iframe-webpack.config.js

@@ -7,7 +7,7 @@ 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 path from 'path';
-import { DefinePlugin, HotModuleReplacementPlugin, ProgressPlugin } from 'webpack';
+import { DefinePlugin, HotModuleReplacementPlugin, ProgressPlugin, ProvidePlugin } from 'webpack';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
 import WatchMissingNodeModulesPlugin from 'react-dev-utils/WatchMissingNodeModulesPlugin';
@@ -24,8 +24,7 @@ var storybookPaths = ['addons', 'api', 'channels', 'channel-postmessage', 'compo
   });
 }, {});
 export default (async function (options) {
-  var configDir = options.configDir,
-      babelOptions = options.babelOptions,
+  var babelOptions = options.babelOptions,
       _options$outputDir = options.outputDir,
       outputDir = _options$outputDir === void 0 ? path.join('.', 'public') : _options$outputDir,
       quiet = options.quiet,
@@ -36,13 +35,15 @@ export default (async function (options) {
       presets = options.presets,
       typescriptOptions = options.typescriptOptions,
       modern = options.modern,
-      features = options.features;
+      features = options.features,
+      serverChannelUrl = options.serverChannelUrl;
   var envs = await presets.apply('env');
   var logLevel = await presets.apply('logLevel', undefined);
   var frameworkOptions = await presets.apply(`${framework}Options`, {});
   var headHtmlSnippet = await presets.apply('previewHead');
   var bodyHtmlSnippet = await presets.apply('previewBody');
   var template = await presets.apply('previewMainTemplate');
+  var coreOptions = await presets.apply('core');
   var babelLoader = createBabelLoader(babelOptions, framework);
   var isProd = configType === 'PRODUCTION';
   var configs = [...(await presets.apply('config', [], options)), loadPreviewOrConfigFile(options)].filter(Boolean);
@@ -56,13 +57,14 @@ export default (async function (options) {
 
   if (features !== null && features !== void 0 && features.storyStoreV7) {
     var storiesFilename = 'storybook-stories.js';
-    var storiesPath = path.resolve(path.join(configDir, storiesFilename));
+    var storiesPath = path.resolve(path.join(workingDir, storiesFilename));
     virtualModuleMapping[storiesPath] = toImportFn(stories);
-    var configEntryPath = path.resolve(path.join(configDir, 'storybook-config-entry.js'));
+    var configEntryPath = path.resolve(path.join(workingDir, 'storybook-config-entry.js'));
     virtualModuleMapping[configEntryPath] = handlebars(await readTemplate(path.join(__dirname, 'virtualModuleModernEntry.js.handlebars')), {
       storiesFilename: storiesFilename,
       configs: configs
-    });
+    } // We need to double escape `\` for webpack. We may have some in windows paths
+    ).replace(/\\/g, '\\\\');
     entries.push(configEntryPath);
   } else {
     var frameworkInitEntry = path.resolve(path.join(workingDir, 'storybook-init-framework-entry.js'));
@@ -123,25 +125,24 @@ export default (async function (options) {
       chunksSortMode: 'none',
       alwaysWriteToDisk: true,
       inject: false,
-      templateParameters: function (compilation, files, templateOptions) {
-        return {
-          compilation: compilation,
-          files: files,
-          options: templateOptions,
-          version: packageJson.version,
-          globals: {
-            LOGLEVEL: logLevel,
-            FRAMEWORK_OPTIONS: frameworkOptions,
-            FEATURES: features,
-            STORIES: stories.map(function (specifier) {
-              return _objectSpread(_objectSpread({}, specifier), {}, {
-                importPathMatcher: specifier.importPathMatcher.source
-              });
-            })
-          },
-          headHtmlSnippet: headHtmlSnippet,
-          bodyHtmlSnippet: bodyHtmlSnippet
-        };
+      template: template,
+      templateParameters: {
+        version: packageJson.version,
+        globals: {
+          CONFIG_TYPE: configType,
+          LOGLEVEL: logLevel,
+          FRAMEWORK_OPTIONS: frameworkOptions,
+          CHANNEL_OPTIONS: coreOptions === null || coreOptions === void 0 ? void 0 : coreOptions.channelOptions,
+          FEATURES: features,
+          STORIES: stories.map(function (specifier) {
+            return _objectSpread(_objectSpread({}, specifier), {}, {
+              importPathMatcher: specifier.importPathMatcher.source
+            });
+          }),
+          SERVER_CHANNEL_URL: serverChannelUrl
+        },
+        headHtmlSnippet: headHtmlSnippet,
+        bodyHtmlSnippet: bodyHtmlSnippet
       },
       minify: {
         collapseWhitespace: true,
@@ -150,11 +151,12 @@ export default (async function (options) {
         removeScriptTypeAttributes: false,
         removeStyleLinkTypeAttributes: true,
         useShortDoctype: true
-      },
-      template: template
+      }
     }), new DefinePlugin(_objectSpread(_objectSpread({}, stringifyProcessEnvs(envs)), {}, {
       NODE_ENV: JSON.stringify(process.env.NODE_ENV)
-    })), isProd ? null : new WatchMissingNodeModulesPlugin(nodeModulesPaths), isProd ? null : new HotModuleReplacementPlugin(), new CaseSensitivePathsPlugin(), quiet ? null : new ProgressPlugin({}), shouldCheckTs ? new ForkTsCheckerWebpackPlugin(tsCheckOptions) : null].filter(Boolean),
+    })), new ProvidePlugin({
+      process: 'process/browser.js'
+    }), isProd ? null : new WatchMissingNodeModulesPlugin(nodeModulesPaths), isProd ? null : new HotModuleReplacementPlugin(), new CaseSensitivePathsPlugin(), quiet ? null : new ProgressPlugin({}), shouldCheckTs ? new ForkTsCheckerWebpackPlugin(tsCheckOptions) : null].filter(Boolean),
     module: {
       rules: [babelLoader, es6Transpiler(), {
         test: /\.md$/,
@@ -165,7 +167,7 @@ export default (async function (options) {
       extensions: ['.mjs', '.js', '.jsx', '.ts', '.tsx', '.json', '.cjs'],
       modules: ['node_modules'].concat(envs.NODE_PATH || []),
       mainFields: [modern ? 'sbmodern' : null, 'browser', 'module', 'main'].filter(Boolean),
-      alias: _objectSpread(_objectSpread(_objectSpread({}, themingPaths), storybookPaths), {}, {
+      alias: _objectSpread(_objectSpread(_objectSpread({}, features !== null && features !== void 0 && features.emotionAlias ? themingPaths : {}), storybookPaths), {}, {
         react: path.dirname(require.resolve('react/package.json')),
         'react-dom': path.dirname(require.resolve('react-dom/package.json'))
       }),

package/dist/modern/preview/virtualModuleEntry.template.js

@@ -64,6 +64,12 @@ Object.keys(config).forEach(function (key) {
         return addParameters(v, false);
       }
 
+    case 'decorateStory':
+    case 'renderToDOM':
+      {
+        return null; // This key is not handled directly in v6 mode.
+      }
+
     default:
       {
         // eslint-disable-next-line prefer-template

package/dist/modern/preview/virtualModuleModernEntry.js.handlebars

@@ -1,22 +1,28 @@
 import fetch from 'unfetch';
+import global from 'global';
 
-import { composeConfigs, PreviewWeb } from '@storybook/preview-web';    
-import { ClientApi } from '@storybook/client-api';    
+import { composeConfigs, PreviewWeb } from '@storybook/preview-web';
+import { ClientApi } from '@storybook/client-api';
 import { addons } from '@storybook/addons';
-import createChannel from '@storybook/channel-postmessage';
+import createPostMessageChannel from '@storybook/channel-postmessage';
+import createWebSocketChannel from '@storybook/channel-websocket';
 
 import { importFn } from './{{storiesFilename}}';
 
+const { SERVER_CHANNEL_URL } = global;
+
 const getProjectAnnotations = () =>
-  composeConfigs([
-    {{#each configs}}
-    require('{{this}}'),
-    {{/each}}
-  ]);
+  composeConfigs([{{#each configs}}require('{{this}}'),{{/each}}]);
 
-const channel = createChannel({ page: 'preview' });
+const channel = createPostMessageChannel({ page: 'preview' });
 addons.setChannel(channel);
 
+if (SERVER_CHANNEL_URL) {
+  const serverChannel = createWebSocketChannel({ url: SERVER_CHANNEL_URL, });
+  addons.setServerChannel(serverChannel);
+  window.__STORYBOOK_SERVER_CHANNEL__ = serverChannel;
+}
+
 const preview = new PreviewWeb();
 
 window.__STORYBOOK_PREVIEW__ = preview;
@@ -36,4 +42,4 @@ if (module.hot) {
     // getProjectAnnotations has changed so we need to patch the new one in
     preview.onGetProjectAnnotationsChanged({ getProjectAnnotations });
   });
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-webpack5",
-  "version": "6.4.0-beta.9",
+  "version": "6.4.0-rc.11",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
@@ -60,21 +60,21 @@
     "@babel/preset-env": "^7.12.11",
     "@babel/preset-react": "^7.12.10",
     "@babel/preset-typescript": "^7.12.7",
-    "@storybook/addons": "6.4.0-beta.9",
-    "@storybook/api": "6.4.0-beta.9",
-    "@storybook/channel-postmessage": "6.4.0-beta.9",
-    "@storybook/channels": "6.4.0-beta.9",
-    "@storybook/client-api": "6.4.0-beta.9",
-    "@storybook/client-logger": "6.4.0-beta.9",
-    "@storybook/components": "6.4.0-beta.9",
-    "@storybook/core-common": "6.4.0-beta.9",
-    "@storybook/core-events": "6.4.0-beta.9",
-    "@storybook/node-logger": "6.4.0-beta.9",
-    "@storybook/preview-web": "6.4.0-beta.9",
-    "@storybook/router": "6.4.0-beta.9",
+    "@storybook/addons": "6.4.0-rc.11",
+    "@storybook/api": "6.4.0-rc.11",
+    "@storybook/channel-postmessage": "6.4.0-rc.11",
+    "@storybook/channels": "6.4.0-rc.11",
+    "@storybook/client-api": "6.4.0-rc.11",
+    "@storybook/client-logger": "6.4.0-rc.11",
+    "@storybook/components": "6.4.0-rc.11",
+    "@storybook/core-common": "6.4.0-rc.11",
+    "@storybook/core-events": "6.4.0-rc.11",
+    "@storybook/node-logger": "6.4.0-rc.11",
+    "@storybook/preview-web": "6.4.0-rc.11",
+    "@storybook/router": "6.4.0-rc.11",
     "@storybook/semver": "^7.3.2",
-    "@storybook/store": "6.4.0-beta.9",
-    "@storybook/theming": "6.4.0-beta.9",
+    "@storybook/store": "6.4.0-rc.11",
+    "@storybook/theming": "6.4.0-rc.11",
     "@types/node": "^14.0.10",
     "babel-loader": "^8.0.0",
     "babel-plugin-macros": "^3.0.1",
@@ -117,6 +117,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a22654ce25781cfb510ecc95a6465de0247f8487",
+  "gitHead": "77eb43c5f02179fb2a823f975448e706710931fc",
   "sbmodern": "dist/modern/index.js"
 }