@storybook/core-server 6.4.0-beta.4 → 6.4.0-beta.8

package/dist/cjs/build-static.js

@@ -100,11 +100,14 @@ async function buildStaticStandalone(options) {
   var features = await presets.apply('features');
 
   if (features !== null && features !== void 0 && features.buildStoriesJson || features !== null && features !== void 0 && features.storyStoreV7) {
-    var stories = (0, _coreCommon.normalizeStories)(await presets.apply('stories'), {
+    var directories = {
       configDir: options.configDir,
       workingDir: process.cwd()
-    });
-    await (0, _storiesJson.extractStoriesJson)(_path.default.join(options.outputDir, 'stories.json'), stories, options.configDir, !(features !== null && features !== void 0 && features.breakingChangesV7) && !(features !== null && features !== void 0 && features.storyStoreV7));
+    };
+    var stories = (0, _coreCommon.normalizeStories)(await presets.apply('stories'), directories);
+    await (0, _storiesJson.extractStoriesJson)(_path.default.join(options.outputDir, 'stories.json'), stories, _objectSpread(_objectSpread({}, directories), {}, {
+      storiesV2Compatibility: !(features !== null && features !== void 0 && features.breakingChangesV7) && !(features !== null && features !== void 0 && features.storyStoreV7)
+    }));
   }
 
   var fullOptions = _objectSpread(_objectSpread({}, options), {}, {

package/dist/cjs/utils/StoryIndexGenerator.js

@@ -57,11 +57,14 @@ function sortExtractedStories(stories, storySortParameter, fileNameOrder) {
 class StoryIndexGenerator {
   // An internal cache mapping specifiers to a set of path=><set of stories>
   // Later, we'll combine each of these subsets together to form the full index
-  constructor(specifiers, configDir, storiesV2Compatibility) {
+  // Cache the last value of `getStoryIndex`. We invalidate (by unsetting) when:
+  //  - any file changes, including deletions
+  //  - the preview changes [not yet implemented]
+  constructor(specifiers, options) {
     this.specifiers = specifiers;
-    this.configDir = configDir;
-    this.storiesV2Compatibility = storiesV2Compatibility;
+    this.options = options;
     this.storyIndexEntries = void 0;
+    this.lastIndex = void 0;
     this.storyIndexEntries = new Map();
   }
 
@@ -71,9 +74,22 @@ class StoryIndexGenerator {
     // Find all matching paths for each specifier
     await Promise.all(this.specifiers.map(async function (specifier) {
       var pathToSubIndex = {};
-      var files = await (0, _globby.default)(_path.default.join(_this.configDir, specifier.glob));
-      files.forEach(function (fileName) {
-        pathToSubIndex[fileName] = false;
+
+      var fullGlob = _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);
+
+        var relativePath = _path.default.relative(_this.options.workingDir, absolutePath);
+
+        if (!['.js', '.jsx', '.ts', '.tsx', '.mdx'].includes(ext)) {
+          _nodeLogger.logger.info(`Skipping ${ext} file ${relativePath}`);
+
+          return;
+        }
+
+        pathToSubIndex[absolutePath] = false;
       });
 
       _this.storyIndexEntries.set(specifier, pathToSubIndex);
@@ -85,25 +101,17 @@ class StoryIndexGenerator {
   async ensureExtracted() {
     var _this2 = this;
 
-    await Promise.all(this.specifiers.map(async function (specifier) {
+    return (await Promise.all(this.specifiers.map(async function (specifier) {
       var entry = _this2.storyIndexEntries.get(specifier);
 
-      await Promise.all(Object.keys(entry).map(async function (fileName) {
-        if (!entry[fileName]) await _this2.extractStories(specifier, fileName);
+      return Promise.all(Object.keys(entry).map(async function (absolutePath) {
+        return entry[absolutePath] || _this2.extractStories(specifier, absolutePath);
       }));
-    }));
+    }))).flat();
   }
 
   async extractStories(specifier, absolutePath) {
-    var ext = _path.default.extname(absolutePath);
-
-    var relativePath = _path.default.relative(this.configDir, absolutePath);
-
-    if (!['.js', '.jsx', '.ts', '.tsx', '.mdx'].includes(ext)) {
-      _nodeLogger.logger.info(`Skipping ${ext} file ${relativePath}`);
-
-      return;
-    }
+    var relativePath = _path.default.relative(this.options.workingDir, absolutePath);
 
     try {
       var entry = this.storyIndexEntries.get(specifier);
@@ -125,32 +133,32 @@ class StoryIndexGenerator {
         };
       });
       entry[absolutePath] = fileStories;
+      return fileStories;
     } catch (err) {
       _nodeLogger.logger.warn(`🚨 Extraction error on ${relativePath}: ${err}`);
 
-      _nodeLogger.logger.warn(`🚨 ${err.stack}`);
-
       throw err;
     }
   }
 
-  async getIndex() {
-    var _this3 = this;
-
-    // Extract any entries that are currently missing
-    await this.ensureExtracted();
-    var stories = {}; // Check each entry and compose into stories, extracting if needed
-
-    this.specifiers.map(async function (specifier) {
-      Object.values(_this3.storyIndexEntries.get(specifier)).map(function (subStories) {
-        return Object.assign(stories, subStories);
-      });
+  async sortStories(storiesList) {
+    var stories = {};
+    storiesList.forEach(function (subStories) {
+      Object.assign(stories, subStories);
     });
     var storySortParameter = await this.getStorySortParameter();
-    var sorted = sortExtractedStories(stories, storySortParameter, this.storyFileNames());
+    return sortExtractedStories(stories, storySortParameter, this.storyFileNames());
+  }
+
+  async getIndex() {
+    if (this.lastIndex) return this.lastIndex; // Extract any entries that are currently missing
+    // Pull out each file's stories into a list of stories, to be composed and sorted
+
+    var storiesList = await this.ensureExtracted();
+    var sorted = await this.sortStories(storiesList);
     var compat = sorted;
 
-    if (this.storiesV2Compatibility) {
+    if (this.options.storiesV2Compatibility) {
       var titleToStoryCount = Object.values(sorted).reduce(function (acc, story) {
         acc[story.title] = (acc[story.title] || 0) + 1;
         return acc;
@@ -174,17 +182,32 @@ class StoryIndexGenerator {
       }, {});
     }
 
-    return {
+    this.lastIndex = {
       v: 3,
       stories: compat
     };
+    return this.lastIndex;
+  }
+
+  invalidate(specifier, importPath, removed) {
+    var absolutePath = _path.default.resolve(this.options.workingDir, importPath);
+
+    var pathToEntries = this.storyIndexEntries.get(specifier);
+
+    if (removed) {
+      delete pathToEntries[absolutePath];
+    } else {
+      pathToEntries[absolutePath] = false;
+    }
+
+    this.lastIndex = null;
   }
 
   async getStorySortParameter() {
-    var _this4 = this;
+    var _this3 = this;
 
     var previewFile = ['js', 'jsx', 'ts', 'tsx'].map(function (ext) {
-      return _path.default.join(_this4.configDir, `preview.${ext}`);
+      return _path.default.join(_this3.options.configDir, `preview.${ext}`);
     }).find(function (fname) {
       return _fsExtra.default.existsSync(fname);
     });

package/dist/cjs/utils/__mockdata__/E.stories.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StoryOne = exports.default = void 0;
+var component = {};
+var _default = {
+  component: component
+};
+exports.default = _default;
+var StoryOne = {};
+exports.StoryOne = StoryOne;

package/dist/cjs/utils/__mockdata__/deeply/nested/single/File.stories.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StoryOne = exports.default = void 0;
+var _default = {
+  component: {}
+};
+exports.default = _default;
+var StoryOne = {};
+exports.StoryOne = StoryOne;

package/dist/cjs/utils/__mockdata__/preview.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.parameters = void 0;
+var parameters = {};
+exports.parameters = parameters;

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StoryOne = exports.default = void 0;
+var component = {};
+var _default = {
+  component: component
+};
+exports.default = _default;
+var StoryOne = {};
+exports.StoryOne = StoryOne;

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StoryOne = exports.default = void 0;
+var component = {};
+var _default = {
+  component: component
+};
+exports.default = _default;
+var StoryOne = {};
+exports.StoryOne = StoryOne;

package/dist/cjs/utils/__mockdata__/src/C.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.C = void 0;
+var C = {};
+exports.C = C;

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StoryOne = exports.default = void 0;
+var component = {};
+var _default = {
+  component: component
+};
+exports.default = _default;
+var StoryOne = {};
+exports.StoryOne = StoryOne;

package/dist/cjs/utils/__mockdata__/src/nested/Button.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Button = void 0;
+var Button = {};
+exports.Button = Button;

package/dist/cjs/utils/__mockdata__/src/nested/Button.stories.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StoryOne = exports.default = void 0;
+var component = {};
+var _default = {
+  component: component
+};
+exports.default = _default;
+var StoryOne = {};
+exports.StoryOne = StoryOne;

package/dist/cjs/utils/__mockdata__/src/nested/Page.mdx

@@ -0,0 +1 @@
+<h1>Some MDX</h1>

package/dist/cjs/utils/__mockdata__/src/nested/Page.stories.mdx

@@ -0,0 +1,5 @@
+import { Meta, Story } from '@storybook/addon-docs';
+
+<Meta component={{}} />;
+
+<Story name="StoryOne" />

package/dist/cjs/utils/__mockdata__/src/second-nested/F.stories.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StoryOne = exports.default = void 0;
+var component = {};
+var _default = {
+  component: component
+};
+exports.default = _default;
+var StoryOne = {};
+exports.StoryOne = StoryOne;

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

@@ -10,35 +10,65 @@ 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 _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 }; }
 
-async function extractStoriesJson(outputFile, normalizedStories, configDir, v2compatibility) {
-  var generator = new _StoryIndexGenerator.StoryIndexGenerator(normalizedStories, configDir, v2compatibility);
+var INVALIDATE = 'INVALIDATE';
+
+async function extractStoriesJson(outputFile, normalizedStories, options) {
+  var generator = new _StoryIndexGenerator.StoryIndexGenerator(normalizedStories, options);
   await generator.initialize();
   var index = await generator.getIndex();
   await _fsExtra.default.writeJson(outputFile, index);
 }
 
-async function useStoriesJson(router, options) {
-  var normalized = (0, _coreCommon.normalizeStories)(await options.presets.apply('stories'), {
+async function useStoriesJson(router, options, workingDir = process.cwd()) {
+  var normalizedStories = (0, _coreCommon.normalizeStories)(await options.presets.apply('stories'), {
     configDir: options.configDir,
-    workingDir: process.cwd()
+    workingDir: workingDir
   });
   var features = await options.presets.apply('features');
-  router.use('/stories.json', async function (_req, res) {
-    var generator = new _StoryIndexGenerator.StoryIndexGenerator(normalized, options.configDir, !(features !== null && features !== void 0 && features.breakingChangesV7) && !(features !== null && features !== void 0 && features.storyStoreV7));
+  var generator = new _StoryIndexGenerator.StoryIndexGenerator(normalizedStories, {
+    configDir: options.configDir,
+    workingDir: workingDir,
+    storiesV2Compatibility: !(features !== null && features !== void 0 && features.breakingChangesV7) && !(features !== null && features !== void 0 && features.storyStoreV7)
+  }); // Wait until someone actually requests `stories.json` before we start generating/watching.
+  // This is mainly for testing purposes.
+
+  var started = false;
+  var invalidationEmitter = new _events.default();
+
+  async function ensureStarted() {
+    if (started) return;
+    started = true;
+    (0, _watchStorySpecifiers.watchStorySpecifiers)(normalizedStories, function (specifier, path, removed) {
+      generator.invalidate(specifier, path, removed);
+      invalidationEmitter.emit(INVALIDATE);
+    });
     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();
       res.header('Content-Type', 'application/json');
-      return res.send(JSON.stringify(index));
+      res.send(JSON.stringify(index));
     } catch (err) {
-      return res.status(500).send(err.message);
+      res.status(500);
+      res.send(err.message);
     }
   });
 }

package/dist/cjs/utils/use-events-as-sse.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useEventsAsSSE = useEventsAsSSE;
+var PING_INTERVAL = 1000;
+var PING = 'PING';
+
+function useEventsAsSSE(emitter, events) {
+  return function (req, res) {
+    if (req.headers.accept !== 'text/event-stream') {
+      return false;
+    }
+
+    var closed = false;
+
+    function sendEvent(event, data) {
+      if (closed || res.writableEnded) return;
+
+      if (data) {
+        res.write(`event:${event}\ndata:${JSON.stringify(data)}\n\n`);
+      } else {
+        res.write(`event:${event}\ndata:\n\n`);
+      }
+
+      res.flush();
+    }
+
+    var watchers = events.reduce(function (acc, event) {
+      acc[event] = function (data) {
+        return sendEvent(event, data);
+      };
+
+      return acc;
+    }, {});
+    var interval;
+
+    var close = function () {
+      events.forEach(function (eventName) {
+        emitter.off(eventName, watchers[eventName]);
+      });
+      clearTimeout(interval);
+      closed = true;
+      res.end();
+    };
+
+    res.on('close', close);
+    if (closed || res.writableEnded) return true;
+    res.setHeader('Cache-Control', 'no-cache');
+    res.setHeader('Content-Type', 'text/event-stream');
+    res.setHeader('Connection', 'keep-alive');
+    res.flushHeaders();
+    events.forEach(function (eventName) {
+      emitter.on(eventName, watchers[eventName]);
+    }); // Send a PING event every 1s to avoid Chrome timing out the request
+
+    var ping = function () {
+      return sendEvent(PING);
+    };
+
+    interval = setInterval(ping, PING_INTERVAL);
+    return true;
+  };
+}

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

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.watchStorySpecifiers = watchStorySpecifiers;
+
+var _watchpack = _interopRequireDefault(require("watchpack"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function watchStorySpecifiers(specifiers, 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({
+    // poll: true, // Slow!!! Enable only in special cases
+    followSymlinks: false,
+    ignored: ['**/.git', 'node_modules']
+  });
+  wp.watch({
+    directories: specifiers.map(function (ns) {
+      return ns.directory;
+    })
+  });
+
+  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) {
+      return ns.importPathMatcher.exec(importPath);
+    });
+
+    if (specifier) {
+      onInvalidate(specifier, importPath, removed);
+    }
+  }
+
+  wp.on('change', function (path, 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.
+    // In theory we could try and track both events together and move the exports
+    // 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);
+  });
+  wp.on('remove', function (path, explanation) {
+    onChangeOrRemove(path, true);
+  });
+  return function () {
+    return wp.close();
+  };
+}

package/dist/esm/build-static.js

@@ -72,11 +72,14 @@ export async function buildStaticStandalone(options) {
   var features = await presets.apply('features');
 
   if (features !== null && features !== void 0 && features.buildStoriesJson || features !== null && features !== void 0 && features.storyStoreV7) {
-    var stories = normalizeStories(await presets.apply('stories'), {
+    var directories = {
       configDir: options.configDir,
       workingDir: process.cwd()
-    });
-    await extractStoriesJson(path.join(options.outputDir, 'stories.json'), stories, options.configDir, !(features !== null && features !== void 0 && features.breakingChangesV7) && !(features !== null && features !== void 0 && features.storyStoreV7));
+    };
+    var stories = normalizeStories(await presets.apply('stories'), directories);
+    await extractStoriesJson(path.join(options.outputDir, 'stories.json'), stories, _objectSpread(_objectSpread({}, directories), {}, {
+      storiesV2Compatibility: !(features !== null && features !== void 0 && features.breakingChangesV7) && !(features !== null && features !== void 0 && features.storyStoreV7)
+    }));
   }
 
   var fullOptions = _objectSpread(_objectSpread({}, options), {}, {