Merge pull request #17755 from storybookjs/tech/refactor-simplified-a…

…ddons-api

Core: Add simplified manager.js/preview.js API for addons

MIGRATION.md

@@ -1,6 +1,8 @@
 <h1>Migration</h1>
 
 - [From version 6.4.x to 6.5.0](#from-version-64x-to-650)
+  - [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)
@@ -197,6 +199,26 @@
 
 ## From version 6.4.x to 6.5.0
 
+### 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.

addons/a11y/manager.js

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

addons/a11y/preview.js

@@ -0,0 +1 @@
+export * from './dist/esm/preview';

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'
+);

addons/a11y/src/preview.tsx

@@ -0,0 +1,2 @@
+import './a11yRunner';
+import './a11yHighlight';

addons/actions/manager.js

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

addons/actions/package.json

@@ -43,9 +43,10 @@
   "dependencies": {
     "@storybook/addons": "6.5.0-alpha.52",
     "@storybook/api": "6.5.0-alpha.52",
+    "@storybook/client-logger": "6.5.0-alpha.52",
     "@storybook/components": "6.5.0-alpha.52",
     "@storybook/core-events": "6.5.0-alpha.52",
-    "@storybook/csf": "0.0.2--canary.507502b.0",
+    "@storybook/csf": "0.0.2--canary.87bc651.0",
     "@storybook/theming": "6.5.0-alpha.52",
     "core-js": "^3.8.2",
     "fast-deep-equal": "^3.1.3",

addons/actions/preview.js

@@ -0,0 +1 @@
+export * from './dist/esm/preset/preview';

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'
+);

addons/actions/src/preset/preview.tsx

@@ -0,0 +1,2 @@
+export * from './addDecorator';
+export * from './addArgs';

addons/backgrounds/manager.js

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

addons/backgrounds/preview.js

@@ -0,0 +1 @@
+export * from './dist/esm/preview';

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'
+);

addons/backgrounds/src/preset/addParameter.tsx → addons/backgrounds/src/preview.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: {

addons/controls/manager.js

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

addons/controls/package.json

@@ -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": {
@@ -74,7 +74,7 @@
     "access": "public"
   },
   "gitHead": "863b3811b24a4703645a09286059bc6d95bd2e65",
-  "sbmodern": "dist/modern/register.js",
+  "sbmodern": "dist/modern/manager.js",
   "storybook": {
     "displayName": "Controls",
     "icon": "https://user-images.githubusercontent.com/263385/101991669-479cc600-3c7c-11eb-93d9-38b67e8371f2.png",

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'
+);

addons/docs/manager.js

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

addons/docs/preset.js

@@ -1,16 +1 @@
-const { findDistEsm } = require('@storybook/core-common');
-const { webpack } = require('./dist/cjs/frameworks/common/preset');
-
-function managerEntries(entry = [], options) {
-  return [...entry, findDistEsm(__dirname, 'register')];
-}
-
-function config(entry = [], options = {}) {
-  return [findDistEsm(__dirname, 'frameworks/common/config'), ...entry];
-}
-
-module.exports = {
-  webpack,
-  managerEntries,
-  config,
-};
+module.exports = require('./dist/cjs/preset');

addons/docs/preview.js

@@ -0,0 +1 @@
+export * from './dist/esm/preview';

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'
+);

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,
+  },
+};

addons/essentials/src/index.ts

@@ -1,4 +1,4 @@
-import path, { join } from 'path';
+import path, { dirname, join } from 'path';
 import { logger } from '@storybook/node-logger';
 import { serverRequire } from '@storybook/core-common';
 
@@ -50,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) {}
 

addons/interactions/manager.js

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

addons/interactions/package.json

@@ -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": {
@@ -43,10 +43,11 @@
   "dependencies": {
     "@storybook/addons": "6.5.0-alpha.52",
     "@storybook/api": "6.5.0-alpha.52",
+    "@storybook/client-logger": "6.5.0-alpha.52",
     "@storybook/components": "6.5.0-alpha.52",
     "@storybook/core-common": "6.5.0-alpha.52",
     "@storybook/core-events": "6.5.0-alpha.52",
-    "@storybook/csf": "0.0.2--canary.507502b.0",
+    "@storybook/csf": "0.0.2--canary.87bc651.0",
     "@storybook/instrumenter": "6.5.0-alpha.52",
     "@storybook/theming": "6.5.0-alpha.52",
     "core-js": "^3.8.2",

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,
 };

addons/interactions/preview.js

@@ -0,0 +1 @@
+export * from './dist/esm/preset/preview';

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'
+);

addons/jest/manager.js

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

addons/jest/package.json

@@ -49,6 +49,7 @@
   "dependencies": {
     "@storybook/addons": "6.5.0-alpha.52",
     "@storybook/api": "6.5.0-alpha.52",
+    "@storybook/client-logger": "6.5.0-alpha.52",
     "@storybook/components": "6.5.0-alpha.52",
     "@storybook/core-events": "6.5.0-alpha.52",
     "@storybook/theming": "6.5.0-alpha.52",

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'
+);

addons/links/manager.js

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

addons/links/preview.js

@@ -0,0 +1 @@
+export * from './dist/esm/preview';

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'
+);

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();