wip

.babelrc.js

@@ -117,7 +117,7 @@ module.exports = {
             shippedProposals: true,
             useBuiltIns: 'usage',
             targets: {
-              node: '10',
+              node: '14',
             },
             modules,
             corejs: '3',
@@ -149,7 +149,7 @@ module.exports = {
             shippedProposals: true,
             useBuiltIns: 'usage',
             targets: {
-              node: '10',
+              node: '14',
             },
             corejs: '3',
             modules: false,

addons/docs/src/preset.ts

@@ -69,6 +69,7 @@ export async function webpack(
   const sourceLoader = sourceLoaderOptions
     ? [
         {
+          layer: 'storybook_source',
           test: /\.(stories|story)\.[tj]sx?$/,
           loader: require.resolve('@storybook/source-loader'),
           options: { ...sourceLoaderOptions, inspectLocalDependencies: true },
@@ -104,6 +105,7 @@ export async function webpack(
       rules: [
         ...rules,
         {
+          layer: 'storybook_mdx',
           test: /(stories|story)\.mdx$/,
           use: [
             {
@@ -116,6 +118,7 @@ export async function webpack(
           ],
         },
         {
+          layer: 'storybook_mdx',
           test: /\.mdx$/,
           exclude: /(stories|story)\.mdx$/,
           use: [

docs/snippets/common/storybook-builder-api-interface.ts.mdx

@@ -16,7 +16,5 @@ export interface Builder<Config, Stats> {
   }) => Promise<void | Stats>;
   bail: (e?: Error) => Promise<void>;
   getConfig: (options: Options) => Promise<Config>;
-  corePresets?: string[];
-  overridePresets?: string[];
 }
 ```

examples/html-kitchen-sink/package.json

@@ -21,7 +21,7 @@
     "@storybook/addon-highlight": "7.0.0-alpha.12",
     "@storybook/addon-jest": "7.0.0-alpha.12",
     "@storybook/addon-links": "7.0.0-alpha.12",
-    "@storybook/addon-postcss": "^2.0.0",
+    "@storybook/addon-postcss": "^3.0.0-alpha.0",
     "@storybook/addon-storyshots": "7.0.0-alpha.12",
     "@storybook/addon-storysource": "7.0.0-alpha.12",
     "@storybook/addon-viewport": "7.0.0-alpha.12",
@@ -36,7 +36,6 @@
     "format-json": "^1.0.3",
     "global": "^4.4.0",
     "postcss": "^8.2.4",
-    "postcss-color-rebeccapurple": "^6.0.0",
     "storybook": "7.0.0-alpha.12"
   },
   "storybook": {

examples/html-kitchen-sink/postcss.config.js

@@ -2,7 +2,5 @@ module.exports = {
   plugins: [
     // eslint-disable-next-line global-require
     require('autoprefixer'),
-    // eslint-disable-next-line global-require
-    require('postcss-color-rebeccapurple'),
   ],
 };

lib/builder-manager/src/index.ts

@@ -11,6 +11,7 @@ import aliasPlugin from 'esbuild-plugin-alias';
 import { renderHTML } from './utils/template';
 import { definitions } from './utils/globals';
 import {
+  BuilderBuildOptions,
   BuilderBuildResult,
   BuilderFunction,
   BuilderStartOptions,
@@ -121,6 +122,8 @@ const starter: StarterFunction = async function* starterGeneratorFn({
     }
   });
 
+  logger.trace({ message: '=> Manager started', time: process.hrtime(startTime) });
+
   return {
     bail,
     stats: {
@@ -211,7 +214,7 @@ export const start = async (options: BuilderStartOptions) => {
   return result.value;
 };
 
-export const build = async (options: BuilderStartOptions) => {
+export const build = async (options: BuilderBuildOptions) => {
   asyncIterator = builder(options);
   let result;
 
@@ -222,6 +225,3 @@ export const build = async (options: BuilderStartOptions) => {
 
   return result.value;
 };
-
-export const corePresets: ManagerBuilder['corePresets'] = [];
-export const overridePresets: ManagerBuilder['overridePresets'] = [];

lib/builder-webpack5/preset.js

@@ -0,0 +1 @@
+module.exports = require('./dist/index');

lib/builder-webpack5/src/index.ts

@@ -5,6 +5,7 @@ import { logger } from '@storybook/node-logger';
 import { useProgressReporting } from '@storybook/core-common';
 import type { Builder, Options } from '@storybook/core-common';
 import { checkWebpackVersion } from '@storybook/core-webpack';
+import { createWebpackConfig } from './utils/webpack';
 
 export * from './types';
 
@@ -39,20 +40,11 @@ export const executor = {
 
 export const getConfig: WebpackBuilder['getConfig'] = async (options) => {
   const { presets } = options;
-  const typescriptOptions = await presets.apply('typescript', {}, options);
-  const babelOptions = await presets.apply('babel', {}, { ...options, typescriptOptions });
-  const framework = await presets.apply<any>('framework', {}, options);
-
-  return presets.apply(
-    'webpack',
-    {},
-    {
-      ...options,
-      babelOptions,
-      typescriptOptions,
-      frameworkOptions: typeof framework === 'string' ? {} : framework?.options,
-    }
-  ) as any;
+
+  const base = await createWebpackConfig(options);
+  const intermediate = await presets.apply<Configuration>('webpack', base);
+
+  return presets.apply<Configuration>('webpackFinal', intermediate);
 };
 
 let asyncIterator: ReturnType<StarterFunction> | ReturnType<BuilderFunction>;
@@ -261,6 +253,3 @@ export const build = async (options: BuilderStartOptions) => {
 
   return result.value;
 };
-
-export const corePresets = [require.resolve('./presets/preview-preset.js')];
-export const overridePresets = [require.resolve('./presets/custom-webpack-preset.js')];

lib/builder-webpack5/src/presets/preview-preset.ts → lib/builder-webpack5/src/preset.ts

@@ -1,7 +1,3 @@
-import webpackConfig from '../preview/iframe-webpack.config';
-
-export const webpack = async (_: unknown, options: any) => webpackConfig(options);
-
 export const entries = async (_: unknown, options: any) => {
   let result: string[] = [];