histoire svelte doesn't include static files

[MarcDAFrame]

Describe the bug

files in image tags can be referrenced like the following in svelte

<img src="/dir/file.png" />

Histoire doesn't return that file. However, it does return a file at /static/dir/file.png

Reproduction

create an image tag with a src="/dir/file.png" image the static folder, create a histoire story, import the svelte component with the image tag. The image does not load. now prepend the src path with static/ and the image wil load in Histoire

System Info

mac, chrome

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.

[Akryum]

Please provide a runnable reproduction, thanks!

[MarcDAFrame]

https://github.com/MarcDAFrame/HistoireStaticBugReproduction

• notice how NoCases failed works in SvelteKit but doesn't work in Histoire
• notice how NoCases Ready works in histoire but doesn't work in SvelteKit

this is because

• failed: src="/res/nocases/failed.svg" (the proper SvelteKit syntax)
• ready: src="/static/res/nocases/failed.svg"

[jim-fx]

For me adding:

const config: UserConfig = {
  // This is for histoire
  publicDir: "static",
}

to my vite.config.ts fixed this problem, although sveltekit complains that this settings gets overwritten.

[Akryum]

This should probably be fixed with #232

[benmccann]

I would be surprised if #232 fixed this. https://github.com/histoire-dev/histoire/blob/main/packages/histoire-plugin-svelte/src/index.ts does not set publicDir. Histoire could load the svelte.config.js and read the files.assets config value with a default value of static to set this.

I'd also note however, that you rarely want to use the static directory. It's generally much better if you import your assets instead: https://kit.svelte.dev/docs/assets

[Akryum]

@benmccann vite-plugin-sveltekit-setup should be loaded by the user vite config, shouldn't it?

[Akryum]

Hmm looks like some necessary config is set in vite-plugin-sveltekit-compile, shouldn't it be in vite-plugin-sveltekit-setup?

[Akryum]

https://github.com/sveltejs/kit/blob/f8dd7754ea21b11063613aac7d0d6cd98fc28b8e/packages/kit/src/exports/vite/index.js#L499
https://github.com/sveltejs/kit/blob/f8dd7754ea21b11063613aac7d0d6cd98fc28b8e/packages/kit/src/exports/vite/index.js#L522

[benmccann]

I didn't think publicDir should be part of vite-plugin-setup because if you include it in a project which has any public directory usage then we'll end up hijacking it. E.g. if Histoire has any files of its own in publicDir and we change it then we'll break things. I guess Histoire is a plugin so can't really expect users to put stuff there during installation though so on second thought perhaps you're right.

[benmccann]

Although thinking about this more, if a user references static files in their components, I'm not sure how those components end up being distributable. If you import the assets they'll get included, but if you just reference them from static then I'm not sure they'll be in your package. So it seems to me that the fact that files in static don't work might be a feature more than a bug.