Merge pull request #20094 from storybookjs/jeppe/sveltekit-framework-…

…automigration

SvelteKit: Automigration

MIGRATION.md

@@ -586,6 +586,8 @@ When using a [Vite-based framework](#framework-field-mandatory), Storybook will
 Some settings will be overridden by storybook so that it can function properly, and the merged settings can be modified using `viteFinal` in `.storybook/main.js` (see the [Storybook Vite configuration docs](https://storybook.js.org/docs/react/builders/vite#configuration)).  
 If you were using `viteFinal` in 6.5 to simply merge in your project's standard vite config, you can now remove it.
 
+For Svelte projects this means that the `svelteOptions` property in the `main.js` config can be omitted in most cases, as it will be loaded automatically via the project's `vite.config.js`. An exception to this is when the project needs different Svelte options for Storybook than the Vite config provides for the application itself.
+
 #### Vite cache moved to node_modules/.cache/.vite-storybook
 
 Previously, Storybook's Vite builder placed cache files in node_modules/.vite-storybook. However, it's more common for tools to place cached files into `node_modules/.cache`, and putting them there makes it quick and easy to clear the cache for multiple tools at once. We don't expect this change will cause any problems, but it's something that users of Storybook Vite projects should know about. It can be configured by setting `cacheDir` in `viteFinal` within `.storybook/main.js` [Storybook Vite configuration docs](https://storybook.js.org/docs/react/builders/vite#configuration)).
@@ -601,6 +603,8 @@ export default {
 };
 ```
 
+Also see the note in [Vite builder uses vite config automatically](#vite-builder-uses-vite-config-automatically) about removing `svelteOptions`.
+
 #### Removed docs.getContainer and getPage parameters
 
 It is no longer possible to set `parameters.docs.getContainer()` and `getPage()`. Instead use `parameters.docs.container` or `parameters.docs.page` directly.

code/frameworks/sveltekit/package.json

@@ -52,6 +52,7 @@
   },
   "dependencies": {
     "@storybook/builder-vite": "7.0.0-beta.2",
+    "@storybook/svelte": "7.0.0-beta.2",
     "@storybook/svelte-vite": "7.0.0-beta.2"
   },
   "devDependencies": {

code/lib/cli/src/automigrate/fixes/index.ts

@@ -12,6 +12,7 @@ import { newFrameworks } from './new-frameworks';
 import { removedGlobalClientAPIs } from './remove-global-client-apis';
 import { mdx1to2 } from './mdx-1-to-2';
 import { docsPageAutomatic } from './docsPage-automatic';
+import { sveltekitFramework } from './sveltekit-framework';
 import { addReact } from './add-react';
 
 export * from '../types';
@@ -23,6 +24,7 @@ export const fixes: Fix[] = [
   vue3,
   mainjsFramework,
   eslintPlugin,
+  sveltekitFramework,
   builderVite,
   sbScripts,
   newFrameworks,

code/lib/cli/src/automigrate/fixes/new-frameworks.ts

@@ -262,8 +262,7 @@ export const newFrameworks: Fix<NewFrameworkRunOptions> = {
 
       if (currentCore) {
         if (Object.keys(currentCore).length === 0) {
-          // TODO: this should delete the field instead
-          main.setFieldValue(['core'], {});
+          main.removeField(['core']);
         } else {
           main.setFieldValue(['core'], currentCore);
         }

code/lib/cli/src/automigrate/fixes/sveltekit-framework.test.ts

@@ -0,0 +1,174 @@
+/* eslint-disable no-underscore-dangle */
+import type { StorybookConfig } from 'lib/types/src';
+import path from 'path';
+import type { JsPackageManager, PackageJson } from '../../js-package-manager';
+import { sveltekitFramework } from './sveltekit-framework';
+
+// eslint-disable-next-line global-require, jest/no-mocks-import
+jest.mock('fs-extra', () => require('../../../../../__mocks__/fs-extra'));
+
+const checkSvelteKitFramework = async ({
+  packageJson,
+  main,
+}: {
+  packageJson: PackageJson;
+  main?: Partial<StorybookConfig>;
+}) => {
+  if (main) {
+    // eslint-disable-next-line global-require
+    require('fs-extra').__setMockFiles({
+      [path.join('.storybook', 'main.js')]: `module.exports = ${JSON.stringify(main)};`,
+    });
+  } else {
+    // eslint-disable-next-line global-require
+    require('fs-extra').__setMockFiles({});
+  }
+  const packageManager = {
+    retrievePackageJson: () => ({ dependencies: {}, devDependencies: {}, ...packageJson }),
+  } as JsPackageManager;
+
+  return sveltekitFramework.check({ packageManager });
+};
+
+describe('SvelteKit framework fix', () => {
+  describe('should no-op', () => {
+    it('in SB < v7.0.0', async () => {
+      const packageJson = {
+        dependencies: { '@sveltejs/kit': '^1.0.0-next.571', '@storybook/svelte': '^6.2.0' },
+      };
+      const main = { framework: '@storybook/svelte-vite' };
+      await expect(checkSvelteKitFramework({ packageJson, main })).resolves.toBeFalsy();
+    });
+
+    describe('in SB >= v7.0.0', () => {
+      it('in non-SvelteKit projects', async () => {
+        const packageJson = {
+          dependencies: { svelte: '^3.53.1', '@storybook/svelte-vite': '^7.0.0' },
+        };
+        const main = {
+          framework: '@storybook/svelte-vite',
+        };
+        await expect(checkSvelteKitFramework({ packageJson, main })).resolves.toBeFalsy();
+      });
+
+      it('without main', async () => {
+        const packageJson = {
+          dependencies: { '@sveltejs/kit': '^1.0.0-next.571', '@storybook/svelte': '^7.0.0' },
+        };
+        await expect(checkSvelteKitFramework({ packageJson })).rejects.toThrow();
+      });
+
+      it('without framework field in main', async () => {
+        const packageJson = {
+          dependencies: { '@sveltejs/kit': '^1.0.0-next.571', '@storybook/svelte': '^7.0.0' },
+        };
+        const main = {};
+        await expect(checkSvelteKitFramework({ packageJson, main })).rejects.toThrow();
+      });
+
+      it('with unsupported framework', async () => {
+        const packageJson = {
+          dependencies: {
+            '@sveltejs/kit': '^1.0.0-next.571',
+            '@storybook/svelte-vite': '^7.0.0',
+            '@storybook/html': '^7.0.0',
+          },
+        };
+        const main = {
+          framework: '@storybook/html',
+        };
+        await expect(checkSvelteKitFramework({ packageJson, main })).rejects.toThrow();
+      });
+
+      it('with unsupported framework+builder from SB 6.5', async () => {
+        const packageJson = {
+          dependencies: {
+            '@sveltejs/kit': '^1.0.0-next.571',
+            '@storybook/svelte-webpack5': '^7.0.0',
+            '@storybook/svelte': '^7.0.0',
+          },
+        };
+        const main = {
+          framework: '@storybook/svelte',
+          core: { builder: '@storybook/builder-webpack5' },
+        };
+        await expect(checkSvelteKitFramework({ packageJson, main })).rejects.toThrow();
+      });
+
+      it('with @storybook/svelte-webpack5 framework', async () => {
+        const packageJson = {
+          dependencies: {
+            '@storybook/svelte': '^7.0.0',
+            '@storybook/svelte-webpack5': '^7.0.0',
+            '@sveltejs/kit': '^1.0.0-next.571',
+          },
+        };
+        const main = {
+          framework: '@storybook/svelte-webpack5',
+        };
+        await expect(checkSvelteKitFramework({ packageJson, main })).rejects.toThrow();
+      });
+    });
+  });
+
+  describe('should migrate', () => {
+    it('from @storybook/svelte-vite', async () => {
+      const packageJson = {
+        dependencies: {
+          '@storybook/svelte': '^7.0.0',
+          '@storybook/svelte-vite': '^7.0.0',
+          '@sveltejs/kit': '^1.0.0-next.571',
+        },
+      };
+      const main = {
+        framework: '@storybook/svelte-vite',
+      };
+      await expect(checkSvelteKitFramework({ packageJson, main })).resolves.toMatchObject({
+        packageJson,
+        main: expect.objectContaining({}),
+        frameworkOptions: undefined,
+        dependenciesToRemove: ['@storybook/svelte-vite'],
+      });
+    });
+
+    it('from @storybook/svelte framework and @storybook/builder-vite builder', async () => {
+      const packageJson = {
+        dependencies: {
+          '@storybook/svelte': '^7.0.0',
+          '@storybook/builder-vite': '^7.0.0',
+          '@sveltejs/kit': '^1.0.0-next.571',
+        },
+      };
+      const main = {
+        framework: '@storybook/svelte',
+        core: { builder: '@storybook/builder-vite' },
+      };
+      await expect(checkSvelteKitFramework({ packageJson, main })).resolves.toMatchObject({
+        packageJson,
+        main: expect.objectContaining({}),
+        frameworkOptions: undefined,
+        dependenciesToRemove: ['@storybook/builder-vite'],
+      });
+    });
+
+    it('from @storybook/svelte framework and storybook-builder-vite builder', async () => {
+      const packageJson = {
+        dependencies: {
+          '@storybook/svelte': '^7.0.0',
+          'storybook-builder-vite': '^0.2.5',
+          '@sveltejs/kit': '^1.0.0-next.571',
+        },
+      };
+      const main = {
+        framework: '@storybook/svelte',
+        core: { builder: 'storybook-builder-vite' },
+      };
+      await expect(checkSvelteKitFramework({ packageJson, main })).resolves.toMatchObject({
+        packageJson,
+        main: expect.objectContaining({}),
+        frameworkOptions: undefined,
+        dependenciesToRemove: ['storybook-builder-vite'],
+      });
+    });
+  });
+});