Svelte: Svelte syntax Component Story Format (Reupload)

[BlackFenix2]

I Copied the text and filechanges from this abandoned PR: #7682 the original author is @rixo

Issue: #6653

Add support for authoring stories in Svelte format, mirroring MDX story syntax, and exporting result that conforms to CSF. CSF can be imported directly from the *.stories.svelte files thanks to a webpack loader.

Changes have been applied over existing app/svelte and examples/svelte-kitchen-sink to preserve support for legacy format and have everything under a single @storybook/svelte package.

What I did

• Add a webpack loader that transforms *.stories.svelte to CSF

• Add Meta and Story svelte components to @storybook/svelte

• Change presets to include the svelte CSF loader

• Move existing examples using storiesOf under legacy (still in the same svelte-kitchen-sink example)

• Add examples using Svelte component syntax

How to test

cd examples/svelte-kitchen-sink
yarn storybook

Details

Following discussion in the issue and my first PR #7023, I have adapted the syntax to mirror that of MDX with Meta and Story components.

Integrating with CSF removed the need for any extra boilerplate (the new architecture also made the integration effort much simpler on my part since all the tricky things that are not framework specific are now handled directly by the core).

Here's an example of the resulting syntax that this gives us:

<script>
  import { Meta, Story } from '@storybooks/svelte'
  import { action } from '@storybook/addon-actions'

  import Button from './Button.svelte'
</script>

<Meta title="My|Stories" parameters={{ ... }} decorators={[ ... ]} />

<Story name"first" parameters={{ ... }} decorators={[ ... ]}>
  <p>Here's the component:</p>
  <Button>Click me!</Button/>
</Story>

<Story name"actions">
  <Button onClick={action('clicked')}>Click me!</Button/>
</Story>

With direct import, we get access to a Svelte component that is a preconfigured preview of the target story:

import { first } from './my.stories.svelte'

const FirstPreview = first() // returns a svelte component

// render the "story preview" (this is regular svelte component API)
const cmp = new FirstPreview({ target: document.body })

Next steps

The most pressing issue that remains to be addressed (IMO) is babel transpilation. Currently, Svelte components are not transpiled down to ES5; we're using the ES2015 output of Svelte compiler directly. Since those components (e.g. Story, Meta) are used in the browser, that imposes a hard limit on the browsers we can support. And, internally, it also causes interop issues between transpiled code and ES2015 code (transpiled classes cannot extend ES classes).

And then testing, interop with addons (source, docs...), MDX support... The babel issue is probably a blocker for some of these too.

I Copied the PR to keep the conversation about writing stories with svelte syntax alive, let me know if you have any questions

[github-actions]

	Fails
🚫	PR is marked with "in progress" label.

Generated by 🚫 dangerJS against ce04d98

[BlackFenix2]

i just learned from Svelte's Discord, in vscode you can press F1 and the svelte extension can show you the compiled code. that should make it easier to debug the .svelte transfromations to CSF

[BlackFenix2]

ok, i did enough to support CSF stories in .svelte files. the Syntax/API is similar to javascript CSF, only the component is used in place of 'export default {}'.

for control autogeneration support, it is stuck on one default component per story file so the button component args wont generate (for now).

I has to tweak and cleanup a bit of bloat code/components, you can try the results on the netlify preview. The code should be ready for review/merge now.

javascript (typescript) CSF:

import ControlShowcaseView from './views/ControlShowcaseView.svelte';

export default {
  title: 'Addon/Controls',
  component: ControlShowcaseView,
  argTypes: {
    range: { defaultValue: 0, control: { type: 'range', min: 0, max: 100 } },
    loadingState: {
      control: {
        type: 'inline-radio',
        options: ['loading', 'error', 'ready'],
      },
    },
    food: {
      control: {
        type: 'inline-check',
        options: ['apple', 'banana', 'orange'],
      },
    },
    car: {
      control: {
        type: 'select',
        options: ['Truck', 'SUV', 'Tesla'],
      },
    },
    color: {
      control: 'color',
    },
    date: {
      control: 'date',
    },
  },
};

export const ShowCase = (args) => ({
  Component: ControlShowcaseView,
  props: args,
});

Svelte Syntax:

<script>
  import ControlShowcaseView from './views/ControlShowcaseView.svelte';
  import { Meta, Story } from '@storybook/svelte';
  import { action } from '@storybook/addon-actions';
  import { withKnobs, text, number } from '@storybook/addon-knobs';
  import Button from '../components/Button.svelte';

  const parameters = {
    storySource: {
      source: 'insert source code here :(',
    },
  };

  const argTypes = {
    range: { defaultValue: 0, control: { type: 'range', min: 0, max: 100 } },
    loadingState: {
      control: {
        type: 'inline-radio',
        options: ['loading', 'error', 'ready'],
      },
    },
    food: {
      control: {
        type: 'inline-check',
        options: ['apple', 'banana', 'orange'],
      },
    },
    car: {
      control: {
        type: 'select',
        options: ['Truck', 'SUV', 'Tesla'],
      },
    },
    color: {
      control: 'color',
    },
    date: {
      control: 'date',
    },
  };
</script>

<Meta title="Svelte Syntax" component={ControlShowcaseView} {argTypes} />
<Story name="with Controls">
  <ControlShowcaseView />
</Story>

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[xow]

Let me know if I can help this get through in any way. Cheers!

[BlackFenix2]

@xow Im pretty much done here, not sure what else is needed to merge the PR.

[savgrace]

Thanks for the work on this @BlackFenix2 ! I'd love to see this get merged 🥰

[j3rem1e]

Hello, and thanks for your work !

However, I don't understand your implementation : the main slot doesn't seem to be used ? It isn't instanciated in the code, and I can't make it work in my branch (whatever I wrote under , only the main component is rendered).

Another question: does it work with args or source-loader ?

Thanks again :)

[phated]

Closing in favor of storybookjs/addon-svelte-csf#1