Handle new versions of vite-plugin-svelte (#382)

Fixes #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](sveltejs/vite-plugin-svelte#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](sveltejs/vite-plugin-svelte#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

@@ -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 },
   },
 };

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",

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;

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) {

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