Presets: Replace config with previewAnnotations, remove previewEntries

[tmeasday]

Issue: We realised that the handling of the previewEntries field in the vite build wasn't quite right (it was treating them identically to config entries, which have special behaviour on export).

Looking in the code base, we no longer use previewEntries (did we ever?), so decided to essentially pseudo-deprecate them by not supporting them in the Vite builder.

How to test

Check a vite sandbox.

[IanVS]

Looks good to me, thanks!

[IanVS]

We should add https://www.npmjs.com/package/@ianvs/prettier-plugin-sort-imports so we don't need to worry about manually organizing imports. :-D

[shilman]

@tmeasday @IanVS

What's the difference between previewEntries and config? Is it that config exports are treated as annotations (e.g. parameters etc.)?

I think @ndelangen and I may have introduced previewEntries as an intended replacement for config. Since config doesn't actually mean anything, and previewEntries does. Since we're in a breaking release, I'd propose that we take the opportunity to sort this out properly, even if it means introducing a new preset (previewAnnotations?)

WDYT?

[tmeasday]

What's the difference between previewEntries and config? Is it that config exports are treated as annotations (e.g. parameters etc.)?

Yes that's the difference.

I think @ndelangen and I may have introduced previewEntries as an intended replacement for config.

I don't believe so, but @ndelangen could say for sure.

This is where they are pulled in by the webpack builder (this is definitely a set of "entries" in the preview, not "configs"/annotations):

storybook/code/lib/builder-webpack5/src/presets/preview-preset.ts

Line 8 in 1335697

result = result.concat(await options.presets.apply('previewEntries', [], options));

Actually I had it wrong, previewEntries is used in on place by our code:

storybook/code/lib/core-server/src/presets/common-preset.ts

Lines 45 to 49 in 1335697

	export const previewEntries = (entries: any[] = []) => {
	entries.push(require.resolve('@storybook/core-client/dist/esm/globals/globals'));
	return entries;
	};

I would suggest we replace it with a config (or, as you say a previewAnnotations) and not bother maintaining two subtly difference concepts (just make sure we don't export if we don't want to provide annotations). WDYT @ndelangen ?

[tmeasday]

• Replace above previewEntries with a config
• Rename config to previewAnnotations
• Deprecate config + warn in common-preset.ts
• Add migration notes

[tmeasday]

Note previewAnnotations was added in #17755 @shilman, however the builder code all still uses config to access it. I reversed that and added a warning if config is set.

[tmeasday]

Add to migration notes

[shilman]

Looking good!