Merge pull request #31192 from storybookjs/yann/fix-flat-config-setup

ESLint: Fix flat config setup

Author: yannbf

Diff for: code/core/src/cli/eslintPlugin.test.ts

@@ -229,7 +229,7 @@ describe('configureEslintPlugin', () => {
         import storybook from "eslint-plugin-storybook";
 
         import somePlugin from 'some-plugin';
-        export default [somePlugin, storybook.configs["flat/recommended"]];"
+        export default [somePlugin, ...storybook.configs["flat/recommended"]];"
       `);
     });
 
@@ -290,7 +290,7 @@ describe('configureEslintPlugin', () => {
         import storybook from "eslint-plugin-storybook";
 
         import eslint from "@eslint/js";
-        const options = [eslint.configs.recommended, storybook.configs["flat/recommended"]]
+        const options = [eslint.configs.recommended, ...storybook.configs["flat/recommended"]]
 
         export default options;"
       `);
@@ -322,7 +322,7 @@ describe('configureEslintPlugin', () => {
         import storybook from "eslint-plugin-storybook";
 
         import eslint from "@eslint/js";
-        const options = [eslint.configs.recommended, storybook.configs["flat/recommended"]] as Config
+        const options = [eslint.configs.recommended, ...storybook.configs["flat/recommended"]] as Config
 
         export default options;"
       `);
@@ -352,7 +352,7 @@ describe('configureEslintPlugin', () => {
         import storybook from "eslint-plugin-storybook";
 
         import eslint from "@eslint/js";
-        export default [eslint.configs.recommended, storybook.configs["flat/recommended"]] satisfies Config;"
+        export default [eslint.configs.recommended, ...storybook.configs["flat/recommended"]] satisfies Config;"
       `);
     });
 

Diff for: code/core/src/cli/eslintPlugin.ts

@@ -94,7 +94,7 @@ export const configureFlatConfig = async (code: string) => {
 
       // Case 1: Direct array
       if (t.isArrayExpression(eslintConfigExpression)) {
-        eslintConfigExpression.elements.push(storybookConfig);
+        eslintConfigExpression.elements.push(t.spreadElement(storybookConfig));
       }
 
       // Case 2: tseslint.config(...)
@@ -115,7 +115,7 @@ export const configureFlatConfig = async (code: string) => {
           const init = unwrapTSExpression(binding.path.node.init);
 
           if (t.isArrayExpression(init)) {
-            init.elements.push(storybookConfig);
+            init.elements.push(t.spreadElement(storybookConfig));
           }
         }
       }

Diff for: code/lib/create-storybook/src/generators/baseGenerator.ts

@@ -351,18 +351,13 @@ export async function baseGenerator(
     text: `Getting the correct version of ${packagesToInstall.length} packages`,
   }).start();
 
-  const versionedPackages = await packageManager.getVersionedPackages(
-    packagesToInstall as string[]
-  );
-  versionedPackagesSpinner.succeed();
-
   try {
     if (process.env.CI !== 'true') {
       const { hasEslint, isStorybookPluginInstalled, isFlatConfig, eslintConfigFile } =
         await extractEslintInfo(packageManager);
 
       if (hasEslint && !isStorybookPluginInstalled) {
-        versionedPackages.push('eslint-plugin-storybook');
+        packagesToInstall.push('eslint-plugin-storybook');
         await configureEslintPlugin({
           eslintConfigFile,
           packageManager,
@@ -374,6 +369,11 @@ export async function baseGenerator(
     // any failure regarding configuring the eslint plugin should not fail the whole generator
   }
 
+  const versionedPackages = await packageManager.getVersionedPackages(
+    packagesToInstall as string[]
+  );
+  versionedPackagesSpinner.succeed();
+
   if (versionedPackages.length > 0) {
     const addDependenciesSpinner = ora({
       indent: 2,