From 91b0d7a4e32b6b084e9b0762ee93ca17875ac5d7 Mon Sep 17 00:00:00 2001 From: atanasster Date: Thu, 28 Nov 2019 06:16:05 -0500 Subject: [PATCH 1/7] handle template strings in csf title --- .../stories/addon-docs/addon-docs.stories.js | 4 +- .../abstract-syntax-tree/traverse-helpers.js | 60 +++++++++++-------- 2 files changed, 38 insertions(+), 26 deletions(-) diff --git a/examples/official-storybook/stories/addon-docs/addon-docs.stories.js b/examples/official-storybook/stories/addon-docs/addon-docs.stories.js index c82415db5022..98782ec0e088 100644 --- a/examples/official-storybook/stories/addon-docs/addon-docs.stories.js +++ b/examples/official-storybook/stories/addon-docs/addon-docs.stories.js @@ -3,8 +3,10 @@ import notes from '../notes/notes.md'; import mdxNotes from '../notes/notes.mdx'; import { DocgenButton } from '../../components/DocgenButton'; +const stories = 'Stories'; + export default { - title: 'Addons/Docs/stories', + title: `Addons/Docs/${stories}`, component: DocgenButton, }; diff --git a/lib/source-loader/src/server/abstract-syntax-tree/traverse-helpers.js b/lib/source-loader/src/server/abstract-syntax-tree/traverse-helpers.js index 744e8dc5f76e..84238d328ccf 100644 --- a/lib/source-loader/src/server/abstract-syntax-tree/traverse-helpers.js +++ b/lib/source-loader/src/server/abstract-syntax-tree/traverse-helpers.js @@ -96,31 +96,41 @@ export function findExportsMap(ast) { if (!titleProperty) { return { addsMap, idsToFrameworks }; } - const title = titleProperty.value.value; - - estraverse.traverse(ast, { - fallback: 'iteration', - enter: node => { - patchNode(node); - if ( - node.type === 'ExportNamedDeclaration' && - node.declaration && - node.declaration.declarations && - node.declaration.declarations.length === 1 && - node.declaration.declarations[0].type === 'VariableDeclarator' && - node.declaration.declarations[0].id && - node.declaration.declarations[0].id.name && - node.declaration.declarations[0].init && - ['CallExpression', 'ArrowFunctionExpression', 'FunctionExpression'].includes( - node.declaration.declarations[0].init.type - ) - ) { - const storyName = storyNameFromExport(node.declaration.declarations[0].id.name); - const toAdd = handleExportedName(title, storyName, node.declaration.declarations[0].init); - Object.assign(addsMap, toAdd); - } - }, - }); + const titleValue = titleProperty.value; + let title; + // if title is string: + if (titleValue.type === 'StringLiteral') { + title = titleProperty.value.value; + } + // if a tagged template string. + if (titleValue.type === 'TemplateLiteral' && titleValue.quasis.length > 0) { + title = titleValue.quasis[0].value.raw; + } + if (title) { + estraverse.traverse(ast, { + fallback: 'iteration', + enter: node => { + patchNode(node); + if ( + node.type === 'ExportNamedDeclaration' && + node.declaration && + node.declaration.declarations && + node.declaration.declarations.length === 1 && + node.declaration.declarations[0].type === 'VariableDeclarator' && + node.declaration.declarations[0].id && + node.declaration.declarations[0].id.name && + node.declaration.declarations[0].init && + ['CallExpression', 'ArrowFunctionExpression', 'FunctionExpression'].includes( + node.declaration.declarations[0].init.type + ) + ) { + const storyName = storyNameFromExport(node.declaration.declarations[0].id.name); + const toAdd = handleExportedName(title, storyName, node.declaration.declarations[0].init); + Object.assign(addsMap, toAdd); + } + }, + }); + } return { addsMap, idsToFrameworks }; } From 178cc317f5a0d424a9a3ea968579a8c81723b279 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Fri, 29 Nov 2019 00:53:06 +0800 Subject: [PATCH 2/7] Update inject-decorator.csf.test.js.snap --- .../__snapshots__/inject-decorator.csf.test.js.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/source-loader/src/server/abstract-syntax-tree/__snapshots__/inject-decorator.csf.test.js.snap b/lib/source-loader/src/server/abstract-syntax-tree/__snapshots__/inject-decorator.csf.test.js.snap index 3721312e035d..c31f7cbbf06a 100644 --- a/lib/source-loader/src/server/abstract-syntax-tree/__snapshots__/inject-decorator.csf.test.js.snap +++ b/lib/source-loader/src/server/abstract-syntax-tree/__snapshots__/inject-decorator.csf.test.js.snap @@ -5,7 +5,7 @@ exports[`inject-decorator positive - ts - csf includes storySource parameter in import { action } from \\"@storybook/addon-actions\\"; import { Button } from \\"@storybook/react/demo\\"; -export default {parameters: {\\"storySource\\":{\\"source\\":\\"import React from \\\\\\"react\\\\\\";\\\\nimport { action } from \\\\\\"@storybook/addon-actions\\\\\\";\\\\nimport { Button } from \\\\\\"@storybook/react/demo\\\\\\";\\\\n\\\\nexport default {\\\\n title: \\\\\\"Button\\\\\\"\\\\n};\\\\n\\\\nexport const text = () => (\\\\n \\\\n);\\\\n\\\\nexport const emoji = () => (\\\\n \\\\n);\\\\n\\",\\"locationsMap\\":{\\"button--text\\":{\\"startLoc\\":{\\"col\\":20,\\"line\\":9},\\"endLoc\\":{\\"col\\":1,\\"line\\":11},\\"startBody\\":{\\"col\\":20,\\"line\\":9},\\"endBody\\":{\\"col\\":1,\\"line\\":11}},\\"button--emoji\\":{\\"startLoc\\":{\\"col\\":21,\\"line\\":13},\\"endLoc\\":{\\"col\\":1,\\"line\\":19},\\"startBody\\":{\\"col\\":21,\\"line\\":13},\\"endBody\\":{\\"col\\":1,\\"line\\":19}}}},}, +export default {parameters: {\\"storySource\\":{\\"source\\":\\"import React from \\\\\\"react\\\\\\";\\\\nimport { action } from \\\\\\"@storybook/addon-actions\\\\\\";\\\\nimport { Button } from \\\\\\"@storybook/react/demo\\\\\\";\\\\n\\\\nexport default {\\\\n title: \\\\\\"Button\\\\\\"\\\\n};\\\\n\\\\nexport const text = () => (\\\\n \\\\n);\\\\n\\\\nexport const emoji = () => (\\\\n \\\\n);\\\\n\\",\\"locationsMap\\":{}},}, title: \\"Button\\" }; From 6e98d2c84a89728b7c972d669c307ce681bd5fa2 Mon Sep 17 00:00:00 2001 From: atanasster Date: Fri, 29 Nov 2019 11:01:09 -0500 Subject: [PATCH 3/7] make changecompatible backwards --- .../abstract-syntax-tree/traverse-helpers.js | 20 ++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/lib/source-loader/src/server/abstract-syntax-tree/traverse-helpers.js b/lib/source-loader/src/server/abstract-syntax-tree/traverse-helpers.js index 84238d328ccf..5022d02757dc 100644 --- a/lib/source-loader/src/server/abstract-syntax-tree/traverse-helpers.js +++ b/lib/source-loader/src/server/abstract-syntax-tree/traverse-helpers.js @@ -98,13 +98,19 @@ export function findExportsMap(ast) { } const titleValue = titleProperty.value; let title; - // if title is string: - if (titleValue.type === 'StringLiteral') { - title = titleProperty.value.value; - } - // if a tagged template string. - if (titleValue.type === 'TemplateLiteral' && titleValue.quasis.length > 0) { - title = titleValue.quasis[0].value.raw; + switch (titleValue.type) { + // if title is string: + case 'StringLiteral': + title = titleProperty.value.value; + break; + // if a tagged template string. + case 'TemplateLiteral': + if (titleValue.quasis.length > 0) { + title = titleValue.quasis[0].value.raw; + } + break; + default: + title = titleProperty.value.value; } if (title) { estraverse.traverse(ast, { From 940130200bef2dedf9cf750e2b0804d9c14b70be Mon Sep 17 00:00:00 2001 From: atanasster Date: Fri, 29 Nov 2019 11:10:30 -0500 Subject: [PATCH 4/7] made template title example more real-life --- .../stories/addon-docs/addon-docs.stories.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/official-storybook/stories/addon-docs/addon-docs.stories.js b/examples/official-storybook/stories/addon-docs/addon-docs.stories.js index 98782ec0e088..61a56ad71593 100644 --- a/examples/official-storybook/stories/addon-docs/addon-docs.stories.js +++ b/examples/official-storybook/stories/addon-docs/addon-docs.stories.js @@ -3,10 +3,10 @@ import notes from '../notes/notes.md'; import mdxNotes from '../notes/notes.mdx'; import { DocgenButton } from '../../components/DocgenButton'; -const stories = 'Stories'; +const docsTitle = title => `Docs/${title}`; export default { - title: `Addons/Docs/${stories}`, + title: `Addons/${docsTitle('Stories')}`, component: DocgenButton, }; From 4299c34a486f284f27e1a3986a4c3d772af28b25 Mon Sep 17 00:00:00 2001 From: atanasster Date: Fri, 29 Nov 2019 15:54:27 -0500 Subject: [PATCH 5/7] simplify conditional --- .../abstract-syntax-tree/traverse-helpers.js | 17 +++++------------ 1 file changed, 5 insertions(+), 12 deletions(-) diff --git a/lib/source-loader/src/server/abstract-syntax-tree/traverse-helpers.js b/lib/source-loader/src/server/abstract-syntax-tree/traverse-helpers.js index 5022d02757dc..be8ba1096008 100644 --- a/lib/source-loader/src/server/abstract-syntax-tree/traverse-helpers.js +++ b/lib/source-loader/src/server/abstract-syntax-tree/traverse-helpers.js @@ -98,19 +98,12 @@ export function findExportsMap(ast) { } const titleValue = titleProperty.value; let title; - switch (titleValue.type) { - // if title is string: - case 'StringLiteral': - title = titleProperty.value.value; - break; + if (titleValue.type === 'TemplateLiteral' && titleValue.quasis.length > 0) { // if a tagged template string. - case 'TemplateLiteral': - if (titleValue.quasis.length > 0) { - title = titleValue.quasis[0].value.raw; - } - break; - default: - title = titleProperty.value.value; + title = titleValue.quasis[0].value.raw; + } else { + // if title is string: 'StringLiteral' + title = titleProperty.value.value; } if (title) { estraverse.traverse(ast, { From bcf66e35241cf4f2624678ede55b56098d1b0ed2 Mon Sep 17 00:00:00 2001 From: atanasster Date: Sat, 30 Nov 2019 10:11:17 -0500 Subject: [PATCH 6/7] restore snapshot file --- .../__snapshots__/inject-decorator.csf.test.js.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/source-loader/src/server/abstract-syntax-tree/__snapshots__/inject-decorator.csf.test.js.snap b/lib/source-loader/src/server/abstract-syntax-tree/__snapshots__/inject-decorator.csf.test.js.snap index c31f7cbbf06a..3721312e035d 100644 --- a/lib/source-loader/src/server/abstract-syntax-tree/__snapshots__/inject-decorator.csf.test.js.snap +++ b/lib/source-loader/src/server/abstract-syntax-tree/__snapshots__/inject-decorator.csf.test.js.snap @@ -5,7 +5,7 @@ exports[`inject-decorator positive - ts - csf includes storySource parameter in import { action } from \\"@storybook/addon-actions\\"; import { Button } from \\"@storybook/react/demo\\"; -export default {parameters: {\\"storySource\\":{\\"source\\":\\"import React from \\\\\\"react\\\\\\";\\\\nimport { action } from \\\\\\"@storybook/addon-actions\\\\\\";\\\\nimport { Button } from \\\\\\"@storybook/react/demo\\\\\\";\\\\n\\\\nexport default {\\\\n title: \\\\\\"Button\\\\\\"\\\\n};\\\\n\\\\nexport const text = () => (\\\\n \\\\n);\\\\n\\\\nexport const emoji = () => (\\\\n \\\\n);\\\\n\\",\\"locationsMap\\":{}},}, +export default {parameters: {\\"storySource\\":{\\"source\\":\\"import React from \\\\\\"react\\\\\\";\\\\nimport { action } from \\\\\\"@storybook/addon-actions\\\\\\";\\\\nimport { Button } from \\\\\\"@storybook/react/demo\\\\\\";\\\\n\\\\nexport default {\\\\n title: \\\\\\"Button\\\\\\"\\\\n};\\\\n\\\\nexport const text = () => (\\\\n \\\\n);\\\\n\\\\nexport const emoji = () => (\\\\n \\\\n);\\\\n\\",\\"locationsMap\\":{\\"button--text\\":{\\"startLoc\\":{\\"col\\":20,\\"line\\":9},\\"endLoc\\":{\\"col\\":1,\\"line\\":11},\\"startBody\\":{\\"col\\":20,\\"line\\":9},\\"endBody\\":{\\"col\\":1,\\"line\\":11}},\\"button--emoji\\":{\\"startLoc\\":{\\"col\\":21,\\"line\\":13},\\"endLoc\\":{\\"col\\":1,\\"line\\":19},\\"startBody\\":{\\"col\\":21,\\"line\\":13},\\"endBody\\":{\\"col\\":1,\\"line\\":19}}}},}, title: \\"Button\\" }; From d92b315473113ef880ff816d9fbfa5244eebb330 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sun, 1 Dec 2019 11:04:05 +0800 Subject: [PATCH 7/7] Update addon-docs.stories.js --- .../official-storybook/stories/addon-docs/addon-docs.stories.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/official-storybook/stories/addon-docs/addon-docs.stories.js b/examples/official-storybook/stories/addon-docs/addon-docs.stories.js index 61a56ad71593..81e99d1aecd7 100644 --- a/examples/official-storybook/stories/addon-docs/addon-docs.stories.js +++ b/examples/official-storybook/stories/addon-docs/addon-docs.stories.js @@ -6,7 +6,7 @@ import { DocgenButton } from '../../components/DocgenButton'; const docsTitle = title => `Docs/${title}`; export default { - title: `Addons/${docsTitle('Stories')}`, + title: `Addons/${docsTitle('stories')}`, component: DocgenButton, };