WIP

package.json

@@ -76,10 +76,10 @@
     "@babel/preset-env": "^7.19.4",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
-    "@storybook/addon-a11y": "next",
+    "@storybook/addon-a11y": "0.0.0-pr-31819-sha-8b752a73",
     "@storybook/addon-coverage": "^1.0.0",
-    "@storybook/addon-docs": "next",
-    "@storybook/react-vite": "next",
+    "@storybook/addon-docs": "0.0.0-pr-31819-sha-8b752a73",
+    "@storybook/react-vite": "0.0.0-pr-31819-sha-8b752a73",
     "@types/jest": "^29.0.0",
     "@types/node": "^16.4.1",
     "@types/node-fetch": "^2.6.11",
@@ -101,17 +101,17 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "read-pkg-up": "^7.0.1",
-    "storybook": "next",
+    "storybook": "0.0.0-pr-31819-sha-8b752a73",
     "tempy": "^1.0.1",
     "ts-dedent": "^2.0.0",
     "ts-jest": "^29.0.0",
-    "tsup": "^6.5.0",
-    "typescript": "~4.9.4",
+    "tsup": "^8.5.0",
+    "typescript": "^5.8.3",
     "vite": "^6.3.2",
     "wait-on": "^7.2.0"
   },
   "peerDependencies": {
-    "storybook": "^0.0.0-0 || ^8.2.0 || ^9.0.0 || ^9.1.0-0"
+    "storybook": "0.0.0-pr-31819-sha-8b752a73"
   },
   "engines": {
     "node": ">=20.0.0"

playwright/transform.js

@@ -2,8 +2,8 @@ const { transformSync: swcTransform } = require('@swc/core');
 const { transformPlaywright } = require('../dist');
 
 module.exports = {
-  process(src, filename) {
-    const csfTest = transformPlaywright(src, filename);
+  async processAsync(src, filename) {
+    const csfTest = await transformPlaywright(src, filename);
 
     const result = swcTransform(csfTest, {
       filename,

src/csf/transformCsf.ts

@@ -100,7 +100,7 @@ const makeBeforeEach = (beforeEachPrefixer: FilePrefixer) => {
 const makeArray = (templateResult: TemplateResult) =>
   Array.isArray(templateResult) ? templateResult : [templateResult];
 
-export const transformCsf = (
+export const transformCsf = async (
   code: string,
   {
     clearBody = false,
@@ -111,7 +111,7 @@ export const transformCsf = (
     previewAnnotations = { tags: [] },
   }: TransformOptions & { previewAnnotations?: Record<string, any> }
 ) => {
-  const { includeTags, excludeTags, skipTags } = getTagOptions();
+  const { includeTags, excludeTags, skipTags } = await getTagOptions();
 
   const csf = loadCsf(code, { makeTitle: makeTitle ?? ((userTitle: string) => userTitle) });
   csf.parse();

src/playwright/index.ts

@@ -1,8 +1,8 @@
 import { transformSync as swcTransform } from '@swc/core';
 import { transformPlaywright } from './transformPlaywright';
 
-export const process = (src: string, filename: string) => {
-  const csfTest = transformPlaywright(src, filename);
+export const processAsync = async (src: string, filename: string) => {
+  const csfTest = await transformPlaywright(src, filename);
 
   const result = swcTransform(csfTest, {
     filename,

src/playwright/transformPlaywright.test.ts

@@ -30,14 +30,14 @@ describe('Playwright', () => {
   beforeEach(() => {
     const relativeSpy = jest.spyOn(path, 'relative');
     relativeSpy.mockReturnValueOnce('stories/basic/Header.stories.js');
-    jest.spyOn(storybookMain, 'getStorybookMain').mockImplementation(() => ({
+    jest.spyOn(storybookMain, 'getStorybookMain').mockResolvedValue({
       stories: [
         {
           directory: '../stories/basic',
           titlePrefix: 'Example',
         },
       ],
-    }));
+    });
 
     delete process.env.STORYBOOK_INCLUDE_TAGS;
     delete process.env.STORYBOOK_EXCLUDE_TAGS;
@@ -46,9 +46,9 @@ describe('Playwright', () => {
   });
 
   describe('tag filtering mechanism', () => {
-    it('should include all stories when there is no tag filtering', () => {
+    it('should include all stories when there is no tag filtering', async () => {
       expect(
-        transformPlaywright(
+        await transformPlaywright(
           dedent`
         export default { title: 'foo/bar', component: Button };
         export const A = { };
@@ -183,10 +183,10 @@ describe('Playwright', () => {
         }
       `);
     });
-    it('should exclude stories when excludeTags matches', () => {
+    it('should exclude stories when excludeTags matches', async () => {
       process.env.STORYBOOK_EXCLUDE_TAGS = 'exclude-test';
       expect(
-        transformPlaywright(
+        await transformPlaywright(
           dedent`
         export default { title: 'foo/bar', component: Button };
         export const A = { tags: ['exclude-test'] };
@@ -261,10 +261,10 @@ describe('Playwright', () => {
         }
       `);
     });
-    it('should skip stories when skipTags matches', () => {
+    it('should skip stories when skipTags matches', async () => {
       process.env.STORYBOOK_SKIP_TAGS = 'skip-test';
       expect(
-        transformPlaywright(
+        await transformPlaywright(
           dedent`
         export default { title: 'foo/bar', component: Button };
         export const A = { tags: ['skip-test'] };
@@ -399,7 +399,7 @@ describe('Playwright', () => {
         }
       `);
     });
-    it('should work in conjunction with includeTags, excludeTags and skipTags', () => {
+    it('should work in conjunction with includeTags, excludeTags and skipTags', async () => {
       process.env.STORYBOOK_INCLUDE_TAGS = 'play,design,global-tag';
       process.env.STORYBOOK_SKIP_TAGS = 'skip';
       process.env.STORYBOOK_EXCLUDE_TAGS = 'exclude';
@@ -412,7 +412,7 @@ describe('Playwright', () => {
       // - D being included
       // - E being excluded
       expect(
-        transformPlaywright(
+        await transformPlaywright(
           dedent`
         export default { title: 'foo/bar', component: Button };
         export const A = { tags: ['play', 'exclude'] };
@@ -670,15 +670,15 @@ describe('Playwright', () => {
         }
       `);
     });
-    it('should work with tag negation', () => {
+    it('should work with tag negation', async () => {
       process.env.STORYBOOK_INCLUDE_TAGS = 'play,test';
       process.env.STORYBOOK_PREVIEW_TAGS = '!test';
       // Should result in:
       // - A being included
       // - B being excluded because it has no play nor test tag (removed by negation in preview tags)
       // - C being included because it has test tag (overwritten via story tags)
       expect(
-        transformPlaywright(
+        await transformPlaywright(
           dedent`
         export default { title: 'foo/bar', component: Button, tags: ['play'] };
         export const A = { };
@@ -814,12 +814,12 @@ describe('Playwright', () => {
         }
       `);
     });
-    it('should include "test" tag by default', () => {
+    it('should include "test" tag by default', async () => {
       // Should result in:
       // - A being included
       // - B being excluded
       expect(
-        transformPlaywright(
+        await transformPlaywright(
           dedent`
         export default { title: 'foo/bar', component: Button };
         export const A = { };
@@ -894,10 +894,10 @@ describe('Playwright', () => {
         }
       `);
     });
-    it('should no op when includeTags is passed but not matched', () => {
+    it('should no op when includeTags is passed but not matched', async () => {
       process.env.STORYBOOK_INCLUDE_TAGS = 'play';
       expect(
-        transformPlaywright(
+        await transformPlaywright(
           dedent`
         export default { title: 'foo/bar', component: Button };
         export const A = () => {};
@@ -909,9 +909,9 @@ describe('Playwright', () => {
     });
   });
 
-  it('should generate a play test when the story has a play function', () => {
+  it('should generate a play test when the story has a play function', async () => {
     expect(
-      transformPlaywright(
+      await transformPlaywright(
         dedent`
         export default { title: 'foo/bar', component: Button };
         export const A = () => {};
@@ -986,9 +986,9 @@ describe('Playwright', () => {
       }
     `);
   });
-  it('should generate a smoke test when story does not have a play function', () => {
+  it('should generate a smoke test when story does not have a play function', async () => {
     expect(
-      transformPlaywright(
+      await transformPlaywright(
         dedent`
         export default { title: 'foo/bar' };
         export const A = () => {};
@@ -1062,9 +1062,9 @@ describe('Playwright', () => {
       }
     `);
   });
-  it('should generate a smoke test with auto title', () => {
+  it('should generate a smoke test with auto title', async () => {
     expect(
-      transformPlaywright(
+      await transformPlaywright(
         dedent`
         export default { component: Button };
         export const A = () => {};

src/playwright/transformPlaywright.ts

@@ -79,24 +79,24 @@ export const testPrefixer: TestPrefixer = (context) => {
   )({ ...context });
 };
 
-const makeTitleFactory = (filename: string) => {
-  const { workingDir, normalizedStoriesEntries } = getStorybookMetadata();
+const makeTitleFactory = async (filename: string) => {
+  const { workingDir, normalizedStoriesEntries } = await getStorybookMetadata();
   const filePath = `./${relative(workingDir, filename)}`;
 
   return (userTitle: string) =>
     userOrAutoTitle(filePath, normalizedStoriesEntries, userTitle) as string;
 };
 
-export const transformPlaywright = (src: string, filename: string) => {
+export const transformPlaywright = async (src: string, filename: string) => {
   const tags = process.env.STORYBOOK_PREVIEW_TAGS?.split(',') ?? [];
   const transformOptions = {
     testPrefixer,
     insertTestIfEmpty: true,
     clearBody: true,
-    makeTitle: makeTitleFactory(filename),
+    makeTitle: await makeTitleFactory(filename),
     previewAnnotations: { tags },
   };
 
-  const result = transformCsf(src, transformOptions);
+  const result = await transformCsf(src, transformOptions);
   return result;
 };

src/playwright/transformPlaywrightJson.ts

@@ -140,7 +140,9 @@ function groupByTitleId<T extends { title: ComponentTitle }>(entries: T[]) {
  * Generate one test file per component so that Jest can
  * run them in parallel.
  */
-export const transformPlaywrightJson = (index: V3StoriesIndex | V4Index | UnsupportedVersion) => {
+export const transformPlaywrightJson = async (
+  index: V3StoriesIndex | V4Index | UnsupportedVersion
+) => {
   let titleIdToEntries: Record<string, V4Entry[]>;
   if (index.v === 3) {
     const titleIdToStories = groupByTitleId<V3Story>(
@@ -157,7 +159,7 @@ export const transformPlaywrightJson = (index: V3StoriesIndex | V4Index | Unsupp
     throw new Error(`Unsupported version ${index.v}`);
   }
 
-  const { includeTags, excludeTags, skipTags } = getTagOptions();
+  const { includeTags, excludeTags, skipTags } = await getTagOptions();
 
   const titleIdToTest = Object.entries(titleIdToEntries).reduce<Record<string, string>>(
     (acc, [titleId, entries]) => {

src/setup-page.ts

@@ -36,7 +36,10 @@ export const setupPage = async (page: Page, browserContext: BrowserContext) => {
   const failOnConsole = process.env.TEST_CHECK_CONSOLE;
 
   const viewMode = process.env.VIEW_MODE ?? 'story';
-  const renderedEvent = viewMode === 'docs' ? 'globalThis.__STORYBOOK_MODULE_CORE_EVENTS__.DOCS_RENDERED' : 'globalThis.__STORYBOOK_MODULE_CORE_EVENTS__.STORY_FINISHED ?? globalThis.__STORYBOOK_MODULE_CORE_EVENTS__.STORY_RENDERED';
+  const renderedEvent =
+    viewMode === 'docs'
+      ? 'globalThis.__STORYBOOK_MODULE_CORE_EVENTS__.DOCS_RENDERED'
+      : 'globalThis.__STORYBOOK_MODULE_CORE_EVENTS__.STORY_FINISHED ?? globalThis.__STORYBOOK_MODULE_CORE_EVENTS__.STORY_RENDERED';
   const { packageJson } = (await readPackageUp()) as NormalizedReadResult;
   const { version: testRunnerVersion } = packageJson;
 
@@ -51,7 +54,7 @@ export const setupPage = async (page: Page, browserContext: BrowserContext) => {
     );
   }
 
-  const testRunnerConfig = getTestRunnerConfig() || {};
+  const testRunnerConfig = (await getTestRunnerConfig()) || {};
   if (testRunnerConfig?.prepare) {
     await testRunnerConfig.prepare({ page, browserContext, testRunnerConfig });
   } else {

src/test-storybook.ts

@@ -212,7 +212,7 @@ async function getIndexTempDir(url: string) {
   let tmpDir: string;
   try {
     const indexJson = await getIndexJson(url);
-    const titleIdToTest = transformPlaywrightJson(indexJson);
+    const titleIdToTest = await transformPlaywrightJson(indexJson);
 
     tmpDir = tempy.directory();
     for (const [titleId, test] of Object.entries(titleIdToTest)) {
@@ -282,7 +282,8 @@ const main = async () => {
 
   process.env.STORYBOOK_CONFIG_DIR = runnerOptions.configDir;
 
-  const testRunnerConfig = getTestRunnerConfig(runnerOptions.configDir) ?? ({} as TestRunnerConfig);
+  const testRunnerConfig =
+    (await getTestRunnerConfig(runnerOptions.configDir)) ?? ({} as TestRunnerConfig);
 
   if (testRunnerConfig.preVisit && testRunnerConfig.preRender) {
     throw new Error(
@@ -378,7 +379,7 @@ const main = async () => {
   }
 
   const { storiesPaths, lazyCompilation, disableTelemetry, enableCrashReports } =
-    getStorybookMetadata();
+    await getStorybookMetadata();
   if (!shouldRunIndexJson) {
     process.env.STORYBOOK_STORIES_PATTERN = storiesPaths;
 

src/util/getStorybookMain.test.ts

@@ -8,25 +8,25 @@ describe('getStorybookMain', () => {
     resetStorybookMainCache();
   });
 
-  it('should throw an error if no configuration is found', () => {
-    expect(() => getStorybookMain('.storybook')).toThrowErrorMatchingSnapshot();
+  it('should throw an error if no configuration is found', async () => {
+    await expect(getStorybookMain('.storybook')).rejects.toThrowErrorMatchingSnapshot();
   });
 
   describe('no stories', () => {
-    it('should throw an error if no stories are defined', () => {
-      jest.spyOn(coreCommon, 'serverRequire').mockImplementation(() => ({}));
+    it('should throw an error if no stories are defined', async () => {
+      jest.spyOn(coreCommon, 'serverRequire').mockImplementation(async () => ({}));
 
-      expect(() => getStorybookMain('.storybook')).toThrowErrorMatchingSnapshot();
+      await expect(getStorybookMain('.storybook')).rejects.toThrowErrorMatchingSnapshot();
     });
 
-    it('should throw an error if stories list is empty', () => {
-      jest.spyOn(coreCommon, 'serverRequire').mockImplementation(() => ({ stories: [] }));
+    it('should throw an error if stories list is empty', async () => {
+      jest.spyOn(coreCommon, 'serverRequire').mockImplementation(async () => ({ stories: [] }));
 
-      expect(() => getStorybookMain('.storybook')).toThrowErrorMatchingSnapshot();
+      await expect(getStorybookMain('.storybook')).rejects.toThrowErrorMatchingSnapshot();
     });
   });
 
-  it('should return mainjs', () => {
+  it('should return mainjs', async () => {
     const mockedMain = {
       stories: [
         {
@@ -36,13 +36,13 @@ describe('getStorybookMain', () => {
       ],
     };
 
-    jest.spyOn(coreCommon, 'serverRequire').mockImplementation(() => mockedMain);
+    jest.spyOn(coreCommon, 'serverRequire').mockImplementation(async () => mockedMain);
 
-    const res = getStorybookMain('.storybook');
+    const res = await getStorybookMain('.storybook');
     expect(res).toMatchObject(mockedMain);
   });
 
-  it('should return the configDir value if it exists', () => {
+  it('should return the configDir value if it exists', async () => {
     const mockedMain = {
       stories: [
         {
@@ -51,9 +51,9 @@ describe('getStorybookMain', () => {
         },
       ],
     };
-    storybookMainConfig.set('configDir', mockedMain);
+    storybookMainConfig.set('.storybook', mockedMain);
 
-    const res = getStorybookMain('.storybook');
+    const res = await getStorybookMain('.storybook');
     expect(res).toMatchObject(mockedMain);
   });
 });