From 9abff33e1e6e857bc417e29867888369b2a161d1 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 17 Oct 2019 14:51:14 +0200 Subject: [PATCH] Source-loader: Fix CSF typescript parser (#8440) Source-loader: Fix CSF typescript parser Co-authored-by: Michael Shilman --- __mocks__/inject-decorator.ts.csf.txt | 19 ++++++++++++++ .../inject-decorator.csf.test.js.snap | 25 +++++++++++++++++++ .../abstract-syntax-tree/generate-helpers.js | 9 ++++--- .../inject-decorator.csf.test.js | 22 ++++++++++++++++ .../abstract-syntax-tree/traverse-helpers.js | 5 ++++ 5 files changed, 76 insertions(+), 4 deletions(-) create mode 100644 __mocks__/inject-decorator.ts.csf.txt create mode 100644 lib/source-loader/src/server/abstract-syntax-tree/__snapshots__/inject-decorator.csf.test.js.snap create mode 100644 lib/source-loader/src/server/abstract-syntax-tree/inject-decorator.csf.test.js diff --git a/__mocks__/inject-decorator.ts.csf.txt b/__mocks__/inject-decorator.ts.csf.txt new file mode 100644 index 000000000000..47e60534ac87 --- /dev/null +++ b/__mocks__/inject-decorator.ts.csf.txt @@ -0,0 +1,19 @@ +import React from "react"; +import { action } from "@storybook/addon-actions"; +import { Button } from "@storybook/react/demo"; + +export default { + title: "Button" +}; + +export const text = () => ( + +); + +export const emoji = () => ( + +); 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 new file mode 100644 index 000000000000..24e3b615b797 --- /dev/null +++ b/lib/source-loader/src/server/abstract-syntax-tree/__snapshots__/inject-decorator.csf.test.js.snap @@ -0,0 +1,25 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`inject-decorator positive - ts - csf includes storySource parameter in the default exported object 1`] = ` +"var addSourceDecorator = require(\\"@storybook/source-loader/preview\\").addSource; +import React from \\"react\\"; +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\\":{}},}, + title: \\"Button\\" +}; + +export const text = addSourceDecorator(() => ( + +), {__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__});; + +export const emoji = addSourceDecorator(() => ( + +), {__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__}); +" +`; diff --git a/lib/source-loader/src/server/abstract-syntax-tree/generate-helpers.js b/lib/source-loader/src/server/abstract-syntax-tree/generate-helpers.js index 0aeb8a23394e..ecaab96fe20a 100644 --- a/lib/source-loader/src/server/abstract-syntax-tree/generate-helpers.js +++ b/lib/source-loader/src/server/abstract-syntax-tree/generate-helpers.js @@ -162,10 +162,11 @@ export function generateSourcesInExportedParameters(source, ast, additionalParam const newParameters = `${propertyDeclaration}${additionalParametersAsJson},${parametersSliceOfCode.substring( 1 )}${comma}`; - const result = - splicedSource.substring(0, indexWhereToAppend) + - newParameters + - splicedSource.substring(indexWhereToAppend); + const additionalComma = comma === ',' ? '' : ','; + const result = `${splicedSource.substring( + 0, + indexWhereToAppend + )}${newParameters}${additionalComma}${splicedSource.substring(indexWhereToAppend)}`; return result; } return source; diff --git a/lib/source-loader/src/server/abstract-syntax-tree/inject-decorator.csf.test.js b/lib/source-loader/src/server/abstract-syntax-tree/inject-decorator.csf.test.js new file mode 100644 index 000000000000..2d6f538ce35e --- /dev/null +++ b/lib/source-loader/src/server/abstract-syntax-tree/inject-decorator.csf.test.js @@ -0,0 +1,22 @@ +import fs from 'fs'; +import path from 'path'; +import injectDecorator from './inject-decorator'; + +describe('inject-decorator', () => { + describe('positive - ts - csf', () => { + const mockFilePath = './__mocks__/inject-decorator.ts.csf.txt'; + const source = fs.readFileSync(mockFilePath, 'utf-8'); + const result = injectDecorator(source, path.resolve(__dirname, mockFilePath), { + parser: 'typescript', + }); + + it('includes storySource parameter in the default exported object', () => { + expect(result.source).toMatchSnapshot(); + expect(result.source).toEqual( + expect.stringContaining( + 'export default {parameters: {"storySource":{"source":"import React from' + ) + ); + }); + }); +}); 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 751bc5162c97..1817a0ad8867 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 @@ -169,6 +169,11 @@ export function popParametersObjectFromDefaultExport(source, ast) { ); foundParametersProperty = !!parametersProperty; + if (foundParametersProperty) { + patchNode(parametersProperty.value); + } else { + patchNode(node.declaration); + } splicedSource = parametersProperty ? source.substring(0, parametersProperty.value.start) +