Fix - Make loki work with Storybook8 (#507)

* Fix - Make loki work with Storybook8 * Fix formatting --------- Co-authored-by: Joel Arvidsson <joel@oblador.se>
oblador · Mar 30, 2024 · dcfbcd8 · dcfbcd8
1 parent 02a68d5
commit dcfbcd8
Showing 1 changed file with 34 additions and 7 deletions.
diff --git a/packages/browser/src/get-stories.js b/packages/browser/src/get-stories.js
@@ -3,6 +3,9 @@
 const getStories = async (window) => {
   const getStorybook =
     (window.__STORYBOOK_CLIENT_API__ && window.__STORYBOOK_CLIENT_API__.raw) ||
+    (window.__STORYBOOK_PREVIEW__ &&
+      window.__STORYBOOK_PREVIEW__.extract &&
+      window.__STORYBOOK_PREVIEW__.storyStore.raw) ||
     (window.loki && window.loki.getStorybook);
   if (!getStorybook) {
     throw new Error(
@@ -19,13 +22,6 @@ const getStories = async (window) => {
     'storySource',
   ];
 
-  if (
-    window.__STORYBOOK_CLIENT_API__.storyStore &&
-    window.__STORYBOOK_CLIENT_API__.storyStore.cacheAllCSFFiles
-  ) {
-    await window.__STORYBOOK_CLIENT_API__.storyStore.cacheAllCSFFiles();
-  }
-
   const isSerializable = (value) => {
     try {
       JSON.stringify(value);
@@ -35,6 +31,37 @@ const getStories = async (window) => {
     }
   };
 
+  if (window.__STORYBOOK_PREVIEW__ && window.__STORYBOOK_PREVIEW__.extract) {
+    // New official API to extract stories from preview
+    await window.__STORYBOOK_PREVIEW__.extract();
+
+    // Deprecated, will be removed in V9
+    const stories = window.__STORYBOOK_PREVIEW__.storyStore.raw();
+
+    return stories
+      .map((component) => ({
+        id: component.id,
+        kind: component.kind,
+        story: component.story,
+        parameters: Object.fromEntries(
+          Object.entries(component.parameters || {}).filter(
+            ([key, value]) =>
+              !key.startsWith('__') &&
+              !blockedParams.includes(key) &&
+              isSerializable(value)
+          )
+        ),
+      }))
+      .filter(({ parameters }) => !parameters.loki || !parameters.loki.skip);
+  }
+
+  if (
+    window.__STORYBOOK_CLIENT_API__.storyStore &&
+    window.__STORYBOOK_CLIENT_API__.storyStore.cacheAllCSFFiles
+  ) {
+    await window.__STORYBOOK_CLIENT_API__.storyStore.cacheAllCSFFiles();
+  }
+
   return getStorybook()
     .map((component) => ({
       id: component.id,