Open enyo opened 1 year ago
I noticed this problem only in my SvelteKit stories. It works correctly with React stories.
@storybook/{svelte,sveltekit,*}
7.0.0-rc.3@sveltejs/kit
1.5.0react
18.2.0unplugin-icons
0.15.2vite
4.1.1I was able to workaround the issue by monkey-patching svelte-docgen-plugin
's transform, excluding any resources whose IDs start with ~icons/
:
const workaroundSvelteDocgenPluginConflictWithUnpluginIcons = (config: InlineConfig) => {
if (!config.plugins) return config
const [_internalPlugins, ...userPlugins] = config.plugins as Plugin[]
const docgenPlugin = userPlugins.find(plugin => plugin.name === 'storybook:svelte-docgen-plugin')
if (docgenPlugin) {
const origTransform = docgenPlugin.transform
const newTransform: typeof origTransform = (code, id, options) => {
// ignore unplugin-icons resources
if (id.startsWith('~icons/')) {
return
}
return (origTransform as Function)?.call(docgenPlugin, code, id, options)
}
docgenPlugin.transform = newTransform
docgenPlugin.enforce = 'post'
}
return config
}
Thanks for the workaround, @tony19. I'm reluctant to do this in the base plugin, since technically anyone could use ~icons/
for anything, and they may be components that we need to process. I've opened https://github.com/antfu/unplugin-icons/issues/274 to ask whether there's something that should change on unplugin-icons side, in order to prevent other plugins like ours from processing these virtual files.
I had to add "types": ["unplugin-icons/types/svelte"]
to my tsconfig
in order to get everything to compile properly. See if this avoids the need for a workaround.
It looks to me like this would only be hit when a preprocessor is being used:
I'm not quite sure what this code is doing. It looks like the src
is passed in, but rather than using it the file is read from the file system to get the src
again. I don't know why though. Any ideas @IanVS ?
No, I think it just needs to be changed not to try to read from disk. I meant to make that change but then forgot about it. Thanks for the reminder. If anyone wants to take a crack at it before I get to it, feel free!
Does anyone have a solution for this issue?
Yes, I believe the solution is to change the svelte-docgen
plugin in storybook to read the src
instead of reading the contents from disk. Would you be willing to open a PR, @ryu-man?
Workaround until this gets fixed: yarn patch @storybook/svelte-vite
. Then, edit dist/preset.js
and replace:
if(docPreprocessOptions){let rawSource=import_fs.default.readFileSync(resource).toString(),{code:fileContent}=await(0,import_compiler.preprocess)(rawSource,docPreprocessOptions,{filename:resource});docOptions={fileContent}}
with
if(docPreprocessOptions)try{let rawSource=import_fs.default.readFileSync(resource).toString(),{code:fileContent}=await(0,import_compiler.preprocess)(rawSource,docPreprocessOptions,{filename:resource});docOptions={fileContent}}catch(e){} else
Notice right after the if(docPreprocessOptions)
, add just the keyword try
right before the opening bracket, then right after the closing bracket before the else
add catch(e){}
.
@IanVS I opened a PR for this (#26838)
Describe the bug
When adding unplugin/icons for sveltekit, it fails due to the docgen plugin.
To Reproduce
System
No response
Additional context
https://discord.com/channels/486522875931656193/1061953675263742042