fix: fix literal attributes key

ccontrols · Mar 16, 2020 · 93ef00c · 93ef00c
1 parent 496524f
commit 93ef00c
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 7 deletions.
diff --git a/core/instrument/src/babel/extract-attributes.ts b/core/instrument/src/babel/extract-attributes.ts
@@ -15,6 +15,9 @@ const nodeToValue = (node: any): any => {
         return node.name;
       case 'Property':
         return node.name;
+      case 'ObjectProperty':
+        console.log('ObjectProperty', node.key.value);
+        return node.key.value;
 
       case 'Literal':
         return node.raw;
@@ -42,7 +45,7 @@ const nodeToValue = (node: any): any => {
 };
 const nodeToAttribute = (node: any): StoryAttribute | undefined => {
   const value = node.value || node;
-  const name = node.key ? node.key.name : node.name;
+  const name = node.key ? node.key.name ?? node.key.value : node.name;
   const retVal = nodeToValue(value);
   return retVal !== undefined
     ? name

diff --git a/core/instrument/src/babel/extract-component.ts b/core/instrument/src/babel/extract-component.ts
@@ -19,8 +19,9 @@ export const extractComponent = async (
   options?: InstrumentOptions,
   initialAST?: File,
 ): Promise<StoryComponent | undefined> => {
-  if (globalCache[filePath]) {
-    return globalCache[filePath];
+  const cacheKey = `${filePath}-${componentName}`;
+  if (globalCache[cacheKey]) {
+    return globalCache[cacheKey];
   }
   const follow = followImports(
     componentName,

diff --git a/core/instrument/test/__snapshots__/csf-components.test.ts.snap b/core/instrument/test/__snapshots__/csf-components.test.ts.snap
@@ -23,6 +23,55 @@ Object {
 }
 `;
 
+exports[`csf-components story-subcomponents.js 1`] = `
+Object {
+  "components": Object {
+    "/Users/atanasster/component-controls/core/instrument/test/fixtures/components/button-default-arrow-func.js": Object {
+      "from": "../../components/button-default-arrow-func",
+      "importedName": "default",
+      "name": "ArrowButton",
+      "request": "/Users/atanasster/component-controls/core/instrument/test/fixtures/components/button-default-arrow-func.js",
+    },
+    "/Users/atanasster/component-controls/core/instrument/test/fixtures/components/button-named-arrow-func.js": Object {
+      "from": "../../components/button-named-arrow-func",
+      "importedName": "Button",
+      "name": "Button",
+      "request": "/Users/atanasster/component-controls/core/instrument/test/fixtures/components/button-named-arrow-func.js",
+    },
+  },
+  "kinds": Object {
+    "Story": Object {
+      "components": Object {
+        "ArrowButton": "/Users/atanasster/component-controls/core/instrument/test/fixtures/components/button-default-arrow-func.js",
+        "Button": "/Users/atanasster/component-controls/core/instrument/test/fixtures/components/button-named-arrow-func.js",
+      },
+      "title": "Story",
+    },
+  },
+  "stories": Object {
+    "story": Object {
+      "arguments": Array [],
+      "component": "ArrowButton",
+      "loc": Object {
+        "end": Object {
+          "column": 34,
+          "line": 8,
+        },
+        "start": Object {
+          "column": 21,
+          "line": 8,
+        },
+      },
+      "name": "story",
+      "source": "() => 'hello'",
+      "subcomponents": Object {
+        "My Button Tab": "Button",
+      },
+    },
+  },
+}
+`;
+
 exports[`csf-components subcomponents.js 1`] = `
 Object {
   "components": Object {
@@ -32,13 +81,19 @@ Object {
       "name": "ArrowButton",
       "request": "/Users/atanasster/component-controls/core/instrument/test/fixtures/components/button-default-arrow-func.js",
     },
+    "/Users/atanasster/component-controls/core/instrument/test/fixtures/components/button-named-arrow-func.js": Object {
+      "from": "../../components/button-named-arrow-func",
+      "importedName": "Button",
+      "name": "Button",
+      "request": "/Users/atanasster/component-controls/core/instrument/test/fixtures/components/button-named-arrow-func.js",
+    },
   },
   "kinds": Object {
     "Story": Object {
       "component": "ArrowButton",
       "components": Object {
         "ArrowButton": "/Users/atanasster/component-controls/core/instrument/test/fixtures/components/button-default-arrow-func.js",
-        "Button": "/Users/atanasster/component-controls/core/instrument/test/fixtures/components/button-default-arrow-func.js",
+        "Button": "/Users/atanasster/component-controls/core/instrument/test/fixtures/components/button-named-arrow-func.js",
       },
       "subcomponents": Object {
         "Button": "Button",

diff --git a/core/instrument/test/__snapshots__/mdx-component.test.ts.snap b/core/instrument/test/__snapshots__/mdx-component.test.ts.snap
@@ -92,10 +92,10 @@ exports[`mdx-component story-import.mdx 1`] = `
 Object {
   "components": Object {
     "/Users/atanasster/component-controls/core/instrument/test/fixtures/mdx/component/story-import.mdx": Object {
-      "from": "./Button",
-      "importedName": "Btn",
+      "from": "./Toggle",
+      "importedName": "Toggle",
       "loc": undefined,
-      "name": "Button",
+      "name": "Toggle",
       "request": undefined,
       "source": undefined,
     },

diff --git a/core/instrument/test/fixtures/csf/components/story-subcomponents.js b/core/instrument/test/fixtures/csf/components/story-subcomponents.js
@@ -0,0 +1,13 @@
+import ArrowButton from '../../components/button-default-arrow-func';
+import { Button } from '../../components/button-named-arrow-func';
+
+export default {
+  title: 'Story',
+};
+
+export const story = () => 'hello';
+
+story.story = {
+  component: ArrowButton,
+  subcomponents: { 'My Button Tab': Button },
+};