diff --git a/blocks/core/src/ControlsTable/ControlsTable.tsx b/blocks/core/src/ControlsTable/ControlsTable.tsx index 6f53c2dc2..89d25875f 100644 --- a/blocks/core/src/ControlsTable/ControlsTable.tsx +++ b/blocks/core/src/ControlsTable/ControlsTable.tsx @@ -197,8 +197,8 @@ export const ControlsTable: FC diff --git a/blocks/core/src/Source/Source.tsx b/blocks/core/src/Source/Source.tsx index b8b7bba47..d69acc463 100644 --- a/blocks/core/src/Source/Source.tsx +++ b/blocks/core/src/Source/Source.tsx @@ -130,7 +130,7 @@ export const Source: FC = ({ actions.push({ title: 'values', onClick: onMergeValues }); } - actions.push({ title: copied ? 'Copied' : 'Copy', onClick: onCopy }); + actions.push({ title: copied ? 'copied' : 'copy', onClick: onCopy }); let colorIdx = 0; const colorRoll = parameters ? parameters.map(() => { diff --git a/core/instrument/src/babel/control-values-in-source.ts b/core/instrument/src/babel/control-values-in-source.ts index 004a8e2d1..daca66c57 100644 --- a/core/instrument/src/babel/control-values-in-source.ts +++ b/core/instrument/src/babel/control-values-in-source.ts @@ -5,15 +5,15 @@ import { } from '@component-controls/specification'; import { adjustSourceLocation } from './utils'; -const findParameter = ( - parameters: StoryArguments, +const findArguments = ( + args: StoryArguments, paramName: string, ): StoryArgument | undefined => { let result: StoryArgument | undefined; - for (let i = 0; i < parameters.length; i += 1) { - const p = parameters[i]; + for (let i = 0; i < args.length; i += 1) { + const p = args[i]; if (Array.isArray(p.value)) { - result = findParameter(p.value, paramName); + result = findArguments(p.value, paramName); if (result) { break; } @@ -26,22 +26,24 @@ const findParameter = ( } return result; }; -export const extractParametersUsage = ( +export const addArgumentUsage = ( story: Story, - parameters: StoryArguments, + args: StoryArguments, + node: any, ) => { + const param = findArguments(args, node.name); + + if (param) { + if (param.usage === undefined) { + param.usage = []; + } + param.usage.push(adjustSourceLocation(story, node.loc)); + } +}; +export const extractArgumentsUsage = (story: Story, args: StoryArguments) => { return { Identifier: (path: any) => { - const node = path.node; - - const param = findParameter(parameters, node.name); - - if (param) { - if (param.usage === undefined) { - param.usage = []; - } - param.usage.push(adjustSourceLocation(story, node.loc)); - } + addArgumentUsage(story, args, path.node); }, }; }; diff --git a/core/instrument/src/babel/get-function-parameters.ts b/core/instrument/src/babel/get-function-parameters.ts index d11abe78b..e44efb635 100644 --- a/core/instrument/src/babel/get-function-parameters.ts +++ b/core/instrument/src/babel/get-function-parameters.ts @@ -5,7 +5,10 @@ import { StoryArguments, } from '@component-controls/specification'; import { adjustSourceLocation } from './utils'; -import { extractParametersUsage } from './control-values-in-source'; +import { + extractArgumentsUsage, + addArgumentUsage, +} from './control-values-in-source'; interface KeyType { name: string; @@ -70,12 +73,16 @@ export const extractFunctionParameters = (story: Story) => ({ } if (story.arguments.length) { const params = story.arguments[0]; - traverse( - node.body, - extractParametersUsage(story, [params]), - path.scope, - path, - ); + if (node.body.type === 'Identifier') { + addArgumentUsage(story, [params], node.body); + } else { + traverse( + node.body, + extractArgumentsUsage(story, [params]), + path.scope, + path, + ); + } } path.skip(); }, diff --git a/core/instrument/src/babel/utils.ts b/core/instrument/src/babel/utils.ts index 0c8efbfb1..354164e83 100644 --- a/core/instrument/src/babel/utils.ts +++ b/core/instrument/src/babel/utils.ts @@ -10,11 +10,17 @@ export const adjustSourceLocation = ( return { start: { line: loc.start.line - story.location.start.line, - column: loc.start.column, + column: + loc.start.line === story.location.start.line + ? loc.start.column - story.location.start.column + : loc.start.column, }, end: { line: loc.end.line - story.location.start.line, - column: loc.end.column, + column: + loc.end.line === story.location.start.line + ? loc.end.column - story.location.start.column + : loc.end.column, }, }; }; diff --git a/core/instrument/test/__snapshots__/get-csf-stories.test.js.snap b/core/instrument/test/__snapshots__/get-csf-stories.test.js.snap index eef83053a..dcc4fd055 100644 --- a/core/instrument/test/__snapshots__/get-csf-stories.test.js.snap +++ b/core/instrument/test/__snapshots__/get-csf-stories.test.js.snap @@ -42,11 +42,11 @@ Object { Object { "loc": Object { "end": Object { - "column": 34, + "column": 5, "line": 0, }, "start": Object { - "column": 29, + "column": 0, "line": 0, }, }, @@ -79,11 +79,11 @@ Object { Object { "loc": Object { "end": Object { - "column": 60, + "column": 31, "line": 0, }, "start": Object { - "column": 30, + "column": 1, "line": 0, }, }, @@ -92,11 +92,11 @@ Object { Object { "loc": Object { "end": Object { - "column": 53, + "column": 24, "line": 0, }, "start": Object { - "column": 38, + "column": 9, "line": 0, }, }, @@ -105,11 +105,11 @@ Object { Object { "loc": Object { "end": Object { - "column": 45, + "column": 16, "line": 0, }, "start": Object { - "column": 40, + "column": 11, "line": 0, }, }, @@ -119,11 +119,11 @@ Object { Object { "loc": Object { "end": Object { - "column": 51, + "column": 22, "line": 0, }, "start": Object { - "column": 47, + "column": 18, "line": 0, }, }, @@ -135,11 +135,11 @@ Object { Object { "loc": Object { "end": Object { - "column": 58, + "column": 29, "line": 0, }, "start": Object { - "column": 55, + "column": 26, "line": 0, }, }, @@ -174,11 +174,11 @@ Object { Object { "loc": Object { "end": Object { - "column": 35, + "column": 6, "line": 0, }, "start": Object { - "column": 30, + "column": 1, "line": 0, }, }, @@ -188,11 +188,11 @@ Object { Object { "loc": Object { "end": Object { - "column": 44, + "column": 15, "line": 0, }, "start": Object { - "column": 37, + "column": 8, "line": 0, }, }, @@ -225,11 +225,11 @@ Object { Object { "loc": Object { "end": Object { - "column": 50, + "column": 21, "line": 0, }, "start": Object { - "column": 30, + "column": 1, "line": 0, }, }, @@ -238,11 +238,11 @@ Object { Object { "loc": Object { "end": Object { - "column": 43, + "column": 14, "line": 0, }, "start": Object { - "column": 38, + "column": 9, "line": 0, }, }, @@ -252,11 +252,11 @@ Object { Object { "loc": Object { "end": Object { - "column": 48, + "column": 19, "line": 0, }, "start": Object { - "column": 45, + "column": 16, "line": 0, }, }, @@ -291,11 +291,11 @@ Object { Object { "loc": Object { "end": Object { - "column": 43, + "column": 14, "line": 0, }, "start": Object { - "column": 30, + "column": 1, "line": 0, }, }, @@ -304,11 +304,11 @@ Object { Object { "loc": Object { "end": Object { - "column": 36, + "column": 7, "line": 0, }, "start": Object { - "column": 32, + "column": 3, "line": 0, }, }, @@ -318,11 +318,11 @@ Object { Object { "loc": Object { "end": Object { - "column": 41, + "column": 12, "line": 0, }, "start": Object { - "column": 38, + "column": 9, "line": 0, }, }, @@ -357,11 +357,11 @@ Object { Object { "loc": Object { "end": Object { - "column": 47, + "column": 18, "line": 0, }, "start": Object { - "column": 30, + "column": 1, "line": 0, }, }, diff --git a/core/instrument/test/__snapshots__/mdx-story.test.js.snap b/core/instrument/test/__snapshots__/mdx-story.test.js.snap index 5242f50bd..761ac9f9e 100644 --- a/core/instrument/test/__snapshots__/mdx-story.test.js.snap +++ b/core/instrument/test/__snapshots__/mdx-story.test.js.snap @@ -24,11 +24,11 @@ Object { Object { "loc": Object { "end": Object { - "column": 8, + "column": 5, "line": 0, }, "start": Object { - "column": 3, + "column": 0, "line": 0, }, }, @@ -82,7 +82,7 @@ Object { "line": 5, }, "start": Object { - "column": 4, + "column": 1, "line": 0, }, }, @@ -196,11 +196,11 @@ Object { Object { "loc": Object { "end": Object { - "column": 9, + "column": 6, "line": 0, }, "start": Object { - "column": 4, + "column": 1, "line": 0, }, }, @@ -210,11 +210,11 @@ Object { Object { "loc": Object { "end": Object { - "column": 18, + "column": 15, "line": 0, }, "start": Object { - "column": 11, + "column": 8, "line": 0, }, }, @@ -268,7 +268,7 @@ Object { "line": 2, }, "start": Object { - "column": 4, + "column": 1, "line": 0, }, }, @@ -354,7 +354,7 @@ Object { "line": 2, }, "start": Object { - "column": 4, + "column": 1, "line": 0, }, }, diff --git a/core/instrument/test/__snapshots__/prop-usage-locations.test.js.snap b/core/instrument/test/__snapshots__/prop-usage-locations.test.js.snap index e4317b52f..2994695e0 100644 --- a/core/instrument/test/__snapshots__/prop-usage-locations.test.js.snap +++ b/core/instrument/test/__snapshots__/prop-usage-locations.test.js.snap @@ -8,11 +8,11 @@ Object { Object { "loc": Object { "end": Object { - "column": 60, + "column": 31, "line": 0, }, "start": Object { - "column": 30, + "column": 1, "line": 0, }, }, @@ -21,11 +21,11 @@ Object { Object { "loc": Object { "end": Object { - "column": 53, + "column": 24, "line": 0, }, "start": Object { - "column": 38, + "column": 9, "line": 0, }, }, @@ -34,11 +34,11 @@ Object { Object { "loc": Object { "end": Object { - "column": 45, + "column": 16, "line": 0, }, "start": Object { - "column": 40, + "column": 11, "line": 0, }, }, @@ -60,11 +60,11 @@ Object { Object { "loc": Object { "end": Object { - "column": 51, + "column": 22, "line": 0, }, "start": Object { - "column": 47, + "column": 18, "line": 0, }, }, @@ -88,11 +88,11 @@ Object { Object { "loc": Object { "end": Object { - "column": 58, + "column": 29, "line": 0, }, "start": Object { - "column": 55, + "column": 26, "line": 0, }, }, @@ -160,11 +160,11 @@ Object { Object { "loc": Object { "end": Object { - "column": 34, + "column": 5, "line": 0, }, "start": Object { - "column": 29, + "column": 0, "line": 0, }, }, @@ -206,6 +206,70 @@ Object { } `; +exports[`prop-usage-locations empty body 1`] = ` +Object { + "stories": Object { + "story": Object { + "arguments": Array [ + Object { + "loc": Object { + "end": Object { + "column": 9, + "line": 0, + }, + "start": Object { + "column": 1, + "line": 0, + }, + }, + "name": undefined, + "value": Array [ + Object { + "loc": Object { + "end": Object { + "column": 7, + "line": 0, + }, + "start": Object { + "column": 3, + "line": 0, + }, + }, + "name": "name", + "usage": Array [ + Object { + "end": Object { + "column": 18, + "line": 0, + }, + "start": Object { + "column": 14, + "line": 0, + }, + }, + ], + "value": "name", + }, + ], + }, + ], + "location": Object { + "end": Object { + "column": 39, + "line": 1, + }, + "start": Object { + "column": 21, + "line": 1, + }, + }, + "name": "story", + "source": "({ name }) => name;", + }, + }, +} +`; + exports[`prop-usage-locations multiple usage 1`] = ` Object { "stories": Object { @@ -214,11 +278,11 @@ Object { Object { "loc": Object { "end": Object { - "column": 37, + "column": 8, "line": 0, }, "start": Object { - "column": 30, + "column": 1, "line": 0, }, }, @@ -227,11 +291,11 @@ Object { Object { "loc": Object { "end": Object { - "column": 35, + "column": 6, "line": 0, }, "start": Object { - "column": 32, + "column": 3, "line": 0, }, }, @@ -293,11 +357,11 @@ Object { Object { "loc": Object { "end": Object { - "column": 34, + "column": 5, "line": 0, }, "start": Object { - "column": 29, + "column": 0, "line": 0, }, }, @@ -305,11 +369,11 @@ Object { "usage": Array [ Object { "end": Object { - "column": 54, + "column": 25, "line": 0, }, "start": Object { - "column": 49, + "column": 20, "line": 0, }, }, @@ -342,11 +406,11 @@ Object { Object { "loc": Object { "end": Object { - "column": 32, + "column": 9, "line": 0, }, "start": Object { - "column": 24, + "column": 1, "line": 0, }, }, @@ -355,11 +419,11 @@ Object { Object { "loc": Object { "end": Object { - "column": 30, + "column": 7, "line": 0, }, "start": Object { - "column": 26, + "column": 3, "line": 0, }, }, @@ -367,11 +431,11 @@ Object { "usage": Array [ Object { "end": Object { - "column": 44, + "column": 21, "line": 0, }, "start": Object { - "column": 40, + "column": 17, "line": 0, }, }, @@ -406,11 +470,11 @@ Object { Object { "loc": Object { "end": Object { - "column": 35, + "column": 6, "line": 0, }, "start": Object { - "column": 30, + "column": 1, "line": 0, }, }, @@ -418,11 +482,11 @@ Object { "usage": Array [ Object { "end": Object { - "column": 65, + "column": 36, "line": 0, }, "start": Object { - "column": 60, + "column": 31, "line": 0, }, }, @@ -432,11 +496,11 @@ Object { Object { "loc": Object { "end": Object { - "column": 44, + "column": 15, "line": 0, }, "start": Object { - "column": 37, + "column": 8, "line": 0, }, }, @@ -469,11 +533,11 @@ Object { Object { "loc": Object { "end": Object { - "column": 51, + "column": 22, "line": 0, }, "start": Object { - "column": 30, + "column": 1, "line": 0, }, }, @@ -482,11 +546,11 @@ Object { Object { "loc": Object { "end": Object { - "column": 44, + "column": 15, "line": 0, }, "start": Object { - "column": 38, + "column": 9, "line": 0, }, }, @@ -494,11 +558,11 @@ Object { "usage": Array [ Object { "end": Object { - "column": 75, + "column": 46, "line": 0, }, "start": Object { - "column": 69, + "column": 40, "line": 0, }, }, @@ -508,11 +572,11 @@ Object { Object { "loc": Object { "end": Object { - "column": 49, + "column": 20, "line": 0, }, "start": Object { - "column": 46, + "column": 17, "line": 0, }, }, @@ -520,11 +584,11 @@ Object { "usage": Array [ Object { "end": Object { - "column": 85, + "column": 56, "line": 0, }, "start": Object { - "column": 82, + "column": 53, "line": 0, }, }, @@ -559,11 +623,11 @@ Object { Object { "loc": Object { "end": Object { - "column": 43, + "column": 14, "line": 0, }, "start": Object { - "column": 30, + "column": 1, "line": 0, }, }, @@ -572,11 +636,11 @@ Object { Object { "loc": Object { "end": Object { - "column": 36, + "column": 7, "line": 0, }, "start": Object { - "column": 32, + "column": 3, "line": 0, }, }, @@ -584,11 +648,11 @@ Object { "usage": Array [ Object { "end": Object { - "column": 65, + "column": 36, "line": 0, }, "start": Object { - "column": 61, + "column": 32, "line": 0, }, }, @@ -598,11 +662,11 @@ Object { Object { "loc": Object { "end": Object { - "column": 41, + "column": 12, "line": 0, }, "start": Object { - "column": 38, + "column": 9, "line": 0, }, }, @@ -610,11 +674,11 @@ Object { "usage": Array [ Object { "end": Object { - "column": 75, + "column": 46, "line": 0, }, "start": Object { - "column": 72, + "column": 43, "line": 0, }, }, diff --git a/core/instrument/test/prop-usage-locations.test.js b/core/instrument/test/prop-usage-locations.test.js index 316cd90c9..77c635d07 100644 --- a/core/instrument/test/prop-usage-locations.test.js +++ b/core/instrument/test/prop-usage-locations.test.js @@ -79,4 +79,9 @@ describe('prop-usage-locations', () => { await parseCSF('export const myStory = ({ text }) => `${text}`;'), ).toMatchSnapshot(); }); + it('empty body', async () => { + await expect( + await parseCSF('export const story = ({ name }) => name;'), + ).toMatchSnapshot(); + }); });