@storybook/core-webpack 7.0.0-alpha.2 → 7.0.0-alpha.20

package/dist/cjs/check-webpack-version.js

@@ -7,9 +7,7 @@ exports.checkWebpackVersion = void 0;
 
 var _nodeLogger = require("@storybook/node-logger");
 
-var _tsDedent = _interopRequireDefault(require("ts-dedent"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _tsDedent = require("ts-dedent");
 
 const checkWebpackVersion = (webpack, specifier, caption) => {
   if (!webpack.version) {
@@ -19,7 +17,7 @@ const checkWebpackVersion = (webpack, specifier, caption) => {
   }
 
   if (webpack.version !== specifier) {
-    _nodeLogger.logger.warn((0, _tsDedent.default)`
+    _nodeLogger.logger.warn((0, _tsDedent.dedent)`
       Unexpected webpack version in ${caption}:
       - Received '${webpack.version}'
       - Expected '${specifier}'

package/dist/cjs/importPipeline.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.importPipeline = importPipeline;
+
+// If an import is in flight when another import arrives, block it until the first completes.
+// This is to avoid a situation where webpack kicks off a second compilation whilst the
+// first is still completing, cf: https://github.com/webpack/webpack/issues/15541#issuecomment-1143138832
+// Note the way this code works if N futher `import()`s occur while the first is in flight,
+// they will all be kicked off in the same tick and not block each other. This is by design,
+// Webpack can handle multiple invalidations simutaneously, just not in quick succession.
+function importPipeline() {
+  let importGate = Promise.resolve();
+  return async importFn => {
+    await importGate;
+    const moduleExportsPromise = importFn();
+    importGate = importGate.then(async () => {
+      await moduleExportsPromise;
+    });
+    return moduleExportsPromise;
+  };
+}

package/dist/cjs/index.js

@@ -54,4 +54,30 @@ Object.keys(_mergeWebpackConfig).forEach(function (key) {
       return _mergeWebpackConfig[key];
     }
   });
+});
+
+var _toImportFn = require("./to-importFn");
+
+Object.keys(_toImportFn).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _toImportFn[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _toImportFn[key];
+    }
+  });
+});
+
+var _toRequireContext = require("./to-require-context");
+
+Object.keys(_toRequireContext).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _toRequireContext[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _toRequireContext[key];
+    }
+  });
 });

package/dist/cjs/merge-webpack-config.js

@@ -5,23 +5,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.mergeConfigs = mergeConfigs;
 
