Initial implementation of the core and framework presets

app/angular/src/server/framework-preset-angular-cli.js

@@ -0,0 +1,21 @@
+import { logger } from '@storybook/node-logger';
+
+import {
+  getAngularCliWebpackConfigOptions,
+  applyAngularCliWebpackConfig,
+} from './angular-cli_config';
+
+function extendWebpack(config) {
+  const cwd = process.cwd();
+  const cliWebpackConfigOptions = getAngularCliWebpackConfigOptions(cwd);
+
+  if (cliWebpackConfigOptions) {
+    logger.info('=> Loading angular-cli config.');
+  }
+
+  return applyAngularCliWebpackConfig(config, cliWebpackConfigOptions);
+}
+
+export default {
+  extendWebpack,
+};

app/angular/src/server/framework-preset-angular.js

@@ -0,0 +1,44 @@
+import loadTsConfig from './ts_config';
+
+function extendWebpack(config, { configDir }) {
+  return {
+    ...config,
+    module: {
+      ...config.module,
+      rules: [
+        ...config.module.rules,
+        {
+          test: /\.tsx?$/,
+          use: [
+            {
+              loader: require.resolve('ts-loader'),
+              options: loadTsConfig(configDir),
+            },
+            require.resolve('angular2-template-loader'),
+          ],
+        },
+        {
+          test: /[/\\]@angular[/\\]core[/\\].+\.js$/,
+          parser: { system: true },
+        },
+        {
+          test: /\.html$/,
+          loader: 'raw-loader',
+          exclude: /\.async\.html$/,
+        },
+        {
+          test: /\.scss$/,
+          use: [require.resolve('raw-loader'), require.resolve('sass-loader')],
+        },
+      ],
+    },
+    resolve: {
+      ...config.resolve,
+      extensions: [...config.resolve.extensions, '.ts', '.tsx'],
+    },
+  };
+}
+
+export default {
+  extendWebpack,
+};

app/angular/src/server/options.js

@@ -1,24 +1,10 @@
-import { logger } from '@storybook/node-logger';
-
 import packageJson from '../../package.json';
 
-import wrapInitialConfig from './wrapInitialConfig';
-
-import {
-  getAngularCliWebpackConfigOptions,
-  applyAngularCliWebpackConfig,
-} from './angular-cli_config';
-
-const cliWebpackConfigOptions = getAngularCliWebpackConfigOptions(process.cwd());
-
-if (cliWebpackConfigOptions) {
-  logger.info('=> Loading angular-cli config.');
-}
-
 export default {
   packageJson,
   defaultConfigName: 'angular-cli',
-  wrapInitialConfig,
-  wrapDefaultConfig: config => applyAngularCliWebpackConfig(config, cliWebpackConfigOptions),
-  wrapBasicConfig: config => applyAngularCliWebpackConfig(config, cliWebpackConfigOptions),
+  frameworkPresets: [
+    require.resolve('./framework-preset-angular.js'),
+    require.resolve('./framework-preset-angular-cli.js'),
+  ],
 };

app/angular/src/server/wrapInitialConfig.js

@@ -1,38 +0,0 @@
-import loadTsConfig from './ts_config';
-
-export default (config, configDir) => ({
-  ...config,
-  module: {
-    ...config.module,
-    rules: [
-      ...config.module.rules,
-      {
-        test: /\.tsx?$/,
-        use: [
-          {
-            loader: require.resolve('ts-loader'),
-            options: loadTsConfig(configDir),
-          },
-          require.resolve('angular2-template-loader'),
-        ],
-      },
-      {
-        test: /[/\\]@angular[/\\]core[/\\].+\.js$/,
-        parser: { system: true },
-      },
-      {
-        test: /\.html$/,
-        loader: 'raw-loader',
-        exclude: /\.async\.html$/,
-      },
-      {
-        test: /\.scss$/,
-        use: [require.resolve('raw-loader'), require.resolve('sass-loader')],
-      },
-    ],
-  },
-  resolve: {
-    ...config.resolve,
-    extensions: [...config.resolve.extensions, '.ts', '.tsx'],
-  },
-});

