Addon-themes: Fix globals not being set when using absolute path

[JReinhold]

Closes #24596

What I did

Changed the preview.ts of addon-themes to export const globals... instead of export default { globals: .... This is inline with the rest of our addons, but it shouldn't be necessary.

If addons are references by path instead of by name, the default export from dist/preview.mjs is stripped for some reason. This happens often in monorepos where we recommend using getAbsolutePath('addon-name') in main.ts.

See this reproduction of the underlying issue:

https://stackblitz.com/edit/github-weunpu-myu7a6?file=.storybook%2Fmain.ts

Here three addons are defined locally:

1. local-addon-works exports const globals which works
2. local-addon-works-too exports default but directly from ./preview.js, this also works
3. local-addon-broken exports default but via the usual preview.js -> dist/preview.mjs and this doesn't work, which is crucial because this is our recommended approach.

You can visit the "Story Context Debugger" stories and see the globals being set. You can also open the console.log and see that importing from ./local-addon-broken/preview.js doesn't include the default export while importing directly from ./local-addon-broken/dist/preview.mjs does include the default export.

🤷

This breaks in both Webpack and Vite, BUT only for the local addons. addon-themes - even with the "broken" default export - works fine in Vite, it only breaks in Webpack.

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

1. Create a webpack based sandbox.
2. Install @storybook/addon-themes@latest.
3. Add this to your main.ts:

import { dirname, join } from 'path';

const getAbsolutePath = (value: T) =>
  dirname(require.resolve(join(value, 'package.json')));

const config = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    getAbsolutePath('@storybook/addon-essentials'),
    getAbsolutePath('@storybook/addon-links'),
    getAbsolutePath('@storybook/addon-themes'),
  ],
  framework: {
    name: '@storybook/react-webpack5',
    options: {},
  },
};
export default config;

4. Add this to your preview.js

import { withThemeByClassName } from "@storybook/addon-themes";

const preview = {
  decorators: [
    withThemeByClassName({
      themes: {
        Light: 'light',
        Dark: 'dark'
      },
      defaultTheme: 'Light',
    }),
  ],
};

export default preview;

5. Open Storybook and change the theme in the toolbar. See the warning in the console about missing globals, and see that the theme hasn't changed.
6. Install the canary version of this addon (see below)
7. Open Storybook again, change the theme and see that it now works.

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This pull request has been released as version 0.0.0-pr-24596-sha-031534ff. Install it by pinning all your Storybook dependencies to that version.

More information

Published version	0.0.0-pr-24596-sha-031534ff
Triggered by	@JReinhold
Repository	storybookjs/storybook
Branch	24351-bug-error-when-switching-themes-addon-themes
Commit	031534ff
Datetime	Fri Oct 27 09:10:31 UTC 2023 (1698397831)
Workflow run	6665225146

To request a new release of this pull request, mention the @storybookjs/core team.

core team members can create a new canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=24596

[ShaunEvening]

This is beyond oddbut so glad that you were able to crack it! Thanks Jeppe <3

[ShaunEvening]

Are you sure that you want to also be on the hook for this addon? ;)

[JReinhold]

tag team is best team!