feat: doc default export as const

ccontrols · May 20, 2021 · 05348ee · 05348ee
1 parent 52d6a9a
commit 05348ee
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 30 deletions.
diff --git a/core/instrument/src/babel/esm-stories.ts b/core/instrument/src/babel/esm-stories.ts
@@ -40,17 +40,24 @@ export const extractCSFStories = (
   traverse(ast, {
     ExportDefaultDeclaration: (path: any) => {
       const { declaration } = path.node;
-      const attributes = extractAttributes(declaration);
-      const template = declaration.expression?.properties.find(
-        (prop: any) =>
-          prop.key?.name === 'template' &&
-          prop.value?.type === 'ArrowFunctionExpression',
-      );
+      let attributes: ReturnType<typeof extractAttributes>;
+      let template: any;
+      if (declaration.type === 'Identifier') {
+        attributes = { ...locals[declaration.name] };
+        delete attributes['id'];
+        delete attributes['name'];
+      } else {
+        attributes = extractAttributes(declaration);
+        template = declaration.expression?.properties.find(
+          (prop: any) =>
+            prop.key?.name === 'template' &&
+            prop.value?.type === 'ArrowFunctionExpression',
+        );
+      }
       const { title: docTitle, name } = attributes || {};
       if (template) {
         delete attributes.template;
       }
-
       const title = docTitle || name;
       if (typeof title === 'string') {
         const attrComponents = componentsFromParams(attributes);
@@ -116,7 +123,6 @@ export const extractCSFStories = (
     },
     VariableDeclaration: (path: any) => {
       const story = extractVarFunction(
-        ast,
         _options,
         { source, filePath },
         path,
@@ -142,17 +148,23 @@ export const extractCSFStories = (
         const { declarations } = declaration;
         if (declarations) {
           if (Array.isArray(declarations) && declarations.length > 0) {
-            const story = extractFunction(
-              path as NodePath,
-              declarations[0],
-              declarations[0].id.name,
-            );
-            if (story) {
-              const name = story.name;
-              store.stories[name] = {
-                ...story,
-                ...globals[name],
-              };
+            const declaration = declarations[0];
+            if (
+              declaration.init.type !== 'ObjectExpression' ||
+              store.doc?.template
+            ) {
+              const story = extractFunction(
+                path as NodePath,
+                declaration,
+                declaration.id.name,
+              );
+              if (story) {
+                const name = story.name;
+                store.stories[name] = {
+                  ...story,
+                  ...globals[name],
+                };
+              }
             }
           }
         } else {

diff --git a/core/instrument/src/babel/extract-function.ts b/core/instrument/src/babel/extract-function.ts
@@ -1,6 +1,7 @@
 import { Story, Example } from '@component-controls/core';
 import traverse, { NodePath } from '@babel/traverse';
-import { File, FunctionDeclaration, VariableDeclarator } from '@babel/types';
+import { FunctionDeclaration, VariableDeclarator } from '@babel/types';
+import { extractAttributes } from './extract-attributes';
 import { extractFunctionParameters } from './extract-function-parameters';
 import { followStoryImport } from './follow-imports';
 import { sourceLocation } from '../misc/source-location';
@@ -37,16 +38,17 @@ export const extractFunction = (
         );
       }
       case 'ObjectExpression': {
+        const attributes = extractAttributes(declaration.init);
+        const story: Story = {
+          name,
+          id: name,
+          ...attributes,
+        };
         if (template) {
-          const story: Story = {
-            name,
-            id: name,
-            loc: template.loc,
-            arguments: template.arguments,
-          };
-          return story;
+          story.loc = template.loc;
+          story.arguments = template.arguments;
         }
-        break;
+        return story;
       }
       case 'CallExpression': {
         //template.bind
@@ -81,7 +83,6 @@ export const extractFunction = (
 };
 
 export const extractVarFunction = (
-  ast: File,
   _options: InstrumentOptions,
   { source, filePath }: { source: string; filePath: string },
   path: any,

diff --git a/core/instrument/src/babel/mdx-stories.ts b/core/instrument/src/babel/mdx-stories.ts
@@ -205,7 +205,6 @@ export const extractMDXStories: (
     },
     VariableDeclaration: (path: any) => {
       const story = extractVarFunction(
-        ast,
         _options,
         { source, filePath },
         path,

diff --git a/core/instrument/test/esm-doc.test.ts b/core/instrument/test/esm-doc.test.ts
@@ -4,6 +4,15 @@ const createTest = (fileName: string, callback: TestCallback) =>
   fixtureToTest(['esm', 'doc'], fileName, callback);
 
 describe('esm-doc', () => {
+  createTest('default-export-const.ts', parsed => {
+    expect(parsed).toMatchObject({
+      doc: {
+        title: 'Story',
+        component: 'ControlsTable',
+      },
+    });
+  });
+
   createTest('title-and-parameters.js', parsed => {
     expect(parsed).toMatchObject({
       doc: {

diff --git a/core/instrument/test/fixtures/esm/doc/default-export-const.ts b/core/instrument/test/fixtures/esm/doc/default-export-const.ts
@@ -0,0 +1,8 @@
+import { Document } from '@component-controls/core';
+const { ControlsTable } = require('@component-controls/core');
+const doc: Document = {
+  title: 'Story',
+  component: ControlsTable,
+};
+
+export default doc;