Merge pull request #30109 from storybookjs/version-non-patch-from-8.5…

….0-beta.3 Release: Prerelease 8.5.0-beta.4
storybookjs · Dec 20, 2024 · d8e7b23 · d8e7b23
2 parents df37d08 + 5932a18
commit d8e7b23
Show file tree

Hide file tree

Showing 35 changed files with 248 additions and 99 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -836,27 +836,27 @@ workflows:
           requires:
             - unit-tests
       - create-sandboxes:
-          parallelism: 13
+          parallelism: 14
           requires:
             - build
       - build-sandboxes:
-          parallelism: 13
+          parallelism: 14
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 10
+          parallelism: 11
           requires:
             - build-sandboxes
       - e2e-production:
-          parallelism: 8
+          parallelism: 9
           requires:
             - build-sandboxes
       - e2e-dev:
           parallelism: 1
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 8
+          parallelism: 9
           requires:
             - build-sandboxes
       - vitest-integration:
@@ -912,27 +912,27 @@ workflows:
           requires:
             - unit-tests
       - create-sandboxes:
-          parallelism: 19
+          parallelism: 20
           requires:
             - build
       - build-sandboxes:
-          parallelism: 19
+          parallelism: 20
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 16
+          parallelism: 17
           requires:
             - build-sandboxes
       - e2e-production:
-          parallelism: 14
+          parallelism: 15
           requires:
             - build-sandboxes
       - e2e-dev:
           parallelism: 1
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 14
+          parallelism: 15
           requires:
             - build-sandboxes
       - vitest-integration:
@@ -986,30 +986,30 @@ workflows:
           requires:
             - build
       - create-sandboxes:
-          parallelism: 36
+          parallelism: 37
           requires:
             - build
       # - smoke-test-sandboxes: # disabled for now
       #     requires:
       #       - create-sandboxes
       - build-sandboxes:
-          parallelism: 36
+          parallelism: 37
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 33
+          parallelism: 34
           requires:
             - build-sandboxes
       - e2e-production:
-          parallelism: 31
+          parallelism: 32
           requires:
             - build-sandboxes
       - e2e-dev:
           parallelism: 1
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 31
+          parallelism: 32
           requires:
             - build-sandboxes
       - vitest-integration:

diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md
@@ -1,3 +1,10 @@
+## 8.5.0-beta.4
+
+- Addon Themes: Deprecate useThemeParameters - [#30111](https://github.com/storybookjs/storybook/pull/30111), thanks @yannbf!
+- Build: Downgrade to esbuild 0.24.0 - [#30116](https://github.com/storybookjs/storybook/pull/30116), thanks @yannbf!
+- CLI: Re-Add Nuxt support - [#28607](https://github.com/storybookjs/storybook/pull/28607), thanks @valentinpalkovic!
+- Core: Prevent infinite rerendering caused by comparison by reference - [#30081](https://github.com/storybookjs/storybook/pull/30081), thanks @ghengeveld!
+
 ## 8.5.0-beta.3
 
 - Addon A11y: Fix skipped status handling in Testing Module - [#30077](https://github.com/storybookjs/storybook/pull/30077), thanks @valentinpalkovic!

diff --git a/code/addons/themes/docs/api.md b/code/addons/themes/docs/api.md
@@ -109,6 +109,9 @@ export const myCustomDecorator =
 
 ### `useThemeParameters`
 
+(⛔️ **Deprecated**)
+_Do not use this hook anymore. Access the theme directly via the context instead e.g. `context.parameters.themes`_
+
 Returns the theme parameters for this addon.
 
 ```js
@@ -152,14 +155,14 @@ Let's use Vuetify as an example. Vuetify uses it's own global state to know whic
 import { DecoratorHelpers } from '@storybook/addon-themes';
 import { useTheme } from 'vuetify';
 
-const { initializeThemeState, pluckThemeFromContext, useThemeParameters } = DecoratorHelpers;
+const { initializeThemeState, pluckThemeFromContext } = DecoratorHelpers;
 
 export const withVuetifyTheme = ({ themes, defaultTheme }) => {
   initializeThemeState(Object.keys(themes), defaultTheme);
 
   return (story, context) => {
     const selectedTheme = pluckThemeFromContext(context);
-    const { themeOverride } = useThemeParameters();
+    const { themeOverride } = context.parameters.themes ?? {};
 
     const selected = themeOverride || selectedTheme || defaultTheme;
 

diff --git a/code/addons/themes/src/decorators/class-name.decorator.tsx b/code/addons/themes/src/decorators/class-name.decorator.tsx
@@ -1,7 +1,8 @@
 import { useEffect } from 'storybook/internal/preview-api';
 import type { DecoratorFunction, Renderer } from 'storybook/internal/types';
 
-import { initializeThemeState, pluckThemeFromContext, useThemeParameters } from './helpers';
+import { PARAM_KEY } from '../constants';
+import { initializeThemeState, pluckThemeFromContext } from './helpers';
 
 export interface ClassNameStrategyConfiguration {
   themes: Record<string, string>;
@@ -22,7 +23,7 @@ export const withThemeByClassName = <TRenderer extends Renderer = Renderer>({
   initializeThemeState(Object.keys(themes), defaultTheme);
 
   return (storyFn, context) => {
-    const { themeOverride } = useThemeParameters(context);
+    const { themeOverride } = context.parameters[PARAM_KEY] ?? {};
     const selected = pluckThemeFromContext(context);
 
     useEffect(() => {

diff --git a/code/addons/themes/src/decorators/data-attribute.decorator.tsx b/code/addons/themes/src/decorators/data-attribute.decorator.tsx
@@ -1,7 +1,8 @@
 import { useEffect } from 'storybook/internal/preview-api';
 import type { DecoratorFunction, Renderer } from 'storybook/internal/types';
 
-import { initializeThemeState, pluckThemeFromContext, useThemeParameters } from './helpers';
+import { PARAM_KEY } from '../constants';
+import { initializeThemeState, pluckThemeFromContext } from './helpers';
 
 export interface DataAttributeStrategyConfiguration {
   themes: Record<string, string>;
@@ -22,7 +23,7 @@ export const withThemeByDataAttribute = <TRenderer extends Renderer = any>({
 }: DataAttributeStrategyConfiguration): DecoratorFunction<TRenderer> => {
   initializeThemeState(Object.keys(themes), defaultTheme);
   return (storyFn, context) => {
-    const { themeOverride } = useThemeParameters(context);
+    const { themeOverride } = context.parameters[PARAM_KEY] ?? {};
     const selected = pluckThemeFromContext(context);
 
     useEffect(() => {

diff --git a/code/addons/themes/src/decorators/helpers.ts b/code/addons/themes/src/decorators/helpers.ts
@@ -1,6 +1,9 @@
-import { addons } from 'storybook/internal/preview-api';
+import { deprecate } from 'storybook/internal/client-logger';
+import { addons, useParameter } from 'storybook/internal/preview-api';
 import type { StoryContext } from 'storybook/internal/types';
 
+import dedent from 'ts-dedent';
+
 import type { ThemeParameters } from '../constants';
 import { DEFAULT_THEME_PARAMETERS, GLOBAL_KEY, PARAM_KEY, THEMING_EVENTS } from '../constants';
 
@@ -12,8 +15,18 @@ export function pluckThemeFromContext({ globals }: StoryContext): string {
   return globals[GLOBAL_KEY] || '';
 }
 
-export function useThemeParameters(context: StoryContext): ThemeParameters {
-  return context.parameters[PARAM_KEY] || DEFAULT_THEME_PARAMETERS;
+export function useThemeParameters(context?: StoryContext): ThemeParameters {
+  deprecate(
+    dedent`The useThemeParameters function is deprecated. Please access parameters via the context directly instead e.g.
+    - const { themeOverride } = context.parameters.themes ?? {};
+    `
+  );
+
+  if (!context) {
+    return useParameter<ThemeParameters>(PARAM_KEY, DEFAULT_THEME_PARAMETERS) as ThemeParameters;
+  }
+
+  return context.parameters[PARAM_KEY] ?? DEFAULT_THEME_PARAMETERS;
 }
 
 export function initializeThemeState(themeNames: string[], defaultTheme: string) {

diff --git a/code/addons/themes/src/decorators/provider.decorator.tsx b/code/addons/themes/src/decorators/provider.decorator.tsx
@@ -4,7 +4,8 @@ import React from 'react';
 import { useMemo } from 'storybook/internal/preview-api';
 import type { DecoratorFunction, Renderer } from 'storybook/internal/types';
 
-import { initializeThemeState, pluckThemeFromContext, useThemeParameters } from './helpers';
+import { PARAM_KEY } from '../constants';
+import { initializeThemeState, pluckThemeFromContext } from './helpers';
 
 type Theme = Record<string, any>;
 type ThemeMap = Record<string, Theme>;
@@ -32,7 +33,8 @@ export const withThemeFromJSXProvider = <TRenderer extends Renderer = any>({
 
   // eslint-disable-next-line react/display-name
   return (storyFn, context) => {
-    const { themeOverride } = useThemeParameters(context);
+    // eslint-disable-next-line react/destructuring-assignment
+    const { themeOverride } = context.parameters[PARAM_KEY] ?? {};
     const selected = pluckThemeFromContext(context);
 
     const theme = useMemo(() => {

diff --git a/code/core/package.json b/code/core/package.json
@@ -277,7 +277,7 @@
     "@storybook/csf": "0.1.12",
     "better-opn": "^3.0.2",
     "browser-assert": "^1.2.1",
-    "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0",
+    "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || 0.24.0",
     "esbuild-register": "^3.5.0",
     "jsdoc-type-pratt-parser": "^4.0.0",
     "process": "^0.11.10",

diff --git a/code/core/scripts/helpers/sourcefiles.ts b/code/core/scripts/helpers/sourcefiles.ts
@@ -2,6 +2,7 @@ import { readdir, writeFile } from 'node:fs/promises';
 import { join } from 'node:path';
 
 import { GlobalRegistrator } from '@happy-dom/global-registrator';
+import { isNotNil } from 'es-toolkit';
 
 import { dedent, esbuild, getWorkspace, prettier } from '../../../../scripts/prepare/tools';
 import { temporaryFile } from '../../src/common/utils/cli';
@@ -26,7 +27,7 @@ export const generateSourceFiles = async () => {
 async function generateVersionsFile(prettierConfig: prettier.Options | null): Promise<void> {
   const location = join(__dirname, '..', '..', 'src', 'common', 'versions.ts');
 
-  const workspace = await getWorkspace();
+  const workspace = (await getWorkspace()).filter(isNotNil);
 
   const versions = JSON.stringify(
     workspace
@@ -55,7 +56,7 @@ async function generateVersionsFile(prettierConfig: prettier.Options | null): Pr
 }
 
 async function generateFrameworksFile(prettierConfig: prettier.Options | null): Promise<void> {
-  const thirdPartyFrameworks = ['qwik', 'solid', 'react-rsbuild', 'vue3-rsbuild'];
+  const thirdPartyFrameworks = ['qwik', 'solid', 'nuxt', 'react-rsbuild', 'vue3-rsbuild'];
   const location = join(__dirname, '..', '..', 'src', 'types', 'modules', 'frameworks.ts');
   const frameworksDirectory = join(__dirname, '..', '..', '..', 'frameworks');
 

diff --git a/code/core/src/cli/detect.test.ts b/code/core/src/cli/detect.test.ts
@@ -43,6 +43,28 @@ const MOCK_FRAMEWORK_FILES: {
       },
     },
   },
+  {
+    name: ProjectType.NUXT,
+    files: {
+      'package.json': {
+        dependencies: {
+          nuxt: '^3.11.2',
+        },
+      },
+    },
+  },
+  {
+    name: ProjectType.NUXT,
+    files: {
+      'package.json': {
+        dependencies: {
+          // Nuxt projects may have Vue 3 as an explicit dependency
+          nuxt: '^3.11.2',
+          vue: '^3.0.0',
+        },
+      },
+    },
+  },
   {
     name: ProjectType.VUE3,
     files: {
@@ -435,16 +457,6 @@ describe('Detect', () => {
       expect(result).toBe(ProjectType.UNDETECTED);
     });
 
-    // TODO(blaine): Remove once Nuxt3 is supported
-    it(`UNSUPPORTED for Nuxt framework above version 3.0.0`, () => {
-      const result = detectFrameworkPreset({
-        dependencies: {
-          nuxt: '3.0.0',
-        },
-      });
-      expect(result).toBe(ProjectType.UNSUPPORTED);
-    });
-
     // TODO: The mocking in this test causes tests after it to fail
     it('REACT_SCRIPTS for custom react scripts config', () => {
       const forkedReactScriptsConfig = {

diff --git a/code/core/src/cli/detect.ts b/code/core/src/cli/detect.ts
@@ -123,7 +123,11 @@ export async function detectBuilder(packageManager: JsPackageManager, projectTyp
   }
 
   // REWORK
-  if (webpackConfig || (dependencies.webpack && dependencies.vite !== undefined)) {
+  if (
+    webpackConfig ||
+    ((dependencies.webpack || dependencies['@nuxt/webpack-builder']) &&
+      dependencies.vite !== undefined)
+  ) {
     commandLog('Detected webpack project. Setting builder to webpack')();
     return CoreBuilder.Webpack5;
   }
@@ -138,6 +142,8 @@ export async function detectBuilder(packageManager: JsPackageManager, projectTyp
     case ProjectType.NEXTJS:
     case ProjectType.EMBER:
       return CoreBuilder.Webpack5;
+    case ProjectType.NUXT:
+      return CoreBuilder.Vite;
     default:
       const { builder } = await prompts(
         {
@@ -207,6 +213,13 @@ export async function detectLanguage(packageManager: JsPackageManager) {
     } else if (semver.lt(typescriptVersion, '3.8.0')) {
       logger.warn('Detected TypeScript < 3.8, populating with JavaScript examples');
     }
+  } else {
+    // No direct dependency on TypeScript, but could be a transitive dependency
+    // This is eg the case for Nuxt projects, which support a recent version of TypeScript
+    // Check for tsconfig.json (https://www.typescriptlang.org/docs/handbook/tsconfig-json.html)
+    if (existsSync('tsconfig.json')) {
+      language = SupportedLanguage.TYPESCRIPT_4_9;
+    }
   }
 
   return language;

diff --git a/code/core/src/cli/dirs.ts b/code/core/src/cli/dirs.ts
@@ -40,7 +40,7 @@ export async function getRendererDir(
 ) {
   const externalFramework = externalFrameworks.find((framework) => framework.name === renderer);
   const frameworkPackageName =
-    externalFramework?.renderer || externalFramework?.packageName || `@storybook/${renderer}`;
+    externalFramework?.packageName || externalFramework?.renderer || `@storybook/${renderer}`;
 
   const packageJsonPath = join(frameworkPackageName, 'package.json');
 

diff --git a/code/core/src/cli/helpers.ts b/code/core/src/cli/helpers.ts
@@ -153,6 +153,7 @@ export const frameworkToDefaultBuilder: Record<
   'html-vite': CoreBuilder.Vite,
   'html-webpack5': CoreBuilder.Webpack5,
   nextjs: CoreBuilder.Webpack5,
+  nuxt: CoreBuilder.Vite,
   'experimental-nextjs-vite': CoreBuilder.Vite,
   'preact-vite': CoreBuilder.Vite,
   'preact-webpack5': CoreBuilder.Webpack5,