Release: Prerelease 8.6.0-beta.4

CHANGELOG.md

@@ -1,3 +1,9 @@
+## 8.5.7
+
+- Tags: Add story/meta usage telemetry - [#30555](https://github.com/storybookjs/storybook/pull/30555), thanks @shilman!
+- Telemetry: Don't count example stories towards CSF feature stats - [#30561](https://github.com/storybookjs/storybook/pull/30561), thanks @shilman!
+- Vite: Fix not stripping all HMR boundaries - [#30562](https://github.com/storybookjs/storybook/pull/30562), thanks @JReinhold!
+
 ## 8.5.6
 
 - Builder-Vite: Fix defaulting to allowing all hosts - [#30523](https://github.com/storybookjs/storybook/pull/30523), thanks @JReinhold!

CHANGELOG.prerelease.md

@@ -1,3 +1,9 @@
+## 8.6.0-beta.4
+
+- Addon-Test: Add telemetry data for Focused Tests - [#30568](https://github.com/storybookjs/storybook/pull/30568), thanks @JReinhold!
+- Core: Allow empty render functions in CSF factories - [#30565](https://github.com/storybookjs/storybook/pull/30565), thanks @kasperpeulen!
+- Core: Fix undeclared internal dependencies - [#30566](https://github.com/storybookjs/storybook/pull/30566), thanks @kasperpeulen!
+
 ## 8.6.0-beta.3
 
 - Addon-A11y: Fix preset loading when loaded via getAbsolutePath - [#30563](https://github.com/storybookjs/storybook/pull/30563), thanks @valentinpalkovic!

code/addons/test/src/node/test-manager.ts

@@ -17,6 +17,8 @@ import { VitestManager } from './vitest-manager';
 export class TestManager {
   vitestManager: VitestManager;
 
+  selectedStoryCountForLastRun = 0;
+
   constructor(
     private channel: Channel,
     public store: experimental_UniversalStore<StoreState>,
@@ -96,6 +98,8 @@ export class TestManager {
         await this.vitestManager.vitestRestartPromise;
       }
 
+      this.selectedStoryCountForLastRun = payload.storyIds?.length ?? 0;
+
       await this.vitestManager.runTests(payload);
 
       if (temporarilyDisableCoverage) {
@@ -120,7 +124,20 @@ export class TestManager {
   }
 
   async sendProgressReport(payload: TestingModuleProgressReportPayload) {
-    this.channel.emit(TESTING_MODULE_PROGRESS_REPORT, payload);
+    this.channel.emit(TESTING_MODULE_PROGRESS_REPORT, {
+      ...payload,
+      details: { ...payload.details, selectedStoryCount: this.selectedStoryCountForLastRun },
+    });
+
+    const status = 'status' in payload ? payload.status : undefined;
+    const progress = 'progress' in payload ? payload.progress : undefined;
+    if (
+      ((status === 'success' || status === 'cancelled') && progress?.finishedAt) ||
+      status === 'failed'
+    ) {
+      // reset the count when a test run is fully finished
+      this.selectedStoryCountForLastRun = 0;
+    }
   }
 
   async reportFatalError(message: string, error: Error | any) {

code/addons/test/src/preset.ts

@@ -146,6 +146,7 @@ export const experimental_serverChannel = async (channel: Channel, options: Opti
             numTotalTests: progress?.numTotalTests,
             numFailedTests: progress?.numFailedTests,
             numPassedTests: progress?.numPassedTests,
+            numSelectedStories: payload.details?.selectedStoryCount ?? 0,
           });
         }
 
@@ -157,6 +158,7 @@ export const experimental_serverChannel = async (channel: Channel, options: Opti
             ...(options.enableCrashReports && {
               error: error && sanitizeError(error),
             }),
+            numSelectedStories: payload.details?.selectedStoryCount ?? 0,
           });
         }
       }

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

@@ -46,7 +46,7 @@ export interface Meta<TRenderer extends Renderer, TArgs extends Args = Args> {
   composed: NormalizedComponentAnnotations<TRenderer>;
   preview: Preview<TRenderer>;
 
-  story(input: ComponentAnnotations<TRenderer, TArgs>): Story<TRenderer, TArgs>;
+  story(input: StoryAnnotations<TRenderer, TArgs>): Story<TRenderer, TArgs>;
 }
 
 export function isMeta(input: unknown): input is Meta<Renderer> {

code/core/src/types/modules/csf.ts

@@ -1,7 +1,12 @@
 import type { ViewMode as ViewModeBase } from '@storybook/core/csf';
+import type { Renderer as CSFRenderer } from '@storybook/core/csf';
 
 import type { Addon_OptionsParameter } from './addons';
 
+// Fix https://github.com/storybookjs/storybook/issues/30540
+// Can be removed once @storybook/core and storybook are merged in 9.0
+export interface Renderer extends CSFRenderer {}
+
 export type {
   AfterEach,
   AnnotatedStoryFn,
@@ -35,7 +40,6 @@ export type {
   PlayFunction,
   PlayFunctionContext,
   ProjectAnnotations as BaseProjectAnnotations,
-  Renderer,
   SBArrayType,
   SBEnumType,
   SBIntersectionType,

code/lib/create-storybook/src/initiate.ts

@@ -294,16 +294,17 @@ export async function doInitiate(options: CommandOptions): Promise<
 
   const isInteractive = process.stdout.isTTY && !process.env.CI;
 
-  const selectableFeatures: Record<GeneratorFeature, string> = {
-    docs: 'Documentation',
-    test: 'Testing',
+  const selectableFeatures: Record<GeneratorFeature, { name: string; description: string }> = {
+    docs: { name: 'Documentation', description: 'MDX, auto-generated component docs' },
+    test: { name: 'Testing', description: 'Fast browser-based component tests, watch mode' },
   };
+
   let selectedFeatures = new Set<GeneratorFeature>();
   selectedFeatures.toString = () =>
     selectedFeatures.size === 0
       ? 'none'
       : Array.from(selectedFeatures)
-          .map((f) => selectableFeatures[f])
+          .map((f) => selectableFeatures[f].name)
           .join(', ');
 
   if (options.features?.length > 0) {
@@ -326,9 +327,9 @@ export async function doInitiate(options: CommandOptions): Promise<
     const out = await prompts({
       type: 'multiselect',
       name: 'features',
-      message: `What are you using Storybook for?`,
-      choices: Object.entries(selectableFeatures).map(([value, title]) => ({
-        title,
+      message: `What do you want to use Storybook for?`,
+      choices: Object.entries(selectableFeatures).map(([value, { name, description }]) => ({
+        title: `${name}: ${description}`,
         value,
         selected: true,
       })),

code/package.json

@@ -303,5 +303,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "8.6.0-beta.4"
 }

code/renderers/react/src/csf-factories.test.tsx

@@ -65,8 +65,8 @@ describe('Args can be provided in multiple ways', () => {
   it('❌ The combined shape of meta args and story args must match the required args.', () => {
     {
       const meta = preview.meta({ component: Button });
+      // @ts-expect-error disabled not provided ❌
       const Basic = meta.story({
-        // @ts-expect-error disabled not provided ❌
         args: { label: 'good' },
       });
     }
@@ -80,12 +80,37 @@ describe('Args can be provided in multiple ways', () => {
     }
     {
       const meta = preview.meta({ component: Button });
+      // @ts-expect-error disabled not provided ❌
       const Basic = meta.story({
-        // @ts-expect-error disabled not provided ❌
         args: { label: 'good' },
       });
     }
   });
+
+  it("✅ Required args don't need to be provided when the user uses an empty render", () => {
+    const meta = preview.meta({
+      component: Button,
+      args: { label: 'good' },
+    });
+    const Basic = meta.story({
+      args: {},
+      render: () => <div>Hello world</div>,
+    });
+  });
+
+  it('❌ Required args need to be provided when the user uses a non-empty render', () => {
+    const meta = preview.meta({
+      component: Button,
+      args: { label: 'good' },
+    });
+    // @ts-expect-error disabled not provided ❌
+    const Basic = meta.story({
+      args: {
+        label: 'good',
+      },
+      render: (args) => <div>Hello world</div>,
+    });
+  });
 });
 
 it('✅ Void functions are not changed', () => {

code/renderers/react/src/preview.tsx

@@ -55,6 +55,14 @@ interface ReactMeta<
   Context extends { args: Args },
   MetaInput extends ComponentAnnotations<ReactRenderer>,
 > extends Meta<ReactRenderer, Context['args']> {
+  story<
+    TInput extends StoryAnnotations<ReactRenderer, Context['args']> & {
+      render: () => ReactRenderer['storyResult'];
+    },
+  >(
+    story: TInput
+  ): ReactStory;
+
   story<
     const TInput extends Simplify<
       StoryAnnotations<

docs/_snippets/svelte-csf-story-migration.md

@@ -12,7 +12,7 @@
 ```
 
 ```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="After"
-<script context>
+<script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import MyComponent from './MyComponent.svelte';

docs/versions/next.json

@@ -1 +1 @@
-{"version":"8.6.0-beta.3","info":{"plain":"- Addon-A11y: Fix preset loading when loaded via getAbsolutePath - [#30563](https://github.com/storybookjs/storybook/pull/30563), thanks @valentinpalkovic!\n- Essentials: Fix `addon-essentials` not working when used with `getAbsolutePath` - [#30557](https://github.com/storybookjs/storybook/pull/30557), thanks @JReinhold!\n- Vite: Fix not stripping all HMR boundaries - [#30562](https://github.com/storybookjs/storybook/pull/30562), thanks @JReinhold!"}}
+{"version":"8.6.0-beta.4","info":{"plain":"- Addon-Test: Add telemetry data for Focused Tests - [#30568](https://github.com/storybookjs/storybook/pull/30568), thanks @JReinhold!\n- Core: Allow empty render functions in CSF factories - [#30565](https://github.com/storybookjs/storybook/pull/30565), thanks @kasperpeulen!\n- Core: Fix undeclared internal dependencies - [#30566](https://github.com/storybookjs/storybook/pull/30566), thanks @kasperpeulen!"}}