From babbc41734e02165c0e01a3b4e7510151872b46d Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Wed, 18 May 2022 13:53:08 -0400 Subject: [PATCH] Handle new versions of vite-plugin-svelte (#382) Fixes https://github.com/storybookjs/builder-vite/issues/381 There have been two changes in @sveltejs/vite-plugin-svelte that cause problems for us, which this PR addresses: - https://github.com/sveltejs/vite-plugin-svelte/releases/tag/%40sveltejs%2Fvite-plugin-svelte%401.0.0-next.42 started to merge the `svelte.config.js` file [by default](https://github.com/sveltejs/vite-plugin-svelte/pull/317), which may not be what storybook users want / expect, since their production config may be different from the storybook config (same reason we don't automatically merge `vite.config.js`). With the changes here, the `configFile` option in `svelteOptions` can still be set to `true` or to a specific file, if desired. - https://github.com/sveltejs/vite-plugin-svelte/releases/tag/%40sveltejs%2Fvite-plugin-svelte%401.0.0-next.43 began [returning an array of plugins](https://github.com/sveltejs/vite-plugin-svelte/pull/322) rather than just a single one. This would normally be fine, except that we hack around with the plugin to create two separate ones, with different names, to avoid HMR in story files. So, this PR checks to see if the result is an array or not, and reacts accordingly. Note, I'm throwing away the inspector for story files. This might be a problem, but until we hear about it, I think this'll be fine. The inspector is still pretty experimental anyway, from what I can tell. To test, you can revert the changes I've made in `vite-config.ts`, and you'll see that the `svelte` example breaks (I updated the svelte plugin in it). With the changes, it builds successfully. This also enables the use of the new experimental inspection plugin. ![image](https://user-images.githubusercontent.com/4616705/169103606-d04db266-5025-4e9d-8062-f894323adf77.png) To enable this feature, be sure you have `@sveltejs/vite-plugin-svelte` version `1.0.0-next.43` or higher, then add the following to your `svelteOptions` in `.storybook/main.js`: ```js module.exports = { // ... rest of config framework: '@storybook/svelte', svelteOptions: { preprocess: preprocess(), experimental: { inspector: true }, // <-- this line }, }; ``` Then, when the storybook opens, focus a story iframe and press cmd+shift (mac) or ctrl+shift (windows) to activate. --- examples/svelte/.storybook/main.js | 3 +++ examples/svelte/package.json | 2 +- examples/svelte/svelte.config.mjs | 22 ++++++++++++++++++++++ packages/builder-vite/vite-config.ts | 14 ++++++++++++-- yarn.lock | 15 ++++++++------- 5 files changed, 46 insertions(+), 10 deletions(-) create mode 100644 examples/svelte/svelte.config.mjs diff --git a/examples/svelte/.storybook/main.js b/examples/svelte/.storybook/main.js index d24d0c62..856cf1a4 100644 --- a/examples/svelte/.storybook/main.js +++ b/examples/svelte/.storybook/main.js @@ -17,5 +17,8 @@ module.exports = { }, svelteOptions: { preprocess: preprocess(), + // Possible with @sveltejs/vite-plugin-svelte version 1.0.0-next.43 or higher. + // Focus a story iframe and press cmd+shift (mac) or ctrl+shift (windows) to activate. + experimental: { inspector: true }, }, }; diff --git a/examples/svelte/package.json b/examples/svelte/package.json index e609b1e5..ddee519b 100644 --- a/examples/svelte/package.json +++ b/examples/svelte/package.json @@ -24,7 +24,7 @@ "@storybook/builder-vite": "workspace:*", "@storybook/svelte": "^6.5.0-beta.1", "@storybook/test-runner": "0.0.8", - "@sveltejs/vite-plugin-svelte": "^1.0.0-next.37", + "@sveltejs/vite-plugin-svelte": "1.0.0-next.44", "@tsconfig/svelte": "^3.0.0", "http-server": "^14.1.0", "jest": "^27.5.1", diff --git a/examples/svelte/svelte.config.mjs b/examples/svelte/svelte.config.mjs new file mode 100644 index 00000000..23bd6a97 --- /dev/null +++ b/examples/svelte/svelte.config.mjs @@ -0,0 +1,22 @@ +import preprocess from 'svelte-preprocess'; + +/** + * This is an example of a config that might be used in a sveltekit app, + * but it's not actually used in this example. It serves to ensure that + * we aren't accidentally merging this config, as @sveltejs/vite-plugin-svelte + * began to do by default. + */ +const config = { + // Consult https://github.com/sveltejs/svelte-preprocess + // for more information about preprocessors + preprocess: preprocess(), + + kit: { + // Override http methods + methodOverride: { + allowed: ['PATCH', 'DELETE'], + }, + }, +}; + +export default config; diff --git a/packages/builder-vite/vite-config.ts b/packages/builder-vite/vite-config.ts index 452a6f85..a36c4ba8 100644 --- a/packages/builder-vite/vite-config.ts +++ b/packages/builder-vite/vite-config.ts @@ -97,10 +97,20 @@ export async function pluginConfig(options: ExtendedOptions, _type: PluginConfig // 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] })); + // Starting in 1.0.0-next.42, svelte.config.js is included by default. + // We disable that, but allow it to be overridden in svelteOptions + plugins.push(sveltePlugin({ configFile: false, ...svelteOptions, exclude: [...userExclude, ...storyPatterns] })); // Svelte stories without HMR + const storySveltePlugin = sveltePlugin({ + configFile: false, + ...svelteOptions, + exclude: userExclude, + include: storyPatterns, + hot: false, + }); plugins.push({ - ...sveltePlugin({ ...svelteOptions, exclude: userExclude, include: storyPatterns, hot: false }), + // Starting in 1.0.0-next.43, the plugin function returns an array of plugins. We only want the first one here. + ...(Array.isArray(storySveltePlugin) ? storySveltePlugin[0] : storySveltePlugin), name: 'vite-plugin-svelte-stories', }); } catch (err) { diff --git a/yarn.lock b/yarn.lock index 242b5c95..d418d3c1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2338,7 +2338,7 @@ __metadata: languageName: node linkType: hard -"@rollup/pluginutils@npm:^4.1.0, @rollup/pluginutils@npm:^4.2.0": +"@rollup/pluginutils@npm:^4.1.0, @rollup/pluginutils@npm:^4.2.0, @rollup/pluginutils@npm:^4.2.1": version: 4.2.1 resolution: "@rollup/pluginutils@npm:4.2.1" dependencies: @@ -3893,12 +3893,13 @@ __metadata: languageName: node linkType: hard -"@sveltejs/vite-plugin-svelte@npm:^1.0.0-next.37": - version: 1.0.0-next.41 - resolution: "@sveltejs/vite-plugin-svelte@npm:1.0.0-next.41" +"@sveltejs/vite-plugin-svelte@npm:1.0.0-next.44": + version: 1.0.0-next.44 + resolution: "@sveltejs/vite-plugin-svelte@npm:1.0.0-next.44" dependencies: - "@rollup/pluginutils": ^4.2.0 + "@rollup/pluginutils": ^4.2.1 debug: ^4.3.4 + deepmerge: ^4.2.2 kleur: ^4.1.4 magic-string: ^0.26.1 svelte-hmr: ^0.14.11 @@ -3909,7 +3910,7 @@ __metadata: peerDependenciesMeta: diff-match-patch: optional: true - checksum: 23e2290aa3e115c638c180a16782ba57eb529e3de832f2302f378b5b28d1963861cf1c1179ecd9d6a09d204985d3dafb04dfa94939c83347569f5970bad3a2b8 + checksum: c222a4a63f30618fa098caca631999a9252b3a282821e1b7731f6f5999a4085a1c7dee7202a1602d4348ca3c9f9d4338f187afca744c6b91da41c2eecb11a3fa languageName: node linkType: hard @@ -9066,7 +9067,7 @@ __metadata: "@storybook/builder-vite": "workspace:*" "@storybook/svelte": ^6.5.0-beta.1 "@storybook/test-runner": 0.0.8 - "@sveltejs/vite-plugin-svelte": ^1.0.0-next.37 + "@sveltejs/vite-plugin-svelte": 1.0.0-next.44 "@tsconfig/svelte": ^3.0.0 http-server: ^14.1.0 jest: ^27.5.1