Merge branch 'next' into optional-webpack

.circleci/config.yml

@@ -1,7 +1,7 @@
 version: 2.1
 
 executors:
-  sb_node_14_classic:
+  sb_node_16_classic:
     parameters:
       class:
         description: The Resource class
@@ -14,7 +14,7 @@ executors:
         environment:
           NODE_OPTIONS: --max_old_space_size=3076
     resource_class: <<parameters.class>>
-  sb_node_14_browsers:
+  sb_node_16_browsers:
     parameters:
       class:
         description: The Resource class
@@ -78,7 +78,7 @@ jobs:
   check:
     executor:
       class: xlarge
-      name: sb_node_14_classic
+      name: sb_node_16_classic
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -87,14 +87,14 @@ jobs:
           keys:
             - build-yarn-2-cache-v4--{{ checksum "code/yarn.lock" }}--{{ checksum "scripts/yarn.lock" }}
       - run:
-          name: Compile
+          name: Check
           command: |
             yarn task --task check --start-from=auto --no-link --debug
             git diff --exit-code
   build:
     executor:
       class: xlarge
-      name: sb_node_14_classic
+      name: sb_node_16_classic
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -126,7 +126,7 @@ jobs:
             - code/renderers
             - code/presets
   chromatic:
-    executor: sb_node_14_browsers
+    executor: sb_node_16_browsers
     parallelism: 15
     steps:
       # Keep using default checkout because Chromatic needs some git history to work properly
@@ -141,8 +141,8 @@ jobs:
   examples:
     executor:
       class: medium+
-      name: sb_node_14_browsers
-    parallelism: 5
+      name: sb_node_16_browsers
+    parallelism: 4
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -160,7 +160,7 @@ jobs:
   publish:
     executor:
       class: medium
-      name: sb_node_14_classic
+      name: sb_node_16_classic
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -240,7 +240,7 @@ jobs:
   smoke-tests:
     executor:
       class: medium+
-      name: sb_node_14_browsers
+      name: sb_node_16_browsers
     environment:
       # Disable ESLint when running smoke tests to improve perf + As of CRA 4.0.3, CRA kitchen sinks are throwing
       # because of some ESLint warnings, related to: https://github.com/facebook/create-react-app/pull/10590
@@ -259,7 +259,7 @@ jobs:
   lint:
     executor:
       class: medium
-      name: sb_node_14_classic
+      name: sb_node_16_classic
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -271,7 +271,7 @@ jobs:
             cd code
             yarn lint
   script-unit-tests:
-    executor: sb_node_14_browsers
+    executor: sb_node_16_browsers
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -285,7 +285,7 @@ jobs:
       - store_test_results:
           path: scripts/junit.xml
   unit-tests:
-    executor: sb_node_14_browsers
+    executor: sb_node_16_browsers
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -305,7 +305,7 @@ jobs:
   coverage:
     executor:
       class: small
-      name: sb_node_14_browsers
+      name: sb_node_16_browsers
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -321,8 +321,8 @@ jobs:
   create-sandboxes:
     executor:
       class: medium+
-      name: sb_node_14_browsers
-    parallelism: 18
+      name: sb_node_16_browsers
+    parallelism: 20
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -340,8 +340,8 @@ jobs:
   smoke-test-sandboxes:
     executor:
       class: medium+
-      name: sb_node_14_browsers
-    parallelism: 11
+      name: sb_node_16_browsers
+    parallelism: 15
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -355,8 +355,8 @@ jobs:
   build-sandboxes:
     executor:
       class: medium+
-      name: sb_node_14_browsers
-    parallelism: 18
+      name: sb_node_16_browsers
+    parallelism: 20
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -374,8 +374,8 @@ jobs:
   test-runner-sandboxes:
     executor:
       class: medium+
-      name: sb_node_14_browsers
-    parallelism: 16
+      name: sb_node_16_browsers
+    parallelism: 18
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -389,8 +389,8 @@ jobs:
   chromatic-sandboxes:
     executor:
       class: medium+
-      name: sb_node_14_browsers
-    parallelism: 18
+      name: sb_node_16_browsers
+    parallelism: 20
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -405,7 +405,7 @@ jobs:
     executor:
       class: medium+
       name: sb_playwright
-    parallelism: 18
+    parallelism: 20
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'

.github/workflows/cron-weekly.yml

@@ -8,7 +8,7 @@ jobs:
   check-links:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - uses: gaurav-nelson/github-action-markdown-link-check@v1
         # checks all markdown files from important folders including all subfolders
         with:

.github/workflows/danger-js.yml

@@ -8,10 +8,10 @@ jobs:
     name: Danger JS
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v3
         with:
           node-version: '16'
-      - uses: actions/checkout@master
+      - uses: actions/checkout@v3
       - name: Danger JS
         uses: danger/danger-js@10.9.0
         env:

.github/workflows/generate-repros-next.yml

@@ -15,10 +15,10 @@ jobs:
     env:
       YARN_ENABLE_IMMUTABLE_INSTALLS: false
     steps:
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v3
         with:
           node-version: 16
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - name: Setup git user
         run: |
           git config --global user.name "Storybook Bot"

.github/workflows/generate-repros.yml

@@ -15,10 +15,10 @@ jobs:
     env:
       YARN_ENABLE_IMMUTABLE_INSTALLS: false
     steps:
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v3
         with:
           node-version: 16
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - name: Setup git user
         run: |
           git config --global user.name "Storybook Bot"

.github/workflows/handle-release-branches.yml

@@ -23,7 +23,7 @@ jobs:
     if: ${{ needs.branch-checks.outputs.is-latest-branch == 'true' }}
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
       - run: curl -X POST "https://api.netlify.com/build_hooks/${{ secrets.FRONTPAGE_HOOK }}"
 
@@ -32,7 +32,7 @@ jobs:
     if: ${{ needs.branch-checks.outputs.is-next-branch == 'true' || needs.branch-checks.outputs.is-release-branch == 'true' }}
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
         with:
           ref: next
           path: next
@@ -54,7 +54,7 @@ jobs:
     if: ${{ needs.branch-checks.outputs.is-next-branch == 'true' }}
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
         with:
           fetch-depth: 0
 

.github/workflows/tests-unit.yml

@@ -23,9 +23,9 @@ jobs:
             node_version: 16
     runs-on: ${{ matrix.os }}
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - name: Set node version to ${{ matrix.node_version }}
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node_version }}
           cache: yarn

.yarnrc.yml

@@ -1,4 +1,5 @@
+installStatePath: ./.yarn/root-install-state.gz
+
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-3.2.3.cjs
-installStatePath: "./.yarn/root-install-state.gz"
+yarnPath: .yarn/releases/yarn-3.2.4.cjs

MIGRATION.md

@@ -414,7 +414,7 @@ If you are running into errors, you can upgrade your project to Webpack5 or you
 To upgrade:
 
 - If you're configuring webpack directly, see the Webpack5 [release announcement](https://webpack.js.org/blog/2020-10-10-webpack-5-release/) and [migration guide](https://webpack.js.org/migrate/5).
-- If you're using Create React App, see the [migration notes](https://github.com/facebook/create-react-app/blob/main/CHANGELOG.md#migrating-from-40x-to-500) to ugprade from V4 (Webpack4) to 5
+- If you're using Create React App, see the [migration notes](https://github.com/facebook/create-react-app/blob/main/CHANGELOG.md#migrating-from-40x-to-500) to upgrade from V4 (Webpack4) to 5
 
 During the 7.0 dev cycle we will be updating this section with useful resources as we run across them.
 
@@ -440,9 +440,11 @@ In 7.0, frameworks also specify the builder to be used. For example, The current
 - `@storybook/svelte-webpack5`
 - `@storybook/svelte-vite`
 - `@storybook/vue-webpack5`
+- `@storybook/vue-vite`
 - `@storybook/vue3-webpack5`
 - `@storybook/vue3-vite`
 - `@storybook/web-components-webpack5`
