CSF3: Default render functions for non-React frameworks

[shilman]

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

[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 =)

[shilman]

Son of a gun!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.4.0-alpha.25 containing PR #15742 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.

[benbender]

@shilman I did a bit of experimentation on adding csf3-support to @storybook/svelte based on the work done on @storybook/angular-cli. I'm not very familiar with the internals of storybook and therefor I would like to ask some questions:

• why do we have two packages for svelte (@storybook/svelte & @storybook/addon-svelte-csf) and what are the plans on those?
• I could get the general csf3-support in a working state quite easily but struggled on the render-part for individual stories. It seemed like I would need to use addon-svelte-csf on that. As the relation between those and reasoning for this division is quite unclear to me, I wanted to clearify before investing additional work.

[shilman]

@benbender sorry for the slow reply, your message got lost in the shuffle!

@storybook/svelte is the main svelte framework for storybook. @storybook/addon-svelte-csf is the experimental svelte syntax for CSF. it was implemented in a separate package so that it could be independently versioned from the rest of storybook. And also so that it would be easy to "opt in/out" as people wanted.

Regarding future plans, we don't have anybody actively maintaining Svelte at the moment. @j3rem1e built most of the Svelte improvements, but I haven't heard much from him since then. I recently implemented CSF3 support for MDX #16159 and I would imagine the Svelte CSF changes might be similar.

If you'd like guidance on any of this, please find me on our discord in the #contributing channel https://discord.gg/storybook

[shilman]

Zoinks!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.5.0-alpha.6 containing PR #17068 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.

[yannbf]

I'm not sure if web-components default render would be possible without the feature from this PR:
lit/lit#1960

[shilman]

Shiver me timbers!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.5.0-alpha.22 containing PR #17276 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.

[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.

[shilman]

@yannbf This is also an option for lit open-wc/open-wc#2398

[yannbf]

@yannbf This is also an option for lit open-wc/open-wc#2398

I wonder if we'll need to do something regarding the names of the args, given that we'd be spreading a mix of events, props and booleans and according to the docs, in that case, they'll have to be branded:

Attributes require no sigil, boolean attributes require a ?, events a @, and properties the . sigil.

Example:

import { spread } from '@open-wc/lit-helpers';
const elementTemplate = (
  obj = {
    'my-attribute': 'foo',
    '?my-boolean-attribute': true,
    '@my-event': () => console.log('my-event fired'),
    '.myProperty': { foo: 'bar' },
  },
) => html` <custom-element ${spread(obj)}></custom-element> `;

[shilman]

Web-components fixed in #19164 and released in https://github.com/storybookjs/storybook/releases/tag/v7.0.0-alpha.37 🎉