don't eagerly import all metafiles in story

storybookjs · Sep 25, 2024 · ae0d306 · ae0d306
1 parent 24b85d4
commit ae0d306
Showing 1 changed file with 25 additions and 33 deletions.
diff --git a/code/.storybook/bench.stories.tsx b/code/.storybook/bench.stories.tsx
@@ -3,19 +3,11 @@ import React from 'react';
 import type { Meta } from '@storybook/react';
 
 // @ts-expect-error - TS doesn't know about import.meta.glob from Vite
-const allMetafiles = import.meta.glob(
-  [
-    '../bench/esbuild-metafiles/**/*.json',
-    // the core metafile is too big to be loaded automatically in the iframe
-    '!../bench/esbuild-metafiles/core/core.json',
-  ],
-  {
-    // eagerly loading is not ideal because it imports all metafiles upfront,
-    // but it's the only way to create the argTypes from this list,
-    // as otherwise it would be an async operation
-    eager: true,
-  }
-);
+const allMetafiles = import.meta.glob([
+  '../bench/esbuild-metafiles/**/*.json',
+  // the core metafile is too big to be loaded automatically in the iframe
+  '!../bench/esbuild-metafiles/core/core.json',
+]);
 
 const METAFILES_DIR = '../bench/esbuild-metafiles/';
 const PACKAGES_WITHOUT_ORG = ['storybook', 'sb', 'create-storybook'];
@@ -33,6 +25,9 @@ export default {
     layout: 'fullscreen',
     chromatic: { disableSnapshot: true },
   },
+  args: {
+    metafile: safeMetafileArg(Object.keys(allMetafiles)[0]),
+  },
   argTypes: {
     metafile: {
       options: Object.keys(allMetafiles).concat('core - core').map(safeMetafileArg).sort(),
@@ -59,26 +54,23 @@ export default {
       },
     },
   },
-  render: (args) => {
-    if (!args.metafile) {
-      return (
-        <div
-          style={{
-            width: '100%',
-            height: '100vh',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-          }}
-        >
-          <span>
-            Select a metafile in the <code>metafile</code> Control
-          </span>
-        </div>
-      );
-    }
-    const metafile = allMetafiles[args.metafile];
-    const encodedMetafile = btoa(JSON.stringify(metafile));
+  loaders: [
+    async ({ args }) => {
+      if (!args.metafile) {
+        return;
+      }
+      let metafile;
+      try {
+        metafile = await allMetafiles[args.metafile]();
+      } catch (e) {
+        return;
+      }
+      const encodedMetafile = btoa(JSON.stringify(metafile));
+      return { encodedMetafile };
+    },
+  ],
+  render: (args, { loaded }) => {
+    const { encodedMetafile = '' } = loaded ?? {};
 
     return (
       <iframe