adding support for storybook v8

pixeleye-io · Apr 12, 2024 · 41ae1ba · 41ae1ba
1 parent 64ae1be
commit 41ae1ba
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 9 deletions.
diff --git a/.changeset/blue-bugs-agree.md b/.changeset/blue-bugs-agree.md
@@ -0,0 +1,17 @@
+---
+"@pixeleye/cli-capture": patch
+"@pixeleye/cli-devices": patch
+"@pixeleye/cli-install": patch
+"@pixeleye/cli-logger": patch
+"@pixeleye/cli-booth": patch
+"@pixeleye/cli-image": patch
+"pixeleye": patch
+"@pixeleye/cli-api": patch
+"@pixeleye/cli-env": patch
+"@pixeleye/playwright": patch
+"@pixeleye/puppeteer": patch
+"@pixeleye/storybook": patch
+"@pixeleye/cypress": patch
+---
+
+Updated dependencies
diff --git a/.changeset/sweet-rabbits-kick.md b/.changeset/sweet-rabbits-kick.md
@@ -0,0 +1,5 @@
+---
+"@pixeleye/storybook": minor
+---
+
+Added support for storybook v8
diff --git a/integrations/cli/pixeleye/src/handlers/storybook.ts b/integrations/cli/pixeleye/src/handlers/storybook.ts
@@ -12,8 +12,12 @@ import {
   waitForProcessing,
   watchExit,
 } from "./utils";
+import { setEnv } from "@pixeleye/cli-env";
 
 export async function storybook(url: string, options: Config) {
+  // Lets our integrations know we are running in a Pixeleye environment
+  setEnv("PIXELEYE_RUNNING", "true");
+
   const api = API({
     endpoint: options.endpoint!,
     token: options.token,

diff --git a/integrations/storybook/src/browser/stories.ts b/integrations/storybook/src/browser/stories.ts
@@ -31,6 +31,11 @@ export type SBWindow = typeof window & {
   __STORYBOOK_CLIENT_API__: API;
   __STORYBOOK_PREVIEW__: {
     channel: Channel;
+    storyStoreValue?: {
+      cacheAllCSFFiles: () => Promise<void>;
+      cachedCSFFiles?: Record<string, unknown>;
+      extract: () => RawStory[];
+    };
   };
 };
 

diff --git a/integrations/storybook/src/capture.ts b/integrations/storybook/src/capture.ts
@@ -40,23 +40,35 @@ export async function captureStories({
       "/iframe.html?selectedKind=story-crawler-kind&selectedStory=story-crawler-story",
     {
       timeout: 120_000,
+      waitUntil: "domcontentloaded",
     }
   );
 
-  await page.waitForFunction(
-    () => (window as SBWindow).__STORYBOOK_CLIENT_API__,
-    {
-      timeout: 60_000,
-    }
-  );
+  await Promise.race([
+    page
+      .waitForFunction(() => (window as SBWindow).__STORYBOOK_CLIENT_API__, {
+        timeout: 60_000,
+      })
+      .catch(() => {}),
+    page
+      .waitForFunction(() => (window as SBWindow).__STORYBOOK_PREVIEW__, {
+        timeout: 60_000,
+      })
+      .catch(() => {}),
+  ]);
 
   const result = await page.evaluate(async () => {
-    const { __STORYBOOK_CLIENT_API__: api } = window as SBWindow;
+    const { __STORYBOOK_CLIENT_API__, __STORYBOOK_PREVIEW__ } =
+      window as SBWindow;
+
+    const store =
+      __STORYBOOK_CLIENT_API__?._storyStore ||
+      __STORYBOOK_PREVIEW__?.storyStoreValue!;
 
-    await api._storyStore?.cacheAllCSFFiles();
+    await store.cacheAllCSFFiles();
 
     return {
-      stories: Object.values(api._storyStore?.extract() || {}).map(
+      stories: Object.values(store.extract() || {}).map(
         ({ id, story, kind, parameters: { pixeleye } }) => ({
           id,
           story,