Release: Prerelease 10.0.0-beta.7

.gitignore

@@ -57,7 +57,7 @@ code/bench-results/
 /packs
 code/.nx/cache
 code/.nx/workspace-data
-code/.vite-inspect
+.vite-inspect
 .nx/cache
 .nx/workspace-data
 !**/fixtures/**/yarn.lock

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 9.1.8
+
+- PreactVite: Add `node` entry point - [#32534](https://github.com/storybookjs/storybook/pull/32534), thanks @ndelangen!
+
 ## 9.1.7
 
 - Dependencies: Update `vite-plugin-storybook-nextjs` to 2.0.7 - [#32331](https://github.com/storybookjs/storybook/pull/32331), thanks @k35o!

CHANGELOG.prerelease.md

@@ -1,3 +1,17 @@
+## 10.0.0-beta.7
+
+- Addon A11y: Prevent setting highlights for old results - [#32178](https://github.com/storybookjs/storybook/pull/32178), thanks @ghengeveld!
+- AddonViewport: Stricter types - [#32324](https://github.com/storybookjs/storybook/pull/32324), thanks @hpohlmeyer!
+- CSF: Add Storybook test syntax (Storybook v10) - [#32455](https://github.com/storybookjs/storybook/pull/32455), thanks @yannbf!
+- Controls: Allow primitive values of ReactNode argType - [#31931](https://github.com/storybookjs/storybook/pull/31931), thanks @alexey-kozlenkov!
+- Core: Prevent `BAIL` state from showing in interactions panel when switching stories - [#32172](https://github.com/storybookjs/storybook/pull/32172), thanks @ghengeveld!
+- CoreServer: Fix `Arc can't get every window` - [#32508](https://github.com/storybookjs/storybook/pull/32508), thanks @ndelangen!
+- Dts: Ensure `.tsx` files emit `.d.ts` type files - [#32461](https://github.com/storybookjs/storybook/pull/32461), thanks @mrginglymus!
+- Svelte: Improve support for async components - [#31476](https://github.com/storybookjs/storybook/pull/31476), thanks @JReinhold!
+- SvelteKit: Add support for mocking `$app/state` - [#31369](https://github.com/storybookjs/storybook/pull/31369), thanks @xeho91!
+- SvelteKit: Fix `set_context_after_init` error when experimental async is enabled - [#32513](https://github.com/storybookjs/storybook/pull/32513), thanks @Jakeii!
+- UI: Allow showing or hiding the addon panel - [#32348](https://github.com/storybookjs/storybook/pull/32348), thanks @Sidnioulz!
+
 ## 10.0.0-beta.6
 
 - Core: Add "open in editor" feature - [#32452](https://github.com/storybookjs/storybook/pull/32452), thanks @yannbf!

code/.storybook/main.ts

@@ -136,6 +136,7 @@ const config = defineMain({
   },
   features: {
     developmentModeForBuild: true,
+    experimentalTestSyntax: true,
   },
   staticDirs: [{ from: './bench/bundle-analyzer', to: '/bundle-analyzer' }],
   viteFinal: async (viteConfig, { configType }) => {

code/.storybook/preview.tsx

@@ -216,18 +216,21 @@ const decorators = [
    * This decorator renders the stories side-by-side, stacked or default based on the theme switcher
    * in the toolbar
    */
-  (StoryFn, { globals, playFunction, args, storyGlobals, parameters }) => {
+  (StoryFn, { globals, playFunction, testFunction, args, storyGlobals, parameters }) => {
     let theme = globals.sb_theme;
     let showPlayFnNotice = false;
 
     // this makes the decorator be out of 'phase' with the actually selected theme in the toolbar
     // but this is acceptable, I guess
     // we need to ensure only a single rendering in chromatic
     // a more 'correct' approach would be to set a specific theme global on every story that has a playFunction
-    if (playFunction && args.autoplay !== false && !(theme === 'light' || theme === 'dark')) {
+    if (
+      (testFunction || (playFunction && args.autoplay !== false)) &&
+      !(theme === 'light' || theme === 'dark')
+    ) {
       theme = 'light';
       showPlayFnNotice = true;
-    } else if (isChromatic() && !storyGlobals.sb_theme && !playFunction) {
+    } else if (isChromatic() && !storyGlobals.sb_theme && !playFunction && !testFunction) {
       theme = 'stacked';
     }
 
@@ -282,8 +285,8 @@ const decorators = [
               <>
                 <PlayFnNotice>
                   <span>
-                    Detected play function in Chromatic. Rendering only light theme to avoid
-                    multiple play functions in the same story.
+                    Detected play/test function in Chromatic. Rendering only light theme to avoid
+                    multiple play/test functions in the same story.
                   </span>
                 </PlayFnNotice>
                 <div style={{ marginBottom: 20 }} />

code/addons/a11y/src/components/A11yContext.tsx

@@ -295,11 +295,13 @@ export const A11yContextProvider: FC<PropsWithChildren> = (props) => {
     setStatus(getInitialStatus(manual));
   }, [getInitialStatus, manual]);
 
+  const isInitial = status === 'initial';
+
   useEffect(() => {
     emit(REMOVE_HIGHLIGHT, `${ADDON_ID}/selected`);
     emit(REMOVE_HIGHLIGHT, `${ADDON_ID}/others`);
 
-    if (!highlighted) {
+    if (!highlighted || isInitial) {
       return;
     }
 
@@ -312,84 +314,88 @@ export const A11yContextProvider: FC<PropsWithChildren> = (props) => {
       const target = result?.nodes[Number(number) - 1]?.target;
       return target ? [String(target)] : [];
     });
-    emit(HIGHLIGHT, {
-      id: `${ADDON_ID}/selected`,
-      priority: 1,
-      selectors: selected,
-      styles: {
-        outline: `1px solid color-mix(in srgb, ${colorsByType[tab]}, transparent 30%)`,
-        backgroundColor: 'transparent',
-      },
-      hoverStyles: {
-        outlineWidth: '2px',
-      },
-      focusStyles: {
-        backgroundColor: 'transparent',
-      },
-      menu: results?.[tab as RuleType].map<HighlightMenuItem[]>((result) => {
-        const selectors = result.nodes
-          .flatMap((n) => n.target)
-          .map(String)
-          .filter((e) => selected.includes(e));
-        return [
-          {
-            id: `${tab}.${result.id}:info`,
-            title: getTitleForAxeResult(result),
-            description: getFriendlySummaryForAxeResult(result),
-            selectors,
-          },
-          {
-            id: `${tab}.${result.id}`,
-            iconLeft: 'info',
-            iconRight: 'shareAlt',
-            title: 'Learn how to resolve this violation',
-            clickEvent: EVENTS.SELECT,
-            selectors,
-          },
-        ];
-      }),
-    });
+    if (selected.length) {
+      emit(HIGHLIGHT, {
+        id: `${ADDON_ID}/selected`,
+        priority: 1,
+        selectors: selected,
+        styles: {
+          outline: `1px solid color-mix(in srgb, ${colorsByType[tab]}, transparent 30%)`,
+          backgroundColor: 'transparent',
+        },
+        hoverStyles: {
+          outlineWidth: '2px',
+        },
+        focusStyles: {
+          backgroundColor: 'transparent',
+        },
+        menu: results?.[tab as RuleType].map<HighlightMenuItem[]>((result) => {
+          const selectors = result.nodes
+            .flatMap((n) => n.target)
+            .map(String)
+            .filter((e) => selected.includes(e));
+          return [
+            {
+              id: `${tab}.${result.id}:info`,
+              title: getTitleForAxeResult(result),
+              description: getFriendlySummaryForAxeResult(result),
+              selectors,
+            },
+            {
+              id: `${tab}.${result.id}`,
+              iconLeft: 'info',
+              iconRight: 'shareAlt',
+              title: 'Learn how to resolve this violation',
+              clickEvent: EVENTS.SELECT,
+              selectors,
+            },
+          ];
+        }),
+      });
+    }
 
     const others = results?.[tab as RuleType]
       .flatMap((r) => r.nodes.flatMap((n) => n.target).map(String))
       .filter((e) => ![...unhighlightedSelectors, ...selected].includes(e));
-    emit(HIGHLIGHT, {
-      id: `${ADDON_ID}/others`,
-      selectors: others,
-      styles: {
-        outline: `1px solid color-mix(in srgb, ${colorsByType[tab]}, transparent 30%)`,
-        backgroundColor: `color-mix(in srgb, ${colorsByType[tab]}, transparent 60%)`,
-      },
-      hoverStyles: {
-        outlineWidth: '2px',
-      },
-      focusStyles: {
-        backgroundColor: 'transparent',
-      },
-      menu: results?.[tab as RuleType].map<HighlightMenuItem[]>((result) => {
-        const selectors = result.nodes
-          .flatMap((n) => n.target)
-          .map(String)
-          .filter((e) => !selected.includes(e));
-        return [
-          {
-            id: `${tab}.${result.id}:info`,
-            title: getTitleForAxeResult(result),
-            description: getFriendlySummaryForAxeResult(result),
-            selectors,
-          },
-          {
-            id: `${tab}.${result.id}`,
-            iconLeft: 'info',
-            iconRight: 'shareAlt',
-            title: 'Learn how to resolve this violation',
-            clickEvent: EVENTS.SELECT,
-            selectors,
-          },
-        ];
-      }),
-    });
-  }, [emit, highlighted, results, tab, selectedItems]);
+    if (others?.length) {
+      emit(HIGHLIGHT, {
+        id: `${ADDON_ID}/others`,
+        selectors: others,
+        styles: {
+          outline: `1px solid color-mix(in srgb, ${colorsByType[tab]}, transparent 30%)`,
+          backgroundColor: `color-mix(in srgb, ${colorsByType[tab]}, transparent 60%)`,
+        },
+        hoverStyles: {
+          outlineWidth: '2px',
+        },
+        focusStyles: {
+          backgroundColor: 'transparent',
+        },
+        menu: results?.[tab as RuleType].map<HighlightMenuItem[]>((result) => {
+          const selectors = result.nodes
+            .flatMap((n) => n.target)
+            .map(String)
+            .filter((e) => !selected.includes(e));
+          return [
+            {
+              id: `${tab}.${result.id}:info`,
+              title: getTitleForAxeResult(result),
+              description: getFriendlySummaryForAxeResult(result),
+              selectors,
+            },
+            {
+              id: `${tab}.${result.id}`,
+              iconLeft: 'info',
+              iconRight: 'shareAlt',
+              title: 'Learn how to resolve this violation',
+              clickEvent: EVENTS.SELECT,
+              selectors,
+            },
+          ];
+        }),
+      });
+    }
+  }, [isInitial, emit, highlighted, results, tab, selectedItems]);
 
   const discrepancy: TestDiscrepancy = useMemo(() => {
     if (!currentStoryA11yStatusValue) {

code/addons/docs/src/blocks/blocks/external/ExternalPreview.ts

@@ -71,9 +71,11 @@ export class ExternalPreview<TRenderer extends Renderer = Renderer> extends Prev
         title,
         name,
         type: 'story',
+        subtype: 'story',
       };
     });
 
+    // TODO: We probably need to do something here about story tests
     this.onStoriesChanged({ storyIndex: this.storyIndex });
 
     return csfFile;

code/addons/docs/src/preview.ts

@@ -1,12 +1,5 @@
 import type { PreparedStory } from 'storybook/internal/types';
 
-import * as tocbot from 'tocbot';
-
-if (!globalThis.__STORYBOOK_UNSAFE_TOCBOT__) {
-  // Users that load dynamic content need to have a way to refresh the TOC, so we expose the tocbot instance
-  globalThis.__STORYBOOK_UNSAFE_TOCBOT__ = tocbot.default ?? tocbot;
-}
-
 const excludeTags = Object.entries(globalThis.TAGS_OPTIONS ?? {}).reduce(
   (acc, entry) => {
     const [tag, option] = entry;

code/addons/docs/src/typings.d.ts

@@ -7,7 +7,6 @@ declare var __DOCS_CONTEXT__: any;
 declare var PREVIEW_URL: any;
 declare var LOGLEVEL: 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'silent' | undefined;
 declare var TAGS_OPTIONS: import('storybook/internal/types').TagsOptions;
-declare var __STORYBOOK_UNSAFE_TOCBOT__: typeof import('tocbot').default;
 
 declare module '*.md';
 declare module '*.md?raw';

code/addons/vitest/src/components/TestProviderRender.stories.tsx

@@ -310,6 +310,7 @@ export const InSidebarContextMenu: Story = {
     entry: {
       id: 'story-id-1',
       type: 'story',
+      subtype: 'story',
       name: 'Example Story',
       tags: [],
       title: 'Example Story',

code/addons/vitest/src/components/TestProviderRender.tsx

@@ -242,15 +242,19 @@ export const TestProviderRender: FC<TestProviderRenderProps> = ({
               <IconButton
                 aria-label="Start test run"
                 size="medium"
-                onClick={() =>
+                onClick={() => {
+                  let storyIds;
+                  if (entry) {
+                    // Don't send underlying child test ids when running on a story
+                    // Vitest Manager already handles running the underlying tests
+                    storyIds =
+                      entry.type === 'story' ? [entry.id] : api.findAllLeafStoryIds(entry.id);
+                  }
                   store.send({
                     type: 'TRIGGER_RUN',
-                    payload: {
-                      storyIds: entry ? api.findAllLeafStoryIds(entry.id) : undefined,
-                      triggeredBy: entry ? entry.type : 'global',
-                    },
-                  })
-                }
+                    payload: { storyIds, triggeredBy: entry?.type ?? 'global' },
+                  });
+                }}
               >
                 <PlayHollowIcon />
               </IconButton>