search

storybookjs / addon-svelte-csf

[Incubation] CSF using Svelte components.
MIT License
98 stars 29 forks source link

Express meta as JS #135

Closed benmccann closed 9 months ago

benmccann commented 10 months ago

This idea courtesy of @JReinhold. It might be more natural to express meta as JS within the .svelte file leaving Svelte syntax for the stories themselves.

<script context="module">
  import Button from './Button.svelte';

  // exactly like default export in plain CSF
  export const meta = {
    title: "Special Buttons",
    component: Button,
    argTypes: {...},
    parameters: {...}
  };
</script>
j3rem1e commented 10 months ago

The issue here is that "meta" should be statically analyzed to be part of the stories index. It's doable but not easy to do if it's plain JavaScript.

benmccann commented 10 months ago

If it's in JavaScript couldn't you just use it directly rather than trying to statically analyze it?

j3rem1e commented 10 months ago

It's not possible afaik. At least the first version of this plugin had been rejected because of that ^^

You have to extract a "stories.json" at compile time.

Storybook uses an AST from Babel to do that - cf https://github.com/storybookjs/storybook/tree/next/code/lib/csf-tools Here, we should reimplement this logic with the AST from Svelte, or maybe reuse csf-tools, but IMO it's not part of the public api of storybook.

At least 3 properties should be exported at compile time: an id, a title, and the list of tags - https://github.com/storybookjs/addon-svelte-csf/pull/134/files#diff-268ed31ede4f019aa45638117dd2ee766a1f44800c8f9d9a8b7557cce061a9c0L144

Others properties/parameters could be read at runtime.

j3rem1e commented 10 months ago

I have an implementation of this issue in #134

benmccann commented 9 months ago

It's not possible afaik.

I have an implementation of this issue in https://github.com/storybookjs/addon-svelte-csf/pull/134

I'm not quite sure how to interpret these two seemingly conflicting statements :laughing: It sounds like you originally thought it wasn't possible, but then figured it out, so I wanted to clarify if that's right?

j3rem1e commented 9 months ago

Sorry, I was talking about this:

If it's in JavaScript couldn't you just use it directly rather than trying to statically analyze it?

It's not possible because it has to be parsed at compile time. It's implemented here in the PR: https://github.com/storybookjs/addon-svelte-csf/pull/134/files#diff-268ed31ede4f019aa45638117dd2ee766a1f44800c8f9d9a8b7557cce061a9c0R168