Merge branch 'next' into norbert/cli-with-ink

code/builders/builder-vite/src/codegen-importfn-script.test.ts

@@ -1,13 +1,14 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
 
 import { toImportFn } from './codegen-importfn-script';
 
 describe('toImportFn', () => {
   it('should correctly map story paths to import functions for absolute paths on Linux', async () => {
-    const root = '/absolute/path';
+    vi.spyOn(process, 'cwd').mockReturnValue('/absolute/path');
+
     const stories = ['/absolute/path/to/story1.js', '/absolute/path/to/story2.js'];
 
-    const result = await toImportFn(root, stories);
+    const result = await toImportFn(stories);
 
     expect(result).toMatchInlineSnapshot(`
       "const importers = {
@@ -22,10 +23,10 @@ describe('toImportFn', () => {
   });
 
   it('should correctly map story paths to import functions for absolute paths on Windows', async () => {
-    const root = 'C:\\absolute\\path';
+    vi.spyOn(process, 'cwd').mockReturnValue('C:\\absolute\\path');
     const stories = ['C:\\absolute\\path\\to\\story1.js', 'C:\\absolute\\path\\to\\story2.js'];
 
-    const result = await toImportFn(root, stories);
+    const result = await toImportFn(stories);
 
     expect(result).toMatchInlineSnapshot(`
       "const importers = {
@@ -43,7 +44,7 @@ describe('toImportFn', () => {
     const root = '/absolute/path';
     const stories: string[] = [];
 
-    const result = await toImportFn(root, stories);
+    const result = await toImportFn(stories);
 
     expect(result).toMatchInlineSnapshot(`
       "const importers = {};

code/builders/builder-vite/src/codegen-importfn-script.ts

@@ -29,9 +29,9 @@ function toImportPath(relativePath: string) {
  *
  * @param stories An array of absolute story paths.
  */
-export async function toImportFn(root: string, stories: string[]) {
+export async function toImportFn(stories: string[]) {
   const objectEntries = stories.map((file) => {
-    const relativePath = relative(root, file);
+    const relativePath = relative(process.cwd(), file);
 
     return [toImportPath(relativePath), genDynamicImport(normalize(file))] as [string, string];
   });
@@ -51,5 +51,5 @@ export async function generateImportFnScriptCode(options: Options): Promise<stri
 
   // We can then call toImportFn to create a function that can be used to load each story dynamically.
   // eslint-disable-next-line @typescript-eslint/return-await
-  return await toImportFn(options.projectRoot || process.cwd(), stories);
+  return await toImportFn(stories);
 }

code/builders/builder-vite/src/vite-config.ts

@@ -53,18 +53,18 @@ export async function commonConfig(
 
   const { viteConfigPath } = await getBuilderOptions<BuilderOptions>(options);
 
-  options.projectRoot = options.projectRoot || resolve(options.configDir, '..');
+  const projectRoot = resolve(options.configDir, '..');
 
   // I destructure away the `build` property from the user's config object
   // I do this because I can contain config that breaks storybook, such as we had in a lit project.
   // If the user needs to configure the `build` they need to do so in the viteFinal function in main.js.
   const { config: { build: buildProperty = undefined, ...userConfig } = {} } =
-    (await loadConfigFromFile(configEnv, viteConfigPath, options.projectRoot)) ?? {};
+    (await loadConfigFromFile(configEnv, viteConfigPath, projectRoot)) ?? {};
 
   const sbConfig: InlineConfig = {
     configFile: false,
     cacheDir: resolvePathInStorybookCache('sb-vite', options.cacheKey),
-    root: options.projectRoot,
+    root: projectRoot,
     // Allow storybook deployed as subfolder.  See https://github.com/storybookjs/builder-vite/issues/238
     base: './',
     plugins: await pluginConfig(options),

code/core/src/types/modules/core-common.ts

@@ -195,7 +195,6 @@ export interface BuilderOptions {
   ignorePreview?: boolean;
   cache?: FileSystemCache;
   configDir: string;
-  projectRoot?: string;
   docsMode?: boolean;
   features?: StorybookConfigRaw['features'];
   versionCheck?: VersionCheck;

code/renderers/react/src/__test__/portable-stories.test.tsx

@@ -67,7 +67,7 @@ describe('renders', () => {
   });
 
   it('should throw error when rendering a component with a render error', async () => {
-    await expect(() => ThrowsError.run()).rejects.toThrowError('Error in render');
+    await expect(ThrowsError.run()).rejects.toThrowError('Error in render');
   });
 
   it('should render component mounted in play function', async () => {
@@ -77,8 +77,8 @@ describe('renders', () => {
     expect(screen.getByTestId('loaded-data').textContent).toEqual('loaded data');
   });
 
-  it('should throw an error in play function', () => {
-    expect(() => MountInPlayFunctionThrow.run()).rejects.toThrowError('Error thrown in play');
+  it('should throw an error in play function', async () => {
+    await expect(MountInPlayFunctionThrow.run()).rejects.toThrowError('Error thrown in play');
   });
 
   it('should call and compose loaders data', async () => {

code/renderers/react/src/renderToCanvas.tsx

@@ -45,6 +45,23 @@ class ErrorBoundary extends ReactComponent<{
 
 const Wrapper = FRAMEWORK_OPTIONS?.strictMode ? StrictMode : Fragment;
 
+const actQueue: (() => Promise<void>)[] = [];
+let isActing = false;
+
+const processActQueue = async () => {
+  if (isActing || actQueue.length === 0) {
+    return;
+  }
+
+  isActing = true;
+  const actTask = actQueue.shift();
+  if (actTask) {
+    await actTask();
+  }
+  isActing = false;
+  processActQueue();
+};
+
 export async function renderToCanvas(
   {
     storyContext,
@@ -81,8 +98,18 @@ export async function renderToCanvas(
     unmountElement(canvasElement);
   }
 
-  await act(async () => {
-    await renderElement(element, canvasElement, storyContext?.parameters?.react?.rootOptions);
+  await new Promise<void>(async (resolve, reject) => {
+    actQueue.push(async () => {
+      try {
+        await act(async () => {
+          await renderElement(element, canvasElement, storyContext?.parameters?.react?.rootOptions);
+        });
+        resolve();
+      } catch (e) {
+        reject(e);
+      }
+    });
+    processActQueue();
   });
 
   return async () => {

docs/_snippets/addon-a11y-meta-tag.md

@@ -5,17 +5,17 @@ import { Button } from './button.component';
 
 const meta: Meta<Button> = {
   component: Button,
-  // 👇 Re-apply the a11ytest tag for this component's stories
-  tags: ['a11ytest'],
+  // 👇 Re-apply the a11y-test tag for this component's stories
+  tags: ['a11y-test'],
 };
 
 export default meta;
 ```
 
 ```js filename="Button.stories.js" renderer="html" language="js"
 export default {
-  // 👇 Re-apply the a11ytest tag for this component's stories
-  tags: ['a11ytest'],
+  // 👇 Re-apply the a11y-test tag for this component's stories
+  tags: ['a11y-test'],
 };
 ```
 
@@ -24,8 +24,8 @@ import { Button } from './Button';
 
 export default {
   component: Button,
-  // 👇 Re-apply the a11ytest tag for this component's stories
-  tags: ['a11ytest'],
+  // 👇 Re-apply the a11y-test tag for this component's stories
+  tags: ['a11y-test'],
 };
 ```
 
@@ -37,8 +37,8 @@ import { Button } from './Button';
 
 const meta = {
   component: Button,
-  // 👇 Re-apply the a11ytest tag for this component's stories
-  tags: ['a11ytest'],
+  // 👇 Re-apply the a11y-test tag for this component's stories
+  tags: ['a11y-test'],
 } satisfies Meta<typeof Button>;
 
 export default meta;
@@ -52,8 +52,8 @@ import { Button } from './Button';
 
 const meta: Meta<typeof Button> = {
   component: Button,
-  // 👇 Re-apply the a11ytest tag for this component's stories
-  tags: ['a11ytest'],
+  // 👇 Re-apply the a11y-test tag for this component's stories
+  tags: ['a11y-test'],
 };
 
 export default meta;
@@ -64,8 +64,8 @@ import { Button } from './Button';
 
 export default {
   component: Button,
-  // 👇 Re-apply the a11ytest tag for this component's stories
-  tags: ['a11ytest'],
+  // 👇 Re-apply the a11y-test tag for this component's stories
+  tags: ['a11y-test'],
 };
 ```
 
@@ -76,8 +76,8 @@ import { Button } from './Button';
 
 const meta = {
   component: Button,
-  // 👇 Re-apply the a11ytest tag for this component's stories
-  tags: ['a11ytest'],
+  // 👇 Re-apply the a11y-test tag for this component's stories
+  tags: ['a11y-test'],
 } satisfies Meta<typeof Button>;
 
 export default meta;
@@ -90,8 +90,8 @@ import { Button } from './Button';
 
 const meta: Meta<typeof Button> = {
   component: Button,
-  // 👇 Re-apply the a11ytest tag for this component's stories
-  tags: ['a11ytest'],
+  // 👇 Re-apply the a11y-test tag for this component's stories
+  tags: ['a11y-test'],
 };
 
 export default meta;
@@ -105,8 +105,8 @@ export default meta;
 
   const { Story } = defineMeta({
     component: Button,
-    // 👇 Re-apply the a11ytest tag for this component's stories
-    tags: ['a11ytest'],
+    // 👇 Re-apply the a11y-test tag for this component's stories
+    tags: ['a11y-test'],
   });
 </script>
 ```
@@ -116,8 +116,8 @@ import Button from './Button.svelte';
 
 export default {
   component: Button,
-  // 👇 Re-apply the a11ytest tag for this component's stories
-  tags: ['a11ytest'],
+  // 👇 Re-apply the a11y-test tag for this component's stories
+  tags: ['a11y-test'],
 };
 ```
 
@@ -129,8 +129,8 @@ export default {
 
   const { Story } = defineMeta({
     component: Button,
-    // 👇 Re-apply the a11ytest tag for this component's stories
-    tags: ['a11ytest'],
+    // 👇 Re-apply the a11y-test tag for this component's stories
+    tags: ['a11y-test'],
   });
 </script>
 ```
@@ -142,8 +142,8 @@ import Button from './Button.svelte';
 
 const meta = {
   component: Button,
-  // 👇 Re-apply the a11ytest tag for this component's stories
-  tags: ['a11ytest'],
+  // 👇 Re-apply the a11y-test tag for this component's stories
+  tags: ['a11y-test'],
 } satisfies Meta<typeof Button>;
 
 export default meta;
@@ -157,8 +157,8 @@ export default meta;
 
   const { Story } = defineMeta({
     component: Button,
-    // 👇 Re-apply the a11ytest tag for this component's stories
-    tags: ['a11ytest'],
+    // 👇 Re-apply the a11y-test tag for this component's stories
+    tags: ['a11y-test'],
   });
 </script>
 ```
@@ -170,8 +170,8 @@ import Button from './Button.svelte';
 
 const meta: Meta<typeof Button> = {
   component: Button,
-  // 👇 Re-apply the a11ytest tag for this component's stories
-  tags: ['a11ytest'],
+  // 👇 Re-apply the a11y-test tag for this component's stories
+  tags: ['a11y-test'],
 };
 
 export default meta;
@@ -182,8 +182,8 @@ import Button from './Button.vue';
 
 export default {
   component: Button,
-  // 👇 Re-apply the a11ytest tag for this component's stories
-  tags: ['a11ytest'],
+  // 👇 Re-apply the a11y-test tag for this component's stories
+  tags: ['a11y-test'],
 };
 ```
 
@@ -194,8 +194,8 @@ import Button from './Button.vue';
 
 const meta = {
   component: Button,
-  // 👇 Re-apply the a11ytest tag for this component's stories
-  tags: ['a11ytest'],
+  // 👇 Re-apply the a11y-test tag for this component's stories
+  tags: ['a11y-test'],
 } satisfies Meta<typeof Button>;
 
 export default meta;
@@ -208,8 +208,8 @@ import Button from './Button.vue';
 
 const meta: Meta<typeof Button> = {
   component: Button,
-  // 👇 Re-apply the a11ytest tag for this component's stories
-  tags: ['a11ytest'],
+  // 👇 Re-apply the a11y-test tag for this component's stories
+  tags: ['a11y-test'],
 };
 
 export default meta;
@@ -218,8 +218,8 @@ export default meta;
 ```js filename="Button.stories.js" renderer="web-components" language="js"
 export default {
   component: 'demo-button',
-  // 👇 Re-apply the a11ytest tag for this component's stories
-  tags: ['a11ytest'],
+  // 👇 Re-apply the a11y-test tag for this component's stories
+  tags: ['a11y-test'],
 };
 ```
 
@@ -228,8 +228,8 @@ import type { Meta, StoryObj } from '@storybook/web-components';
 
 const meta: Meta = {
   component: 'demo-button',
-  // 👇 Re-apply the a11ytest tag for this component's stories
-  tags: ['a11ytest'],
+  // 👇 Re-apply the a11y-test tag for this component's stories
+  tags: ['a11y-test'],
 };
 
 export default meta;