From e3bf43637933dd291f67a7dbcf0cb708032045f7 Mon Sep 17 00:00:00 2001 From: atanasster Date: Tue, 21 Jan 2020 10:56:08 -0500 Subject: [PATCH] code changes according to shilman comments --- addons/storysource/package.json | 2 +- addons/storysource/src/StoryPanel.tsx | 19 ++----------- addons/storysource/src/preview.ts | 5 ++-- addons/storysource/src/typings.d.ts | 1 - lib/components/package.json | 2 +- lib/components/src/index.ts | 1 + .../syntaxhighlighter/syntaxhighlighter.tsx | 5 +++- lib/components/src/typings.d.ts | 2 +- lib/source-loader/package.json | 4 +-- lib/source-loader/preview.js | 1 - .../inject-decorator.csf.test.js.snap | 0 .../inject-decorator.test.js.snap | 28 +++++++++---------- .../abstract-syntax-tree/default-options.js | 0 .../abstract-syntax-tree/generate-helpers.js | 2 +- .../inject-decorator.csf.test.js | 0 .../abstract-syntax-tree/inject-decorator.js | 0 .../inject-decorator.test.js | 0 .../abstract-syntax-tree/parse-helpers.js | 0 .../abstract-syntax-tree/parsers/index.js | 0 .../parsers/parser-flow.js | 0 .../abstract-syntax-tree/parsers/parser-js.js | 0 .../abstract-syntax-tree/parsers/parser-ts.js | 0 .../abstract-syntax-tree/traverse-helpers.js | 0 lib/source-loader/src/{server => }/build.js | 2 +- .../dependencies-lookup/readAsObject.js | 0 .../src/{server/index.js => index.ts} | 3 ++ lib/source-loader/src/types.ts | 13 +++++++++ lib/source-loader/tsconfig.json | 14 ++++++++++ yarn.lock | 18 ++++++++---- 29 files changed, 75 insertions(+), 47 deletions(-) delete mode 100644 addons/storysource/src/typings.d.ts delete mode 100644 lib/source-loader/preview.js rename lib/source-loader/src/{server => }/abstract-syntax-tree/__snapshots__/inject-decorator.csf.test.js.snap (100%) rename lib/source-loader/src/{server => }/abstract-syntax-tree/__snapshots__/inject-decorator.test.js.snap (95%) rename lib/source-loader/src/{server => }/abstract-syntax-tree/default-options.js (100%) rename lib/source-loader/src/{server => }/abstract-syntax-tree/generate-helpers.js (99%) rename lib/source-loader/src/{server => }/abstract-syntax-tree/inject-decorator.csf.test.js (100%) rename lib/source-loader/src/{server => }/abstract-syntax-tree/inject-decorator.js (100%) rename lib/source-loader/src/{server => }/abstract-syntax-tree/inject-decorator.test.js (100%) rename lib/source-loader/src/{server => }/abstract-syntax-tree/parse-helpers.js (100%) rename lib/source-loader/src/{server => }/abstract-syntax-tree/parsers/index.js (100%) rename lib/source-loader/src/{server => }/abstract-syntax-tree/parsers/parser-flow.js (100%) rename lib/source-loader/src/{server => }/abstract-syntax-tree/parsers/parser-js.js (100%) rename lib/source-loader/src/{server => }/abstract-syntax-tree/parsers/parser-ts.js (100%) rename lib/source-loader/src/{server => }/abstract-syntax-tree/traverse-helpers.js (100%) rename lib/source-loader/src/{server => }/build.js (92%) rename lib/source-loader/src/{server => }/dependencies-lookup/readAsObject.js (100%) rename lib/source-loader/src/{server/index.js => index.ts} (61%) create mode 100644 lib/source-loader/src/types.ts create mode 100644 lib/source-loader/tsconfig.json diff --git a/addons/storysource/package.json b/addons/storysource/package.json index 6adf838285f..d874f3d4141 100644 --- a/addons/storysource/package.json +++ b/addons/storysource/package.json @@ -31,12 +31,12 @@ "dependencies": { "@storybook/addons": "5.3.5", "@storybook/api": "5.3.5", + "@storybook/client-logger": "5.3.5", "@storybook/components": "5.3.5", "@storybook/core-events": "5.3.5", "@storybook/router": "5.3.5", "@storybook/source-loader": "5.3.5", "@storybook/theming": "5.3.5", - "@types/react-syntax-highlighter": "11.0.2", "core-js": "^3.0.1", "estraverse": "^4.2.0", "loader-utils": "^1.2.3", diff --git a/addons/storysource/src/StoryPanel.tsx b/addons/storysource/src/StoryPanel.tsx index 075a4d354fd..00435f11351 100644 --- a/addons/storysource/src/StoryPanel.tsx +++ b/addons/storysource/src/StoryPanel.tsx @@ -6,9 +6,10 @@ import { SyntaxHighlighter, SyntaxHighlighterProps, SyntaxHighlighterRendererProps, + createSyntaxHighlighterElement, } from '@storybook/components'; -import createElement from 'react-syntax-highlighter/dist/esm/create-element'; +import { SourceBlock, LocationsMap } from '@storybook/source-loader'; const StyledStoryLink = styled(Link)<{ to: string; key: string }>(({ theme }) => ({ display: 'block', @@ -30,26 +31,12 @@ const StyledSyntaxHighlighter = styled(SyntaxHighlighter) a.startLoc.line === b.startLoc.line && a.startLoc.col === b.startLoc.col && a.endLoc.line === b.endLoc.line && a.endLoc.col === b.endLoc.col; -interface LocationsMap { - [key: string]: SourceBlock; -} - interface StoryPanelProps { api: API; } @@ -103,7 +90,7 @@ export const StoryPanel: React.FC = ({ api }) => { const createPart = ({ rows, stylesheet, useInlineStyles }: SyntaxHighlighterRendererProps) => rows.map((node, i) => - createElement({ + createSyntaxHighlighterElement({ node, stylesheet, useInlineStyles, diff --git a/addons/storysource/src/preview.ts b/addons/storysource/src/preview.ts index 4edb1810128..e36004385ae 100644 --- a/addons/storysource/src/preview.ts +++ b/addons/storysource/src/preview.ts @@ -1,6 +1,7 @@ +import { logger } from '@storybook/client-logger'; + export function withStorySource(source: string, locationsMap = {}) { - // eslint-disable-next-line no-console - console.error( + logger.error( '@storybook/addon-storysource/withStorySource is deprecated, please use paramaters instead.' ); diff --git a/addons/storysource/src/typings.d.ts b/addons/storysource/src/typings.d.ts deleted file mode 100644 index 0ea0d62dabf..00000000000 --- a/addons/storysource/src/typings.d.ts +++ /dev/null @@ -1 +0,0 @@ -declare module 'react-syntax-highlighter/dist/esm/create-element'; diff --git a/lib/components/package.json b/lib/components/package.json index de2e9d09176..c591d191b00 100644 --- a/lib/components/package.json +++ b/lib/components/package.json @@ -29,7 +29,6 @@ "dependencies": { "@storybook/client-logger": "5.3.5", "@storybook/theming": "5.3.5", - "@types/react-syntax-highlighter": "11.0.2", "@types/react-textarea-autosize": "^4.3.3", "core-js": "^3.0.1", "global": "^4.3.2", @@ -50,6 +49,7 @@ "ts-dedent": "^1.1.0" }, "devDependencies": { + "@types/react-syntax-highlighter": "^11.0.2", "enzyme": "^3.9.0", "jest": "^24.7.1", "jest-enzyme": "^7.0.2" diff --git a/lib/components/src/index.ts b/lib/components/src/index.ts index f257bcddfe0..f78d37af51c 100644 --- a/lib/components/src/index.ts +++ b/lib/components/src/index.ts @@ -7,6 +7,7 @@ export { SyntaxHighlighter, SyntaxHighlighterProps, SyntaxHighlighterRendererProps, + createSyntaxHighlighterElement, } from './syntaxhighlighter/syntaxhighlighter'; // UI diff --git a/lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx b/lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx index 641318d3555..056c331fc75 100644 --- a/lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx +++ b/lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx @@ -11,12 +11,15 @@ import tsx from 'react-syntax-highlighter/dist/esm/languages/prism/tsx'; import typescript from 'react-syntax-highlighter/dist/esm/languages/prism/typescript'; import { PrismLight as ReactSyntaxHighlighter } from 'react-syntax-highlighter'; - +// @ts-ignore +import createElement from 'react-syntax-highlighter/dist/esm/create-element'; import { ActionBar } from '../ActionBar/ActionBar'; import { ScrollArea } from '../ScrollArea/ScrollArea'; import { formatter } from './formatter'; +export { createElement as createSyntaxHighlighterElement }; + ReactSyntaxHighlighter.registerLanguage('jsx', jsx); ReactSyntaxHighlighter.registerLanguage('bash', bash); ReactSyntaxHighlighter.registerLanguage('css', css); diff --git a/lib/components/src/typings.d.ts b/lib/components/src/typings.d.ts index eb62749232f..9ceb2cda3fa 100644 --- a/lib/components/src/typings.d.ts +++ b/lib/components/src/typings.d.ts @@ -1,4 +1,4 @@ declare module 'global'; declare module 'simplebar-react'; declare module 'markdown-to-jsx'; -declare module '*.md'; +declare module '*.md'; \ No newline at end of file diff --git a/lib/source-loader/package.json b/lib/source-loader/package.json index 990746025d7..5bc6c83fbb1 100644 --- a/lib/source-loader/package.json +++ b/lib/source-loader/package.json @@ -22,8 +22,8 @@ "*.js", "*.d.ts" ], - "main": "dist/server/index.js", - "jsnext:main": "src/server/index.js", + "main": "dist/index.js", + "types": "dist/index.d.ts", "scripts": { "prepare": "node ../../scripts/prepare.js" }, diff --git a/lib/source-loader/preview.js b/lib/source-loader/preview.js deleted file mode 100644 index 6f5b28b4b66..00000000000 --- a/lib/source-loader/preview.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('./dist/client/preview'); diff --git a/lib/source-loader/src/server/abstract-syntax-tree/__snapshots__/inject-decorator.csf.test.js.snap b/lib/source-loader/src/abstract-syntax-tree/__snapshots__/inject-decorator.csf.test.js.snap similarity index 100% rename from lib/source-loader/src/server/abstract-syntax-tree/__snapshots__/inject-decorator.csf.test.js.snap rename to lib/source-loader/src/abstract-syntax-tree/__snapshots__/inject-decorator.csf.test.js.snap diff --git a/lib/source-loader/src/server/abstract-syntax-tree/__snapshots__/inject-decorator.test.js.snap b/lib/source-loader/src/abstract-syntax-tree/__snapshots__/inject-decorator.test.js.snap similarity index 95% rename from lib/source-loader/src/server/abstract-syntax-tree/__snapshots__/inject-decorator.test.js.snap rename to lib/source-loader/src/abstract-syntax-tree/__snapshots__/inject-decorator.test.js.snap index c3736b82d56..db66423186b 100644 --- a/lib/source-loader/src/server/abstract-syntax-tree/__snapshots__/inject-decorator.test.js.snap +++ b/lib/source-loader/src/abstract-syntax-tree/__snapshots__/inject-decorator.test.js.snap @@ -283,7 +283,7 @@ import { storiesOf } from '@storybook/angular'; }) class WithNgContentComponent {} -storiesOf('Custom|ng-content', module).addParameters({ storySource: { source: __STORY__, locationsMap: __ADDS_MAP__ } }).add('Default', () => ({ +storiesOf('Custom|ng-content', module).addParameters({ storySource: { source: __STORY__, locationsMap: __LOCATIONS_MAP__ } }).add('Default', () => ({ template: \`

This is rendered in ng-content

\`, moduleMetadata: { declarations: [WithNgContentComponent], @@ -328,7 +328,7 @@ class Table extends React.Component { } } -const stories = storiesOf('Table', module).addParameters({ storySource: { source: __STORY__, locationsMap: __ADDS_MAP__ } }); +const stories = storiesOf('Table', module).addParameters({ storySource: { source: __STORY__, locationsMap: __LOCATIONS_MAP__ } }); stories.add('Flow Class', withInfo('Lorum Ipsum Nem')(() => )); " `; @@ -377,7 +377,7 @@ class WithStoreComponent { } } -storiesOf('ngrx|Store', module).addParameters({ storySource: { source: __STORY__, locationsMap: __ADDS_MAP__ } }) +storiesOf('ngrx|Store', module).addParameters({ storySource: { source: __STORY__, locationsMap: __LOCATIONS_MAP__ } }) .addDecorator( moduleMetadata({ imports: [StoreModule.forRoot({})], @@ -659,7 +659,7 @@ import FlowTypeButton from '../components/FlowTypeButton'; import BaseButton from '../components/BaseButton'; import TableComponent from '../components/TableComponent'; -storiesOf('Addons|Info.React Docgen', module).addParameters({ storySource: { source: __STORY__, locationsMap: __ADDS_MAP__ } }) +storiesOf('Addons|Info.React Docgen', module).addParameters({ storySource: { source: __STORY__, locationsMap: __LOCATIONS_MAP__ } }) .add( 'Comments from PropType declarations', withInfo( @@ -690,12 +690,12 @@ const Button = () =>