@storybook/core-common 6.4.0-beta.2 → 6.4.0-beta.20

package/dist/cjs/index.js

@@ -43,6 +43,19 @@ Object.keys(_checkWebpackVersion).forEach(function (key) {
   });
 });
 
+var _checkAddonOrder = require("./utils/check-addon-order");
+
+Object.keys(_checkAddonOrder).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _checkAddonOrder[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _checkAddonOrder[key];
+    }
+  });
+});
+
 var _envs = require("./utils/envs");
 
 Object.keys(_envs).forEach(function (key) {
@@ -342,6 +355,19 @@ Object.keys(_readTemplate).forEach(function (key) {
   });
 });
 
+var _findDistEsm = require("./utils/findDistEsm");
+
+Object.keys(_findDistEsm).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _findDistEsm[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _findDistEsm[key];
+    }
+  });
+});
+
 var _types = require("./types");
 
 Object.keys(_types).forEach(function (key) {

package/dist/cjs/presets.js

@@ -21,6 +21,8 @@ var _resolveFrom = _interopRequireDefault(require("resolve-from"));
 
 var _loadCustomPresets = require("./utils/load-custom-presets");
 
+var _interpretRequire = require("./utils/interpret-require");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
@@ -48,13 +50,15 @@ 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 [];
@@ -197,11 +201,12 @@ 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,
@@ -239,8 +244,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) {
@@ -297,6 +302,32 @@ function getPresets(presets, storybookOptions) {
     }
   };
 }
