[WIP] Refactor core and frameworks to work with 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,54 @@
+import path from 'path';
+import { ContextReplacementPlugin } from 'webpack';
+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'],
+    },
+    plugins: [
+      ...config.plugins,
+      // See https://github.com/angular/angular/issues/11580#issuecomment-401127742
+      new ContextReplacementPlugin(
+        /@angular(\\|\/)core(\\|\/)fesm5/,
+        path.resolve(__dirname, '..')
+      ),
+    ],
+  };
+}
+
+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/html/src/server/wrapInitialConfig.js → 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/wrapInitialConfig.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/mithril/src/server/framework-preset-mithril.js

@@ -0,0 +1,13 @@
+import { mergeBabel } from '@storybook/core/server';
+
+function extendBabel(config) {
+  const patch = {
+    plugins: [require.resolve('@babel/plugin-transform-react-jsx')],
+  };
+
+  return mergeBabel(patch, config);
+}
+
+export default {
+  extendBabel,
+};

app/mithril/src/server/options.js

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

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

@@ -1,6 +1,6 @@
 import { IgnorePlugin } from 'webpack';
 
-export default config => ({
+const extendWebpack = config => ({
   ...config,
   module: {
     ...config.module,
@@ -24,3 +24,7 @@ export default config => ({
     new IgnorePlugin(/^vertx$/),
   ],
 });
+
+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/wrapBabelConfig.js → app/react/src/server/framework-preset-react-docgen.js

@@ -1,4 +1,4 @@
-export default function(config) {
+function extendBabel(config) {
   // Ensure plugins are defined or fallback to an array to avoid empty values.
   const babelConfigPlugins = config.plugins || [];
 
@@ -18,3 +18,7 @@ export default function(config) {
     plugins: [].concat(babelConfigPlugins, extraPlugins),
   };
 }
+
+export default {
+  extendBabel,
+};

app/react/src/server/wrapBabelConfig.test.js → app/react/src/server/framework-preset-react-docgen.test.js

@@ -1,6 +1,6 @@
-import wrapBabelConfig from './wrapBabelConfig';
+import preset from './framework-preset-react-docgen';
 
-describe('babel_config', () => {
+describe('framework-preset-react-docgen', () => {
   const babelPluginReactDocgenPath = require.resolve('babel-plugin-react-docgen');
 
   it('should return the config with the extra plugins when `plugins` is an array.', () => {
@@ -10,7 +10,7 @@ describe('babel_config', () => {
       plugins: ['foo-plugin'],
     };
 
-    const config = wrapBabelConfig(babelConfig);
+    const config = preset.extendBabel(babelConfig);
 
     expect(config).toEqual({
       babelrc: false,
@@ -34,7 +34,7 @@ describe('babel_config', () => {
       plugins: 'bar-plugin',
     };
 
-    const config = wrapBabelConfig(babelConfig);
+    const config = preset.extendBabel(babelConfig);
 
     expect(config).toEqual({
       babelrc: false,
@@ -57,7 +57,7 @@ describe('babel_config', () => {
       presets: ['env', 'foo-preset'],
     };
 
-    const config = wrapBabelConfig(babelConfig);
+    const config = preset.extendBabel(babelConfig);
 
     expect(config).toEqual({
       babelrc: false,

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

@@ -0,0 +1,13 @@
+import { mergeBabel } from '@storybook/core/server';
+
+function extendBabel(config) {
+  const patch = {
+    presets: [require.resolve('@babel/preset-react'), require.resolve('@babel/preset-flow')],
+  };
+
+  return mergeBabel(patch, 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',
-  wrapDefaultBabelConfig,
-  wrapBabelConfig,
+  frameworkPresets: [
+    require.resolve('./framework-preset-react.js'),
+    require.resolve('./framework-preset-react-docgen.js'),
+  ],
 };

app/riot/src/server/wrapInitialConfig.js → app/riot/src/server/framework-preset-riot.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/riot/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-riot.js')],
 };

app/svelte/src/server/wrapInitialConfig.js → 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')],
 };