Express meta as JS

[benmccann]

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]

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]

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

[j3rem1e]

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]

I have an implementation of this issue in #134

[benmccann]

It's not possible afaik.

I have an implementation of this issue in #134

I'm not quite sure how to interpret these two seemingly conflicting statements 😆 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]

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