+/**
+ * Get the `framework` provided in main.js and also do error checking up front
+ */
+
+
+var getFrameworkPackage = function (configDir) {
+  var main = (0, _interpretRequire.serverRequire)((0, _path.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((0, _tsDedent.default)`
+      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;
+};
 
 function loadAllPresets(options) {
   var _options$corePresets = options.corePresets,
@@ -307,7 +338,8 @@ function loadAllPresets(options) {
       overridePresets = _options$overridePres === void 0 ? [] : _options$overridePres,
       restOptions = _objectWithoutProperties(options, ["corePresets", "frameworkPresets", "overridePresets"]);
 
-  var presetsConfig = [...corePresets, ...frameworkPresets, ...(0, _loadCustomPresets.loadCustomPresets)(options), ...overridePresets]; // Remove `@storybook/preset-typescript` and add a warning if in use.
+  var frameworkPackage = getFrameworkPackage(options.configDir);
+  var presetsConfig = [...corePresets, ...(frameworkPackage ? [] : frameworkPresets), ...(0, _loadCustomPresets.loadCustomPresets)(options), ...overridePresets]; // Remove `@storybook/preset-typescript` and add a warning if in use.
 
   var filteredPresetConfig = filterPresetsConfig(presetsConfig);
 

package/dist/cjs/utils/check-addon-order.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.checkAddonOrder = void 0;
+
+require("core-js/modules/es.promise.js");
+
+var _require = require('@storybook/node-logger'),
+    logger = _require.logger;
+
+var predicateFor = function (addon) {
+  return function (entry) {
+    var name = entry.name || entry;
+    return name && name.includes(addon);
+  };
+};
+
+var isCorrectOrder = function (addons, before, after) {
+  var essentialsIndex = addons.findIndex(predicateFor('@storybook/addon-essentials'));
+  var beforeIndex = addons.findIndex(predicateFor(before.name));
+  var afterIndex = addons.findIndex(predicateFor(after.name));
+  if (beforeIndex === -1 && before.inEssentials) beforeIndex = essentialsIndex;
+  if (afterIndex === -1 && after.inEssentials) afterIndex = essentialsIndex;
+  return beforeIndex !== -1 && afterIndex !== -1 && beforeIndex <= afterIndex;
+};
+
+var checkAddonOrder = async function ({
+  before: before,
+  after: after,
+  configFile: configFile,
+  getConfig: getConfig
+}) {
+  try {
+    var config = await getConfig(configFile);
+
+    if (!(config !== null && config !== void 0 && config.addons)) {
+      logger.warn(`Unable to find 'addons' config in main Storybook config`);
+      return;
+    }
+
+    if (!isCorrectOrder(config.addons, before, after)) {
+      var orEssentials = " (or '@storybook/addon-essentials')";
+      var beforeText = `'${before.name}'${before.inEssentials ? orEssentials : ''}`;
+      var afterText = `'${after.name}'${after.inEssentials ? orEssentials : ''}`;
+      logger.warn(`Expected ${beforeText} to be listed before ${afterText} in main Storybook config.`);
+    }
+  } catch (e) {
+    logger.warn(`Unable to load config file: ${configFile}`);
+  }
+};
+
+exports.checkAddonOrder = checkAddonOrder;

package/dist/cjs/utils/findDistEsm.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.findDistEsm = void 0;
+
+var _path = _interopRequireDefault(require("path"));
+
+var _findUp = require("find-up");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var findDistEsm = function (cwd, relativePath) {
+  var packageDir = _path.default.dirname((0, _findUp.sync)('package.json', {
+    cwd: cwd
+  }));
+
+  return _path.default.join(packageDir, 'dist', 'esm', relativePath);
+};
+
+exports.findDistEsm = findDistEsm;

package/dist/cjs/utils/glob-to-regexp.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.globToRegex = globToRegex;
+
+var _micromatch = require("micromatch");
+
+function globToRegex(glob) {
+  var regex = (0, _micromatch.makeRe)(glob, {
+    fastpaths: false,
+    noglobstar: false,
+    bash: false
+  });
+
+  if (!regex.source.startsWith('^')) {
+    throw new Error(`Invalid glob: >> ${glob} >> ${regex}`);
+  }
+
+  if (!glob.startsWith('./')) {
+    return regex;
+  } // makeRe is sort of funny. If you pass it a directory starting with `./` it
+  // creates a matcher that expects files with no prefix (e.g. `src/file.js`)
+  // but if you pass it a directory that starts with `../` it expects files that
+  // start with `../`. Let's make it consistent.
+  // Globs starting `**` require special treatment due to the regex they
+  // produce, specifically a negative look-ahead
+
+
+  return new RegExp(['^\\.', glob.startsWith('./**') ? '' : '[\\\\/]', regex.source.substring(1)].join(''));
+}

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

@@ -3,12 +3,22 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.normalizeStories = exports.normalizeDirectory = exports.normalizeStoriesEntry = void 0;
+exports.normalizeStories = exports.normalizeStoriesEntry = void 0;
 
 var _fs = _interopRequireDefault(require("fs"));
 
 var _path = _interopRequireDefault(require("path"));
 
+var _utilDeprecate = _interopRequireDefault(require("util-deprecate"));
+
+var _tsDedent = _interopRequireDefault(require("ts-dedent"));
+
+var _micromatch = require("micromatch");
+
+var _slash = _interopRequireDefault(require("slash"));
+
+var _globToRegexp = require("./glob-to-regexp");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
@@ -17,11 +27,24 @@ 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; }
 
-var DEFAULT_FILES = '*.stories.@(mdx|tsx|ts|jsx|js)';
-var DEFAULT_TITLE_PREFIX = ''; // Escaping regexes for glob regexes is fun
-// Mathing things like '../**/*.stories.mdx'
+var DEFAULT_TITLE_PREFIX = '';
+var DEFAULT_FILES = '**/*.stories.@(mdx|tsx|ts|jsx|js)'; // LEGACY support for bad glob patterns we had in SB 5 - remove in SB7
+
+var fixBadGlob = (0, _utilDeprecate.default)(function (match) {
+  return match.input.replace(match[1], `@${match[1]}`);
+}, (0, _tsDedent.default)`
+    You have specified an invalid glob, we've attempted to fix it, please ensure that the glob you specify is valid. See: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#correct-globs-in-mainjs
+  `);
 
-var GLOB_REGEX = /^(?<directory>[^*]*)\/\*\*\/(?<files>\*\..*)/;
+var detectBadGlob = function (val) {
+  var match = val.match(/\.(\([^)]+\))/);
+
+  if (match) {
+    return fixBadGlob(match);
+  }
+
+  return val;
+};
 
 var isDirectory = function (configDir, entry) {
   try {
@@ -31,87 +54,81 @@ var isDirectory = function (configDir, entry) {
   }
 };
 
-var normalizeStoriesEntry = function (entry, configDir) {
-  var glob;
-  var directory;
-  var files;
-  var titlePrefix;
+var normalizeStoriesEntry = function (entry, {
+  configDir: configDir,
+  workingDir: workingDir
+}) {
+  var specifierWithoutMatcher;
 
   if (typeof entry === 'string') {
-    if (!entry.includes('**') && isDirectory(configDir, entry)) {
-      directory = entry;
-      files = DEFAULT_FILES;
-      titlePrefix = DEFAULT_TITLE_PREFIX;
-    } else {
-      var match = entry.match(GLOB_REGEX);
-
-      if (match) {
-        directory = match.groups.directory;
-        files = match.groups.files;
-        titlePrefix = DEFAULT_TITLE_PREFIX;
+    if (!entry.includes('*')) {
+      if (isDirectory(configDir, entry)) {
+        specifierWithoutMatcher = {
+          titlePrefix: DEFAULT_TITLE_PREFIX,
+          directory: entry,
+          files: DEFAULT_FILES
+        };
       } else {
-        glob = entry;
+        specifierWithoutMatcher = {
+          titlePrefix: DEFAULT_TITLE_PREFIX,
+          directory: _path.default.dirname(entry),
+          files: _path.default.basename(entry)
+        };
       }
-    }
-  } else {
-    directory = entry.directory;
-    files = entry.files || DEFAULT_FILES;
-    titlePrefix = entry.titlePrefix || DEFAULT_TITLE_PREFIX;
-  }
+    } else {
+      var fixedEntry = detectBadGlob(entry);
+      var globResult = (0, _micromatch.scan)(fixedEntry);
 
-  if (typeof glob !== 'undefined') {
-    return {
-      glob: glob,
-      specifier: undefined
-    };
-  }
+      var _directory = globResult.isGlob ? globResult.prefix + globResult.base : _path.default.dirname(fixedEntry);
+
+      var filesFallback = _directory !== '.' ? fixedEntry.substr(_directory.length + 1) : fixedEntry;
 
-  return {
-    glob: `${directory}/**/${files}`,
-    specifier: {
-      directory: directory,
-      titlePrefix: titlePrefix,
-      files: files
+      var _files = globResult.isGlob ? globResult.glob : filesFallback;
+
+      specifierWithoutMatcher = {
+        titlePrefix: DEFAULT_TITLE_PREFIX,
+        directory: _directory,
+        files: _files
+      };
     }
-  };
-};
+  } else {
+    specifierWithoutMatcher = _objectSpread({
+      titlePrefix: DEFAULT_TITLE_PREFIX,
+      files: DEFAULT_FILES
+    }, entry);
+  } // We are going to be doing everything with node importPaths which use
+  // URL format, i.e. `/` as a separator, so let's make sure we've normalized
 
-exports.normalizeStoriesEntry = normalizeStoriesEntry;
 
-/**
- * Stories entries are specified relative to the configDir. Webpack filenames are produced relative to the
- * current working directory. This function rewrites the specifier.directory relative to the current working
- * directory.
- */
-var normalizeDirectory = function (entry, {
-  configDir: configDir,
-  workingDir: workingDir
-}) {
-  if (!entry.specifier) return entry;
-  var directory = entry.specifier.directory;
+  var files = (0, _slash.default)(specifierWithoutMatcher.files); // At this stage `directory` is relative to `main.js` (the config dir)
+  // We want to work relative to the working dir, so we transform it here.
 
-  var directoryFromConfig = _path.default.resolve(configDir, directory);
+  var _specifierWithoutMatc = specifierWithoutMatcher,
+      directoryRelativeToConfig = _specifierWithoutMatc.directory;
 
-  var directoryFromWorking = _path.default.relative(workingDir, directoryFromConfig); // relative('/foo', '/foo/src') => 'src'
-  // but we want `./src`to match webpack's file names
+  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 (!directoryFromWorking.startsWith('.')) {
-    directoryFromWorking = `.${_path.default.sep}${directoryFromWorking}`;
+  if (!directory.startsWith('.')) {
+    directory = `./${directory}`;
   }
 
-  return _objectSpread(_objectSpread({}, entry), {}, {
-    specifier: _objectSpread(_objectSpread({}, entry.specifier), {}, {
-      directory: directoryFromWorking
-    })
+  directory = directory.replace(/\/$/, ''); // Now make the importFn matcher.
+
+  var importPathMatcher = (0, _globToRegexp.globToRegex)(`${directory}/${files}`);
+  return _objectSpread(_objectSpread({}, specifierWithoutMatcher), {}, {
+    directory: directory,
+    importPathMatcher: importPathMatcher
   });
 };
 
-exports.normalizeDirectory = normalizeDirectory;
+exports.normalizeStoriesEntry = normalizeStoriesEntry;
 
 var normalizeStories = function (entries, options) {
   return entries.map(function (entry) {
-    return normalizeDirectory(normalizeStoriesEntry(entry, options.configDir), options);
+    return normalizeStoriesEntry(entry, options);
   });
 };
 

package/dist/cjs/utils/progress-reporting.js

@@ -35,6 +35,7 @@ var useProgressReporting = async function (router, startTime, options) {
     reportProgress = function (progress) {
       if (closed || response.writableEnded) return;
       response.write(`data: ${JSON.stringify(progress)}\n\n`);
+      response.flush();
       if (progress.value === 1) close();
     };
   });

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

@@ -8,30 +8,27 @@ exports.toImportFn = toImportFn;
 
 var _tsDedent = _interopRequireDefault(require("ts-dedent"));
 
-var _ = require("..");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function toImportFnPart(entry) {
-  var _toRequireContext = (0, _.toRequireContext)(entry.glob),
-      base = _toRequireContext.path,
-      regex = _toRequireContext.regex;
+function toImportFnPart(specifier) {
+  var directory = specifier.directory,
+      importPathMatcher = specifier.importPathMatcher; // 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.
+  // It's imperfect as it could match extra things in extremely unusual cases, but it'll do for now.
 
-  var webpackIncludeRegex = new RegExp(regex.source.substring(1));
+  var webpackIncludeRegex = new RegExp(importPathMatcher.source.replace(/^\^\\\.*/, ''));
   return (0, _tsDedent.default)`
       async (path) => {
-        const pathBase = path.substring(0, ${base.length + 1});
-        if (pathBase !== '${base}/') {
+        if (!${importPathMatcher}.exec(path)) {
           return;
         }
 
-        const pathRemainder = path.substring(${base.length + 1});
-        if (!${regex}.exec(pathRemainder)) {
-          return;
-        }
+        const pathRemainder = path.substring(${directory.length + 1});
         return import(
           /* webpackInclude: ${webpackIncludeRegex} */
-          '${base}/' + pathRemainder
+          '${directory}/' + pathRemainder
         );
       }
 

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

@@ -5,92 +5,30 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.toRequireContextString = exports.toRequireContext = void 0;
 
-var _micromatch = require("micromatch");
-
-var _utilDeprecate = _interopRequireDefault(require("util-deprecate"));
-
-var _tsDedent = _interopRequireDefault(require("ts-dedent"));
-
-var _path = _interopRequireDefault(require("path"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-// LEGACY support for bad glob patterns we had in SB 5 - remove in SB7
-var fixBadGlob = (0, _utilDeprecate.default)(function (match) {
-  return match.input.replace(match[1], `@${match[1]}`);
-}, (0, _tsDedent.default)`
-    You have specified an invalid glob, we've attempted to fix it, please ensure that the glob you specify is valid. See: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#correct-globs-in-mainjs
-  `);
-
-var detectBadGlob = function (val) {
-  var match = val.match(/\.(\([^)]+\))/);
-
-  if (match) {
-    return fixBadGlob(match);
-  }
-
-  return val;
-};
-
-var isObject = function (val) {
-  return val != null && typeof val === 'object' && Array.isArray(val) === false;
-};
-
-var toRequireContext = function (input) {
-  var fixedInput = detectBadGlob(input);
-
-  switch (true) {
-    case typeof input === 'string':
-      {
-        var globResult = (0, _micromatch.scan)(fixedInput);
-        var base = globResult.isGlob ? globResult.prefix + globResult.base : _path.default.dirname(fixedInput);
-        var globFallback = base !== '.' ? fixedInput.substr(base.length + 1) : fixedInput;
-        var glob = globResult.isGlob ? globResult.glob : globFallback;
-        var regex = (0, _micromatch.makeRe)(glob, {
-          fastpaths: false,
-          noglobstar: false,
-          bash: false
-        });
-        var source = regex.source;
-
-        if (source.startsWith('^')) {
-          // webpack's require.context matches against paths starting `./`
-          // Globs starting `**` require special treatment due to the regex they
-          // produce, specifically a negative look-ahead
-          var match = ['^\\.', glob.startsWith('**') ? '' : '\\/', source.substring(1)].join('');
-          var recursive = glob.includes('**') || glob.split('/').length > 1;
-          return {
-            path: base,
-            recursive: recursive,
-            match: match,
-            regex: regex
-          };
-        }
-
-        throw new Error(`Invalid glob: >> ${input} >> ${regex}`);
-      }
-
-    case isObject(input):
-      {
-        return input;
-      }
-
-    default:
-      {
-        throw new Error('the provided input cannot be transformed into a require.context');
-      }
-  }
+var _globToRegexp = require("./glob-to-regexp");
+
+var toRequireContext = function (specifier) {
+  var directory = specifier.directory,
+      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}`);
+  return {
+    path: directory,
+    recursive: !!files.match(/^\*{1,2}\//),
+    match: match
+  };
 };
 
 exports.toRequireContext = toRequireContext;
 
-var toRequireContextString = function (input) {
-  var _toRequireContext = toRequireContext(input),
+var toRequireContextString = function (specifier) {
+  var _toRequireContext = toRequireContext(specifier),
       p = _toRequireContext.path,
       r = _toRequireContext.recursive,
       m = _toRequireContext.match;
 
-  var result = `require.context('${p}', ${r}, /${m}/)`;
+  var result = `require.context('${p}', ${r}, ${m})`;
   return result;
 };
 

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';