[Feature Request] Allow configuration of filename patterns besides `*.stories.svelte`

[Bluzzi]

Describe the bug

I would like to change the name of the files in my stories, but this does not work with the addon @storybook/addon-svelte-csf.

Steps to reproduce the behavior

import type { StorybookConfig } from "@storybook/sveltekit";

const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.sb.svelte"], // here, I change the file extension to .sb.svelte
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "@storybook/addon-svelte-csf"
  ],
  framework: {
    name: "@storybook/sveltekit",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
};

export default config;

I then create a file like button.sb.svelte, but it doesn't work, when I start Storybook, I get this error:

Everything works fine if I leave the default extension (.stories.svelte) in the configuration and as the file name.

Environment

• OS: Windows
• Node.js version: v18.15.0
• NPM version: 8.1.1 (PNPM)

[JReinhold]

Hi!

This makes sense, the addon is only looking for *.stories.svelte files here, but it should probably look for *.svelte instead.

https://github.com/storybookjs/addon-svelte-csf/blob/main/src/preset/index.js#L56

PRs welcome!

[benmccann]

Here's the current file location: https://github.com/storybookjs/addon-svelte-csf/blob/main/src/preset/index.ts

Looking for all *.svelte files might be too aggressive as many won't be stories? I'd think you'd need to communicate to the plugin that it needs to look for the custom .sb.svelte extension

[JReinhold]

Looking for all *.svelte files might be too aggressive as many won't be stories? I'd think you'd need to communicate to the plugin that it needs to look for the custom .sb.svelte extension

This is actually not as bad as it sounds, as the files are already pre-filtered by the stories configuration. The flow is something like this:

1. Find all files that matches any of the globs in the user's stories configuration, eg. "../src/**/*.sb.svelte"
2. For each file, find the first indexer that can handle this file, by testing if its regex matches. (The link you gave is this addon's indexer, the plain CSF indexer is another one)
3. run the file through the given indexer.

So just because the regex matches *.svelte doesn't mean it'll try to parse all of them. However if a user configures a stories glob that matches "../src/**/*.svelte", then that would definitely break because the indexer would try to parse non-story files.

I do agree though that a better but slightly more complex solution would be to be able to customize the regex via an addon option.

[benmccann]

Ah, makes sense! Probably more user friendly to avoid the extra option in that case

[shilman]

:rocket: Issue was released in v4.0.6 :rocket: