Remove reactOptions & angularOptions

storybookjs · Apr 26, 2022 · 5e160ee · 5e160ee
1 parent 3c49831
commit 5e160ee
Show file tree

Hide file tree

Showing 12 changed files with 100 additions and 78 deletions.
diff --git a/MIGRATION.md b/MIGRATION.md
@@ -3,6 +3,7 @@
 - [From version 6.5.x to 7.0.0](#from-version-65x-to-700)
   - [Breaking changes](#breaking-changes)
     - [Framework field mandatory](#framework-field-mandatory)
+    - [frameworkOptions renamed](#frameworkoptions-renamed)
 - [From version 6.4.x to 6.5.0](#from-version-64x-to-650)
   - [React18 new root API](#react18-new-root-api)
   - [Deprecated register.js](#deprecated-registerjs)
@@ -209,6 +210,19 @@
 
 In 6.4 we introduced a new `main.js` field called [`framework`](#mainjs-framework-field). Starting in 7.0, this field is mandatory.
 
+#### frameworkOptions renamed
+
+In 7.0, the `main.js` fields `reactOptions` and `angularOptions` have been renamed. They are now options on the `framework` field:
+
+```js
+module.exports = {
+  framework: {
+    name: '@storybook/react',
+    options: { fastRefresh: true };
+  }
+}
+```
+
 ## From version 6.4.x to 6.5.0
 
 ### React18 new root API

diff --git a/app/angular/src/server/framework-preset-angular-ivy.ts b/app/angular/src/server/framework-preset-angular-ivy.ts
@@ -1,7 +1,9 @@
 import { Configuration } from 'webpack';
 import * as path from 'path';
+import type { Preset } from '@storybook/core-common';
 
 import type { PresetOptions } from './preset-options';
+import type { AngularOptions } from '../types';
 
 /**
  * Source : https://github.com/angular/angular-cli/blob/ebccb5de4a455af813c5e82483db6af20666bdbd/packages/angular_devkit/build_angular/src/utils/load-esm.ts#L23
@@ -48,13 +50,8 @@ export const runNgcc = async () => {
 };
 
 export const webpack = async (webpackConfig: Configuration, options: PresetOptions) => {
-  const angularOptions = await options.presets.apply(
-    'angularOptions',
-    {} as {
-      enableIvy?: boolean;
-    },
-    options
-  );
+  const framework = await options.presets.apply<Preset>('framework');
+  const angularOptions = (typeof framework === 'object' ? framework.options : {}) as AngularOptions;
 
   // Default to true, if undefined
   if (angularOptions.enableIvy === false) {

diff --git a/app/angular/src/types/index.ts b/app/angular/src/types/index.ts
@@ -1,7 +1,17 @@
 import type { StorybookConfig as BaseConfig } from '@storybook/core-common';
 
+export interface AngularOptions {
+  enableIvy: boolean;
+}
+
+/**
+ * The interface for Storybook configuration in `main.ts` files.
+ */
 export interface StorybookConfig extends BaseConfig {
-  angularOptions?: {
-    enableIvy: boolean;
-  };
+  framework:
+    | string
+    | {
+        name: '@storybook/angular';
+        options: AngularOptions;
+      };
 }
diff --git a/app/react/src/server/framework-preset-react.ts b/app/react/src/server/framework-preset-react.ts
@@ -4,23 +4,18 @@ import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
 import type { Configuration } from 'webpack';
 
 import { logger } from '@storybook/node-logger';
-import type { Options } from '@storybook/core-common';
+import type { Options, Preset } from '@storybook/core-common';
+import type { ReactOptions } from '../types';
 
-export async function babel(config: TransformOptions, options: Options) {
+const useFastRefresh = async (options: Options) => {
   const isDevelopment = options.configType === 'DEVELOPMENT';
-  const reactOptions = await options.presets.apply(
-    'reactOptions',
-    {} as {
-      fastRefresh?: boolean;
-    },
-    options
-  );
-  const fastRefreshEnabled =
-    isDevelopment && (reactOptions.fastRefresh || process.env.FAST_REFRESH === 'true');
+  const framework = await options.presets.apply<Preset>('framework');
+  const reactOptions = (typeof framework === 'object' ? framework.options : {}) as ReactOptions;
+  return isDevelopment && (reactOptions.fastRefresh || process.env.FAST_REFRESH === 'true');
+};
 
-  if (!fastRefreshEnabled) {
-    return config;
-  }
+export async function babel(config: TransformOptions, options: Options) {
+  if (!(await useFastRefresh(options))) return config;
 
   return {
     ...config,
@@ -59,20 +54,8 @@ export async function babelDefault(config: TransformOptions): Promise<TransformO
 }
 
 export async function webpackFinal(config: Configuration, options: Options) {
-  const isDevelopment = options.configType === 'DEVELOPMENT';
-  const reactOptions = await options.presets.apply(
-    'reactOptions',
-    {} as {
-      fastRefresh?: boolean;
-    },
-    options
-  );
-  const fastRefreshEnabled =
-    isDevelopment && (reactOptions.fastRefresh || process.env.FAST_REFRESH === 'true');
+  if (!(await useFastRefresh(options))) return config;
 
-  if (!fastRefreshEnabled) {
-    return config;
-  }
   // matches the name of the plugin in CRA.
   const hasReactRefresh = config.plugins.find((p) => p.constructor.name === 'ReactRefreshPlugin');
 

diff --git a/app/react/src/types/index.ts b/app/react/src/types/index.ts
@@ -0,0 +1,26 @@
+import type { StorybookConfig as BaseConfig } from '@storybook/core-common';
+
+export interface ReactOptions {
+  fastRefresh?: boolean;
+  strictMode?: boolean;
+  /**
+   * Use React's legacy root API to mount components
+   * @description
+   * React has introduced a new root API with React 18.x to enable a whole set of new features (e.g. concurrent features)
+   * If this flag is true, the legacy Root API is used to mount components to make it easier to migrate step by step to React 18.
+   * @default false
+   */
+  legacyRootApi?: boolean;
+}
+
+/**
+ * The interface for Storybook configuration in `main.ts` files.
+ */
+export interface StorybookConfig extends BaseConfig {
+  framework:
+    | string
+    | {
+        name: '@storybook/react';
+        options: ReactOptions;
+      };
+}
diff --git a/app/react/types.d.ts b/app/react/types.d.ts
@@ -0,0 +1 @@
+export * from './dist/ts3.9/types/index.d';
diff --git a/app/react/types/index.ts b/app/react/types/index.ts
diff --git a/app/vue3/package.json b/app/vue3/package.json
@@ -30,7 +30,6 @@
     }
   },
   "files": [
-    "bin/**/*",
     "dist/**/*",
     "README.md",
     "*.js",

diff --git a/docs/faq.md b/docs/faq.md
@@ -16,8 +16,11 @@ module.exports = {
   addons: [
     /* ... */
   ],
-  angularOptions: {
-    enableIvy: false,
+  framework: {
+    name: '@storybook/angular',
+    options: {
+      enableIvy: false,
+    },
   },
 };
 ```
@@ -73,8 +76,11 @@ FAST_REFRESH=true
 
 ```js
 module.exports = {
-  reactOptions: {
-    fastRefresh: true,
+  framework: {
+    name: '@storybook/react',
+    options: {
+      fastRefresh: true,
+    },
   },
 };
 ```
@@ -145,8 +151,8 @@ With the release of version 6.0, we updated our documentation as well. That does
 
 We're only covering versions 5.3 and 5.0 as they were important milestones for Storybook. If you want to go back in time a little more, you'll have to check the specific release in the monorepo.
 
-| Section          | Page                                      | Current Location                                                                   | Version 5.3 location                                                                                                                                                                                                                                                 | Version 5.0 location                                                                                                                                     |
-|------------------|-------------------------------------------|------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------|
+| Section          | Page                                      | Current Location                                                                  | Version 5.3 location                                                                                                                                                                                                                                                 | Version 5.0 location                                                                                                                                     |
+| ---------------- | ----------------------------------------- | --------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | Get started      | Install                                   | [See current documentation](./get-started/install.md)                             | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides/quick-start-guide)                                                                                                                                     | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/guides/quick-start-guide)                         |
 |                  | What's a story                            | [See current documentation](./get-started/whats-a-story.md)                       | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/blob/release/5.3/docs/src/pages/guides)                                                                                                                                    | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/blob/release/5.0/docs/src/pages/guides)                        |
 |                  | Browse Stories                            | [See current documentation](./get-started/browse-stories.md)                      | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/blob/release/5.3/docs/src/pages/guides)                                                                                                                                    | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/blob/release/5.0/docs/src/pages/guides)                        |
@@ -161,7 +167,7 @@ We're only covering versions 5.3 and 5.0 as they were important milestones for S
 |                  | MDX                                       | [See current documentation](./writing-docs/mdx.md)                                | See versioned addon documentation                                                                                                                                                                                                                                    | Non existing feature or undocumented                                                                                                                     |
 |                  | Doc Blocks/Argstable                      | [See current documentation](./writing-docs/doc-block-argstable.md)                | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/)                                                                                                                                                          | Non existing feature or undocumented                                                                                                                     |
 |                  | Doc Blocks/Canvas                         | [See current documentation](./writing-docs/doc-block-canvas.md)                   | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/)                                                                                                                                                          | Non existing feature or undocumented                                                                                                                     |
-|                  | Doc Blocks/Color Palette                  | [See current documentation](./writing-docs/doc-block-colorpalette.md)                          | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/)                                                                                                                                                          | Non existing feature or undocumented                                                                                                                     |
+|                  | Doc Blocks/Color Palette                  | [See current documentation](./writing-docs/doc-block-colorpalette.md)             | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/)                                                                                                                                                          | Non existing feature or undocumented                                                                                                                     |
 |                  | Doc Blocks/Description                    | [See current documentation](./writing-docs/doc-block-description.md)              | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/)                                                                                                                                                          | Non existing feature or undocumented                                                                                                                     |
 |                  | Doc Blocks/Icon Gallery                   | [See current documentation](./writing-docs/doc-block-icongallery.md)              | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/)                                                                                                                                                          | Non existing feature or undocumented                                                                                                                     |
 |                  | Doc Blocks/Source                         | [See current documentation](./writing-docs/doc-block-source.md)                   | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/)                                                                                                                                                          | Non existing feature or undocumented                                                                                                                     |
@@ -203,9 +209,10 @@ We're only covering versions 5.3 and 5.0 as they were important milestones for S
 |                  | Addons API                                | [See current documentation](./addons/addons-api.md)                               | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/api)                                                                                                                                                   | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/api)                                       |
 | API              | Stories/Component Story Format            | [See current documentation](./api/csf.md)                                         | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/component-story-format)                                                                                                                               | Non existing feature or undocumented                                                                                                                     |
 |                  | Stories/MDX syntax                        | [See current documentation](./api/mdx.md)                                         | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/mdx-syntax)                                                                                                                                           | Non existing feature or undocumented                                                                                                                     |
-|                  | Stories/StoriesOF format (see note below) | [See current documentation](../lib/core/docs/storiesOf.md)                      | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/storiesof-api)                                                                                                                                        | Non existing feature or undocumented                                                                                                                     |
+|                  | Stories/StoriesOF format (see note below) | [See current documentation](../lib/core/docs/storiesOf.md)                        | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/storiesof-api)                                                                                                                                        | Non existing feature or undocumented                                                                                                                     |
 |                  | Frameworks                                | [See current documentation](./api/new-frameworks.md)                              | Non existing feature or undocumented                                                                                                                                                                                                                                 | Non existing feature or undocumented                                                                                                                     |
 |                  | CLI options                               | [See current documentation](./api/cli-options.md)                                 | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/cli-options)                                                                                                                                   | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/cli-options)                       |
+
 <div class="aside">
 With the release of version 5.3, we've updated how you can write your stories more compactly and easily. It doesn't mean that the <code>storiesOf</code> format has been removed. For the time being, we're still supporting it, and we have documentation for it. But be advised that this is bound to change in the future.
 </div>

diff --git a/examples/angular-cli/.storybook/main.js b/examples/angular-cli/.storybook/main.js
@@ -17,9 +17,6 @@ module.exports = {
   core: {
     builder: 'webpack4',
   },
-  angularOptions: {
-    enableIvy: true,
-  },
   // These are just here to test composition. They could be added to any storybook example project
   refs: {
     react: {
@@ -44,5 +41,10 @@ module.exports = {
     buildStoriesJson: true,
     breakingChangesV7: true,
   },
-  framework: '@storybook/angular',
+  framework: {
+    name: '@storybook/angular',
+    options: {
+      enableIvy: true,
+    },
+  },
 };