Merge branch 'next' into fix-prepare-bundle-on-windows

MIGRATION.md

@@ -20,9 +20,9 @@
     - [7.0 feature flags removed](#70-feature-flags-removed)
     - [Vite builder uses vite config automatically](#vite-builder-uses-vite-config-automatically)
     - [Removed docs.getContainer and getPage parameters](#removed-docsgetcontainer-and-getpage-parameters)
+    - [Removed STORYBOOK_REACT_CLASSES global](#removed-storybook_react_classes-global)
     - [Icons API changed](#icons-api-changed)
     - ['config' preset entry replaced with 'previewAnnotations'](#config-preset-entry-replaced-with-previewannotations)
-    - [Vue2 DOM structure changed](#vue2-dom-structure-changed)
   - [Docs Changes](#docs-changes)
     - [Standalone docs files](#standalone-docs-files)
     - [Referencing stories in docs files](#referencing-stories-in-docs-files)
@@ -530,6 +530,10 @@ If you were using `viteFinal` in 6.5 to simply merge in your project's standard
 
 It is no longer possible to set `parameters.docs.getContainer()` and `getPage()`. Instead use `parameters.docs.container` or `parameters.docs.page` directly.
 
+#### Removed STORYBOOK_REACT_CLASSES global
+
+This was a legacy global variable from the early days of react docgen.  If you were using this variable, you can instead use docgen information which is added directly to components using `.__docgenInfo`.
+
 #### Icons API changed
 
 For addon authors who use the `Icons` component, its API has been updated in Storybook 7.

code/addons/interactions/package.json

@@ -76,6 +76,7 @@
   "devDependencies": {
     "@storybook/jest": "^0.0.10",
     "@storybook/testing-library": "0.0.14-next.0",
+    "@types/node": "^14.14.20 || ^16.0.0",
     "formik": "^2.2.9",
     "typescript": "~4.6.3"
   },

code/addons/interactions/src/preset/preview.ts

@@ -1,3 +1,5 @@
+/// <reference types="node" />
+
 import { addons } from '@storybook/addons';
 import { FORCE_REMOUNT, STORY_RENDER_PHASE_CHANGED } from '@storybook/core-events';
 import type {

code/addons/storyshots/storyshots-core/src/api/index.ts

@@ -7,7 +7,6 @@ import loadFramework from '../frameworks/frameworkLoader';
 import { StoryshotsOptions } from './StoryshotsOptions';
 
 const { describe, window: globalWindow } = global;
-global.STORYBOOK_REACT_CLASSES = global.STORYBOOK_REACT_CLASSES || {};
 
 type TestMethod = 'beforeAll' | 'beforeEach' | 'afterEach' | 'afterAll';
 const methods: TestMethod[] = ['beforeAll', 'beforeEach', 'afterEach', 'afterAll'];

code/frameworks/angular/package.json

@@ -87,6 +87,7 @@
     "@nrwl/workspace": "14.6.1",
     "@types/autoprefixer": "^9.7.2",
     "@types/tmp": "^0.2.3",
+    "@types/webpack-env": "^1.16.0",
     "cross-spawn": "^7.0.3",
     "jest": "^27.5.1",
     "jest-preset-angular": "^12.0.0",

code/frameworks/angular/src/client/index.ts

@@ -1,3 +1,5 @@
+/// <reference types="webpack-env" />
+
 import './globals';
 
 export * from './public-api';

code/frameworks/angular/src/server/framework-preset-angular-cli.test.ts

@@ -786,7 +786,6 @@ const newWebpackConfiguration = (
     devtool: 'cheap-module-source-map',
     entry: [
       '/Users/joe/storybook/lib/core-server/dist/esm/globals/polyfills.js',
-      '/Users/joe/storybook/lib/core-server/dist/esm/globals/globals.js',
       '/Users/joe/storybook/examples/angular-cli/.storybook/storybook-init-framework-entry.js',
       '/Users/joe/storybook/addons/docs/dist/esm/frameworks/common/config.js-generated-other-entry.js',
       '/Users/joe/storybook/addons/docs/dist/esm/frameworks/angular/config.js-generated-other-entry.js',

code/frameworks/ember/src/index.ts

@@ -1,3 +1,5 @@
+/// <reference types="webpack-env" />
+
 export {
   storiesOf,
   setAddon,

code/lib/addons/src/main.ts

@@ -1,4 +1,5 @@
 import global from 'global';
+
 import type { ReactElement } from 'react';
 import { Channel } from '@storybook/channels';
 import { SET_CONFIG } from '@storybook/core-events';

code/lib/addons/src/types.ts

@@ -197,7 +197,7 @@ export interface StoryApi<StoryFnReturnType = unknown> {
 }
 
 export interface ClientStoryApi<StoryFnReturnType = unknown> {
-  storiesOf(kind: StoryKind, module: NodeModule): StoryApi<StoryFnReturnType>;
+  storiesOf(kind: StoryKind, module: any): StoryApi<StoryFnReturnType>;
   addDecorator(decorator: DecoratorFunction<StoryFnReturnType>): StoryApi<StoryFnReturnType>;
   addParameters(parameter: Parameters): StoryApi<StoryFnReturnType>;
 }

code/lib/api/package.json

@@ -18,9 +18,22 @@
     "url": "https://opencollective.com/storybook"
   },
   "license": "MIT",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./shortcut": {
+      "require": "./dist/shortcut.js",
+      "import": "./dist/shortcut.mjs",
+      "types": "./dist/shortcut.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
     "README.md",
@@ -29,7 +42,7 @@
   ],
   "scripts": {
     "check": "../../../scripts/node_modules/.bin/tsc --noEmit",
-    "prep": "node ../../../scripts/prepare.js"
+    "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
     "@storybook/channels": "7.0.0-alpha.34",
@@ -64,5 +77,11 @@
   "publishConfig": {
     "access": "public"
   },
+  "bundler": {
+    "entries": [
+      "./src/index.tsx",
+      "./src/shortcut.ts"
+    ]
+  },
   "gitHead": "fc90fc875462421c1faa35862ac4bc436de8e75f"
 }

code/lib/api/shortcut.js

@@ -1 +1 @@
-export * from './dist/esm/lib/shortcut';
+export * from './dist/shortcut';

code/lib/api/src/shortcut.ts

@@ -0,0 +1 @@
+export * from './lib/shortcut';

code/lib/client-api/package.json

@@ -20,9 +20,17 @@
   },
   "license": "MIT",
   "sideEffects": false,
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
     "README.md",
@@ -31,7 +39,7 @@
   ],
   "scripts": {
     "check": "../../../scripts/node_modules/.bin/tsc --noEmit",
-    "prep": "node ../../../scripts/prepare.js"
+    "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
     "@storybook/addons": "7.0.0-alpha.34",
@@ -57,5 +65,10 @@
   "publishConfig": {
     "access": "public"
   },
+  "bundler": {
+    "entries": [
+      "./src/index.ts"
+    ]
+  },
   "gitHead": "fc90fc875462421c1faa35862ac4bc436de8e75f"
 }

code/lib/client-api/src/index.ts

@@ -11,6 +11,8 @@ import {
   setGlobalRender,
 } from './ClientApi';
 
+export type { GetStorybookKind, GetStorybookStory } from './ClientApi';
+
 export * from './types';
 
 export * from './queryparams';

code/lib/core-client/package.json

@@ -19,19 +19,20 @@
     "url": "https://opencollective.com/storybook"
   },
   "license": "MIT",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/types/index.d.ts",
-  "files": [
-    "dist/**/*",
-    "dll/**/*",
-    "types/**/*",
-    "*.js",
-    "*.d.ts"
-  ],
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
   "scripts": {
     "check": "../../../scripts/node_modules/.bin/tsc --noEmit",
-    "prep": "node ../../../scripts/prepare.js"
+    "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
     "@storybook/addons": "7.0.0-alpha.34",
@@ -59,5 +60,10 @@
   "publishConfig": {
     "access": "public"
   },
+  "bundler": {
+    "entries": [
+      "./src/index.ts"
+    ]
+  },
   "gitHead": "fc90fc875462421c1faa35862ac4bc436de8e75f"
 }

code/lib/core-client/src/globals/globals.ts

@@ -1,5 +0,0 @@
-import global from 'global';
-
-const { window: globalWindow } = global;
-
-globalWindow.STORYBOOK_REACT_CLASSES = {};

code/lib/core-client/src/preview/executeLoadable.ts

@@ -1,3 +1,6 @@
+/// <reference types="node" />
+/// <reference types="webpack-env" />
+
 import { logger } from '@storybook/client-logger';
 import { Path, ModuleExports } from '@storybook/store';
 import { Loadable, RequireContext, LoaderFunction } from './types';

code/lib/core-client/src/preview/start.ts

@@ -5,7 +5,7 @@ import { PreviewWeb } from '@storybook/preview-web';
 import type { AnyFramework, ArgsStoryFn } from '@storybook/csf';
 import { createChannel } from '@storybook/channel-postmessage';
 import { addons } from '@storybook/addons';
-import Events from '@storybook/core-events';
+import { FORCE_RE_RENDER } from '@storybook/core-events';
 import type { Path, WebProjectAnnotations } from '@storybook/store';
 
 import { Loadable } from './types';
@@ -24,16 +24,45 @@ const removedApi = (name: string) => () => {
   throw new Error(`@storybook/client-api:${name} was removed in storyStoreV7.`);
 };
 
+interface RendererImplementation<TFramework extends AnyFramework> {
+  decorateStory?: WebProjectAnnotations<TFramework>['applyDecorators'];
+  render?: ArgsStoryFn<TFramework>;
+}
+
+interface ClientAPIFacade {
+  /* deprecated */
+  addDecorator: (...args: any[]) => never;
+  /* deprecated */
+  addParameters: (...args: any[]) => never;
+  /* deprecated */
+  clearDecorators: (...args: any[]) => never;
+  /* deprecated */
+  addLoader: (...args: any[]) => never;
+  /* deprecated */
+  setAddon: (...args: any[]) => never;
+  /* deprecated */
+  getStorybook: (...args: any[]) => never;
+  /* deprecated */
+  storiesOf: (...args: any[]) => never;
+  /* deprecated */
+  raw: (...args: any[]) => never;
+}
+
+interface StartReturnValue<TFramework extends AnyFramework> {
+  /* deprecated */
+  forceReRender: () => void;
+  /* deprecated */
+  getStorybook: any;
+  /* deprecated */
+  configure: any;
+  /* deprecated */
+  clientApi: ClientApi<TFramework> | ClientAPIFacade;
+}
+
 export function start<TFramework extends AnyFramework>(
   renderToDOM: WebProjectAnnotations<TFramework>['renderToDOM'],
-  {
-    decorateStory,
-    render,
-  }: {
-    decorateStory?: WebProjectAnnotations<TFramework>['applyDecorators'];
-    render?: ArgsStoryFn<TFramework>;
-  } = {}
-) {
+  { decorateStory, render }: RendererImplementation<TFramework> = {}
+): StartReturnValue<TFramework> {
   if (globalWindow) {
     // To enable user code to detect if it is running in Storybook
     globalWindow.IS_STORYBOOK = true;
@@ -84,9 +113,8 @@ export function start<TFramework extends AnyFramework>(
   }
 
   return {
-    forceReRender: () => channel.emit(Events.FORCE_RE_RENDER),
+    forceReRender: () => channel.emit(FORCE_RE_RENDER),
     getStorybook: (): void[] => [],
-    raw: (): void => {},
 
     clientApi,
     // This gets called each time the user calls configure (i.e. once per HMR)

code/lib/core-server/src/presets/common-preset.ts

@@ -93,7 +93,7 @@ export const previewAnnotations = async (base: any, options: Options) => {
 
   if (config.length > 0) warnConfigField();
 
-  return [...config, require.resolve('@storybook/core-client/dist/esm/globals/globals'), ...base];
+  return [...config, ...base];
 };
 
 export const features = async (

code/lib/telemetry/package.json

@@ -20,9 +20,17 @@
   },
   "license": "MIT",
   "sideEffects": false,
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
     "README.md",
@@ -31,7 +39,7 @@
   ],
   "scripts": {
     "check": "../../../scripts/node_modules/.bin/tsc --noEmit",
-    "prep": "node ../../../scripts/prepare.js"
+    "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
     "@storybook/client-logger": "7.0.0-alpha.34",
@@ -50,5 +58,11 @@
   "publishConfig": {
     "access": "public"
   },
+  "bundler": {
+    "entries": [
+      "./src/index.ts"
+    ],
+    "platform": "node"
+  },
   "gitHead": "fc90fc875462421c1faa35862ac4bc436de8e75f"
 }

code/lib/ui/src/containers/notifications.tsx

@@ -1,16 +1,14 @@
 import React, { FC } from 'react';
 
-import { Consumer, Combo, useStorybookApi } from '@storybook/api';
+import type { Combo } from '@storybook/api';
+import { Consumer } from '@storybook/api';
 
 import NotificationList from '../components/notifications/NotificationList';
 
-export const mapper = ({ state }: Combo) => {
-  const { clearNotification } = useStorybookApi();
-  const { notifications } = state;
-
+const mapper = ({ state, api }: Combo) => {
   return {
-    notifications,
-    clearNotification,
+    notifications: state.notifications,
+    clearNotification: api.clearNotification,
   };
 };
 

code/lib/ui/src/index.tsx

@@ -1,6 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/triple-slash-reference
-/// <reference path="./typings.d.ts" />
-
 import global from 'global';
 import React, { FC } from 'react';
 import ReactDOM from 'react-dom';
@@ -28,21 +25,19 @@ ThemeProvider.displayName = 'ThemeProvider';
 // @ts-expect-error (Converted from ts-ignore)
 HelmetProvider.displayName = 'HelmetProvider';
 
-const Container = process.env.XSTORYBOOK_EXAMPLE_APP ? React.StrictMode : React.Fragment;
-
 export interface RootProps {
   provider: Provider;
   history?: History;
 }
 
 export const Root: FC<RootProps> = ({ provider }) => (
-  <Container key="container">
+  <React.StrictMode key="container">
     <HelmetProvider key="helmet.Provider">
       <LocationProvider key="location.provider">
         <Main provider={provider} />
       </LocationProvider>
     </HelmetProvider>
-  </Container>
+  </React.StrictMode>
 );
 
 const Main: FC<{ provider: Provider }> = ({ provider }) => {

code/package.json

@@ -422,6 +422,10 @@
         "maintenance",
         "Maintenance"
       ],
+      [
+        "build",
+        "Build"
+      ],
       [
         "dependencies",
         "Dependency Upgrades"

code/presets/react-webpack/src/framework-preset-react-docs.test.ts

@@ -33,14 +33,7 @@ describe('framework-preset-react-docgen', () => {
         overrides: [
           {
             test: /\.(cjs|mjs|tsx?|jsx?)$/,
-            plugins: [
-              [
-                babelPluginReactDocgenPath,
-                {
-                  DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES',
-                },
-              ],
-            ],
+            plugins: [[babelPluginReactDocgenPath]],
           },
         ],
       });

code/presets/react-webpack/src/framework-preset-react-docs.ts

@@ -23,14 +23,7 @@ export const babel: StorybookConfig['babel'] = async (config, options) => {
       ...(config?.overrides || []),
       {
         test: reactDocgen === 'react-docgen' ? /\.(cjs|mjs|tsx?|jsx?)$/ : /\.(cjs|mjs|jsx?)$/,
-        plugins: [
-          [
-            require.resolve('babel-plugin-react-docgen'),
-            {
-              DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES',
-            },
-          ],
-        ],
+        plugins: [[require.resolve('babel-plugin-react-docgen')]],
       },
     ],
   };

code/renderers/html/src/index.ts

@@ -1,3 +1,5 @@
+/// <reference types="webpack-env" />
+
 import './globals';
 
 export * from './public-api';

code/renderers/preact/src/index.ts

@@ -1,3 +1,5 @@
+/// <reference types="webpack-env" />
+
 export * from './globals';
 
 export * from './public-api';

code/renderers/react/src/index.ts

@@ -1,3 +1,5 @@
+/// <reference types="webpack-env" />
+
 import './globals';
 
 export * from './public-api';

code/renderers/server/src/index.ts

@@ -1,3 +1,5 @@
+/// <reference types="webpack-env" />
+
 import './globals';
 
 export * from './public-api';

code/renderers/svelte/src/index.ts

@@ -1,3 +1,5 @@
+/// <reference types="webpack-env" />
+
 import './globals';
 
 export * from './public-api';

code/renderers/vue/src/globals.ts

@@ -3,5 +3,4 @@ import global from 'global';
 
 const { window: globalWindow } = global;
 
-globalWindow.STORYBOOK_REACT_CLASSES = {};
 globalWindow.STORYBOOK_ENV = 'vue';

code/renderers/vue/src/index.ts

@@ -1,3 +1,5 @@
+/// <reference types="webpack-env" />
+
 import './globals';
 
 export * from './public-api';

code/renderers/vue3/src/globals.ts

@@ -3,5 +3,4 @@ import global from 'global';
 
 const { window: globalWindow } = global;
 
-globalWindow.STORYBOOK_REACT_CLASSES = {};
 globalWindow.STORYBOOK_ENV = 'vue3';

code/renderers/vue3/src/index.ts

@@ -1,3 +1,5 @@
+/// <reference types="webpack-env" />
+
 import './globals';
 
 export * from './public-api';

code/renderers/web-components/src/index.ts

@@ -1,3 +1,5 @@
+/// <reference types="webpack-env" />
+
 // @ts-expect-error (Converted from ts-ignore)
 import global from 'global';
 

code/yarn.lock

@@ -6748,6 +6748,7 @@ __metadata:
     "@storybook/jest": ^0.0.10
     "@storybook/testing-library": 0.0.14-next.0
     "@storybook/theming": 7.0.0-alpha.34
+    "@types/node": ^14.14.20 || ^16.0.0
     formik: ^2.2.9
     global: ^4.4.0
     jest-mock: ^27.0.6
@@ -7149,6 +7150,7 @@ __metadata:
     "@types/react": ^16.14.23
     "@types/react-dom": ^16.9.14
     "@types/tmp": ^0.2.3
+    "@types/webpack-env": ^1.16.0
     autoprefixer: ^9.8.6
     core-js: ^3.8.2
     cross-spawn: ^7.0.3

docs/get-started/install.md

@@ -27,7 +27,7 @@ Storybook needs to be installed into a project that is already set up with a fra
 
 - 📦 [Create an Angular Workspace](https://angular.io/cli/new)
 - 📦 [Create React App](https://reactjs.org/docs/create-a-new-react-app.html)
-- 📦 [Vue CLI](https://cli.vuejs.org/)
+- 📦 [Create a Vue App](https://vuejs.org/guide/quick-start.html)
 - 📦 [Ember CLI](https://guides.emberjs.com/release/getting-started/quick-start/)
 - Or any other tooling available.