Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix svelte story files not reloading #362

Merged
merged 1 commit into from
May 1, 2022
Merged

Fix svelte story files not reloading #362

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 22 additions & 2 deletions packages/builder-vite/vite-config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ export async function commonConfig(

export async function pluginConfig(options: ExtendedOptions, _type: PluginConfigType) {
const { framework, presets } = options;
const svelteOptions = await presets.apply('svelteOptions', {}, options);
const svelteOptions: Record<string, any> = await presets.apply('svelteOptions', {}, options);

const plugins = [
codeGeneratorPlugin(options),
Expand Down Expand Up @@ -82,7 +82,27 @@ export async function pluginConfig(options: ExtendedOptions, _type: PluginConfig
if (framework === 'svelte') {
try {
const sveltePlugin = require('@sveltejs/vite-plugin-svelte').svelte;
plugins.push(sveltePlugin(svelteOptions));

// We need to create two separate svelte plugins, one for stories, and one for other svelte files
// because stories.svelte files cannot be hot-module-reloaded.
// Suggested in: https://github.com/sveltejs/vite-plugin-svelte/issues/321#issuecomment-1113205509

// First, create an array containing user exclude patterns, to combine with ours.
const userExclude = Array.isArray(svelteOptions?.exclude)
? svelteOptions?.exclude
: svelteOptions?.exclude
? [svelteOptions?.exclude]
: [];

// These are the svelte stories we need to exclude from HMR
const storyPatterns = ['**/*.story.svelte', '**/*.stories.svelte'];
// Non-story svelte files
plugins.push(sveltePlugin({ ...svelteOptions, exclude: [...userExclude, ...storyPatterns] }));
// Svelte stories without HMR
plugins.push({
...sveltePlugin({ ...svelteOptions, exclude: userExclude, include: storyPatterns, hot: false }),
name: 'vite-plugin-svelte-stories',
});
} catch (err) {
if ((err as NodeJS.ErrnoException).code !== 'MODULE_NOT_FOUND') {
throw new Error(
Expand Down