Merge branch 'next' into update-lib-postinstall

.circleci/config.yml

@@ -477,7 +477,7 @@ jobs:
     executor:
       class: medium+
       name: sb_node_14_browsers
-    parallelism: 8
+    parallelism: 10
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -497,7 +497,7 @@ jobs:
     executor:
       class: medium+
       name: sb_node_14_browsers
-    parallelism: 8
+    parallelism: 10
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -513,7 +513,7 @@ jobs:
     executor:
       class: medium+
       name: sb_node_14_browsers
-    parallelism: 8
+    parallelism: 10
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -533,7 +533,7 @@ jobs:
     executor:
       class: medium+
       name: sb_node_14_browsers
-    parallelism: 8
+    parallelism: 10
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -549,7 +549,7 @@ jobs:
     executor:
       class: medium+
       name: sb_node_14_browsers
-    parallelism: 8
+    parallelism: 10
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -565,7 +565,7 @@ jobs:
     executor:
       class: medium+
       name: sb_playwright
-    parallelism: 8
+    parallelism: 10
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'

MIGRATION.md

@@ -20,8 +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-preview-annotations)
+    - ['config' preset entry replaced with 'previewAnnotations'](#config-preset-entry-replaced-with-previewannotations)
   - [Docs Changes](#docs-changes)
     - [Standalone docs files](#standalone-docs-files)
     - [Referencing stories in docs files](#referencing-stories-in-docs-files)
@@ -529,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.
@@ -550,6 +555,12 @@ The preset field `'config'` has been replaced with `'previewAnnotations'`. `'con
 
 Additionally, the internal field `'previewEntries'` has been removed. If you need a preview entry, just use a `'previewAnnotations'` file and don't export anything.
 
+#### Vue2 DOM structure changed
+
+In 6.x, `@storybook/vue` would replace the "root" element (formerly `#root`, now `#storybook-root`) with a new node that contains the rendered children. This was problematic because it broke the `play` function, which often starts with `within(canvasElement)` and the old `canvasElement` would get replaced out from under the play function.
+
+In 7.0, `@storybook/vue` now leaves `#storybook-root` alone, and creates a new "dummy node" called `#storybook-vue-root` beneath it. This will break DOM snapshots moving from 6.5 to 7.0, but shouldn't have any other negative effects.
+
 ### Docs Changes
 
 The information hierarchy of docs in Storybook has changed in 7.0. The main difference is that each docs is listed in the sidebar as a separate entry, rather than attached to individual stories.

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/examples/vue-kitchen-sink/src/stories/components/button.stories.js

@@ -1,3 +1,4 @@
+import { within, userEvent } from '@storybook/testing-library';
 import MyButton from '../Button.vue';
 
 export default {
@@ -11,7 +12,8 @@ export default {
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { MyButton },
-  template: '<my-button :color="color" :rounded="rounded">{{label}}</my-button>',
+  template: `
+    <my-button :color="color" :rounded="rounded">{{label}}</my-button>`,
 });
 
 export const Rounded = Template.bind({});
@@ -20,6 +22,18 @@ Rounded.args = {
   color: '#f00',
   label: 'A Button with rounded edges',
 };
+// Rounded.decorators = [
+//   (storyFn, context) => {
+//     return storyFn({ ...context, args: { ...context.args, label: 'Overridden args' } });
+//   },
+//   () => ({
+//     template: '<div style="background: #eee;"><story/></div>',
+//   }),
+// ];
+Rounded.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  await userEvent.click(canvas.getByRole('button'));
+};
 
 export const Square = Template.bind({});
 Square.args = {

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/frameworks/react-vite/package.json

@@ -64,12 +64,12 @@
     "ast-types": "^0.14.2",
     "magic-string": "^0.26.1",
     "react-docgen": "^6.0.0-alpha.3",
-    "vite": "3"
+    "vite": "^3.1.3"
   },
   "devDependencies": {
     "@types/node": "^14.14.20 || ^16.0.0",
     "typescript": "~4.6.3",
-    "vite": "^3.1.0"
+    "vite": "^3.1.3"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",

code/frameworks/react-vite/src/preset.ts

@@ -9,7 +9,7 @@ export const core: StorybookConfig['core'] = {
   builder: '@storybook/builder-vite',
 };
 
-export function readPackageJson(): Record<string, any> | false {
+function readPackageJson(): Record<string, any> | false {
   const packageJsonPath = path.resolve('package.json');
   if (!fs.existsSync(packageJsonPath)) {
     return false;

code/frameworks/svelte-vite/package.json

@@ -64,12 +64,12 @@
     "magic-string": "^0.26.1",
     "svelte": "^3.0.0",
     "sveltedoc-parser": "^4.2.1",
-    "vite": "3"
+    "vite": "^3.1.3"
   },
   "devDependencies": {
     "@types/node": "^14.14.20 || ^16.0.0",
     "typescript": "~4.6.3",
-    "vite": "^3.1.0"
+    "vite": "^3.1.3"
   },
   "engines": {
     "node": "^14.18 || >=16"

code/frameworks/svelte-vite/src/preset.ts

@@ -1,5 +1,3 @@
-import path from 'path';
-import fs from 'fs';
 import type { StorybookConfig } from '@storybook/builder-vite';
 import { svelteDocgen } from './plugins/svelte-docgen';
 
@@ -9,16 +7,6 @@ export const core: StorybookConfig['core'] = {
   builder: '@storybook/builder-vite',
 };
 
-export function readPackageJson(): Record<string, any> | false {
-  const packageJsonPath = path.resolve('package.json');
-  if (!fs.existsSync(packageJsonPath)) {
-    return false;
-  }
-
-  const jsonContent = fs.readFileSync(packageJsonPath, 'utf8');
-  return JSON.parse(jsonContent);
-}
-
 export const viteFinal: StorybookConfig['viteFinal'] = async (config, { presets }) => {
   const { plugins = [] } = config;
 

code/frameworks/vue-vite/README.md

@@ -0,0 +1,48 @@
+# Storybook for Vue and Vite
+
+Storybook for Vue is a UI development environment for your Vue components.
+With it, you can visualize different states of your UI components and develop them interactively.
+
+![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/main/media/storybook-intro.gif)
+
+Storybook runs outside of your app.
+So you can develop UI components in isolation without worrying about app specific dependencies and requirements.
+
+## Getting Started
+
+```sh
+cd my-vue-app
+npx storybook init
+```
+
+For more information visit: [storybook.js.org](https://storybook.js.org)
+
+## Starter Storybook-for-Vue Boilerplate project with [Vuetify](https://github.com/vuetifyjs/vuetify) Material Component Framework
+
+<https://github.com/white-rabbit-japan/vue-vuetify-storybook>
+
+---
+
+Storybook also comes with a lot of [addons](https://storybook.js.org/addons) and a great API to customize as you wish.
+You can also build a [static version](https://storybook.js.org/docs/vue/sharing/publish-storybook) of your Storybook and deploy it anywhere you want.
+
+## Vue Notes
+
+- When using global custom components or extensions (e.g., `Vue.use`). You will need to declare those in the `./storybook/preview.js`.
+
+## Known Limitations
+
+In Storybook story and decorator components, you can not access the Vue instance
+in factory functions for default prop values:
+
+```js
+{
+  props: {
+    foo: {
+      default() {
+        return this.bar; // does not work!
+      }
+    }
+  }
+}
+```

code/frameworks/vue-vite/package.json

@@ -0,0 +1,87 @@
+{
+  "name": "@storybook/vue-vite",
+  "version": "7.0.0-alpha.34",
+  "description": "Storybook for Vue2 and Vite: Develop Vue2 Components in isolation with Hot Reloading.",
+  "keywords": [
+    "storybook"
+  ],
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/frameworks/vue-vite",
+  "bugs": {
+    "url": "https://github.com/storybookjs/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybookjs/storybook.git",
+    "directory": "frameworks/vue-vite"
+  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/storybook"
+  },
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./preset": {
+      "require": "./dist/preset.js",
+      "import": "./dist/preset.mjs",
+      "types": "./dist/preset.d.ts"
+    },
+    "./package.json": {
+      "require": "./package.json",
+      "import": "./package.json",
+      "types": "./package.json"
+    }
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts"
+  ],
+  "scripts": {
+    "check": "../../../scripts/node_modules/.bin/tsc --noEmit",
+    "prep": "../../../scripts/prepare/bundle.ts"
+  },
+  "dependencies": {
+    "@storybook/addons": "7.0.0-alpha.34",
+    "@storybook/builder-vite": "7.0.0-alpha.34",
+    "@storybook/channel-postmessage": "7.0.0-alpha.34",
+    "@storybook/channel-websocket": "7.0.0-alpha.34",
+    "@storybook/client-api": "7.0.0-alpha.34",
+    "@storybook/core-common": "7.0.0-alpha.34",
+    "@storybook/core-server": "7.0.0-alpha.34",
+    "@storybook/preview-web": "7.0.0-alpha.34",
+    "@storybook/vue": "7.0.0-alpha.34",
+    "magic-string": "^0.26.1",
+    "vite": "^3.1.3",
+    "vue-docgen-api": "^4.40.0"
+  },
+  "devDependencies": {
+    "typescript": "~4.6.3",
+    "vue": "^2.7.10"
+  },
+  "peerDependencies": {
+    "vue": "^2.7.0"
+  },
+  "engines": {
+    "node": ">=10.13.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "bundler": {
+    "entries": [
+      "./src/index.ts",
+      "./src/preset.ts"
+    ],
+    "platform": "node"
+  },
+  "gitHead": "5da5b0fabd04cc5cd5771e8242a960f05d03234a"
+}

code/frameworks/vue-vite/preset.js

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

code/frameworks/vue-vite/src/index.ts

@@ -0,0 +1,9 @@
+// exports for builder-vite
+export { createChannel as createPostMessageChannel } from '@storybook/channel-postmessage';
+export { createChannel as createWebSocketChannel } from '@storybook/channel-websocket';
+export { addons } from '@storybook/addons';
+export { composeConfigs, PreviewWeb } from '@storybook/preview-web';
+export { ClientApi } from '@storybook/client-api';
+
+export * from '@storybook/vue';
+export type { StorybookConfig } from '@storybook/builder-vite';

code/frameworks/vue-vite/src/plugins/vue-docgen.ts

@@ -0,0 +1,27 @@
+import { parse } from 'vue-docgen-api';
+import type { PluginOption } from 'vite';
+import { createFilter } from 'vite';
+import MagicString from 'magic-string';
+
+export function vueDocgen(): PluginOption {
+  const include = /\.(vue)$/;
+  const filter = createFilter(include);
+
+  return {
+    name: 'storybook:vue2-docgen-plugin',
+
+    async transform(src: string, id: string) {
+      if (!filter(id)) return undefined;
+
+      const metaData = await parse(id);
+      const metaSource = JSON.stringify(metaData);
+      const s = new MagicString(src);
+      s.append(`;__component__.exports.__docgenInfo = ${metaSource}`);
+
+      return {
+        code: s.toString(),
+        map: s.generateMap({ hires: true, source: id }),
+      };
+    },
+  };
+}

code/frameworks/vue-vite/src/preset.ts

@@ -0,0 +1,44 @@
+import path from 'path';
+import type { PresetProperty } from '@storybook/core-common';
+import type { StorybookConfig } from '@storybook/builder-vite';
+import { vueDocgen } from './plugins/vue-docgen';
+
+export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => {
+  const framework = await options.presets.apply<StorybookConfig['framework']>('framework');
+
+  return {
+    ...config,
+    builder: {
+      name: path.dirname(
+        require.resolve(path.join('@storybook/builder-vite', 'package.json'))
+      ) as '@storybook/builder-webpack5',
+      options: typeof framework === 'string' ? {} : framework?.options.builder || {},
+    },
+  };
+};
+
+export const addons: StorybookConfig['addons'] = ['@storybook/vue'];
+
+export const typescript: PresetProperty<'typescript', StorybookConfig> = async (config) => ({
+  ...config,
+  skipBabel: true,
+});
+
+export const viteFinal: StorybookConfig['viteFinal'] = async (config, { presets }) => {
+  const { plugins = [] } = config;
+
+  plugins.push(vueDocgen());
+
+  const updated = {
+    ...config,
+    plugins,
+    resolve: {
+      ...config.resolve,
+      alias: {
+        ...config.resolve?.alias,
+        vue: 'vue/dist/vue.esm.js',
+      },
+    },
+  };
+  return updated;
+};

code/frameworks/vue-vite/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "strict": true,
+    "resolveJsonModule": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["src/**/*.test.*"]
+}

code/frameworks/vue3-vite/package.json

@@ -61,13 +61,13 @@
     "@storybook/vue3": "7.0.0-alpha.34",
     "@vitejs/plugin-vue": "^3.0.3",
     "magic-string": "^0.26.1",
-    "vite": "3",
+    "vite": "^3.1.3",
     "vue-docgen-api": "^4.40.0"
   },
   "devDependencies": {
     "@types/node": "^14.14.20 || ^16.0.0",
     "typescript": "~4.6.3",
-    "vite": "^3.1.0"
+    "vite": "^3.1.3"
   },
   "engines": {
     "node": "^14.18 || >=16"

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/builder-vite/package.json

@@ -33,14 +33,14 @@
     "glob-promise": "^4.2.0",
     "magic-string": "^0.26.1",
     "slash": "^3.0.0",
-    "vite": "3"
+    "vite": "^3.1.3"
   },
   "devDependencies": {
     "@storybook/mdx2-csf": "^0.0.3",
     "@types/express": "^4.17.13",
     "@types/node": "^17.0.23",
     "typescript": "~4.6.3",
-    "vite": "^3.1.0"
+    "vite": "^3.1.3"
   },
   "peerDependencies": {
     "@storybook/mdx2-csf": "^0.0.3"

code/lib/builder-vite/src/vite-config.ts

@@ -1,5 +1,4 @@
 import * as path from 'path';
-import fs from 'fs';
 import { loadConfigFromFile, mergeConfig } from 'vite';
 import type {
   ConfigEnv,
@@ -20,16 +19,6 @@ import type { ExtendedOptions, EnvsRaw } from './types';
 
 export type PluginConfigType = 'build' | 'development';
 
-export function readPackageJson(): Record<string, any> | false {
-  const packageJsonPath = path.resolve('package.json');
-  if (!fs.existsSync(packageJsonPath)) {
-    return false;
-  }
-
-  const jsonContent = fs.readFileSync(packageJsonPath, 'utf8');
-  return JSON.parse(jsonContent);
-}
-
 const configEnvServe: ConfigEnv = {
   mode: 'development',
   command: 'serve',

code/lib/cli/rendererAssets/vue/Header.stories.js

@@ -1,4 +1,4 @@
-import MyHeader from './Header';
+import MyHeader from './Header.vue';
 
 export default {
   title: 'Example/Header',

code/lib/cli/rendererAssets/vue/Page.stories.js

@@ -1,6 +1,6 @@
 import { within, userEvent } from '@storybook/testing-library';
 
-import MyPage from './Page';
+import MyPage from './Page.vue';
 
 export default {
   title: 'Example/Page',

code/lib/cli/src/add.test.ts

@@ -1,209 +0,0 @@
-import {
-  addStorybookAddonToFile,
-  storybookAddonScope,
-  getPackageName,
-  getInstalledStorybookVersion,
-  getPackageArg,
-} from './add';
-
-describe('addStorybookAddonToFile should correctly register an Storybook addon', () => {
-  test('to an empty array', () => {
-    expect(addStorybookAddonToFile('addon-name', [], true)).toEqual([
-      `import '${storybookAddonScope}addon-name/manager';`,
-    ]);
-  });
-
-  test('to an empty file', () => {
-    expect(addStorybookAddonToFile('addon-name', [''], true)).toEqual([
-      `import '${storybookAddonScope}addon-name/manager';`,
-      '',
-    ]);
-  });
-
-  test('to an addons file with existing addons registered', () => {
-    expect(
-      addStorybookAddonToFile(
-        'addon-name',
-        [
-          "import '@storybook/addon-actions/manager';",
-          "import '@storybook/addon-links/manager';",
-          '',
-        ],
-        true
-      )
-    ).toEqual([
-      `import '${storybookAddonScope}addon-name/manager';`,
-      "import '@storybook/addon-actions/manager';",
-      "import '@storybook/addon-links/manager';",
-      '',
-    ]);
-  });
-
-  test('to an addons file with more than only imports', () => {
-    expect(
-      addStorybookAddonToFile(
-        'addon-name',
-        [
-          "import '@storybook/addon-links/manager';",
-          "import '@storybook/addon-actions/manager';",
-          '',
-          '//some other stuff',
-          '',
-          'and more stuff',
-          '',
-        ],
-        true
-      )
-    ).toEqual([
-      `import '${storybookAddonScope}addon-name/manager';`,
-      "import '@storybook/addon-links/manager';",
-      "import '@storybook/addon-actions/manager';",
-      '',
-      '//some other stuff',
-      '',
-      'and more stuff',
-      '',
-    ]);
-  });
-
-  test('to an addon file with it already being installed by not duplicating it', () => {
-    expect(
-      addStorybookAddonToFile(
-        'addon-name',
-        [
-          "import '@storybook/addon-actions/manager';",
-          "import '@storybook/addon-links/manager';",
-          `import '${storybookAddonScope}addon-name/manager';`,
-          '',
-        ],
-        true
-      )
-    ).toEqual([
-      "import '@storybook/addon-actions/manager';",
-      "import '@storybook/addon-links/manager';",
-      `import '${storybookAddonScope}addon-name/manager';`,
-      '',
-    ]);
-  });
-
-  test('to an addons file if it is not an official addon', () => {
-    expect(
-      addStorybookAddonToFile(
-        'addon-name',
-        [
-          "import '@storybook/addon-actions/manager';",
-          "import '@storybook/addon-links/manager';",
-          '',
-        ],
-        false
-      )
-    ).toEqual([
-      `import 'addon-name/manager';`,
-      "import '@storybook/addon-actions/manager';",
-      "import '@storybook/addon-links/manager';",
-      '',
-    ]);
-  });
-});
-
-describe('getPackageName should correctly return the full package name', () => {
-  test('on a normal addon', () => {
-    const name = 'normal-addon';
-    expect(getPackageName(name, false)).toBe(name);
-  });
-  test('on an official addon', () => {
-    const name = 'official-addon';
-    expect(getPackageName(name, true)).toBe(storybookAddonScope + name);
-  });
-});
-
-describe('getInstalledStorybookVersion should return the correct Storybook version', () => {
-  test('when single official Storybook package is installed', () => {
-    expect(
-      getInstalledStorybookVersion({
-        devDependencies: {
-          '@storybook/react': '^4.0.0-alpha.22',
-        },
-      })
-    ).toBe('^4.0.0-alpha.22');
-  });
-
-  test('when no official Storybook package is installed', () => {
-    expect(
-      getInstalledStorybookVersion({
-        devDependencies: {
-          'random package': '^4.0.0-alpha.22',
-        },
-      })
-    ).toBeFalsy();
-  });
-
-  test('when an unofficial package with "storybook" in its name is installed', () => {
-    expect(
-      getInstalledStorybookVersion({
-        devDependencies: {
-          'not-storybook': '^4.0.0-alpha.22',
-        },
-      })
-    ).toBeFalsy();
-  });
-});
-
-describe('getPackageArg returns the correct package argument to install', () => {
-  const officialAddonName = 'knob';
-  const randomAddonName = 'random';
-  const officialAddonNameWithTag = `${officialAddonName}@alpha`;
-  const randomAddonNameWithTag = `${randomAddonName}@latest`;
-
-  test('when it is an official Storybook addon without any Storybook package installed', () => {
-    expect(
-      getPackageArg(officialAddonName, true, {
-        devDependencies: {},
-      })
-    ).toBe(officialAddonName);
-  });
-
-  test('when it is a random addon without any Storybook package installed', () => {
-    expect(
-      getPackageArg(randomAddonName, true, {
-        devDependencies: {},
-      })
-    ).toBe(randomAddonName);
-  });
-
-  test('when it is a random addon with tag without any Storybook package installed', () => {
-    expect(
-      getPackageArg(randomAddonNameWithTag, true, {
-        devDependencies: {},
-      })
-    ).toBe(randomAddonNameWithTag);
-  });
-
-  test('when it is an official addon with tag without any Storybook package installed', () => {
-    expect(
-      getPackageArg(officialAddonNameWithTag, true, {
-        devDependencies: {},
-      })
-    ).toBe(officialAddonNameWithTag);
-  });
-
-  test('when it is an official addon with tag with a Storybook package installed', () => {
-    expect(
-      getPackageArg(officialAddonNameWithTag, true, {
-        devDependencies: {
-          '@storybook/html': '^4.0.0-alpha.21',
-        },
-      })
-    ).toBe(`${officialAddonName}@^4.0.0-alpha.21`);
-  });
-
-  test('when it is an official addon with a Storybook package installed', () => {
-    expect(
-      getPackageArg(officialAddonName, true, {
-        devDependencies: {
-          '@storybook/html': '^4.0.0-alpha.21',
-        },
-      })
-    ).toBe(`${officialAddonName}@^4.0.0-alpha.21`);
-  });
-});

code/lib/cli/src/add.ts

@@ -1,102 +1,14 @@
 import path from 'path';
 import fs from 'fs';
 import { sync as spawnSync } from 'cross-spawn';
+
+import { getStorybookInfo } from '@storybook/core-common';
+import { readConfig, writeConfig } from '@storybook/csf-tools';
+
 import { commandLog } from './helpers';
-import { JsPackageManager, JsPackageManagerFactory, PackageJson } from './js-package-manager';
+import { JsPackageManagerFactory } from './js-package-manager';
 
 const logger = console;
-export const storybookAddonScope = '@storybook/addon-';
-
-const isAddon = async (packageManager: JsPackageManager, name: string) => {
-  try {
-    await packageManager.latestVersion(name);
-    return true;
-  } catch (e) {
-    return false;
-  }
-};
-
-const isStorybookAddon = async (packageManager: JsPackageManager, name: string) =>
-  isAddon(packageManager, `${storybookAddonScope}${name}`);
-
-export const getPackageName = (addonName: string, isOfficialAddon: boolean) =>
-  isOfficialAddon ? storybookAddonScope + addonName : addonName;
-
-export const getInstalledStorybookVersion = (packageJson: PackageJson) =>
-  packageJson.devDependencies[
-    // This only considers the first occurrence.
-    Object.keys(packageJson.devDependencies).find((devDep) => /@storybook/.test(devDep))
-  ] || false;
-
-export const getPackageArg = (
-  addonName: string,
-  isOfficialAddon: boolean,
-  packageJson: PackageJson
-) => {
-  if (isOfficialAddon) {
-    const addonNameNoTag = addonName.split('@')[0];
-    const installedStorybookVersion = getInstalledStorybookVersion(packageJson);
-    return installedStorybookVersion
-      ? `${addonNameNoTag}@${getInstalledStorybookVersion(packageJson)}`
-      : addonName;
-  }
-  return addonName;
-};
-
-const installAddon = (
-  packageManager: JsPackageManager,
-  addonName: string,
-  isOfficialAddon: boolean
-) => {
-  const prepareDone = commandLog(`Preparing to install the ${addonName} Storybook addon`);
-  prepareDone();
-  logger.log();
-
-  const packageArg = getPackageArg(
-    addonName,
-    isOfficialAddon,
-    packageManager.retrievePackageJson()
-  );
-
-  logger.log();
-  const installDone = commandLog(`Installing the ${addonName} Storybook addon`);
-
-  try {
-    packageManager.addDependencies({}, [packageArg]);
-  } catch (e) {
-    installDone(
-      `Something went wrong installing the addon: "${getPackageName(addonName, isOfficialAddon)}"`
-    );
-    logger.log();
-    process.exit(1);
-  }
-  installDone();
-};
-
-export const addStorybookAddonToFile = (
-  addonName: string,
-  addonsFile: string[],
-  isOfficialAddon: boolean
-) => {
-  const addonNameNoTag = addonName.split('@')[0];
-  const alreadyRegistered = addonsFile.find((line) => line.includes(`${addonNameNoTag}/manager`));
-
-  if (alreadyRegistered) {
-    return addonsFile;
-  }
-
-  const latestImportIndex = addonsFile.reduce(
-    (prev, curr, currIndex) =>
-      curr.startsWith('import') && curr.includes('register') ? currIndex : prev,
-    -1
-  );
-
-  return [
-    ...addonsFile.slice(0, latestImportIndex + 1),
-    `import '${getPackageName(addonNameNoTag, isOfficialAddon)}/manager';`,
-    ...addonsFile.slice(latestImportIndex + 1),
-  ];
-};
 
 const LEGACY_CONFIGS = ['addons', 'config', 'presets'];
 
@@ -137,23 +49,58 @@ const postinstallAddon = async (addonName: string, isOfficialAddon: boolean) =>
   }
 };
 
-export async function add(
-  addonName: string,
-  options: { useNpm: boolean; skipPostinstall: boolean }
-) {
-  const packageManager = JsPackageManagerFactory.getPackageManager(options.useNpm);
+const getVersionSpecifier = (addon: string) => {
+  const groups = /^(...*)@(.*)$/.exec(addon);
+  return groups ? [groups[1], groups[2]] : [addon, undefined];
+};
 
-  const addonCheckDone = commandLog(`Verifying that ${addonName} is an addon`);
-  const isOfficialAddon = await isStorybookAddon(packageManager, addonName);
-  if (!isOfficialAddon) {
-    if (!(await isAddon(packageManager, addonName))) {
-      addonCheckDone(`The provided package was not a Storybook addon: ${addonName}.`);
-      return;
-    }
+/**
+ * Install the given addon package and add it to main.js
+ *
+ * Usage:
+ * - sb add @storybook/addon-docs
+ * - sb add @storybook/addon-interactions@7.0.1
+ *
+ * If there is no version specifier and it's a storybook addon,
+ * it will try to use the version specifier matching your current
+ * Storybook install version.
+ */
+export async function add(addon: string, options: { useNpm: boolean; skipPostinstall: boolean }) {
+  const packageManager = JsPackageManagerFactory.getPackageManager(options.useNpm);
+  const packageJson = packageManager.retrievePackageJson();
+  const [addonName, versionSpecifier] = getVersionSpecifier(addon);
+
+  const { mainConfig, version: storybookVersion } = getStorybookInfo(packageJson);
+  if (!mainConfig) {
+    logger.error('Unable to find storybook main.js config');
+    return;
   }
-  addonCheckDone();
-  installAddon(packageManager, addonName, isOfficialAddon);
+  const main = await readConfig(mainConfig);
+  const addons = main.getFieldValue(['addons']);
+  if (addons && !Array.isArray(addons)) {
+    logger.error('Expected addons array in main.js config');
+  }
+
+  logger.log(`Verifying ${addonName}`);
+  const latestVersion = packageManager.latestVersion(addonName);
+  if (!latestVersion) {
+    logger.error(`Unknown addon ${addonName}`);
+  }
+
+  // add to package.json
+  const isStorybookAddon = addonName.startsWith('@storybook/');
+  const version = versionSpecifier || (isStorybookAddon ? storybookVersion : latestVersion);
+  const addonWithVersion = `${addonName}@${version}`;
+  logger.log(`Installing ${addonWithVersion}`);
+  packageManager.addDependencies({ installAsDevDependencies: true }, [addonWithVersion]);
+
+  // add to main.js
+  logger.log(`Adding '${addon}' to main.js addons field.`);
+  const updatedAddons = [...(addons || []), addonName];
+  main.setFieldValue(['addons'], updatedAddons);
+  await writeConfig(main);
+
   if (!options.skipPostinstall) {
-    await postinstallAddon(addonName, isOfficialAddon);
+    await postinstallAddon(addon, isStorybookAddon);
   }
 }

code/lib/cli/src/repro-templates.ts

@@ -67,6 +67,23 @@ const vue3ViteTemplates = {
   },
 };
 
+const vue2ViteTemplates = {
+  'vue2-vite/2.7-js': {
+    name: 'Vue2 Vite (vue 2.7 JS)',
+    // TODO: convert this to an `npm create` script, use that instead.
+    // We don't really want to maintain weird custom scripts like this,
+    // preferring community bootstrap scripts / generators instead.
+    script:
+      'yarn create vite . --template vanilla && yarn add --dev @vitejs/plugin-vue2 vue-template-compiler vue@2 && echo "import vue2 from \'@vitejs/plugin-vue2\';\n\nexport default {\n\tplugins: [vue2()]\n};" > vite.config.js',
+    cadence: ['ci', 'daily', 'weekly'],
+    expected: {
+      framework: '@storybook/vue2-vite',
+      renderer: '@storybook/vue',
+      builder: '@storybook/builder-vite',
+    },
+  },
+};
+
 const svelteViteTemplates = {
   'svelte-vite/default-js': {
     name: 'Svelte Vite (JS)',
@@ -132,8 +149,7 @@ const vueCliTemplates = {
     name: 'Vue-CLI (Vue2 JS)',
     script:
       'npx -p @vue/cli vue create . --default --packageManager=yarn --force --merge --preset=Default\\ (Vue\\ 2)',
-    // FIXME: https://github.com/storybookjs/storybook/issues/19204
-    cadence: [] as any,
+    cadence: ['ci', 'daily', 'weekly'],
     expected: {
       framework: '@storybook/vue-webpack5',
       renderer: '@storybook/vue',
@@ -145,6 +161,7 @@ const vueCliTemplates = {
 export default {
   ...craTemplates,
   ...reactViteTemplates,
+  ...vue2ViteTemplates,
   ...vue3ViteTemplates,
   ...svelteViteTemplates,
   ...litViteTemplates,

code/lib/cli/src/versions.ts

@@ -71,6 +71,7 @@ export default {
   '@storybook/theming': '7.0.0-alpha.34',
   '@storybook/ui': '7.0.0-alpha.34',
   '@storybook/vue': '7.0.0-alpha.34',
+  '@storybook/vue-vite': '7.0.0-alpha.34',
   '@storybook/vue-webpack5': '7.0.0-alpha.34',
   '@storybook/vue3': '7.0.0-alpha.34',
   '@storybook/vue3-vite': '7.0.0-alpha.34',

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/store/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,11 @@
   "publishConfig": {
     "access": "public"
   },
+  "bundler": {
+    "entries": [
+      "./src/index.ts"
+    ],
+    "platform": "node"
+  },
   "gitHead": "fc90fc875462421c1faa35862ac4bc436de8e75f"
 }

code/lib/store/template/stories/hooks.stories.ts

@@ -24,6 +24,9 @@ export const UseState = {
   ],
   play: async ({ canvasElement }: PlayFunctionContext) => {
     const button = await within(canvasElement).findByText('Clicked 0 times');
+    // FIXME: onClick does not properly register in vue2
+    // https://github.com/storybookjs/storybook/issues/19318
+    if (globalThis.storybookRenderer === 'vue') return;
 
     await userEvent.click(button);
     await within(canvasElement).findByText('Clicked 1 times');

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/nx.json

@@ -1,4 +1,5 @@
 {
+  "$schema": "./node_modules/nx/schemas/nx-schema.json",
   "npmScope": "storybook",
   "implicitDependencies": {
     "package.json": {
@@ -21,28 +22,15 @@
   "affected": {
     "defaultBase": "next"
   },
-  "targetDependencies": {
-    "build": [
-      {
-        "target": "build",
-        "projects": "dependencies"
-      }
-    ],
-    "package": [
-      {
-        "target": "package",
-        "projects": "dependencies"
-      }
-    ],
-    "prep": [
-      {
-        "target": "prep",
-        "projects": "dependencies"
-      }
-    ]
-  },
   "targetDefaults": {
+    "build": {
+      "dependsOn": [{ "projects": "dependencies", "target": "build" }]
+    },
+    "package": {
+      "dependsOn": [{ "projects": "dependencies", "target": "package" }]
+    },
     "prep": {
+      "dependsOn": [{ "projects": "dependencies", "target": "prep", "params": "forward" }],
       "outputs": ["{projectRoot}/dist"]
     }
   }

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/decorateStory.ts

@@ -10,7 +10,8 @@ export const WRAPS = 'STORYBOOK_WRAPS';
 
 function prepare(
   rawStory: StoryFnVueReturnType,
-  innerStory?: VueConstructor
+  innerStory?: VueConstructor,
+  context?: StoryContext<VueFramework>
 ): VueConstructor | null {
   let story: ComponentOptions<Vue> | VueConstructor;
 
@@ -37,8 +38,13 @@ function prepare(
   return Vue.extend({
     // @ts-expect-error // https://github.com/storybookjs/storybook/pull/7578#discussion_r307985279
     [WRAPS]: story,
-    // @ts-expect-error // https://github.com/storybookjs/storybook/pull/7578#discussion_r307984824
-    [VALUES]: { ...(innerStory ? innerStory.options[VALUES] : {}), ...extractProps(story) },
+    [VALUES]: {
+      // @ts-expect-error // https://github.com/storybookjs/storybook/pull/7578#discussion_r307984824
+      ...(innerStory ? innerStory.options[VALUES] : {}),
+      // @ts-expect-error // https://github.com/storybookjs/storybook/pull/7578#discussion_r307984824
+      ...extractProps(story),
+      ...(context?.args || {}),
+    },
     functional: true,
     render(h, { data, parent, children }) {
       return h(
@@ -77,6 +83,8 @@ export function decorateStory(
 
       return prepare(decoratedStory, story as any);
     },
-    (context) => prepare(storyFn(context))
+    (context) => {
+      return prepare(storyFn(context), null, context);
+    }
   );
 }

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/vue/src/render.ts

@@ -26,6 +26,11 @@ const getRoot = (domElement: Element): Instance => {
     return map.get(domElement);
   }
 
+  // Create a dummy "target" underneath #storybook-root
+  // that Vue2 will replace on first render with #storybook-vue-root
+  const target = document.createElement('div');
+  domElement.appendChild(target);
+
   const instance = new Vue({
     beforeDestroy() {
       map.delete(domElement);
@@ -36,17 +41,17 @@ const getRoot = (domElement: Element): Instance => {
         [VALUES]: {},
       };
     },
+    // @ts-expect-error What's going on here?
     render(h) {
       map.set(domElement, instance);
-      const children = this[COMPONENT] ? [h(this[COMPONENT])] : undefined;
-      return h('div', { attrs: { id: 'storybook-root' } }, children);
+      return this[COMPONENT] ? [h(this[COMPONENT])] : undefined;
     },
-  });
+  }) as Instance;
 
   return instance;
 };
 
-export const render: ArgsStoryFn<VueFramework> = (props, context) => {
+export const render: ArgsStoryFn<VueFramework> = (args, context) => {
   const { id, component: Component, argTypes } = context;
   const component = Component as VueFramework['component'] & {
     __docgenInfo?: { displayName: string };
@@ -84,7 +89,6 @@ export function renderToDOM(
     title,
     name,
     storyFn,
-    storyContext: { args },
     showMain,
     showError,
     showException,
@@ -96,6 +100,20 @@ export function renderToDOM(
   Vue.config.errorHandler = showException;
   const element = storyFn();
 
+  let mountTarget: Element;
+
+  // Vue2 mount always replaces the mount target with Vue-generated DOM.
+  // https://v2.vuejs.org/v2/api/#el:~:text=replaced%20with%20Vue%2Dgenerated%20DOM
+  // We cannot mount to the domElement directly, because it would be replaced. That would
+  // break the references to the domElement like canvasElement used in the play function.
+  // Instead, we mount to a child element of the domElement, creating one if necessary.
+  if (domElement.hasChildNodes()) {
+    mountTarget = domElement.firstElementChild;
+  } else {
+    mountTarget = document.createElement('div');
+    domElement.appendChild(mountTarget);
+  }
+
   if (!element) {
     showError({
       title: `Expecting a Vue component from the story: "${name}" of "${title}".`,
@@ -113,10 +131,10 @@ export function renderToDOM(
   }
 
   // @ts-expect-error https://github.com/storybookjs/storrybook/pull/7578#discussion_r307986139
-  root[VALUES] = { ...element.options[VALUES], ...args };
+  root[VALUES] = { ...element.options[VALUES] };
 
   if (!map.has(domElement)) {
-    root.$mount(domElement);
+    root.$mount(mountTarget);
   }
 
   showMain();

code/renderers/vue/template/stories/README.md

@@ -0,0 +1 @@
+Placeholder until we write some render-specific stories

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/workspace.json

@@ -381,6 +381,11 @@
       "type": "library",
       "implicitDependencies": []
     },
+    "@storybook/vue-vite": {
+      "root": "frameworks/vue-vite",
+      "type": "library",
+      "implicitDependencies": []
+    },
     "@storybook/vue3": {
       "root": "renderers/vue3",
       "type": "library",

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
@@ -7344,7 +7346,7 @@ __metadata:
     magic-string: ^0.26.1
     slash: ^3.0.0
     typescript: ~4.6.3
-    vite: ^3.1.0
+    vite: ^3.1.3
   peerDependencies:
     "@storybook/mdx2-csf": ^0.0.3
   peerDependenciesMeta:
@@ -8489,7 +8491,7 @@ __metadata:
     magic-string: ^0.26.1
     react-docgen: ^6.0.0-alpha.3
     typescript: ~4.6.3
-    vite: ^3.1.0
+    vite: ^3.1.3
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -8961,7 +8963,7 @@ __metadata:
     svelte: ^3.0.0
     sveltedoc-parser: ^4.2.1
     typescript: ~4.6.3
-    vite: ^3.1.0
+    vite: ^3.1.3
   languageName: unknown
   linkType: soft
 
@@ -9119,6 +9121,29 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@storybook/vue-vite@workspace:frameworks/vue-vite":
+  version: 0.0.0-use.local
+  resolution: "@storybook/vue-vite@workspace:frameworks/vue-vite"
+  dependencies:
+    "@storybook/addons": 7.0.0-alpha.34
+    "@storybook/builder-vite": 7.0.0-alpha.34
+    "@storybook/channel-postmessage": 7.0.0-alpha.34
+    "@storybook/channel-websocket": 7.0.0-alpha.34
+    "@storybook/client-api": 7.0.0-alpha.34
+    "@storybook/core-common": 7.0.0-alpha.34
+    "@storybook/core-server": 7.0.0-alpha.34
+    "@storybook/preview-web": 7.0.0-alpha.34
+    "@storybook/vue": 7.0.0-alpha.34
+    magic-string: ^0.26.1
+    typescript: ~4.6.3
+    vite: ^3.1.3
+    vue: ^2.7.10
+    vue-docgen-api: ^4.40.0
+  peerDependencies:
+    vue: ^2.7.0
+  languageName: unknown
+  linkType: soft
+
 "@storybook/vue-webpack5@7.0.0-alpha.34, @storybook/vue-webpack5@workspace:*, @storybook/vue-webpack5@workspace:frameworks/vue-webpack5":
   version: 0.0.0-use.local
   resolution: "@storybook/vue-webpack5@workspace:frameworks/vue-webpack5"
@@ -9160,7 +9185,7 @@ __metadata:
     "@vitejs/plugin-vue": ^3.0.3
     magic-string: ^0.26.1
     typescript: ~4.6.3
-    vite: ^3.1.0
+    vite: ^3.1.3
     vue-docgen-api: ^4.40.0
   languageName: unknown
   linkType: soft
@@ -42996,6 +43021,38 @@ __metadata:
   linkType: hard
 
 "vite@npm:^3.1.0":
+  version: 3.1.4
+  resolution: "vite@npm:3.1.4"
+  dependencies:
+    esbuild: ^0.15.6
+    fsevents: ~2.3.2
+    postcss: ^8.4.16
+    resolve: ^1.22.1
+    rollup: ~2.78.0
+  peerDependencies:
+    less: "*"
+    sass: "*"
+    stylus: "*"
+    terser: ^5.4.0
+  dependenciesMeta:
+    fsevents:
+      optional: true
+  peerDependenciesMeta:
+    less:
+      optional: true
+    sass:
+      optional: true
+    stylus:
+      optional: true
+    terser:
+      optional: true
+  bin:
+    vite: bin/vite.js
+  checksum: 95cb33b0499be210167ed4fa29e2b86c18c8314c9042962a2b52df154e5d55dea52945d6eaf70e2786176bda6669e24d50a99c4c12ae93947ad8818b55c85d99
+  languageName: node
+  linkType: hard
+
+"vite@npm:^3.1.3":
   version: 3.1.3
   resolution: "vite@npm:3.1.3"
   dependencies:
@@ -43311,7 +43368,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vue@npm:^2.6.12":
+"vue@npm:^2.6.12, vue@npm:^2.7.10":
   version: 2.7.10
   resolution: "vue@npm:2.7.10"
   dependencies:

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.