+- `@storybook/web-components-vite`
 
 We will be expanding this list over the course of the 7.0 development cycle. More info on the rationale here: [Frameworks RFC](https://www.notion.so/chromatic-ui/Frameworks-RFC-89f8aafe3f0941ceb4c24683859ed65c).
 
@@ -530,7 +532,7 @@ If you were using `viteFinal` in 6.5 to simply merge in your project's standard
 
 #### Vite cache moved to node_modules/.cache/.vite-storybook
 
-Previously, Storybook's Vite builder placed cache files in node_modules/.vite-storybook.  However, it's more common for tools to place cached files into `node_modules/.cache`, and putting them there makes it quick and easy to clear the cache for multiple tools at once.  We don't expect this change will cause any problems, but it's something that users of Storybook Vite projects should know about.  It can be configured by setting `cacheDir` in `viteFinal` within `.storybook/main.js` [Storybook Vite configuration docs](https://storybook.js.org/docs/react/builders/vite#configuration)). 
+Previously, Storybook's Vite builder placed cache files in node_modules/.vite-storybook.  However, it's more common for tools to place cached files into `node_modules/.cache`, and putting them there makes it quick and easy to clear the cache for multiple tools at once.  We don't expect this change will cause any problems, but it's something that users of Storybook Vite projects should know about.  It can be configured by setting `cacheDir` in `viteFinal` within `.storybook/main.js` [Storybook Vite configuration docs](https://storybook.js.org/docs/react/builders/vite#configuration)).
 
 #### Removed docs.getContainer and getPage parameters
 
@@ -563,8 +565,8 @@ Additionally, the internal field `'previewEntries'` has been removed. If you nee
 
 #### Dropped support for Angular 12 and below
 
-Official [Angular 12 LTS support ends Nov 2022](https://angular.io/guide/releases#actively-supported-versions). With that, Storybook also drops its support 
-for Angular 12 and below. 
+Official [Angular 12 LTS support ends Nov 2022](https://angular.io/guide/releases#actively-supported-versions). With that, Storybook also drops its support
+for Angular 12 and below.
 
 In order to use Storybook 7.0, you need to upgrade to at least Angular 13.
 
@@ -773,7 +775,7 @@ SB6.5 moves framework specializations (e.g. ArgType inference, dynamic snippet r
 
 This change should not require any specific migrations on your part if you are using the docs addon as described in the documentation. However, if you are using `react-docgen` or `react-docgen-typescript` information in some custom way outside of `addon-docs`, you should be aware of this change.
 
-In SB6.4, `@storybook/react` added `react-docgen` to its babel settings and `react-docgen-typescript` to its webpack settings. In SB6.5, this only happens if you are using `addon-docs` or `addon-controls`, either directly or indirectly through `addon-essentials`. If you're not using either of those addons, but require that information for some other addon, please configure that manually in your `.storybook/main.js` configuration. You can see the docs configuration here: https://github.com/storybookjs/storybook/blob/next/app/react/src/server/framework-preset-react-docs.ts
+In SB6.4, `@storybook/react` added `react-docgen` to its babel settings and `react-docgen-typescript` to its webpack settings. In SB6.5, this only happens if you are using `addon-docs` or `addon-controls`, either directly or indirectly through `addon-essentials`. If you're not using either of those addons, but require that information for some other addon, please configure that manually in your `.storybook/main.js` configuration. You can see the docs configuration here: https://github.com/storybookjs/storybook/blob/next/code/presets/react-webpack/src/framework-preset-react-docs.ts
 
 ### Opt-in MDX2 support
 

README.md

@@ -124,7 +124,7 @@ For additional help, join us in the [Storybook Discord](https://discord.gg/story
 | [jest](code/addons/jest/)                                                 | View the results of components' unit tests in Storybook                    |
 | [links](code/addons/links/)                                               | Create links between stories                                               |
 | [measure](code/addons/measure/)                                           | Visually inspect the layout and box model within the Storybook UI          |
-| [outline](code/addons/outline/)                                           | Visuallly debug the CSS layout and alignment within the Storybook UI       |
+| [outline](code/addons/outline/)                                           | Visually debug the CSS layout and alignment within the Storybook UI        |
 | [query params](https://github.com/storybookjs/addon-queryparams)          | Mock query params                                                          |
 | [storyshots](code/addons/storyshots/)                                     | Snapshot testing for components in Storybook                               |
 | [storysource](code/addons/storysource/)                                   | View the code of your stories within the Storybook UI                      |

code/.yarnrc.yml

@@ -27,5 +27,5 @@ plugins:
 unsafeHttpWhitelist:
   - localhost
 
-yarnPath: ../.yarn/releases/yarn-3.2.3.cjs
+yarnPath: ../.yarn/releases/yarn-3.2.4.cjs
 installStatePath: '../.yarn/code-install-state.gz'

code/addons/a11y/register.js

@@ -1,6 +1,6 @@
-import { once } from '@storybook/client-logger';
+import { deprecate } from '@storybook/client-logger';
 import './manager';
 
-once.warn(
+deprecate(
   'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs'
 );

code/addons/actions/register.js

@@ -1,6 +1,6 @@
-import { once } from '@storybook/client-logger';
+import { deprecate } from '@storybook/client-logger';
 import './manager';
 
-once.warn(
+deprecate(
   'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs'
 );

code/addons/backgrounds/register.js

@@ -1,6 +1,6 @@
-import { once } from '@storybook/client-logger';
+import { deprecate } from '@storybook/client-logger';
 import './manager';
 
-once.warn(
+deprecate(
   'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs'
 );

code/addons/controls/register.js

@@ -1,6 +1,6 @@
-import { once } from '@storybook/client-logger';
+import { deprecate } from '@storybook/client-logger';
 import './manager';
 
-once.warn(
+deprecate(
   'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs'
 );

code/addons/docs/package.json

@@ -70,6 +70,7 @@
     "@storybook/store": "7.0.0-alpha.38",
     "@storybook/theming": "7.0.0-alpha.38",
     "dequal": "^2.0.2",
+    "fs-extra": "^9.0.1",
     "global": "^4.4.0",
     "lodash": "^4.17.21",
     "remark-external-links": "^8.0.0",

code/addons/highlight/package.json

@@ -23,9 +23,22 @@
   },
   "license": "MIT",
   "author": "winkerVSbecks",
-  "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"
+    },
+    "./preview": {
+      "require": "./dist/highlight.js",
+      "import": "./dist/highlight.mjs",
+      "types": "./dist/highlight.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
     "README.md",
@@ -34,7 +47,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.38",
@@ -48,6 +61,12 @@
   "publishConfig": {
     "access": "public"
   },
+  "bundler": {
+    "entries": [
+      "./src/index.ts",
+      "./src/highlight.ts"
+    ]
+  },
   "gitHead": "438114fcf62a763f0e8c07e2c34890dd987ca431",
   "sbmodern": "dist/modern/index.js",
   "storybook": {

code/addons/highlight/preview.js

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

code/addons/interactions/register.js

@@ -1,6 +1,6 @@
-import { once } from '@storybook/client-logger';
+import { deprecate } from '@storybook/client-logger';
 import './manager';
 
-once.warn(
+deprecate(
   'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs'
 );

code/addons/jest/register.js

@@ -1,6 +1,6 @@
-import { once } from '@storybook/client-logger';
+import { deprecate } from '@storybook/client-logger';
 import './manager';
 
-once.warn(
+deprecate(
   'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs'
 );

code/addons/links/register.js

@@ -1,6 +1,6 @@
-import { once } from '@storybook/client-logger';
+import { deprecate } from '@storybook/client-logger';
 import './manager';
 
-once.warn(
+deprecate(
   'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs'
 );

code/addons/links/src/react/components/link.test.tsx

@@ -17,7 +17,6 @@ jest.mock('global', () => ({
   // @ts-expect-error (Converted from ts-ignore)
   window: global,
   __STORYBOOK_STORY_STORE__: {
-    getSelection: jest.fn(() => ({ id: 1 })),
     fromId: jest.fn(() => ({})),
   },
 }));

code/addons/measure/register.js

@@ -1,6 +1,6 @@
-import { once } from '@storybook/client-logger';
+import { deprecate } from '@storybook/client-logger';
 import './manager';
 
-once.warn(
+deprecate(
   'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs'
 );

code/addons/outline/register.js

@@ -1,6 +1,6 @@
-import { once } from '@storybook/client-logger';
+import { deprecate } from '@storybook/client-logger';
 import './manager';
 
-once.warn(
+deprecate(
   'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs'
 );

code/addons/storyshots/storyshots-core/.storybook/config.js

@@ -1,9 +0,0 @@
-import { configure } from '@storybook/react';
-
-configure(
-  [
-    require.context('../stories/required_with_context', false, /\.stories\.(js|mdx)$/),
-    require.context('../stories/directly_required', false, /index\.js$/),
-  ],
-  module
-);

code/addons/storyshots/storyshots-core/.storybook/configTest.js

@@ -1,12 +0,0 @@
-import { configure } from '@storybook/react';
-
-const req = require.context('../stories/required_with_context', false, /\.stories\.js$/);
-
-const loadStories = () => {
-  const result = req.keys().map((filename) => req(filename));
-  // eslint-disable-next-line global-require
-  require('../stories/directly_required');
-  return result;
-};
-
-configure(loadStories, module);

code/addons/storyshots/storyshots-core/.storybook/presets.js

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

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

@@ -1,6 +1,6 @@
 import { snapshotWithOptions } from '../test-bodies';
 import { Stories2SnapsConverter } from '../Stories2SnapsConverter';
-import { StoryshotsOptions } from './StoryshotsOptions';
+import type { StoryshotsOptions } from './StoryshotsOptions';
 
 const ignore = ['**/node_modules/**'];
 const defaultStories2SnapsConverter = new Stories2SnapsConverter();

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

@@ -4,7 +4,7 @@ import ensureOptionsDefaults from './ensureOptionsDefaults';
 import snapshotsTests from './snapshotsTestsTemplate';
 import integrityTest from './integrityTestTemplate';
 import loadFramework from '../frameworks/frameworkLoader';
-import { StoryshotsOptions } from './StoryshotsOptions';
+import type { StoryshotsOptions } from './StoryshotsOptions';
 
 const { describe, window: globalWindow } = global;
 

code/addons/storyshots/storyshots-core/src/frameworks/Loader.ts

@@ -1,22 +1,14 @@
 import type { AnyFramework } from '@storybook/csf';
-import type { ClientStoryApi, Loadable } from '@storybook/addons';
+import type { Loadable } from '@storybook/addons';
 import { ClientApi as ClientApiClass } from '@storybook/client-api';
 import type { StoryshotsOptions } from '../api/StoryshotsOptions';
 import type { SupportedFramework } from './SupportedFramework';
 
 export type RenderTree = (story: any, context?: any, options?: any) => any;
 
-export interface ClientApi<TFramework extends AnyFramework>
-  extends ClientStoryApi<TFramework['storyResult']> {
+export interface ClientApi<TFramework extends AnyFramework> extends ClientApiClass<AnyFramework> {
   configure(loader: Loadable, module: NodeModule | false, showDeprecationWarning?: boolean): void;
   forceReRender(): void;
-  clearDecorators: ClientApiClass<TFramework>['clearDecorators'];
-  getStorybook: ClientApiClass<TFramework>['getStorybook'];
-  setAddon: ClientApiClass<TFramework>['setAddon'];
-  addArgsEnhancer: ClientApiClass<TFramework>['addArgsEnhancer'];
-  addArgTypesEnhancer: ClientApiClass<TFramework>['addArgTypesEnhancer'];
-  addStepRunner: ClientApiClass<TFramework>['addStepRunner'];
-  raw: ClientApiClass<TFramework>['raw'];
 }
 
 export interface Loader {

code/addons/storyshots/storyshots-core/src/frameworks/angular/loader.ts

@@ -2,8 +2,8 @@ import 'core-js';
 import 'core-js/es/reflect';
 import hasDependency from '../hasDependency';
 import configure from '../configure';
-import { Loader } from '../Loader';
-import { StoryshotsOptions } from '../../api/StoryshotsOptions';
+import type { Loader } from '../Loader';
+import type { StoryshotsOptions } from '../../api/StoryshotsOptions';
 
 function setupAngularJestPreset() {
   // Needed to prevent "Zone.js has detected that ZoneAwarePromise `(window|global).Promise` has been overwritten."
@@ -34,8 +34,17 @@ function load(options: StoryshotsOptions) {
   setupAngularJestPreset();
 
   const storybook = jest.requireActual('@storybook/angular');
+  const clientAPI = jest.requireActual('@storybook/client-api');
 
-  configure({ ...options, storybook });
+  const api = {
+    ...clientAPI,
+    ...storybook,
+  };
+
+  configure({
+    ...options,
+    storybook: api,
+  });
 
   return {
     framework: 'angular' as const,
@@ -43,7 +52,7 @@ function load(options: StoryshotsOptions) {
     renderShallowTree: () => {
       throw new Error('Shallow renderer is not supported for angular');
     },
-    storybook,
+    storybook: api,
   };
 }
 

code/addons/storyshots/storyshots-core/src/frameworks/frameworkLoader.ts

@@ -2,7 +2,7 @@
 import fs from 'fs';
 import path from 'path';
 import { Loader } from './Loader';
-import { StoryshotsOptions } from '../api/StoryshotsOptions';
+import type { StoryshotsOptions } from '../api/StoryshotsOptions';
 
 const loaderScriptName = 'loader.js';
 
@@ -13,8 +13,21 @@ function getLoaders(): Loader[] {
     .readdirSync(__dirname)
     .map((name) => path.join(__dirname, name))
     .filter(isDirectory)
-    .map((framework) => path.join(framework, loaderScriptName))
-    .filter(fs.existsSync)
+    .map((framework) => {
+      const pa = path.join(framework, loaderScriptName);
+      const pb = path.join(framework, 'loader.ts');
+
+      if (fs.existsSync(pa)) {
+        return pa;
+      }
+
+      if (fs.existsSync(pb)) {
+        return pb;
+      }
+
+      return null;
+    })
+    .filter(Boolean)
     .map((loader) => require(loader).default);
 }
 

code/addons/storyshots/storyshots-core/src/frameworks/html/loader.ts

@@ -1,7 +1,7 @@
 import global from 'global';
 import configure from '../configure';
-import { Loader } from '../Loader';
-import { StoryshotsOptions } from '../../api/StoryshotsOptions';
+import type { Loader } from '../Loader';
+import type { StoryshotsOptions } from '../../api/StoryshotsOptions';
 
 function test(options: StoryshotsOptions): boolean {
   return options.framework === 'html';
@@ -11,8 +11,17 @@ function load(options: StoryshotsOptions) {
   global.STORYBOOK_ENV = 'html';
 
   const storybook = jest.requireActual('@storybook/html');
+  const clientAPI = jest.requireActual('@storybook/client-api');
 
-  configure({ ...options, storybook });
+  const api = {
+    ...clientAPI,
+    ...storybook,
+  };
+
+  configure({
+    ...options,
+    storybook: api,
+  });
 
   return {
     framework: 'html' as const,
@@ -20,7 +29,7 @@ function load(options: StoryshotsOptions) {
     renderShallowTree: () => {
       throw new Error('Shallow renderer is not supported for HTML');
     },
-    storybook,
+    storybook: api,
   };
 }
 

code/addons/storyshots/storyshots-core/src/frameworks/preact/loader.ts

@@ -4,8 +4,8 @@
 import global from 'global';
 import configure from '../configure';
 import hasDependency from '../hasDependency';
-import { Loader } from '../Loader';
-import { StoryshotsOptions } from '../../api/StoryshotsOptions';
+import type { Loader } from '../Loader';
+import type { StoryshotsOptions } from '../../api/StoryshotsOptions';
 
 function test(options: StoryshotsOptions): boolean {
   return (
@@ -17,8 +17,17 @@ function load(options: StoryshotsOptions) {
   global.STORYBOOK_ENV = 'preact';
 
   const storybook = jest.requireActual('@storybook/preact');
+  const clientAPI = jest.requireActual('@storybook/client-api');
 
-  configure({ ...options, storybook });
+  const api = {
+    ...clientAPI,
+    ...storybook,
+  };
+
+  configure({
+    ...options,
+    storybook: api,
+  });
 
   return {
     framework: 'preact' as const,
@@ -26,7 +35,7 @@ function load(options: StoryshotsOptions) {
     renderShallowTree: () => {
       throw new Error('Shallow renderer is not supported for preact');
     },
-    storybook,
+    storybook: api,
   };
 }
 

code/addons/storyshots/storyshots-core/src/frameworks/rax/loader.ts

@@ -1,8 +1,8 @@
 import global from 'global';
 import configure from '../configure';
 import hasDependency from '../hasDependency';
-import { Loader } from '../Loader';
-import { StoryshotsOptions } from '../../api/StoryshotsOptions';
+import type { Loader } from '../Loader';
+import type { StoryshotsOptions } from '../../api/StoryshotsOptions';
 
 function test(options: StoryshotsOptions): boolean {
   return options.framework === 'rax' || (!options.framework && hasDependency('@storybook/rax'));
@@ -12,8 +12,17 @@ function load(options: StoryshotsOptions) {
   global.STORYBOOK_ENV = 'rax';
 
   const storybook = jest.requireActual('@storybook/rax');
+  const clientAPI = jest.requireActual('@storybook/client-api');
 
-  configure({ ...options, storybook });
+  const api = {
+    ...clientAPI,
+    ...storybook,
+  };
+
+  configure({
+    ...options,
+    storybook: api,
+  });
 
   return {
     framework: 'rax' as const,
@@ -21,7 +30,7 @@ function load(options: StoryshotsOptions) {
     renderShallowTree: () => {
       throw new Error('Shallow renderer is not supported for rax');
     },
-    storybook,
+    storybook: api,
   };
 }
 

code/addons/storyshots/storyshots-core/src/frameworks/react-native/loader.ts

@@ -1,8 +1,8 @@
 /* eslint-disable global-require */
 import path from 'path';
 import hasDependency from '../hasDependency';
-import { Loader } from '../Loader';
-import { StoryshotsOptions } from '../../api/StoryshotsOptions';
+import type { Loader } from '../Loader';
+import type { StoryshotsOptions } from '../../api/StoryshotsOptions';
 
 function test(options: StoryshotsOptions): boolean {
   return (
@@ -25,14 +25,20 @@ function configure(options: StoryshotsOptions, storybook: any) {
 
 function load(options: StoryshotsOptions) {
   const storybook = jest.requireActual('@storybook/react-native');
+  const clientAPI = jest.requireActual('@storybook/client-api');
 
-  configure(options, storybook);
+  const api = {
+    ...clientAPI,
+    ...storybook,
+  };
+
+  configure(options, api);
 
   return {
     renderTree: require('../react/renderTree').default,
     renderShallowTree: require('../react/renderShallowTree').default,
     framework: 'react-native' as const,
-    storybook,
+    storybook: api,
   };
 }
 

code/addons/storyshots/storyshots-core/src/frameworks/react/loader.ts

@@ -1,7 +1,7 @@
 import configure from '../configure';
 import hasDependency from '../hasDependency';
-import { Loader } from '../Loader';
-import { StoryshotsOptions } from '../../api/StoryshotsOptions';
+import type { Loader } from '../Loader';
+import type { StoryshotsOptions } from '../../api/StoryshotsOptions';
 
 function test(options: StoryshotsOptions): boolean {
   return options.framework === 'react' || (!options.framework && hasDependency('@storybook/react'));
@@ -9,14 +9,23 @@ function test(options: StoryshotsOptions): boolean {
 
 function load(options: StoryshotsOptions) {
   const storybook = jest.requireActual('@storybook/react');
+  const clientAPI = jest.requireActual('@storybook/client-api');
 
-  configure({ ...options, storybook });
+  const api = {
+    ...clientAPI,
+    ...storybook,
+  };
+
+  configure({
+    ...options,
+    storybook: api,
+  });
 
   return {
     framework: 'react' as const,
     renderTree: jest.requireActual('./renderTree').default,
     renderShallowTree: jest.requireActual('./renderShallowTree').default,
-    storybook,
+    storybook: api,
   };
 }
 

code/addons/storyshots/storyshots-core/src/frameworks/riot/loader.ts

@@ -1,8 +1,8 @@
 import global from 'global';
 import hasDependency from '../hasDependency';
 import configure from '../configure';
-import { Loader } from '../Loader';
-import { StoryshotsOptions } from '../../api/StoryshotsOptions';
+import type { Loader } from '../Loader';
+import type { StoryshotsOptions } from '../../api/StoryshotsOptions';
 
 function mockRiotToIncludeCompiler() {
   jest.mock('riot', () => jest.requireActual('riot/riot.js'));
@@ -17,8 +17,17 @@ function load(options: StoryshotsOptions) {
   mockRiotToIncludeCompiler();
 
   const storybook = jest.requireActual('@storybook/riot');
+  const clientAPI = jest.requireActual('@storybook/client-api');
 
-  configure({ ...options, storybook });
+  const api = {
+    ...clientAPI,
+    ...storybook,
+  };
+
+  configure({
+    ...options,
+    storybook: api,
+  });
 
   return {
     framework: 'riot' as const,
@@ -26,7 +35,7 @@ function load(options: StoryshotsOptions) {
     renderShallowTree: () => {
       throw new Error('Shallow renderer is not supported for riot');
     },
-    storybook,
+    storybook: api,
   };
 }
 

code/addons/storyshots/storyshots-core/src/frameworks/svelte/loader.ts

@@ -1,8 +1,8 @@
 import global from 'global';
 import hasDependency from '../hasDependency';
 import configure from '../configure';
-import { Loader } from '../Loader';
-import { StoryshotsOptions } from '../../api/StoryshotsOptions';
+import type { Loader } from '../Loader';
+import type { StoryshotsOptions } from '../../api/StoryshotsOptions';
 
 function test(options: StoryshotsOptions): boolean {
   return (
@@ -14,8 +14,17 @@ function load(options: StoryshotsOptions) {
   global.STORYBOOK_ENV = 'svelte';
 
   const storybook = jest.requireActual('@storybook/svelte');
+  const clientAPI = jest.requireActual('@storybook/client-api');
 
-  configure({ ...options, storybook });
+  const api = {
+    ...clientAPI,
+    ...storybook,
+  };
+
+  configure({
+    ...options,
+    storybook: api,
+  });
 
   return {
     framework: 'svelte' as const,
@@ -23,7 +32,7 @@ function load(options: StoryshotsOptions) {
     renderShallowTree: () => {
       throw new Error('Shallow renderer is not supported for svelte');
     },
-    storybook,
+    storybook: api,
   };
 }
 

code/addons/storyshots/storyshots-core/src/frameworks/vue/loader.ts

@@ -1,8 +1,8 @@
 import global from 'global';
 import hasDependency from '../hasDependency';
 import configure from '../configure';
-import { Loader } from '../Loader';
-import { StoryshotsOptions } from '../../api/StoryshotsOptions';
+import type { Loader } from '../Loader';
+import type { StoryshotsOptions } from '../../api/StoryshotsOptions';
 
 function mockVueToIncludeCompiler() {
   jest.mock('vue', () => jest.requireActual('vue/dist/vue.common.js'));
@@ -17,8 +17,17 @@ function load(options: StoryshotsOptions) {
   mockVueToIncludeCompiler();
 
   const storybook = jest.requireActual('@storybook/vue');
+  const clientAPI = jest.requireActual('@storybook/client-api');
 
-  configure({ ...options, storybook });
+  const api = {
+    ...clientAPI,
+    ...storybook,
+  };
+
+  configure({
+    ...options,
+    storybook: api,
+  });
 
   return {
     framework: 'vue' as const,
@@ -26,7 +35,7 @@ function load(options: StoryshotsOptions) {
     renderShallowTree: () => {
       throw new Error('Shallow renderer is not supported for vue');
     },
-    storybook,
+    storybook: api,
   };
 }
 

code/addons/storyshots/storyshots-core/src/frameworks/vue3/loader.ts

@@ -1,8 +1,8 @@
 import global from 'global';
 import hasDependency from '../hasDependency';
 import configure from '../configure';
-import { Loader } from '../Loader';
-import { StoryshotsOptions } from '../../api/StoryshotsOptions';
+import type { Loader } from '../Loader';
+import type { StoryshotsOptions } from '../../api/StoryshotsOptions';
 
 function test(options: StoryshotsOptions): boolean {
   return options.framework === 'vue3' || (!options.framework && hasDependency('@storybook/vue3'));
@@ -11,9 +11,18 @@ function test(options: StoryshotsOptions): boolean {
 function load(options: StoryshotsOptions) {
   global.STORYBOOK_ENV = 'vue3';
 
-  const storybook = jest.requireActual('@storybook/vue3');
+  const storybook = jest.requireActual('@storybook/vue');
+  const clientAPI = jest.requireActual('@storybook/client-api');
 
-  configure({ ...options, storybook });
+  const api = {
+    ...clientAPI,
+    ...storybook,
+  };
+
+  configure({
+    ...options,
+    storybook: api,
+  });
 
   return {
     framework: 'vue3' as const,
@@ -21,7 +30,7 @@ function load(options: StoryshotsOptions) {
     renderShallowTree: () => {
       throw new Error('Shallow renderer is not supported for Vue 3');
     },
-    storybook,
+    storybook: api,
   };
 }
 

code/addons/storyshots/storyshots-core/src/frameworks/web-components/loader.ts

@@ -1,7 +1,7 @@
 import global from 'global';
 import configure from '../configure';
-import { Loader } from '../Loader';
-import { StoryshotsOptions } from '../../api/StoryshotsOptions';
+import type { Loader } from '../Loader';
+import type { StoryshotsOptions } from '../../api/StoryshotsOptions';
 
 function test(options: StoryshotsOptions): boolean {
   return options.framework === 'web-components';
@@ -10,9 +10,18 @@ function test(options: StoryshotsOptions): boolean {
 function load(options: StoryshotsOptions) {
   global.STORYBOOK_ENV = 'web-components';
 
-  const storybook = jest.requireActual('@storybook/web-components');
+  const storybook = jest.requireActual('@storybook/html');
+  const clientAPI = jest.requireActual('@storybook/client-api');
 
-  configure({ ...options, storybook });
+  const api = {
+    ...clientAPI,
+    ...storybook,
+  };
+
+  configure({
+    ...options,
+    storybook: api,
+  });
 
   return {
     framework: 'web-components' as const,
@@ -20,7 +29,7 @@ function load(options: StoryshotsOptions) {
     renderShallowTree: () => {
       throw new Error('Shallow renderer is not supported for web-components');
     },
-    storybook,
+    storybook: api,
   };
 }
 

code/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.enzyme.test.js.snap

@@ -1,139 +1,56 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Another Button with some emoji 1`] = `
-<Button
-  onClick={[Function]}
->
-  <button
-    onClick={[Function]}
-    style={
-      Object {
-        "backgroundColor": "#FFFFFF",
-        "border": "1px solid #eee",
-        "borderRadius": 3,
-        "cursor": "pointer",
-        "fontSize": 15,
-        "margin": 10,
-        "padding": "3px 10px",
-      }
-    }
-    type="button"
-  >
-    <span
-      aria-label="so cool"
-      role="img"
-    >
-      😀 😎 👍 💯
-    </span>
-  </button>
-</Button>
+<Container>
+  <div>
+    prefix
+     
+    <Component>
+      <button
+        onClick={[Function]}
+      >
+        <span
+          aria-label="so cool"
+          role="img"
+        >
+          😀 😎 👍 💯
+        </span>
+      </button>
+    </Component>
+     
+    suffix
+  </div>
+</Container>
 `;
 
 exports[`Storyshots Another Button with text 1`] = `
-<Button
-  onClick={[Function]}
->
-  <button
-    onClick={[Function]}
-    style={
-      Object {
-        "backgroundColor": "#FFFFFF",
-        "border": "1px solid #eee",
-        "borderRadius": 3,
-        "cursor": "pointer",
-        "fontSize": 15,
-        "margin": 10,
-        "padding": "3px 10px",
-      }
-    }
-    type="button"
-  >
-    Hello Button
-  </button>
-</Button>
+<Container>
+  <div>
+    prefix
+     
+    <Component>
+      <button
+        onClick={[Function]}
+      >
+        Hello button
+      </button>
+    </Component>
+     
+    suffix
+  </div>
+</Container>
 `;
 
-exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = `
-<AsyncTestComponent>
-  <h1 />
-</AsyncTestComponent>
-`;
-
-exports[`Storyshots Button With Text 1`] = `
-<Button
-  onClick={[Function]}
->
-  <button
-    onClick={[Function]}
-    style={
-      Object {
-        "backgroundColor": "#FFFFFF",
-        "border": "1px solid #eee",
-        "borderRadius": 3,
-        "cursor": "pointer",
-        "fontSize": 15,
-        "margin": 10,
-        "padding": "3px 10px",
-      }
-    }
-    type="button"
-  >
-    Hello Button
-  </button>
-</Button>
-`;
-
-exports[`Storyshots Button with some emoji 1`] = `
-<Button
-  onClick={[Function]}
->
-  <button
-    onClick={[Function]}
-    style={
-      Object {
-        "backgroundColor": "#FFFFFF",
-        "border": "1px solid #eee",
-        "borderRadius": 3,
-        "cursor": "pointer",
-        "fontSize": 15,
-        "margin": 10,
-        "padding": "3px 10px",
-      }
-    }
-    type="button"
-  >
-    <span
-      aria-label="so cool"
-      role="img"
-    >
-      😀 😎 👍 💯
-    </span>
-  </button>
-</Button>
-`;
-
-exports[`Storyshots Welcome MDX to Storybook 1`] = `
-<Welcome
-  showApp={[Function]}
->
-  <button
-    onClick={[Function]}
-    type="button"
-  >
-    Welcome
-  </button>
-</Welcome>
-`;
-
-exports[`Storyshots Welcome to Storybook 1`] = `
-<Welcome
-  showApp={[Function]}
->
-  <button
-    onClick={[Function]}
-    type="button"
-  >
-    Welcome
-  </button>
-</Welcome>
+exports[`Storyshots Text Simple 1`] = `
+<Container>
+  <div>
+    prefix
+     
+    <Component>
+      contents
+    </Component>
+     
+    suffix
+  </div>
+</Container>
 `;

code/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.metadata.test.js.snap

@@ -1,5 +1,38 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Storyshots Another Button with some emoji 1`] = `
+<div>
+  prefix
+   
+  <button
+    onClick={[Function]}
+  >
+    <span
+      aria-label="so cool"
+      role="img"
+    >
+      😀 😎 👍 💯
+    </span>
+  </button>
+   
+  suffix
+</div>
+`;
+
+exports[`Storyshots Another Button with text 1`] = `
+<div>
+  prefix
+   
+  <button
+    onClick={[Function]}
+  >
+    Hello button
+  </button>
+   
+  suffix
+</div>
+`;
+
 exports[`Storyshots Text Simple 1`] = `
 <div>
   prefix

code/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.shallow.test.js.snap

@@ -1,115 +1,31 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Another Button with some emoji 1`] = `
-<button
-  onClick={[Function]}
-  style={
-    Object {
-      "backgroundColor": "#FFFFFF",
-      "border": "1px solid #eee",
-      "borderRadius": 3,
-      "cursor": "pointer",
-      "fontSize": 15,
-      "margin": 10,
-      "padding": "3px 10px",
-    }
-  }
-  type="button"
->
-  <span
-    aria-label="so cool"
-    role="img"
-  >
-    😀 😎 👍 💯
-  </span>
-</button>
+<div>
+  prefix
+   
+  <Unknown />
+   
+  suffix
+</div>
 `;
 
 exports[`Storyshots Another Button with text 1`] = `
-<button
-  onClick={[Function]}
-  style={
-    Object {
-      "backgroundColor": "#FFFFFF",
-      "border": "1px solid #eee",
-      "borderRadius": 3,
-      "cursor": "pointer",
-      "fontSize": 15,
-      "margin": 10,
-      "padding": "3px 10px",
-    }
-  }
-  type="button"
->
-  Hello Button
-</button>
+<div>
+  prefix
+   
+  <Unknown />
+   
+  suffix
+</div>
 `;
 
-exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = `
-<h1>
-  
-</h1>
-`;
-
-exports[`Storyshots Button With Text 1`] = `
-<button
-  onClick={[Function]}
-  style={
-    Object {
-      "backgroundColor": "#FFFFFF",
-      "border": "1px solid #eee",
-      "borderRadius": 3,
-      "cursor": "pointer",
-      "fontSize": 15,
-      "margin": 10,
-      "padding": "3px 10px",
-    }
-  }
-  type="button"
->
-  Hello Button
-</button>
-`;
-
-exports[`Storyshots Button with some emoji 1`] = `
-<button
-  onClick={[Function]}
-  style={
-    Object {
-      "backgroundColor": "#FFFFFF",
-      "border": "1px solid #eee",
-      "borderRadius": 3,
-      "cursor": "pointer",
-      "fontSize": 15,
-      "margin": 10,
-      "padding": "3px 10px",
-    }
-  }
-  type="button"
->
-  <span
-    aria-label="so cool"
-    role="img"
-  >
-    😀 😎 👍 💯
-  </span>
-</button>
-`;
-
-exports[`Storyshots Welcome MDX to Storybook 1`] = `
-<button
-  onClick={[Function]}
-  type="button"
->
-  Welcome
-</button>
-`;
-
-exports[`Storyshots Welcome to Storybook 1`] = `
-<button
-  onClick={[Function]}
-  type="button"
->
-  Welcome
-</button>
+exports[`Storyshots Text Simple 1`] = `
+<div>
+  prefix
+   
+  <Unknown />
+   
+  suffix
+</div>
 `;

code/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.shallowWithOptions.test.js.snap

@@ -1,115 +1,31 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Another Button with some emoji 1`] = `
-<button
-  onClick={[Function]}
-  style={
-    Object {
-      "backgroundColor": "#FFFFFF",
-      "border": "1px solid #eee",
-      "borderRadius": 3,
-      "cursor": "pointer",
-      "fontSize": 15,
-      "margin": 10,
-      "padding": "3px 10px",
-    }
-  }
-  type="button"
->
-  <span
-    aria-label="so cool"
-    role="img"
-  >
-    😀 😎 👍 💯
-  </span>
-</button>
+<div>
+  prefix
+   
+  <Unknown />
+   
+  suffix
+</div>
 `;
 
 exports[`Storyshots Another Button with text 1`] = `
-<button
-  onClick={[Function]}
-  style={
-    Object {
-      "backgroundColor": "#FFFFFF",
-      "border": "1px solid #eee",
-      "borderRadius": 3,
-      "cursor": "pointer",
-      "fontSize": 15,
-      "margin": 10,
-      "padding": "3px 10px",
-    }
-  }
-  type="button"
->
-  Hello Button
-</button>
+<div>
+  prefix
+   
+  <Unknown />
+   
+  suffix
+</div>
 `;
 
-exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = `
-<h1>
-  
-</h1>
-`;
-
-exports[`Storyshots Button With Text 1`] = `
-<button
-  onClick={[Function]}
-  style={
-    Object {
-      "backgroundColor": "#FFFFFF",
-      "border": "1px solid #eee",
-      "borderRadius": 3,
-      "cursor": "pointer",
-      "fontSize": 15,
-      "margin": 10,
-      "padding": "3px 10px",
-    }
-  }
-  type="button"
->
-  Hello Button
-</button>
-`;
-
-exports[`Storyshots Button with some emoji 1`] = `
-<button
-  onClick={[Function]}
-  style={
-    Object {
-      "backgroundColor": "#FFFFFF",
-      "border": "1px solid #eee",
-      "borderRadius": 3,
-      "cursor": "pointer",
-      "fontSize": 15,
-      "margin": 10,
-      "padding": "3px 10px",
-    }
-  }
-  type="button"
->
-  <span
-    aria-label="so cool"
-    role="img"
-  >
-    😀 😎 👍 💯
-  </span>
-</button>
-`;
-
-exports[`Storyshots Welcome MDX to Storybook 1`] = `
-<button
-  onClick={[Function]}
-  type="button"
->
-  Welcome
-</button>
-`;
-
-exports[`Storyshots Welcome to Storybook 1`] = `
-<button
-  onClick={[Function]}
-  type="button"
->
-  Welcome
-</button>
+exports[`Storyshots Text Simple 1`] = `
+<div>
+  prefix
+   
+  <Unknown />
+   
+  suffix
+</div>
 `;

code/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.snapshotWithOptionsFunction.test.js.snap

@@ -1,115 +1,44 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Another Button with some emoji 1`] = `
-<button
-  onClick={[Function]}
-  style={
-    Object {
-      "backgroundColor": "#FFFFFF",
-      "border": "1px solid #eee",
-      "borderRadius": 3,
-      "cursor": "pointer",
-      "fontSize": 15,
-      "margin": 10,
-      "padding": "3px 10px",
-    }
-  }
-  type="button"
->
-  <span
-    aria-label="so cool"
-    role="img"
+<div>
+  prefix
+   
+  <button
+    onClick={[Function]}
   >
-    😀 😎 👍 💯
-  </span>
-</button>
+    <span
+      aria-label="so cool"
+      role="img"
+    >
+      😀 😎 👍 💯
+    </span>
+  </button>
+   
+  suffix
+</div>
 `;
 
 exports[`Storyshots Another Button with text 1`] = `
-<button
-  onClick={[Function]}
-  style={
-    Object {
-      "backgroundColor": "#FFFFFF",
-      "border": "1px solid #eee",
-      "borderRadius": 3,
-      "cursor": "pointer",
-      "fontSize": 15,
-      "margin": 10,
-      "padding": "3px 10px",
-    }
-  }
-  type="button"
->
-  Hello Button
-</button>
-`;
-
-exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = `
-<h1>
-  
-</h1>
-`;
-
-exports[`Storyshots Button With Text 1`] = `
-<button
-  onClick={[Function]}
-  style={
-    Object {
-      "backgroundColor": "#FFFFFF",
-      "border": "1px solid #eee",
-      "borderRadius": 3,
-      "cursor": "pointer",
-      "fontSize": 15,
-      "margin": 10,
-      "padding": "3px 10px",
-    }
-  }
-  type="button"
->
-  Hello Button
-</button>
-`;
-
-exports[`Storyshots Button with some emoji 1`] = `
-<button
-  onClick={[Function]}
-  style={
-    Object {
-      "backgroundColor": "#FFFFFF",
-      "border": "1px solid #eee",
-      "borderRadius": 3,
-      "cursor": "pointer",
-      "fontSize": 15,
-      "margin": 10,
-      "padding": "3px 10px",
-    }
-  }
-  type="button"
->
-  <span
-    aria-label="so cool"
-    role="img"
+<div>
+  prefix
+   
+  <button
+    onClick={[Function]}
   >
-    😀 😎 👍 💯
-  </span>
-</button>
+    Hello button
+  </button>
+   
+  suffix
+</div>
 `;
 
-exports[`Storyshots Welcome MDX to Storybook 1`] = `
-<button
-  onClick={[Function]}
-  type="button"
->
-  Welcome
-</button>
-`;
-
-exports[`Storyshots Welcome to Storybook 1`] = `
-<button
-  onClick={[Function]}
-  type="button"
->
-  Welcome
-</button>
+exports[`Storyshots Text Simple 1`] = `
+<div>
+  prefix
+   
+  contents
+   
+  suffix
+</div>
 `;

code/addons/storyshots/storyshots-core/stories/directly_required/__snapshots__/index.foo

@@ -1,46 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Another Button with some emoji 1`] = `
-<button
-  onClick={[Function]}
-  style={
-    Object {
-      "backgroundColor": "#FFFFFF",
-      "border": "1px solid #eee",
-      "borderRadius": 3,
-      "cursor": "pointer",
-      "fontSize": 15,
-      "margin": 10,
-      "padding": "3px 10px",
-    }
-  }
-  type="button"
->
-  <span
-    aria-label="so cool"
-    role="img"
-  >
-    😀 😎 👍 💯
-  </span>
-</button>
-`;
-
-exports[`Storyshots Another Button with text 1`] = `
-<button
-  onClick={[Function]}
-  style={
-    Object {
-      "backgroundColor": "#FFFFFF",
-      "border": "1px solid #eee",
-      "borderRadius": 3,
-      "cursor": "pointer",
-      "fontSize": 15,
-      "margin": 10,
-      "padding": "3px 10px",
-    }
-  }
-  type="button"
->
-  Hello Button
-</button>
-`;

code/addons/storyshots/storyshots-core/stories/directly_required/__snapshots__/index.storyshot

@@ -1,46 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Another Button with some emoji 1`] = `
-<button
-  onClick={[Function]}
-  style={
-    Object {
-      "backgroundColor": "#FFFFFF",
-      "border": "1px solid #eee",
-      "borderRadius": 3,
-      "cursor": "pointer",
-      "fontSize": 15,
-      "margin": 10,
-      "padding": "3px 10px",
-    }
-  }
-  type="button"
->
-  <span
-    aria-label="so cool"
-    role="img"
-  >
-    😀 😎 👍 💯
-  </span>
-</button>
-`;
-
-exports[`Storyshots Another Button with text 1`] = `
-<button
-  onClick={[Function]}
-  style={
-    Object {
-      "backgroundColor": "#FFFFFF",
-      "border": "1px solid #eee",
-      "borderRadius": 3,
-      "cursor": "pointer",
-      "fontSize": 15,
-      "margin": 10,
-      "padding": "3px 10px",
-    }
-  }
-  type="button"
->
-  Hello Button
-</button>
-`;

code/addons/storyshots/storyshots-core/stories/directly_required/__snapshots__/index@Another-_-Button@with-_-some-_-emoji.boo

@@ -1,26 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Another Button with some emoji 1`] = `
-<button
-  onClick={[Function]}
-  style={
-    Object {
-      "backgroundColor": "#FFFFFF",
-      "border": "1px solid #eee",
-      "borderRadius": 3,
-      "cursor": "pointer",
-      "fontSize": 15,
-      "margin": 10,
-      "padding": "3px 10px",
-    }
-  }
-  type="button"
->
-  <span
-    aria-label="so cool"
-    role="img"
-  >
-    😀 😎 👍 💯
-  </span>
-</button>
-`;

code/addons/storyshots/storyshots-core/stories/directly_required/__snapshots__/index@Another-_-Button@with-_-text.boo

@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Another Button with text 1`] = `
-<button
-  onClick={[Function]}
-  style={
-    Object {
-      "backgroundColor": "#FFFFFF",
-      "border": "1px solid #eee",
-      "borderRadius": 3,
-      "cursor": "pointer",
-      "fontSize": 15,
-      "margin": 10,
-      "padding": "3px 10px",
-    }
-  }
-  type="button"
->
-  Hello Button
-</button>
-`;

code/addons/storyshots/storyshots-core/stories/exported_metadata/Extra.stories.jsx

@@ -1,15 +1,15 @@
+/* eslint-disable react/button-has-type */
 import React from 'react';
 
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { Button } from '../react-demo';
 
 storiesOf('Another Button', module)
-  .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
+  .add('with text', () => <button onClick={action('clicked')}>Hello button</button>)
   .add('with some emoji', () => (
-    <Button onClick={action('clicked')}>
+    <button onClick={action('clicked')}>
       <span role="img" aria-label="so cool">
         😀 😎 👍 💯
       </span>
-    </Button>
+    </button>
   ));

code/addons/storyshots/storyshots-core/stories/exported_metadata/__snapshots__/Extra.stories.storyshot

@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Another Button with some emoji 1`] = `
+<div>
+  prefix
+   
+  <button
+    onClick={[Function]}
+  >
+    <span
+      aria-label="so cool"
+      role="img"
+    >
+      😀 😎 👍 💯
+    </span>
+  </button>
+   
+  suffix
+</div>
+`;
+
+exports[`Storyshots Another Button with text 1`] = `
+<div>
+  prefix
+   
+  <button
+    onClick={[Function]}
+  >
+    Hello button
+  </button>
+   
+  suffix
+</div>
+`;

code/addons/storyshots/storyshots-core/stories/exported_metadata/__snapshots__/Extra.stories@Another-_-Button@with-_-some-_-emoji.boo

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Another Button with some emoji 1`] = `
+<button
+  onClick={[Function]}
+>
+  <span
+    aria-label="so cool"
+    role="img"
+  >
+    😀 😎 👍 💯
+  </span>
+</button>
+`;

code/addons/storyshots/storyshots-core/stories/exported_metadata/__snapshots__/Extra.stories@Another-_-Button@with-_-text.boo

@@ -1,10 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Welcome to Storybook 1`] = `
+exports[`Storyshots Another Button with text 1`] = `
 <button
   onClick={[Function]}
-  type="button"
 >
-  Welcome
+  Hello button
 </button>
 `;

code/addons/storyshots/storyshots-core/stories/exported_metadata/__snapshots__/Text.stories.storyshot

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Text Simple 1`] = `
+<div>
+  prefix
+   
+  contents
+   
+  suffix
+</div>
+`;

code/addons/storyshots/storyshots-core/stories/exported_metadata/main.js

@@ -1,3 +1,3 @@
 module.exports = {
-  stories: ['./Text.stories.js'],
+  stories: ['./Text.stories.jsx', './Extra.stories.jsx'],
 };

code/addons/storyshots/storyshots-core/stories/exported_metadata/preview.js

@@ -1,10 +1,13 @@
+/* eslint-disable react/prop-types */
 import React from 'react';
 
+const Container = ({ children }) => <div>{children}</div>;
+
 export const decorators = [
   (StoryFn, { parameters, globals }) => (
-    <div>
+    <Container>
       {parameters.prefix} <StoryFn /> {globals.suffix}
-    </div>
+    </Container>
   ),
 ];
 

code/addons/storyshots/storyshots-core/stories/react-demo.js

@@ -1,34 +0,0 @@
-import React from 'react';
-
-const styles = {
-  border: '1px solid #eee',
-  borderRadius: 3,
-  backgroundColor: '#FFFFFF',
-  cursor: 'pointer',
-  fontSize: 15,
-  padding: '3px 10px',
-  margin: 10,
-};
-
-// eslint-disable-next-line react/prop-types
-export const Button = ({ children, onClick }) => (
-  <button onClick={onClick} style={styles} type="button">
-    {children}
-  </button>
-);
-
-Button.displayName = 'Button';
-Button.defaultProps = {
-  onClick: () => {},
-};
-
-// eslint-disable-next-line react/prop-types
-export const Welcome = ({ showApp }) => (
-  <button type="button" onClick={showApp}>
-    Welcome
-  </button>
-);
-Welcome.displayName = 'Welcome';
-Welcome.defaultProps = {
-  showApp: () => {},
-};

code/addons/storyshots/storyshots-core/stories/required_with_context/Button.stories.js

@@ -1,23 +0,0 @@
-import React from 'react';
-
-import { Button } from '../react-demo';
-
-export default {
-  title: 'Button',
-
-  parameters: {
-    component: Button,
-  },
-};
-
-export const WithText = () => <Button>Hello Button</Button>;
-
-export const WithSomeEmoji = () => (
-  <Button>
-    <span role="img" aria-label="so cool">
-      😀 😎 👍 💯
-    </span>
-  </Button>
-);
-
-WithSomeEmoji.storyName = 'with some emoji';

code/addons/storyshots/storyshots-core/stories/required_with_context/Welcome.stories.js

@@ -1,15 +0,0 @@
-import React from 'react';
-
-import { Welcome } from '../react-demo';
-
-export default {
-  title: 'Welcome',
-
-  parameters: {
-    component: Welcome,
-  },
-};
-
-export const ToStorybook = () => <Welcome showApp={() => {}} />;
-
-ToStorybook.storyName = 'to Storybook';

code/addons/storyshots/storyshots-core/stories/required_with_context/Welcome.stories.mdx

@@ -1,13 +0,0 @@
-import { Welcome } from '../react-demo';
-import { Meta, Story } from '@storybook/addon-docs';
-
-<Meta
-  title="Welcome MDX"
-  parameters={{
-    component: Welcome,
-  }}
-/>
-
-<Story name="to Storybook">
-  <Welcome showApp={() => {}} />
-</Story>

code/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Async.stories.async.storyshot

@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = `
-<h1>
-  THIS IS SO DONE
-</h1>
-`;

code/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Async.stories.foo

@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = `
-<h1>
-  
-</h1>
-`;

code/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Async.stories.storyshot

@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = `
-<h1>
-  
-</h1>
-`;

code/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Button.stories.foo

@@ -1,46 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Button With Text 1`] = `
-<button
-  onClick={[Function]}
-  style={
-    Object {
-      "backgroundColor": "#FFFFFF",
-      "border": "1px solid #eee",
-      "borderRadius": 3,
-      "cursor": "pointer",
-      "fontSize": 15,
-      "margin": 10,
-      "padding": "3px 10px",
-    }
-  }
-  type="button"
->
-  Hello Button
-</button>
-`;
-
-exports[`Storyshots Button with some emoji 1`] = `
-<button
-  onClick={[Function]}
-  style={
-    Object {
-      "backgroundColor": "#FFFFFF",
-      "border": "1px solid #eee",
-      "borderRadius": 3,
-      "cursor": "pointer",
-      "fontSize": 15,
-      "margin": 10,
-      "padding": "3px 10px",
-    }
-  }
-  type="button"
->
-  <span
-    aria-label="so cool"
-    role="img"
-  >
-    😀 😎 👍 💯
-  </span>
-</button>
-`;

code/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Button.stories.storyshot

@@ -1,46 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Button With Text 1`] = `
-<button
-  onClick={[Function]}
-  style={
-    Object {
-      "backgroundColor": "#FFFFFF",
-      "border": "1px solid #eee",
-      "borderRadius": 3,
-      "cursor": "pointer",
-      "fontSize": 15,
-      "margin": 10,
-      "padding": "3px 10px",
-    }
-  }
-  type="button"
->
-  Hello Button
-</button>
-`;
-
-exports[`Storyshots Button with some emoji 1`] = `
-<button
-  onClick={[Function]}
-  style={
-    Object {
-      "backgroundColor": "#FFFFFF",
-      "border": "1px solid #eee",
-      "borderRadius": 3,
-      "cursor": "pointer",
-      "fontSize": 15,
-      "margin": 10,
-      "padding": "3px 10px",
-    }
-  }
-  type="button"
->
-  <span
-    aria-label="so cool"
-    role="img"
-  >
-    😀 😎 👍 💯
-  </span>
-</button>
-`;

code/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Welcome.stories.storyshot

@@ -1,19 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Welcome MDX to Storybook 1`] = `
-<button
-  onClick={[Function]}
-  type="button"
->
-  Welcome
-</button>
-`;
-
-exports[`Storyshots Welcome to Storybook 1`] = `
-<button
-  onClick={[Function]}
-  type="button"
->
-  Welcome
-</button>
-`;

code/addons/storyshots/storyshots-core/stories/storyshot.async.test.js

@@ -1,13 +1,13 @@
 import path from 'path';
 import { render, screen, waitFor } from '@testing-library/react';
-import initStoryshots, { Stories2SnapsConverter } from '../dist/types';
-import { TIMEOUT, EXPECTED_VALUE } from './required_with_context/Async.stories';
+import initStoryshots, { Stories2SnapsConverter } from '../src';
+import { TIMEOUT, EXPECTED_VALUE } from './exported_metadata/Async.stories.jsx';
 
 initStoryshots({
   asyncJest: true,
   framework: 'react',
   integrityOptions: false,
-  configPath: path.join(__dirname, '..', '.storybook'),
+  configPath: path.join(__dirname, 'exported_metadata'),
 
   // When async is true we need to provide a test method that
   // calls done() when at the end of the test method

code/addons/storyshots/storyshots-core/stories/storyshot.configFunc.test.js

@@ -1,5 +1,5 @@
 import path from 'path';
-import initStoryshots, { multiSnapshotWithOptions, Stories2SnapsConverter } from '../dist/types';
+import initStoryshots, { multiSnapshotWithOptions, Stories2SnapsConverter } from '../src';
 
 class AnotherStories2SnapsConverter extends Stories2SnapsConverter {
   getSnapshotFileName(context) {
@@ -38,7 +38,7 @@ initStoryshots({
   config: ({ configure }) =>
     configure(() => {
       // eslint-disable-next-line global-require
-      require('./directly_required');
+      require('./exported_metadata/Extra.stories.jsx');
     }, module),
   test: multiSnapshotWithOptions(),
 });

code/addons/storyshots/storyshots-core/stories/storyshot.enzyme.test.js

@@ -1,9 +1,9 @@
 import path from 'path';
 import { mount } from 'enzyme';
-import initStoryshots from '../dist/types';
+import initStoryshots from '../src';
 
 initStoryshots({
   framework: 'react',
-  configPath: path.join(__dirname, '..', '.storybook'),
+  configPath: path.join(__dirname, 'exported_metadata'),
   renderer: mount,
 });

code/addons/storyshots/storyshots-core/stories/storyshot.metadata.test.js

@@ -1,5 +1,5 @@
 import path from 'path';
-import initStoryshots from '../dist/types';
+import initStoryshots from '../src';
 
 // jest.mock('@storybook/node-logger');
 

code/addons/storyshots/storyshots-core/stories/storyshot.renderOnly.test.js

@@ -1,8 +1,8 @@
 import path from 'path';
-import initStoryshots, { renderOnly } from '../dist/types';
+import initStoryshots, { renderOnly } from '../src';
 
 initStoryshots({
   framework: 'react',
-  configPath: path.join(__dirname, '..', '.storybook'),
+  configPath: path.join(__dirname, 'exported_metadata'),
   test: renderOnly,
 });

code/addons/storyshots/storyshots-core/stories/storyshot.renderWithOptions.test.js

@@ -1,8 +1,8 @@
 import path from 'path';
-import initStoryshots, { renderWithOptions } from '../dist/types';
+import initStoryshots, { renderWithOptions } from '../src';
 
 initStoryshots({
   framework: 'react',
-  configPath: path.join(__dirname, '..', '.storybook'),
+  configPath: path.join(__dirname, 'exported_metadata'),
   test: renderWithOptions({}),
 });

code/addons/storyshots/storyshots-core/stories/storyshot.shallow.test.js

@@ -1,8 +1,8 @@
 import path from 'path';
-import initStoryshots, { shallowSnapshot } from '../dist/types';
+import initStoryshots, { shallowSnapshot } from '../src';
 
 initStoryshots({
   framework: 'react',
-  configPath: path.join(__dirname, '..', '.storybook'),
+  configPath: path.join(__dirname, 'exported_metadata'),
   test: shallowSnapshot,
 });

code/addons/storyshots/storyshots-core/stories/storyshot.shallowWithOptions.test.js

@@ -1,9 +1,9 @@
 import path from 'path';
-import initStoryshots, { shallowSnapshot } from '../dist/types';
+import initStoryshots, { shallowSnapshot } from '../src';
 
 initStoryshots({
   framework: 'react',
-  configPath: path.join(__dirname, '..', '.storybook'),
+  configPath: path.join(__dirname, 'exported_metadata'),
   test: (data) =>
     shallowSnapshot({
       ...data,

code/addons/storyshots/storyshots-core/stories/storyshot.snapshotWithOptionsFunction.test.js

@@ -1,8 +1,8 @@
 import path from 'path';
-import initStoryshots, { snapshotWithOptions } from '../dist/types';
+import initStoryshots, { snapshotWithOptions } from '../src';
 
 initStoryshots({
   framework: 'react',
-  configPath: path.join(__dirname, '..', '.storybook'),
+  configPath: path.join(__dirname, 'exported_metadata'),
   test: snapshotWithOptions(() => ({})),
 });

code/addons/storyshots/storyshots-core/stories/storyshot.specificConfig.test.js

@@ -1,10 +0,0 @@
-import path from 'path';
-import initStoryshots, { multiSnapshotWithOptions, Stories2SnapsConverter } from '../dist/types';
-
-initStoryshots({
-  framework: 'react',
-  integrityOptions: { cwd: __dirname },
-  stories2snapsConverter: new Stories2SnapsConverter({ snapshotExtension: '.foo' }),
-  configPath: path.join(__dirname, '..', '.storybook', 'configTest.js'),
-  test: multiSnapshotWithOptions(),
-});

code/addons/storyshots/storyshots-core/stories/storyshot.test.js

@@ -1,5 +1,5 @@
 import path from 'path';
-import initStoryshots, { multiSnapshotWithOptions } from '../dist/types';
+import initStoryshots, { multiSnapshotWithOptions } from '../src';
 
 jest.mock('@storybook/node-logger');
 
@@ -8,6 +8,6 @@ initStoryshots({
   framework: 'react',
   // Ignore integrityOptions for async.storyshot because only run when asyncJest is true
   integrityOptions: { cwd: __dirname, ignore: ['**/**.async.storyshot'] },
-  configPath: path.join(__dirname, '..', '.storybook'),
+  configPath: path.join(__dirname, 'exported_metadata'),
   test: multiSnapshotWithOptions(),
 });

code/addons/storysource/package.json

@@ -21,9 +21,27 @@
     "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"
+    },
+    "./preset": {
+      "require": "./dist/preset.js",
+      "import": "./dist/preset.mjs",
+      "types": "./dist/preset.d.ts"
+    },
+    "./register": {
+      "require": "./dist/manager.js",
+      "import": "./dist/manager.mjs",
+      "types": "./dist/manager.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
     "README.md",
@@ -32,7 +50,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.38",
@@ -63,6 +81,13 @@
       "optional": true
     }
   },
+  "bundler": {
+    "entries": [
+      "./src/index.ts",
+      "./src/manager.tsx",
+      "./src/preset.ts"
+    ]
+  },
   "publishConfig": {
     "access": "public"
   },

code/addons/storysource/preset.js

@@ -1,31 +1 @@
-function webpack(webpackConfig = {}, options = {}) {
-  const { module = {} } = webpackConfig;
-  const { loaderOptions, rule = {} } = options;
-
-  return {
-    ...webpackConfig,
-    module: {
-      ...module,
-      rules: [
-        ...(module.rules || []),
-        {
-          test: [/\.stories\.(jsx?$|tsx?$)/],
-          ...rule,
-          enforce: 'pre',
-          use: [
-            {
-              loader: require.resolve('@storybook/source-loader'),
-              options: loaderOptions,
-            },
-          ],
-        },
-      ],
-    },
-  };
-}
-
-function managerEntries(entry = []) {
-  return [...entry, require.resolve('./dist/esm/manager')];
-}
-
-module.exports = { webpack, managerEntries };
+import './dist/preset';

code/addons/storysource/register.js

@@ -1 +1 @@
-import './dist/esm/manager';
+import './dist/manager';

code/addons/storysource/src/preset.ts

@@ -0,0 +1,36 @@
+/// <reference types="webpack" />
+
+function webpack(
+  webpackConfig = { module: { rules: [] as Array<unknown> } },
+  options = { loaderOptions: {}, rule: {} }
+) {
+  const { module = { rules: [] } } = webpackConfig;
+  const { loaderOptions, rule = {} } = options;
+
+  return {
+    ...webpackConfig,
+    module: {
+      ...module,
+      rules: [
+        ...(module.rules || []),
+        {
+          test: [/\.stories\.(jsx?$|tsx?$)/],
+          ...rule,
+          enforce: 'pre',
+          use: [
+            {
+              loader: require.resolve('@storybook/source-loader'),
+              options: loaderOptions,
+            },
+          ],
+        },
+      ],
+    },
+  };
+}
+
+function managerEntries(entry = [] as Array<unknown>) {
+  return [...entry, require.resolve('./manager')];
+}
+
+export { webpack, managerEntries };

code/addons/toolbars/register.js

@@ -1,6 +1,6 @@
-import { once } from '@storybook/client-logger';
+import { deprecate } from '@storybook/client-logger';
 import './manager';
 
-once.warn(
+deprecate(
   'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs'
 );

code/addons/viewport/register.js

@@ -1,6 +1,6 @@
-import { once } from '@storybook/client-logger';
+import { deprecate } from '@storybook/client-logger';
 import './manager';
 
-once.warn(
+deprecate(
   'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs'
 );

code/e2e-tests/addon-docs.spec.ts

@@ -16,7 +16,7 @@ test.describe('addon-docs', () => {
   test('should provide source snippet', async ({ page }) => {
     // templateName is e.g. 'Vue-CLI (Default JS)'
     test.skip(
-      /^(vue3|vue-cli)/i.test(templateName),
+      /^(vue3|vue-cli|preact)/i.test(templateName),
       `Skipping ${templateName}, which does not support dynamic source snippets`
     );
 

code/examples/preact-kitchen-sink/.eslintrc.js

@@ -1,12 +0,0 @@
-module.exports = {
-  settings: {
-    react: {
-      pragma: 'h',
-      pragmaFrag: 'Fragment',
-    },
-  },
-  rules: {
-    'react/react-in-jsx-scope': 'off',
-    'react/prop-types': 'off',
-  },
-};

code/examples/preact-kitchen-sink/.gitignore

@@ -1,15 +0,0 @@
-# See http://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
-node_modules
-
-# testing
-coverage
-
-# production
-build
-
-# misc
-.DS_Store
-.env
-npm-debug.log

code/examples/preact-kitchen-sink/.storybook/main.ts

@@ -1,45 +0,0 @@
-import type { StorybookConfig } from '@storybook/preact-webpack5';
-
-const path = require('path');
-
-const mainConfig: StorybookConfig = {
-  stories: ['../src/stories/**/*.stories.@(ts|tsx|js|jsx|mdx)'],
-  logLevel: 'debug',
-  addons: [
-    '@storybook/addon-storysource',
-    '@storybook/addon-actions',
-    '@storybook/addon-docs',
-    '@storybook/addon-links',
-    '@storybook/addon-viewport',
-    '@storybook/addon-backgrounds',
-    '@storybook/addon-a11y',
-    '@storybook/addon-highlight',
-  ],
-  webpackFinal: (config) => {
-    const rules = config.module?.rules || [];
-    rules.push({
-      test: [/\.stories\.(js|ts|jsx|tsx)$/],
-      use: [require.resolve('@storybook/source-loader')],
-      include: [path.resolve(__dirname, '../src')],
-      enforce: 'pre',
-    });
-
-    // eslint-disable-next-line no-param-reassign
-    config.module = config.module || {};
-    // eslint-disable-next-line no-param-reassign
-    config.module.rules = rules;
-    return config;
-  },
-  core: {
-    channelOptions: { allowFunction: false, maxDepth: 10 },
-    disableTelemetry: true,
-  },
-  staticDirs: ['../public'],
-  features: {
-    buildStoriesJson: true,
-    breakingChangesV7: true,
-  },
-  framework: '@storybook/preact-webpack5',
-};
-
-module.exports = mainConfig;

code/examples/preact-kitchen-sink/README.md

@@ -1,3 +0,0 @@
-# Storybook Demo
-
-This is a demo app to test `preact` integration with Storybook. Run `yarn install` to sync Storybook module with the source code and run `yarn storybook` to start the Storybook.

code/examples/preact-kitchen-sink/babel.config.json

@@ -1,11 +0,0 @@
-{
-  "plugins": [
-    [
-      "@babel/plugin-transform-react-jsx",
-      {
-        "pragma": "h",
-        "pragmaFrag": "Fragment"
-      }
-    ]
-  ]
-}

code/examples/preact-kitchen-sink/jest.config.js

@@ -1,12 +0,0 @@
-const config = require('../../jest.config');
-
-module.exports = {
-  ...config,
-  roots: [__dirname],
-  moduleNameMapper: {
-    '^react$': 'preact/compat',
-    '^react-dom/test-utils$': 'preact/test-utils',
-    '^react-dom$': 'preact/compat',
-    '^enzyme-adapter-react-16$': '<rootDir>/examples/preact-kitchen-sink/preact-enzyme-mapping.js',
-  },
-};

code/examples/preact-kitchen-sink/package.json

@@ -1,51 +0,0 @@
-{
-  "name": "preact-example",
-  "version": "7.0.0-alpha.38",
-  "private": true,
-  "scripts": {
-    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
-    "build-storybook": "storybook build",
-    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
-    "storybook": "storybook dev -p 9009 --no-manager-cache"
-  },
-  "dependencies": {
-    "global": "^4.4.0",
-    "preact": "^10.5.13"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.12.10",
-    "@storybook/addon-a11y": "7.0.0-alpha.38",
-    "@storybook/addon-actions": "7.0.0-alpha.38",
-    "@storybook/addon-backgrounds": "7.0.0-alpha.38",
-    "@storybook/addon-highlight": "7.0.0-alpha.38",
-    "@storybook/addon-links": "7.0.0-alpha.38",
-    "@storybook/addon-storyshots": "7.0.0-alpha.38",
-    "@storybook/addon-storysource": "7.0.0-alpha.38",
-    "@storybook/addon-viewport": "7.0.0-alpha.38",
-    "@storybook/addons": "7.0.0-alpha.38",
-    "@storybook/preact": "7.0.0-alpha.38",
-    "@storybook/preact-webpack5": "7.0.0-alpha.38",
-    "@storybook/source-loader": "7.0.0-alpha.38",
-    "@types/prop-types": "^15.7.3",
-    "@types/react": "^17",
-    "@types/react-dom": "^17",
-    "babel-loader": "^8.2.5",
-    "cross-env": "^7.0.3",
-    "enzyme-adapter-preact": "^0.2.0",
-    "file-loader": "^6.2.0",
-    "preact-render-to-string": "^5.1.19",
-    "prop-types": "^15.7.2",
-    "raw-loader": "^4.0.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "storybook": "7.0.0-alpha.38",
-    "svg-url-loader": "^7.1.1",
-    "webpack": "5",
-    "webpack-dev-server": "^4.8.1"
-  },
-  "storybook": {
-    "chromatic": {
-      "projectToken": "ls0ikhnwqt"
-    }
-  }
-}

code/examples/preact-kitchen-sink/preact-enzyme-mapping.js

@@ -1,3 +0,0 @@
-import { Adapter } from 'enzyme-adapter-preact';
-
-export default Adapter;

code/examples/preact-kitchen-sink/preactshots.test.js

@@ -1,9 +0,0 @@
-import path from 'path';
-import initStoryshots, { multiSnapshotWithOptions } from '@storybook/addon-storyshots';
-
-initStoryshots({
-  framework: 'preact',
-  configPath: path.join(__dirname, '.storybook'),
-  integrityOptions: { cwd: path.join(__dirname, 'src', 'stories') },
-  test: multiSnapshotWithOptions(),
-});