Add Ability to Configure Svelte-Loader Options

I love storybook, but I can’t use it with my Svelte components because I’m using a stylus preprocessor with my components and (as far as I can tell) there’s no way for me to tell storybook about my preprocessor.

What I need is a way to pass options into framework-preset-svelte.js at line 11

[rixo]

@shilman Not at all. But AFAIK, @amwmedia’s solution is the correct way. I would have done it this way.

With my proposed changes in their current form, it should also keep working as it is. But that’s more luck than anything else; I experimented with changing this rule at a point, to make it work.

Maybe that would be nice to be able to expose some particularly interesting rules / loaders / loader options to users, to spare them the need to do this fragile lookup themselves, but that would be a feature from SB core (and it might be tricky to do it right).

What I can do is add a comment in Svelte’s framework presets to remind anyone that this signature (first level rule with a loader prop containing 'svelte-loader') should be preserved or considered a breaking change.

@amwmedia To be safe (well… safer), you should probably preserve existing loader options though.

svelteLoader.options = {
  ...svelteLoader.options,
  preprocess: { ... },
}

(Or you can directly modify the config arg that your are provided, it is intended for that.)

I think it’s safe to assume that preprocess will never be used by SB, so it’s safe to overwrite it. As long as you ensure that your custom preprocessor preserves support for raw syntaxes (i.e. CSS in your case).

[shilman]

@amwmedia AFAIK there is no easy way to do that. However, as a workaround you can configure webpack manually by removing the rule in question, and adding a replacement that has the options you need. Or, if you’re feeling cavalier, just updating the existing rule in place. See https://storybook.js.org/docs/configurations/custom-webpack-config/#full-control-mode