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

ndelangen · 2022-03-18T12:38:14Z

https://www.notion.so/chromatic-ui/Simplified-SB-addons-API-fcabe63977cb47d3959fdbab74b8fc4d

Rename register.js to manager.js
Add a new file preview.js which is added to the preview annotations by default
Rename config to previewAnnotations for consistency
Convert all of our addons to the new structure
Deprecate the old way in 6.5

… separately replacing a single preset file.

…ybookjs/storybook into tech/refactor-simplified-addons-api

nx-cloud · 2022-03-18T12:38:15Z

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 666f25d. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

✅ Successfully ran 1 target

nx run-many --target=prepare --all --parallel --max-parallel=15 -- --optimized

Sent with 💌 from NxCloud.

…fail

# Conflicts: # addons/actions/package.json # addons/controls/package.json # addons/interactions/package.json # addons/jest/package.json # addons/toolbars/package.json # examples/web-components-kitchen-sink/yarn.lock # yarn.lock

winkerVSbecks · 2022-03-26T18:22:41Z

@ndelangen @shilman this is a much simpler API. Nice work!

I have a couple of questions:

"Deprecate the old way in 6.5" will that break all community addons? Or are we just showing warnings for now?
You've migrated all the core addons. Then why add this addons/outline/register.js file:

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

This is a pretty major change which means that we have to update: docs, addon tutorial and addon-kit. Could start with the docs update in this PR? Then we can use that as the basis for all other updates.

shilman · 2022-03-28T07:33:44Z

@winkerVSbecks thanks for the look!

"Deprecate the old way in 6.5" will that break all community addons? Or are we just showing warnings for now?

The warnings are actually implemented per-addon, so this only shows warnings for existing addons. AFAIK this is not a breaking change.

You've migrated all the core addons. Then why add this addons/outline/register.js file:

We didn't add it. We modified the existing register.js. addon-outline is configured via a preset, so register.js is actually kind of an internal implementation detail. However, since old-style addons used register.js explicitly, we were extra careful not to break that addon entry point even though technically probably could've done so without breaking semver.

This is a pretty major change which means that we have to update: docs, addon tutorial and addon-kit. Could start with the docs update in this PR? Then we can use that as the basis for all other updates.

Indeed, I'll update the docs as part of this PR.

yannbf · 2022-03-29T08:29:29Z

lib/core-common/src/presets.ts

+  const r = name.startsWith('/') ? safeResolve : safeResolveFrom.bind(null, configDir);
+  const resolved = r(name);
+
+  if (name.match(/\/(manager|register(-panel)?)(\.(js|ts|tsx|jsx))?$/)) {


do we wanna constrain the file extensions? e.g. cjs, mjs

yannbf · 2022-03-29T08:41:24Z

Looks good! But I believe there's a regression with addon-docs. Now every story is loaded in an iframe when opening the docs tab (at least locally in official-storybook, in comparison to the deployed next).

Just out of curiosity, this is how a possible "annotations" file would look like when generated with the new format:

[
    '../../app/react/dist/esm/client/docs/config',
    '../../app/react/dist/esm/client/preview/config',
    '../../addons/docs/preview.js',
    '../../addons/actions/preview.js',
    '../../addons/backgrounds/preview.js',
    '../../addons/measure/preview.js',
    '../../addons/outline/preview.js',
    '../../addons/interactions/preview.js',
    '../../addons/links/preview.js',
    '../../addons/a11y/preview.js',
    'preview.js'
  ]

The downside is now that the preview.js files are just targeting esm, so they will break in current Jest versions. Something to discuss later on!

yannbf · 2022-03-29T09:04:13Z

I found out why the regression happened.

This is the annotations file before this change:

[
  '../../addons/docs/dist/esm/frameworks/common/config',
  '../../addons/actions/dist/esm/preset/addDecorator.js',
  '../../addons/actions/dist/esm/preset/addArgs.js',
  '../../addons/backgrounds/dist/esm/preset/addDecorator.js',
  '../../addons/backgrounds/dist/esm/preset/addParameter.js',
  '../../addons/measure/dist/esm/preset/addDecorator.js',
  '../../addons/outline/dist/esm/preset/addDecorator.js',
  '../../addons/interactions/dist/esm/preset/argsEnhancers.js',
  '../../addons/links/dist/esm/preset/addDecorator.js',
  '../../addons/a11y/dist/esm/a11yRunner.js',
  '../../addons/a11y/dist/esm/a11yHighlight.js',
  './preview.js',
]

This is the annotations file after this change:

[
  '../../app/react/dist/esm/client/docs/config',
  '../../app/react/dist/esm/client/preview/config',
  '../../addons/docs/preview.js',
  '../../addons/actions/preview.js',
  '../../addons/backgrounds/preview.js',
  '../../addons/measure/preview.js',
  '../../addons/outline/preview.js',
  '../../addons/interactions/preview.js',
  '../../addons/links/preview.js',
  '../../addons/a11y/preview.js',
  'preview.js'
]

Notice that before docs was always loading first, so that the framework docs presets could override it correctly! But now the framework presets come first, and get overriden by docs presets

ndelangen · 2022-03-29T14:28:00Z

@yannbf looks like switching the order around does cause issues down the stream :'(

# Conflicts: # MIGRATION.md # addons/actions/package.json # addons/controls/package.json # addons/interactions/package.json # addons/jest/package.json # addons/toolbars/package.json # lib/cli/src/versions.ts # yarn.lock

shilman · 2022-04-01T02:47:55Z

Going to merge this @ndelangen and we can work on the unrelated CI failures in parallel

ndelangen and others added 16 commits March 18, 2022 10:27

rename /register to /manager

7aff6df

change the presets resolutions so we can have preview & manager files…

f5e8483

… separately replacing a single preset file.

change background to use new structure

7300670

add deprecation message to register file in addon-docs

ec87967

change a11y to new structure

2288a26

change addon-actions to new structure

fd79ffb

change addon-controls to new structure

ec120ad

change addon-viewport to new structure

abf1b0b

remove unused file

5c1ffe7

change addon-jest to new structure

f1220de

change addon-toolbars to new structure

0953a47

change addon-outline to new structure

3de6aa7

change addon-links to new structure

2cbae9a

add migration info

61bcd00

change addon-measure to new preview.js structure

09ef0eb

Merge branch 'tech/refactor-simplified-addons-api' of github.com:stor…

5b5aa15

…ybookjs/storybook into tech/refactor-simplified-addons-api

ndelangen self-assigned this Mar 18, 2022

ndelangen requested a review from shilman March 18, 2022 12:38

ndelangen added the maintenance User-facing maintenance tasks label Mar 18, 2022

ndelangen added 6 commits March 18, 2022 13:42

update test and lockfile

784f773

changes trying to fix the presets loading behavior

0b15186

fix trying to resolve something in a safe way when it should instead …

fe750f3

…fail

update snapshots and change behavior of presets resolutions code

a2ec44d

fix snapshot

7e845e1

fix example in comment

48efd4e

ndelangen assigned shilman Mar 18, 2022

ndelangen added presets core labels Mar 18, 2022

Merge branch 'next' into tech/refactor-simplified-addons-api

cb0ee65

shilman and others added 5 commits March 23, 2022 13:44

Fix lockfile

04b4954

change some references back to register, and update a few docs

b4c2468

update snapshots

0b9412d

bump

0a42711

ndelangen requested a review from shilman March 25, 2022 13:57

add storybook/csf as alias

c8e7a0c

merge next

513da1f

yannbf mentioned this pull request Mar 28, 2022

CLI: Add command to generate annotations file #17783

Closed

3 tasks

yannbf reviewed Mar 29, 2022

View reviewed changes

Merge branch 'next' into tech/refactor-simplified-addons-api

ff48f94

fix thanks to shilman 😘

8f8f903

ndelangen force-pushed the tech/refactor-simplified-addons-api branch from cf2b7b6 to 8f8f903 Compare March 29, 2022 15:22

ndelangen and others added 5 commits March 30, 2022 13:45

Merge branch 'next' into tech/refactor-simplified-addons-api

b6e2c66

Merge branch 'next' into tech/refactor-simplified-addons-api

3ee4170

# Conflicts: # MIGRATION.md # addons/actions/package.json # addons/controls/package.json # addons/interactions/package.json # addons/jest/package.json # addons/toolbars/package.json # lib/cli/src/versions.ts # yarn.lock

Merge branch 'next' into tech/refactor-simplified-addons-api

19bb2e3

Merge branch 'next' into tech/refactor-simplified-addons-api

2832361

Merge branch 'next' into tech/refactor-simplified-addons-api

666f25d

shilman merged commit 4b47793 into next Apr 1, 2022

shilman deleted the tech/refactor-simplified-addons-api branch April 1, 2022 03:02

This was referenced Apr 18, 2022

Addon-highlight: Convert to simplified addon style #17991

Merged

Core: Make renderers presets #18004

Merged

kherock mentioned this pull request Aug 10, 2022

Uncaught (in promise) Error: No docs.container set #17527

Closed

tmeasday mentioned this pull request Sep 12, 2022

Presets: Replace config with previewAnnotations, remove previewEntries #19152

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

ndelangen commented Mar 18, 2022 •

edited by shilman

Loading

nx-cloud bot commented Mar 18, 2022 •

edited

Loading

winkerVSbecks commented Mar 26, 2022

shilman commented Mar 28, 2022

yannbf Mar 29, 2022

yannbf commented Mar 29, 2022 •

edited

Loading

yannbf commented Mar 29, 2022 •

edited

Loading

ndelangen commented Mar 29, 2022

shilman commented Apr 1, 2022

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

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

Conversation

ndelangen commented Mar 18, 2022 • edited by shilman Loading

nx-cloud bot commented Mar 18, 2022 • edited Loading

☁️ Nx Cloud Report

winkerVSbecks commented Mar 26, 2022

shilman commented Mar 28, 2022

yannbf Mar 29, 2022

Choose a reason for hiding this comment

yannbf commented Mar 29, 2022 • edited Loading

yannbf commented Mar 29, 2022 • edited Loading

ndelangen commented Mar 29, 2022

shilman commented Apr 1, 2022

ndelangen commented Mar 18, 2022 •

edited by shilman

Loading

nx-cloud bot commented Mar 18, 2022 •

edited

Loading

yannbf commented Mar 29, 2022 •

edited

Loading

yannbf commented Mar 29, 2022 •

edited

Loading