refactor!: Story children becomes static & add template prop

[xeho91]

Note

Concluded by feedback discussion thread on Discord

---

TODO

• Update README
• Update ERRORS
• Update migration guide
• Update examples/
• Update tests & add new ones
• Fix type issues 🫠
• refactor transform analysis for the story content
• Update pre-transform for legacy API runtime migration scripts

📦 Published PR as canary version: 5.0.0--canary.228.a0b0a96.0

✨ Test out this PR locally via:

npm install @storybook/[email protected]
# or 
yarn add @storybook/[email protected]

[xeho91]

@JReinhold I need a second eye. I'm not sure if I have overlooked anything.

The only thing I didn't try to achieve in this PR is allowing passing a string to children arg - I believe this one needs a separate PR.

[dominikg]

we have 3 different props relevant here

template, children and component (via renderer.storyContext)

My understanding would be

1. if template exists, render it and pass children along
2. if component exists, render it and pass children along
3. if children exists, render it

now this favors the component over a static story, the case where you have both component and children set is a bit of a conflict of interest, you have to take a guess if the user wants to render a static story overriding the default component or wants to pass the children prop into the default component.

Maybe this needs a <Story static> or <Story forwardChildren> prop to make it explicit/configurable?

[xeho91]

Let me see if I understand what you're proposing.

With the following case:

<script module>
  import { defineMeta } from "@storybook/addon-svelte-csf";
  import Button from "./Button.svelte";
  <!--   👆 default component               👇 for the stories file -->
  const { Story } = defineMeta({ component: Button });
</script>

<Story name="Default">
  Click me
</Story>

The following piece:

<Story name="Default">
  <span>Click me</span>
</Story>

Will produce:

<Button>
  <span>Click me</span>
</Button>

Now, with the suggestion of adding a new static boolean flag prop to Story like this:

<Story name="Default" static>
  <span>Click me</span>
</Story>

Will produce:

<span>Click me</span>

Did I get this right?