Release: Prerelease 10.2.0-beta.3

CHANGELOG.prerelease.md

@@ -1,3 +1,10 @@
+## 10.2.0-beta.3
+
+- Core: Support defineConfig when setting up ESLint plugin - [#32878](https://github.com/storybookjs/storybook/pull/32878), thanks @copilot-swe-agent!
+- Core: Viewport UX fixes - [#33557](https://github.com/storybookjs/storybook/pull/33557), thanks @ghengeveld!
+- NextJSVite: Add `@opentelemetry/api` to `optimizeDeps` - [#33577](https://github.com/storybookjs/storybook/pull/33577), thanks @ndelangen!
+- TypeScript: Reduce `cannot be named` errors - [#33344](https://github.com/storybookjs/storybook/pull/33344), thanks @icopp!
+
 ## 10.2.0-beta.2
 
 - CSF-Factories: Skip non-factory exports instead of throwing error - [#33550](https://github.com/storybookjs/storybook/pull/33550), thanks @kasperpeulen!

code/core/src/cli/eslintPlugin.test.ts

@@ -430,6 +430,135 @@ describe('configureEslintPlugin', () => {
       `);
     });
 
+    it('should configure ESLint plugin correctly with Next.js defineConfig style', async () => {
+      const mockPackageManager = {
+        getAllDependencies: vi.fn(),
+      } satisfies Partial<JsPackageManager>;
+
+      const mockConfigFile = dedent`import { defineConfig, globalIgnores } from "eslint/config";
+        import nextVitals from "eslint-config-next/core-web-vitals";
+        import nextTs from "eslint-config-next/typescript";
+
+        const eslintConfig = defineConfig([
+          ...nextVitals,
+          ...nextTs,
+          globalIgnores([
+            ".next/**",
+            "out/**",
+            "build/**",
+            "next-env.d.ts",
+          ]),
+        ]);
+
+        export default eslintConfig;`;
+
+      vi.mocked(readFile).mockResolvedValue(mockConfigFile);
+
+      await configureEslintPlugin({
+        eslintConfigFile: 'eslint.config.mjs',
+        packageManager: mockPackageManager as any,
+        isFlatConfig: true,
+      });
+      const [, content] = vi.mocked(writeFile).mock.calls[0];
+      expect(content).toMatchInlineSnapshot(`
+        "// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
+        import storybook from "eslint-plugin-storybook";
+
+        import { defineConfig, globalIgnores } from "eslint/config";
+        import nextVitals from "eslint-config-next/core-web-vitals";
+        import nextTs from "eslint-config-next/typescript";
+
+        const eslintConfig = defineConfig([...nextVitals, ...nextTs, globalIgnores([
+          ".next/**",
+          "out/**",
+          "build/**",
+          "next-env.d.ts",
+        ]), ...storybook.configs["flat/recommended"]]);
+
+        export default eslintConfig;"
+      `);
+    });
+
+    it('should configure ESLint plugin correctly with direct export default defineConfig', async () => {
+      const mockPackageManager = {
+        getAllDependencies: vi.fn(),
+      } satisfies Partial<JsPackageManager>;
+
+      const mockConfigFile = dedent`import { defineConfig, globalIgnores } from "eslint/config";
+        import nextVitals from "eslint-config-next/core-web-vitals";
+        import nextTs from "eslint-config-next/typescript";
+
+        export default defineConfig([
+          ...nextVitals,
+          ...nextTs,
+          globalIgnores([
+            ".next/**",
+            "out/**",
+            "build/**",
+            "next-env.d.ts",
+          ]),
+        ]);`;
+
+      vi.mocked(readFile).mockResolvedValue(mockConfigFile);
+
+      await configureEslintPlugin({
+        eslintConfigFile: 'eslint.config.mjs',
+        packageManager: mockPackageManager as any,
+        isFlatConfig: true,
+      });
+      const [, content] = vi.mocked(writeFile).mock.calls[0];
+      expect(content).toMatchInlineSnapshot(`
+        "// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
+        import storybook from "eslint-plugin-storybook";
+
+        import { defineConfig, globalIgnores } from "eslint/config";
+        import nextVitals from "eslint-config-next/core-web-vitals";
+        import nextTs from "eslint-config-next/typescript";
+
+        export default defineConfig([...nextVitals, ...nextTs, globalIgnores([
+          ".next/**",
+          "out/**",
+          "build/**",
+          "next-env.d.ts",
+        ]), ...storybook.configs["flat/recommended"]]);"
+      `);
+    });
+
+    it('should just add an import if config uses defineConfig from non-eslint/config source', async () => {
+      const mockPackageManager = {
+        getAllDependencies: vi.fn(),
+      } satisfies Partial<JsPackageManager>;
+
+      const mockConfigFile = dedent`import { defineConfig } from "some-other-config-lib";
+
+        const eslintConfig = defineConfig([
+          { rules: { "no-console": "error" } },
+        ]);
+
+        export default eslintConfig;`;
+
+      vi.mocked(readFile).mockResolvedValue(mockConfigFile);
+
+      await configureEslintPlugin({
+        eslintConfigFile: 'eslint.config.js',
+        packageManager: mockPackageManager as any,
+        isFlatConfig: true,
+      });
+      const [, content] = vi.mocked(writeFile).mock.calls[0];
+      expect(content).toMatchInlineSnapshot(`
+        "// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
+        import storybook from "eslint-plugin-storybook";
+
+        import { defineConfig } from "some-other-config-lib";
+
+        const eslintConfig = defineConfig([
+          { rules: { "no-console": "error" } },
+        ]);
+
+        export default eslintConfig;"
+      `);
+    });
+
     it('should just add an import if config is of custom unknown format', async () => {
       const mockPackageManager = {
         getAllDependencies: vi.fn(),

code/core/src/cli/eslintPlugin.ts

@@ -56,6 +56,7 @@ export const configureFlatConfig = async (code: string) => {
   const ast = babelParse(code);
 
   let tsEslintLocalName = '';
+  let eslintDefineConfigLocalName = '';
   let eslintConfigExpression: any = null;
 
   /**
@@ -77,6 +78,14 @@ export const configureFlatConfig = async (code: string) => {
           tsEslintLocalName = defaultSpecifier.local.name;
         }
       }
+      if (path.node.source.value === 'eslint/config') {
+        const defineConfigSpecifier = path.node.specifiers.find(
+          (s) => t.isImportSpecifier(s) && t.isIdentifier(s.imported, { name: 'defineConfig' })
+        );
+        if (defineConfigSpecifier && t.isImportSpecifier(defineConfigSpecifier)) {
+          eslintDefineConfigLocalName = defineConfigSpecifier.local.name;
+        }
+      }
     },
 
     ExportDefaultDeclaration(path) {
@@ -105,14 +114,46 @@ export const configureFlatConfig = async (code: string) => {
         eslintConfigExpression.arguments.push(storybookConfig);
       }
 
-      // Case 3: export default config (resolve to array)
+      // Case 2b: export default defineConfig([...]) from "eslint/config"
+      if (
+        t.isCallExpression(eslintConfigExpression) &&
+        t.isIdentifier(eslintConfigExpression.callee) &&
+        eslintDefineConfigLocalName &&
+        eslintConfigExpression.callee.name === eslintDefineConfigLocalName &&
+        eslintConfigExpression.arguments.length > 0
+      ) {
+        const firstArg = eslintConfigExpression.arguments[0];
+        if (t.isExpression(firstArg)) {
+          const unwrappedArg = unwrapTSExpression(firstArg);
+          if (unwrappedArg && t.isArrayExpression(unwrappedArg)) {
+            unwrappedArg.elements.push(t.spreadElement(storybookConfig));
+          }
+        }
+      }
+
+      // Case 3: export default config (resolve to array or call expression with array)
       if (t.isIdentifier(eslintConfigExpression)) {
         const binding = path.scope.getBinding(eslintConfigExpression.name);
         if (binding && t.isVariableDeclarator(binding.path.node)) {
           const init = unwrapTSExpression(binding.path.node.init);
 
           if (t.isArrayExpression(init)) {
             init.elements.push(t.spreadElement(storybookConfig));
+          } else if (
+            t.isCallExpression(init) &&
+            init.arguments.length > 0 &&
+            t.isIdentifier(init.callee) &&
+            eslintDefineConfigLocalName &&
+            init.callee.name === eslintDefineConfigLocalName
+          ) {
+            // Handle cases like defineConfig([...]) from "eslint/config"
+            const firstArg = init.arguments[0];
+            if (t.isExpression(firstArg)) {
+              const unwrappedArg = unwrapTSExpression(firstArg);
+              if (unwrappedArg && t.isArrayExpression(unwrappedArg)) {
+                unwrappedArg.elements.push(t.spreadElement(storybookConfig));
+              }
+            }
           }
         }
       }

code/core/src/csf/core-annotations.ts

@@ -11,6 +11,15 @@ import outlineAnnotations, { type OutlineTypes } from '../outline/preview';
 import testAnnotations, { type TestTypes } from '../test/preview';
 import viewportAnnotations, { type ViewportTypes } from '../viewport/preview';
 
+export type { ActionsTypes } from '../actions/preview';
+export type { BackgroundsGlobals, BackgroundTypes } from '../backgrounds/preview';
+export type { ControlsTypes } from '../controls/preview';
+export type { HighlightTypes } from '../highlight/preview';
+export type { MeasureTypes } from '../measure/preview';
+export type { OutlineTypes } from '../outline/preview';
+export type { TestTypes } from '../test/preview';
+export type { ViewportGlobals, ViewportTypes } from '../viewport/preview';
+
 export type CoreTypes = StorybookTypes &
   ActionsTypes &
   BackgroundTypes &