fix: fix for component extraction from parameters

ccontrols · Mar 16, 2020 · b266ff6 · b266ff6
1 parent ff394b9
commit b266ff6
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 37 deletions.
diff --git a/core/instrument/src/babel/csf-stories.ts b/core/instrument/src/babel/csf-stories.ts
@@ -1,6 +1,7 @@
 import {
   StoriesStore,
   Story,
+  StoryKind,
   Stories,
 } from '@component-controls/specification';
 import { File } from '@babel/types';
@@ -33,6 +34,7 @@ export const extractCSFStories = (ast: File): StoriesStore => {
     }
     return undefined;
   };
+  let components: { [key: string]: string | undefined } = {};
   const store: StoriesStore = {
     stories: {},
     kinds: {},
@@ -45,14 +47,19 @@ export const extractCSFStories = (ast: File): StoriesStore => {
 
       const { title } = attributes || {};
       if (typeof title === 'string') {
-        const components = componentsFromParams(attributes);
-        store.kinds[title] = {
+        const attrComponents = componentsFromParams(attributes);
+        components = attrComponents.reduce(
+          (acc, componentName) => ({ ...acc, [componentName]: undefined }),
+          components,
+        );
+        const kind: StoryKind = {
           ...attributes,
-          components: components.reduce(
-            (acc, componentName) => ({ ...acc, [componentName]: undefined }),
-            {},
-          ),
+          components: {},
         };
+        if (attrComponents.length > 0) {
+          kind.component = attrComponents[0];
+        }
+        store.kinds[title] = kind;
       }
     },
     AssignmentExpression: (path: any) => {
@@ -72,11 +79,20 @@ export const extractCSFStories = (ast: File): StoriesStore => {
         };
 
         if (store.stories[storyName]) {
-          store.stories[storyName] = {
+          const attrComponents = componentsFromParams(attributes);
+          components = attrComponents.reduce(
+            (acc, componentName) => ({ ...acc, [componentName]: undefined }),
+            components,
+          );
+          const story: Story = {
             ...attributes,
             name,
             ...store.stories[storyName],
           };
+          if (attrComponents.length > 0) {
+            story.component = attrComponents[0];
+          }
+          store.stories[storyName] = story;
         }
       }
     },
@@ -129,5 +145,9 @@ export const extractCSFStories = (ast: File): StoriesStore => {
       }
     },
   });
+  if (Object.keys(store.kinds).length === 1) {
+    //@ts-ignore
+    store.kinds[Object.keys(store.kinds)[0]].components = components;
+  }
   return store;
 };
diff --git a/core/instrument/src/babel/extract-component.ts b/core/instrument/src/babel/extract-component.ts
@@ -8,7 +8,6 @@ import { followImports } from './follow-imports';
 import { packageInfo } from '../misc/packageInfo';
 import { propsInfo } from '../misc/propsInfo';
 import { InstrumentOptions } from '../types';
-import { componentsFromParams } from '../misc/componentAttributes';
 
 const globalCache: {
   [filePath: string]: StoryComponent;
@@ -73,9 +72,7 @@ export const extractStoreComponent = async (
   const kinds = Object.keys(store.kinds);
   if (kinds.length > 0) {
     const kind: StoriesKind = store.kinds[kinds[0]];
-    kind.components = {};
-    const componentNames = componentsFromParams(kind);
-
+    const componentNames = Object.keys(kind.components);
     if (componentNames) {
       for (const componentName of componentNames) {
         const component = await extractComponent(
@@ -88,29 +85,8 @@ export const extractStoreComponent = async (
         if (component) {
           store.components[filePath] = component;
           kind.components[componentName] = filePath;
-          kind.component = componentName;
         }
       }
     }
-    Object.keys(store.stories).forEach(async (name: string) => {
-      const story = store.stories[name];
-      const componentNames = componentsFromParams(story);
-      if (componentNames) {
-        for (const componentName of componentNames) {
-          const component = await extractComponent(
-            componentName,
-            filePath,
-            source,
-            options,
-            initialAST,
-          );
-          if (component) {
-            store.components[filePath] = component;
-            kind.components[componentName] = filePath;
-            story.component = componentName;
-          }
-        }
-      }
-    });
   }
 };
diff --git a/core/instrument/src/babel/mdx-stories.ts b/core/instrument/src/babel/mdx-stories.ts
@@ -1,15 +1,18 @@
 import {
   StoriesStore,
   Story,
+  StoriesKind,
   StoryParameters,
 } from '@component-controls/specification';
 import { File } from '@babel/types';
 import traverse from '@babel/traverse';
 import { extractFunctionParameters } from './get-function-parameters';
 import { extractAttributes } from './extract-attributes';
 import { sourceLocation } from './utils';
+import { componentsFromParams } from '../misc/componentAttributes';
 
 export const extractMDXStories = (ast: File): StoriesStore => {
+  let components: { [key: string]: string | undefined } = {};
   const store: StoriesStore = {
     stories: {},
     kinds: {},
@@ -39,7 +42,13 @@ export const extractMDXStories = (ast: File): StoriesStore => {
           },
           {},
         );
-
+        const attrComponents = componentsFromParams(attributes);
+        components = attrComponents.reduce(
+          (acc, componentName) => ({ ...acc, [componentName]: undefined }),
+          components,
+        );
+        const component =
+          attrComponents.length > 0 ? attrComponents[0] : undefined;
         switch (node.name.name) {
           case 'Story': {
             const { name } = attributes;
@@ -49,6 +58,9 @@ export const extractMDXStories = (ast: File): StoriesStore => {
                 name,
                 loc: sourceLocation(path.node.loc),
               };
+              if (component) {
+                story.component = component;
+              }
               traverse(
                 path.node,
                 extractFunctionParameters(story),
@@ -62,11 +74,15 @@ export const extractMDXStories = (ast: File): StoriesStore => {
           case 'Meta': {
             const { title } = attributes;
             if (title) {
-              store.kinds[title] = {
+              const kind: StoriesKind = {
+                components: {},
                 ...attributes,
                 title,
-                components: {},
               };
+              if (component !== undefined) {
+                kind.component = component;
+              }
+              store.kinds[title] = kind;
             }
             break;
           }
@@ -77,5 +93,10 @@ export const extractMDXStories = (ast: File): StoriesStore => {
       }
     },
   });
+
+  if (Object.keys(store.kinds).length === 1) {
+    //@ts-ignore
+    store.kinds[Object.keys(store.kinds)[0]].components = components;
+  }
   return store;
 };
diff --git a/core/instrument/src/misc/componentAttributes.ts b/core/instrument/src/misc/componentAttributes.ts
@@ -1,7 +1,11 @@
-import { Story, StoriesKind } from '@component-controls/specification';
+import {
+  Story,
+  StoriesKind,
+  StoryParameters,
+} from '@component-controls/specification';
 
 export const componentsFromParams = (
-  element: StoriesKind | Story,
+  element: StoriesKind | Story | StoryParameters,
 ): string[] => {
   const result = [];
   let { component } = element;

diff --git a/core/instrument/test/__snapshots__/csf-parameters.test.ts.snap b/core/instrument/test/__snapshots__/csf-parameters.test.ts.snap
@@ -7,6 +7,7 @@ Object {
   "stories": Object {
     "myStory": Object {
       "arguments": Array [],
+      "component": "ControlsTable",
       "loc": Object {
         "end": Object {
           "column": 31,