diff --git a/MIGRATION.md b/MIGRATION.md index 6cfcc02433c1..c82b46fddde0 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -1,6 +1,8 @@

Migration

- [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. diff --git a/addons/a11y/manager.js b/addons/a11y/manager.js new file mode 100644 index 000000000000..4e287d25b151 --- /dev/null +++ b/addons/a11y/manager.js @@ -0,0 +1 @@ +import './dist/esm/manager'; diff --git a/addons/a11y/preset.js b/addons/a11y/preset.js deleted file mode 100644 index fc6884de55c6..000000000000 --- a/addons/a11y/preset.js +++ /dev/null @@ -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 }; diff --git a/addons/a11y/preview.js b/addons/a11y/preview.js new file mode 100644 index 000000000000..e726cab5a1b6 --- /dev/null +++ b/addons/a11y/preview.js @@ -0,0 +1 @@ +export * from './dist/esm/preview'; diff --git a/addons/a11y/register.js b/addons/a11y/register.js index f209c0eb3703..2d916bea61a0 100755 --- 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' +); diff --git a/addons/a11y/src/addDecorator.ts b/addons/a11y/src/addDecorator.ts deleted file mode 100644 index 95dc140b157a..000000000000 --- a/addons/a11y/src/addDecorator.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { withA11y } from '.'; - -export const decorators = [withA11y]; diff --git a/addons/a11y/src/register.tsx b/addons/a11y/src/manager.tsx similarity index 100% rename from addons/a11y/src/register.tsx rename to addons/a11y/src/manager.tsx diff --git a/addons/a11y/src/preview.tsx b/addons/a11y/src/preview.tsx new file mode 100644 index 000000000000..146feb51f50f --- /dev/null +++ b/addons/a11y/src/preview.tsx @@ -0,0 +1,2 @@ +import './a11yRunner'; +import './a11yHighlight'; diff --git a/addons/actions/manager.js b/addons/actions/manager.js new file mode 100644 index 000000000000..4e287d25b151 --- /dev/null +++ b/addons/actions/manager.js @@ -0,0 +1 @@ +import './dist/esm/manager'; diff --git a/addons/actions/package.json b/addons/actions/package.json index 9cd0c88bd81d..32206753a79a 100644 --- a/addons/actions/package.json +++ b/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", diff --git a/addons/actions/preset.js b/addons/actions/preset.js deleted file mode 100644 index ba70abe968e6..000000000000 --- a/addons/actions/preset.js +++ /dev/null @@ -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, -}; diff --git a/addons/actions/preview.js b/addons/actions/preview.js new file mode 100644 index 000000000000..7817e1d278d2 --- /dev/null +++ b/addons/actions/preview.js @@ -0,0 +1 @@ +export * from './dist/esm/preset/preview'; diff --git a/addons/actions/register.js b/addons/actions/register.js index f209c0eb3703..2d916bea61a0 100644 --- 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' +); diff --git a/addons/actions/src/register.tsx b/addons/actions/src/manager.tsx similarity index 100% rename from addons/actions/src/register.tsx rename to addons/actions/src/manager.tsx diff --git a/addons/actions/src/preset/preview.tsx b/addons/actions/src/preset/preview.tsx new file mode 100644 index 000000000000..117c34f7196b --- /dev/null +++ b/addons/actions/src/preset/preview.tsx @@ -0,0 +1,2 @@ +export * from './addDecorator'; +export * from './addArgs'; diff --git a/addons/backgrounds/manager.js b/addons/backgrounds/manager.js new file mode 100644 index 000000000000..4e287d25b151 --- /dev/null +++ b/addons/backgrounds/manager.js @@ -0,0 +1 @@ +import './dist/esm/manager'; diff --git a/addons/backgrounds/preset.js b/addons/backgrounds/preset.js deleted file mode 100644 index a80aaefb5b30..000000000000 --- a/addons/backgrounds/preset.js +++ /dev/null @@ -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, -}; diff --git a/addons/backgrounds/preview.js b/addons/backgrounds/preview.js new file mode 100644 index 000000000000..e726cab5a1b6 --- /dev/null +++ b/addons/backgrounds/preview.js @@ -0,0 +1 @@ +export * from './dist/esm/preview'; diff --git a/addons/backgrounds/register.js b/addons/backgrounds/register.js index f209c0eb3703..2d916bea61a0 100644 --- 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' +); diff --git a/addons/backgrounds/src/decorators/index.ts b/addons/backgrounds/src/decorators/index.ts deleted file mode 100644 index cf4a28890479..000000000000 --- a/addons/backgrounds/src/decorators/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './withBackground'; -export * from './withGrid'; diff --git a/addons/backgrounds/src/register.tsx b/addons/backgrounds/src/manager.tsx similarity index 100% rename from addons/backgrounds/src/register.tsx rename to addons/backgrounds/src/manager.tsx diff --git a/addons/backgrounds/src/preset/addDecorator.tsx b/addons/backgrounds/src/preset/addDecorator.tsx deleted file mode 100644 index 93ccff632339..000000000000 --- a/addons/backgrounds/src/preset/addDecorator.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import { withGrid, withBackground } from '../decorators'; - -export const decorators = [withGrid, withBackground]; diff --git a/addons/backgrounds/src/preset/addParameter.tsx b/addons/backgrounds/src/preview.tsx similarity index 58% rename from addons/backgrounds/src/preset/addParameter.tsx rename to addons/backgrounds/src/preview.tsx index ceb1d3b41203..cc67d00f6318 100644 --- a/addons/backgrounds/src/preset/addParameter.tsx +++ b/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: { diff --git a/addons/controls/manager.js b/addons/controls/manager.js new file mode 100644 index 000000000000..4e287d25b151 --- /dev/null +++ b/addons/controls/manager.js @@ -0,0 +1 @@ +import './dist/esm/manager'; diff --git a/addons/controls/package.json b/addons/controls/package.json index e30b70865099..e8b4f69dc0a9 100644 --- a/addons/controls/package.json +++ b/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", diff --git a/addons/controls/preset.js b/addons/controls/preset.js deleted file mode 100644 index 3dd9b66d3aa7..000000000000 --- a/addons/controls/preset.js +++ /dev/null @@ -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 }; diff --git a/addons/controls/register.js b/addons/controls/register.js index 681a5d09dcec..2d916bea61a0 100644 --- 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' +); diff --git a/addons/controls/src/register.tsx b/addons/controls/src/manager.tsx similarity index 100% rename from addons/controls/src/register.tsx rename to addons/controls/src/manager.tsx diff --git a/addons/docs/manager.js b/addons/docs/manager.js new file mode 100644 index 000000000000..4e287d25b151 --- /dev/null +++ b/addons/docs/manager.js @@ -0,0 +1 @@ +import './dist/esm/manager'; diff --git a/addons/docs/preset.js b/addons/docs/preset.js index c318823dc33a..e45ac5b4cec0 100644 --- a/addons/docs/preset.js +++ b/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'); diff --git a/addons/docs/preview.js b/addons/docs/preview.js new file mode 100644 index 000000000000..e726cab5a1b6 --- /dev/null +++ b/addons/docs/preview.js @@ -0,0 +1 @@ +export * from './dist/esm/preview'; diff --git a/addons/docs/register.js b/addons/docs/register.js index 980200ade086..2d916bea61a0 100644 --- 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' +); diff --git a/addons/docs/src/frameworks/common/config.ts b/addons/docs/src/frameworks/common/config.ts deleted file mode 100644 index 20632390005a..000000000000 --- a/addons/docs/src/frameworks/common/config.ts +++ /dev/null @@ -1,8 +0,0 @@ -export const parameters = { - docs: { - inlineStories: false, - getContainer: async () => (await import('../../blocks')).DocsContainer, - getPage: async () => (await import('../../blocks')).DocsPage, - iframeHeight: 100, - }, -}; diff --git a/addons/docs/src/register.ts b/addons/docs/src/manager.ts similarity index 100% rename from addons/docs/src/register.ts rename to addons/docs/src/manager.ts diff --git a/addons/docs/src/frameworks/common/preset.ts b/addons/docs/src/preset.ts similarity index 100% rename from addons/docs/src/frameworks/common/preset.ts rename to addons/docs/src/preset.ts diff --git a/addons/docs/src/preview.ts b/addons/docs/src/preview.ts new file mode 100644 index 000000000000..a6269505f285 --- /dev/null +++ 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, + }, +}; diff --git a/addons/essentials/src/index.ts b/addons/essentials/src/index.ts index 7441e9fb9160..7b5bc79e3741 100644 --- a/addons/essentials/src/index.ts +++ b/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) {} diff --git a/addons/interactions/manager.js b/addons/interactions/manager.js new file mode 100644 index 000000000000..4e287d25b151 --- /dev/null +++ b/addons/interactions/manager.js @@ -0,0 +1 @@ +import './dist/esm/manager'; diff --git a/addons/interactions/package.json b/addons/interactions/package.json index 7bc44f9abd94..bdf333fa6f7a 100644 --- a/addons/interactions/package.json +++ b/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", diff --git a/addons/interactions/preset.js b/addons/interactions/preset.js index d7d7f8fd24f9..fb325c5b170b 100644 --- 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, }; diff --git a/addons/interactions/preview.js b/addons/interactions/preview.js new file mode 100644 index 000000000000..7817e1d278d2 --- /dev/null +++ b/addons/interactions/preview.js @@ -0,0 +1 @@ +export * from './dist/esm/preset/preview'; diff --git a/addons/interactions/register.js b/addons/interactions/register.js index 681a5d09dcec..2d916bea61a0 100644 --- 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' +); diff --git a/addons/interactions/src/register.tsx b/addons/interactions/src/manager.tsx similarity index 100% rename from addons/interactions/src/register.tsx rename to addons/interactions/src/manager.tsx diff --git a/addons/interactions/src/preset/argsEnhancers.ts b/addons/interactions/src/preset/preview.ts similarity index 100% rename from addons/interactions/src/preset/argsEnhancers.ts rename to addons/interactions/src/preset/preview.ts diff --git a/addons/jest/manager.js b/addons/jest/manager.js new file mode 100644 index 000000000000..4e287d25b151 --- /dev/null +++ b/addons/jest/manager.js @@ -0,0 +1 @@ +import './dist/esm/manager'; diff --git a/addons/jest/package.json b/addons/jest/package.json index 6f4e7613da6f..8336977ac430 100644 --- a/addons/jest/package.json +++ b/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", diff --git a/addons/jest/register.js b/addons/jest/register.js index f209c0eb3703..2d916bea61a0 100644 --- 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' +); diff --git a/addons/jest/src/register.tsx b/addons/jest/src/manager.tsx similarity index 100% rename from addons/jest/src/register.tsx rename to addons/jest/src/manager.tsx diff --git a/addons/links/manager.js b/addons/links/manager.js new file mode 100644 index 000000000000..4e287d25b151 --- /dev/null +++ b/addons/links/manager.js @@ -0,0 +1 @@ +import './dist/esm/manager'; diff --git a/addons/links/preset.js b/addons/links/preset.js deleted file mode 100644 index 2b5ed5ac00d6..000000000000 --- a/addons/links/preset.js +++ /dev/null @@ -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 }; diff --git a/addons/links/preview.js b/addons/links/preview.js new file mode 100644 index 000000000000..e726cab5a1b6 --- /dev/null +++ b/addons/links/preview.js @@ -0,0 +1 @@ +export * from './dist/esm/preview'; diff --git a/addons/links/register.js b/addons/links/register.js index f209c0eb3703..2d916bea61a0 100644 --- 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' +); diff --git a/addons/links/src/index.ts b/addons/links/src/index.ts index 239fae7ba1a8..a41227513de1 100644 --- 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(); diff --git a/addons/links/src/register.ts b/addons/links/src/manager.ts similarity index 100% rename from addons/links/src/register.ts rename to addons/links/src/manager.ts diff --git a/addons/links/src/preset/addDecorator.ts b/addons/links/src/preset/addDecorator.ts deleted file mode 100644 index ff68743b1a37..000000000000 --- a/addons/links/src/preset/addDecorator.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { withLinks } from '../index'; - -export const decorators = [withLinks]; diff --git a/addons/links/src/preview.ts b/addons/links/src/preview.ts index 3082bedc09bc..1527786e81af 100644 --- a/addons/links/src/preview.ts +++ b/addons/links/src/preview.ts @@ -1,91 +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 type { StoryId, StoryName, ComponentTitle } from '@storybook/csf'; -import { toId } 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 => { - 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]; diff --git a/addons/links/src/react/components/link.tsx b/addons/links/src/react/components/link.tsx index fccca70d04a5..aa6207eff75c 100644 --- 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 diff --git a/addons/links/src/preview.test.ts b/addons/links/src/utils.test.ts similarity index 97% rename from addons/links/src/preview.test.ts rename to addons/links/src/utils.test.ts index f5dd3af355f1..fb2126018bf6 100644 --- a/addons/links/src/preview.test.ts +++ b/addons/links/src/utils.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', () => ({ diff --git a/addons/links/src/utils.ts b/addons/links/src/utils.ts new file mode 100644 index 000000000000..3082bedc09bc --- /dev/null +++ b/addons/links/src/utils.ts @@ -0,0 +1,91 @@ +import global from 'global'; +import qs from 'qs'; +import { addons, makeDecorator } from '@storybook/addons'; +import { STORY_CHANGED, SELECT_STORY } from '@storybook/core-events'; +import type { StoryId, StoryName, ComponentTitle } from '@storybook/csf'; +import { toId } from '@storybook/csf'; +import { PARAM_KEY } from './constants'; + +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 => { + 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); + }, +}); diff --git a/addons/measure/manager.js b/addons/measure/manager.js new file mode 100644 index 000000000000..4e287d25b151 --- /dev/null +++ b/addons/measure/manager.js @@ -0,0 +1 @@ +import './dist/esm/manager'; diff --git a/addons/measure/preset.js b/addons/measure/preset.js deleted file mode 100644 index 459bbb650ccd..000000000000 --- a/addons/measure/preset.js +++ /dev/null @@ -1,12 +0,0 @@ -function config(entry = []) { - return [...entry, require.resolve('./dist/esm/preset/addDecorator')]; -} - -function managerEntries(entry = [], options) { - return [...entry, require.resolve('./dist/esm/register')]; -} - -module.exports = { - managerEntries, - config, -}; diff --git a/addons/measure/preview.js b/addons/measure/preview.js new file mode 100644 index 000000000000..e726cab5a1b6 --- /dev/null +++ b/addons/measure/preview.js @@ -0,0 +1 @@ +export * from './dist/esm/preview'; diff --git a/addons/measure/register.js b/addons/measure/register.js index f209c0eb3703..2d916bea61a0 100644 --- a/addons/measure/register.js +++ b/addons/measure/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' +); diff --git a/addons/measure/src/register.tsx b/addons/measure/src/manager.tsx similarity index 100% rename from addons/measure/src/register.tsx rename to addons/measure/src/manager.tsx diff --git a/addons/measure/src/preset/addDecorator.tsx b/addons/measure/src/preview.tsx similarity index 51% rename from addons/measure/src/preset/addDecorator.tsx rename to addons/measure/src/preview.tsx index 8aabbd42a2da..c1433b927efa 100644 --- a/addons/measure/src/preset/addDecorator.tsx +++ b/addons/measure/src/preview.tsx @@ -1,5 +1,5 @@ -import { withMeasure } from '../withMeasure'; -import { PARAM_KEY } from '../constants'; +import { withMeasure } from './withMeasure'; +import { PARAM_KEY } from './constants'; export const decorators = [withMeasure]; diff --git a/addons/outline/manager.js b/addons/outline/manager.js new file mode 100644 index 000000000000..4e287d25b151 --- /dev/null +++ b/addons/outline/manager.js @@ -0,0 +1 @@ +import './dist/esm/manager'; diff --git a/addons/outline/preset.js b/addons/outline/preset.js deleted file mode 100644 index 459bbb650ccd..000000000000 --- a/addons/outline/preset.js +++ /dev/null @@ -1,12 +0,0 @@ -function config(entry = []) { - return [...entry, require.resolve('./dist/esm/preset/addDecorator')]; -} - -function managerEntries(entry = [], options) { - return [...entry, require.resolve('./dist/esm/register')]; -} - -module.exports = { - managerEntries, - config, -}; diff --git a/addons/outline/preview.js b/addons/outline/preview.js new file mode 100644 index 000000000000..7817e1d278d2 --- /dev/null +++ b/addons/outline/preview.js @@ -0,0 +1 @@ +export * from './dist/esm/preset/preview'; diff --git a/addons/outline/register.js b/addons/outline/register.js index f209c0eb3703..2d916bea61a0 100644 --- a/addons/outline/register.js +++ b/addons/outline/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' +); diff --git a/addons/outline/src/register.tsx b/addons/outline/src/manager.tsx similarity index 100% rename from addons/outline/src/register.tsx rename to addons/outline/src/manager.tsx diff --git a/addons/outline/src/preset/addDecorator.tsx b/addons/outline/src/preset/preview.tsx similarity index 100% rename from addons/outline/src/preset/addDecorator.tsx rename to addons/outline/src/preset/preview.tsx diff --git a/addons/storysource/preset.js b/addons/storysource/preset.js index 9a53f8d68228..9ffb6ac993f5 100644 --- a/addons/storysource/preset.js +++ b/addons/storysource/preset.js @@ -25,7 +25,7 @@ function webpack(webpackConfig = {}, options = {}) { } function managerEntries(entry = []) { - return [...entry, require.resolve('./dist/esm/register')]; + return [...entry, require.resolve('./dist/esm/manager')]; } module.exports = { webpack, managerEntries }; diff --git a/addons/storysource/register.js b/addons/storysource/register.js index f209c0eb3703..4e287d25b151 100644 --- a/addons/storysource/register.js +++ b/addons/storysource/register.js @@ -1 +1 @@ -require('./dist/esm/register'); +import './dist/esm/manager'; diff --git a/addons/storysource/src/register.tsx b/addons/storysource/src/manager.tsx similarity index 100% rename from addons/storysource/src/register.tsx rename to addons/storysource/src/manager.tsx diff --git a/addons/toolbars/manager.js b/addons/toolbars/manager.js new file mode 100644 index 000000000000..4e287d25b151 --- /dev/null +++ b/addons/toolbars/manager.js @@ -0,0 +1 @@ +import './dist/esm/manager'; diff --git a/addons/toolbars/package.json b/addons/toolbars/package.json index 98ab2dfc9e98..a68cae14c3f8 100644 --- a/addons/toolbars/package.json +++ b/addons/toolbars/package.json @@ -25,9 +25,9 @@ "url": "https://opencollective.com/storybook" }, "license": "MIT", - "main": "dist/cjs/register.js", - "module": "dist/esm/register.js", - "types": "dist/ts3.9/register.d.ts", + "main": "dist/cjs/manager.js", + "module": "dist/esm/manager.js", + "types": "dist/ts3.9/manager.d.ts", "typesVersions": { "<3.8": { "dist/ts3.9/*": [ @@ -47,6 +47,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/theming": "6.5.0-alpha.52", "core-js": "^3.8.2", @@ -68,7 +69,7 @@ "access": "public" }, "gitHead": "863b3811b24a4703645a09286059bc6d95bd2e65", - "sbmodern": "dist/modern/register.js", + "sbmodern": "dist/modern/manager.js", "storybook": { "displayName": "Toolbars", "icon": "https://user-images.githubusercontent.com/263385/101991677-48cdf300-3c7c-11eb-93b4-19b0e3366959.png", diff --git a/addons/toolbars/preset.js b/addons/toolbars/preset.js deleted file mode 100644 index 656f27562a44..000000000000 --- a/addons/toolbars/preset.js +++ /dev/null @@ -1,5 +0,0 @@ -function managerEntries(entry = []) { - return [...entry, require.resolve('./dist/esm/register')]; -} - -module.exports = { managerEntries }; diff --git a/addons/toolbars/register.js b/addons/toolbars/register.js index 681a5d09dcec..2d916bea61a0 100644 --- a/addons/toolbars/register.js +++ b/addons/toolbars/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' +); diff --git a/addons/toolbars/src/register.tsx b/addons/toolbars/src/manager.tsx similarity index 100% rename from addons/toolbars/src/register.tsx rename to addons/toolbars/src/manager.tsx diff --git a/addons/viewport/manager.js b/addons/viewport/manager.js new file mode 100644 index 000000000000..4e287d25b151 --- /dev/null +++ b/addons/viewport/manager.js @@ -0,0 +1 @@ +import './dist/esm/manager'; diff --git a/addons/viewport/preset.js b/addons/viewport/preset.js deleted file mode 100644 index 656f27562a44..000000000000 --- a/addons/viewport/preset.js +++ /dev/null @@ -1,5 +0,0 @@ -function managerEntries(entry = []) { - return [...entry, require.resolve('./dist/esm/register')]; -} - -module.exports = { managerEntries }; diff --git a/addons/viewport/register.js b/addons/viewport/register.js index f209c0eb3703..2d916bea61a0 100644 --- a/addons/viewport/register.js +++ b/addons/viewport/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' +); diff --git a/addons/viewport/src/register.tsx b/addons/viewport/src/manager.tsx similarity index 100% rename from addons/viewport/src/register.tsx rename to addons/viewport/src/manager.tsx diff --git a/app/angular/src/server/framework-preset-angular-docs.ts b/app/angular/src/server/framework-preset-angular-docs.ts index 314ef6039f3f..1c2cac0c15eb 100644 --- a/app/angular/src/server/framework-preset-angular-docs.ts +++ b/app/angular/src/server/framework-preset-angular-docs.ts @@ -2,7 +2,7 @@ import path from 'path'; import { StorybookConfig } from '@storybook/core-common'; import { hasDocsOrControls } from '@storybook/docs-tools'; -export const config: StorybookConfig['config'] = (entry = [], options) => { +export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entry = [], options) => { if (!hasDocsOrControls(options)) return entry; return [...entry, path.join(__dirname, '../../../dist/ts3.9/client/docs/config')]; }; diff --git a/app/angular/src/server/preset.ts b/app/angular/src/server/preset.ts index ab7d7dd63059..65dc2fa28dc0 100644 --- a/app/angular/src/server/preset.ts +++ b/app/angular/src/server/preset.ts @@ -1,6 +1,6 @@ import type { StorybookConfig } from '@storybook/core-common'; -export const config: StorybookConfig['config'] = (entries = []) => [ +export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entries = []) => [ ...entries, require.resolve('../client/preview/config'), ]; diff --git a/app/ember/src/server/framework-preset-babel-ember.ts b/app/ember/src/server/framework-preset-babel-ember.ts index 85bb723bee7b..da857b38fada 100644 --- a/app/ember/src/server/framework-preset-babel-ember.ts +++ b/app/ember/src/server/framework-preset-babel-ember.ts @@ -48,6 +48,6 @@ export function babel(config: TransformOptions, options: Options): TransformOpti }; } -export const config: StorybookConfig['config'] = (entry = []) => { +export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entry = []) => { return [...entry, findDistEsm(__dirname, 'client/preview/config')]; }; diff --git a/app/ember/src/server/framework-preset-ember-docs.ts b/app/ember/src/server/framework-preset-ember-docs.ts index c2e6f69be8f2..2cdcc56e7cb8 100644 --- a/app/ember/src/server/framework-preset-ember-docs.ts +++ b/app/ember/src/server/framework-preset-ember-docs.ts @@ -2,7 +2,7 @@ import type { StorybookConfig } from '@storybook/core-common'; import { findDistEsm } from '@storybook/core-common'; import { hasDocsOrControls } from '@storybook/docs-tools'; -export const config: StorybookConfig['config'] = (entry = [], options) => { +export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entry = [], options) => { if (!hasDocsOrControls(options)) return entry; return [...entry, findDistEsm(__dirname, 'client/docs/config')]; }; diff --git a/app/html/src/server/framework-preset-html-docs.ts b/app/html/src/server/framework-preset-html-docs.ts index c2e6f69be8f2..2cdcc56e7cb8 100644 --- a/app/html/src/server/framework-preset-html-docs.ts +++ b/app/html/src/server/framework-preset-html-docs.ts @@ -2,7 +2,7 @@ import type { StorybookConfig } from '@storybook/core-common'; import { findDistEsm } from '@storybook/core-common'; import { hasDocsOrControls } from '@storybook/docs-tools'; -export const config: StorybookConfig['config'] = (entry = [], options) => { +export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entry = [], options) => { if (!hasDocsOrControls(options)) return entry; return [...entry, findDistEsm(__dirname, 'client/docs/config')]; }; diff --git a/app/html/src/server/framework-preset-html.ts b/app/html/src/server/framework-preset-html.ts index 10b69f8fafdc..481086898273 100644 --- a/app/html/src/server/framework-preset-html.ts +++ b/app/html/src/server/framework-preset-html.ts @@ -11,6 +11,6 @@ export function webpack(config: Configuration) { return config; } -export const config: StorybookConfig['config'] = (entry = []) => { +export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entry = []) => { return [...entry, findDistEsm(__dirname, 'client/preview/config')]; }; diff --git a/app/preact/src/server/framework-preset-preact.ts b/app/preact/src/server/framework-preset-preact.ts index 034cd1f4f729..9a50492d3480 100644 --- a/app/preact/src/server/framework-preset-preact.ts +++ b/app/preact/src/server/framework-preset-preact.ts @@ -29,6 +29,6 @@ export function webpackFinal(config: Configuration): Configuration { }; } -export const config: StorybookConfig['config'] = (entry = []) => { +export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entry = []) => { return [...entry, findDistEsm(__dirname, 'client/preview/config')]; }; diff --git a/app/react/src/server/framework-preset-react-docs.ts b/app/react/src/server/framework-preset-react-docs.ts index 723cf49a9f29..98f9c12145b9 100644 --- a/app/react/src/server/framework-preset-react-docs.ts +++ b/app/react/src/server/framework-preset-react-docs.ts @@ -58,7 +58,7 @@ export async function webpackFinal(config: Configuration, options: Options) { }; } -export const config: StorybookConfig['config'] = (entry = [], options) => { +export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entry = [], options) => { if (!hasDocsOrControls(options)) return entry; return [...entry, findDistEsm(__dirname, 'client/docs/config')]; }; diff --git a/app/react/src/server/preset.ts b/app/react/src/server/preset.ts index b0807877e886..87f491ca3ae8 100644 --- a/app/react/src/server/preset.ts +++ b/app/react/src/server/preset.ts @@ -1,7 +1,7 @@ import { findDistEsm } from '@storybook/core-common'; import type { StorybookConfig } from '@storybook/core-common'; -export const config: StorybookConfig['config'] = (entries = []) => [ +export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entries = []) => [ ...entries, findDistEsm(__dirname, 'client/preview/config'), ]; diff --git a/app/server/src/server/framework-preset-server.ts b/app/server/src/server/framework-preset-server.ts index ddde3f77f7d5..f4f552890b79 100644 --- a/app/server/src/server/framework-preset-server.ts +++ b/app/server/src/server/framework-preset-server.ts @@ -19,6 +19,6 @@ export function webpack(config: Configuration) { return config; } -export const config: StorybookConfig['config'] = (entry = []) => { +export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entry = []) => { return [...entry, findDistEsm(__dirname, 'client/preview/config')]; }; diff --git a/app/svelte/src/server/framework-preset-svelte-docs.ts b/app/svelte/src/server/framework-preset-svelte-docs.ts index ba1a7fee0166..4160fc5d40db 100644 --- a/app/svelte/src/server/framework-preset-svelte-docs.ts +++ b/app/svelte/src/server/framework-preset-svelte-docs.ts @@ -17,6 +17,6 @@ export async function webpackFinal(webpackConfig: Configuration, options: Option return webpackConfig; } -export const config: StorybookConfig['config'] = (entry = []) => { +export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entry = []) => { return [...entry, findDistEsm(__dirname, 'client/docs/config')]; }; diff --git a/app/svelte/src/server/framework-preset-svelte.ts b/app/svelte/src/server/framework-preset-svelte.ts index a9bec1dc6109..d3e10fbf7492 100644 --- a/app/svelte/src/server/framework-preset-svelte.ts +++ b/app/svelte/src/server/framework-preset-svelte.ts @@ -33,6 +33,6 @@ export async function webpack(config: Configuration, options: Options): Promise< }; } -export const config: StorybookConfig['config'] = (entry = []) => { +export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entry = []) => { return [...entry, findDistEsm(__dirname, 'client/preview/config')]; }; diff --git a/app/vue/src/server/framework-preset-vue-docs.ts b/app/vue/src/server/framework-preset-vue-docs.ts index 478196fa0d8f..984fa07c49c5 100644 --- a/app/vue/src/server/framework-preset-vue-docs.ts +++ b/app/vue/src/server/framework-preset-vue-docs.ts @@ -30,7 +30,7 @@ export function webpackFinal(webpackConfig: any = {}, options: Options) { return webpackConfig; } -export const config: StorybookConfig['config'] = (entry = [], options) => { +export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entry = [], options) => { if (!hasDocsOrControls(options)) return entry; return [...entry, findDistEsm(__dirname, 'client/docs/config')]; }; diff --git a/app/vue/src/server/framework-preset-vue.ts b/app/vue/src/server/framework-preset-vue.ts index 5ca2341d674f..8656d8d35060 100644 --- a/app/vue/src/server/framework-preset-vue.ts +++ b/app/vue/src/server/framework-preset-vue.ts @@ -45,6 +45,6 @@ export async function webpack(config: Configuration, { presets }: Options) { return config; } -export const config: StorybookConfig['config'] = (entry = []) => { +export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entry = []) => { return [...entry, findDistEsm(__dirname, 'client/preview/config')]; }; diff --git a/app/vue3/src/server/framework-preset-vue3-docs.ts b/app/vue3/src/server/framework-preset-vue3-docs.ts index 34e755af3f17..b97af76f15ff 100644 --- a/app/vue3/src/server/framework-preset-vue3-docs.ts +++ b/app/vue3/src/server/framework-preset-vue3-docs.ts @@ -31,7 +31,7 @@ export function webpackFinal(webpackConfig: any = {}, options: Options) { return webpackConfig; } -export const config: StorybookConfig['config'] = (entry = [], options) => { +export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entry = [], options) => { if (!hasDocsOrControls(options)) return entry; return [...entry, findDistEsm(__dirname, 'client/docs/config')]; }; diff --git a/app/vue3/src/server/framework-preset-vue3.ts b/app/vue3/src/server/framework-preset-vue3.ts index 0db63e4cd193..fb4dc76a2886 100644 --- a/app/vue3/src/server/framework-preset-vue3.ts +++ b/app/vue3/src/server/framework-preset-vue3.ts @@ -48,6 +48,6 @@ export function webpack(config: Configuration): Configuration { }; } -export const config: StorybookConfig['config'] = (entry = []) => { +export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entry = []) => { return [...entry, findDistEsm(__dirname, 'client/preview/config')]; }; diff --git a/app/web-components/src/server/framework-preset-web-components-docs.ts b/app/web-components/src/server/framework-preset-web-components-docs.ts index 507496e74073..31ccb922f3f1 100644 --- a/app/web-components/src/server/framework-preset-web-components-docs.ts +++ b/app/web-components/src/server/framework-preset-web-components-docs.ts @@ -1,7 +1,7 @@ import { findDistEsm, StorybookConfig } from '@storybook/core-common'; import { hasDocsOrControls } from '@storybook/docs-tools'; -export const config: StorybookConfig['config'] = (entry = [], options) => { +export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entry = [], options) => { if (!hasDocsOrControls(options)) return entry; return [...entry, findDistEsm(__dirname, 'client/docs/config')]; }; diff --git a/app/web-components/src/server/framework-preset-web-components.ts b/app/web-components/src/server/framework-preset-web-components.ts index 44e273ff8f3c..19c537420947 100644 --- a/app/web-components/src/server/framework-preset-web-components.ts +++ b/app/web-components/src/server/framework-preset-web-components.ts @@ -41,6 +41,6 @@ export function webpack(config: Configuration, options: Options) { return config; } -export const config: StorybookConfig['config'] = (entry = []) => { +export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entry = []) => { return [...entry, findDistEsm(__dirname, 'client/preview/config')]; }; diff --git a/docs/snippets/common/args-usage-with-addons.js.mdx b/docs/snippets/common/args-usage-with-addons.js.mdx index 7c1ccf730efd..77d833352065 100644 --- a/docs/snippets/common/args-usage-with-addons.js.mdx +++ b/docs/snippets/common/args-usage-with-addons.js.mdx @@ -1,5 +1,5 @@ ```js -// your-addon/register.js +// your-addon/manager.js import { useArgs } from '@storybook/api'; diff --git a/docs/snippets/common/my-addon-initial-panel-state.js.mdx b/docs/snippets/common/my-addon-initial-panel-state.js.mdx index 72c6f1e7cb00..8009d61ac4fd 100644 --- a/docs/snippets/common/my-addon-initial-panel-state.js.mdx +++ b/docs/snippets/common/my-addon-initial-panel-state.js.mdx @@ -1,5 +1,5 @@ ```js -// /my-addon/src/register.js +// /my-addon/src/manager.js import React from 'react'; diff --git a/docs/snippets/common/storybook-addon-change-panel.js.mdx b/docs/snippets/common/storybook-addon-change-panel.js.mdx index 8e4794320c1e..fc9f821e60c4 100644 --- a/docs/snippets/common/storybook-addon-change-panel.js.mdx +++ b/docs/snippets/common/storybook-addon-change-panel.js.mdx @@ -1,5 +1,5 @@ ```js -// /my-addon/src/register.js +// /my-addon/src/manager.js import { useParameter } from '@storybook/api'; diff --git a/docs/snippets/common/storybook-addon-disable-addon.js.mdx b/docs/snippets/common/storybook-addon-disable-addon.js.mdx index b8dc0b43b88e..f74d563d5366 100644 --- a/docs/snippets/common/storybook-addon-disable-addon.js.mdx +++ b/docs/snippets/common/storybook-addon-disable-addon.js.mdx @@ -1,5 +1,5 @@ ```js -// /my-addon/register.js +// /my-addon/manager.js addons.register(ADDON_ID, () => { addons.add(PANEL_ID, { diff --git a/docs/snippets/common/storybook-addon-panel-example.js.mdx b/docs/snippets/common/storybook-addon-panel-example.js.mdx index 5f3898b61c67..29d8a1ab9d46 100644 --- a/docs/snippets/common/storybook-addon-panel-example.js.mdx +++ b/docs/snippets/common/storybook-addon-panel-example.js.mdx @@ -1,5 +1,5 @@ ```js -// addon-panel/register.js +// addon-panel/manager.js import React from 'react'; diff --git a/docs/snippets/common/storybook-addon-panel-initial.js.mdx b/docs/snippets/common/storybook-addon-panel-initial.js.mdx index fb4b80e7cff0..9f9e6b6c05f0 100644 --- a/docs/snippets/common/storybook-addon-panel-initial.js.mdx +++ b/docs/snippets/common/storybook-addon-panel-initial.js.mdx @@ -1,5 +1,5 @@ ```js -// .storybook/my-addon/register.js +// .storybook/my-addon/manager.js import React from 'react'; diff --git a/docs/snippets/common/storybook-addon-tab-example.js.mdx b/docs/snippets/common/storybook-addon-tab-example.js.mdx index bbfddd9627cd..dcfa1b41f92b 100644 --- a/docs/snippets/common/storybook-addon-tab-example.js.mdx +++ b/docs/snippets/common/storybook-addon-tab-example.js.mdx @@ -1,5 +1,5 @@ ```js -// addon-tab/register.js +// addon-tab/manager.js import React from 'react'; diff --git a/docs/snippets/common/storybook-addon-toolbar-example.js.mdx b/docs/snippets/common/storybook-addon-toolbar-example.js.mdx index 37ca2cfb2713..869c9df49ad4 100644 --- a/docs/snippets/common/storybook-addon-toolbar-example.js.mdx +++ b/docs/snippets/common/storybook-addon-toolbar-example.js.mdx @@ -1,5 +1,5 @@ ```js -// addon-toolbar/register.js +// addon-toolbar/manager.js import React from "react"; diff --git a/docs/snippets/common/storybook-addons-api-disablequeryparams.js.mdx b/docs/snippets/common/storybook-addons-api-disablequeryparams.js.mdx index 415edea16fd7..6f5f9e3845aa 100644 --- a/docs/snippets/common/storybook-addons-api-disablequeryparams.js.mdx +++ b/docs/snippets/common/storybook-addons-api-disablequeryparams.js.mdx @@ -1,5 +1,5 @@ ```js -// /my-addon/register.js +// /my-addon/manager.js addons.register('my-organisation/my-addon', (api) => { api.setQueryParams({ diff --git a/docs/snippets/common/storybook-addons-api-getqueryparam.js.mdx b/docs/snippets/common/storybook-addons-api-getqueryparam.js.mdx index 76513f992911..0c324ddd0d24 100644 --- a/docs/snippets/common/storybook-addons-api-getqueryparam.js.mdx +++ b/docs/snippets/common/storybook-addons-api-getqueryparam.js.mdx @@ -1,5 +1,5 @@ ```js -// /my-addon/register.js +// /my-addon/manager.js addons.register('my-organisation/my-addon', (api) => { api.getQueryParam('bbc'); diff --git a/docs/snippets/common/storybook-addons-api-geturlstate.js.mdx b/docs/snippets/common/storybook-addons-api-geturlstate.js.mdx index e7e9f13fe831..39321b7f1958 100644 --- a/docs/snippets/common/storybook-addons-api-geturlstate.js.mdx +++ b/docs/snippets/common/storybook-addons-api-geturlstate.js.mdx @@ -1,5 +1,5 @@ ```js -// /my-addon/register.js +// /my-addon/manager.js addons.register('my-organisation/my-addon', (api) => { const href = api.getUrlState({ diff --git a/docs/snippets/common/storybook-addons-api-imports.js.mdx b/docs/snippets/common/storybook-addons-api-imports.js.mdx index eb2af57b1a9a..e44d88ab048f 100644 --- a/docs/snippets/common/storybook-addons-api-imports.js.mdx +++ b/docs/snippets/common/storybook-addons-api-imports.js.mdx @@ -1,5 +1,5 @@ ```js -// .storybook/my-addon/register.js +// .storybook/my-addon/manager.js import { addons } from '@storybook/addons'; ``` \ No newline at end of file diff --git a/docs/snippets/common/storybook-addons-api-makedecorator.js.mdx b/docs/snippets/common/storybook-addons-api-makedecorator.js.mdx index 2f69823954b9..3c9617bfa19e 100644 --- a/docs/snippets/common/storybook-addons-api-makedecorator.js.mdx +++ b/docs/snippets/common/storybook-addons-api-makedecorator.js.mdx @@ -1,5 +1,5 @@ ```js -// .storybook/my-addon/register.js +// .storybook/my-addon/manager.js import { makeDecorator } from '@storybook/addons'; diff --git a/docs/snippets/common/storybook-addons-api-on.js.mdx b/docs/snippets/common/storybook-addons-api-on.js.mdx index aa2e706c51c6..ac86c5e43918 100644 --- a/docs/snippets/common/storybook-addons-api-on.js.mdx +++ b/docs/snippets/common/storybook-addons-api-on.js.mdx @@ -1,5 +1,5 @@ ```js -// /my-addon/register.js +// /my-addon/manager.js addons.register('my-organisation/my-addon', (api) => { api.on('some-event', (eventData) => console.log(eventData)); diff --git a/docs/snippets/common/storybook-addons-api-register.js.mdx b/docs/snippets/common/storybook-addons-api-register.js.mdx index 009b2ea7e660..3c044eebd8c4 100644 --- a/docs/snippets/common/storybook-addons-api-register.js.mdx +++ b/docs/snippets/common/storybook-addons-api-register.js.mdx @@ -1,5 +1,5 @@ ```js -// .storybook/my-addon/register.js +// .storybook/my-addon/manager.js import { addons } from '@storybook/addons'; diff --git a/docs/snippets/common/storybook-addons-api-selectincurrentkind.js.mdx b/docs/snippets/common/storybook-addons-api-selectincurrentkind.js.mdx index 24b46cc3191b..46c89f25fa43 100644 --- a/docs/snippets/common/storybook-addons-api-selectincurrentkind.js.mdx +++ b/docs/snippets/common/storybook-addons-api-selectincurrentkind.js.mdx @@ -1,5 +1,5 @@ ```js -// /my-addon/register.js +// /my-addon/manager.js addons.register('my-organisation/my-addon', (api) => { api.selectInCurrentKind('Basic'); diff --git a/docs/snippets/common/storybook-addons-api-selectstory.js.mdx b/docs/snippets/common/storybook-addons-api-selectstory.js.mdx index bd1314b7ec4f..4af2f91bc3ad 100644 --- a/docs/snippets/common/storybook-addons-api-selectstory.js.mdx +++ b/docs/snippets/common/storybook-addons-api-selectstory.js.mdx @@ -1,5 +1,5 @@ ```js -// /my-addon/register.js +// /my-addon/manager.js addons.register('my-organisation/my-addon', (api) => { api.selectStory('Button', 'Basic'); diff --git a/docs/snippets/common/storybook-addons-api-setqueryparams.js.mdx b/docs/snippets/common/storybook-addons-api-setqueryparams.js.mdx index 988482dbd3ad..bbfaa727b722 100644 --- a/docs/snippets/common/storybook-addons-api-setqueryparams.js.mdx +++ b/docs/snippets/common/storybook-addons-api-setqueryparams.js.mdx @@ -1,5 +1,5 @@ ```js -// /my-addon/register.js +// /my-addon/manager.js addons.register('my-organisation/my-addon', (api) => { api.setQueryParams({ diff --git a/docs/snippets/common/storybook-addons-api-useaddonstate.js.mdx b/docs/snippets/common/storybook-addons-api-useaddonstate.js.mdx index c0800d6d301b..6d6db143ba12 100644 --- a/docs/snippets/common/storybook-addons-api-useaddonstate.js.mdx +++ b/docs/snippets/common/storybook-addons-api-useaddonstate.js.mdx @@ -1,5 +1,5 @@ ```js -// /my-addon/register.js +// /my-addon/manager.js import React from 'react'; diff --git a/docs/snippets/common/storybook-addons-api-useapi.js.mdx b/docs/snippets/common/storybook-addons-api-useapi.js.mdx index f88c1c1524a2..f6c05424dc6a 100644 --- a/docs/snippets/common/storybook-addons-api-useapi.js.mdx +++ b/docs/snippets/common/storybook-addons-api-useapi.js.mdx @@ -1,5 +1,5 @@ ```js -// /my-addon/register.js +// /my-addon/manager.js import React from 'react'; diff --git a/docs/snippets/common/storybook-addons-api-usechannel.js.mdx b/docs/snippets/common/storybook-addons-api-usechannel.js.mdx index 7184c752dc05..f017c5cfccb0 100644 --- a/docs/snippets/common/storybook-addons-api-usechannel.js.mdx +++ b/docs/snippets/common/storybook-addons-api-usechannel.js.mdx @@ -1,5 +1,5 @@ ```js -// /my-addon/register.js +// /my-addon/manager.js import React from 'react'; diff --git a/docs/snippets/common/storybook-addons-api-useglobal.js.mdx b/docs/snippets/common/storybook-addons-api-useglobal.js.mdx index 94f5a8b83313..ad33aef34253 100644 --- a/docs/snippets/common/storybook-addons-api-useglobal.js.mdx +++ b/docs/snippets/common/storybook-addons-api-useglobal.js.mdx @@ -1,5 +1,5 @@ ```js -// /my-addon/register.js +// /my-addon/manager.js import React from 'react'; diff --git a/docs/snippets/common/storybook-addons-api-useparameter.js.mdx b/docs/snippets/common/storybook-addons-api-useparameter.js.mdx index 3c496cbb2a09..fdbc74301782 100644 --- a/docs/snippets/common/storybook-addons-api-useparameter.js.mdx +++ b/docs/snippets/common/storybook-addons-api-useparameter.js.mdx @@ -1,5 +1,5 @@ ```js -// /my-addon/register.js +// /my-addon/manager.js import React from 'react'; diff --git a/docs/snippets/common/storybook-addons-api-usestorybookstate.js.mdx b/docs/snippets/common/storybook-addons-api-usestorybookstate.js.mdx index 62f1605af9f1..4e1515a3b6b3 100644 --- a/docs/snippets/common/storybook-addons-api-usestorybookstate.js.mdx +++ b/docs/snippets/common/storybook-addons-api-usestorybookstate.js.mdx @@ -1,5 +1,5 @@ ```js -// /my-addon/register.js +// /my-addon/manager.js import React from 'react'; diff --git a/docs/snippets/common/storybook-argtypes-with-addon.js.mdx b/docs/snippets/common/storybook-argtypes-with-addon.js.mdx index 3187d5e6f3a4..f34c4859bfb9 100644 --- a/docs/snippets/common/storybook-argtypes-with-addon.js.mdx +++ b/docs/snippets/common/storybook-argtypes-with-addon.js.mdx @@ -1,5 +1,5 @@ ```js -// .storybook/my-addon/register.js +// .storybook/my-addon/manager.js import { useArgTypes } from '@storybook/api'; diff --git a/docs/snippets/common/storybook-main-register-addon.js.mdx b/docs/snippets/common/storybook-main-register-addon.js.mdx index 0f587017ee85..675a1d62c08a 100644 --- a/docs/snippets/common/storybook-main-register-addon.js.mdx +++ b/docs/snippets/common/storybook-main-register-addon.js.mdx @@ -2,6 +2,6 @@ // .storybook/main.js module.exports = { - addons: ['path/to/register.js'], + addons: ['path/to/manager.js'], }; ``` \ No newline at end of file diff --git a/docs/snippets/common/storybook-main-register-presets-managerentry.js.mdx b/docs/snippets/common/storybook-main-register-presets-managerentry.js.mdx index 4a913b4f8aa3..18fa46acdf1f 100644 --- a/docs/snippets/common/storybook-main-register-presets-managerentry.js.mdx +++ b/docs/snippets/common/storybook-main-register-presets-managerentry.js.mdx @@ -3,7 +3,6 @@ module.exports = { addons: [ - '@storybook/addon-storysource/register', // A managerEntry registered here, in this case from the storysource addon. '@storybook/addon-docs/preset', // A preset registered here, in this case from the addon-docs addon. ], }; diff --git a/docs/snippets/common/storybook-main-use-manager-entries.js.mdx b/docs/snippets/common/storybook-main-use-manager-entries.js.mdx index 5bbaa228a809..024799320379 100644 --- a/docs/snippets/common/storybook-main-use-manager-entries.js.mdx +++ b/docs/snippets/common/storybook-main-use-manager-entries.js.mdx @@ -2,6 +2,6 @@ // .storybook/main.js module.exports = { - managerEntries: ['@storybook/addon-storysource/register'], + managerEntries: ['some-storybook-addon/entry-point.js'], }; ``` \ No newline at end of file diff --git a/docs/snippets/common/storybook-storysource-manager-entries.js.mdx b/docs/snippets/common/storybook-storysource-manager-entries.js.mdx index 5e792ec1d298..e9c5dec6d95e 100644 --- a/docs/snippets/common/storybook-storysource-manager-entries.js.mdx +++ b/docs/snippets/common/storybook-storysource-manager-entries.js.mdx @@ -1,7 +1,5 @@ ```js // storysource/preset.js -export function managerEntries(entry = []) { - return [...entry, require.resolve('@storybook/addon-storysource/register')]; -} +/* nothing needed */ ``` \ No newline at end of file diff --git a/examples/cra-ts-kitchen-sink/.storybook/localAddon/register.tsx b/examples/cra-ts-kitchen-sink/.storybook/localAddon/manager.tsx similarity index 100% rename from examples/cra-ts-kitchen-sink/.storybook/localAddon/register.tsx rename to examples/cra-ts-kitchen-sink/.storybook/localAddon/manager.tsx diff --git a/examples/cra-ts-kitchen-sink/.storybook/main.ts b/examples/cra-ts-kitchen-sink/.storybook/main.ts index 048a7f5cefae..b225f343a8eb 100644 --- a/examples/cra-ts-kitchen-sink/.storybook/main.ts +++ b/examples/cra-ts-kitchen-sink/.storybook/main.ts @@ -12,7 +12,7 @@ module.exports = { '@storybook/addon-actions', '@storybook/addon-links', '@storybook/addon-a11y', - './localAddon/register.tsx', + './localAddon/manager.tsx', './localAddon/preset.ts', ], webpackFinal: (config: Configuration) => { diff --git a/examples/web-components-kitchen-sink/package.json b/examples/web-components-kitchen-sink/package.json index 2915fc8ceb4f..20b23f22d223 100644 --- a/examples/web-components-kitchen-sink/package.json +++ b/examples/web-components-kitchen-sink/package.json @@ -39,6 +39,7 @@ "@storybook/core-common": "portal:../../lib/core-common", "@storybook/core-events": "portal:../../lib/core-events", "@storybook/core-server": "portal:../../lib/core-server", + "@storybook/csf": "0.0.2--canary.87bc651.0", "@storybook/csf-tools": "portal:../../lib/csf-tools", "@storybook/docs-tools": "portal:../../lib/docs-tools", "@storybook/jest": "^0.0.5", diff --git a/lib/cli/src/add.test.ts b/lib/cli/src/add.test.ts index 261c6626b11b..d6632443ea49 100644 --- a/lib/cli/src/add.test.ts +++ b/lib/cli/src/add.test.ts @@ -9,13 +9,13 @@ import { describe('addStorybookAddonToFile should correctly register an Storybook addon', () => { test('to an empty array', () => { expect(addStorybookAddonToFile('addon-name', [], true)).toEqual([ - `import '${storybookAddonScope}addon-name/register';`, + `import '${storybookAddonScope}addon-name/manager';`, ]); }); test('to an empty file', () => { expect(addStorybookAddonToFile('addon-name', [''], true)).toEqual([ - `import '${storybookAddonScope}addon-name/register';`, + `import '${storybookAddonScope}addon-name/manager';`, '', ]); }); @@ -25,16 +25,16 @@ describe('addStorybookAddonToFile should correctly register an Storybook addon', addStorybookAddonToFile( 'addon-name', [ - "import '@storybook/addon-actions/register';", - "import '@storybook/addon-links/register';", + "import '@storybook/addon-actions/manager';", + "import '@storybook/addon-links/manager';", '', ], true ) ).toEqual([ - "import '@storybook/addon-actions/register';", - "import '@storybook/addon-links/register';", - `import '${storybookAddonScope}addon-name/register';`, + `import '${storybookAddonScope}addon-name/manager';`, + "import '@storybook/addon-actions/manager';", + "import '@storybook/addon-links/manager';", '', ]); }); @@ -44,8 +44,8 @@ describe('addStorybookAddonToFile should correctly register an Storybook addon', addStorybookAddonToFile( 'addon-name', [ - "import '@storybook/addon-links/register';", - "import '@storybook/addon-actions/register';", + "import '@storybook/addon-links/manager';", + "import '@storybook/addon-actions/manager';", '', '//some other stuff', '', @@ -55,9 +55,9 @@ describe('addStorybookAddonToFile should correctly register an Storybook addon', true ) ).toEqual([ - "import '@storybook/addon-links/register';", - "import '@storybook/addon-actions/register';", - `import '${storybookAddonScope}addon-name/register';`, + `import '${storybookAddonScope}addon-name/manager';`, + "import '@storybook/addon-links/manager';", + "import '@storybook/addon-actions/manager';", '', '//some other stuff', '', @@ -71,17 +71,17 @@ describe('addStorybookAddonToFile should correctly register an Storybook addon', addStorybookAddonToFile( 'addon-name', [ - "import '@storybook/addon-actions/register';", - "import '@storybook/addon-links/register';", - `import '${storybookAddonScope}addon-name/register';`, + "import '@storybook/addon-actions/manager';", + "import '@storybook/addon-links/manager';", + `import '${storybookAddonScope}addon-name/manager';`, '', ], true ) ).toEqual([ - "import '@storybook/addon-actions/register';", - "import '@storybook/addon-links/register';", - `import '${storybookAddonScope}addon-name/register';`, + "import '@storybook/addon-actions/manager';", + "import '@storybook/addon-links/manager';", + `import '${storybookAddonScope}addon-name/manager';`, '', ]); }); @@ -91,16 +91,16 @@ describe('addStorybookAddonToFile should correctly register an Storybook addon', addStorybookAddonToFile( 'addon-name', [ - "import '@storybook/addon-actions/register';", - "import '@storybook/addon-links/register';", + "import '@storybook/addon-actions/manager';", + "import '@storybook/addon-links/manager';", '', ], false ) ).toEqual([ - "import '@storybook/addon-actions/register';", - "import '@storybook/addon-links/register';", - `import 'addon-name/register';`, + `import 'addon-name/manager';`, + "import '@storybook/addon-actions/manager';", + "import '@storybook/addon-links/manager';", '', ]); }); diff --git a/lib/cli/src/add.ts b/lib/cli/src/add.ts index 300a23039668..f6fb63e3787b 100644 --- a/lib/cli/src/add.ts +++ b/lib/cli/src/add.ts @@ -79,7 +79,7 @@ export const addStorybookAddonToFile = ( isOfficialAddon: boolean ) => { const addonNameNoTag = addonName.split('@')[0]; - const alreadyRegistered = addonsFile.find((line) => line.includes(`${addonNameNoTag}/register`)); + const alreadyRegistered = addonsFile.find((line) => line.includes(`${addonNameNoTag}/manager`)); if (alreadyRegistered) { return addonsFile; @@ -93,7 +93,7 @@ export const addStorybookAddonToFile = ( return [ ...addonsFile.slice(0, latestImportIndex + 1), - `import '${getPackageName(addonNameNoTag, isOfficialAddon)}/register';`, + `import '${getPackageName(addonNameNoTag, isOfficialAddon)}/manager';`, ...addonsFile.slice(latestImportIndex + 1), ]; }; diff --git a/lib/cli/src/generators/REACT_NATIVE/template-csf/storybook/addons.js b/lib/cli/src/generators/REACT_NATIVE/template-csf/storybook/addons.js index bc646c943eb4..c3f195bdf9ee 100644 --- a/lib/cli/src/generators/REACT_NATIVE/template-csf/storybook/addons.js +++ b/lib/cli/src/generators/REACT_NATIVE/template-csf/storybook/addons.js @@ -1,3 +1,3 @@ -import '@storybook/addon-actions/register'; -import '@storybook/addon-links/register'; -import '@storybook/addon-knobs/register'; +import '@storybook/addon-actions/manager'; +import '@storybook/addon-links/manager'; +import '@storybook/addon-knobs/manager'; diff --git a/lib/cli/src/generators/REACT_NATIVE/template-csf/storybook/rn-addons.js b/lib/cli/src/generators/REACT_NATIVE/template-csf/storybook/rn-addons.js index 4d30f923173b..18ce369c70b9 100644 --- a/lib/cli/src/generators/REACT_NATIVE/template-csf/storybook/rn-addons.js +++ b/lib/cli/src/generators/REACT_NATIVE/template-csf/storybook/rn-addons.js @@ -1,2 +1,2 @@ -import '@storybook/addon-ondevice-actions/register'; -import '@storybook/addon-ondevice-knobs/register'; +import '@storybook/addon-ondevice-actions/manager'; +import '@storybook/addon-ondevice-knobs/manager'; diff --git a/lib/core-common/src/presets.test.ts b/lib/core-common/src/presets.test.ts index d9a26cbf12a2..ac19e6becbd1 100644 --- a/lib/core-common/src/presets.test.ts +++ b/lib/core-common/src/presets.test.ts @@ -17,28 +17,45 @@ jest.mock('@storybook/node-logger', () => ({ }, })); -jest.mock('resolve-from', () => (l: any, name: string) => { +jest.mock('./utils/safeResolve', () => { const KNOWN_FILES = [ + '@storybook/react', + '@storybook/addon-actions/manager', '@storybook/addon-actions/register', './local/preset', './local/addons', '/absolute/preset', '/absolute/addons', + '@storybook/addon-docs', + '@storybook/addon-cool', '@storybook/addon-docs/preset', + '@storybook/addon-interactions/preset', '@storybook/addon-essentials', + '@storybook/addon-knobs/manager', '@storybook/addon-knobs/register', '@storybook/addon-notes/register-panel', '@storybook/preset-create-react-app', '@storybook/preset-typescript', 'addon-bar/preset.js', + 'addon-bar', 'addon-baz/register.js', 'addon-foo/register.js', ]; - if (KNOWN_FILES.includes(name)) { - return name; - } - throw new Error(`cannot resolve ${name}`); + return { + safeResolveFrom: jest.fn((l: any, name: string) => { + if (KNOWN_FILES.includes(name)) { + return name; + } + return undefined; + }), + safeResolve: jest.fn((name: string) => { + if (KNOWN_FILES.includes(name)) { + return name; + } + return undefined; + }), + }; }); describe('presets', () => { @@ -388,12 +405,21 @@ describe('resolveAddonName', () => { it('should resolve managerEntries', () => { expect(resolveAddonName({}, '@storybook/addon-actions/register')).toEqual({ name: '@storybook/addon-actions/register', - type: 'managerEntries', + managerEntries: ['@storybook/addon-actions/register'], + type: 'virtual', + }); + }); + + it('should resolve managerEntries from new /manager path', () => { + expect(resolveAddonName({}, '@storybook/addon-actions/manager')).toEqual({ + name: '@storybook/addon-actions/manager', + managerEntries: ['@storybook/addon-actions/manager'], + type: 'virtual', }); }); it('should resolve presets', () => { - expect(resolveAddonName({}, '@storybook/addon-docs')).toEqual({ + expect(resolveAddonName({}, '@storybook/addon-docs/preset')).toEqual({ name: '@storybook/addon-docs/preset', type: 'presets', }); @@ -417,7 +443,12 @@ describe('loadPreset', () => { mockPreset('@storybook/addon-docs/preset', {}); mockPreset('@storybook/addon-actions/register', {}); mockPreset('addon-foo/register.js', {}); - mockPreset('addon-bar/preset', {}); + mockPreset('@storybook/addon-cool', {}); + mockPreset('@storybook/addon-interactions/preset', {}); + mockPreset('addon-bar', { + addons: ['@storybook/addon-cool'], + presets: ['@storybook/addon-interactions/preset'], + }); mockPreset('addon-baz/register.js', {}); mockPreset('@storybook/addon-notes/register-panel', {}); @@ -427,10 +458,10 @@ describe('loadPreset', () => { const loaded = loadPreset( { name: '', - type: 'managerEntries', + type: 'virtual', framework: '@storybook/react', presets: ['@storybook/preset-typescript'], - addons: ['@storybook/addon-docs'], + addons: ['@storybook/addon-docs/preset'], }, 0, {} @@ -447,6 +478,11 @@ describe('loadPreset', () => { "options": Object {}, "preset": Object {}, }, + Object { + "name": "@storybook/react", + "options": Object {}, + "preset": Object {}, + }, Object { "name": "@storybook/addon-docs/preset", "options": Object {}, @@ -455,14 +491,14 @@ describe('loadPreset', () => { Object { "name": Object { "addons": Array [ - "@storybook/addon-docs", + "@storybook/addon-docs/preset", ], "framework": "@storybook/react", "name": "", "presets": Array [ "@storybook/preset-typescript", ], - "type": "managerEntries", + "type": "virtual", }, "options": Object {}, "preset": Object {}, @@ -475,14 +511,14 @@ describe('loadPreset', () => { const loaded = loadPreset( { name: '', - type: 'managerEntries', + type: 'virtual', presets: ['@storybook/preset-typescript'], addons: [ - '@storybook/addon-docs', + '@storybook/addon-docs/preset', '@storybook/addon-actions/register', 'addon-foo/register.js', 'addon-bar', - 'addon-baz/register.tsx', + 'addon-baz/register.js', '@storybook/addon-notes/register-panel', ], }, @@ -501,34 +537,43 @@ describe('loadPreset', () => { preset: {}, }, { - name: '@storybook/addon-actions/register_additionalManagerEntries', + name: '@storybook/addon-actions/register', options: {}, preset: { managerEntries: ['@storybook/addon-actions/register'], }, }, { - name: 'addon-foo/register.js_additionalManagerEntries', + name: 'addon-foo/register.js', options: {}, preset: { managerEntries: ['addon-foo/register.js'], }, }, - // should be there, but some file mocking problem is causing it to not resolve - // { - // name: 'addon-bar', - // options: {}, - // preset: {}, - // }, { - name: 'addon-baz/register.tsx_additionalManagerEntries', + name: '@storybook/addon-interactions/preset', + options: {}, + preset: {}, + }, + { + name: '@storybook/addon-cool', + options: {}, + preset: {}, + }, + { + name: 'addon-bar', + options: {}, + preset: {}, + }, + { + name: 'addon-baz/register.js', options: {}, preset: { - managerEntries: ['addon-baz/register.tsx'], + managerEntries: ['addon-baz/register.js'], }, }, { - name: '@storybook/addon-notes/register-panel_additionalManagerEntries', + name: '@storybook/addon-notes/register-panel', options: {}, preset: { managerEntries: ['@storybook/addon-notes/register-panel'], @@ -538,15 +583,15 @@ describe('loadPreset', () => { name: { presets: ['@storybook/preset-typescript'], addons: [ - '@storybook/addon-docs', + '@storybook/addon-docs/preset', '@storybook/addon-actions/register', 'addon-foo/register.js', 'addon-bar', - 'addon-baz/register.tsx', + 'addon-baz/register.js', '@storybook/addon-notes/register-panel', ], name: '', - type: 'managerEntries', + type: 'virtual', }, options: {}, preset: {}, diff --git a/lib/core-common/src/presets.ts b/lib/core-common/src/presets.ts index fdc8f48da238..24093df15337 100644 --- a/lib/core-common/src/presets.ts +++ b/lib/core-common/src/presets.ts @@ -1,7 +1,6 @@ import dedent from 'ts-dedent'; import { resolve } from 'path'; import { logger } from '@storybook/node-logger'; -import resolveFrom from 'resolve-from'; import { CLIOptions, LoadedPreset, @@ -12,6 +11,7 @@ import { } from './types'; import { loadCustomPresets } from './utils/load-custom-presets'; import { serverRequire } from './utils/interpret-require'; +import { safeResolve, safeResolveFrom } from './utils/safeResolve'; const isObject = (val: unknown): val is Record => val != null && typeof val === 'object' && Array.isArray(val) === false; @@ -45,8 +45,8 @@ function resolvePresetFunction( * Parse an addon into either a managerEntries or a preset. Throw on invalid input. * * Valid inputs: - * - '@storybook/addon-actions/register' - * => { type: 'managerEntries', item } + * - '@storybook/addon-actions/manager' + * => { type: 'virtual', item } * * - '@storybook/addon-docs/preset' * => { type: 'presets', item } @@ -57,68 +57,95 @@ function resolvePresetFunction( * - { name: '@storybook/addon-docs(/preset)?', options: { ... } } * => { type: 'presets', item: { name: '@storybook/addon-docs/preset', options } } */ -export const resolveAddonName = (configDir: string, name: string) => { - let path; - - if (name.startsWith('.')) { - path = resolveFrom(configDir, name); - } else if (name.startsWith('/')) { - path = name; - } else if (name.match(/\/(preset|register(-panel)?)(\.(js|ts|tsx|jsx))?$/)) { - path = name; - } +interface ResolvedAddonPreset { + type: 'presets'; + name: string; +} +interface ResolvedAddonVirtual { + type: 'virtual'; + name: string; + managerEntries?: string[]; + previewAnnotations?: string[]; + presets?: (string | { name: string; options?: any })[]; +} - // when user provides full path, we don't need to do anything - if (path) { +export const resolveAddonName = ( + configDir: string, + name: string, + options: any +): ResolvedAddonPreset | ResolvedAddonVirtual => { + const r = name.startsWith('/') ? safeResolve : safeResolveFrom.bind(null, configDir); + const resolved = r(name); + + if (name.match(/\/(manager|register(-panel)?)(\.(js|ts|tsx|jsx))?$/)) { return { - name: path, - // Accept `register`, `register.js`, `require.resolve('foo/register'), `register-panel` - type: path.match(/register(-panel)?(\.(js|ts|tsx|jsx))?$/) ? 'managerEntries' : 'presets', + type: 'virtual', + name, + managerEntries: [resolved], + }; + } + if (name.match(/\/(preset)(\.(js|ts|tsx|jsx))?$/)) { + return { + type: 'presets', + name: resolved, }; } - try { + const path = name; + + // when user provides full path, we don't need to do anything! + const managerFile = safeResolve(`${path}/manager`); + const registerFile = safeResolve(`${path}/register`) || safeResolve(`${path}/register-panel`); + const previewFile = safeResolve(`${path}/preview`); + const presetFile = safeResolve(`${path}/preset`); + + if (!(managerFile || previewFile) && presetFile) { return { - name: resolveFrom(configDir, `${name}/preset`), type: 'presets', + name: presetFile, }; - // eslint-disable-next-line no-empty - } catch (err) {} + } + + if (managerFile || registerFile || previewFile || presetFile) { + const managerEntries = []; + + if (managerFile) { + managerEntries.push(managerFile); + } + // register file is the old way of registering addons + if (!managerFile && registerFile && !presetFile) { + managerEntries.push(registerFile); + } - try { return { - name: resolveFrom(configDir, `${name}/register`), - type: 'managerEntries', + type: 'virtual', + name: path, + ...(managerEntries.length ? { managerEntries } : {}), + ...(previewFile ? { previewAnnotations: [previewFile] } : {}), + ...(presetFile ? { presets: [{ name: presetFile, options }] } : {}), }; - // eslint-disable-next-line no-empty - } catch (err) {} + } return { - name: resolveFrom(configDir, name), type: 'presets', + name: resolved, }; }; const map = ({ configDir }: InterPresetOptions) => (item: any) => { + const options = isObject(item) ? item.options || undefined : undefined; + const name = isObject(item) ? item.name : item; try { - if (isObject(item)) { - const { name } = resolveAddonName(configDir, item.name); - return { ...item, name }; - } - const { name, type } = resolveAddonName(configDir, item); - if (type === 'managerEntries') { - return { - name: `${name}_additionalManagerEntries`, - type, - managerEntries: [name], - }; - } - return resolveAddonName(configDir, name); + const resolved = resolveAddonName(configDir, name, options); + return { + ...(options ? { options } : {}), + ...resolved, + }; } catch (err) { logger.error( - `Addon value should end in /register OR it should be a valid preset https://storybook.js.org/docs/react/addons/writing-presets/\n${item}` + `Addon value should end in /manager or /preview or /register OR it should be a valid preset https://storybook.js.org/docs/react/addons/writing-presets/\n${item}` ); } return undefined; @@ -135,7 +162,7 @@ function interopRequireDefault(filePath: string) { } function getContent(input: any) { - if (input.type === 'managerEntries') { + if (input.type === 'virtual') { const { type, name, ...rest } = input; return rest; } diff --git a/lib/core-common/src/types.ts b/lib/core-common/src/types.ts index 2c6d59753c42..07c666dea01a 100644 --- a/lib/core-common/src/types.ts +++ b/lib/core-common/src/types.ts @@ -420,6 +420,13 @@ export interface StorybookConfig { /** * Add additional scripts to run in the preview a la `.storybook/preview.js` + * + * @deprecated use `previewAnnotations` or `/preview.js` file instead */ config?: (entries: Entry[], options: Options) => Entry[]; + + /** + * Add additional scripts to run in the preview a la `.storybook/preview.js` + */ + previewAnnotations?: (entries: Entry[], options: Options) => Entry[]; } diff --git a/lib/core-common/src/utils/safeResolve.ts b/lib/core-common/src/utils/safeResolve.ts new file mode 100644 index 000000000000..a1d5684e45b5 --- /dev/null +++ b/lib/core-common/src/utils/safeResolve.ts @@ -0,0 +1,17 @@ +import resolveFrom from 'resolve-from'; + +export const safeResolveFrom = (path: string, file: string) => { + try { + return resolveFrom(path, file); + } catch (e) { + return undefined; + } +}; + +export const safeResolve = (file: string) => { + try { + return require.resolve(file); + } catch (e) { + return undefined; + } +}; diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev-posix b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev-posix index 51e1c74a02fa..1937cd52a90a 100644 --- a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev-posix +++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev-posix @@ -6,13 +6,13 @@ Object { "NODE_MODULES/@storybook/addon-ie11/dist/event-source-polyfill.js", "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/manager/index.js", - "ROOT/addons/docs/dist/esm/register", - "ROOT/addons/controls/dist/esm/register.js", - "ROOT/addons/actions/dist/esm/register.js", - "ROOT/addons/backgrounds/dist/esm/register.js", - "ROOT/addons/toolbars/dist/esm/register.js", - "ROOT/addons/measure/dist/esm/register.js", - "ROOT/addons/outline/dist/esm/register.js", + "ROOT/addons/docs/manager.js", + "ROOT/addons/controls/manager.js", + "ROOT/addons/actions/manager.js", + "ROOT/addons/backgrounds/manager.js", + "ROOT/addons/toolbars/manager.js", + "ROOT/addons/measure/manager.js", + "ROOT/addons/outline/manager.js", ], "keys": Array [ "name", diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod-posix b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod-posix index 28bb2d32108b..5327d847d2c6 100644 --- a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod-posix +++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod-posix @@ -6,13 +6,13 @@ Object { "NODE_MODULES/@storybook/addon-ie11/dist/event-source-polyfill.js", "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/manager/index.js", - "ROOT/addons/docs/dist/esm/register", - "ROOT/addons/controls/dist/esm/register.js", - "ROOT/addons/actions/dist/esm/register.js", - "ROOT/addons/backgrounds/dist/esm/register.js", - "ROOT/addons/toolbars/dist/esm/register.js", - "ROOT/addons/measure/dist/esm/register.js", - "ROOT/addons/outline/dist/esm/register.js", + "ROOT/addons/docs/manager.js", + "ROOT/addons/controls/manager.js", + "ROOT/addons/actions/manager.js", + "ROOT/addons/backgrounds/manager.js", + "ROOT/addons/toolbars/manager.js", + "ROOT/addons/measure/manager.js", + "ROOT/addons/outline/manager.js", ], "keys": Array [ "name", diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix index 13630dcfcad0..11aced08f4fb 100644 --- a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix +++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix @@ -8,15 +8,13 @@ Object { "NODE_MODULES/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined", "NODE_MODULES/@storybook/addon-ie11/dist/event-source-polyfill.js", "ROOT/storybook-init-framework-entry.js", - "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", "ROOT/app/react/dist/esm/client/docs/config-generated-config-entry.js", "ROOT/app/react/dist/esm/client/preview/config-generated-config-entry.js", - "ROOT/addons/actions/dist/esm/preset/addDecorator.js-generated-config-entry.js", - "ROOT/addons/actions/dist/esm/preset/addArgs.js-generated-config-entry.js", - "ROOT/addons/backgrounds/dist/esm/preset/addDecorator.js-generated-config-entry.js", - "ROOT/addons/backgrounds/dist/esm/preset/addParameter.js-generated-config-entry.js", - "ROOT/addons/measure/dist/esm/preset/addDecorator.js-generated-config-entry.js", - "ROOT/addons/outline/dist/esm/preset/addDecorator.js-generated-config-entry.js", + "ROOT/addons/docs/preview.js-generated-config-entry.js", + "ROOT/addons/actions/preview.js-generated-config-entry.js", + "ROOT/addons/backgrounds/preview.js-generated-config-entry.js", + "ROOT/addons/measure/preview.js-generated-config-entry.js", + "ROOT/addons/outline/preview.js-generated-config-entry.js", "ROOT/examples/cra-ts-essentials/.storybook/preview.tsx-generated-config-entry.js", "ROOT/generated-stories-entry.js", ], diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix index 9f07b584334b..e08d547c90c0 100644 --- a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix +++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix @@ -7,15 +7,13 @@ Object { "ROOT/lib/core-client/dist/esm/globals/globals.js", "NODE_MODULES/@storybook/addon-ie11/dist/event-source-polyfill.js", "ROOT/storybook-init-framework-entry.js", - "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", "ROOT/app/react/dist/esm/client/docs/config-generated-config-entry.js", "ROOT/app/react/dist/esm/client/preview/config-generated-config-entry.js", - "ROOT/addons/actions/dist/esm/preset/addDecorator.js-generated-config-entry.js", - "ROOT/addons/actions/dist/esm/preset/addArgs.js-generated-config-entry.js", - "ROOT/addons/backgrounds/dist/esm/preset/addDecorator.js-generated-config-entry.js", - "ROOT/addons/backgrounds/dist/esm/preset/addParameter.js-generated-config-entry.js", - "ROOT/addons/measure/dist/esm/preset/addDecorator.js-generated-config-entry.js", - "ROOT/addons/outline/dist/esm/preset/addDecorator.js-generated-config-entry.js", + "ROOT/addons/docs/preview.js-generated-config-entry.js", + "ROOT/addons/actions/preview.js-generated-config-entry.js", + "ROOT/addons/backgrounds/preview.js-generated-config-entry.js", + "ROOT/addons/measure/preview.js-generated-config-entry.js", + "ROOT/addons/outline/preview.js-generated-config-entry.js", "ROOT/examples/cra-ts-essentials/.storybook/preview.tsx-generated-config-entry.js", "ROOT/generated-stories-entry.js", ], diff --git a/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-dev-posix b/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-dev-posix index b0b601e85c6a..9fcbeaa6c249 100644 --- a/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-dev-posix +++ b/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-dev-posix @@ -5,15 +5,15 @@ Object { "entry": Array [ "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/manager/index.js", - "ROOT/addons/docs/dist/esm/register", - "ROOT/addons/a11y/dist/esm/register.js", - "ROOT/addons/actions/dist/esm/register.js", - "ROOT/addons/backgrounds/dist/esm/register.js", - "ROOT/addons/controls/dist/esm/register.js", - "ROOT/addons/jest/register.js", - "ROOT/addons/links/dist/esm/register.js", - "ROOT/addons/storysource/dist/esm/register.js", - "ROOT/addons/viewport/dist/esm/register.js", + "ROOT/addons/docs/manager.js", + "ROOT/addons/a11y/manager.js", + "ROOT/addons/actions/manager.js", + "ROOT/addons/backgrounds/manager.js", + "ROOT/addons/controls/manager.js", + "ROOT/addons/jest/manager.js", + "ROOT/addons/links/manager.js", + "ROOT/addons/storysource/dist/esm/manager.js", + "ROOT/addons/viewport/manager.js", ], "keys": Array [ "name", diff --git a/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-prod-posix b/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-prod-posix index 6b9d055e21bd..348d29de932a 100644 --- a/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-prod-posix +++ b/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-prod-posix @@ -5,15 +5,15 @@ Object { "entry": Array [ "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/manager/index.js", - "ROOT/addons/docs/dist/esm/register", - "ROOT/addons/a11y/dist/esm/register.js", - "ROOT/addons/actions/dist/esm/register.js", - "ROOT/addons/backgrounds/dist/esm/register.js", - "ROOT/addons/controls/dist/esm/register.js", - "ROOT/addons/jest/register.js", - "ROOT/addons/links/dist/esm/register.js", - "ROOT/addons/storysource/dist/esm/register.js", - "ROOT/addons/viewport/dist/esm/register.js", + "ROOT/addons/docs/manager.js", + "ROOT/addons/a11y/manager.js", + "ROOT/addons/actions/manager.js", + "ROOT/addons/backgrounds/manager.js", + "ROOT/addons/controls/manager.js", + "ROOT/addons/jest/manager.js", + "ROOT/addons/links/manager.js", + "ROOT/addons/storysource/dist/esm/manager.js", + "ROOT/addons/viewport/manager.js", ], "keys": Array [ "name", diff --git a/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev-posix b/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev-posix index 97d781a3de9f..fef4e5b1e09b 100644 --- a/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev-posix +++ b/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev-posix @@ -7,16 +7,13 @@ Object { "ROOT/lib/core-client/dist/esm/globals/globals.js", "NODE_MODULES/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined", "ROOT/storybook-init-framework-entry.js", - "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", "ROOT/app/html/dist/esm/client/preview/config-generated-config-entry.js", "ROOT/app/html/dist/esm/client/docs/config-generated-config-entry.js", - "ROOT/addons/a11y/dist/esm/a11yRunner.js-generated-config-entry.js", - "ROOT/addons/a11y/dist/esm/a11yHighlight.js-generated-config-entry.js", - "ROOT/addons/actions/dist/esm/preset/addDecorator.js-generated-config-entry.js", - "ROOT/addons/actions/dist/esm/preset/addArgs.js-generated-config-entry.js", - "ROOT/addons/backgrounds/dist/esm/preset/addDecorator.js-generated-config-entry.js", - "ROOT/addons/backgrounds/dist/esm/preset/addParameter.js-generated-config-entry.js", - "ROOT/addons/links/dist/esm/preset/addDecorator.js-generated-config-entry.js", + "ROOT/addons/docs/preview.js-generated-config-entry.js", + "ROOT/addons/a11y/preview.js-generated-config-entry.js", + "ROOT/addons/actions/preview.js-generated-config-entry.js", + "ROOT/addons/backgrounds/preview.js-generated-config-entry.js", + "ROOT/addons/links/preview.js-generated-config-entry.js", "ROOT/examples/html-kitchen-sink/.storybook/preview.js-generated-config-entry.js", "ROOT/generated-stories-entry.js", ], diff --git a/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod-posix b/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod-posix index b70aaf539387..d1c67aacb001 100644 --- a/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod-posix +++ b/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod-posix @@ -6,16 +6,13 @@ Object { "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/globals/globals.js", "ROOT/storybook-init-framework-entry.js", - "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", "ROOT/app/html/dist/esm/client/preview/config-generated-config-entry.js", "ROOT/app/html/dist/esm/client/docs/config-generated-config-entry.js", - "ROOT/addons/a11y/dist/esm/a11yRunner.js-generated-config-entry.js", - "ROOT/addons/a11y/dist/esm/a11yHighlight.js-generated-config-entry.js", - "ROOT/addons/actions/dist/esm/preset/addDecorator.js-generated-config-entry.js", - "ROOT/addons/actions/dist/esm/preset/addArgs.js-generated-config-entry.js", - "ROOT/addons/backgrounds/dist/esm/preset/addDecorator.js-generated-config-entry.js", - "ROOT/addons/backgrounds/dist/esm/preset/addParameter.js-generated-config-entry.js", - "ROOT/addons/links/dist/esm/preset/addDecorator.js-generated-config-entry.js", + "ROOT/addons/docs/preview.js-generated-config-entry.js", + "ROOT/addons/a11y/preview.js-generated-config-entry.js", + "ROOT/addons/actions/preview.js-generated-config-entry.js", + "ROOT/addons/backgrounds/preview.js-generated-config-entry.js", + "ROOT/addons/links/preview.js-generated-config-entry.js", "ROOT/examples/html-kitchen-sink/.storybook/preview.js-generated-config-entry.js", "ROOT/generated-stories-entry.js", ], diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev-posix b/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev-posix index 891dad8796c8..ec8992f03346 100644 --- a/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev-posix +++ b/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev-posix @@ -5,16 +5,16 @@ Object { "entry": Array [ "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/manager/index.js", - "ROOT/addons/links/dist/esm/register.js", - "ROOT/addons/docs/dist/esm/register", - "ROOT/addons/controls/dist/esm/register.js", - "ROOT/addons/actions/dist/esm/register.js", - "ROOT/addons/backgrounds/dist/esm/register.js", - "ROOT/addons/viewport/dist/esm/register.js", - "ROOT/addons/toolbars/dist/esm/register.js", - "ROOT/addons/measure/dist/esm/register.js", - "ROOT/addons/outline/dist/esm/register.js", - "ROOT/addons/interactions/dist/esm/register.js", + "ROOT/addons/links/manager.js", + "ROOT/addons/docs/manager.js", + "ROOT/addons/controls/manager.js", + "ROOT/addons/actions/manager.js", + "ROOT/addons/backgrounds/manager.js", + "ROOT/addons/viewport/manager.js", + "ROOT/addons/toolbars/manager.js", + "ROOT/addons/measure/manager.js", + "ROOT/addons/outline/manager.js", + "ROOT/addons/interactions/manager.js", ], "keys": Array [ "name", diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod-posix b/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod-posix index 99eb742814ca..a686af760a22 100644 --- a/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod-posix +++ b/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod-posix @@ -5,16 +5,16 @@ Object { "entry": Array [ "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/manager/index.js", - "ROOT/addons/links/dist/esm/register.js", - "ROOT/addons/docs/dist/esm/register", - "ROOT/addons/controls/dist/esm/register.js", - "ROOT/addons/actions/dist/esm/register.js", - "ROOT/addons/backgrounds/dist/esm/register.js", - "ROOT/addons/viewport/dist/esm/register.js", - "ROOT/addons/toolbars/dist/esm/register.js", - "ROOT/addons/measure/dist/esm/register.js", - "ROOT/addons/outline/dist/esm/register.js", - "ROOT/addons/interactions/dist/esm/register.js", + "ROOT/addons/links/manager.js", + "ROOT/addons/docs/manager.js", + "ROOT/addons/controls/manager.js", + "ROOT/addons/actions/manager.js", + "ROOT/addons/backgrounds/manager.js", + "ROOT/addons/viewport/manager.js", + "ROOT/addons/toolbars/manager.js", + "ROOT/addons/measure/manager.js", + "ROOT/addons/outline/manager.js", + "ROOT/addons/interactions/manager.js", ], "keys": Array [ "name", diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix b/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix index fe42332cf78f..64e4d88c7a94 100644 --- a/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix +++ b/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix @@ -7,17 +7,15 @@ Object { "ROOT/lib/core-client/dist/esm/globals/globals.js", "NODE_MODULES/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined", "ROOT/storybook-init-framework-entry.js", - "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", "ROOT/app/vue3/dist/esm/client/preview/config-generated-config-entry.js", "ROOT/app/vue3/dist/esm/client/docs/config-generated-config-entry.js", - "ROOT/addons/links/dist/esm/preset/addDecorator.js-generated-config-entry.js", - "ROOT/addons/actions/dist/esm/preset/addDecorator.js-generated-config-entry.js", - "ROOT/addons/actions/dist/esm/preset/addArgs.js-generated-config-entry.js", - "ROOT/addons/backgrounds/dist/esm/preset/addDecorator.js-generated-config-entry.js", - "ROOT/addons/backgrounds/dist/esm/preset/addParameter.js-generated-config-entry.js", - "ROOT/addons/measure/dist/esm/preset/addDecorator.js-generated-config-entry.js", - "ROOT/addons/outline/dist/esm/preset/addDecorator.js-generated-config-entry.js", - "ROOT/addons/interactions/dist/esm/preset/argsEnhancers.js-generated-config-entry.js", + "ROOT/addons/links/preview.js-generated-config-entry.js", + "ROOT/addons/docs/preview.js-generated-config-entry.js", + "ROOT/addons/actions/preview.js-generated-config-entry.js", + "ROOT/addons/backgrounds/preview.js-generated-config-entry.js", + "ROOT/addons/measure/preview.js-generated-config-entry.js", + "ROOT/addons/outline/preview.js-generated-config-entry.js", + "ROOT/addons/interactions/preview.js-generated-config-entry.js", "ROOT/examples/vue-3-cli/.storybook/preview.ts-generated-config-entry.js", "ROOT/generated-stories-entry.js", ], diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix b/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix index 4792caed2d1d..9f1c9872be90 100644 --- a/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix +++ b/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix @@ -6,17 +6,15 @@ Object { "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/globals/globals.js", "ROOT/storybook-init-framework-entry.js", - "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", "ROOT/app/vue3/dist/esm/client/preview/config-generated-config-entry.js", "ROOT/app/vue3/dist/esm/client/docs/config-generated-config-entry.js", - "ROOT/addons/links/dist/esm/preset/addDecorator.js-generated-config-entry.js", - "ROOT/addons/actions/dist/esm/preset/addDecorator.js-generated-config-entry.js", - "ROOT/addons/actions/dist/esm/preset/addArgs.js-generated-config-entry.js", - "ROOT/addons/backgrounds/dist/esm/preset/addDecorator.js-generated-config-entry.js", - "ROOT/addons/backgrounds/dist/esm/preset/addParameter.js-generated-config-entry.js", - "ROOT/addons/measure/dist/esm/preset/addDecorator.js-generated-config-entry.js", - "ROOT/addons/outline/dist/esm/preset/addDecorator.js-generated-config-entry.js", - "ROOT/addons/interactions/dist/esm/preset/argsEnhancers.js-generated-config-entry.js", + "ROOT/addons/links/preview.js-generated-config-entry.js", + "ROOT/addons/docs/preview.js-generated-config-entry.js", + "ROOT/addons/actions/preview.js-generated-config-entry.js", + "ROOT/addons/backgrounds/preview.js-generated-config-entry.js", + "ROOT/addons/measure/preview.js-generated-config-entry.js", + "ROOT/addons/outline/preview.js-generated-config-entry.js", + "ROOT/addons/interactions/preview.js-generated-config-entry.js", "ROOT/examples/vue-3-cli/.storybook/preview.ts-generated-config-entry.js", "ROOT/generated-stories-entry.js", ], diff --git a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-dev-posix b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-dev-posix index 1c0d32d308b3..0676e83166fe 100644 --- a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-dev-posix +++ b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-dev-posix @@ -5,16 +5,16 @@ Object { "entry": Array [ "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/manager/index.js", - "ROOT/addons/docs/dist/esm/register", - "ROOT/addons/controls/dist/esm/register.js", - "ROOT/addons/a11y/dist/esm/register.js", - "ROOT/addons/actions/dist/esm/register.js", - "ROOT/addons/backgrounds/dist/esm/register.js", - "ROOT/addons/interactions/dist/esm/register.js", - "ROOT/addons/links/dist/esm/register.js", - "ROOT/addons/storysource/dist/esm/register.js", - "ROOT/addons/viewport/dist/esm/register.js", - "ROOT/addons/toolbars/dist/esm/register.js", + "ROOT/addons/docs/manager.js", + "ROOT/addons/controls/manager.js", + "ROOT/addons/a11y/manager.js", + "ROOT/addons/actions/manager.js", + "ROOT/addons/backgrounds/manager.js", + "ROOT/addons/interactions/manager.js", + "ROOT/addons/links/manager.js", + "ROOT/addons/storysource/dist/esm/manager.js", + "ROOT/addons/viewport/manager.js", + "ROOT/addons/toolbars/manager.js", ], "keys": Array [ "name", diff --git a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-prod-posix b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-prod-posix index c090d10a5866..982723cbc1ac 100644 --- a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-prod-posix +++ b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-prod-posix @@ -5,16 +5,16 @@ Object { "entry": Array [ "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/manager/index.js", - "ROOT/addons/docs/dist/esm/register", - "ROOT/addons/controls/dist/esm/register.js", - "ROOT/addons/a11y/dist/esm/register.js", - "ROOT/addons/actions/dist/esm/register.js", - "ROOT/addons/backgrounds/dist/esm/register.js", - "ROOT/addons/interactions/dist/esm/register.js", - "ROOT/addons/links/dist/esm/register.js", - "ROOT/addons/storysource/dist/esm/register.js", - "ROOT/addons/viewport/dist/esm/register.js", - "ROOT/addons/toolbars/dist/esm/register.js", + "ROOT/addons/docs/manager.js", + "ROOT/addons/controls/manager.js", + "ROOT/addons/a11y/manager.js", + "ROOT/addons/actions/manager.js", + "ROOT/addons/backgrounds/manager.js", + "ROOT/addons/interactions/manager.js", + "ROOT/addons/links/manager.js", + "ROOT/addons/storysource/dist/esm/manager.js", + "ROOT/addons/viewport/manager.js", + "ROOT/addons/toolbars/manager.js", ], "keys": Array [ "name", diff --git a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev-posix b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev-posix index c816a27405c8..12efbe2571e2 100644 --- a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev-posix +++ b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev-posix @@ -7,17 +7,14 @@ Object { "ROOT/lib/core-client/dist/esm/globals/globals.js", "NODE_MODULES/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined", "ROOT/storybook-init-framework-entry.js", - "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", "ROOT/app/web-components/dist/esm/client/preview/config-generated-config-entry.js", "ROOT/app/web-components/dist/esm/client/docs/config-generated-config-entry.js", - "ROOT/addons/a11y/dist/esm/a11yRunner.js-generated-config-entry.js", - "ROOT/addons/a11y/dist/esm/a11yHighlight.js-generated-config-entry.js", - "ROOT/addons/actions/dist/esm/preset/addDecorator.js-generated-config-entry.js", - "ROOT/addons/actions/dist/esm/preset/addArgs.js-generated-config-entry.js", - "ROOT/addons/backgrounds/dist/esm/preset/addDecorator.js-generated-config-entry.js", - "ROOT/addons/backgrounds/dist/esm/preset/addParameter.js-generated-config-entry.js", - "ROOT/addons/interactions/dist/esm/preset/argsEnhancers.js-generated-config-entry.js", - "ROOT/addons/links/dist/esm/preset/addDecorator.js-generated-config-entry.js", + "ROOT/addons/docs/preview.js-generated-config-entry.js", + "ROOT/addons/a11y/preview.js-generated-config-entry.js", + "ROOT/addons/actions/preview.js-generated-config-entry.js", + "ROOT/addons/backgrounds/preview.js-generated-config-entry.js", + "ROOT/addons/interactions/preview.js-generated-config-entry.js", + "ROOT/addons/links/preview.js-generated-config-entry.js", "ROOT/examples/web-components-kitchen-sink/.storybook/preview.js-generated-config-entry.js", "ROOT/generated-stories-entry.js", ], diff --git a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod-posix b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod-posix index c7b0fb4ff3e9..0a9453609940 100644 --- a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod-posix +++ b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod-posix @@ -6,17 +6,14 @@ Object { "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/globals/globals.js", "ROOT/storybook-init-framework-entry.js", - "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", "ROOT/app/web-components/dist/esm/client/preview/config-generated-config-entry.js", "ROOT/app/web-components/dist/esm/client/docs/config-generated-config-entry.js", - "ROOT/addons/a11y/dist/esm/a11yRunner.js-generated-config-entry.js", - "ROOT/addons/a11y/dist/esm/a11yHighlight.js-generated-config-entry.js", - "ROOT/addons/actions/dist/esm/preset/addDecorator.js-generated-config-entry.js", - "ROOT/addons/actions/dist/esm/preset/addArgs.js-generated-config-entry.js", - "ROOT/addons/backgrounds/dist/esm/preset/addDecorator.js-generated-config-entry.js", - "ROOT/addons/backgrounds/dist/esm/preset/addParameter.js-generated-config-entry.js", - "ROOT/addons/interactions/dist/esm/preset/argsEnhancers.js-generated-config-entry.js", - "ROOT/addons/links/dist/esm/preset/addDecorator.js-generated-config-entry.js", + "ROOT/addons/docs/preview.js-generated-config-entry.js", + "ROOT/addons/a11y/preview.js-generated-config-entry.js", + "ROOT/addons/actions/preview.js-generated-config-entry.js", + "ROOT/addons/backgrounds/preview.js-generated-config-entry.js", + "ROOT/addons/interactions/preview.js-generated-config-entry.js", + "ROOT/addons/links/preview.js-generated-config-entry.js", "ROOT/examples/web-components-kitchen-sink/.storybook/preview.js-generated-config-entry.js", "ROOT/generated-stories-entry.js", ], diff --git a/lib/core-server/src/presets/common-preset.ts b/lib/core-server/src/presets/common-preset.ts index def7ebe4841b..1f22ff93b109 100644 --- a/lib/core-server/src/presets/common-preset.ts +++ b/lib/core-server/src/presets/common-preset.ts @@ -61,6 +61,10 @@ export const typescript = () => ({ }, }); +export const config = async (base: any, options: Options) => { + return [...(await options.presets.apply('previewAnnotations', [], options)), ...base]; +}; + export const features = async (existing: Record) => ({ ...existing, postcss: true, diff --git a/yarn.lock b/yarn.lock index e58f5627289e..427ed872dd02 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6214,9 +6214,10 @@ __metadata: 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 "@types/lodash": ^4.14.167 "@types/webpack-env": ^1.16.0 @@ -6434,10 +6435,11 @@ __metadata: 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/jest": ^0.0.5 "@storybook/testing-library": ^0.0.7 @@ -6465,6 +6467,7 @@ __metadata: 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 @@ -6724,6 +6727,7 @@ __metadata: 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/theming": 6.5.0-alpha.52 core-js: ^3.8.2