From 93ef00cd4f0526d06574672909eff865b88c71b2 Mon Sep 17 00:00:00 2001 From: atanasster <atanasster@gmail.com> Date: Mon, 16 Mar 2020 19:09:40 -0400 Subject: [PATCH] fix: fix literal attributes key --- .../src/babel/extract-attributes.ts | 5 +- .../instrument/src/babel/extract-component.ts | 5 +- .../__snapshots__/csf-components.test.ts.snap | 57 ++++++++++++++++++- .../__snapshots__/mdx-component.test.ts.snap | 6 +- .../csf/components/story-subcomponents.js | 13 +++++ 5 files changed, 79 insertions(+), 7 deletions(-) create mode 100644 core/instrument/test/fixtures/csf/components/story-subcomponents.js diff --git a/core/instrument/src/babel/extract-attributes.ts b/core/instrument/src/babel/extract-attributes.ts index 8252e08e4..08a581607 100644 --- 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 index d7fb4d202..45d10a0df 100644 --- 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 index bcc8a8abe..2fe68fc05 100644 --- 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 index 74455af92..2081d1467 100644 --- 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 new file mode 100644 index 000000000..6e10d6472 --- /dev/null +++ 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 }, +};