feat: source code loader from instrument

ccontrols · Feb 19, 2020 · d0a39c8 · d0a39c8
1 parent a783581
commit d0a39c8
Show file tree

Hide file tree

Showing 13 changed files with 211 additions and 167 deletions.
diff --git a/core/editors/src/blocks/BlockContainer/BlockContainer.tsx b/core/editors/src/blocks/BlockContainer/BlockContainer.tsx
@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 
 const StyledBlockContainer = styled.div<{}>(() => ({
   position: 'relative',
-  marginBottom: '25px',
+  margin: '25px 0 40px 0',
   boxSadow: 'rgba(0, 0, 0, 0.1) 0px 1px 3px 0px',
   borderRadius: 4,
   border: '1px solid rgba(0, 0, 0, 0.1)',

diff --git a/core/instrument/src/babel/csf-stories.ts b/core/instrument/src/babel/csf-stories.ts
@@ -18,7 +18,7 @@ export const extractCSFStories = (stories: StoriesGroup) => {
       const el = declaration.init.body;
       const name = declaration.id.name;
       const story: Story = {
-        source: {
+        location: {
           start: {
             column: el.loc.start.column,
             line: el.loc.start.line,

diff --git a/core/instrument/src/babel/get-function-parameters.ts b/core/instrument/src/babel/get-function-parameters.ts
@@ -15,6 +15,17 @@ export const extractFunctionParameters = (story: Story) => ({
     if (!story.arguments) {
       story.arguments = [];
     }
+    story.location = {
+      start: {
+        column: node.loc.start.column,
+        line: node.loc.start.line,
+      },
+      end: {
+        column: node.loc.end.column,
+        line: node.loc.end.line,
+      },
+    };
+
     const pushParams = (
       node: ASTPropNode,
       parameters: StoryParameters,
@@ -59,5 +70,6 @@ export const extractFunctionParameters = (story: Story) => ({
         },
       );
     }
+    path.skip();
   },
 });
diff --git a/core/instrument/src/babel/mdx-stories.ts b/core/instrument/src/babel/mdx-stories.ts
@@ -34,7 +34,7 @@ export const extractMDXStories = (stories: StoriesGroup) => {
         switch (node.name.name) {
           case 'Story': {
             const story: Story = {
-              source: {
+              location: {
                 start: {
                   column: path.node.loc.start.column,
                   line: path.node.loc.start.line,

diff --git a/core/instrument/src/index.ts b/core/instrument/src/index.ts
@@ -3,7 +3,7 @@ const mdx = require('@mdx-js/mdx');
 import traverse from '@babel/traverse';
 import { extractCSFStories } from './babel/csf-stories';
 import { extractMDXStories } from './babel/mdx-stories';
-import { StoriesGroup } from './types';
+import { StoriesGroup, Story } from './types';
 export * from './types';
 
 type TraverseFn = (stories: StoriesGroup) => any;
@@ -17,6 +17,31 @@ const parseSource = (source: string, traverseFn: TraverseFn): StoriesGroup => {
     stories: {},
   };
   traverse(ast, traverseFn(stories));
+  Object.keys(stories.stories).forEach((key: string) => {
+    //@ts-ignore
+    const story: Story = stories.stories[key];
+    const { start, end } = story.location || {};
+    if (start && end) {
+      const lines = source.split('\n');
+
+      if (start.line === end.line) {
+        story.source = lines[start.line - 1].substring(
+          start.column,
+          end.column,
+        );
+      } else {
+        const startLine = lines[start.line - 1];
+        const endLine = lines[end.line - 1];
+        if (startLine !== undefined && endLine !== undefined) {
+          story.source = [
+            startLine.substring(start.column),
+            ...lines.slice(start.line, end.line - 1),
+            endLine.substring(0, end.column),
+          ].join('\n');
+        }
+      }
+    }
+  });
   return stories;
 };
 

diff --git a/core/instrument/src/types.ts b/core/instrument/src/types.ts
@@ -19,7 +19,8 @@ export interface Story {
   name?: string;
   arguments?: StoryParameters;
   properties?: StoryParameters;
-  source?: CodeSource;
+  location?: CodeSource;
+  source?: string;
 }
 
 export interface Stories {

diff --git a/core/instrument/test/__snapshots__/csf-named-exports.test.js.snap b/core/instrument/test/__snapshots__/csf-named-exports.test.js.snap
@@ -5,6 +5,16 @@ Object {
   "stories": Object {
     "exportedStory": Object {
       "arguments": Array [],
+      "location": Object {
+        "end": Object {
+          "column": 24,
+          "line": 2,
+        },
+        "start": Object {
+          "column": 16,
+          "line": 2,
+        },
+      },
       "name": "Custom story name",
       "properties": Array [
         Object {
@@ -22,16 +32,7 @@ Object {
           "value": "Custom story name",
         },
       ],
-      "source": Object {
-        "end": Object {
-          "column": 24,
-          "line": 2,
-        },
-        "start": Object {
-          "column": 22,
-          "line": 2,
-        },
-      },
+      "source": "() => {}",
     },
   },
 }
@@ -48,6 +49,16 @@ Object {
   "stories": Object {
     "myStory": Object {
       "arguments": Array [],
+      "location": Object {
+        "end": Object {
+          "column": 24,
+          "line": 2,
+        },
+        "start": Object {
+          "column": 16,
+          "line": 2,
+        },
+      },
       "name": "Custom story name",
       "properties": Array [
         Object {
@@ -65,16 +76,7 @@ Object {
           "value": "Custom story name",
         },
       ],
-      "source": Object {
-        "end": Object {
-          "column": 24,
-          "line": 2,
-        },
-        "start": Object {
-          "column": 22,
-          "line": 2,
-        },
-      },
+      "source": "() => {}",
     },
   },
 }

diff --git a/core/instrument/test/__snapshots__/csf-parameters.test.js.snap b/core/instrument/test/__snapshots__/csf-parameters.test.js.snap
@@ -5,6 +5,16 @@ Object {
   "stories": Object {
     "myStory": Object {
       "arguments": Array [],
+      "location": Object {
+        "end": Object {
+          "column": 31,
+          "line": 2,
+        },
+        "start": Object {
+          "column": 23,
+          "line": 2,
+        },
+      },
       "name": "Custom story name",
       "properties": Array [
         Object {
@@ -22,16 +32,7 @@ Object {
           "value": "Custom story name",
         },
       ],
-      "source": Object {
-        "end": Object {
-          "column": 31,
-          "line": 2,
-        },
-        "start": Object {
-          "column": 29,
-          "line": 2,
-        },
-      },
+      "source": "() => {}",
     },
   },
 }
@@ -42,6 +43,16 @@ Object {
   "stories": Object {
     "myStory": Object {
       "arguments": Array [],
+      "location": Object {
+        "end": Object {
+          "column": 31,
+          "line": 2,
+        },
+        "start": Object {
+          "column": 23,
+          "line": 2,
+        },
+      },
       "name": "Custom story name",
       "properties": Array [
         Object {
@@ -117,16 +128,7 @@ Object {
           ],
         },
       ],
-      "source": Object {
-        "end": Object {
-          "column": 31,
-          "line": 2,
-        },
-        "start": Object {
-          "column": 29,
-          "line": 2,
-        },
-      },
+      "source": "() => {}",
     },
   },
 }
@@ -137,6 +139,16 @@ Object {
   "stories": Object {
     "myStory": Object {
       "arguments": Array [],
+      "location": Object {
+        "end": Object {
+          "column": 31,
+          "line": 2,
+        },
+        "start": Object {
+          "column": 23,
+          "line": 2,
+        },
+      },
       "name": "Custom story name",
       "properties": Array [
         Object {
@@ -284,16 +296,7 @@ Object {
           ],
         },
       ],
-      "source": Object {
-        "end": Object {
-          "column": 31,
-          "line": 2,
-        },
-        "start": Object {
-          "column": 29,
-          "line": 2,
-        },
-      },
+      "source": "() => {}",
     },
   },
 }

diff --git a/core/instrument/test/__snapshots__/csf-story-kind.test.js.snap b/core/instrument/test/__snapshots__/csf-story-kind.test.js.snap
@@ -5,17 +5,18 @@ Object {
   "stories": Object {
     "myStory": Object {
       "arguments": Array [],
-      "name": "myStory",
-      "source": Object {
+      "location": Object {
         "end": Object {
           "column": 37,
           "line": 2,
         },
         "start": Object {
-          "column": 35,
+          "column": 29,
           "line": 2,
         },
       },
+      "name": "myStory",
+      "source": "() => {}",
     },
   },
 }

diff --git a/core/instrument/test/__snapshots__/csf-toggle.test.js.snap b/core/instrument/test/__snapshots__/csf-toggle.test.js.snap
@@ -34,47 +34,38 @@ Object {
   ],
   "stories": Object {
     "allToggles": Object {
-      "arguments": Array [
-        Object {
-          "loc": Object {
-            "end": Object {
-              "column": 51,
-              "line": 15,
-            },
-            "start": Object {
-              "column": 46,
-              "line": 15,
-            },
-          },
-          "name": "check",
-          "value": "check",
-        },
-        Object {
-          "loc": Object {
-            "end": Object {
-              "column": 27,
-              "line": 24,
-            },
-            "start": Object {
-              "column": 22,
-              "line": 24,
-            },
-          },
-          "name": "check",
-          "value": "check",
-        },
-      ],
-      "name": "allToggles",
-      "source": Object {
+      "arguments": Array [],
+      "location": Object {
         "end": Object {
           "column": 5,
           "line": 29,
         },
         "start": Object {
-          "column": 36,
+          "column": 30,
           "line": 10,
         },
       },
+      "name": "allToggles",
+      "source": "() => {
+      const [checked, setChecked] = React.useState(false);
+      return (
+        <div>
+          <p>Default toggle</p>
+          <Toggle checked={checked} onChange={check => setChecked(check)} />
+          <br />
+          <p>Custom labels</p>
+          <Toggle
+            checked={checked}
+            labels={{
+              true: 'YES',
+              false: 'NO!',
+            }}
+            onChange={check => setChecked(check)}
+          />
+          <br />
+        </div>
+      );
+    }",
     },
   },
   "title": "Components/Toggle",