Presets / Addon-docs: Cleanup framework-specific presets (#8782)

Presets / Addon-docs: Cleanup framework-specific presets

MIGRATION.md

@@ -5,6 +5,7 @@
     - [Create React App preset](#create-react-app-preset)
     - [Description doc block](#description-doc-block)
     - [React Native Async Storage](#react-native-async-storage)
+    - [Unified docs preset](#unified-docs-preset)
   - [From version 5.1.x to 5.2.x](#from-version-51x-to-52x)
     - [Source-loader](#source-loader)
     - [Default viewports](#default-viewports)
@@ -108,6 +109,10 @@ getStorybookUI({
 });
 ```
 
+### Unified docs preset
+
+Addon-docs configuration gets simpler in 5.3. In 5.2, each framework had its own preset, e.g. `@storybook/addon-docs/react/preset`. Starting in 5.3, everybody should use `@storybook/addon-docs/preset`.
+
 ## From version 5.1.x to 5.2.x
 
 ### Source-loader

addons/docs/package.json

@@ -57,7 +57,8 @@
     "lodash": "^4.17.15",
     "prop-types": "^15.7.2",
     "storybook-addon-vue-info": "^1.2.1",
-    "ts-dedent": "^1.1.0"
+    "ts-dedent": "^1.1.0",
+    "util-deprecate": "^1.0.2"
   },
   "devDependencies": {
     "@types/doctrine": "^0.0.3",

addons/docs/preset.js

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

addons/docs/src/frameworks/common/makePreset.ts

@@ -1,25 +1,17 @@
-import fs from 'fs';
-import * as common from './preset';
+import deprecate from 'util-deprecate';
+import dedent from 'ts-dedent';
+import * as common from '../../preset';
 
 const makePreset = (framework: string) => {
-  const docsConfig = [`${__dirname}/config.js`];
-  const frameworkConfig = `${__dirname}/../../../dist/frameworks/${framework}/config.js`;
-  if (fs.existsSync(frameworkConfig)) {
-    docsConfig.push(frameworkConfig);
-  }
-  function config(entry: any[] = []) {
-    return [...docsConfig, ...entry];
-  }
+  deprecate(
+    () => {},
+    dedent`
+    Framework-specific presets are no longer-needed as of Storybook 5.3 and will be removed in 6.0.
 
-  const configureJSX = framework !== 'react';
-  const webpack = (webpackConfig: any, options: any) =>
-    common.webpack(webpackConfig, { configureJSX, ...options });
-
-  return {
-    ...common,
-    webpack,
-    config,
-  };
+    Please use '@storybook/addon-docs/preset' instead of '@storybook/addon-docs/${framework}/preset'.
+  `
+  )();
+  return common;
 };
 
 export default makePreset;

addons/docs/src/frameworks/common/preset.ts

@@ -20,7 +20,11 @@ export function webpack(webpackConfig: any = {}, options: any = {}) {
   const { module = {} } = webpackConfig;
   // it will reuse babel options that are already in use in storybook
   // also, these babel options are chained with other presets.
-  const { babelOptions, configureJSX, sourceLoaderOptions = {} } = options;
+  const {
+    babelOptions,
+    configureJSX = options.framework !== 'react', // if not user-specified
+    sourceLoaderOptions = {},
+  } = options;
 
   // set `sourceLoaderOptions` to `null` to disable for manual configuration
   const sourceLoader = sourceLoaderOptions
@@ -34,7 +38,7 @@ export function webpack(webpackConfig: any = {}, options: any = {}) {
       ]
     : [];
 
-  return {
+  const result = {
     ...webpackConfig,
     module: {
       ...module,
@@ -72,8 +76,20 @@ export function webpack(webpackConfig: any = {}, options: any = {}) {
       ],
     },
   };
+  return result;
 }
 
-export function addons(entry: any[] = []) {
+export function addons(entry: any[] = [], options: any) {
   return [...entry, require.resolve('../../register')];
 }
+
+export function config(entry: any[] = [], options: any = {}) {
+  const { framework } = options;
+  const docsConfig = [require.resolve('./config')];
+  try {
+    docsConfig.push(require.resolve(`../${framework}/config`));
+  } catch (err) {
+    // there is no custom config for the user's framework, do nothing
+  }
+  return [...docsConfig, ...entry];
+}

addons/docs/src/frameworks/vue/preset.ts

@@ -0,0 +1,8 @@
+export function webpack(webpackConfig: any = {}, options: any = {}) {
+  webpackConfig.module.rules.push({
+    test: /\.vue$/,
+    loader: 'storybook-addon-vue-info/loader',
+    enforce: 'post',
+  });
+  return webpackConfig;
+}

addons/docs/src/preset.ts

@@ -0,0 +1,57 @@
+import * as commonPreset from './frameworks/common/preset';
+
+// Map a framework to a preset file that gets executed
+type Preset = any;
+type FrameworkPresetMapper = (framework: string) => string | void;
+
+const PRESET_METHODS = [
+  'babel',
+  'babelDefault',
+  'managerBabel',
+  'webpack',
+  'webpackFinal',
+  'managerWebpack',
+  'addons',
+  'entries',
+  'config',
+];
+
+function getFrameworkPreset(frameworkPresetFile: string): Preset {
+  // eslint-disable-next-line import/no-dynamic-require, global-require
+  return require(frameworkPresetFile);
+}
+
+// Create a composite preset that applies the base preset &
+// appends any framework-specific extensions as needed
+function withFrameworkExtensions(basePreset: Preset, mapper: FrameworkPresetMapper): Preset {
+  const extended: Preset = {};
+  PRESET_METHODS.forEach(method => {
+    extended[method] = (existing: any, options: any) => {
+      let updated = existing;
+
+      const baseMethod = basePreset[method];
+      if (baseMethod) {
+        updated = baseMethod(updated, options);
+      }
+
+      const frameworkPresetFile = mapper(options.framework);
+      if (frameworkPresetFile) {
+        const frameworkPreset = getFrameworkPreset(frameworkPresetFile);
+        const frameworkMethod = frameworkPreset[method];
+        if (frameworkMethod) updated = frameworkMethod(updated, options);
+      }
+
+      return updated;
+    };
+  });
+  return extended;
+}
+
+module.exports = withFrameworkExtensions(commonPreset, framework => {
+  try {
+    return require.resolve(`./frameworks/${framework}/preset`);
+  } catch (err) {
+    // there is no custom config for the user's framework, do nothing
+    return null;
+  }
+});

addons/docs/src/typings.d.ts

@@ -1,5 +1,6 @@
 declare module '@mdx-js/react';
 declare module '@storybook/addon-docs/mdx-compiler-plugin';
+declare module '@storybook/addon-docs/blocks';
 declare module 'global';
 declare module 'react-is';
 declare module '@egoist/vue-to-react';

addons/docs/vue/preset.js

@@ -1,16 +1 @@
-const commonExports = require('../dist/frameworks/common/makePreset').default('vue');
-
-const webpack = (webpackConfig, options) => {
-  const config = commonExports.webpack(webpackConfig, options);
-  config.module.rules.push({
-    test: /\.vue$/,
-    loader: 'storybook-addon-vue-info/loader',
-    enforce: 'post',
-  });
-  return config;
-};
-
-module.exports = {
-  ...commonExports,
-  webpack,
-};
+module.exports = require('../dist/frameworks/common/makePreset').default('vue');

app/angular/src/server/options.ts

@@ -3,6 +3,7 @@ const packageJson = require('../../package.json');
 
 export default {
   packageJson,
+  framework: 'angular',
   frameworkPresets: [
     require.resolve('./framework-preset-angular.js'),
     require.resolve('./framework-preset-angular-cli.js'),

app/ember/src/server/options.js

@@ -2,5 +2,6 @@ import packageJson from '../../package.json';
 
 export default {
   packageJson,
+  framework: 'ember',
   frameworkPresets: [require.resolve('./framework-preset-babel-ember.js')],
 };

app/html/src/server/options.ts

@@ -3,5 +3,6 @@ const packageJson = require('../../package.json');
 
 export default {
   packageJson,
+  framework: 'html',
   frameworkPresets: [require.resolve('./framework-preset-html.js')],
 };

app/marko/src/server/options.js

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

app/mithril/src/server/options.ts

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

app/polymer/src/server/options.js

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

app/preact/src/server/options.ts

@@ -2,5 +2,6 @@ const packageJson = require('../../package.json');
 
 export default {
   packageJson,
+  framework: 'preact',
   frameworkPresets: [require.resolve('./framework-preset-preact.js')],
 };

app/rax/src/server/options.js

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

app/react-native-server/src/server/options.js

@@ -7,6 +7,7 @@ function extendOptions(options, extendServer) {
 
   return {
     ...options,
+    framework: 'react-native',
     extendServer,
     packageJson,
     mode: 'dev',

app/react/src/server/options.ts

@@ -2,6 +2,7 @@ const packageJson = require('../../package.json');
 
 export default {
   packageJson,
+  framework: 'react',
   frameworkPresets: [
     require.resolve('./framework-preset-react.js'),
     require.resolve('./framework-preset-cra.js'),

app/riot/src/server/options.js

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

app/svelte/src/server/options.js

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

app/vue/src/server/options.ts

@@ -2,5 +2,6 @@ const packageJson = require('../../package.json');
 
 export default {
   packageJson,
+  framework: 'vue',
   frameworkPresets: [require.resolve('./framework-preset-vue.js')],
 };

app/web-components/src/server/options.ts

@@ -3,5 +3,6 @@ const packageJson = require('../../package.json');
 
 export default {
   packageJson,
+  framework: 'web-components',
   frameworkPresets: [require.resolve('./framework-preset-web-components.js')],
 };

examples/angular-cli/.storybook/presets.js

@@ -1 +1 @@
-module.exports = ['@storybook/addon-docs/angular/preset'];
+module.exports = ['@storybook/addon-docs/preset'];

examples/html-kitchen-sink/.storybook/presets.js

@@ -1 +1 @@
-module.exports = ['@storybook/addon-docs/html/preset'];
+module.exports = ['@storybook/addon-docs/preset'];

examples/official-storybook/main.js

@@ -1,10 +1,9 @@
 module.exports = {
-  presets: ['@storybook/addon-docs/react/preset'],
+  presets: ['@storybook/addon-docs/preset'],
   addons: existing => [
     ...existing,
     '@storybook/addon-storysource/register',
     '@storybook/addon-design-assets/register',
-    '@storybook/addon-docs/register',
     '@storybook/addon-actions/register',
     '@storybook/addon-links/register',
     '@storybook/addon-events/register',

examples/vue-kitchen-sink/.storybook/presets.js

@@ -1 +1 @@
-module.exports = ['@storybook/addon-docs/vue/preset'];
+module.exports = ['@storybook/addon-docs/preset'];