Source-loader: Handle template strings in CSF title (#8995)

Source-loader: Handle template strings in CSF title
storybookjs · Dec 2, 2019 · 1e53a3a · 1e53a3a
2 parents 2e5a473 + be3baa1
commit 1e53a3a
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 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
@@ -3,8 +3,10 @@ import notes from '../notes/notes.md';
 import mdxNotes from '../notes/notes.mdx';
 import { DocgenButton } from '../../components/DocgenButton';
 
+const docsTitle = title => `Docs/${title}`;
+
 export default {
-  title: 'Addons/Docs/stories',
+  title: `Addons/${docsTitle('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
@@ -96,31 +96,40 @@ 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 (titleValue.type === 'TemplateLiteral' && titleValue.quasis.length > 0) {
+    // if a  tagged template string.
+    title = titleValue.quasis[0].value.raw;
+  } else {
+    // if title is string: 'StringLiteral'
+    title = titleProperty.value.value;
+  }
+  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 };
 }