From 496524feab270b2c005e2a82527236d86f27ba14 Mon Sep 17 00:00:00 2001 From: atanasster Date: Mon, 16 Mar 2020 18:05:10 -0400 Subject: [PATCH] feat: initial subcomponents support --- .../instrument/src/babel/extract-component.ts | 46 ++++++---- .../src/misc/componentAttributes.ts | 4 +- .../__snapshots__/csf-components.test.ts.snap | 51 ++++++++++++ .../__snapshots__/csf-toggle.test.ts.snap | 1 - .../extract-component.test.ts.snap | 83 ------------------- .../__snapshots__/mdx-component.test.ts.snap | 6 +- .../__snapshots__/mdx-stories.test.ts.snap | 10 +-- core/instrument/test/csf-components.test.ts | 12 +++ .../fixtures/csf/components/default-import.js | 5 ++ .../fixtures/csf/components/subcomponents.js | 8 ++ 10 files changed, 110 insertions(+), 116 deletions(-) create mode 100644 core/instrument/test/__snapshots__/csf-components.test.ts.snap create mode 100644 core/instrument/test/csf-components.test.ts create mode 100644 core/instrument/test/fixtures/csf/components/default-import.js create mode 100644 core/instrument/test/fixtures/csf/components/subcomponents.js diff --git a/core/instrument/src/babel/extract-component.ts b/core/instrument/src/babel/extract-component.ts index 783d4f0cd..d7fb4d202 100644 --- a/core/instrument/src/babel/extract-component.ts +++ b/core/instrument/src/babel/extract-component.ts @@ -30,22 +30,31 @@ export const extractComponent = async ( initialAST, ); const { components } = options || {}; - const component: StoryComponent = follow - ? { - name: componentName, - from: follow.from, - request: follow.filePath, - loc: follow.loc, - importedName: follow.importedName, - source: components?.storeSourceFile ? follow.source : undefined, - repository: await packageInfo( - follow.originalFilePath, - options?.components?.package, - ), - } - : { - name: componentName, - }; + let component: StoryComponent; + if (follow) { + component = { + name: componentName, + from: follow.from, + request: follow.filePath, + + importedName: follow.importedName, + }; + if (components?.storeSourceFile) { + component.source = follow.source; + component.loc = follow.loc; + } + const repository = await packageInfo( + follow.originalFilePath, + options?.components?.package, + ); + if (repository !== undefined) { + component.repository = repository; + } + } else { + component = { + name: componentName, + }; + } const { propsLoaders } = options || {}; if (follow && follow.filePath && Array.isArray(propsLoaders)) { const info = await propsInfo( @@ -83,8 +92,9 @@ export const extractStoreComponent = async ( initialAST, ); if (component) { - store.components[filePath] = component; - kind.components[componentName] = filePath; + const componentKey = component.request ?? filePath; + store.components[componentKey] = component; + kind.components[componentName] = componentKey; } } } diff --git a/core/instrument/src/misc/componentAttributes.ts b/core/instrument/src/misc/componentAttributes.ts index 57ea5f392..03dcb7349 100644 --- a/core/instrument/src/misc/componentAttributes.ts +++ b/core/instrument/src/misc/componentAttributes.ts @@ -22,8 +22,8 @@ export const componentsFromParams = ( if (typeof subcomponents === 'string') { result.push(subcomponents); } - if (subcomponents) { - console.log(subcomponents); + if (typeof subcomponents === 'object') { + Object.keys(subcomponents).forEach(key => result.push(subcomponents[key])); } return result; }; diff --git a/core/instrument/test/__snapshots__/csf-components.test.ts.snap b/core/instrument/test/__snapshots__/csf-components.test.ts.snap new file mode 100644 index 000000000..bcc8a8abe --- /dev/null +++ b/core/instrument/test/__snapshots__/csf-components.test.ts.snap @@ -0,0 +1,51 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`csf-components default-import.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": "Button", + "request": "/Users/atanasster/component-controls/core/instrument/test/fixtures/components/button-default-arrow-func.js", + }, + }, + "kinds": Object { + "Story": Object { + "component": "Button", + "components": Object { + "Button": "/Users/atanasster/component-controls/core/instrument/test/fixtures/components/button-default-arrow-func.js", + }, + "title": "Story", + }, + }, + "stories": Object {}, +} +`; + +exports[`csf-components 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", + }, + }, + "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", + }, + "subcomponents": Object { + "Button": "Button", + }, + "title": "Story", + }, + }, + "stories": Object {}, +} +`; diff --git a/core/instrument/test/__snapshots__/csf-toggle.test.ts.snap b/core/instrument/test/__snapshots__/csf-toggle.test.ts.snap index 194776a16..d57cce36e 100644 --- a/core/instrument/test/__snapshots__/csf-toggle.test.ts.snap +++ b/core/instrument/test/__snapshots__/csf-toggle.test.ts.snap @@ -8,7 +8,6 @@ Object { "importedName": "Toggle", "loc": undefined, "name": "Toggle", - "repository": undefined, "request": undefined, "source": undefined, }, diff --git a/core/instrument/test/__snapshots__/extract-component.test.ts.snap b/core/instrument/test/__snapshots__/extract-component.test.ts.snap index 605b89718..1f8ee2931 100644 --- a/core/instrument/test/__snapshots__/extract-component.test.ts.snap +++ b/core/instrument/test/__snapshots__/extract-component.test.ts.snap @@ -4,16 +4,6 @@ exports[`extract-component default-alias-import.js 1`] = ` Object { "from": "../components/button-default-class-export", "importedName": "namespace", - "loc": Object { - "end": Object { - "column": 1, - "line": 7, - }, - "start": Object { - "column": 37, - "line": 3, - }, - }, "name": "Button", "repository": Object { "browse": "https://github.com/ccontrols/component-controls/tree/master/core/instrument/test/fixtures/components/button-default-class-export.js", @@ -21,7 +11,6 @@ Object { "issues": "https://github.com/ccontrols/component-controls/issues", }, "request": "/Users/atanasster/component-controls/core/instrument/test/fixtures/components/button-default-class-export.js", - "source": undefined, } `; @@ -29,16 +18,6 @@ exports[`extract-component default-import.js 1`] = ` Object { "from": "../components/button-default-arrow-func", "importedName": "default", - "loc": Object { - "end": Object { - "column": 65, - "line": 3, - }, - "start": Object { - "column": 24, - "line": 3, - }, - }, "name": "Button", "repository": Object { "browse": "https://github.com/ccontrols/component-controls/tree/master/core/instrument/test/fixtures/components/button-default-arrow-func.js", @@ -46,7 +25,6 @@ Object { "issues": "https://github.com/ccontrols/component-controls/issues", }, "request": "/Users/atanasster/component-controls/core/instrument/test/fixtures/components/button-default-arrow-func.js", - "source": undefined, } `; @@ -60,11 +38,8 @@ exports[`extract-component named-alias-import.js 1`] = ` Object { "from": "../components/button-named-arrow-func", "importedName": "Btn", - "loc": undefined, "name": "Button", - "repository": undefined, "request": undefined, - "source": undefined, } `; @@ -72,16 +47,6 @@ exports[`extract-component named-import.js 1`] = ` Object { "from": "../components/button-named-class", "importedName": "Button", - "loc": Object { - "end": Object { - "column": 1, - "line": 7, - }, - "start": Object { - "column": 44, - "line": 3, - }, - }, "name": "Button", "repository": Object { "browse": "https://github.com/ccontrols/component-controls/tree/master/core/instrument/test/fixtures/components/button-named-class.js", @@ -89,7 +54,6 @@ Object { "issues": "https://github.com/ccontrols/component-controls/issues", }, "request": "/Users/atanasster/component-controls/core/instrument/test/fixtures/components/button-named-class.js", - "source": undefined, } `; @@ -97,16 +61,6 @@ exports[`extract-component node-modules.js 1`] = ` Object { "from": "theme-ui", "importedName": "Button", - "loc": Object { - "end": Object { - "column": 2, - "line": 26, - }, - "start": Object { - "column": 22, - "line": 4, - }, - }, "name": "Button", "repository": Object { "browse": "https://github.com/system-ui/theme-ui/tree/master/dist/index.js", @@ -114,7 +68,6 @@ Object { "issues": "https://github.com/system-ui/theme-ui/issues", }, "request": "/Users/atanasster/component-controls/node_modules/@theme-ui/components/src/Button.js", - "source": undefined, } `; @@ -122,16 +75,6 @@ exports[`extract-component node-modules-source.js 1`] = ` Object { "from": "@component-controls/components", "importedName": "Subtitle", - "loc": Object { - "end": Object { - "column": 1, - "line": 104, - }, - "start": Object { - "column": 23, - "line": 91, - }, - }, "name": "Button", "repository": Object { "browse": "https://github.com/ccontrols/component-controls/tree/master/ui/components/dist/index.js", @@ -139,7 +82,6 @@ Object { "issues": "https://github.com/ccontrols/component-controls/issues", }, "request": "/Users/atanasster/component-controls/node_modules/@component-controls/components/dist/index.js", - "source": undefined, } `; @@ -147,11 +89,8 @@ exports[`extract-component non-existing-file.js 1`] = ` Object { "from": "./Button", "importedName": "Btn", - "loc": undefined, "name": "Button", - "repository": undefined, "request": undefined, - "source": undefined, } `; @@ -159,16 +98,6 @@ exports[`extract-component parameters-component.js 1`] = ` Object { "from": "../components/button-named-arrow-func", "importedName": "Button", - "loc": Object { - "end": Object { - "column": 72, - "line": 3, - }, - "start": Object { - "column": 31, - "line": 3, - }, - }, "name": "Button", "repository": Object { "browse": "https://github.com/ccontrols/component-controls/tree/master/core/instrument/test/fixtures/components/button-named-arrow-func.js", @@ -176,7 +105,6 @@ Object { "issues": "https://github.com/ccontrols/component-controls/issues", }, "request": "/Users/atanasster/component-controls/core/instrument/test/fixtures/components/button-named-arrow-func.js", - "source": undefined, } `; @@ -184,16 +112,6 @@ exports[`extract-component story-component.js 1`] = ` Object { "from": "../components/button-named-class", "importedName": "Button", - "loc": Object { - "end": Object { - "column": 1, - "line": 7, - }, - "start": Object { - "column": 44, - "line": 3, - }, - }, "name": "Button", "repository": Object { "browse": "https://github.com/ccontrols/component-controls/tree/master/core/instrument/test/fixtures/components/button-named-class.js", @@ -201,6 +119,5 @@ Object { "issues": "https://github.com/ccontrols/component-controls/issues", }, "request": "/Users/atanasster/component-controls/core/instrument/test/fixtures/components/button-named-class.js", - "source": undefined, } `; diff --git a/core/instrument/test/__snapshots__/mdx-component.test.ts.snap b/core/instrument/test/__snapshots__/mdx-component.test.ts.snap index 11206053f..74455af92 100644 --- a/core/instrument/test/__snapshots__/mdx-component.test.ts.snap +++ b/core/instrument/test/__snapshots__/mdx-component.test.ts.snap @@ -3,7 +3,7 @@ exports[`mdx-component component-parameters.mdx 1`] = ` Object { "components": Object { - "/Users/atanasster/component-controls/core/instrument/test/fixtures/mdx/component/component-parameters.mdx": Object { + "/Users/atanasster/component-controls/core/instrument/test/fixtures/components/button-named-arrow-func.js": Object { "from": "../../components/button-named-arrow-func", "importedName": "Button", "loc": Object { @@ -34,7 +34,7 @@ export const Button = props => ; "Storybook/MDX": Object { "component": "Button", "components": Object { - "Button": "/Users/atanasster/component-controls/core/instrument/test/fixtures/mdx/component/component-parameters.mdx", + "Button": "/Users/atanasster/component-controls/core/instrument/test/fixtures/components/button-named-arrow-func.js", }, "repository": Object { "browse": "https://github.com/ccontrols/component-controls/tree/master/core/instrument/test/fixtures/mdx/component/component-parameters.mdx", @@ -62,7 +62,6 @@ Object { "importedName": "Btn", "loc": undefined, "name": "Button", - "repository": undefined, "request": undefined, "source": undefined, }, @@ -97,7 +96,6 @@ Object { "importedName": "Btn", "loc": undefined, "name": "Button", - "repository": undefined, "request": undefined, "source": undefined, }, diff --git a/core/instrument/test/__snapshots__/mdx-stories.test.ts.snap b/core/instrument/test/__snapshots__/mdx-stories.test.ts.snap index eff011402..6dceb9d08 100644 --- a/core/instrument/test/__snapshots__/mdx-stories.test.ts.snap +++ b/core/instrument/test/__snapshots__/mdx-stories.test.ts.snap @@ -8,7 +8,6 @@ Object { "importedName": "default", "loc": undefined, "name": "Button", - "repository": undefined, "request": undefined, "source": undefined, }, @@ -52,7 +51,6 @@ Object { "importedName": "default", "loc": undefined, "name": "Button", - "repository": undefined, "request": undefined, "source": undefined, }, @@ -123,7 +121,7 @@ import Button from '../components/BaseButton'; exports[`mdx-stories story.mdx 1`] = ` Object { "components": Object { - "/Users/atanasster/component-controls/core/instrument/test/fixtures/mdx/stories/story.mdx": Object { + "/Users/atanasster/component-controls/core/instrument/test/fixtures/components/button-default-arrow-func.js": Object { "from": "../../components/button-default-arrow-func", "importedName": "default", "loc": Object { @@ -156,7 +154,7 @@ export default Button; "Storybook/MDX": Object { "component": "Button", "components": Object { - "Button": "/Users/atanasster/component-controls/core/instrument/test/fixtures/mdx/stories/story.mdx", + "Button": "/Users/atanasster/component-controls/core/instrument/test/fixtures/components/button-default-arrow-func.js", }, "parameters": Object { "component": "Button", @@ -209,7 +207,6 @@ Object { "importedName": "default", "loc": undefined, "name": "Button", - "repository": undefined, "request": undefined, "source": undefined, }, @@ -347,7 +344,6 @@ Object { "importedName": "default", "loc": undefined, "name": "Button", - "repository": undefined, "request": undefined, "source": undefined, }, @@ -451,7 +447,6 @@ Object { "importedName": "default", "loc": undefined, "name": "Button", - "repository": undefined, "request": undefined, "source": undefined, }, @@ -540,7 +535,6 @@ Object { "importedName": "default", "loc": undefined, "name": "Button", - "repository": undefined, "request": undefined, "source": undefined, }, diff --git a/core/instrument/test/csf-components.test.ts b/core/instrument/test/csf-components.test.ts new file mode 100644 index 000000000..811550f55 --- /dev/null +++ b/core/instrument/test/csf-components.test.ts @@ -0,0 +1,12 @@ +import { loadStoriesTests } from './loadTestFiles'; + +describe('csf-components', () => { + loadStoriesTests( + { + stories: { storeSourceFile: false, package: false }, + components: { storeSourceFile: false, package: false }, + }, + 'csf', + 'components', + ); +}); diff --git a/core/instrument/test/fixtures/csf/components/default-import.js b/core/instrument/test/fixtures/csf/components/default-import.js new file mode 100644 index 000000000..bccaa6158 --- /dev/null +++ b/core/instrument/test/fixtures/csf/components/default-import.js @@ -0,0 +1,5 @@ +import Button from '../../components/button-default-arrow-func'; +export default { + title: 'Story', + component: Button, +}; diff --git a/core/instrument/test/fixtures/csf/components/subcomponents.js b/core/instrument/test/fixtures/csf/components/subcomponents.js new file mode 100644 index 000000000..fd8d3661f --- /dev/null +++ b/core/instrument/test/fixtures/csf/components/subcomponents.js @@ -0,0 +1,8 @@ +import ArrowButton from '../../components/button-default-arrow-func'; +import { Button } from '../../components/button-named-arrow-func'; + +export default { + title: 'Story', + component: ArrowButton, + subcomponents: { Button }, +};