From 05348eeaac139ad26a231df6013c0e41d419cb4b Mon Sep 17 00:00:00 2001 From: atanasster Date: Thu, 20 May 2021 11:26:02 +0300 Subject: [PATCH] feat: doc default export as const --- core/instrument/src/babel/esm-stories.ts | 50 ++++++++++++------- core/instrument/src/babel/extract-function.ts | 21 ++++---- core/instrument/src/babel/mdx-stories.ts | 1 - core/instrument/test/esm-doc.test.ts | 9 ++++ .../fixtures/esm/doc/default-export-const.ts | 8 +++ 5 files changed, 59 insertions(+), 30 deletions(-) create mode 100644 core/instrument/test/fixtures/esm/doc/default-export-const.ts diff --git a/core/instrument/src/babel/esm-stories.ts b/core/instrument/src/babel/esm-stories.ts index 909b08238..6ce5b605b 100644 --- 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; + 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 index dfcd3597e..073c29ec4 100644 --- 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 index ab37d08f7..034793fe9 100644 --- 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 index 68fc6f65c..892f16400 100644 --- 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 new file mode 100644 index 000000000..d1991cfd6 --- /dev/null +++ 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;