-function plugins({
-  plugins: defaultPlugins = []
-}, {
-  plugins: customPlugins = []
-}) {
+function mergePluginsField(defaultPlugins = [], customPlugins = []) {
   return [...defaultPlugins, ...customPlugins];
 }
 
-function rules({
-  rules: defaultRules = []
-}, {
-  rules: customRules = []
-}) {
+function mergeRulesField(defaultRules = [], customRules = []) {
   return [...defaultRules, ...customRules];
 }
 
-function extensions({
+function mergeExtensionsField({
   extensions: defaultExtensions = []
 }, {
   extensions: customExtensions = []
@@ -29,7 +21,7 @@ function extensions({
   return [...defaultExtensions, ...customExtensions];
 }
 
-function alias({
+function mergeAliasField({
   alias: defaultAlias = {}
 }, {
   alias: customAlias = {}
@@ -37,32 +29,24 @@ function alias({
   return Object.assign({}, defaultAlias, customAlias);
 }
 
-function _module({
-  module: defaultModule = {
-    rules: []
-  }
-}, {
-  module: customModule = {
-    rules: []
-  }
-}) {
-  return Object.assign({}, defaultModule, customModule, {
-    rules: rules(defaultModule, customModule)
+function mergeModuleField(a, b) {
+  return Object.assign({}, a, b, {
+    rules: mergeRulesField(a.rules || [], b.rules || [])
   });
 }
 
-function resolve({
+function mergeResolveField({
   resolve: defaultResolve = {}
 }, {
   resolve: customResolve = {}
 }) {
   return Object.assign({}, defaultResolve, customResolve, {
-    alias: alias(defaultResolve, customResolve),
-    extensions: extensions(defaultResolve, customResolve)
+    alias: mergeAliasField(defaultResolve, customResolve),
+    extensions: mergeExtensionsField(defaultResolve, customResolve)
   });
 }
 
-function optimization({
+function mergeOptimizationField({
   optimization: defaultOptimization = {}
 }, {
   optimization: customOptimization = {}
@@ -73,9 +57,9 @@ function optimization({
 function mergeConfigs(config, customConfig) {
   return Object.assign({}, customConfig, config, {
     devtool: customConfig.devtool || config.devtool,
-    plugins: plugins(config, customConfig),
-    module: _module(config, customConfig),
-    resolve: resolve(config, customConfig),
-    optimization: optimization(config, customConfig)
+    plugins: mergePluginsField(config.plugins, customConfig.plugins),
+    module: mergeModuleField(config.module || {}, customConfig.module || {}),
+    resolve: mergeResolveField(config, customConfig),
+    optimization: mergeOptimizationField(config, customConfig)
   });
 }

package/dist/cjs/to-importFn.js

@@ -0,0 +1,84 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.toImportFn = toImportFn;
+exports.toImportFnPart = toImportFnPart;
+exports.webpackIncludeRegexp = webpackIncludeRegexp;
+
+var _tsDedent = require("ts-dedent");
+
+var _coreCommon = require("@storybook/core-common");
+
+var _importPipeline = require("./importPipeline");
+
+function webpackIncludeRegexp(specifier) {
+  const {
+    directory,
+    files
+  } = specifier; // 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 any leading
+  // `./` or `../` off our directory and match on that.
+  // It's imperfect as it could match extra things in extremely unusual cases, but it'll do for now.
+  // NOTE: directory is "slashed" so will contain only `/` (no `\`), even on windows
+
+  const directoryWithoutLeadingDots = directory.replace(/^(\.+\/)+/, '/');
+  const webpackIncludeGlob = ['.', '..'].includes(directory) ? files : `${directoryWithoutLeadingDots}/${files}`;
+  const webpackIncludeRegexpWithCaret = (0, _coreCommon.globToRegexp)(webpackIncludeGlob); // picomatch is creating an exact match, but we are only matching the end of the filename
+
+  return new RegExp(webpackIncludeRegexpWithCaret.source.replace(/^\^/, ''));
+}
+
+function toImportFnPart(specifier) {
+  const {
+    directory,
+    importPathMatcher
+  } = specifier;
+  return (0, _tsDedent.dedent)`
+      async (path) => {
+        if (!${importPathMatcher}.exec(path)) {
+          return;
+        }
+
+        const pathRemainder = path.substring(${directory.length + 1});
+        return import(
+          /* webpackChunkName: "[request]" */
+          /* webpackInclude: ${webpackIncludeRegexp(specifier)} */
+          '${directory}/' + pathRemainder
+        );
+      }
+
+  `;
+}
+
+function toImportFn(stories, {
+  needPipelinedImport
+} = {}) {
+  let pipelinedImport = `const pipeline = (x) => x();`;
+
+  if (needPipelinedImport) {
+    pipelinedImport = `
+      const importPipeline = ${_importPipeline.importPipeline};
+      const pipeline = importPipeline();
+    `;
+  }
+
+  return (0, _tsDedent.dedent)`
+    ${pipelinedImport}
+
+    const importers = [
+      ${stories.map(toImportFnPart).join(',\n')}
+    ];
+
+    export async function importFn(path) {
+      for (let i = 0; i < importers.length; i++) {
+        const moduleExports = await pipeline(() => importers[i](path));
+        if (moduleExports) {
+          return moduleExports;
+        }
+      }
+    }
+  `;
+}

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

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.toRequireContextString = exports.toRequireContext = void 0;
+
+var _coreCommon = require("@storybook/core-common");
+
+const toRequireContext = specifier => {
+  const {
+    directory,
+    files
+  } = specifier; // The importPathMatcher is a `./`-prefixed matcher that includes the directory
+  // For `require.context()` we want the same thing, relative to directory
+
+  const match = (0, _coreCommon.globToRegexp)(`./${files}`);
+  return {
+    path: directory,
+    recursive: files.includes('**') || files.split('/').length > 1,
+    match
+  };
+};
+
+exports.toRequireContext = toRequireContext;
+
+const toRequireContextString = specifier => {
+  const {
+    path: p,
+    recursive: r,
+    match: m
+  } = toRequireContext(specifier);
+  const result = `require.context('${p}', ${r}, ${m})`;
+  return result;
+};
+
+exports.toRequireContextString = toRequireContextString;

package/dist/esm/check-webpack-version.js

@@ -1,5 +1,5 @@
 import { logger } from '@storybook/node-logger';
-import dedent from 'ts-dedent';
+import { dedent } from 'ts-dedent';
 export const checkWebpackVersion = (webpack, specifier, caption) => {
   if (!webpack.version) {
     logger.info('Skipping webpack version check, no version available');

package/dist/esm/importPipeline.js

@@ -0,0 +1,17 @@
+// If an import is in flight when another import arrives, block it until the first completes.
+// This is to avoid a situation where webpack kicks off a second compilation whilst the
+// first is still completing, cf: https://github.com/webpack/webpack/issues/15541#issuecomment-1143138832
+// Note the way this code works if N futher `import()`s occur while the first is in flight,
+// they will all be kicked off in the same tick and not block each other. This is by design,
+// Webpack can handle multiple invalidations simutaneously, just not in quick succession.
+export function importPipeline() {
+  let importGate = Promise.resolve();
+  return async importFn => {
+    await importGate;
+    const moduleExportsPromise = importFn();
+    importGate = importGate.then(async () => {
+      await moduleExportsPromise;
+    });
+    return moduleExportsPromise;
+  };
+}

package/dist/esm/index.js

@@ -1,4 +1,6 @@
 export * from './types';
 export * from './load-custom-webpack-config';
 export * from './check-webpack-version';
-export * from './merge-webpack-config';
+export * from './merge-webpack-config';
+export * from './to-importFn';
+export * from './to-require-context';

package/dist/esm/merge-webpack-config.js

@@ -1,20 +1,12 @@
-function plugins({
-  plugins: defaultPlugins = []
-}, {
-  plugins: customPlugins = []
-}) {
+function mergePluginsField(defaultPlugins = [], customPlugins = []) {
   return [...defaultPlugins, ...customPlugins];
 }
 
-function rules({
-  rules: defaultRules = []
-}, {
-  rules: customRules = []
-}) {
+function mergeRulesField(defaultRules = [], customRules = []) {
   return [...defaultRules, ...customRules];
 }
 
-function extensions({
+function mergeExtensionsField({
   extensions: defaultExtensions = []
 }, {
   extensions: customExtensions = []
@@ -22,7 +14,7 @@ function extensions({
   return [...defaultExtensions, ...customExtensions];
 }
 
-function alias({
+function mergeAliasField({
   alias: defaultAlias = {}
 }, {
   alias: customAlias = {}
@@ -30,32 +22,24 @@ function alias({
   return Object.assign({}, defaultAlias, customAlias);
 }
 
-function module({
-  module: defaultModule = {
-    rules: []
-  }
-}, {
-  module: customModule = {
-    rules: []
-  }
-}) {
-  return Object.assign({}, defaultModule, customModule, {
-    rules: rules(defaultModule, customModule)
+function mergeModuleField(a, b) {
+  return Object.assign({}, a, b, {
+    rules: mergeRulesField(a.rules || [], b.rules || [])
   });
 }
 
-function resolve({
+function mergeResolveField({
   resolve: defaultResolve = {}
 }, {
   resolve: customResolve = {}
 }) {
   return Object.assign({}, defaultResolve, customResolve, {
-    alias: alias(defaultResolve, customResolve),
-    extensions: extensions(defaultResolve, customResolve)
+    alias: mergeAliasField(defaultResolve, customResolve),
+    extensions: mergeExtensionsField(defaultResolve, customResolve)
   });
 }
 
-function optimization({
+function mergeOptimizationField({
   optimization: defaultOptimization = {}
 }, {
   optimization: customOptimization = {}
@@ -66,9 +50,9 @@ function optimization({
 export function mergeConfigs(config, customConfig) {
   return Object.assign({}, customConfig, config, {
     devtool: customConfig.devtool || config.devtool,
-    plugins: plugins(config, customConfig),
-    module: module(config, customConfig),
-    resolve: resolve(config, customConfig),
-    optimization: optimization(config, customConfig)
+    plugins: mergePluginsField(config.plugins, customConfig.plugins),
+    module: mergeModuleField(config.module || {}, customConfig.module || {}),
+    resolve: mergeResolveField(config, customConfig),
+    optimization: mergeOptimizationField(config, customConfig)
   });
 }

package/dist/esm/to-importFn.js

@@ -0,0 +1,70 @@
+import { dedent } from 'ts-dedent';
+import { globToRegexp } from '@storybook/core-common';
+import { importPipeline } from './importPipeline';
+export function webpackIncludeRegexp(specifier) {
+  const {
+    directory,
+    files
+  } = specifier; // 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 any leading
+  // `./` or `../` off our directory and match on that.
+  // It's imperfect as it could match extra things in extremely unusual cases, but it'll do for now.
+  // NOTE: directory is "slashed" so will contain only `/` (no `\`), even on windows
+
+  const directoryWithoutLeadingDots = directory.replace(/^(\.+\/)+/, '/');
+  const webpackIncludeGlob = ['.', '..'].includes(directory) ? files : `${directoryWithoutLeadingDots}/${files}`;
+  const webpackIncludeRegexpWithCaret = globToRegexp(webpackIncludeGlob); // picomatch is creating an exact match, but we are only matching the end of the filename
+
+  return new RegExp(webpackIncludeRegexpWithCaret.source.replace(/^\^/, ''));
+}
+export function toImportFnPart(specifier) {
+  const {
+    directory,
+    importPathMatcher
+  } = specifier;
+  return dedent`
+      async (path) => {
+        if (!${importPathMatcher}.exec(path)) {
+          return;
+        }
+
+        const pathRemainder = path.substring(${directory.length + 1});
+        return import(
+          /* webpackChunkName: "[request]" */
+          /* webpackInclude: ${webpackIncludeRegexp(specifier)} */
+          '${directory}/' + pathRemainder
+        );
+      }
+
+  `;
+}
+export function toImportFn(stories, {
+  needPipelinedImport
+} = {}) {
+  let pipelinedImport = `const pipeline = (x) => x();`;
+
+  if (needPipelinedImport) {
+    pipelinedImport = `
+      const importPipeline = ${importPipeline};
+      const pipeline = importPipeline();
+    `;
+  }
+
+  return dedent`
+    ${pipelinedImport}
+
+    const importers = [
+      ${stories.map(toImportFnPart).join(',\n')}
+    ];
+
+    export async function importFn(path) {
+      for (let i = 0; i < importers.length; i++) {
+        const moduleExports = await pipeline(() => importers[i](path));
+        if (moduleExports) {
+          return moduleExports;
+        }
+      }
+    }
+  `;
+}

package/dist/esm/to-require-context.js

@@ -0,0 +1,24 @@
+import { globToRegexp } from '@storybook/core-common';
+export const toRequireContext = specifier => {
+  const {
+    directory,
+    files
+  } = specifier; // The importPathMatcher is a `./`-prefixed matcher that includes the directory
+  // For `require.context()` we want the same thing, relative to directory
+
+  const match = globToRegexp(`./${files}`);
+  return {
+    path: directory,
+    recursive: files.includes('**') || files.split('/').length > 1,
+    match
+  };
+};
+export const toRequireContextString = specifier => {
+  const {
+    path: p,
+    recursive: r,
+    match: m
+  } = toRequireContext(specifier);
+  const result = `require.context('${p}', ${r}, ${m})`;
+  return result;
+};

package/dist/types/importPipeline.d.ts

@@ -0,0 +1,3 @@
+declare type ModuleExports = Record<string, any>;
+export declare function importPipeline(): (importFn: () => Promise<ModuleExports>) => Promise<ModuleExports>;
+export {};

package/dist/types/index.d.ts

@@ -2,3 +2,5 @@ export * from './types';
 export * from './load-custom-webpack-config';
 export * from './check-webpack-version';
 export * from './merge-webpack-config';
+export * from './to-importFn';
+export * from './to-require-context';

package/dist/types/merge-webpack-config.d.ts

@@ -1,2 +1,2 @@
-import type { CommonWebpackConfiguration as Configuration } from './types';
+import type { WebpackConfiguration as Configuration } from './types';
 export declare function mergeConfigs(config: Configuration, customConfig: Configuration): Configuration;

package/dist/types/to-importFn.d.ts

@@ -0,0 +1,6 @@
+import type { NormalizedStoriesSpecifier } from '@storybook/core-common';
+export declare function webpackIncludeRegexp(specifier: NormalizedStoriesSpecifier): RegExp;
+export declare function toImportFnPart(specifier: NormalizedStoriesSpecifier): string;
+export declare function toImportFn(stories: NormalizedStoriesSpecifier[], { needPipelinedImport }?: {
+    needPipelinedImport?: boolean;
+}): string;

package/dist/types/to-require-context.d.ts

@@ -0,0 +1,7 @@
+import type { NormalizedStoriesSpecifier } from '@storybook/core-common';
+export declare const toRequireContext: (specifier: NormalizedStoriesSpecifier) => {
+    path: string;
+    recursive: boolean;
+    match: RegExp;
+};
+export declare const toRequireContextString: (specifier: NormalizedStoriesSpecifier) => string;

package/dist/types/types.d.ts

@@ -1,27 +1,29 @@
-import type { Options, StorybookConfig as BaseStorybookConfig } from '@storybook/core-common';
+import type { Options, StorybookConfig as StorybookConfigBase } from '@storybook/core-common';
 export type { Options, Preset, BuilderResult, TypescriptOptions } from '@storybook/core-common';
-export interface CommonWebpackConfiguration {
+export declare type RulesConfig = any;
+export declare type ModuleConfig = {
+    rules?: RulesConfig[];
+};
+export declare type ResolveConfig = {
+    extensions?: string[];
+    mainFields?: (string | string[])[] | undefined;
+    alias?: any;
+};
+export interface WebpackConfiguration {
     plugins?: any[];
-    module?: {
-        rules?: any[];
-    };
-    resolve?: {
-        extensions?: string[];
-        mainFields?: string[] | string[][];
-        alias?: any;
-    };
+    module?: ModuleConfig;
+    resolve?: ResolveConfig;
     optimization?: any;
-    devtool?: boolean | string;
+    devtool?: false | string;
 }
-export interface StorybookWebpackConfig<TConfiguration extends CommonWebpackConfiguration> {
+export declare type StorybookConfig<TWebpackConfiguration = WebpackConfiguration> = StorybookConfigBase & {
     /**
      * Modify or return a custom Webpack config after the Storybook's default configuration
      * has run (mostly used by addons).
      */
-    webpack?: (config: TConfiguration, options: Options) => TConfiguration | Promise<TConfiguration>;
+    webpack?: (config: TWebpackConfiguration, options: Options) => TWebpackConfiguration | Promise<TWebpackConfiguration>;
     /**
      * Modify or return a custom Webpack config after every addon has run.
      */
-    webpackFinal?: (config: TConfiguration, options: Options) => TConfiguration | Promise<TConfiguration>;
-}
-export declare type StorybookConfig<TWebpackConfiguration extends CommonWebpackConfiguration = CommonWebpackConfiguration> = BaseStorybookConfig & StorybookWebpackConfig<TWebpackConfiguration>;
+    webpackFinal?: (config: TWebpackConfiguration, options: Options) => TWebpackConfiguration | Promise<TWebpackConfiguration>;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/core-webpack",
-  "version": "7.0.0-alpha.2",
+  "version": "7.0.0-alpha.20",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
@@ -30,17 +30,21 @@
     "*.d.ts"
   ],
   "scripts": {
-    "prepare": "node ../../scripts/prepare.js"
+    "check": "tsc --noEmit",
+    "prepare": "node ../../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/core-common": "7.0.0-alpha.2",
-    "@storybook/node-logger": "7.0.0-alpha.2",
+    "@storybook/core-common": "7.0.0-alpha.20",
+    "@storybook/node-logger": "7.0.0-alpha.20",
     "@types/node": "^14.0.10 || ^16.0.0",
     "core-js": "^3.8.2",
     "ts-dedent": "^2.0.0"
   },
+  "devDependencies": {
+    "typescript": "~4.6.3"
+  },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "44920e2b6bd51981bac5124743c29fb9f5517e44"
+  "gitHead": "a6c00d2ebed21da54b4772b4a4f7fed9258f0ab4"
 }

package/LICENSE

@@ -1,21 +0,0 @@
-The MIT License (MIT)
-
-Copyright (c) 2017 Kadira Inc. <hello@kadira.io>
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.