Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow setting global args in SB 6.5+ #399

Merged
merged 3 commits into from Jun 24, 2022
Merged

Allow setting global args in SB 6.5+ #399

merged 3 commits into from Jun 24, 2022

Conversation

IanVS
Copy link
Member

@IanVS IanVS commented May 31, 2022

Fixes #395.

This is a little bit tricky to do in a way that supports storybook 6.4 and 6.5. I've used a dynamic import() and a top-level await, in order to wrap the import of the new methods in a try/catch. This has decent browser support, but is not universal. Curious if anyone else has another idea.

I've added example global args in the react and react-ts examples, to show both story store V6 and V7 support. You can simulate storybook 6.4 by changing the destructured imports to addArgsZ and addArgTypesZ, building, and starting an example. You shouldn't see the control, and there shouldn't be any console errors.

@IanVS
Copy link
Member Author

IanVS commented May 31, 2022

We got failures in some of the example builds (strangely, not all of them).

ERROR: Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2019", "firefox78", "safari13.1")

Should we update our browser support? Or, maybe I need to wrap the whole thing in an async IIFE?

@joshwooding
Copy link
Collaborator

Hmm 86% supported globally seems fine to me. I don't have a strong preference either way

@joshwooding
Copy link
Collaborator

Would something like this work:

 import * as clientApi from "@storybook/client-api";
const {
  addDecorator,
  addParameters,
  addLoader,
  addArgTypesEnhancer,
  addArgsEnhancer,
  setGlobalRender,
} = clientApi;

  case "args": {
    if (typeof clientApi.addArgs !== "undefined") {
      return clientApi.addArgs(value);
    } else {
      return logger.warn(
        "Could not add global args. Please open an issue in storybookjs/builder-vite."
      );
    }
  }
  case "argTypes": {
    if (typeof clientApi.addArgTypes !== "undefined") {
      return clientApi.addArgTypes(value);
    } else {
      return logger.warn(
        "Could not add global argTypes. Please open an issue in storybookjs/builder-vite."
      );
    }
  }

@IanVS
Copy link
Member Author

IanVS commented Jun 22, 2022

Brilliant, that works great. I tested with storybook 6.4 and 6.5, and it behaves correctly, although react is yelling about trying to set globalArg as a prop...

Co-authored-by: Josh Wooding <12938082+joshwooding@users.noreply.github.com>
@IanVS IanVS requested a review from joshwooding June 22, 2022 14:09
@IanVS
Copy link
Member Author

IanVS commented Jun 23, 2022

@joshwooding this is ready for another review whenever you've got some time.

Copy link
Collaborator

@joshwooding joshwooding left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@joshwooding joshwooding merged commit 26dd5a1 into main Jun 24, 2022
@joshwooding joshwooding deleted the global-args branch June 24, 2022 15:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug] Global Args Support
2 participants