@storybook/builder-webpack5 7.0.0-alpha.39 → 7.0.0-alpha.40

package/README.md

@@ -2,8 +2,6 @@
 
 Builder implemented with `webpack5` and `webpack5`-compatible loaders/plugins/config, used by `@storybook/core-server` to build the preview iframe.
 
-`webpack4` is the default. To configure your Storybook to run `webpack5`, install `@storybook/manager-webpack5` and `@storybook/builder-webpack5` as dev dependencies then update your `.storybook/main.js` configuration.
-
 ```js
 module.exports = {
   core: {

package/dist/chunk-HKSD7XQF.mjs

@@ -0,0 +1 @@
+var d=(a=>typeof require!="undefined"?require:typeof Proxy!="undefined"?new Proxy(a,{get:(b,c)=>(typeof require!="undefined"?require:b)[c]}):a)(function(a){if(typeof require!="undefined")return require.apply(this,arguments);throw new Error('Dynamic require of "'+a+'" is not supported')});export{d as a};

package/dist/index.d.ts

@@ -0,0 +1,51 @@
+import webpack__default, { Configuration, Stats } from 'webpack';
+import { Options as Options$1, Builder } from '@storybook/core-common';
+import { StorybookConfig, Options, BuilderResult as BuilderResult$1 } from '@storybook/core-webpack';
+import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
+
+declare type TypeScriptOptionsBase = Required<StorybookConfig>['typescript'];
+/**
+ * Options for TypeScript usage within Storybook.
+ */
+interface TypescriptOptions extends TypeScriptOptionsBase {
+    /**
+     * Configures `fork-ts-checker-webpack-plugin`
+     */
+    checkOptions?: ForkTsCheckerWebpackPlugin['options'];
+}
+interface StorybookConfigWebpack extends Pick<StorybookConfig, 'webpack' | 'webpackFinal'> {
+    /**
+     * Modify or return a custom Webpack config after the Storybook's default configuration
+     * has run (mostly used by addons).
+     */
+    webpack?: (config: Configuration, options: Options) => Configuration | Promise<Configuration>;
+    /**
+     * Modify or return a custom Webpack config after every addon has run.
+     */
+    webpackFinal?: (config: Configuration, options: Options) => Configuration | Promise<Configuration>;
+}
+declare type BuilderOptions = {
+    fsCache?: boolean;
+    lazyCompilation?: boolean;
+};
+interface BuilderResult extends BuilderResult$1 {
+    stats?: Stats;
+}
+
+declare type WebpackBuilder = Builder<Configuration, Stats>;
+declare type BuilderStartOptions = Parameters<WebpackBuilder['start']>['0'];
+declare const executor: {
+    get: (options: Options$1) => Promise<typeof webpack__default>;
+};
+declare const getConfig: WebpackBuilder['getConfig'];
+declare const bail: WebpackBuilder['bail'];
+declare const start: (options: BuilderStartOptions) => Promise<void | {
+    stats?: webpack__default.Stats | undefined;
+    totalTime: [number, number];
+    bail: (e?: Error | undefined) => Promise<void>;
+}>;
+declare const build: (options: BuilderStartOptions) => Promise<void | webpack__default.Stats>;
+declare const corePresets: string[];
+declare const overridePresets: string[];
+
+export { BuilderOptions, BuilderResult, StorybookConfigWebpack, TypescriptOptions, bail, build, corePresets, executor, getConfig, overridePresets, start };

package/dist/index.js

@@ -0,0 +1 @@
+"use strict";var R=Object.create;var b=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var U=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var I=(e,r)=>{for(var t in r)b(e,t,{get:r[t],enumerable:!0})},O=(e,r,t,n)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of C(r))!j.call(e,a)&&a!==t&&b(e,a,{get:()=>r[a],enumerable:!(n=T(r,a))||n.enumerable});return e};var g=(e,r,t)=>(t=e!=null?R(U(e)):{},O(r||!e||!e.__esModule?b(t,"default",{value:e,enumerable:!0}):t,e)),D=e=>O(b({},"__esModule",{value:!0}),e);var $={};I($,{bail:()=>h,build:()=>_,corePresets:()=>V,executor:()=>S,getConfig:()=>v,overridePresets:()=>A,start:()=>M});module.exports=D($);var f=g(require("webpack")),P=g(require("webpack-dev-middleware")),x=g(require("webpack-hot-middleware")),i=require("@storybook/node-logger"),W=require("@storybook/core-common"),E=require("@storybook/core-webpack"),B=require("path"),u,k,S={get:async e=>{var n;let r=await e.presets.apply("webpackVersion")||"5",t=((n=await e.presets.apply("webpackInstance"))==null?void 0:n.default)||f.default;return(0,E.checkWebpackVersion)({version:r},"5","builder-webpack5"),t}},v=async e=>{let{presets:r}=e,t=await r.apply("typescript",{},e),n=await r.apply("babel",{},{...e,typescriptOptions:t}),a=await r.apply("frameworkOptions");return r.apply("webpack",{},{...e,babelOptions:n,typescriptOptions:t,frameworkOptions:a})},m,h=async()=>{if(m)try{await m.throw(new Error)}catch{}return k&&k(),new Promise((e,r)=>{if(process&&u)try{u.close(()=>e()),i.logger.warn("Force closed preview build")}catch{i.logger.warn("Unable to close preview build!"),e()}else e()})},G=async function*({startTime:r,options:t,router:n}){var y;let a=await S.get(t);yield;let p=await v(t);yield;let c=a(p);if(!c){let l=`${p.name}: missing webpack compiler at runtime!`;return i.logger.error(l),{bail:h,totalTime:process.hrtime(r),stats:{hasErrors:()=>!0,hasWarnings:()=>!1,toJson:()=>({warnings:[],errors:[l]})}}}let{handler:d,modulesCount:w}=await(0,W.useProgressReporting)(n,r,t);yield,new f.ProgressPlugin({handler:d,modulesCount:w}).apply(c);let s={publicPath:(y=p.output)==null?void 0:y.publicPath,writeToDisk:!0};u=(0,P.default)(c,s),n.use(u),n.use((0,x.default)(c));let o=await new Promise((l,F)=>{u==null||u.waitUntilValid(l),k=F});if(yield,!o)throw new Error("no stats after building preview");if(o.hasErrors())throw o;return{bail:h,stats:o,totalTime:process.hrtime(r)}},J=async function*({startTime:r,options:t}){let n=await S.get(t);yield,i.logger.info("=> Compiling preview..");let a=await v(t);yield;let p=n(a);if(!p){let c=`${a.name}: missing webpack compiler at runtime!`;return i.logger.error(c),{hasErrors:()=>!0,hasWarnings:()=>!1,toJson:()=>({warnings:[],errors:[c]})}}return new Promise((c,d)=>{p.run((w,s)=>{if(w||!s||s.hasErrors()){if(i.logger.error("=> Failed to build the preview"),process.exitCode=1,w){i.logger.error(w.message),p.close(()=>d(w));return}if(s&&(s.hasErrors()||s.hasWarnings())){let{warnings:o=[],errors:y=[]}=s.toJson(typeof a.stats=="string"?a.stats:{warnings:!0,errors:!0,...a.stats});y.forEach(l=>i.logger.error(l.message)),o.forEach(l=>i.logger.error(l.message)),p.close(()=>t.debugWebpack?d(s):d(new Error("=> Webpack failed, learn more with --debug-webpack")));return}}i.logger.trace({message:"=> Preview built",time:process.hrtime(r)}),s&&s.hasWarnings()&&s.toJson({warnings:!0}).warnings.forEach(o=>i.logger.warn(o.message)),p.close(o=>o?d(o):c(s))})})},M=async e=>{m=G(e);let r;do r=await m.next();while(!r.done);return r.value},_=async e=>{m=J(e);let r;do r=await m.next();while(!r.done);return r.value},V=[(0,B.join)(__dirname,"presets/preview-preset.js")],A=[(0,B.join)(__dirname,"./presets/custom-webpack-preset.js")];0&&(module.exports={bail,build,corePresets,executor,getConfig,overridePresets,start});

package/dist/index.mjs

@@ -0,0 +1 @@
+import"./chunk-HKSD7XQF.mjs";import S,{ProgressPlugin as O}from"webpack";import C from"webpack-dev-middleware";import x from"webpack-hot-middleware";import{logger as n}from"@storybook/node-logger";import{useProgressReporting as P}from"@storybook/core-common";import{checkWebpackVersion as v}from"@storybook/core-webpack";import{join as g}from"path";var m,b,k={get:async r=>{let e=await r.presets.apply("webpackVersion")||"5",t=(await r.presets.apply("webpackInstance"))?.default||S;return v({version:e},"5","builder-webpack5"),t}},B=async r=>{let{presets:e}=r,t=await e.apply("typescript",{},r),c=await e.apply("babel",{},{...r,typescriptOptions:t}),a=await e.apply("frameworkOptions");return e.apply("webpack",{},{...r,babelOptions:c,typescriptOptions:t,frameworkOptions:a})},w,f=async()=>{if(w)try{await w.throw(new Error)}catch{}return b&&b(),new Promise((r,e)=>{if(process&&m)try{m.close(()=>r()),n.warn("Force closed preview build")}catch{n.warn("Unable to close preview build!"),r()}else r()})},W=async function*({startTime:e,options:t,router:c}){let a=await k.get(t);yield;let s=await B(t);yield;let p=a(s);if(!p){let d=`${s.name}: missing webpack compiler at runtime!`;return n.error(d),{bail:f,totalTime:process.hrtime(e),stats:{hasErrors:()=>!0,hasWarnings:()=>!1,toJson:()=>({warnings:[],errors:[d]})}}}let{handler:l,modulesCount:u}=await P(c,e,t);yield,new O({handler:l,modulesCount:u}).apply(p);let o={publicPath:s.output?.publicPath,writeToDisk:!0};m=C(p,o),c.use(m),c.use(x(p));let i=await new Promise((d,y)=>{m?.waitUntilValid(d),b=y});if(yield,!i)throw new Error("no stats after building preview");if(i.hasErrors())throw i;return{bail:f,stats:i,totalTime:process.hrtime(e)}},R=async function*({startTime:e,options:t}){let c=await k.get(t);yield,n.info("=> Compiling preview..");let a=await B(t);yield;let s=c(a);if(!s){let p=`${a.name}: missing webpack compiler at runtime!`;return n.error(p),{hasErrors:()=>!0,hasWarnings:()=>!1,toJson:()=>({warnings:[],errors:[p]})}}return new Promise((p,l)=>{s.run((u,o)=>{if(u||!o||o.hasErrors()){if(n.error("=> Failed to build the preview"),process.exitCode=1,u){n.error(u.message),s.close(()=>l(u));return}if(o&&(o.hasErrors()||o.hasWarnings())){let{warnings:i=[],errors:d=[]}=o.toJson(typeof a.stats=="string"?a.stats:{warnings:!0,errors:!0,...a.stats});d.forEach(y=>n.error(y.message)),i.forEach(y=>n.error(y.message)),s.close(()=>t.debugWebpack?l(o):l(new Error("=> Webpack failed, learn more with --debug-webpack")));return}}n.trace({message:"=> Preview built",time:process.hrtime(e)}),o&&o.hasWarnings()&&o.toJson({warnings:!0}).warnings.forEach(i=>n.warn(i.message)),s.close(i=>i?l(i):p(o))})})},_=async r=>{w=W(r);let e;do e=await w.next();while(!e.done);return e.value},V=async r=>{w=R(r);let e;do e=await w.next();while(!e.done);return e.value},A=[g(__dirname,"presets/preview-preset.js")],$=[g(__dirname,"./presets/custom-webpack-preset.js")];export{f as bail,V as build,A as corePresets,k as executor,B as getConfig,$ as overridePresets,_ as start};

package/dist/presets/custom-webpack-preset.d.ts

@@ -0,0 +1,9 @@
+import * as webpack$1 from 'webpack';
+import { Configuration } from 'webpack';
+import { Options } from '@storybook/core-common';
+
+declare function webpack(config: Configuration, options: Options): Promise<any>;
+declare const webpackInstance: () => Promise<typeof webpack$1>;
+declare const webpackVersion: () => Promise<string>;
+
+export { webpack, webpackInstance, webpackVersion };

package/dist/presets/custom-webpack-preset.js

@@ -0,0 +1,3 @@
+"use strict";var k=Object.create;var f=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var W=(e,t)=>{for(var o in t)f(e,o,{get:t[o],enumerable:!0})},d=(e,t,o,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of v(t))!x.call(e,a)&&a!==o&&f(e,a,{get:()=>t[a],enumerable:!(i=C(t,a))||i.enumerable});return e};var m=(e,t,o)=>(o=e!=null?k(h(e)):{},d(t||!e||!e.__esModule?f(o,"default",{value:e,enumerable:!0}):o,e)),D=e=>d(f({},"__esModule",{value:!0}),e);var U={};W(U,{webpack:()=>O,webpackInstance:()=>P,webpackVersion:()=>S});module.exports=D(U);var L=m(require("webpack")),l=require("@storybook/node-logger"),b=m(require("util-deprecate")),w=require("ts-dedent"),y=require("@storybook/core-webpack");var u=require("@storybook/node-logger");async function g(e,t){var c,n,p,s;if((c=t.presetsList)!=null&&c.some(r=>/@storybook(\/|\\)preset-create-react-app/.test(typeof r=="string"?r:r.name)))return e;let o=(n=t.presetsList)==null?void 0:n.some(r=>/@storybook(\/|\\)addon-postcss/.test(typeof r=="string"?r:r.name)),i={};o||(u.logger.info("=> Using implicit CSS loaders"),i={test:/\.css$/,sideEffects:!0,use:[require.resolve("style-loader"),{loader:require.resolve("css-loader"),options:{importLoaders:1}}]});let a=e.mode!=="development";return{...e,module:{...e.module,rules:[...((p=e.module)==null?void 0:p.rules)||[],i,{test:/\.(svg|ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/,type:"asset/resource",generator:{filename:a?"static/media/[name].[contenthash:8][ext]":"static/media/[path][name][ext]"}},{test:/\.(mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/,type:"asset",parser:{dataUrlCondition:{maxSize:1e4}},generator:{filename:a?"static/media/[name].[contenthash:8][ext]":"static/media/[path][name][ext]"}}]},resolve:{...e.resolve,fallback:{crypto:!1,assert:!1,...(s=e.resolve)==null?void 0:s.fallback}}}}async function O(e,t){let{configDir:o,configType:i,presets:a,webpackConfig:c}=t,n=await a.apply("core"),p=e;n!=null&&n.disableWebpackDefaults||(p=await g(e,t));let s=await a.apply("webpackFinal",p,t);if(c)return(0,b.default)(c,w.dedent`
+      You've provided a webpack config directly in CallOptions, this is not recommended. Please use presets instead. This feature will be removed in 7.0
+      `)(s);let r=(0,y.loadCustomWebpackConfig)(o);return typeof r=="function"?(l.logger.info("=> Loading custom Webpack config (full-control mode)."),r({config:s,mode:i})):(l.logger.info("=> Using default Webpack5 setup"),s)}var P=async()=>L,S=async()=>"5";0&&(module.exports={webpack,webpackInstance,webpackVersion});

package/dist/presets/custom-webpack-preset.mjs

@@ -0,0 +1,3 @@
+import{a as s}from"../chunk-HKSD7XQF.mjs";import*as g from"webpack";import{logger as m}from"@storybook/node-logger";import b from"util-deprecate";import{dedent as w}from"ts-dedent";import{loadCustomWebpackConfig as y}from"@storybook/core-webpack";import{logger as u}from"@storybook/node-logger";async function f(e,o){if(o.presetsList?.some(t=>/@storybook(\/|\\)preset-create-react-app/.test(typeof t=="string"?t:t.name)))return e;let i=o.presetsList?.some(t=>/@storybook(\/|\\)addon-postcss/.test(typeof t=="string"?t:t.name)),r={};i||(u.info("=> Using implicit CSS loaders"),r={test:/\.css$/,sideEffects:!0,use:[s.resolve("style-loader"),{loader:s.resolve("css-loader"),options:{importLoaders:1}}]});let a=e.mode!=="development";return{...e,module:{...e.module,rules:[...e.module?.rules||[],r,{test:/\.(svg|ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/,type:"asset/resource",generator:{filename:a?"static/media/[name].[contenthash:8][ext]":"static/media/[path][name][ext]"}},{test:/\.(mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/,type:"asset",parser:{dataUrlCondition:{maxSize:1e4}},generator:{filename:a?"static/media/[name].[contenthash:8][ext]":"static/media/[path][name][ext]"}}]},resolve:{...e.resolve,fallback:{crypto:!1,assert:!1,...e.resolve?.fallback}}}}async function D(e,o){let{configDir:i,configType:r,presets:a,webpackConfig:t}=o,l=await a.apply("core"),c=e;l?.disableWebpackDefaults||(c=await f(e,o));let n=await a.apply("webpackFinal",c,o);if(t)return b(t,w`
+      You've provided a webpack config directly in CallOptions, this is not recommended. Please use presets instead. This feature will be removed in 7.0
+      `)(n);let p=y(i);return typeof p=="function"?(m.info("=> Loading custom Webpack config (full-control mode)."),p({config:n,mode:r})):(m.info("=> Using default Webpack5 setup"),n)}var L=async()=>g,P=async()=>"5";export{D as webpack,L as webpackInstance,P as webpackVersion};

package/dist/presets/preview-preset.d.ts

@@ -0,0 +1,8 @@
+import * as webpack$1 from 'webpack';
+
+declare const webpack: (_: unknown, options: any) => Promise<webpack$1.Configuration>;
+declare const entries: (_: unknown, options: any) => Promise<string[]>;
+declare const babel: (config: any, options: any) => Promise<any>;
+declare const babelLoaderRef: () => string;
+
+export { babel, babelLoaderRef, entries, webpack };

package/dist/presets/preview-preset.js

@@ -0,0 +1 @@
+"use strict";var Z=Object.create;var b=Object.defineProperty;var ee=Object.getOwnPropertyDescriptor;var te=Object.getOwnPropertyNames;var oe=Object.getPrototypeOf,re=Object.prototype.hasOwnProperty;var se=(e,t)=>{for(var n in t)b(e,n,{get:t[n],enumerable:!0})},R=(e,t,n,f)=>{if(t&&typeof t=="object"||typeof t=="function")for(let l of te(t))!re.call(e,l)&&l!==n&&b(e,l,{get:()=>t[l],enumerable:!(f=ee(t,l))||f.enumerable});return e};var r=(e,t,n)=>(n=e!=null?Z(oe(e)):{},R(t||!e||!e.__esModule?b(n,"default",{value:e,enumerable:!0}):n,e)),ne=e=>R(b({},"__esModule",{value:!0}),e);var ce={};se(ce,{babel:()=>le,babelLoaderRef:()=>pe,entries:()=>ae,webpack:()=>ie});module.exports=ne(ce);var s=r(require("path")),c=require("webpack"),q=r(require("html-webpack-plugin")),D=r(require("case-sensitive-paths-webpack-plugin")),L=r(require("terser-webpack-plugin")),M=r(require("webpack-virtual-modules")),$=r(require("fork-ts-checker-webpack-plugin")),o=require("@storybook/core-common"),k=require("@storybook/core-webpack");var N=require("@storybook/core-common"),x=(e,t)=>({test:t.skipBabel?/\.(mjs|jsx?)$/:/\.(mjs|tsx?|jsx?)$/,use:[{loader:require.resolve("babel-loader"),options:e}],include:[(0,N.getProjectRoot)()],exclude:/node_modules/});var C={global:s.default.dirname(require.resolve("global/package.json")),...["addons","api","store","channels","channel-postmessage","channel-websocket","components","core-events","router","theming","preview-web","client-api","client-logger"].reduce((e,t)=>({...e,[`@storybook/${t}`]:s.default.dirname(require.resolve(`@storybook/${t}/package.json`))}),{})},I=async e=>{var _;let{outputDir:t=s.default.join(".","public"),quiet:n,packageJson:f,configType:l,presets:i,previewUrl:B,babelOptions:A,typescriptOptions:w,features:v,serverChannelUrl:F}=e,E=await(0,o.getFrameworkName)(e),H=await i.apply("frameworkOptions"),a=l==="PRODUCTION",T=await i.apply("env"),V=await i.apply("logLevel",void 0),W=await i.apply("previewHead"),z=await i.apply("previewBody"),U=await i.apply("previewMainTemplate"),O=await i.apply("core"),j=typeof O.builder=="string"?{}:((_=O.builder)==null?void 0:_.options)||{},G=await i.apply("docs"),S=[...await i.apply("previewAnnotations",[],e),(0,o.loadPreviewOrConfigFile)(e)].filter(Boolean),y=await i.apply("entries",[],e),g=process.cwd(),h=(0,o.normalizeStories)(await i.apply("stories",[],e),{configDir:e.configDir,workingDir:g}),m={};if(v!=null&&v.storyStoreV7){let p="storybook-stories.js",P=s.default.resolve(s.default.join(g,p)),u=!!j.lazyCompilation&&!a;m[P]=(0,k.toImportFn)(h,{needPipelinedImport:u});let d=s.default.resolve(s.default.join(g,"storybook-config-entry.js"));m[d]=(0,o.handlebars)(await(0,o.readTemplate)(require.resolve("@storybook/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars")),{storiesFilename:p,previewAnnotations:S}).replace(/\\/g,"\\\\"),y.push(d)}else{let p=s.default.resolve(s.default.join(g,"storybook-init-framework-entry.js"));m[p]=`import '${E}';`,y.push(p);let P=await(0,o.readTemplate)(s.default.join(__dirname,"..","..","templates","virtualModuleEntry.template.js"));if(S.forEach(u=>{let d=C["@storybook/client-api"],X=C["@storybook/client-logger"];m[`${u}-generated-config-entry.js`]=(0,o.interpolate)(P,{previewAnnotationFilename:u,clientApi:d,clientLogger:X}),y.push(`${u}-generated-config-entry.js`)}),h.length>0){let u=await(0,o.readTemplate)(s.default.join(__dirname,"..","..","templates","virtualModuleStory.template.js")),d=s.default.resolve(s.default.join(g,"generated-stories-entry.cjs"));m[d]=(0,o.interpolate)(u,{frameworkName:E}).replace("'{{stories}}'",h.map(k.toRequireContextString).join(",")),y.push(d)}}let J=w.check&&!w.skipBabel,K=w.checkOptions||{},Y=j.fsCache?{cache:{type:"filesystem"}}:{},Q=j.lazyCompilation&&!a?{lazyCompilation:{entries:!1}}:{};return{name:"preview",mode:a?"production":"development",bail:a,devtool:"cheap-module-source-map",entry:y,output:{path:s.default.resolve(process.cwd(),t),filename:a?"[name].[contenthash:8].iframe.bundle.js":"[name].iframe.bundle.js",publicPath:""},stats:{preset:"none",logging:"error"},watchOptions:{ignored:/node_modules/},ignoreWarnings:[{message:/export '\S+' was not found in 'global'/}],plugins:[Object.keys(m).length>0?new M.default(m):null,new q.default({filename:"iframe.html",chunksSortMode:"none",alwaysWriteToDisk:!0,inject:!1,template:U,templateParameters:{version:f.version,globals:{CONFIG_TYPE:l,LOGLEVEL:V,FRAMEWORK_OPTIONS:H,CHANNEL_OPTIONS:O.channelOptions,FEATURES:v,PREVIEW_URL:B,STORIES:h.map(p=>({...p,importPathMatcher:p.importPathMatcher.source})),DOCS_OPTIONS:G,SERVER_CHANNEL_URL:F},headHtmlSnippet:W,bodyHtmlSnippet:z},minify:{collapseWhitespace:!0,removeComments:!0,removeRedundantAttributes:!0,removeScriptTypeAttributes:!1,removeStyleLinkTypeAttributes:!0,useShortDoctype:!0}}),new c.DefinePlugin({...(0,o.stringifyProcessEnvs)(T),NODE_ENV:JSON.stringify(process.env.NODE_ENV)}),new c.ProvidePlugin({process:require.resolve("process/browser.js")}),a?null:new c.HotModuleReplacementPlugin,new D.default,n?null:new c.ProgressPlugin({}),J?new $.default(K):null].filter(Boolean),module:{rules:[{test:/\.m?js$/,type:"javascript/auto"},{test:/\.m?js$/,resolve:{fullySpecified:!1}},x(A,w),{test:/\.md$/,type:"asset/source"}]},resolve:{extensions:[".mjs",".js",".jsx",".ts",".tsx",".json",".cjs"],modules:["node_modules"].concat(T.NODE_PATH||[]),mainFields:["browser","module","main"].filter(Boolean),alias:C,fallback:{path:require.resolve("path-browserify"),assert:require.resolve("browser-assert"),util:require.resolve("util")},symlinks:!(0,o.isPreservingSymlinks)()},optimization:{splitChunks:{chunks:"all"},runtimeChunk:!0,sideEffects:!0,usedExports:a,moduleIds:"named",minimizer:a?[new L.default({parallel:!0,terserOptions:{sourceMap:!0,mangle:!1,keep_fnames:!0}})]:[]},performance:{hints:a?"warning":!1},...Y,experiments:{...Q}}};var ie=async(e,t)=>I(t),ae=async(e,t)=>{let n=[];return t.configType==="DEVELOPMENT"&&(n=n.concat(`${require.resolve("webpack-hot-middleware/client")}?reload=true&quiet=false&noInfo=${t.quiet}`)),n},le=async(e,t)=>({...e,overrides:[...(e==null?void 0:e.overrides)||[],{test:/\.(story|stories).*$/,plugins:[require.resolve("babel-plugin-named-exports-order")]}]}),pe=()=>require.resolve("babel-loader");0&&(module.exports={babel,babelLoaderRef,entries,webpack});

package/dist/presets/preview-preset.mjs

@@ -0,0 +1 @@
+import{a as t}from"../chunk-HKSD7XQF.mjs";import o from"path";import{DefinePlugin as z,HotModuleReplacementPlugin as U,ProgressPlugin as G,ProvidePlugin as J}from"webpack";import K from"html-webpack-plugin";import Y from"case-sensitive-paths-webpack-plugin";import Q from"terser-webpack-plugin";import X from"webpack-virtual-modules";import Z from"fork-ts-checker-webpack-plugin";import{stringifyProcessEnvs as ee,handlebars as te,interpolate as T,normalizeStories as oe,readTemplate as w,loadPreviewOrConfigFile as re,isPreservingSymlinks as se,getFrameworkName as ne}from"@storybook/core-common";import{toRequireContextString as ie,toImportFn as ae}from"@storybook/core-webpack";import{getProjectRoot as W}from"@storybook/core-common";var E=(e,r)=>({test:r.skipBabel?/\.(mjs|jsx?)$/:/\.(mjs|tsx?|jsx?)$/,use:[{loader:t.resolve("babel-loader"),options:e}],include:[W()],exclude:/node_modules/});var h={global:o.dirname(t.resolve("global/package.json")),...["addons","api","store","channels","channel-postmessage","channel-websocket","components","core-events","router","theming","preview-web","client-api","client-logger"].reduce((e,r)=>({...e,[`@storybook/${r}`]:o.dirname(t.resolve(`@storybook/${r}/package.json`))}),{})},S=async e=>{let{outputDir:r=o.join(".","public"),quiet:c,packageJson:_,configType:v,presets:s,previewUrl:R,babelOptions:x,typescriptOptions:d,features:k,serverChannelUrl:N}=e,O=await ne(e),q=await s.apply("frameworkOptions"),n=v==="PRODUCTION",j=await s.apply("env"),D=await s.apply("logLevel",void 0),L=await s.apply("previewHead"),M=await s.apply("previewBody"),$=await s.apply("previewMainTemplate"),g=await s.apply("core"),f=typeof g.builder=="string"?{}:g.builder?.options||{},I=await s.apply("docs"),P=[...await s.apply("previewAnnotations",[],e),re(e)].filter(Boolean),m=await s.apply("entries",[],e),u=process.cwd(),y=oe(await s.apply("stories",[],e),{configDir:e.configDir,workingDir:u}),a={};if(k?.storyStoreV7){let i="storybook-stories.js",b=o.resolve(o.join(u,i)),l=!!f.lazyCompilation&&!n;a[b]=ae(y,{needPipelinedImport:l});let p=o.resolve(o.join(u,"storybook-config-entry.js"));a[p]=te(await w(t.resolve("@storybook/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars")),{storiesFilename:i,previewAnnotations:P}).replace(/\\/g,"\\\\"),m.push(p)}else{let i=o.resolve(o.join(u,"storybook-init-framework-entry.js"));a[i]=`import '${O}';`,m.push(i);let b=await w(o.join(__dirname,"..","..","templates","virtualModuleEntry.template.js"));if(P.forEach(l=>{let p=h["@storybook/client-api"],V=h["@storybook/client-logger"];a[`${l}-generated-config-entry.js`]=T(b,{previewAnnotationFilename:l,clientApi:p,clientLogger:V}),m.push(`${l}-generated-config-entry.js`)}),y.length>0){let l=await w(o.join(__dirname,"..","..","templates","virtualModuleStory.template.js")),p=o.resolve(o.join(u,"generated-stories-entry.cjs"));a[p]=T(l,{frameworkName:O}).replace("'{{stories}}'",y.map(ie).join(",")),m.push(p)}}let B=d.check&&!d.skipBabel,A=d.checkOptions||{},F=f.fsCache?{cache:{type:"filesystem"}}:{},H=f.lazyCompilation&&!n?{lazyCompilation:{entries:!1}}:{};return{name:"preview",mode:n?"production":"development",bail:n,devtool:"cheap-module-source-map",entry:m,output:{path:o.resolve(process.cwd(),r),filename:n?"[name].[contenthash:8].iframe.bundle.js":"[name].iframe.bundle.js",publicPath:""},stats:{preset:"none",logging:"error"},watchOptions:{ignored:/node_modules/},ignoreWarnings:[{message:/export '\S+' was not found in 'global'/}],plugins:[Object.keys(a).length>0?new X(a):null,new K({filename:"iframe.html",chunksSortMode:"none",alwaysWriteToDisk:!0,inject:!1,template:$,templateParameters:{version:_.version,globals:{CONFIG_TYPE:v,LOGLEVEL:D,FRAMEWORK_OPTIONS:q,CHANNEL_OPTIONS:g.channelOptions,FEATURES:k,PREVIEW_URL:R,STORIES:y.map(i=>({...i,importPathMatcher:i.importPathMatcher.source})),DOCS_OPTIONS:I,SERVER_CHANNEL_URL:N},headHtmlSnippet:L,bodyHtmlSnippet:M},minify:{collapseWhitespace:!0,removeComments:!0,removeRedundantAttributes:!0,removeScriptTypeAttributes:!1,removeStyleLinkTypeAttributes:!0,useShortDoctype:!0}}),new z({...ee(j),NODE_ENV:JSON.stringify("production")}),new J({process:t.resolve("process/browser.js")}),n?null:new U,new Y,c?null:new G({}),B?new Z(A):null].filter(Boolean),module:{rules:[{test:/\.m?js$/,type:"javascript/auto"},{test:/\.m?js$/,resolve:{fullySpecified:!1}},E(x,d),{test:/\.md$/,type:"asset/source"}]},resolve:{extensions:[".mjs",".js",".jsx",".ts",".tsx",".json",".cjs"],modules:["node_modules"].concat(j.NODE_PATH||[]),mainFields:["browser","module","main"].filter(Boolean),alias:h,fallback:{path:t.resolve("path-browserify"),assert:t.resolve("browser-assert"),util:t.resolve("util")},symlinks:!se()},optimization:{splitChunks:{chunks:"all"},runtimeChunk:!0,sideEffects:!0,usedExports:n,moduleIds:"named",minimizer:n?[new Q({parallel:!0,terserOptions:{sourceMap:!0,mangle:!1,keep_fnames:!0}})]:[]},performance:{hints:n?"warning":!1},...F,experiments:{...H}}};var Oe=async(e,r)=>S(r),je=async(e,r)=>{let c=[];return r.configType==="DEVELOPMENT"&&(c=c.concat(`${t.resolve("webpack-hot-middleware/client")}?reload=true&quiet=false&noInfo=${r.quiet}`)),c},Pe=async(e,r)=>({...e,overrides:[...e?.overrides||[],{test:/\.(story|stories).*$/,plugins:[t.resolve("babel-plugin-named-exports-order")]}]}),Ce=()=>t.resolve("babel-loader");export{Pe as babel,Ce as babelLoaderRef,je as entries,Oe as webpack};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-webpack5",
-  "version": "7.0.0-alpha.39",
+  "version": "7.0.0-alpha.40",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
@@ -19,9 +19,28 @@
     "url": "https://opencollective.com/storybook"
   },
   "license": "MIT",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./presets/custom-webpack-preset.js": {
+      "require": "./presets/custom-webpack-preset.js",
+      "import": "./presets/custom-webpack-preset.mjs",
+      "types": "./presets/custom-webpack-preset.d.ts"
+    },
+    "./presets/preview-preset.js": {
+      "require": "./presets/preview-preset.js",
+      "import": "./presets/preview-preset.mjs",
+      "types": "./presets/preview-preset.d.ts"
+    },
+    "./templates/virtualModuleModernEntry.js.handlebars": "./templates/virtualModuleModernEntry.js.handlebars",
+    "./package.json": "./package.json"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
     "templates/**/*",
@@ -30,26 +49,26 @@
   ],
   "scripts": {
     "check": "../../../scripts/node_modules/.bin/tsc --noEmit",
-    "prep": "node ../../../scripts/prepare.js"
+    "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
     "@babel/core": "^7.12.10",
-    "@storybook/addons": "7.0.0-alpha.39",
-    "@storybook/api": "7.0.0-alpha.39",
-    "@storybook/channel-postmessage": "7.0.0-alpha.39",
-    "@storybook/channel-websocket": "7.0.0-alpha.39",
-    "@storybook/channels": "7.0.0-alpha.39",
-    "@storybook/client-api": "7.0.0-alpha.39",
-    "@storybook/client-logger": "7.0.0-alpha.39",
-    "@storybook/components": "7.0.0-alpha.39",
-    "@storybook/core-common": "7.0.0-alpha.39",
-    "@storybook/core-events": "7.0.0-alpha.39",
-    "@storybook/core-webpack": "7.0.0-alpha.39",
-    "@storybook/node-logger": "7.0.0-alpha.39",
-    "@storybook/preview-web": "7.0.0-alpha.39",
-    "@storybook/router": "7.0.0-alpha.39",
-    "@storybook/store": "7.0.0-alpha.39",
-    "@storybook/theming": "7.0.0-alpha.39",
+    "@storybook/addons": "7.0.0-alpha.40",
+    "@storybook/api": "7.0.0-alpha.40",
+    "@storybook/channel-postmessage": "7.0.0-alpha.40",
+    "@storybook/channel-websocket": "7.0.0-alpha.40",
+    "@storybook/channels": "7.0.0-alpha.40",
+    "@storybook/client-api": "7.0.0-alpha.40",
+    "@storybook/client-logger": "7.0.0-alpha.40",
+    "@storybook/components": "7.0.0-alpha.40",
+    "@storybook/core-common": "7.0.0-alpha.40",
+    "@storybook/core-events": "7.0.0-alpha.40",
+    "@storybook/core-webpack": "7.0.0-alpha.40",
+    "@storybook/node-logger": "7.0.0-alpha.40",
+    "@storybook/preview-web": "7.0.0-alpha.40",
+    "@storybook/router": "7.0.0-alpha.40",
+    "@storybook/store": "7.0.0-alpha.40",
+    "@storybook/theming": "7.0.0-alpha.40",
     "@types/node": "^16.0.0",
     "@types/semver": "^7.3.4",
     "babel-loader": "^8.2.5",
@@ -93,5 +112,13 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "47386bd49d141ea70daac41ab3e4d52749fc5da9"
+  "bundler": {
+    "entries": [
+      "./src/index.ts",
+      "./src/presets/custom-webpack-preset.ts",
+      "./src/presets/preview-preset.ts"
+    ],
+    "platform": "node"
+  },
+  "gitHead": "8f6d8629f1ad7e776c39e2c7621f4a0d538aa93c"
 }

package/templates/virtualModuleEntry.template.js

@@ -0,0 +1,62 @@
+/* eslint-disable import/no-unresolved */
+import {
+  addDecorator,
+  addParameters,
+  addLoader,
+  addArgs,
+  addArgTypes,
+  addStepRunner,
+  addArgsEnhancer,
+  addArgTypesEnhancer,
+  setGlobalRender,
+} from '{{clientApi}}';
+import * as previewAnnotations from '{{previewAnnotationFilename}}';
+
+Object.keys(previewAnnotations).forEach((key) => {
+  const value = previewAnnotations[key];
+  switch (key) {
+    case 'args': {
+      return addArgs(value);
+    }
+    case 'argTypes': {
+      return addArgTypes(value);
+    }
+    case 'decorators': {
+      return value.forEach((decorator) => addDecorator(decorator, false));
+    }
+    case 'loaders': {
+      return value.forEach((loader) => addLoader(loader, false));
+    }
+    case 'parameters': {
+      return addParameters({ ...value }, false);
+    }
+    case 'argTypesEnhancers': {
+      return value.forEach((enhancer) => addArgTypesEnhancer(enhancer));
+    }
+    case 'argsEnhancers': {
+      return value.forEach((enhancer) => addArgsEnhancer(enhancer));
+    }
+    case 'render': {
+      return setGlobalRender(value);
+    }
+    case 'globals':
+    case 'globalTypes': {
+      const v = {};
+      v[key] = value;
+      return addParameters(v, false);
+    }
+    case '__namedExportsOrder':
+    case 'decorateStory':
+    case 'renderToDOM': {
+      return null; // This key is not handled directly in v6 mode.
+    }
+    case 'runStep': {
+      return addStepRunner(value);
+    }
+    default: {
+      return console.log(
+        `Unknown key '${key}' exported by preview annotation file '{{previewAnnotationFilename}}'`
+      );
+    }
+  }
+});

package/templates/virtualModuleStory.template.js

@@ -0,0 +1,3 @@
+const { configure } = require('{{frameworkName}}');
+
+configure(['{{stories}}'], module, false);