@storybook/core-server 6.4.0-beta.8 → 6.4.0-rc.2

package/dist/cjs/build-dev.js

@@ -96,6 +96,7 @@ async function buildDevStandalone(options) {
   options.configType = 'DEVELOPMENT';
   options.configDir = _path.default.resolve(options.configDir);
   options.outputDir = options.smokeTest ? (0, _coreCommon.resolvePathInStorybookCache)('public') : _path.default.resolve(options.outputDir || (0, _coreCommon.resolvePathInStorybookCache)('public'));
+  options.serverChannelUrl = (0, _serverAddress.getServerChannelUrl)(port, options);
   /* eslint-enable no-param-reassign */
 
   var previewBuilder = await (0, _getPreviewBuilder.getPreviewBuilder)(options.configDir);

package/dist/cjs/build-static.js

@@ -18,6 +18,8 @@ var _fsExtra = _interopRequireDefault(require("fs-extra"));
 
 var _path = _interopRequireDefault(require("path"));
 
+var _tsDedent = _interopRequireDefault(require("ts-dedent"));
+
 var _nodeLogger = require("@storybook/node-logger");
 
 var _coreCommon = require("@storybook/core-common");
@@ -63,7 +65,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 buildStaticStandalone(options) {
-  var _options$staticDir;
+  var _options$staticDir, _core$builder;
 
   /* eslint-disable no-param-reassign */
   options.configType = 'PRODUCTION';
@@ -90,13 +92,32 @@ async function buildStaticStandalone(options) {
 
   await _fsExtra.default.emptyDir(options.outputDir);
   await (0, _cpy.default)(defaultFavIcon, options.outputDir);
-  await (0, _copyAllStaticFiles.copyAllStaticFiles)(options.staticDir, options.outputDir);
   var previewBuilder = await (0, _getPreviewBuilder.getPreviewBuilder)(options.configDir);
   var managerBuilder = await (0, _getManagerBuilder.getManagerBuilder)(options.configDir);
   var presets = (0, _coreCommon.loadAllPresets)(_objectSpread({
     corePresets: [require.resolve('./presets/common-preset'), ...managerBuilder.corePresets, ...previewBuilder.corePresets, require.resolve('./presets/babel-cache-preset')],
     overridePresets: previewBuilder.overridePresets
   }, options));
+  var staticDirs = await presets.apply('staticDirs');
+
+  if (staticDirs && options.staticDir) {
+    throw new Error((0, _tsDedent.default)`
+      Conflict when trying to read staticDirs:
+      * Storybook's configuration option: 'staticDirs'
+      * Storybook's CLI flag: '--staticDir' or '-s'
+      
+      Choose one of them, but not both.
+    `);
+  }
+
+  if (staticDirs) {
+    await (0, _copyAllStaticFiles.copyAllStaticFilesRelativeToMain)(staticDirs, options.outputDir, options.configDir);
+  }
+
+  if (options.staticDir) {
+    await (0, _copyAllStaticFiles.copyAllStaticFiles)(options.staticDir, options.outputDir);
+  }
+
   var features = await presets.apply('features');
 
   if (features !== null && features !== void 0 && features.buildStoriesJson || features !== null && features !== void 0 && features.storyStoreV7) {
@@ -121,8 +142,9 @@ async function buildStaticStandalone(options) {
   }
 
   var core = await presets.apply('core');
+  var builderName = typeof (core === null || core === void 0 ? void 0 : core.builder) === 'string' ? core.builder : core === null || core === void 0 ? void 0 : (_core$builder = core.builder) === null || _core$builder === void 0 ? void 0 : _core$builder.name;
 
-  var _ref = (core === null || core === void 0 ? void 0 : core.builder) === 'webpack5' ? await Promise.resolve().then(function () {
+  var _ref = builderName === 'webpack5' ? await Promise.resolve().then(function () {
     return _interopRequireWildcard(require('@storybook/manager-webpack5/prebuilt-manager'));
   }) : await Promise.resolve().then(function () {
     return _interopRequireWildcard(require('@storybook/manager-webpack4/prebuilt-manager'));

package/dist/cjs/cli/utils.js

@@ -32,14 +32,32 @@ function getEnvConfig(program, configEnv) {
   });
 }
 
-var warnDLLsDeprecated = (0, _utilDeprecate.default)(function () {}, (0, _tsDedent.default)`
+var warnDeprecatedFlag = function (message) {
+  return (0, _utilDeprecate.default)(function () {}, (0, _tsDedent.default)(message));
+};
+
+var warnDLLsDeprecated = warnDeprecatedFlag(`
     DLL-related CLI flags are deprecated, see:
     
     https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-dll-flags
   `);
+var warnStaticDirDeprecated = warnDeprecatedFlag(`
+    --static-dir CLI flag is deprecated, see:
+
+    https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-static-dir-flag
+  `);
 
-function checkDeprecatedFlags(options) {
-  if (!options.dll || options.uiDll || options.docsDll) {
+function checkDeprecatedFlags({
+  dll: dll,
+  uiDll: uiDll,
+  docsDll: docsDll,
+  staticDir: staticDir
+}) {
+  if (!dll || uiDll || docsDll) {
     warnDLLsDeprecated();
   }
+
+  if (staticDir) {
+    warnStaticDirDeprecated();
+  }
 }

package/dist/cjs/dev-server.js

@@ -26,6 +26,8 @@ var _serverStatics = require("./utils/server-statics");
 
 var _storiesJson = require("./utils/stories-json");
 
+var _getServerChannel = require("./utils/get-server-channel");
+
 var _openInBrowser = require("./utils/open-in-browser");
 
 var _getPreviewBuilder = require("./utils/get-preview-builder");
@@ -58,6 +60,7 @@ async function storybookDevServer(options) {
   var startTime = process.hrtime();
   var app = (0, _express.default)();
   var server = await (0, _serverInit.getServer)(app, options);
+  var serverChannel = (0, _getServerChannel.getServerChannel)(server);
   app.use((0, _compression.default)({
     level: 1
   }));
@@ -76,7 +79,7 @@ async function storybookDevServer(options) {
   var features = await options.presets.apply('features');
 
   if (features !== null && features !== void 0 && features.buildStoriesJson || features !== null && features !== void 0 && features.storyStoreV7) {
-    await (0, _storiesJson.useStoriesJson)(router, options);
+    await (0, _storiesJson.useStoriesJson)(router, serverChannel, options);
   }
 
   (0, _middleware.getMiddleware)(options.configDir)(router);

package/dist/cjs/presets/common-preset.js

@@ -107,7 +107,8 @@ exports.typescript = typescript;
 
 var features = async function (existing) {
   return _objectSpread(_objectSpread({}, existing), {}, {
-    postcss: true
+    postcss: true,
+    emotionAlias: true
   });
 };
 

package/dist/cjs/utils/StoryIndexGenerator.js

@@ -19,6 +19,8 @@ var _fsExtra = _interopRequireDefault(require("fs-extra"));
 
 var _globby = _interopRequireDefault(require("globby"));
 
+var _slash = _interopRequireDefault(require("slash"));
+
 var _store = require("@storybook/store");
 
 var _nodeLogger = require("@storybook/node-logger");
@@ -74,9 +76,7 @@ class StoryIndexGenerator {
     // Find all matching paths for each specifier
     await Promise.all(this.specifiers.map(async function (specifier) {
       var pathToSubIndex = {};
-
-      var fullGlob = _path.default.join(_this.options.workingDir, specifier.directory, specifier.files);
-
+      var fullGlob = (0, _slash.default)(_path.default.join(_this.options.workingDir, specifier.directory, specifier.files));
       var files = await (0, _globby.default)(fullGlob);
       files.forEach(function (absolutePath) {
         var ext = _path.default.extname(absolutePath);
@@ -113,10 +113,11 @@ class StoryIndexGenerator {
   async extractStories(specifier, absolutePath) {
     var relativePath = _path.default.relative(this.options.workingDir, absolutePath);
 
+    var fileStories = {};
+    var entry = this.storyIndexEntries.get(specifier);
+
     try {
-      var entry = this.storyIndexEntries.get(specifier);
-      var fileStories = {};
-      var importPath = relativePath[0] === '.' ? relativePath : `./${relativePath}`;
+      var importPath = (0, _slash.default)(relativePath[0] === '.' ? relativePath : `./${relativePath}`);
       var defaultTitle = (0, _store.autoTitleFromSpecifier)(importPath, specifier);
       var csf = (await (0, _csfTools.readCsfOrMdx)(absolutePath, {
         defaultTitle: defaultTitle
@@ -132,13 +133,18 @@ class StoryIndexGenerator {
           importPath: importPath
         };
       });
-      entry[absolutePath] = fileStories;
-      return fileStories;
     } catch (err) {
-      _nodeLogger.logger.warn(`🚨 Extraction error on ${relativePath}: ${err}`);
+      if (err.name === 'NoMetaError') {
+        _nodeLogger.logger.info(`💡 Skipping ${relativePath}: ${err}`);
+      } else {
+        _nodeLogger.logger.warn(`🚨 Extraction error on ${relativePath}: ${err}`);
 
-      throw err;
+        throw err;
+      }
     }
+
+    entry[absolutePath] = fileStories;
+    return fileStories;
   }
 
   async sortStories(storiesList) {

package/dist/cjs/utils/__mockdata__/src/NoMeta.stories.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StoryOne = void 0;
+
+/* eslint-disable storybook/default-exports */
+// no default export
+// e.g. https://github.com/storybookjs/storybook/issues/16421
+var StoryOne = {};
+exports.StoryOne = StoryOne;

package/dist/cjs/utils/copy-all-static-files.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.copyAllStaticFiles = copyAllStaticFiles;
+exports.copyAllStaticFilesRelativeToMain = copyAllStaticFilesRelativeToMain;
 
 require("core-js/modules/es.promise.js");
 
@@ -15,6 +16,8 @@ var _path = _interopRequireDefault(require("path"));
 
 var _nodeLogger = require("@storybook/node-logger");
 
+var _coreCommon = require("@storybook/core-common");
+
 var _serverStatics = require("./server-statics");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -50,4 +53,34 @@ async function copyAllStaticFiles(staticDirs, outputDir) {
       }
     }));
   }
+}
+
+async function copyAllStaticFilesRelativeToMain(staticDirs, outputDir, configDir) {
+  staticDirs.forEach(async function (dir) {
+    var staticDirAndTarget = typeof dir === 'string' ? dir : `${dir.from}:${dir.to}`;
+
+    var _await$parseStaticDir2 = await (0, _serverStatics.parseStaticDir)((0, _coreCommon.getDirectoryFromWorkingDir)({
+      configDir: configDir,
+      workingDir: process.cwd(),
+      directory: staticDirAndTarget
+    })),
+        from = _await$parseStaticDir2.staticPath,
+        to = _await$parseStaticDir2.targetEndpoint;
+
+    var targetPath = _path.default.join(outputDir, to);
+
+    var skipPaths = ['index.html', 'iframe.html'].map(function (f) {
+      return _path.default.join(targetPath, f);
+    });
+
+    _nodeLogger.logger.info((0, _chalk.default)`=> Copying static files: {cyan ${from}} at {cyan ${targetPath}}`);
+
+    await _fsExtra.default.copy(from, targetPath, {
+      dereference: true,
+      preserveTimestamps: true,
+      filter: function (_, dest) {
+        return !skipPaths.includes(dest);
+      }
+    });
+  });
 }

package/dist/cjs/utils/get-manager-builder.js

@@ -18,6 +18,8 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 async function getManagerBuilder(configDir) {
+  var _core$builder;
+
   var main = _path.default.resolve(configDir, 'main');
 
   var mainFile = (0, _coreCommon.getInterpretedFile)(main);
@@ -25,14 +27,15 @@ async function getManagerBuilder(configDir) {
   var _ref = mainFile ? (0, _coreCommon.serverRequire)(mainFile) : {
     core: null
   },
-      core = _ref.core; // Builder can be any string including community builders like `storybook-builder-vite`.
+      core = _ref.core;
+
+  var builderName = typeof (core === null || core === void 0 ? void 0 : core.builder) === 'string' ? core.builder : core === null || core === void 0 ? void 0 : (_core$builder = core.builder) === null || _core$builder === void 0 ? void 0 : _core$builder.name; // Builder can be any string including community builders like `storybook-builder-vite`.
   // - For now, `webpack5` triggers `manager-webpack5`
   // - Everything else builds with `manager-webpack4`
   //
   // Unlike preview builders, manager building is not pluggable!
 
-
-  var builderPackage = (core === null || core === void 0 ? void 0 : core.builder) === 'webpack5' ? require.resolve('@storybook/manager-webpack5', {
+  var builderPackage = builderName === 'webpack5' ? require.resolve('@storybook/manager-webpack5', {
     paths: [main]
   }) : '@storybook/manager-webpack4';
   var managerBuilder = await Promise.resolve(`${builderPackage}`).then(function (s) {

package/dist/cjs/utils/get-preview-builder.js

@@ -27,10 +27,19 @@ async function getPreviewBuilder(configDir) {
   },
       core = _ref.core;
 
-  var builder = core === null || core === void 0 ? void 0 : core.builder;
-  var builderPackage = builder ? require.resolve(['webpack4', 'webpack5'].includes(builder) ? `@storybook/builder-${builder}` : builder, {
-    paths: [main]
-  }) : require.resolve('@storybook/builder-webpack4');
+  var builderPackage;
+
+  if (core) {
+    var _core$builder;
+
+    var builderName = typeof core.builder === 'string' ? core.builder : (_core$builder = core.builder) === null || _core$builder === void 0 ? void 0 : _core$builder.name;
+    builderPackage = require.resolve(['webpack4', 'webpack5'].includes(builderName) ? `@storybook/builder-${builderName}` : builderName, {
+      paths: [main]
+    });
+  } else {
+    builderPackage = require.resolve('@storybook/builder-webpack4');
+  }
+
   var previewBuilder = await Promise.resolve(`${builderPackage}`).then(function (s) {
     return _interopRequireWildcard(require(s));
   });

package/dist/cjs/utils/get-server-channel.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getServerChannel = getServerChannel;
+exports.ServerChannel = void 0;
+
+var _ws = _interopRequireWildcard(require("ws"));
+
+var _telejson = require("telejson");
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+class ServerChannel {
+  constructor(server) {
+    var _this = this;
+
+    this.webSocketServer = void 0;
+    this.webSocketServer = new _ws.WebSocketServer({
+      noServer: true
+    });
+    server.on('upgrade', function (request, socket, head) {
+      if (request.url === '/storybook-server-channel') {
+        _this.webSocketServer.handleUpgrade(request, socket, head, function (ws) {
+          _this.webSocketServer.emit('connection', ws, request);
+        });
+      }
+    });
+  }
+
+  emit(type, args = []) {
+    var event = {
+      type: type,
+      args: args
+    };
+    var data = (0, _telejson.stringify)(event, {
+      maxDepth: 15,
+      allowFunction: true
+    });
+    Array.from(this.webSocketServer.clients).filter(function (c) {
+      return c.readyState === _ws.default.OPEN;
+    }).forEach(function (client) {
+      return client.send(data);
+    });
+  }
+
+}
+
+exports.ServerChannel = ServerChannel;
+
+function getServerChannel(server) {
+  return new ServerChannel(server);
+}

package/dist/cjs/utils/server-address.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getServerAddresses = getServerAddresses;
-exports.getServerPort = void 0;
+exports.getServerChannelUrl = exports.getServerPort = void 0;
 
 var _ip = _interopRequireDefault(require("ip"));
 
@@ -29,4 +29,12 @@ var getServerPort = function (port) {
   });
 };
 
-exports.getServerPort = getServerPort;
+exports.getServerPort = getServerPort;
+
+var getServerChannelUrl = function (port, {
+  https: https
+}) {
+  return `${https ? 'wss' : 'ws'}://localhost:${port}/storybook-server-channel`;
+};
+
+exports.getServerChannelUrl = getServerChannelUrl;

package/dist/cjs/utils/server-statics.js

@@ -12,6 +12,8 @@ require("core-js/modules/es.promise.js");
 
 var _nodeLogger = require("@storybook/node-logger");
 
+var _coreCommon = require("@storybook/core-common");
+
 var _chalk = _interopRequireDefault(require("chalk"));
 
 var _express = _interopRequireDefault(require("express"));
@@ -42,14 +44,45 @@ var defaultFavIcon = require.resolve('../public/favicon.ico');
 
 async function useStatics(router, options) {
   var hasCustomFavicon = false;
+  var staticDirs = await options.presets.apply('staticDirs');
+
+  if (staticDirs && options.staticDir) {
+    throw new Error((0, _tsDedent.default)`
+      Conflict when trying to read staticDirs:
+      * Storybook's configuration option: 'staticDirs'
+      * Storybook's CLI flag: '--staticDir' or '-s'
+      
+      Choose one of them, but not both.
+    `);
+  }
+
+  if (staticDirs) {
+    staticDirs.forEach(async function (dir) {
+      var staticDirAndTarget = typeof dir === 'string' ? dir : `${dir.from}:${dir.to}`;
+
+      var _await$parseStaticDir = await parseStaticDir((0, _coreCommon.getDirectoryFromWorkingDir)({
+        configDir: options.configDir,
+        workingDir: process.cwd(),
+        directory: staticDirAndTarget
+      })),
+          from = _await$parseStaticDir.staticPath,
+          to = _await$parseStaticDir.targetEndpoint;
+
+      _nodeLogger.logger.info((0, _chalk.default)`=> Serving static files from {cyan ${from}} at {cyan ${to}}`);
+
+      router.use(to, _express.default.static(from, {
+        index: false
+      }));
+    });
+  }
 
   if (options.staticDir && options.staticDir.length > 0) {
     await Promise.all(options.staticDir.map(async function (dir) {
       try {
-        var _await$parseStaticDir = await parseStaticDir(dir),
-            staticDir = _await$parseStaticDir.staticDir,
-            staticPath = _await$parseStaticDir.staticPath,
-            targetEndpoint = _await$parseStaticDir.targetEndpoint;
+        var _await$parseStaticDir2 = await parseStaticDir(dir),
+            staticDir = _await$parseStaticDir2.staticDir,
+            staticPath = _await$parseStaticDir2.staticPath,
+            targetEndpoint = _await$parseStaticDir2.targetEndpoint;
 
         _nodeLogger.logger.info((0, _chalk.default)`=> Serving static files from {cyan ${staticDir}} at {cyan ${targetEndpoint}}`);
 

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

@@ -5,24 +5,26 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.extractStoriesJson = extractStoriesJson;
 exports.useStoriesJson = useStoriesJson;
+exports.DEBOUNCE = void 0;
 
 require("core-js/modules/es.promise.js");
 
 var _fsExtra = _interopRequireDefault(require("fs-extra"));
 
-var _events = _interopRequireDefault(require("events"));
-
 var _coreCommon = require("@storybook/core-common");
 
+var _coreEvents = _interopRequireDefault(require("@storybook/core-events"));
+
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
+
 var _StoryIndexGenerator = require("./StoryIndexGenerator");
 
 var _watchStorySpecifiers = require("./watch-story-specifiers");
 
-var _useEventsAsSse = require("./use-events-as-sse");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var INVALIDATE = 'INVALIDATE';
+var DEBOUNCE = 100;
+exports.DEBOUNCE = DEBOUNCE;
 
 async function extractStoriesJson(outputFile, normalizedStories, options) {
   var generator = new _StoryIndexGenerator.StoryIndexGenerator(normalizedStories, options);
@@ -31,7 +33,7 @@ async function extractStoriesJson(outputFile, normalizedStories, options) {
   await _fsExtra.default.writeJson(outputFile, index);
 }
 
-async function useStoriesJson(router, options, workingDir = process.cwd()) {
+async function useStoriesJson(router, serverChannel, options, workingDir = process.cwd()) {
   var normalizedStories = (0, _coreCommon.normalizeStories)(await options.presets.apply('stories'), {
     configDir: options.configDir,
     workingDir: workingDir
@@ -45,22 +47,26 @@ async function useStoriesJson(router, options, workingDir = process.cwd()) {
   // This is mainly for testing purposes.
 
   var started = false;
-  var invalidationEmitter = new _events.default();
+  var maybeInvalidate = (0, _debounce.default)(function () {
+    return serverChannel.emit(_coreEvents.default.STORY_INDEX_INVALIDATED);
+  }, DEBOUNCE, {
+    leading: true
+  });
 
   async function ensureStarted() {
     if (started) return;
     started = true;
-    (0, _watchStorySpecifiers.watchStorySpecifiers)(normalizedStories, function (specifier, path, removed) {
+    (0, _watchStorySpecifiers.watchStorySpecifiers)(normalizedStories, {
+      workingDir: workingDir
+    }, function (specifier, path, removed) {
       generator.invalidate(specifier, path, removed);
-      invalidationEmitter.emit(INVALIDATE);
+      maybeInvalidate();
     });
     await generator.initialize();
   }
 
-  var eventsAsSSE = (0, _useEventsAsSse.useEventsAsSSE)(invalidationEmitter, [INVALIDATE]);
   router.use('/stories.json', async function (req, res) {
     await ensureStarted();
-    if (eventsAsSSE(req, res)) return;
 
     try {
       var index = await generator.getIndex();

package/dist/cjs/utils/watch-story-specifiers.js

@@ -5,11 +5,36 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.watchStorySpecifiers = watchStorySpecifiers;
 
+require("core-js/modules/es.promise.js");
+
 var _watchpack = _interopRequireDefault(require("watchpack"));
 
+var _slash = _interopRequireDefault(require("slash"));
+
+var _fs = _interopRequireDefault(require("fs"));
+
+var _path = _interopRequireDefault(require("path"));
+
+var _globby = _interopRequireDefault(require("globby"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function watchStorySpecifiers(specifiers, onInvalidate) {
+var isDirectory = function (directory) {
+  try {
+    return _fs.default.lstatSync(directory).isDirectory();
+  } catch (err) {
+    return false;
+  }
+}; // Watchpack (and path.relative) passes paths either with no leading './' - e.g. `src/Foo.stories.js`,
+// or with a leading `../` (etc), e.g. `../src/Foo.stories.js`.
+// We want to deal in importPaths relative to the working dir, so we normalize
+
+
+function toImportPath(relativePath) {
+  return relativePath.startsWith('.') ? relativePath : `./${relativePath}`;
+}
+
+function watchStorySpecifiers(specifiers, options, onInvalidate) {
   // See https://www.npmjs.com/package/watchpack for full options.
   // If you want less traffic, consider using aggregation with some interval
   var wp = new _watchpack.default({
@@ -23,21 +48,52 @@ function watchStorySpecifiers(specifiers, onInvalidate) {
     })
   });
 
-  function onChangeOrRemove(watchpackPath, removed) {
+  async function onChangeOrRemove(watchpackPath, removed) {
     // Watchpack passes paths either with no leading './' - e.g. `src/Foo.stories.js`,
     // or with a leading `../` (etc), e.g. `../src/Foo.stories.js`.
     // We want to deal in importPaths relative to the working dir, or absolute paths.
-    var importPath = watchpackPath.startsWith('.') ? watchpackPath : `./${watchpackPath}`;
-    var specifier = specifiers.find(function (ns) {
+    var importPath = (0, _slash.default)(watchpackPath.startsWith('.') ? watchpackPath : `./${watchpackPath}`);
+    var matchingSpecifier = specifiers.find(function (ns) {
       return ns.importPathMatcher.exec(importPath);
     });
 
-    if (specifier) {
-      onInvalidate(specifier, importPath, removed);
+    if (matchingSpecifier) {
+      onInvalidate(matchingSpecifier, importPath, removed);
+      return;
+    } // When a directory is removed, watchpack will fire a removed event for each file also
+    // (so we don't need to do anything special).
+    // However, when a directory is added, it does not fire events for any files *within* the directory,
+    // so we need to scan within that directory for new files. It is tricky to use a glob for this,
+    // so we'll do something a bit more "dumb" for now
+
+
+    var absolutePath = _path.default.join(options.workingDir, importPath);
+
+    if (!removed && isDirectory(absolutePath)) {
+      await Promise.all(specifiers // We only receive events for files (incl. directories) that are *within* a specifier,
+      // so will match one (or more) specifiers with this simple `startsWith`
+      .filter(function (specifier) {
+        return importPath.startsWith(specifier.directory);
+      }).map(async function (specifier) {
+        // If `./path/to/dir` was added, check all files matching `./path/to/dir/**/*.stories.*`
+        // (where the last bit depends on `files`).
+        var dirGlob = _path.default.join(options.workingDir, importPath, '**', // files can be e.g. '**/foo/*/*.js' so we just want the last bit,
+        // because the directoru could already be within the files part (e.g. './x/foo/bar')
+        _path.default.basename(specifier.files));
+
+        var files = await (0, _globby.default)(dirGlob);
+        files.forEach(function (filePath) {
+          var fileImportPath = toImportPath(_path.default.relative(options.workingDir, filePath));
+
+          if (specifier.importPathMatcher.exec(fileImportPath)) {
+            onInvalidate(specifier, fileImportPath, removed);
+          }
+        });
+      }));
     }
   }
 
-  wp.on('change', function (path, mtime, explanation) {
+  wp.on('change', async function (filePath, mtime, explanation) {
     // When a file is renamed (including being moved out of the watched dir)
     // we see first an event with explanation=rename and no mtime for the old name.
     // then an event with explanation=rename with an mtime for the new name.
@@ -45,10 +101,10 @@ function watchStorySpecifiers(specifiers, onInvalidate) {
     // but that seems dangerous (what if the contents changed?) and frankly not worth it
     // (at this stage at least)
     var removed = !mtime;
-    onChangeOrRemove(path, removed);
+    await onChangeOrRemove(filePath, removed);
   });
-  wp.on('remove', function (path, explanation) {
-    onChangeOrRemove(path, true);
+  wp.on('remove', async function (filePath, explanation) {
+    await onChangeOrRemove(filePath, true);
   });
   return function () {
     return wp.close();

package/dist/esm/build-dev.js

@@ -29,7 +29,7 @@ import { getReleaseNotesData, getReleaseNotesFailedState } from './utils/release
 import { outputStats } from './utils/output-stats';
 import { outputStartupInformation } from './utils/output-startup-information';
 import { updateCheck } from './utils/update-check';
-import { getServerPort } from './utils/server-address';
+import { getServerPort, getServerChannelUrl } from './utils/server-address';
 import { getPreviewBuilder } from './utils/get-preview-builder';
 import { getManagerBuilder } from './utils/get-manager-builder';
 export async function buildDevStandalone(options) {
@@ -70,6 +70,7 @@ export async function buildDevStandalone(options) {
   options.configType = 'DEVELOPMENT';
   options.configDir = path.resolve(options.configDir);
   options.outputDir = options.smokeTest ? resolvePathInStorybookCache('public') : path.resolve(options.outputDir || resolvePathInStorybookCache('public'));
+  options.serverChannelUrl = getServerChannelUrl(port, options);
   /* eslint-enable no-param-reassign */
 
   var previewBuilder = await getPreviewBuilder(options.configDir);