CSF3: Default render functions for non-React frameworks

CSF3.0 introduces default render functions, making it possible to remove lots of boilerplate in your stories. The initial implementation is for React, and we still need to add this for other popular frameworks.

• Vue
• Vue3
• Angular
• Web-components
• Svelte

Here’s a React example:

// CSF 2.0
export const Primary = (args) => <Button {...args} />
Primary.args = { primary: true };

// CSF 3.0
export const Default = { args: { primary: true } }

And here’s the React implementation:

https://github.com/storybookjs/storybook/blob/next/app/react/src/client/preview/index.tsx#L22-L28

[shilman]

Ermahgerd!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.5.0-alpha.23 containing PR #17279 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there’s still more to do.

[gossi]

Default render function for ember is not possible. But I already asked for a render() function in the default export of a stories file, which @shilman mentioned is possible? That’s what ember would go for here, needs to be documented then.

My suggestions:

• Create a ticket for that doc task
• Link it to ember
• Check off ember from the list =)