app/html/src/server/framework-preset-html.js

@@ -1,4 +1,4 @@
-export default config => ({
+const extendWebpack = config => ({
   ...config,
   module: {
     ...config.module,
@@ -15,3 +15,7 @@ export default config => ({
     ],
   },
 });
+
+export default {
+  extendWebpack,
+};

app/html/src/server/options.js

@@ -1,8 +1,6 @@
 import packageJson from '../../package.json';
 
-import wrapInitialConfig from './wrapInitialConfig';
-
 export default {
   packageJson,
-  wrapInitialConfig,
+  frameworkPresets: [require.resolve('./framework-preset-html.js')],
 };

app/marko/src/server/framework-preset-marko.js

@@ -1,4 +1,4 @@
-export default config => ({
+const extendWebpack = config => ({
   ...config,
   module: {
     ...config.module,
@@ -15,3 +15,7 @@ export default config => ({
     extensions: [...config.resolve.extensions, '.marko'],
   },
 });
+
+export default {
+  extendWebpack,
+};

app/marko/src/server/options.js

@@ -1,8 +1,6 @@
 import packageJson from '../../package.json';
 
-import wrapInitialConfig from './wrapInitialConfig';
-
 export default {
   packageJson,
-  wrapInitialConfig,
+  frameworkPresets: [require.resolve('./framework-preset-marko.js')],
 };

app/polymer/src/server/framework-preset-polymer.js

@@ -1,4 +1,4 @@
-export default config => ({
+const extendWebpack = config => ({
   ...config,
   module: {
     ...config.module,
@@ -17,3 +17,7 @@ export default config => ({
     ],
   },
 });
+
+export default {
+  extendWebpack,
+};

app/polymer/src/server/options.js

@@ -1,8 +1,6 @@
 import packageJson from '../../package.json';
 
-import wrapInitialConfig from './wrapInitialConfig';
-
 export default {
   packageJson,
-  wrapInitialConfig,
+  frameworkPresets: [require.resolve('./framework-preset-polymer.js')],
 };

app/react/src/server/framework-preset-react.js

@@ -0,0 +1,9 @@
+import wrapBabelConfig from './wrapBabelConfig';
+
+function extendBabel(config) {
+  return wrapBabelConfig(config);
+}
+
+export default {
+  extendBabel,
+};

app/react/src/server/options.js

@@ -1,11 +1,10 @@
 import packageJson from '../../package.json';
 
-import wrapBabelConfig from './wrapBabelConfig';
 import wrapDefaultBabelConfig from './wrapDefaultBabelConfig';
 
 export default {
   packageJson,
   defaultConfigName: 'create-react-app',
+  frameworkPresets: [require.resolve('./framework-preset-react.js')],
   wrapDefaultBabelConfig,
-  wrapBabelConfig,
 };

app/svelte/src/server/framework-preset-svelte.js

@@ -1,4 +1,4 @@
-export default config => ({
+const extendWebpack = config => ({
   ...config,
   module: {
     ...config.module,
@@ -17,3 +17,7 @@ export default config => ({
     alias: config.resolve.alias,
   },
 });
+
+export default {
+  extendWebpack,
+};

app/svelte/src/server/options.js

@@ -1,8 +1,6 @@
 import packageJson from '../../package.json';
 
-import wrapInitialConfig from './wrapInitialConfig';
-
 export default {
   packageJson,
-  wrapInitialConfig,
+  frameworkPresets: [require.resolve('./framework-preset-svelte.js')],
 };

app/vue/src/server/framework-preset-vue.js

@@ -1,6 +1,6 @@
 const VueLoaderPlugin = require('vue-loader/lib/plugin');
 
-export default config => ({
+const extendWebpack = config => ({
   ...config,
   plugins: [...config.plugins, new VueLoaderPlugin()],
   module: {
@@ -23,3 +23,7 @@ export default config => ({
     },
   },
 });
+
+export default {
+  extendWebpack,
+};

app/vue/src/server/options.js

@@ -1,8 +1,6 @@
 import packageJson from '../../package.json';
 
-import wrapInitialConfig from './wrapInitialConfig';
-
 export default {
   packageJson,
-  wrapInitialConfig,
+  frameworkPresets: [require.resolve('./framework-preset-vue.js')],
 };

lib/core/src/server/build-static.js

@@ -7,8 +7,6 @@ import shelljs from 'shelljs';
 import { logger } from '@storybook/node-logger';
 import { parseList, getEnvConfig } from './utils';
 import './config/env';
-import getBaseConfig from './config/webpack.config.prod';
-import defaultBabelConfig from './config/babel.prod';
 import loadConfig from './config';
 
 const defaultFavIcon = require.resolve('./public/favicon.ico');
@@ -48,9 +46,8 @@ export function buildStatic({ packageJson, ...loadOptions }) {
   // NOTE changes to env should be done before calling `getBaseConfig`
   const config = loadConfig({
     configType: 'PRODUCTION',
-    getBaseConfig,
+    corePresets: [require.resolve('./core-preset-prod.js')],
     configDir,
-    defaultBabelConfig,
     ...loadOptions,
   });
   config.output.path = path.resolve(outputDir);

lib/core/src/server/config.js

@@ -1,11 +1,11 @@
+import path from 'path';
 import findCacheDir from 'find-cache-dir';
 import { logger } from '@storybook/node-logger';
 import { createDefaultWebpackConfig } from './config/defaults/webpack.config';
-import devBabelConfig from './config/babel';
-import loadCustomBabelConfig from './loadCustomBabelConfig';
 import loadCustomWebpackConfig from './loadCustomWebpackConfig';
 import loadPresets from './presets';
 import mergeConfigs from './mergeConfigs';
+import serverRequire from './serverRequire';
 
 const noopWrapper = config => config;
 
@@ -18,43 +18,38 @@ function informAboutCustomConfig(defaultConfigName) {
   logger.info(`=> Using default webpack setup based on "${defaultConfigName}".`);
 }
 
-function getBabelConfig(options, presets) {
-  const {
-    configDir,
-    defaultBabelConfig = devBabelConfig,
-    wrapDefaultBabelConfig = noopWrapper,
-    wrapBabelConfig = noopWrapper,
-  } = options;
+function customPreset({ configDir }) {
+  const presets = serverRequire(path.resolve(configDir, 'presets'));
+  return loadPresets(presets);
+}
 
-  const defaultConfig = wrapDefaultBabelConfig(defaultBabelConfig);
-  const customBabelConfig = loadCustomBabelConfig(configDir, defaultConfig);
-  const frameworkBabelConfig = wrapBabelConfig(customBabelConfig);
-  const presetBabelConfig = presets.extendBabel(frameworkBabelConfig);
+function getBabelConfig(options, corePresets, frameworkPresets, customPresets) {
+  const { configDir, wrapDefaultBabelConfig = noopWrapper } = options;
+
+  const coreBabelConfig = corePresets.extendBabel({}, { configDir, wrapDefaultBabelConfig });
+  const frameworkBabelConfig = frameworkPresets.extendBabel(coreBabelConfig);
+  const babelConfig = customPresets.extendBabel(frameworkBabelConfig);
 
   return {
     // This is a feature of `babel-loader` for webpack (not Babel itself).
     // It enables a cache directory for faster-rebuilds
     // `find-cache-dir` will create the cache directory under the node_modules directory.
     cacheDirectory: findCacheDir({ name: 'react-storybook' }),
-    ...presetBabelConfig,
+    ...babelConfig,
   };
 }
 
-function getWebpackConfig(options, babelOptions, presets) {
-  const {
-    configType,
-    getBaseConfig,
-    configDir,
-    defaultConfigName,
-    wrapInitialConfig = noopWrapper,
-    wrapBasicConfig = noopWrapper,
-    wrapDefaultConfig = noopWrapper,
-  } = options;
+function getWebpackConfig(options, babelOptions, corePresets, frameworkPresets, customPresets) {
+  const { configType, configDir, defaultConfigName } = options;
 
-  const baseConfig = getBaseConfig({ ...options, babelOptions, presets });
-  const initialConfig = wrapInitialConfig(baseConfig, configDir);
-  const config = presets.extendWebpack(initialConfig);
-  const defaultConfig = wrapDefaultConfig(createDefaultWebpackConfig(config));
+  const coreConfig = corePresets.extendWebpack(
+    {},
+    { ...options, babelOptions, presets: customPresets }
+  ); // core presets
+  const frameworkConfig = frameworkPresets.extendWebpack(coreConfig, { configDir }); // framework presets
+  const config = customPresets.extendWebpack(frameworkConfig); // custom presets
+
+  const defaultConfig = createDefaultWebpackConfig(config);
 
   // Check whether user has a custom webpack config file and
   // return the (extended) base configuration if it's not available.
@@ -67,7 +62,7 @@ function getWebpackConfig(options, babelOptions, presets) {
 
   if (typeof customConfig === 'function') {
     logger.info('=> Loading custom webpack config (full-control mode).');
-    return customConfig(wrapBasicConfig(config), configType, defaultConfig);
+    return customConfig(config, configType, defaultConfig);
   }
 
   logger.info('=> Loading custom webpack config (extending mode).');
@@ -76,9 +71,24 @@ function getWebpackConfig(options, babelOptions, presets) {
 }
 
 export default options => {
-  const { configDir } = options;
+  const { corePresets, frameworkPresets, ...restOptions } = options;
 
-  const presets = loadPresets(configDir);
-  const babelOptions = getBabelConfig(options, presets);
-  return getWebpackConfig(options, babelOptions, presets);
+  const loadedCorePresets = loadPresets(corePresets);
+  const loadedFrameworkPresets = loadPresets(frameworkPresets);
+  const loadedCustomPresets = customPreset(options);
+
+  const babelOptions = getBabelConfig(
+    restOptions,
+    loadedCorePresets,
+    loadedFrameworkPresets,
+    loadedCustomPresets
+  );
+
+  return getWebpackConfig(
+    restOptions,
+    babelOptions,
+    loadedCorePresets,
+    loadedFrameworkPresets,
+    loadedCustomPresets
+  );
 };

lib/core/src/server/core-preset-dev.js

@@ -0,0 +1,16 @@
+import loadCustomBabelConfig from './loadCustomBabelConfig';
+import createDevConfig from './config/webpack.config';
+import defaultBabelConfig from './config/babel';
+
+function extendWebpack(_, options) {
+  return createDevConfig(options);
+}
+
+function extendBabel(_, { configDir, wrapDefaultBabelConfig }) {
+  return loadCustomBabelConfig(configDir) || wrapDefaultBabelConfig(defaultBabelConfig);
+}
+
+export default {
+  extendWebpack,
+  extendBabel,
+};

lib/core/src/server/core-preset-prod.js

@@ -0,0 +1,16 @@
+import loadCustomBabelConfig from './loadCustomBabelConfig';
+import createProdConfig from './config/webpack.config.prod';
+import defaultBabelConfig from './config/babel.prod';
+
+function extendWebpack(_, options) {
+  return createProdConfig(options);
+}
+
+function extendBabel(_, { configDir, wrapDefaultBabelConfig }) {
+  return loadCustomBabelConfig(configDir) || wrapDefaultBabelConfig(defaultBabelConfig);
+}
+
+export default {
+  extendWebpack,
+  extendBabel,
+};

lib/core/src/server/loadCustomBabelConfig.js

@@ -43,7 +43,7 @@ function loadFromPath(babelConfigPath) {
   return config;
 }
 
-export default function(configDir, defaultConfig) {
+export default function(configDir) {
   let babelConfig = loadFromPath(path.resolve(configDir, '.babelrc'));
   let inConfigDir = true;
 
@@ -62,5 +62,5 @@ export default function(configDir, defaultConfig) {
     }
   }
 
-  return babelConfig || defaultConfig;
+  return babelConfig;
 }

lib/core/src/server/middleware.js

@@ -3,7 +3,6 @@ import { Router } from 'express';
 import webpack from 'webpack';
 import webpackDevMiddleware from 'webpack-dev-middleware';
 import webpackHotMiddleware from 'webpack-hot-middleware';
-import getBaseConfig from './config/webpack.config';
 import { getMiddleware } from './utils';
 import loadConfig from './config';
 
@@ -20,7 +19,7 @@ export default function(configDir, loadOptions, quiet) {
   // custom `.babelrc` file and `webpack.config.js` files
   const config = loadConfig({
     configType: 'DEVELOPMENT',
-    getBaseConfig,
+    corePresets: [require.resolve('./core-preset-dev.js')],
     configDir,
     quiet,
     ...loadOptions,

lib/core/src/server/presets.js

@@ -1,13 +1,20 @@
-import path from 'path';
 import { logger } from '@storybook/node-logger';
-import serverRequire from './serverRequire';
+
+function interopRequireDefault(filePath) {
+  // eslint-disable-next-line global-require,import/no-dynamic-require
+  const result = require(filePath);
+
+  const isES6DefaultExported =
+    typeof result === 'object' && result !== null && typeof result.default !== 'undefined';
+
+  return isES6DefaultExported ? result.default : result;
+}
 
 function loadPreset(preset) {
   try {
     if (typeof preset === 'string') {
       return {
-        // eslint-disable-next-line global-require,import/no-dynamic-require
-        preset: require(preset),
+        preset: interopRequireDefault(preset),
         options: {},
       };
     }
@@ -15,8 +22,7 @@ function loadPreset(preset) {
     const { name, options } = preset;
 
     return {
-      // eslint-disable-next-line global-require,import/no-dynamic-require
-      preset: require(name),
+      preset: interopRequireDefault(name),
       options,
     };
   } catch (e) {
@@ -35,7 +41,7 @@ function loadPresets(presets) {
   return presets.map(loadPreset).filter(preset => preset);
 }
 
-function applyPresets(presets, config, extension) {
+function applyPresets(presets, config, args = {}, extension) {
   if (!presets.length) {
     return config;
   }
@@ -44,22 +50,26 @@ function applyPresets(presets, config, extension) {
     const extensionFn = preset[extension];
 
     if (extensionFn && typeof extensionFn === 'function') {
-      return extensionFn.call(preset, accumulatedConfig, options);
+      const combinedOptions = {
+        ...args,
+        ...options,
+      };
+
+      return extensionFn.call(preset, accumulatedConfig, combinedOptions);
     }
 
     return accumulatedConfig;
   }, config);
 }
 
-function getPresets(configDir) {
-  const presets = serverRequire(path.resolve(configDir, 'presets'));
+function getPresets(presets) {
   const loadedPresets = loadPresets(presets);
 
   return {
-    extendBabel: config => applyPresets(loadedPresets, config, 'extendBabel'),
-    extendWebpack: config => applyPresets(loadedPresets, config, 'extendWebpack'),
-    extendPreview: config => applyPresets(loadedPresets, config, 'extendPreview'),
-    extendManager: config => applyPresets(loadedPresets, config, 'extendManager'),
+    extendBabel: (config, args) => applyPresets(loadedPresets, config, args, 'extendBabel'),
+    extendWebpack: (config, args) => applyPresets(loadedPresets, config, args, 'extendWebpack'),
+    extendPreview: (config, args) => applyPresets(loadedPresets, config, args, 'extendPreview'),
+    extendManager: (config, args) => applyPresets(loadedPresets, config, args, 'extendManager'),
   };
 }