List of parameters in stories.json ?

[unreal ore]

👋🏻 Hello folks, I am wondering how to get parameters of our stories exposed in the stories.json.

We use the features: { buildStoriesJson: true } in the main.js to get the list of stories as JSON, but the parameters of our stories are missing in the stories.json

Am I missing something, or is it by design ?

I have some stories with this:

// myButton.stories.tsx
import * as React from "react";

export default {
  title: "yeah",
};

export const Button = () => {
  return (<button>🥳</button>);
};
Button.parameters = {
  foo: "bar"
};

But the generated stories.json does not include the "custom" parameters:

// stories.json
{
    "v":3,
    "stories":{
        "yeah--button": {
            "id":"yeah--button",
            "title":"yeah",
            "name":"Button",
            "importPath":"./src/myButton.stories.tsx",
            "kind":"yeah",
            "story":"Button",
            "parameters": {
                "__id":"yeah--button",
                "docsOnly":false,
                "fileName":"./src/myButton.stories.tsx"
                }
            }
        }
    }
}

[unreal ore]

Looking at https://github.com/storybookjs/storybook/blob/76146194c029e0e1f7eeea1f1bafee6cc3974575/code/lib/core-server/src/utils/stories-json.ts#LL71C1-L71C1 tells me that it is not possible. The parameters object is overwritten with the __id, docsOnly and fileName properties 😕

[silk wolf]

Thanks for finding and sharing your own answer! ❤️

@wise mesa — IIRC, you had a hand in the code that generates this file. Is this a purposeful limitation?

[wise mesa]

Hey there! Stories.json is stripped down by design. @quick rover can explain better the reasons, but it's supposed to be lightweight. Can you explain what you are trying to achieve @unreal ore?

[unreal ore]

Thank you @silk wolf

@wise mesa In short we wish to expose the parameters of the stories to the test runner.

For a little more context, this is a continuation of https://discord.com/channels/486522875931656193/1101470326224850954

[wise mesa]

I see! Have you checked this?

https://github.com/storybookjs/test-runner#getstorycontext

Also check this:

https://github.com/storybookjs/test-runner/blob/1cc46df7d10b32e74e1e4dd7c428b1f6e5f9bf5b/.storybook/test-runner.ts#L17

[quick rover]

@unreal ore stories.json is created by statically analyzing your story files (rather than evaluating them) so it’s fast to generate. The problem is that parameters are not statically analyzable in general. We have a few in there for some kind of backwards compatibility with an earlier version, but should probably get rid of those entirely to avoid confusion and streamline the file. @wise mesa ‘s suggestion above is the recommended way to get parameters at runtime

[unreal ore]

Thank you all.

We are using a custom made test runner* with additional parallelization, network routing, and some CSS normalization.

I wanted to get the list of parameters before opening the stories in the browser, but that seems tricky, and not worth the complexity for a relatively little return (in total test duration), as this use case is needed of 1.14% of our stories 🙃

Thank you again for the pointers and explanations.

[quick rover]

We introduced a new concept of "tags" in 7.0 which are designed to be statically analyzable. So if you add a tag to your default export or story, you can access that in the /index.json route, which is the evolution of stories.json. That would allow you to filter out stories in node, before opening the browser.

export default {
   ... 
   tags: ['my-tag-here'],
}

We'll likely be beefing up this feature in 7.1 a bit inside Storybook's test runner and maybe a few other features for "docs-only stories" etc