Merge pull request #19016 from storybookjs/feat/vite-frameworks-autom…

…igration CLI: Add react, vue3, and svelte vite to new-frameworks automigration
storybookjs · Aug 26, 2022 · 090e1aa · 090e1aa
2 parents c4c51b5 + 3ec6c49
commit 090e1aa
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 39 deletions.
diff --git a/code/lib/cli/src/automigrate/fixes/new-frameworks.test.ts b/code/lib/cli/src/automigrate/fixes/new-frameworks.test.ts
@@ -84,21 +84,47 @@ describe('new-frameworks fix', () => {
       ).resolves.toBeFalsy();
     });
 
-    // TODO: once we have vite frameworks e.g. @storybook/react-vite, then we should remove this test
-    it('in sb 7 with vite', async () => {
-      const packageJson = { dependencies: { '@storybook/react': '^7.0.0' } };
+    // TODO: once we have a @storybook/vue-vite framework, we should remove this test
+    it('in sb 7 with vue and vite', async () => {
+      const packageJson = {
+        dependencies: {
+          '@storybook/vue': '^7.0.0',
+          '@storybook/builder-vite': 'x.y.z',
+        },
+      };
       await expect(
         checkNewFrameworks({
           packageJson,
           main: {
-            framework: '@storybook/react',
+            framework: '@storybook/vue',
             core: {
               builder: '@storybook/builder-vite',
             },
           },
         })
       ).resolves.toBeFalsy();
     });
+
+    it('in sb 7 with vite < 3', async () => {
+      const packageJson = {
+        dependencies: {
+          '@storybook/react': '^7.0.0',
+          '@storybook/builder-vite': 'x.y.z',
+          vite: '^2.0.0',
+        },
+      };
+      await expect(
+        checkNewFrameworks({
+          packageJson,
+          main: {
+            framework: '@storybook/react',
+            core: {
+              builder: '@storybook/builder-vite',
+            },
+          },
+        })
+      ).rejects.toBeTruthy();
+    });
   });
 
   describe('sb >= 7', () => {
@@ -150,6 +176,7 @@ describe('new-frameworks fix', () => {
           })
         );
       });
+
       it('should update only builders in @storybook/angular', async () => {
         const packageJson = {
           dependencies: {
@@ -193,37 +220,33 @@ describe('new-frameworks fix', () => {
           })
         );
       });
-    });
 
-    // TODO: enable this once Vite is supported
-    // eslint-disable-next-line jest/no-disabled-tests
-    it.skip('should update to @storybook/react-vite', async () => {
-      const packageJson = {
-        dependencies: {
-          '@storybook/react': '^7.0.0-alpha.0',
-          '@storybook/builder-vite': '^0.0.2',
-        },
-      };
-      await expect(
-        checkNewFrameworks({
-          packageJson,
-          main: {
-            framework: '@storybook/react',
-            core: {
-              builder: '@storybook/builder-vite',
-            },
+      it('should update to @storybook/react-vite', async () => {
+        const packageJson = {
+          dependencies: {
+            '@storybook/react': '^7.0.0-alpha.0',
+            '@storybook/builder-vite': '^0.0.2',
+            vite: '3.0.0',
           },
-        })
-      ).resolves.toEqual(
-        expect.objectContaining({
-          dependenciesToAdd: '@storybook/react-vite',
-          dependenciesToRemove: [
-            '@storybook/react',
-            'storybook-builder-vite',
-            '@storybook/builder-vite',
-          ],
-        })
-      );
+        };
+        await expect(
+          checkNewFrameworks({
+            packageJson,
+            main: {
+              framework: '@storybook/react',
+              core: {
+                builder: '@storybook/builder-vite',
+              },
+            },
+          })
+        ).resolves.toEqual(
+          expect.objectContaining({
+            frameworkPackage: '@storybook/react-vite',
+            dependenciesToAdd: ['@storybook/react-vite'],
+            dependenciesToRemove: ['@storybook/builder-vite', '@storybook/react'],
+          })
+        );
+      });
     });
   });
 });
diff --git a/code/lib/cli/src/automigrate/fixes/new-frameworks.ts b/code/lib/cli/src/automigrate/fixes/new-frameworks.ts
@@ -10,7 +10,7 @@ import { getStorybookVersionSpecifier } from '../../helpers';
 
 const logger = console;
 
-const packagesMap = {
+const packagesMap: Record<string, { webpack5?: string; vite?: string }> = {
   '@storybook/react': {
     webpack5: '@storybook/react-webpack5',
     vite: '@storybook/react-vite',
@@ -26,14 +26,16 @@ const packagesMap = {
   },
   '@storybook/vue': {
     webpack5: '@storybook/vue-webpack5',
-    vite: '@storybook/vue-vite',
+    // TODO: bring this back if we ever want to support vue 2 + vite. Else delete this!
+    // vite: '@storybook/vue-vite',
   },
   '@storybook/vue3': {
     webpack5: '@storybook/vue3-webpack5',
     vite: '@storybook/vue3-vite',
   },
   '@storybook/svelte': {
     webpack5: '@storybook/svelte-webpack5',
+    // TODO: bring this back once we have the svelte-vite package
     vite: '@storybook/svelte-vite',
   },
   '@storybook/web-components': {
@@ -127,9 +129,22 @@ export const newFrameworks: Fix<NewFrameworkRunOptions> = {
       options: main.getFieldValue(['core', 'builder', 'options']) || {},
     } as const;
 
-    // TODO: once we have vite frameworks e.g. @storybook/react-vite, then we support it here
-    // and remove ['storybook-builder-vite', '@storybook/builder-vite'] from deps
-    if (builderInfo.name === 'vite') {
+    const newFrameworkPackage = packagesMap[frameworkPackage][builderInfo.name];
+
+    // not all frameworks support vite yet e.g. Svelte
+    if (!newFrameworkPackage) {
+      return null;
+    }
+
+    if (allDeps.vite && semver.lt(semver.coerce(allDeps.vite).version, '3.0.0')) {
+      logger.warn(dedent`
+        ❌ Detected Vite ${
+          allDeps.vite
+        }, which is unsupported in Storybook 7.0, so the ${chalk.cyan(
+        'newFrameworks'
+      )} fix will be skipped.
+      Please upgrade vite to 3.0.0 or higher and rerun this automigration with "npx storybook@future automigrate".
+      `);
       return null;
     }
 
@@ -140,9 +155,10 @@ export const newFrameworks: Fix<NewFrameworkRunOptions> = {
       '@storybook/manager-webpack5',
       '@storybook/builder-webpack4',
       '@storybook/manager-webpack4',
+      '@storybook/builder-vite',
+      'storybook-builder-vite',
     ].filter((dep) => allDeps[dep]);
 
-    const newFrameworkPackage = packagesMap[frameworkPackage][builderInfo.name];
     const dependenciesToAdd = [];
 
     // some frameworks didn't change e.g. Angular, Ember