feat: move store resolution to loader

core/instrument/package.json

@@ -37,7 +37,6 @@
     "@component-controls/specification": "^0.6.0",
     "@hutson/parse-repository-url": "^5.0.0",
     "@mdx-js/loader": "^1.5.5",
-    "@storybook/csf": "^0.0.1",
     "crypto": "^1.0.1",
     "deepmerge": "^4.2.2",
     "find-cache-dir": "^3.3.1",

core/instrument/src/index.ts

@@ -1,6 +1,5 @@
 import * as parser from '@babel/parser';
 import mdx from '@mdx-js/mdx';
-import { toId, storyNameFromExport } from '@storybook/csf';
 import traverse from '@babel/traverse';
 import generate from '@babel/generator';
 import prettier from 'prettier';
@@ -91,21 +90,6 @@ const parseSource = async (
     if (options.stories.storeSourceFile) {
       kind.source = originalSource;
     }
-    store.stories = Object.keys(store.stories).reduce(
-      (acc: { [key: string]: Story }, name) => {
-        const story: Story = store.stories[name];
-        if (kind.title && story.name) {
-          const id = toId(kind.title, storyNameFromExport(story.name));
-          if (!kind.stories) {
-            kind.stories = [];
-          }
-          kind.stories.push(id);
-          return { ...acc, [id]: { ...story, id, kind: kind.title } };
-        }
-        return acc;
-      },
-      {},
-    );
   }
   await extractStoreComponent(store, filePath, source, options, ast);
   const kindsNames = Object.keys(store.kinds);

core/instrument/test/__snapshots__/extract-props-info.test.ts.snap

@@ -5,7 +5,6 @@ Object {
   "description": "",
   "displayName": "Button",
   "methods": Array [],
-  "props": undefined,
 }
 `;
 

core/instrument/test/fixtures/csf/exclude-stories/include-stories-array.js

@@ -0,0 +1,8 @@
+export default {
+  title: 'Storybook/Blocks/IncludeStoryArray',
+  includeStories: ['story1', 'story2'],
+};
+
+export const story1 = () => {};
+export const story2 = () => {};
+export const story3 = () => {};

core/loader/package.json

@@ -32,6 +32,7 @@
   "dependencies": {
     "@component-controls/instrument": "^0.6.0",
     "@component-controls/specification": "^0.6.0",
+    "@storybook/csf": "^0.0.1",
     "crypto": "^1.0.1",
     "js-string-escape": "^1.0.1",
     "loader-utils": "^1.2.3",

core/loader/src/store.ts

@@ -1,42 +1,8 @@
-import { loader } from 'webpack';
 import { StoriesStore } from '@component-controls/specification';
 
-const store: StoriesStore = {
-  kinds: {},
-  stories: {},
-  components: {},
-};
+const stores: StoriesStore[] = [];
 
-export const addStoriesKind = async (
-  added: StoriesStore,
-  context: loader.LoaderContext,
-) => {
-  Object.keys(added.kinds).forEach(key => {
-    store.kinds[key] = {
-      ...added.kinds[key],
-      fileName: context.resourcePath,
-    };
-  });
-  Object.keys(added.components).forEach(key => {
-    store.components[key] = {
-      ...added.components[key],
-    };
-    const { from } = added.components[key];
-    if (typeof from === 'string') {
-      context.resolve(context.context, from, function(
-        err: any,
-        result: string,
-      ) {
-        if (!err) {
-          store.components[key].request = result;
-        } else {
-          console.error(err);
-        }
-      });
-    }
-  });
-  Object.keys(added.stories).forEach(key => {
-    store.stories[key] = { ...added.stories[key] };
-  });
+export const addStoriesKind = async (added: StoriesStore) => {
+  stores.push(added);
 };
-export default store;
+export default stores;

core/loader/src/story-store-data.ts

@@ -1,14 +1,49 @@
+import { StoriesStore, Story } from '@component-controls/specification';
+import { toId, storyNameFromExport } from '@storybook/csf';
 const injectedStories = '__STORIES_HASH__INJECTED_STORIES__';
 
-const storyStore = () => {
+let storyStore: StoriesStore | undefined = undefined;
+
+const loadStoryStore = (): StoriesStore | undefined => {
+  if (storyStore) {
+    return storyStore;
+  }
   if (injectedStories) {
+    const globalStore: StoriesStore = {
+      kinds: {},
+      stories: {},
+      components: {},
+    };
     try {
-      return JSON.parse(injectedStories);
-    } catch (e) {
-      return {};
-    }
+      const stores: StoriesStore[] = (storyStore = JSON.parse(injectedStories));
+      if (stores) {
+        stores.forEach(store => {
+          if (Object.keys(store.kinds).length > 0) {
+            Object.keys(store.kinds).forEach(kindName => {
+              const kind = store.kinds[kindName];
+              globalStore.kinds[kindName] = kind;
+              Object.keys(store.stories).forEach(storyName => {
+                const story: Story = store.stories[storyName];
+                if (kind.title && story.name) {
+                  const id = toId(kind.title, storyNameFromExport(story.name));
+                  if (!kind.stories) {
+                    kind.stories = [];
+                  }
+                  kind.stories.push(id);
+                  globalStore.stories[id] = { ...story, id, kind: kind.title };
+                }
+              });
+              Object.keys(store.components).forEach(key => {
+                globalStore.components[key] = store.components[key];
+              });
+            });
+          }
+        });
+      }
+    } catch (e) {}
+    storyStore = globalStore;
   }
-  return undefined;
+  return storyStore;
 };
 
-export default storyStore();
+export default storyStore ? storyStore : loadStoryStore();

core/specification/src/stories.ts

@@ -67,7 +67,13 @@ export interface Story {
   /**
    * name of the Story.
    */
-  name?: string;
+  name: string;
+
+  /**
+   * csf id of the story
+   */
+  id?: string;
+
   /**
    * title of the file/group of stories
    */

ui/components/src/ThemeContext/ThemeContext.tsx

@@ -46,7 +46,7 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({
         borderBottom: 0,
       },
       tdgroup: {
-        fontWeight: 900,
+        fontWeight: 400,
         lineHeight: '24px',
         color: 'rgba(51,51,51,0.6)',
         background: '#fafbfc',