storybook/code/lib/cli/src/automigrate/fixes/builder-vite.ts

import chalk from 'chalk';
import { dedent } from 'ts-dedent';

import { writeConfig } from '@storybook/csf-tools';

import type { Fix } from '../types';
import type { PackageJson } from '../../js-package-manager';
import { getStorybookData, updateMainConfig } from '../helpers/mainConfigFile';

const logger = console;

interface BuilderViteOptions {
  builder: any;
  packageJson: PackageJson;
}

/**
 * Is the user using 'storybook-builder-vite' in their project?
 *
 * If so, prompt them to upgrade to '@storybook/builder-vite'.
 *
 * - Add '@storybook/builder-vite' as dev dependency
 * - Remove 'storybook-builder-vite' dependency
 * - Add core.builder = '@storybook/builder-vite' to main.js
 */
export const builderVite: Fix<BuilderViteOptions> = {
  id: 'builder-vite',

  async check({ configDir, packageManager }) {
    const packageJson = packageManager.retrievePackageJson();
    const { mainConfig } = await getStorybookData({ configDir, packageManager });
    const builder = mainConfig.core?.builder;
    const builderName = typeof builder === 'string' ? builder : builder?.name;

    if (builderName !== 'storybook-builder-vite') {
      return null;
    }

    return { builder, packageJson };
  },

  prompt({ builder }) {
    const builderFormatted = chalk.cyan(JSON.stringify(builder, null, 2));

    return dedent`
      We've detected you're using the community vite builder: ${builderFormatted}
      
      'storybook-builder-vite' is deprecated and now located at ${chalk.cyan(
        '@storybook/builder-vite'
      )}.

      We can upgrade your project to use the new builder automatically.
      
      More info: ${chalk.yellow(
        'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#vite-builder-renamed'
      )}
    `;
  },

  async run({ result: { builder, packageJson }, packageManager, dryRun, mainConfigPath }) {
    const { dependencies = {}, devDependencies = {} } = packageJson;

    logger.info(`✅ Removing existing 'storybook-builder-vite' dependency`);
    if (!dryRun) {
      delete dependencies['storybook-builder-vite'];
      delete devDependencies['storybook-builder-vite'];
      packageManager.writePackageJson(packageJson);
    }

    logger.info(`✅ Adding '@storybook/builder-vite' as dev dependency`);
    if (!dryRun) {
      packageManager.addDependencies({ installAsDevDependencies: true }, [
        '@storybook/builder-vite',
      ]);
    }

    logger.info(`✅ Updating main.js to use vite builder`);
    if (!dryRun) {
      await updateMainConfig({ dryRun, mainConfigPath }, async (main) => {
        const updatedBuilder =
          typeof builder === 'string'
            ? '@storybook/builder-vite'
            : { name: '@storybook/builder-vite', options: builder.options };
        main.setFieldValue(['core', 'builder'], updatedBuilder);
        await writeConfig(main);
      });
    }
  },
};