Merge branch 'next' into fix/method-call-reporting-inconsistency

2025-04-05 01:41:05 +08:00 · 2022-04-13 18:20:58 +02:00 · 2022-04-13 18:20:58 +02:00 · e6b3d9e0d7
commit e6b3d9e0d7
parent b4a16f5d82 e757d518c7
971 changed files with 13929 additions and 6034 deletions
--- a/.babelrc.js
+++ b/.babelrc.js
@ -55,7 +55,7 @@ module.exports = {
    '@babel/plugin-syntax-dynamic-import',
    ['@babel/plugin-proposal-object-rest-spread', { loose: true, useBuiltIns: true }],
    'babel-plugin-macros',
-    ['emotion', { sourceMap: true, autoLabel: true }],
+    ['@emotion', { sourceMap: true, autoLabel: 'always' }],
  ],
  env: {
    test: withTests,
@ -90,7 +90,7 @@ module.exports = {
        ['@babel/plugin-proposal-private-property-in-object', { loose: true }],
        ['@babel/plugin-proposal-class-properties', { loose: true }],
        'babel-plugin-macros',
-        ['emotion', { sourceMap: true, autoLabel: true }],
+        ['@emotion', { sourceMap: true, autoLabel: 'always' }],
        'babel-plugin-add-react-displayname',
      ],
      env: {
@ -125,7 +125,7 @@ module.exports = {
        ],
      ],
      plugins: [
-        'emotion',
+        '@emotion',
        'babel-plugin-macros',
        '@babel/plugin-transform-arrow-functions',
        '@babel/plugin-transform-shorthand-properties',
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@ -6,7 +6,7 @@ executors:
      class:
        description: The Resource class
        type: enum
-        enum: ['small', 'medium', 'large', 'xlarge']
+        enum: ['small', 'medium', 'medium+', 'large', 'xlarge']
        default: 'medium'
    working_directory: /tmp/storybook
    docker:
@ -19,7 +19,7 @@ executors:
      class:
        description: The Resource class
        type: enum
-        enum: ['small', 'medium', 'large', 'xlarge']
+        enum: ['small', 'medium', 'medium+', 'large', 'xlarge']
        default: 'medium'
    working_directory: /tmp/storybook
    docker:
@ -32,7 +32,7 @@ executors:
      class:
        description: The Resource class
        type: enum
-        enum: ['small', 'medium', 'large', 'xlarge']
+        enum: ['small', 'medium', 'medium+', 'large', 'xlarge']
        default: 'medium'
    working_directory: /tmp/storybook
    docker:
@ -118,23 +118,9 @@ jobs:
          name: examples
          command: |
            yarn run-chromatics
-  packtracker:
-    executor:
-      class: medium
-      name: sb_node_14_browsers
-    steps:
-      - git-shallow-clone/checkout_advanced:
-          clone_options: '--depth 1 --verbose'
-      - attach_workspace:
-          at: .
-      - run:
-          name: Report webpack stats for manager of official storybook
-          command: |
-            cd examples/official-storybook
-            yarn packtracker
  examples:
    executor:
-      class: medium
+      class: medium+
      name: sb_node_14_browsers
    parallelism: 17
    steps:
@ -194,13 +180,39 @@ jobs:
          name: Wait for registry
          command: yarn wait-on http://localhost:6000
      - run:
-          name: Run E2E tests
+          name: Run E2E (extended) tests
          command: yarn test:e2e-framework --clean --all --skip angular11 --skip angular --skip angular12 --skip vue3 --skip web_components_typescript --skip cra --skip react
          no_output_timeout: 5m
      - store_artifacts:
          path: /tmp/cypress-record
          destination: cypress
  e2e-tests-core:
+    executor:
+      class: large
+      name: sb_cypress_8_node_14
+    parallelism: 8
+    steps:
+      - git-shallow-clone/checkout_advanced:
+          clone_options: '--depth 1 --verbose'
+      - attach_workspace:
+          at: .
+      - run:
+          name: Running local registry
+          command: yarn local-registry --port 6000 --open
+          background: true
+      - run:
+          name: Wait for registry
+          command: yarn wait-on http://localhost:6000
+      - run:
+          name: Run E2E (core) tests
+          # Do not test CRA here because it's done in PnP part
+          # TODO: Remove `web_components_typescript` as soon as Lit 2 stable is released
+          command: yarn test:e2e-framework vue3 angular130 angular13 angular12 angular11 web_components_typescript web_components_lit2 react react_legacy_root_api vite_react
+          no_output_timeout: 5m
+      - store_artifacts:
+          path: /tmp/cypress-record
+          destination: cypress
+  e2e-tests-sb-docs:
    executor:
      class: large
      name: sb_cypress_8_node_14
@ -218,14 +230,9 @@ jobs:
          name: Wait for registry
          command: yarn wait-on http://localhost:6000
      - run:
-          name: Run E2E tests
-          # Do not test CRA here because it's done in PnP part
-          # TODO: Remove `web_components_typescript` as soon as Lit 2 stable is released
-          command: yarn test:e2e-framework vue3 angular130 angular13 angular12 angular11 web_components_typescript web_components_lit2 react
+          name: Run smoke tests
+          command: yarn test:e2e-framework angular_modern_inline_rendering --test-runner --docs-mode
          no_output_timeout: 5m
-      - store_artifacts:
-          path: /tmp/cypress-record
-          destination: cypress
  cra-bench:
    executor:
      class: medium
@ -385,6 +392,8 @@ jobs:
      - run:
          name: Test
          command: yarn test --coverage --runInBand --ci
+      - store_test_results:
+          path: junit.xml
      - persist_to_workspace:
          root: .
          paths:
@ -418,9 +427,6 @@ workflows:
      - smoke-tests:
          requires:
            - build
-      - packtracker:
-          requires:
-            - build
      - unit-tests:
          requires:
            - build
@ -439,6 +445,9 @@ workflows:
      - e2e-tests-core:
          requires:
            - publish
+      - e2e-tests-sb-docs:
+          requires:
+            - publish
      - e2e-tests-pnp:
          requires:
            - publish
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@ -12,7 +12,7 @@ If your answer is yes to any of these, please make sure to include it in your PR

 <!--

-Everybody: Please submit all PRs to the `next` branch unless they are specific to the current release. Storybook maintainers cherry-pick bug and documentation fixes into the `master` branch as part of the release process, so you shouldn't need to worry about this.
+Everybody: Please submit all PRs to the `next` branch unless they are specific to the current release. Storybook maintainers cherry-pick bug and documentation fixes into the `master` branch as part of the release process, so you shouldn't need to worry about this. For additional guidance: https://storybook.js.org/docs/react/contribute/how-to-contribute

 Maintainers: Please tag your pull request with at least one of the following:
 `["cleanup", "BREAKING CHANGE", "feature request", "bug", "documentation", "maintenance", "dependencies", "other"]`
--- a/.github/workflows/cron-weekly.yml
+++ b/.github/workflows/cron-weekly.yml
@ -0,0 +1,19 @@
+name: Markdown Links Check
+# runs every monday at 9 am
+on:
+  schedule:
+    - cron: "0 9 * * 1"
+
+jobs:
+  check-links:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: gaurav-nelson/github-action-markdown-link-check@v1
+        # checks all markdown files from important folders including all subfolders
+        with:
+          # only show errors that occur instead of successful links + errors
+          use-quiet-mode: 'yes'
+          # output full HTTP info for broken links
+          use-verbose-mode: 'yes'
+          config-file: '.github/workflows/markdown-link-check-config.json'
--- a/.github/workflows/danger-js.yml
+++ b/.github/workflows/danger-js.yml
@ -8,9 +8,12 @@ jobs:
    name: Danger JS
    runs-on: ubuntu-latest
    steps:
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '14'
      - uses: actions/checkout@master
      - name: Danger JS
-        uses: danger/danger-js@main
+        uses: danger/danger-js@10.9.0
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        with:
--- a/.github/workflows/markdown-link-check-config.json
+++ b/.github/workflows/markdown-link-check-config.json
@ -0,0 +1,19 @@
+{
+  "replacementPatterns": [
+    {
+      "pattern": "^/",
+      "replacement": "./"
+    }
+  ],
+  "ignorePatterns": [
+    {
+      "pattern": "localhost"
+    },
+    {
+      "pattern": "https://github.com/storybookjs/storybook/pull/*"
+    },
+    {
+      "pattern": "https://stackblitz.com/*"
+    }
+  ]
+}
--- a/.gitignore
+++ b/.gitignore
@ -35,6 +35,7 @@ tsconfig.tsbuildinfo
 lib/manager-webpack4/prebuilt
 lib/manager-webpack5/prebuilt
 examples/angular-cli/addon-jest.testresults.json
+junit.xml

 # Yarn stuff
 /**/.yarn/*
--- a/.gitpod.yml
+++ b/.gitpod.yml
@ -0,0 +1,9 @@
+# This configuration file was automatically generated by Gitpod.
+# Please adjust to your needs (see https://www.gitpod.io/docs/config-gitpod-file)
+# and commit this file to your remote git repository to share the goodness with others.
+
+tasks:
+  - init: yarn
+    command: yarn bootstrap --core
+
+
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,3 +1,264 @@
+## 6.5.0-alpha.62 (April 13, 2022)
+
+Test publish with npm 2FA enabled for addon-jest
+
+## 6.5.0-alpha.61 (April 11, 2022)
+
+### Features
+
+- UI: Add URL parameters to SB to tweak visible UI ([#17891](https://github.com/storybookjs/storybook/pull/17891))
+
+### Maintenance
+
+- Core: Followup changing CJS entrypoints to ESM ([#17927](https://github.com/storybookjs/storybook/pull/17927))
+
+### Dependency Upgrades
+
+- Export `createCache` from `@storybook/theming` ([#17929](https://github.com/storybookjs/storybook/pull/17929))
+
+## 6.4.21 (April 9, 2022)
+
+### Bug Fixes
+
+- Angular: Do not use default for includePaths ([#17876](https://github.com/storybookjs/storybook/pull/17876))
+- Controls: Fix date control width in addons panel ([#17780](https://github.com/storybookjs/storybook/pull/17780))
+- CLI: Preserve quote style in automigrate ([#17858](https://github.com/storybookjs/storybook/pull/17858))
+- CLI: Update the exclude list for upgrade warnings ([#17909](https://github.com/storybookjs/storybook/pull/17909))
+
+## 6.5.0-alpha.60 (April 9, 2022)
+
+### Features
+
+- Core: Add story preloading to optimize lazy compilation ([#17903](https://github.com/storybookjs/storybook/pull/17903))
+
+### Bug Fixes
+
+- UI: Fix pseudo class potential unsafe warning ([#17911](https://github.com/storybookjs/storybook/pull/17911))
+- Core: Fix user-supplied project-level `render` in v6 store ([#17885](https://github.com/storybookjs/storybook/pull/17885))
+
+### Dependency Upgrades
+
+- Upgrade polished to 4.2.2 ([#17913](https://github.com/storybookjs/storybook/pull/17913))
+- Bump min vue-loader dependency version ([#17912](https://github.com/storybookjs/storybook/pull/17912))
+
+## 6.5.0-alpha.59 (April 7, 2022)
+
+### Maintenance
+
+- CLI: Update the exclude list for upgrade warnings ([#17909](https://github.com/storybookjs/storybook/pull/17909))
+- Examples: Added an external-docs example to show the basic use case ([#17807](https://github.com/storybookjs/storybook/pull/17807))
+
+### Dependency Upgrades
+
+- Migration to Emotion 11 ([#17640](https://github.com/storybookjs/storybook/pull/17640))
+
+## 6.5.0-alpha.58 (April 7, 2022)
+
+### Features
+
+- CLI: Add webpack4/5 auto-detection ([#17908](https://github.com/storybookjs/storybook/pull/17908))
+- React: Add support for react18's new root API ([#17215](https://github.com/storybookjs/storybook/pull/17215))
+
+### Bug Fixes
+
+- UI: Fix canvas as initialActive for fullscreen mode in mobile ([#17906](https://github.com/storybookjs/storybook/pull/17906))
+- UI: Fix mobile fullscreen UI ([#17873](https://github.com/storybookjs/storybook/pull/17873))
+
+### Maintenance
+
+- Core: Avoid framework imports from core/client ([#17875](https://github.com/storybookjs/storybook/pull/17875))
+- Webpack: Make manager and preview build processes cancelable ([#17809](https://github.com/storybookjs/storybook/pull/17809))
+- Build: Add vite-react to e2e tests ([#17871](https://github.com/storybookjs/storybook/pull/17871))
+- CLI: Upgrade vue3 template to use webpack5 builder ([#17896](https://github.com/storybookjs/storybook/pull/17896))
+- Build: Exclude @storybook/builder-vite from verdaccio ([#17897](https://github.com/storybookjs/storybook/pull/17897))
+
+## 6.5.0-alpha.57 (April 6, 2022)
+
+### Bug Fixes
+
+- Svelte: Fix dynamic source snippets ([#17866](https://github.com/storybookjs/storybook/pull/17866))
+- Angular: Do not use default for includePaths ([#17876](https://github.com/storybookjs/storybook/pull/17876))
+
+### Maintenance
+
+- Addon-docs: assume links starting with "https://" are external ([#17819](https://github.com/storybookjs/storybook/pull/17819))
+
+### Dependency Upgrades
+
+- Unify CSF version ([#17895](https://github.com/storybookjs/storybook/pull/17895))
+
+## 6.5.0-alpha.56 (April 5, 2022)
+
+### Features
+
+- Controls: Rework conditional controls with globals, queries ([#17883](https://github.com/storybookjs/storybook/pull/17883))
+- UI: Add Brand target config option ([#17814](https://github.com/storybookjs/storybook/pull/17814))
+
+### Bug Fixes
+
+- Controls: Fix date control width in addons panel ([#17780](https://github.com/storybookjs/storybook/pull/17780))
+
+### Maintenance
+
+- Core: Update some references to use ESM rather than CJS ([#17868](https://github.com/storybookjs/storybook/pull/17868))
+- Build: Upgrade from deprecated circleci docker img ([#17832](https://github.com/storybookjs/storybook/pull/17832))
+- Build: Parallel e2e (this might be expensive) ([#17842](https://github.com/storybookjs/storybook/pull/17842))
+- Build: Add junit summary for CircleCI ([#17867](https://github.com/storybookjs/storybook/pull/17867))
+
+## 6.5.0-alpha.55 (April 3, 2022)
+
+### Features
+
+- CLI: Detect vite project, use vite builder automatically ([#17860](https://github.com/storybookjs/storybook/pull/17860))
+- CLI: Default new vite projects to storyStoreV7 ([#17859](https://github.com/storybookjs/storybook/pull/17859))
+
+### Bug Fixes
+
+- Core: Restore preview-web composeConfigs export ([#17861](https://github.com/storybookjs/storybook/pull/17861))
+- CLI: Preserve quote style in automigrate ([#17858](https://github.com/storybookjs/storybook/pull/17858))
+
+## 6.4.20 (April 1, 2022)
+
+### Bug Fixes
+
+- CLI: Fix vite/jest issue with mocked global ([#17830](https://github.com/storybookjs/storybook/pull/17830))
+- Angular: Fix multiple calls of Input setter ([#17633](https://github.com/storybookjs/storybook/pull/17633))
+- Web-components: Fix CSS class usage in CLI template ([#17702](https://github.com/storybookjs/storybook/pull/17702))
+- UI: Fix composition support in safari ([#17679](https://github.com/storybookjs/storybook/pull/17679))
+- Addon-docs: DocsPage story order should match the index ([#17669](https://github.com/storybookjs/storybook/pull/17669))
+- Core: Fix core.builder check ([#17606](https://github.com/storybookjs/storybook/pull/17606))
+
+### Maintenance
+
+- CLI: Add automigration to `@storybook/builder-vite` ([#17829](https://github.com/storybookjs/storybook/pull/17829))
+
+## 6.5.0-alpha.54 (April 1, 2022)
+
+### Dependency Upgrades
+
+- React: Update react and react-dom peerDeps for React18 ([#17853](https://github.com/storybookjs/storybook/pull/17853))
+
+## 6.5.0-alpha.53 (April 1, 2022)
+
+### Features
+
+- Core: Add simplified manager.js/preview.js API for addons ([#17755](https://github.com/storybookjs/storybook/pull/17755))
+- Core/React: Add testing utilities ([#17282](https://github.com/storybookjs/storybook/pull/17282))
+
+### Bug Fixes
+
+- Addon-docs: Fix dependencies for yarn pnp ([#17705](https://github.com/storybookjs/storybook/pull/17705))
+- Webpack: Expand version ranges of webpack in the apps ([#17834](https://github.com/storybookjs/storybook/pull/17834))
+- CLI: Fix vite/jest issue with mocked global ([#17830](https://github.com/storybookjs/storybook/pull/17830))
+
+### Maintenance
+
+- Build: Remove packtracker ([#17841](https://github.com/storybookjs/storybook/pull/17841))
+- Build: Swap order of e2e tests around ([#17840](https://github.com/storybookjs/storybook/pull/17840))
+- Build: Add weekly check for broken markdown links ([#17799](https://github.com/storybookjs/storybook/pull/17799))
+- Build: Switch to use medium+ ([#17837](https://github.com/storybookjs/storybook/pull/17837))
+
+## 6.5.0-alpha.52 (March 31, 2022)
+
+### Bug Fixes
+
+- UI: Add back CacheProvider from emotion to lib/theming ([#17820](https://github.com/storybookjs/storybook/pull/17820))
+- Core: Add a feature flag for enabling crossOriginIsolated ([#17815](https://github.com/storybookjs/storybook/pull/17815))
+- Angular: Fix multiple calls of Input setter ([#17633](https://github.com/storybookjs/storybook/pull/17633))
+- UI: Wait 100ms before showing spinner and fix story overlaying it ([#17753](https://github.com/storybookjs/storybook/pull/17753))
+
+### Maintenance
+
+- CLI: Add automigration to `@storybook/builder-vite` ([#17829](https://github.com/storybookjs/storybook/pull/17829))
+- Build: Add setup-node version for danger ([#17826](https://github.com/storybookjs/storybook/pull/17826))
+- Add contributing instructions to PULL_REQUEST_TEMPLATE ([#17713](https://github.com/storybookjs/storybook/pull/17713))
+
+## 6.5.0-alpha.51 (March 25, 2022)
+
+### Features
+
+- SyntaxHighlighter: Add prettier for code formatting ([#17746](https://github.com/storybookjs/storybook/pull/17746))
+
+### Maintenance
+
+- Build: Add main overrides to e2e config and possibility to run test runner ([#17778](https://github.com/storybookjs/storybook/pull/17778))
+
+## 6.5.0-alpha.50 (March 23, 2022)
+
+### Features
+
+- Controls: Add conditional controls ([#17536](https://github.com/storybookjs/storybook/pull/17536))
+- Core: Add headers to enable SharedArrayBuffer in stories ([#16970](https://github.com/storybookjs/storybook/pull/16970))
+- UI: Button for toggling addons panel ([#17714](https://github.com/storybookjs/storybook/pull/17714))
+
+### Bug Fixes
+
+- Core: Ensure simultaneous first access to stories.json waits ([#17785](https://github.com/storybookjs/storybook/pull/17785))
+- Reload iframe when the url changes ([#17644](https://github.com/storybookjs/storybook/pull/17644))
+- UI: Fix brand logo layout shift ([#16467](https://github.com/storybookjs/storybook/pull/16467))
+- UI: Fix nesting issue for refs in sidebar component ([#17726](https://github.com/storybookjs/storybook/pull/17726))
+- Core: Fix filesystem cache missing return ([#17748](https://github.com/storybookjs/storybook/pull/17748))
+- Addon-docs: Fix binding of the `renderStoryToElement` passed to `DocsRender` ([#17742](https://github.com/storybookjs/storybook/pull/17742))
+
+### Maintenance
+
+- Addon-docs/Vue: Add tests for sourceDecorator vnodeToString ([#17764](https://github.com/storybookjs/storybook/pull/17764))
+- Controls: Date control tests ([#17765](https://github.com/storybookjs/storybook/pull/17765))
+- Remove mock directories from Jest test coverage ([#17771](https://github.com/storybookjs/storybook/pull/17771))
+- fix dts-localize script ([#17747](https://github.com/storybookjs/storybook/pull/17747))
+
+## 6.5.0-alpha.49 (March 17, 2022)
+
+### Bug Fixes
+
+- Addon-docs/Svelte: Fix `HOC.svelte` reference ([#17731](https://github.com/storybookjs/storybook/pull/17731))
+- UI: Fix composition support in safari ([#17679](https://github.com/storybookjs/storybook/pull/17679))
+
+## 6.5.0-alpha.48 (March 14, 2022)
+
+### Features
+
+- Addon-docs: Auto-disable docs presets if docs/controls unused ([#17697](https://github.com/storybookjs/storybook/pull/17697))
+
+### Bug Fixes
+
+- Web-components: Fix CSS class usage in CLI template ([#17702](https://github.com/storybookjs/storybook/pull/17702))
+
+### Maintenance
+
+- Addon-docs: Refactor docs support into individual framework packages ([#17695](https://github.com/storybookjs/storybook/pull/17695))
+
+## 6.5.0-alpha.47 (March 10, 2022)
+
+### Bug Fixes
+
+- Webpack4: Fix useExports for angular-cli ([#17674](https://github.com/storybookjs/storybook/pull/17674))
+- Core: Ensure that we do not render a story twice if re-rendered during preparing ([#17599](https://github.com/storybookjs/storybook/pull/17599))
+- Addon-docs: DocsPage story order should match the index ([#17669](https://github.com/storybookjs/storybook/pull/17669))
+- Core: Fix staticDirs path issue on Windows ([#17641](https://github.com/storybookjs/storybook/pull/17641))
+- Angular: Set ForkTsCheckerWebpackPlugin to async ([#17389](https://github.com/storybookjs/storybook/pull/17389))
+- Core: Fix core.builder check ([#17606](https://github.com/storybookjs/storybook/pull/17606))
+
+### Maintenance
+
+- Examples: Build stories.json for examples that support it ([#17670](https://github.com/storybookjs/storybook/pull/17670))
+- Core: Refactor preview rendering out of `PreviewWeb` ([#17598](https://github.com/storybookjs/storybook/pull/17598))
+- Prevent lint hook from running on all files ([#17662](https://github.com/storybookjs/storybook/pull/17662))
+- TypeScript: Change imports of types to be prefixed ([#17627](https://github.com/storybookjs/storybook/pull/17627))
+- Build: Give linting sub-commands a directory to run against ([#17545](https://github.com/storybookjs/storybook/pull/17545))
+- TypeScript: remove unnecessary 'as any' ([#17595](https://github.com/storybookjs/storybook/pull/17595))
+
+### Dependency Upgrades
+
+- Update shelljs dependency version ([#17602](https://github.com/storybookjs/storybook/pull/17602))
+- Remove unused `uuid` that's also deprecated ([#17615](https://github.com/storybookjs/storybook/pull/17615))
+
+## 6.5.0-alpha.46 (March 5, 2022)
+
+### Bug Fixes
+
+- Addon-interactions: Use 'global' package instead of `global` ([#17614](https://github.com/storybookjs/storybook/pull/17614))
+
 ## 6.5.0-alpha.45 (March 2, 2022)

 ### Bug Fixes
@ -55,6 +316,21 @@
 - Build: Fix CRA repro generator and e2e test in PnP mode ([#17375](https://github.com/storybookjs/storybook/pull/17375))
 - UI: Add a custom title story for heading component ([#17487](https://github.com/storybookjs/storybook/pull/17487))

+## 6.4.19 (February 12, 2022)
+
+### Features
+
+- CLI/React: Add interactions to cli template ([#17345](https://github.com/storybookjs/storybook/pull/17345))
+- CLI/Angular: Add interactions to cli template ([#17437](https://github.com/storybookjs/storybook/pull/17437))
+
+### Bug Fixes
+
+- Core/CLI: Add `extract` function to `PreviewWeb` and use it in `sb extract` if available ([#17447](https://github.com/storybookjs/storybook/pull/17447))
+- Core: Ensure we show an error when `configure()` throws ([#17435](https://github.com/storybookjs/storybook/pull/17435))
+- Core: Fix `useParameter` with nullish coalescing ([#17327](https://github.com/storybookjs/storybook/pull/17327))
+- Addon-links: Fix export statement in react.d.ts ([#17434](https://github.com/storybookjs/storybook/pull/17434))
+- Addon-docs: Fix typo in ArgsTable tooltip ([#17404](https://github.com/storybookjs/storybook/pull/17404))
+
 ## 6.5.0-alpha.39 (February 11, 2022)

 ### Features
--- a/MIGRATION.md
+++ b/MIGRATION.md
@ -1,6 +1,11 @@
 <h1>Migration</h1>

 - [From version 6.4.x to 6.5.0](#from-version-64x-to-650)
+  - [React18 new root API](#react18-new-root-api)
+  - [Deprecated register.js](#deprecated-registerjs)
+  - [Dropped support for addon-actions addDecorators](#dropped-support-for-addon-actions-adddecorators)
+  - [Vite builder renamed](#vite-builder-renamed)
+  - [Docs framework refactor for React](#docs-framework-refactor-for-react)
  - [Opt-in MDX2 support](#opt-in-mdx2-support)
  - [CSF3 auto-title improvements](#csf3-auto-title-improvements)
    - [Auto-title filename case](#auto-title-filename-case)
@ -195,6 +200,56 @@

 ## From version 6.4.x to 6.5.0

+### React18 new root API
+
+React 18 introduces a [new root API](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis). Starting in 6.5, Storybook for React will auto-detect your react version and use the new root API automatically if you're on React18.
+
+If you wish to opt out of the new root API, set the `reactOptions.legacyRootApi` flag in your `.storybook/main.js` config:
+
+```js
+module.exports = {
+  reactOptions: { legacyRootApi: true },
+};
+```
+
+### Deprecated register.js
+
+In ancient versions of Storybook, addons were registered by referring to `addon-name/register.js`. This is going away in SB7.0. Instead you should just add `addon-name` to the `addons` array in `.storybook/main.js`.
+
+Before:
+
+```js
+module.exports = { addons: ['my-addon/register.js'] };
+```
+
+After:
+
+```js
+module.exports = { addons: ['my-addon'] };
+```
+
+### Dropped support for addon-actions addDecorators
+
+Prior to SB6.5, `addon-actions` provided an option called `addDecorators`. In SB6.5, decorators are applied always. This is technically a breaking change, so if this affects you please file an issue in Github and we can consider reverting this in a patch release.
+
+### Vite builder renamed
+
+SB6.5 renames Storybook's [Vite builder](https://github.com/storybookjs/builder-vite) from `storybook-builder-vite` to `@storybook/builder-vite`. This move is part of a larger effort to improve Vite support in Storybook.
+
+Storybook's `automigrate` command can migrate for you. To manually migrate:
+
+1. Remove `storybook-builder-vite` from your `package.json` dependencies
+2. Install `@storybook/builder-vite`
+3. Update your `core.builder` setting in `.storybook/main.js` to `@storybook/builder-vite`.
+
+### Docs framework refactor for React
+
+SB6.5 moves framework specializations (e.g. ArgType inference, dynamic snippet rendering) out of `@storybook/addon-docs` and into the specific framework packages to which they apply (e.g. `@storybook/react`).
+
+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
+
 ### Opt-in MDX2 support

 SB6.5 adds experimental opt-in support for MDXv2. To install:
--- a/RELEASES.md
+++ b/RELEASES.md
@ -114,5 +114,5 @@ in a patch release.
 #### How does my PR get merged?

 - For PATCH PR's, any maintainer can review, test, approve, and merge it.
- For MINOR/MAJOR PR's, once a maintainer reviews, tests, and approves it, s/he should clear it with the other maintainers before merging it into the release branch.
+- For MINOR/MAJOR PR's, once a maintainer reviews, tests, and approves it, they should clear it with the other maintainers before merging it into the release branch.
 - Once a release date has been set and we cut off merging, we'll create a temporary branch to hold that release so that it doesn't block merging to `next`.
--- a/addons/a11y/manager.js
+++ b/addons/a11y/manager.js
@ -0,0 +1 @@
+import './dist/esm/manager';
--- a/addons/a11y/package.json
+++ b/addons/a11y/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-a11y",
-  "version": "6.5.0-alpha.45",
+  "version": "6.5.0-alpha.62",
  "description": "Test component compliance with web accessibility standards",
  "keywords": [
    "a11y",
@ -45,14 +45,14 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.5.0-alpha.45",
-    "@storybook/api": "6.5.0-alpha.45",
-    "@storybook/channels": "6.5.0-alpha.45",
-    "@storybook/client-logger": "6.5.0-alpha.45",
-    "@storybook/components": "6.5.0-alpha.45",
-    "@storybook/core-events": "6.5.0-alpha.45",
-    "@storybook/csf": "0.0.2--canary.87bc651.0",
-    "@storybook/theming": "6.5.0-alpha.45",
+    "@storybook/addons": "6.5.0-alpha.62",
+    "@storybook/api": "6.5.0-alpha.62",
+    "@storybook/channels": "6.5.0-alpha.62",
+    "@storybook/client-logger": "6.5.0-alpha.62",
+    "@storybook/components": "6.5.0-alpha.62",
+    "@storybook/core-events": "6.5.0-alpha.62",
+    "@storybook/csf": "0.0.2--canary.7c6c115.0",
+    "@storybook/theming": "6.5.0-alpha.62",
    "axe-core": "^4.2.0",
    "core-js": "^3.8.2",
    "global": "^4.4.0",
@ -67,8 +67,8 @@
    "@types/webpack-env": "^1.16.0"
  },
  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
  },
  "peerDependenciesMeta": {
    "react": {
@ -81,7 +81,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "af457c20c773f57bea0504bf525a2f74852fe94a",
+  "gitHead": "e6025078374acd23cb15d3480c882229742a7ac1",
  "sbmodern": "dist/modern/index.js",
  "storybook": {
    "displayName": "Accessibility",
--- a/addons/a11y/preset.js
+++ b/addons/a11y/preset.js
@ -1,13 +0,0 @@
-function managerEntries(entry = []) {
-  return [...entry, require.resolve('./dist/esm/register')];
-}
-
-function config(entry = []) {
-  return [
-    ...entry,
-    require.resolve('./dist/esm/a11yRunner'),
-    require.resolve('./dist/esm/a11yHighlight'),
-  ];
-}
-
-module.exports = { managerEntries, config };
--- a/addons/a11y/preview.js
+++ b/addons/a11y/preview.js
@ -0,0 +1 @@
+export * from './dist/esm/preview';
--- a/addons/a11y/register.js
+++ b/addons/a11y/register.js
@ -1 +1,6 @@
-require('./dist/esm/register');
+import { once } from '@storybook/client-logger';
+import './manager';
+
+once.warn(
+  'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs'
+);
--- a/addons/a11y/src/addDecorator.ts
+++ b/addons/a11y/src/addDecorator.ts
@ -1,3 +0,0 @@
-import { withA11y } from '.';
-
-export const decorators = [withA11y];
--- a/addons/a11y/src/components/Report/Rules.tsx
+++ b/addons/a11y/src/components/Report/Rules.tsx
@ -10,8 +10,8 @@ const List = styled.div({
  paddingBottom: 4,
  paddingRight: 4,
  paddingTop: 4,
-  fontWeight: '400',
-} as any);
+  fontWeight: 400,
+});

 const Item = styled.div<{ elementWidth: number }>(({ elementWidth }) => {
  const maxWidthBeforeBreak = 407;
--- a/addons/a11y/src/index.ts
+++ b/addons/a11y/src/index.ts
@ -1,4 +1,4 @@
-import { AnyFramework, DecoratorFunction } from '@storybook/csf';
+import type { AnyFramework, DecoratorFunction } from '@storybook/csf';
 import deprecate from 'util-deprecate';
 import dedent from 'ts-dedent';

--- a/addons/a11y/src/register.tsx
+++ b/addons/a11y/src/register.tsx
--- a/addons/a11y/src/preview.tsx
+++ b/addons/a11y/src/preview.tsx
@ -0,0 +1,2 @@
+import './a11yRunner';
+import './a11yHighlight';
--- a/addons/actions/manager.js
+++ b/addons/actions/manager.js
@ -0,0 +1 @@
+import './dist/esm/manager';
--- a/addons/actions/package.json
+++ b/addons/actions/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-actions",
-  "version": "6.5.0-alpha.45",
+  "version": "6.5.0-alpha.62",
  "description": "Get UI feedback when an action is performed on an interactive element",
  "keywords": [
    "storybook",
@ -41,17 +41,18 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.5.0-alpha.45",
-    "@storybook/api": "6.5.0-alpha.45",
-    "@storybook/components": "6.5.0-alpha.45",
-    "@storybook/core-events": "6.5.0-alpha.45",
-    "@storybook/csf": "0.0.2--canary.87bc651.0",
-    "@storybook/theming": "6.5.0-alpha.45",
+    "@storybook/addons": "6.5.0-alpha.62",
+    "@storybook/api": "6.5.0-alpha.62",
+    "@storybook/client-logger": "6.5.0-alpha.62",
+    "@storybook/components": "6.5.0-alpha.62",
+    "@storybook/core-events": "6.5.0-alpha.62",
+    "@storybook/csf": "0.0.2--canary.7c6c115.0",
+    "@storybook/theming": "6.5.0-alpha.62",
    "core-js": "^3.8.2",
    "fast-deep-equal": "^3.1.3",
    "global": "^4.4.0",
    "lodash": "^4.17.21",
-    "polished": "^4.0.5",
+    "polished": "^4.2.2",
    "prop-types": "^15.7.2",
    "react-inspector": "^5.1.0",
    "regenerator-runtime": "^0.13.7",
@ -65,8 +66,8 @@
    "@types/webpack-env": "^1.16.0"
  },
  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
  },
  "peerDependenciesMeta": {
    "react": {
@ -79,7 +80,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "af457c20c773f57bea0504bf525a2f74852fe94a",
+  "gitHead": "e6025078374acd23cb15d3480c882229742a7ac1",
  "sbmodern": "dist/modern/index.js",
  "storybook": {
    "displayName": "Actions",
--- a/addons/actions/preset.js
+++ b/addons/actions/preset.js
@ -1,16 +0,0 @@
-function managerEntries(entry, options) {
-  return [...entry, require.resolve('./dist/esm/register')];
-}
-
-function config(entry = [], { addDecorator = true } = {}) {
-  const actionConfig = [];
-  if (addDecorator) {
-    actionConfig.push(require.resolve('./dist/esm/preset/addDecorator'));
-  }
-  return [...entry, ...actionConfig, require.resolve('./dist/esm/preset/addArgs')];
-}
-
-module.exports = {
-  managerEntries,
-  config,
-};
--- a/addons/actions/preview.js
+++ b/addons/actions/preview.js
@ -0,0 +1 @@
+export * from './dist/esm/preset/preview';
--- a/addons/actions/register.js
+++ b/addons/actions/register.js
@ -1 +1,6 @@
-require('./dist/esm/register');
+import { once } from '@storybook/client-logger';
+import './manager';
+
+once.warn(
+  'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs'
+);
--- a/addons/actions/src/components/ActionLogger/index.tsx
+++ b/addons/actions/src/components/ActionLogger/index.tsx
@ -1,5 +1,6 @@
 import React, { Fragment } from 'react';
-import { styled, withTheme, Theme } from '@storybook/theming';
+import { styled, withTheme } from '@storybook/theming';
+import type { Theme } from '@storybook/theming';

 import Inspector from 'react-inspector';
 import { ActionBar, ScrollArea } from '@storybook/components';
--- a/addons/actions/src/register.tsx
+++ b/addons/actions/src/register.tsx
--- a/addons/actions/src/preset/addArgsHelpers.test.ts
+++ b/addons/actions/src/preset/addArgsHelpers.test.ts
@ -1,4 +1,4 @@
-import { StoryContext } from '@storybook/addons';
+import type { StoryContext } from '@storybook/addons';
 import { inferActionsFromArgTypesRegex, addActionsFromArgTypes } from './addArgsHelpers';

 describe('actions parameter enhancers', () => {
--- a/addons/actions/src/preset/preview.tsx
+++ b/addons/actions/src/preset/preview.tsx
@ -0,0 +1,2 @@
+export * from './addDecorator';
+export * from './addArgs';
--- a/addons/actions/src/preview/action.ts
+++ b/addons/actions/src/preview/action.ts
@ -25,7 +25,7 @@ const serializeArg = <T>(a: T) => {
    );
    e.persist();
    const viewDescriptor = Object.getOwnPropertyDescriptor(e, 'view');
-    // dont send the entire window object over.
+    // don't send the entire window object over.
    const view: unknown = viewDescriptor?.value;
    if (typeof view === 'object' && view?.constructor.name === 'Window') {
      Object.defineProperty(e, 'view', {
--- a/addons/backgrounds/manager.js
+++ b/addons/backgrounds/manager.js
@ -0,0 +1 @@
+import './dist/esm/manager';
--- a/addons/backgrounds/package.json
+++ b/addons/backgrounds/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-backgrounds",
-  "version": "6.5.0-alpha.45",
+  "version": "6.5.0-alpha.62",
  "description": "Switch backgrounds to view components in different settings",
  "keywords": [
    "addon",
@ -45,13 +45,13 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.5.0-alpha.45",
-    "@storybook/api": "6.5.0-alpha.45",
-    "@storybook/client-logger": "6.5.0-alpha.45",
-    "@storybook/components": "6.5.0-alpha.45",
-    "@storybook/core-events": "6.5.0-alpha.45",
-    "@storybook/csf": "0.0.2--canary.87bc651.0",
-    "@storybook/theming": "6.5.0-alpha.45",
+    "@storybook/addons": "6.5.0-alpha.62",
+    "@storybook/api": "6.5.0-alpha.62",
+    "@storybook/client-logger": "6.5.0-alpha.62",
+    "@storybook/components": "6.5.0-alpha.62",
+    "@storybook/core-events": "6.5.0-alpha.62",
+    "@storybook/csf": "0.0.2--canary.7c6c115.0",
+    "@storybook/theming": "6.5.0-alpha.62",
    "core-js": "^3.8.2",
    "global": "^4.4.0",
    "memoizerific": "^1.11.3",
@ -63,8 +63,8 @@
    "@types/webpack-env": "^1.16.0"
  },
  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
  },
  "peerDependenciesMeta": {
    "react": {
@ -77,7 +77,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "af457c20c773f57bea0504bf525a2f74852fe94a",
+  "gitHead": "e6025078374acd23cb15d3480c882229742a7ac1",
  "sbmodern": "dist/modern/index.js",
  "storybook": {
    "displayName": "Backgrounds",
--- a/addons/backgrounds/preset.js
+++ b/addons/backgrounds/preset.js
@ -1,16 +0,0 @@
-function config(entry = []) {
-  return [
-    ...entry,
-    require.resolve('./dist/esm/preset/addDecorator'),
-    require.resolve('./dist/esm/preset/addParameter'),
-  ];
-}
-
-function managerEntries(entry = [], options) {
-  return [...entry, require.resolve('./dist/esm/register')];
-}
-
-module.exports = {
-  managerEntries,
-  config,
-};
--- a/addons/backgrounds/preview.js
+++ b/addons/backgrounds/preview.js
@ -0,0 +1 @@
+export * from './dist/esm/preview';
--- a/addons/backgrounds/register.js
+++ b/addons/backgrounds/register.js
@ -1 +1,6 @@
-require('./dist/esm/register');
+import { once } from '@storybook/client-logger';
+import './manager';
+
+once.warn(
+  'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs'
+);
--- a/addons/backgrounds/src/decorators/index.ts
+++ b/addons/backgrounds/src/decorators/index.ts
@ -1,2 +0,0 @@
-export * from './withBackground';
-export * from './withGrid';
--- a/addons/backgrounds/src/decorators/withBackground.ts
+++ b/addons/backgrounds/src/decorators/withBackground.ts
@ -1,5 +1,5 @@
 import { useMemo, useEffect } from '@storybook/addons';
-import { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/csf';
+import type { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/csf';

 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
 import {
--- a/addons/backgrounds/src/decorators/withGrid.ts
+++ b/addons/backgrounds/src/decorators/withGrid.ts
@ -1,7 +1,7 @@
 import dedent from 'ts-dedent';
 import deprecate from 'util-deprecate';
 import { useMemo, useEffect } from '@storybook/addons';
-import { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/csf';
+import type { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/csf';

 import { clearStyles, addGridStyle } from '../helpers';
 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
--- a/addons/backgrounds/src/register.tsx
+++ b/addons/backgrounds/src/register.tsx
--- a/addons/backgrounds/src/preset/addDecorator.tsx
+++ b/addons/backgrounds/src/preset/addDecorator.tsx
@ -1,3 +0,0 @@
-import { withGrid, withBackground } from '../decorators';
-
-export const decorators = [withGrid, withBackground];
--- a/addons/backgrounds/src/preset/addParameter.tsx
+++ b/addons/backgrounds/src/preset/addParameter.tsx
@ -1,3 +1,7 @@
+import { withBackground } from './decorators/withBackground';
+import { withGrid } from './decorators/withGrid';
+
+export const decorators = [withGrid, withBackground];
 export const parameters = {
  backgrounds: {
    grid: {
--- a/addons/controls/manager.js
+++ b/addons/controls/manager.js
@ -0,0 +1 @@
+import './dist/esm/manager';
--- a/addons/controls/package.json
+++ b/addons/controls/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-controls",
-  "version": "6.5.0-alpha.45",
+  "version": "6.5.0-alpha.62",
  "description": "Interact with component inputs dynamically in the Storybook UI",
  "keywords": [
    "addon",
@ -25,8 +25,8 @@
    "url": "https://opencollective.com/storybook"
  },
  "license": "MIT",
-  "main": "dist/cjs/register.js",
-  "module": "dist/esm/register.js",
+  "main": "dist/cjs/manager.js",
+  "module": "dist/esm/manager.js",
  "types": "dist/ts3.9/index.d.ts",
  "typesVersions": {
    "<3.8": {
@ -45,22 +45,22 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.5.0-alpha.45",
-    "@storybook/api": "6.5.0-alpha.45",
-    "@storybook/client-logger": "6.5.0-alpha.45",
-    "@storybook/components": "6.5.0-alpha.45",
-    "@storybook/core-common": "6.5.0-alpha.45",
-    "@storybook/csf": "0.0.2--canary.87bc651.0",
-    "@storybook/node-logger": "6.5.0-alpha.45",
-    "@storybook/store": "6.5.0-alpha.45",
-    "@storybook/theming": "6.5.0-alpha.45",
+    "@storybook/addons": "6.5.0-alpha.62",
+    "@storybook/api": "6.5.0-alpha.62",
+    "@storybook/client-logger": "6.5.0-alpha.62",
+    "@storybook/components": "6.5.0-alpha.62",
+    "@storybook/core-common": "6.5.0-alpha.62",
+    "@storybook/csf": "0.0.2--canary.7c6c115.0",
+    "@storybook/node-logger": "6.5.0-alpha.62",
+    "@storybook/store": "6.5.0-alpha.62",
+    "@storybook/theming": "6.5.0-alpha.62",
    "core-js": "^3.8.2",
    "lodash": "^4.17.21",
    "ts-dedent": "^2.0.0"
  },
  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
  },
  "peerDependenciesMeta": {
    "react": {
@ -73,8 +73,8 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "af457c20c773f57bea0504bf525a2f74852fe94a",
-  "sbmodern": "dist/modern/register.js",
+  "gitHead": "e6025078374acd23cb15d3480c882229742a7ac1",
+  "sbmodern": "dist/modern/manager.js",
  "storybook": {
    "displayName": "Controls",
    "icon": "https://user-images.githubusercontent.com/263385/101991669-479cc600-3c7c-11eb-93d9-38b67e8371f2.png",
--- a/addons/controls/preset.js
+++ b/addons/controls/preset.js
@ -1,8 +0,0 @@
-function managerEntries(entry = [], options) {
-  // eslint-disable-next-line global-require
-  const { checkDocsLoaded } = require('./dist/cjs/preset/checkDocsLoaded');
-  checkDocsLoaded(options.configDir);
-  return [...entry, require.resolve('./dist/esm/register')];
-}
-
-module.exports = { managerEntries };
--- a/addons/controls/register.js
+++ b/addons/controls/register.js
@ -1 +1,6 @@
-import './dist/esm/register';
+import { once } from '@storybook/client-logger';
+import './manager';
+
+once.warn(
+  'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs'
+);
--- a/addons/controls/src/ControlsPanel.tsx
+++ b/addons/controls/src/ControlsPanel.tsx
@ -1,5 +1,12 @@
 import React, { FC } from 'react';
-import { ArgTypes, useArgs, useArgTypes, useParameter, useStorybookState } from '@storybook/api';
+import {
+  ArgTypes,
+  useArgs,
+  useGlobals,
+  useArgTypes,
+  useParameter,
+  useStorybookState,
+} from '@storybook/api';
 import { ArgsTable, NoControlsWarning, PresetColor, SortType } from '@storybook/components';

 import { PARAM_KEY } from './constants';
@ -13,6 +20,7 @@ interface ControlsParameters {

 export const ControlsPanel: FC = () => {
  const [args, updateArgs, resetArgs] = useArgs();
+  const [globals] = useGlobals();
  const rows = useArgTypes();
  const isArgsStory = useParameter<boolean>('__isArgsStory', false);
  const {
@ -41,6 +49,7 @@ export const ControlsPanel: FC = () => {
          compact: !expanded && hasControls,
          rows: withPresetColors,
          args,
+          globals,
          updateArgs,
          resetArgs,
          inAddonPanel: true,
--- a/addons/controls/src/register.tsx
+++ b/addons/controls/src/register.tsx
--- a/addons/docs/angular/index.d.ts
+++ b/addons/docs/angular/index.d.ts
@ -1 +1 @@
-export * from '../dist/ts3.9/frameworks/angular/index.d';
+export declare const setCompodocJson: (compodocJson: any) => void;
--- a/addons/docs/angular/index.js
+++ b/addons/docs/angular/index.js
@ -1 +1,7 @@
-module.exports = require('../dist/esm/frameworks/angular/index');
+/* eslint-disable no-underscore-dangle */
+/* global window */
+
+export const setCompodocJson = (compodocJson) => {
+  // @ts-ignore
+  window.__STORYBOOK_COMPODOC_JSON__ = compodocJson;
+};
--- a/addons/docs/common-preset.js
+++ b/addons/docs/common-preset.js
@ -1,19 +0,0 @@
-function managerEntries(entry = [], options) {
-  return [...entry, require.resolve('./dist/esm/register')];
-}
-
-function config(entry = [], options = {}) {
-  const { framework } = options;
-  const docsConfig = [require.resolve('./dist/esm/frameworks/common/config')];
-  try {
-    docsConfig.push(require.resolve(`./dist/esm/frameworks/${framework}/config`));
-  } catch (err) {
-    // there is no custom config for the user's framework, do nothing
-  }
-  return [...docsConfig, ...entry];
-}
-
-module.exports = {
-  managerEntries,
-  config,
-};
--- a/addons/docs/docs/multiframework.md
+++ b/addons/docs/docs/multiframework.md
@ -106,7 +106,7 @@ The input is the story function and the story context (id, parameters, args, etc

 ## Dynamic source rendering

-With the release of Storybook 6.0, we've improved how stories are rendered in the [Source doc block](https://storybook.js.org/docs/react/writing-docs/doc-blocks#source). One of such improvements is the `dynamic` source type, which renders a snippet based on the output the story function. 
+With the release of Storybook 6.0, we've improved how stories are rendered in the [Source doc block](https://storybook.js.org/docs/react/writing-docs/doc-blocks#source). One of such improvements is the `dynamic` source type, which renders a snippet based on the output the story function.

 This dynamic rendering is framework-specific, meaning it needs a custom implementation for each framework.

@ -151,7 +151,7 @@ import { jsxDecorator } from './jsxDecorator';
 export const decorators = [jsxDecorator];
 ```

-This configures the `jsxDecorator` to be run on every story. 
+This configures the `jsxDecorator` to be run on every story.

 <div class="aside">
 To learn more and see how it's implemented in context, check out <a href="https://github.com/storybookjs/storybook/blob/next/addons/docs/src/frameworks/react/jsxDecorator.tsx">the code</a> .
--- a/addons/docs/ember/index.js
+++ b/addons/docs/ember/index.js
@ -1 +1,6 @@
-module.exports = require('../dist/esm/frameworks/ember');
+/* eslint-disable no-underscore-dangle */
+/* global window */
+
+export const setJSONDoc = (jsondoc) => {
+  window.__EMBER_GENERATED_DOC_JSON__ = jsondoc;
+};
--- a/addons/docs/manager.js
+++ b/addons/docs/manager.js
@ -0,0 +1 @@
+import './dist/esm/manager';
--- a/addons/docs/package.json
+++ b/addons/docs/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-docs",
-  "version": "6.5.0-alpha.45",
+  "version": "6.5.0-alpha.62",
  "description": "Document component usage and properties in Markdown",
  "keywords": [
    "addon",
@ -55,45 +55,29 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@babel/core": "^7.12.10",
-    "@babel/generator": "^7.12.11",
-    "@babel/parser": "^7.12.11",
    "@babel/plugin-transform-react-jsx": "^7.12.12",
    "@babel/preset-env": "^7.12.11",
    "@jest/transform": "^26.6.2",
    "@mdx-js/react": "^1.6.22",
-    "@storybook/addons": "6.5.0-alpha.45",
-    "@storybook/api": "6.5.0-alpha.45",
-    "@storybook/builder-webpack4": "6.5.0-alpha.45",
-    "@storybook/client-logger": "6.5.0-alpha.45",
-    "@storybook/components": "6.5.0-alpha.45",
-    "@storybook/core": "6.5.0-alpha.45",
-    "@storybook/core-events": "6.5.0-alpha.45",
-    "@storybook/csf": "0.0.2--canary.87bc651.0",
-    "@storybook/csf-tools": "6.5.0-alpha.45",
+    "@storybook/addons": "6.5.0-alpha.62",
+    "@storybook/api": "6.5.0-alpha.62",
+    "@storybook/components": "6.5.0-alpha.62",
+    "@storybook/core-common": "6.5.0-alpha.62",
+    "@storybook/core-events": "6.5.0-alpha.62",
+    "@storybook/csf": "0.0.2--canary.7c6c115.0",
+    "@storybook/docs-tools": "6.5.0-alpha.62",
    "@storybook/mdx1-csf": "canary",
-    "@storybook/node-logger": "6.5.0-alpha.45",
-    "@storybook/postinstall": "6.5.0-alpha.45",
-    "@storybook/preview-web": "6.5.0-alpha.45",
-    "@storybook/source-loader": "6.5.0-alpha.45",
-    "@storybook/store": "6.5.0-alpha.45",
-    "@storybook/theming": "6.5.0-alpha.45",
-    "acorn": "^7.4.1",
-    "acorn-jsx": "^5.3.1",
-    "acorn-walk": "^7.2.0",
+    "@storybook/node-logger": "6.5.0-alpha.62",
+    "@storybook/postinstall": "6.5.0-alpha.62",
+    "@storybook/preview-web": "6.5.0-alpha.62",
+    "@storybook/source-loader": "6.5.0-alpha.62",
+    "@storybook/store": "6.5.0-alpha.62",
+    "@storybook/theming": "6.5.0-alpha.62",
+    "babel-loader": "^8.0.0",
    "core-js": "^3.8.2",
-    "doctrine": "^3.0.0",
-    "escodegen": "^2.0.0",
    "fast-deep-equal": "^3.1.3",
    "global": "^4.4.0",
-    "html-tags": "^3.1.0",
-    "loader-utils": "^2.0.0",
    "lodash": "^4.17.21",
-    "nanoid": "^3.1.23",
-    "p-limit": "^3.1.0",
-    "prettier": ">=2.2.1 <=2.3.0",
-    "prop-types": "^15.7.2",
-    "react-element-to-jsx-string": "^14.3.4",
    "regenerator-runtime": "^0.13.7",
    "remark-external-links": "^8.0.0",
    "remark-slug": "^6.0.0",
@ -101,119 +85,30 @@
    "util-deprecate": "^1.0.2"
  },
  "devDependencies": {
-    "@angular/core": "^11.2.14",
    "@babel/core": "^7.12.10",
-    "@emotion/core": "^10.3.1",
-    "@emotion/styled": "^10.0.27",
-    "@storybook/angular": "6.5.0-alpha.45",
-    "@storybook/html": "6.5.0-alpha.45",
    "@storybook/mdx2-csf": "canary",
-    "@storybook/react": "6.5.0-alpha.45",
-    "@storybook/vue": "6.5.0-alpha.45",
-    "@storybook/web-components": "6.5.0-alpha.45",
-    "@types/cross-spawn": "^6.0.2",
-    "@types/doctrine": "^0.0.3",
-    "@types/estree": "^0.0.44",
-    "@types/loader-utils": "^2.0.0",
-    "@types/prop-types": "^15.7.3",
-    "@types/tmp": "^0.2.0",
-    "@types/util-deprecate": "^1.0.0",
-    "babel-loader": "^8.0.0",
-    "babel-plugin-react-docgen": "^4.2.1",
-    "cross-spawn": "^7.0.3",
-    "jest": "^26.6.3",
-    "jest-specific-snapshot": "^4.0.0",
-    "lit-element": "^3.0.2",
-    "lit-html": "^2.0.2",
-    "require-from-string": "^2.0.2",
-    "rxjs": "^6.6.3",
-    "styled-components": "^5.2.1",
-    "sveltedoc-parser": "4.1.0",
-    "tmp": "^0.2.1",
-    "vue": "^2.6.10",
-    "webpack": "4",
-    "zone.js": "^0.11.3"
+    "@types/util-deprecate": "^1.0.0"
  },
  "peerDependencies": {
-    "@storybook/angular": "6.5.0-alpha.45",
-    "@storybook/html": "6.5.0-alpha.45",
    "@storybook/mdx2-csf": "*",
-    "@storybook/react": "6.5.0-alpha.45",
-    "@storybook/vue": "6.5.0-alpha.45",
-    "@storybook/vue3": "6.5.0-alpha.45",
-    "@storybook/web-components": "6.5.0-alpha.45",
-    "lit": "^2.0.0",
-    "lit-html": "^1.4.1 || ^2.0.0",
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0",
-    "svelte": "^3.31.2",
-    "sveltedoc-parser": "^4.1.0",
-    "vue": "^2.6.10 || ^3.0.0",
-    "webpack": "*"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
  },
  "peerDependenciesMeta": {
-    "@storybook/angular": {
-      "optional": true
-    },
-    "@storybook/builder-webpack4": {
-      "optional": true
-    },
-    "@storybook/builder-webpack5": {
-      "optional": true
-    },
-    "@storybook/html": {
-      "optional": true
-    },
-    "@storybook/manager-webpack4": {
-      "optional": true
-    },
-    "@storybook/manager-webpack5": {
-      "optional": true
-    },
    "@storybook/mdx2-csf": {
      "optional": true
    },
-    "@storybook/react": {
-      "optional": true
-    },
-    "@storybook/vue": {
-      "optional": true
-    },
-    "@storybook/vue3": {
-      "optional": true
-    },
-    "@storybook/web-components": {
-      "optional": true
-    },
-    "lit": {
-      "optional": true
-    },
-    "lit-html": {
-      "optional": true
-    },
    "react": {
      "optional": true
    },
    "react-dom": {
      "optional": true
-    },
-    "svelte": {
-      "optional": true
-    },
-    "sveltedoc-parser": {
-      "optional": true
-    },
-    "vue": {
-      "optional": true
-    },
-    "webpack": {
-      "optional": true
    }
  },
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "af457c20c773f57bea0504bf525a2f74852fe94a",
+  "gitHead": "e6025078374acd23cb15d3480c882229742a7ac1",
  "sbmodern": "dist/modern/index.js",
  "storybook": {
    "displayName": "Docs",
--- a/addons/docs/preset.js
+++ b/addons/docs/preset.js
@ -1,16 +1 @@
-const getFrameworkPresets = (framework) => {
-  try {
-    return [require.resolve(`./dist/cjs/frameworks/${framework}/preset`)];
-  } catch (err) {
-    // there is no custom config for the user's framework, do nothing
-    return [];
-  }
-};
-
-module.exports = (storybookOptions, presetOptions) => {
-  return [
-    { name: require.resolve('./common-preset'), options: presetOptions },
-    { name: require.resolve('./dist/cjs/frameworks/common/preset'), options: presetOptions },
-    ...getFrameworkPresets(storybookOptions.framework),
-  ];
-};
+module.exports = require('./dist/cjs/preset');
--- a/addons/docs/preview.js
+++ b/addons/docs/preview.js
@ -0,0 +1 @@
+export * from './dist/esm/preview';
--- a/addons/docs/register.js
+++ b/addons/docs/register.js
@ -1,2 +1,6 @@
-/* eslint-disable import/extensions */
-require('./dist/esm/register.js');
+import { once } from '@storybook/client-logger';
+import './manager';
+
+once.warn(
+  'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs'
+);
--- a/addons/docs/src/blocks/ArgsTable.tsx
+++ b/addons/docs/src/blocks/ArgsTable.tsx
@ -7,15 +7,15 @@ import {
  SortType,
  TabbedArgsTable,
 } from '@storybook/components';
+import { ArgTypesExtractor } from '@storybook/docs-tools';
 import { addons } from '@storybook/addons';
 import { filterArgTypes, PropDescriptor } from '@storybook/store';
 import Events from '@storybook/core-events';
-import { StrictArgTypes, Args } from '@storybook/csf';
+import { StrictArgTypes, Args, Globals } from '@storybook/csf';

 import { DocsContext, DocsContextProps } from './DocsContext';
 import { Component, CURRENT_SELECTION, PRIMARY_STORY } from './types';
 import { getComponentName } from './utils';
-import { ArgTypesExtractor } from '../lib/docgen/types';
 import { lookupStoryId } from './Story';
 import { useStory } from './useStory';

@ -42,18 +42,20 @@ type StoryProps = BaseProps & {

 type ArgsTableProps = BaseProps | OfProps | ComponentsProps | StoryProps;

+const getContext = (storyId: string, context: DocsContextProps) => {
+  const story = context.storyById(storyId);
+  if (!story) {
+    throw new Error(`Unknown story: ${storyId}`);
+  }
+  return context.getStoryContext(story);
+};
+
 const useArgs = (
  storyId: string,
  context: DocsContextProps
 ): [Args, (args: Args) => void, (argNames?: string[]) => void] => {
  const channel = addons.getChannel();
-
-  const story = context.storyById(storyId);
-  if (!story) {
-    throw new Error(`Unknown story: ${storyId}`);
-  }
-
-  const storyContext = context.getStoryContext(story);
+  const storyContext = getContext(storyId, context);

  const [args, setArgs] = useState(storyContext.args);
  useEffect(() => {
@ -76,6 +78,22 @@ const useArgs = (
  return [args, updateArgs, resetArgs];
 };

+const useGlobals = (storyId: string, context: DocsContextProps): [Globals] => {
+  const channel = addons.getChannel();
+  const storyContext = getContext(storyId, context);
+  const [globals, setGlobals] = useState(storyContext.globals);
+
+  useEffect(() => {
+    const cb = (changed: { globals: Globals }) => {
+      setGlobals(changed.globals);
+    };
+    channel.on(Events.GLOBALS_UPDATED, cb);
+    return () => channel.off(Events.GLOBALS_UPDATED, cb);
+  }, []);
+
+  return [globals];
+};
+
 export const extractComponentArgTypes = (
  component: Component,
  { id, storyById }: DocsContextProps,
@ -162,13 +180,14 @@ export const StoryTable: FC<
    const story = useStory(storyId, context);
    // eslint-disable-next-line prefer-const
    let [args, updateArgs, resetArgs] = useArgs(storyId, context);
+    const [globals] = useGlobals(storyId, context);
    if (!story) return <PureArgsTable isLoading updateArgs={updateArgs} resetArgs={resetArgs} />;

    const argTypes = filterArgTypes(story.argTypes, include, exclude);

    const mainLabel = getComponentName(component) || 'Story';

-    let tabs = { [mainLabel]: { rows: argTypes, args, updateArgs, resetArgs } } as Record<
+    let tabs = { [mainLabel]: { rows: argTypes, args, globals, updateArgs, resetArgs } } as Record<
      string,
      PureArgsTableProps
    >;
--- a/addons/docs/src/blocks/Description.tsx
+++ b/addons/docs/src/blocks/Description.tsx
@ -1,8 +1,9 @@
 import React, { FunctionComponent, useContext } from 'react';
 import { Description, DescriptionProps as PureDescriptionProps } from '@storybook/components';
+import { str } from '@storybook/docs-tools';
+
 import { DocsContext, DocsContextProps } from './DocsContext';
 import { Component, CURRENT_SELECTION } from './types';
-import { str } from '../lib/docgen';

 export enum DescriptionType {
  INFO = 'info',
--- a/addons/docs/src/blocks/DocsContext.ts
+++ b/addons/docs/src/blocks/DocsContext.ts
@ -1,8 +1,8 @@
 import { Context, createContext } from 'react';
 import { window as globalWindow } from 'global';

-import { DocsContextProps } from '@storybook/preview-web';
-import { AnyFramework } from '@storybook/csf';
+import type { DocsContextProps } from '@storybook/preview-web';
+import type { AnyFramework } from '@storybook/csf';

 export type { DocsContextProps };

--- a/addons/docs/src/blocks/Source.tsx
+++ b/addons/docs/src/blocks/Source.tsx
@ -1,14 +1,10 @@
-import React, { FC, useContext } from 'react';
-import {
-  Source as PureSource,
-  SourceError,
-  SourceProps as PureSourceProps,
-} from '@storybook/components';
-import { StoryId } from '@storybook/api';
-import { Story } from '@storybook/store';
+import React, { ComponentProps, FC, useContext } from 'react';
+import { Source as PureSource, SourceError } from '@storybook/components';
+import type { StoryId } from '@storybook/api';
+import type { Story } from '@storybook/store';

 import { DocsContext, DocsContextProps } from './DocsContext';
-import { SourceContext, SourceContextProps } from './SourceContainer';
+import { SourceContext, SourceContextProps, SourceItem } from './SourceContainer';
 import { CURRENT_SELECTION } from './types';
 import { SourceType } from '../shared';

@ -24,6 +20,7 @@ export enum SourceState {
 interface CommonProps {
  language?: string;
  dark?: boolean;
+  format?: PureSourceProps['format'];
  code?: string;
 }

@ -50,11 +47,11 @@ const getSourceState = (stories: Story[]) => {
  return states[0];
 };

-const getStorySource = (storyId: StoryId, sourceContext: SourceContextProps): string => {
+const getStorySource = (storyId: StoryId, sourceContext: SourceContextProps): SourceItem => {
  const { sources } = sourceContext;
  // source rendering is async so source is unavailable at the start of the render cycle,
  // so we fail gracefully here without warning
-  return sources?.[storyId] || '';
+  return sources?.[storyId] || { code: '', format: false };
 };

 const getSnippet = (snippet: string, story?: Story<any>): string => {
@ -89,6 +86,7 @@ const getSnippet = (snippet: string, story?: Story<any>): string => {
 };

 type SourceStateProps = { state: SourceState };
+type PureSourceProps = ComponentProps<typeof PureSource>;

 export const getSourceProps = (
  props: SourceProps,
@ -103,6 +101,7 @@ export const getSourceProps = (
  const multiProps = props as MultiSourceProps;

  let source = codeProps.code; // prefer user-specified code
+  let { format } = codeProps; // prefer user-specified code

  const targetIds = multiProps.ids || [singleProps.id || currentId];
  const storyIds = targetIds.map((targetId) =>
@ -115,9 +114,12 @@ export const getSourceProps = (
  }

  if (!source) {
+    // just take the format from the first story, given how they're all concatinated together...
+    // TODO: we should consider sending an event with all the sources separately, instead of concatenating them here
+    ({ format } = getStorySource(storyIds[0], sourceContext));
    source = storyIds
      .map((storyId, idx) => {
-        const storySource = getStorySource(storyId, sourceContext);
+        const { code: storySource } = getStorySource(storyId, sourceContext);
        const storyObj = stories[idx] as Story;
        return getSnippet(storySource, storyObj);
      })
@ -134,6 +136,7 @@ export const getSourceProps = (
    ? {
        code: source,
        state,
+        format,
        language: props.language || docsLanguage || 'jsx',
        dark: props.dark || false,
      }
@ -145,7 +148,7 @@ export const getSourceProps = (
 * or the source for a story if `storyId` is provided, or
 * the source for the current story if nothing is provided.
 */
-export const Source: FC<SourceProps> = (props) => {
+export const Source: FC<PureSourceProps> = (props) => {
  const sourceContext = useContext(SourceContext);
  const docsContext = useContext(DocsContext);
  const sourceProps = getSourceProps(props, docsContext, sourceContext);
--- a/addons/docs/src/blocks/SourceContainer.tsx
+++ b/addons/docs/src/blocks/SourceContainer.tsx
@ -1,10 +1,14 @@
 import React, { FC, Context, createContext, useEffect, useState } from 'react';
 import deepEqual from 'fast-deep-equal';
 import { addons } from '@storybook/addons';
-import { StoryId } from '@storybook/api';
+import type { SyntaxHighlighterFormatTypes } from '@storybook/components';
+import type { StoryId } from '@storybook/api';
 import { SNIPPET_RENDERED } from '../shared';

-export type SourceItem = string;
+export interface SourceItem {
+  code: string;
+  format: SyntaxHighlighterFormatTypes;
+}
 export type StorySources = Record<StoryId, SourceItem>;

 export interface SourceContextProps {
@ -19,23 +23,33 @@ export const SourceContainer: FC<{}> = ({ children }) => {
  const channel = addons.getChannel();

  useEffect(() => {
-    const handleSnippetRendered = (id: StoryId, newItem: SourceItem) => {
-      if (newItem !== sources[id]) {
-        setSources((current) => {
-          const newSources = { ...current, [id]: newItem };
-
-          if (!deepEqual(current, newSources)) {
-            return newSources;
-          }
-          return current;
-        });
+    const handleSnippetRendered = (
+      id: StoryId,
+      newSource: string,
+      format: SyntaxHighlighterFormatTypes = false
+    ) => {
+      // optimization: if the source is the same, ignore the incoming event
+      if (sources[id] && sources[id].code === newSource) {
+        return;
      }
+
+      setSources((current) => {
+        const newSources = {
+          ...current,
+          [id]: { code: newSource, format },
+        };
+
+        if (!deepEqual(current, newSources)) {
+          return newSources;
+        }
+        return current;
+      });
    };

    channel.on(SNIPPET_RENDERED, handleSnippetRendered);

    return () => channel.off(SNIPPET_RENDERED, handleSnippetRendered);
-  });
+  }, []);

  return <SourceContext.Provider value={{ sources }}>{children}</SourceContext.Provider>;
 };
--- a/addons/docs/src/blocks/Story.tsx
+++ b/addons/docs/src/blocks/Story.tsx
@ -130,25 +130,8 @@ const Story: FunctionComponent<StoryProps> = (props) => {
  useEffect(() => {
    let cleanup: () => void;
    if (story && storyRef.current) {
-      const { componentId, id, title, name } = story;
-      const renderContext = {
-        componentId,
-        title,
-        kind: title,
-        id,
-        name,
-        story: name,
-        // TODO what to do when these fail?
-        showMain: () => {},
-        showError: () => {},
-        showException: () => {},
-      };
-      cleanup = context.renderStoryToElement({
-        story,
-        renderContext,
-        element: storyRef.current as HTMLElement,
-        viewMode: 'docs',
-      });
+      const element = storyRef.current as HTMLElement;
+      cleanup = context.renderStoryToElement(story, element);
      setShowLoader(false);
    }
    return () => cleanup && cleanup();
--- a/addons/docs/src/blocks/enhanceSource.test.ts
+++ b/addons/docs/src/blocks/enhanceSource.test.ts
@ -1,4 +1,4 @@
-import { StoryContext } from '@storybook/addons';
+import type { StoryContext } from '@storybook/addons';
 import { enhanceSource } from './enhanceSource';

 const emptyContext: StoryContext = {
--- a/addons/docs/src/blocks/enhanceSource.ts
+++ b/addons/docs/src/blocks/enhanceSource.ts
@ -1,5 +1,6 @@
-import { Parameters } from '@storybook/addons';
-import { Story, combineParameters } from '@storybook/store';
+import type { Parameters } from '@storybook/addons';
+import type { Story } from '@storybook/store';
+import { combineParameters } from '@storybook/store';

 // ============================================================
 // START @storybook/source-loader/extract-source
--- a/addons/docs/src/blocks/mdx.tsx
+++ b/addons/docs/src/blocks/mdx.tsx
@ -91,7 +91,7 @@ export const AnchorMdx: FC<AnchorMdxProps> = (props) => {
    }

    // Links to other pages of SB should use the base URL of the top level iframe instead of the base URL of the preview iframe.
-    if (target !== '_blank') {
+    if (target !== '_blank' && !href.startsWith('https://')) {
      return (
        <A
          href={href}
--- a/addons/docs/src/blocks/useStory.ts
+++ b/addons/docs/src/blocks/useStory.ts
@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
-import { StoryId, AnyFramework } from '@storybook/csf';
-import { Story } from '@storybook/store';
+import type { StoryId, AnyFramework } from '@storybook/csf';
+import type { Story } from '@storybook/store';

 import { DocsContextProps } from './DocsContext';

--- a/addons/docs/src/frameworks/angular/sourceDecorator.ts
+++ b/addons/docs/src/frameworks/angular/sourceDecorator.ts
@ -1,81 +0,0 @@
-import { addons, useEffect } from '@storybook/addons';
-import { PartialStoryFn } from '@storybook/csf';
-import { StoryContext, AngularFramework } from '@storybook/angular';
-import { computesTemplateSourceFromComponent } from '@storybook/angular/renderer';
-import { SNIPPET_RENDERED, SourceType } from '../../shared';
-
-export const skipSourceRender = (context: StoryContext) => {
-  const sourceParams = context?.parameters.docs?.source;
-
-  // always render if the user forces it
-  if (sourceParams?.type === SourceType.DYNAMIC) {
-    return false;
-  }
-  // never render if the user is forcing the block to render code, or
-  // if the user provides code
-  return sourceParams?.code || sourceParams?.type === SourceType.CODE;
-};
-
-let prettyUpInternal: (source: string) => string | undefined;
-
-const makePrettyUp = async () => {
-  if (prettyUpInternal) {
-    return prettyUpInternal;
-  }
-
-  const prettierHtml = await import('prettier/parser-html');
-  const prettier = await import('prettier/standalone');
-
-  prettyUpInternal = (source: string) => {
-    return prettier.format(source, {
-      parser: 'angular',
-      plugins: [prettierHtml],
-      htmlWhitespaceSensitivity: 'ignore',
-    });
-  };
-  return prettyUpInternal;
-};
-
-/**
- * Angular source decorator.
- * @param storyFn Fn
- * @param context  StoryContext
- */
-export const sourceDecorator = (
-  storyFn: PartialStoryFn<AngularFramework>,
-  context: StoryContext
-) => {
-  const story = storyFn();
-  if (skipSourceRender(context)) {
-    return story;
-  }
-  const channel = addons.getChannel();
-  const { props, template, userDefinedTemplate } = story;
-
-  const { component, argTypes } = context;
-
-  let toEmit: string;
-  const prettyUpPromise = makePrettyUp();
-
-  useEffect(() => {
-    prettyUpPromise.then((prettyUp) => {
-      if (toEmit) channel.emit(SNIPPET_RENDERED, context.id, prettyUp(toEmit));
-    });
-  });
-
-  prettyUpPromise.then((prettyUp) => {
-    if (component && !userDefinedTemplate) {
-      const source = computesTemplateSourceFromComponent(component, props, argTypes);
-
-      // We might have a story with a Directive or Service defined as the component
-      // In these cases there might exist a template, even if we aren't able to create source from component
-      if (source || template) {
-        toEmit = prettyUp(source || template);
-      }
-    } else if (template) {
-      toEmit = prettyUp(template);
-    }
-  });
-
-  return story;
-};
--- a/addons/docs/src/frameworks/common/config.ts
+++ b/addons/docs/src/frameworks/common/config.ts
@ -1,12 +0,0 @@
-import { enhanceArgTypes } from './enhanceArgTypes';
-
-export const parameters = {
-  docs: {
-    inlineStories: false,
-    getContainer: async () => (await import('../../blocks')).DocsContainer,
-    getPage: async () => (await import('../../blocks')).DocsPage,
-    iframeHeight: 100,
-  },
-};
-
-export const argTypesEnhancers = [enhanceArgTypes];
--- a/addons/docs/src/lib/index.ts
+++ b/addons/docs/src/lib/index.ts
@ -1 +0,0 @@
-export * from './utils';
--- a/addons/docs/src/register.ts
+++ b/addons/docs/src/register.ts
--- a/addons/docs/src/frameworks/common/preset.ts
+++ b/addons/docs/src/frameworks/common/preset.ts
@ -3,9 +3,8 @@ import remarkSlug from 'remark-slug';
 import remarkExternalLinks from 'remark-external-links';
 import global from 'global';

-import type { BuilderConfig, Options } from '@storybook/core-common';
-
-const { log } = console;
+import type { Options } from '@storybook/core-common';
+import { logger } from '@storybook/node-logger';

 // for frameworks that are not working with react, we need to configure
 // the jsx to transpile mdx, for now there will be a flag for that
@ -39,16 +38,7 @@ export async function webpack(
      typeof createCompiler
    >[0] */
 ) {
-  const { builder = 'webpack4' } = await options.presets.apply<{
-    builder: BuilderConfig;
-  }>('core', {} as any);
-
-  const builderName = typeof builder === 'string' ? builder : builder.name;
-  const resolvedBabelLoader = require.resolve('babel-loader', {
-    paths: builderName.match(/^webpack(4|5)$/)
-      ? [require.resolve(`@storybook/builder-${builderName}`)]
-      : [builderName],
-  });
+  const resolvedBabelLoader = require.resolve('babel-loader');

  const { module = {} } = webpackConfig;

@ -68,7 +58,7 @@ export async function webpack(
  };

  const mdxVersion = global.FEATURES?.previewMdx2 ? 'MDX2' : 'MDX1';
-  log(`Addon-docs: using ${mdxVersion}`);
+  logger.info(`Addon-docs: using ${mdxVersion}`);

  const mdxLoader = global.FEATURES?.previewMdx2
    ? require.resolve('@storybook/mdx2-csf/loader')
--- a/addons/docs/src/preview.ts
+++ b/addons/docs/src/preview.ts
@ -0,0 +1,6 @@
+export const parameters = {
+  docs: {
+    getContainer: async () => (await import('./blocks')).DocsContainer,
+    getPage: async () => (await import('./blocks')).DocsPage,
+  },
+};
--- a/addons/docs/src/typings.d.ts
+++ b/addons/docs/src/typings.d.ts
@ -8,7 +8,6 @@ declare module 'require-from-string';
 declare module 'styled-components';
 declare module 'acorn-jsx';
 declare module 'vue/dist/vue';
-declare module '@storybook/addon-docs/svelte/HOC.svelte';

 declare module 'sveltedoc-parser' {
  export function parse(options: any): Promise<any>;
--- a/addons/essentials/package.json
+++ b/addons/essentials/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-essentials",
-  "version": "6.5.0-alpha.45",
+  "version": "6.5.0-alpha.62",
  "description": "Curated addons to bring out the best of Storybook",
  "keywords": [
    "addon",
@ -39,25 +39,25 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addon-actions": "6.5.0-alpha.45",
-    "@storybook/addon-backgrounds": "6.5.0-alpha.45",
-    "@storybook/addon-controls": "6.5.0-alpha.45",
-    "@storybook/addon-docs": "6.5.0-alpha.45",
-    "@storybook/addon-measure": "6.5.0-alpha.45",
-    "@storybook/addon-outline": "6.5.0-alpha.45",
-    "@storybook/addon-toolbars": "6.5.0-alpha.45",
-    "@storybook/addon-viewport": "6.5.0-alpha.45",
-    "@storybook/addons": "6.5.0-alpha.45",
-    "@storybook/api": "6.5.0-alpha.45",
-    "@storybook/core-common": "6.5.0-alpha.45",
-    "@storybook/node-logger": "6.5.0-alpha.45",
+    "@storybook/addon-actions": "6.5.0-alpha.62",
+    "@storybook/addon-backgrounds": "6.5.0-alpha.62",
+    "@storybook/addon-controls": "6.5.0-alpha.62",
+    "@storybook/addon-docs": "6.5.0-alpha.62",
+    "@storybook/addon-measure": "6.5.0-alpha.62",
+    "@storybook/addon-outline": "6.5.0-alpha.62",
+    "@storybook/addon-toolbars": "6.5.0-alpha.62",
+    "@storybook/addon-viewport": "6.5.0-alpha.62",
+    "@storybook/addons": "6.5.0-alpha.62",
+    "@storybook/api": "6.5.0-alpha.62",
+    "@storybook/core-common": "6.5.0-alpha.62",
+    "@storybook/node-logger": "6.5.0-alpha.62",
    "core-js": "^3.8.2",
    "regenerator-runtime": "^0.13.7",
    "ts-dedent": "^2.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
-    "@storybook/vue": "6.5.0-alpha.45",
+    "@storybook/vue": "6.5.0-alpha.62",
    "@types/jest": "^26.0.16",
    "@types/webpack-env": "^1.16.0"
  },
@ -120,6 +120,6 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "af457c20c773f57bea0504bf525a2f74852fe94a",
+  "gitHead": "e6025078374acd23cb15d3480c882229742a7ac1",
  "sbmodern": "dist/modern/index.js"
 }
--- a/addons/essentials/src/index.ts
+++ b/addons/essentials/src/index.ts
@ -1,12 +1,17 @@
-import path, { join } from 'path';
+import path, { dirname, join } from 'path';
 import { logger } from '@storybook/node-logger';
 import { serverRequire } from '@storybook/core-common';

 interface PresetOptions {
  configDir?: string;
-  backgrounds?: any;
-  viewport?: any;
-  docs?: any;
+  docs?: boolean;
+  controls?: boolean;
+  actions?: boolean;
+  backgrounds?: boolean;
+  viewport?: boolean;
+  toolbars?: boolean;
+  measure?: boolean;
+  outline?: boolean;
 }

 const requireMain = (configDir: string) => {
@ -45,12 +50,7 @@ export function addons(options: PresetOptions = {}) {
      // as it's done in `lib/core/src/server/presets.js`.
      .map((addon) => {
        try {
-          return require.resolve(join(addon, 'preset'));
-          // eslint-disable-next-line no-empty
-        } catch (err) {}
-
-        try {
-          return require.resolve(join(addon, 'register'));
+          return dirname(require.resolve(join(addon, 'package.json')));
          // eslint-disable-next-line no-empty
        } catch (err) {}

--- a/addons/interactions/manager.js
+++ b/addons/interactions/manager.js
@ -0,0 +1 @@
+import './dist/esm/manager';
--- a/addons/interactions/package.json
+++ b/addons/interactions/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-interactions",
-  "version": "6.5.0-alpha.45",
+  "version": "6.5.0-alpha.62",
  "description": "Automate, test and debug user interactions",
  "keywords": [
    "storybook-addons",
@ -21,8 +21,8 @@
    "url": "https://opencollective.com/storybook"
  },
  "license": "MIT",
-  "main": "dist/cjs/register.js",
-  "module": "dist/esm/register.js",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
  "types": "dist/ts3.9/index.d.ts",
  "typesVersions": {
    "<3.8": {
@ -42,18 +42,19 @@
  },
  "dependencies": {
    "@devtools-ds/object-inspector": "^1.1.2",
-    "@storybook/addons": "6.5.0-alpha.45",
-    "@storybook/api": "6.5.0-alpha.45",
-    "@storybook/components": "6.5.0-alpha.45",
-    "@storybook/core-common": "6.5.0-alpha.45",
-    "@storybook/core-events": "6.5.0-alpha.45",
-    "@storybook/csf": "0.0.2--canary.87bc651.0",
-    "@storybook/instrumenter": "6.5.0-alpha.45",
-    "@storybook/theming": "6.5.0-alpha.45",
+    "@storybook/addons": "6.5.0-alpha.62",
+    "@storybook/api": "6.5.0-alpha.62",
+    "@storybook/client-logger": "6.5.0-alpha.62",
+    "@storybook/components": "6.5.0-alpha.62",
+    "@storybook/core-common": "6.5.0-alpha.62",
+    "@storybook/core-events": "6.5.0-alpha.62",
+    "@storybook/csf": "0.0.2--canary.7c6c115.0",
+    "@storybook/instrumenter": "6.5.0-alpha.62",
+    "@storybook/theming": "6.5.0-alpha.62",
    "core-js": "^3.8.2",
    "global": "^4.4.0",
    "jest-mock": "^27.0.6",
-    "polished": "^4.0.5",
+    "polished": "^4.2.2",
    "ts-dedent": "^2.2.0"
  },
  "devDependencies": {
@ -62,8 +63,8 @@
    "formik": "^2.2.9"
  },
  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
  },
  "peerDependenciesMeta": {
    "react": {
@ -76,7 +77,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "af457c20c773f57bea0504bf525a2f74852fe94a",
+  "gitHead": "e6025078374acd23cb15d3480c882229742a7ac1",
  "sbmodern": "dist/modern/index.js",
  "storybook": {
    "displayName": "Interactions",
--- a/addons/interactions/preset.js
+++ b/addons/interactions/preset.js
@ -1,15 +1,10 @@
-function config(entry = []) {
-  return [...entry, require.resolve('./dist/esm/preset/argsEnhancers')];
-}
+const { checkActionsLoaded } = require('./dist/cjs/preset/checkActionsLoaded');

-function managerEntries(entry = [], options) {
-  // eslint-disable-next-line global-require
-  const { checkActionsLoaded } = require('./dist/cjs/preset/checkActionsLoaded');
+function previewAnnotations(entry = [], options) {
  checkActionsLoaded(options.configDir);
-  return [...entry, require.resolve('./dist/esm/register')];
+  return entry;
 }

 module.exports = {
-  config,
-  managerEntries,
+  previewAnnotations,
 };
--- a/addons/interactions/preview.js
+++ b/addons/interactions/preview.js
@ -0,0 +1 @@
+export * from './dist/esm/preset/preview';
--- a/addons/interactions/register.js
+++ b/addons/interactions/register.js
@ -1 +1,6 @@
-import './dist/esm/register';
+import { once } from '@storybook/client-logger';
+import './manager';
+
+once.warn(
+  'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs'
+);
--- a/addons/interactions/src/register.tsx
+++ b/addons/interactions/src/register.tsx
--- a/addons/interactions/src/preset/argsEnhancers.ts
+++ b/addons/interactions/src/preset/argsEnhancers.ts
@ -1,12 +1,11 @@
 import { addons } from '@storybook/addons';
 import type { Args } from '@storybook/addons';
-import { window as globalWindow } from 'global';
 import { FORCE_REMOUNT, STORY_RENDER_PHASE_CHANGED } from '@storybook/core-events';
-import { AnyFramework, ArgsEnhancer } from '@storybook/csf';
+import type { AnyFramework, ArgsEnhancer } from '@storybook/csf';
 import { instrument } from '@storybook/instrumenter';
 import { ModuleMocker } from 'jest-mock';

-const JestMock = new ModuleMocker(globalWindow);
+const JestMock = new ModuleMocker(global);
 const fn = JestMock.fn.bind(JestMock);

 // Aliasing `fn` to `action` here, so we get a more descriptive label in the UI.
--- a/addons/jest/manager.js
+++ b/addons/jest/manager.js
@ -0,0 +1 @@
+import './dist/esm/manager';
--- a/addons/jest/package.json
+++ b/addons/jest/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-jest",
-  "version": "6.5.0-alpha.45",
+  "version": "6.5.0-alpha.62",
  "description": "React storybook addon that show component jest report",
  "keywords": [
    "addon",
@ -47,11 +47,12 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.5.0-alpha.45",
-    "@storybook/api": "6.5.0-alpha.45",
-    "@storybook/components": "6.5.0-alpha.45",
-    "@storybook/core-events": "6.5.0-alpha.45",
-    "@storybook/theming": "6.5.0-alpha.45",
+    "@storybook/addons": "6.5.0-alpha.62",
+    "@storybook/api": "6.5.0-alpha.62",
+    "@storybook/client-logger": "6.5.0-alpha.62",
+    "@storybook/components": "6.5.0-alpha.62",
+    "@storybook/core-events": "6.5.0-alpha.62",
+    "@storybook/theming": "6.5.0-alpha.62",
    "core-js": "^3.8.2",
    "global": "^4.4.0",
    "react-sizeme": "^3.0.1",
@ -62,8 +63,8 @@
    "@types/webpack-env": "^1.16.0"
  },
  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
  },
  "peerDependenciesMeta": {
    "react": {
@ -76,7 +77,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "af457c20c773f57bea0504bf525a2f74852fe94a",
+  "gitHead": "e6025078374acd23cb15d3480c882229742a7ac1",
  "sbmodern": "dist/modern/index.js",
  "storybook": {
    "displayName": "Jest",
--- a/addons/jest/register.js
+++ b/addons/jest/register.js
@ -1 +1,6 @@
-require('./dist/esm/register');
+import { once } from '@storybook/client-logger';
+import './manager';
+
+once.warn(
+  'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs'
+);
--- a/addons/jest/src/register.tsx
+++ b/addons/jest/src/register.tsx
--- a/addons/links/manager.js
+++ b/addons/links/manager.js
@ -0,0 +1 @@
+import './dist/esm/manager';
--- a/addons/links/package.json
+++ b/addons/links/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-links",
-  "version": "6.5.0-alpha.45",
+  "version": "6.5.0-alpha.62",
  "description": "Link stories together to build demos and prototypes with your UI components",
  "keywords": [
    "addon",
@ -41,11 +41,11 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.5.0-alpha.45",
-    "@storybook/client-logger": "6.5.0-alpha.45",
-    "@storybook/core-events": "6.5.0-alpha.45",
-    "@storybook/csf": "0.0.2--canary.87bc651.0",
-    "@storybook/router": "6.5.0-alpha.45",
+    "@storybook/addons": "6.5.0-alpha.62",
+    "@storybook/client-logger": "6.5.0-alpha.62",
+    "@storybook/core-events": "6.5.0-alpha.62",
+    "@storybook/csf": "0.0.2--canary.7c6c115.0",
+    "@storybook/router": "6.5.0-alpha.62",
    "@types/qs": "^6.9.5",
    "core-js": "^3.8.2",
    "global": "^4.4.0",
@ -58,8 +58,8 @@
    "@types/webpack-env": "^1.16.0"
  },
  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
  },
  "peerDependenciesMeta": {
    "react": {
@ -72,7 +72,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "af457c20c773f57bea0504bf525a2f74852fe94a",
+  "gitHead": "e6025078374acd23cb15d3480c882229742a7ac1",
  "sbmodern": "dist/modern/index.js",
  "storybook": {
    "displayName": "Links",
--- a/addons/links/preset.js
+++ b/addons/links/preset.js
@ -1,13 +0,0 @@
-function managerEntries(entry = []) {
-  return [...entry, require.resolve('./dist/esm/register')];
-}
-
-function config(entry = [], { addDecorator = true } = {}) {
-  const linkConfig = [];
-  if (addDecorator) {
-    linkConfig.push(require.resolve('./dist/esm/preset/addDecorator'));
-  }
-  return [...entry, ...linkConfig];
-}
-
-module.exports = { managerEntries, config };
--- a/addons/links/preview.js
+++ b/addons/links/preview.js
@ -0,0 +1 @@
+export * from './dist/esm/preview';
--- a/addons/links/react.js
+++ b/addons/links/react.js
@ -1 +1,3 @@
-module.exports = require('./dist/cjs/react');
+import LinkTo from './dist/esm/react';
+
+export default LinkTo;
--- a/addons/links/register.js
+++ b/addons/links/register.js
@ -1 +1,6 @@
-require('./dist/esm/register');
+import { once } from '@storybook/client-logger';
+import './manager';
+
+once.warn(
+  'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs'
+);
--- a/addons/links/src/index.ts
+++ b/addons/links/src/index.ts
@ -14,7 +14,7 @@ export function LinkTo(): null {
  return null;
 }

-export { linkTo, hrefTo, withLinks, navigate } from './preview';
+export { linkTo, hrefTo, withLinks, navigate } from './utils';

 if (module && module.hot && module.hot.decline) {
  module.hot.decline();
--- a/addons/links/src/register.ts
+++ b/addons/links/src/register.ts
--- a/addons/links/src/preset/addDecorator.ts
+++ b/addons/links/src/preset/addDecorator.ts
@ -1,3 +0,0 @@
-import { withLinks } from '../index';
-
-export const decorators = [withLinks];
--- a/addons/links/src/preview.ts
+++ b/addons/links/src/preview.ts
@ -1,90 +1,3 @@
-import global from 'global';
-import qs from 'qs';
-import { addons, makeDecorator } from '@storybook/addons';
-import { STORY_CHANGED, SELECT_STORY } from '@storybook/core-events';
-import { toId, StoryId, StoryName, ComponentTitle } from '@storybook/csf';
-import { PARAM_KEY } from './constants';
+import { withLinks } from './index';

-const { document, HTMLElement } = global;
-
-interface ParamsId {
-  storyId: StoryId;
-}
-interface ParamsCombo {
-  kind?: ComponentTitle;
-  story?: StoryName;
-}
-
-export const navigate = (params: ParamsId | ParamsCombo) =>
-  addons.getChannel().emit(SELECT_STORY, params);
-
-export const hrefTo = (title: ComponentTitle, name: StoryName): Promise<string> => {
-  return new Promise((resolve) => {
-    const { location } = document;
-    const query = qs.parse(location.search, { ignoreQueryPrefix: true });
-    const existingId = [].concat(query.id)[0];
-    const titleToLink = title || existingId.split('--', 2)[0];
-    const id = toId(titleToLink, name);
-    const url = `${location.origin + location.pathname}?${qs.stringify(
-      { ...query, id },
-      { encode: false }
-    )}`;
-
-    resolve(url);
-  });
-};
-
-const valueOrCall = (args: string[]) => (value: string | ((...args: string[]) => string)) =>
-  typeof value === 'function' ? value(...args) : value;
-
-export const linkTo =
-  (idOrTitle: string, nameInput?: string | ((...args: any[]) => string)) =>
-  (...args: any[]) => {
-    const resolver = valueOrCall(args);
-    const title = resolver(idOrTitle);
-    const name = resolver(nameInput);
-
-    if (title?.match(/--/) && !name) {
-      navigate({ storyId: title });
-    } else {
-      navigate({ kind: title, story: name });
-    }
-  };
-
-const linksListener = (e: Event) => {
-  const { target } = e;
-  if (!(target instanceof HTMLElement)) {
-    return;
-  }
-  const element = target as HTMLElement;
-  const { sbKind: kind, sbStory: story } = element.dataset;
-  if (kind || story) {
-    e.preventDefault();
-    navigate({ kind, story });
-  }
-};
-
-let hasListener = false;
-
-const on = () => {
-  if (!hasListener) {
-    hasListener = true;
-    document.addEventListener('click', linksListener);
-  }
-};
-const off = () => {
-  if (hasListener) {
-    hasListener = false;
-    document.removeEventListener('click', linksListener);
-  }
-};
-
-export const withLinks = makeDecorator({
-  name: 'withLinks',
-  parameterName: PARAM_KEY,
-  wrapper: (getStory, context) => {
-    on();
-    addons.getChannel().once(STORY_CHANGED, off);
-    return getStory(context);
-  },
-});
+export const decorators = [withLinks];
--- a/addons/links/src/react/components/link.tsx
+++ b/addons/links/src/react/components/link.tsx
@ -1,6 +1,6 @@
 import React, { MouseEvent, PureComponent, ReactNode } from 'react';

-import { navigate, hrefTo } from '../../preview';
+import { navigate, hrefTo } from '../../utils';

 // FIXME: copied from Typography.Link. Code is duplicated to
 // avoid emotion dependency which breaks React 15.x back-compat
--- a/addons/links/src/preview.test.ts
+++ b/addons/links/src/preview.test.ts
@ -1,7 +1,7 @@
 import { addons } from '@storybook/addons';
 import { SELECT_STORY } from '@storybook/core-events';

-import { linkTo, hrefTo } from './preview';
+import { linkTo, hrefTo } from './utils';

 jest.mock('@storybook/addons');
 jest.mock('global', () => ({
--- a/Show More
+++ b/Show More