How can I integrate Histoire with SvelteKit?

[fernand0dias]

Is there any way to do that?

[SarcevicAntonio]

For us, it works mostly fine inside SvelteKit. I see two catches with import aliases, tho:

---

EDIT: Thanks to Akryum we managed to get it fully working with SvelteKit $lib and mocked $app imports.

You can view working Vite config example here!.

---

1. We have to explicitly add the magic SvelteKit $lib import alias to the Vite config, so Histoire can import components that use those.

const config = {
	// ...
	resolve: {
		alias: {
			$lib: fileURLToPath(new URL('./src/lib', import.meta.url)),
		},
	},
	// ...

2. We can't import components that use the SvelteKit's $app/xyz (e.g. $app/store) imports. In Storybook, I was able to mock them by creating a new import alias in the Storybook specific Vite config, and create a mock version of the imports we used there. Now, since with Histoire we only have one shared config between it and SvelteKit we would need to conditionally add this alias if I were to mock it. Anyone got a clue on how to do that?

[Akryum]

I just improved the docs about this

[SarcevicAntonio]

Awesome, thank you so much! I'll give it a shot!

Very vite response I have to say 😄🚀

EDIT: For reference, this is what our Vite config looks like now:

import { HstSvelte } from '@histoire/plugin-svelte';
import { sveltekit } from '@sveltejs/kit/vite';
import { fileURLToPath, URL } from 'url';

/** @type {import('vite').UserConfig} */
const config = {
	plugins: [
		sveltekit(),
	],
	histoire: {
		plugins: [HstSvelte()],
		setupFile: './histoire/setup.ts', // optional, usefull for importing global css
		vite: {
			resolve: {
				alias: {
					$lib: fileURLToPath(new URL('./src/lib', import.meta.url)),
					$app: fileURLToPath(new URL('./histoire/app', import.meta.url)), // location of mocked $app modules
				},
			},
		},
	},
	// other vite config options...
};

export default config;

Works like a charm!

[Steellgold]

what is "setup.ts" ?

[SarcevicAntonio]

what is "setup.ts" ?
— @Steellgold

The historie/setup.ts is our Histoire setupFile, which is optional, I think.

We use it to import our global CSS file like this:

// histoire/setup.ts
import '../src/global.css';

You can just leave it out.

[Steellgold]

what is "setup.ts" ?
— @Steellgold

The historie/setup.ts is our Histoire setupFile, which is optional, I think.

We use it to import our global CSS file like this:

// histoire/setup.ts
import '../src/global.css';

You can just leave it out.

Is this the solution to my problem?
#275