CLI: Improve init for svelte #14161
CLI: Improve init for svelte #14161
Conversation
| let conf = fse.readFileSync('./.storybook/main.js').toString(); | ||
|
|
||
| // add *.stories.svelte | ||
| conf = conf.replace(/js\|jsx/g, 'js|jsx|svelte'); |
There was a problem hiding this comment.
This means we can break Svelte CLI while touching lib\cli\src\generators\configure.ts Do you think it's best to pass an option "extension" that defaults to js, jsx, ts, txs ?
There was a problem hiding this comment.
My first implementation was checking if "framework is svelte" (there is already a special case for angular in this file), my 2nd implementation was doing that (a special properties for extensions), and my third is this PR :)
| conf = `${requirePreprocessor}\n\n${conf}`; | ||
| } | ||
|
|
||
| conf = conf.replace(/\],/, `],\n${svelteOptions}`); |
There was a problem hiding this comment.
This is also not very robust. Same as the in the configure method of lib\cli\src\generators\baseGenerator.ts you have the capacity to add "extraMain" args to your main. With a small refactor, you won't need to know about ./.storybook/main.js in this file
There was a problem hiding this comment.
That's why you're the MVP @tooppaaa ❤️
Thanks so much for the thoughtful review!
There was a problem hiding this comment.
Currently, the main.js is generating from static properties (with JSON.stringify).
However, in my case, I want to inject :
- An import statement / require
- A Function (which can't be generated by JSON.stringify), so I have to format a string and format it correctly
const sveltePreprocess = require('svelte-preprocess');
module.exports = {
...
svelteOptions: {
preprocessor: sveltePreprocess()
},
..
}That's why, for me at least, it wasn't a "small refactor" but I have to rewrite most of the logic inside configure.js 😅
I didn't found jest test around this function, so this refactoring could be risky
I can work on that, but how do you see the implementation of configure for my case ?
Issue:
What I did
as discuted on Discord and here, I have updated the CLI init for svelte:
@storybook/addon-svelte-csftoday, this is not possible to extend the generation of
.storybook/main.js: this configuration is added by patching directly the main.js file after the standard generation.How to test