code changes according to shilman comments

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",

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)<SyntaxHighlighterProps
   fontSize: theme.typography.size.s2 - 1,
 }));
 
-interface SourceLoc {
-  line: number;
-  col: number;
-}
-
-interface SourceBlock {
-  startLoc: SourceLoc;
-  endLoc: SourceLoc;
-}
-
 const areLocationsEqual = (a: SourceBlock, b: SourceBlock): boolean =>
   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<StoryPanelProps> = ({ api }) => {
 
   const createPart = ({ rows, stylesheet, useInlineStyles }: SyntaxHighlighterRendererProps) =>
     rows.map((node, i) =>
-      createElement({
+      createSyntaxHighlighterElement({
         node,
         stylesheet,
         useInlineStyles,

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.'
   );
 

addons/storysource/src/typings.d.ts

@@ -1 +0,0 @@
-declare module 'react-syntax-highlighter/dist/esm/create-element';

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"

lib/components/src/index.ts

@@ -7,6 +7,7 @@ export {
   SyntaxHighlighter,
   SyntaxHighlighterProps,
   SyntaxHighlighterRendererProps,
+  createSyntaxHighlighterElement,
 } from './syntaxhighlighter/syntaxhighlighter';
 
 // UI

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);

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';

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"
   },

lib/source-loader/preview.js

@@ -1 +0,0 @@
-module.exports = require('./dist/client/preview');

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: \`<storybook-with-ng-content><h1>This is rendered in ng-content</h1></storybook-with-ng-content>\`,
   moduleMetadata: {
     declarations: [WithNgContentComponent],
@@ -328,7 +328,7 @@ class Table extends React.Component<Props, State> {
   }
 }
 
-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')(() => <Table />));
 "
 `;
@@ -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 = () => <button />;
 Maybe include a [link](http://storybook.js.org) to your project as well.
 \`;
 
-storiesOf('Addons|Info.Markdown', module).addParameters({ storySource: { source: __STORY__, locationsMap: __ADDS_MAP__ } }).add(
+storiesOf('Addons|Info.Markdown', module).addParameters({ storySource: { source: __STORY__, locationsMap: __LOCATIONS_MAP__ } }).add(
   'Displays Markdown in description',
   withInfo(markdownDescription)(() => <BaseButton onClick={action('clicked')} label=\\"Button\\" />)
 );
 
-storiesOf('Addons|Info.Options.inline', module).addParameters({ storySource: { source: __STORY__, locationsMap: __ADDS_MAP__ } }).add(
+storiesOf('Addons|Info.Options.inline', module).addParameters({ storySource: { source: __STORY__, locationsMap: __LOCATIONS_MAP__ } }).add(
   'Inlines component inside story',
   withInfo({
     text: 'Component should be inlined between description and PropType table',
@@ -703,7 +703,7 @@ storiesOf('Addons|Info.Options.inline', module).addParameters({ storySource: { s
   })(() => <BaseButton label=\\"Button\\" />)
 );
 
-storiesOf('Addons|Info.Options.header', module).addParameters({ storySource: { source: __STORY__, locationsMap: __ADDS_MAP__ } }).add(
+storiesOf('Addons|Info.Options.header', module).addParameters({ storySource: { source: __STORY__, locationsMap: __LOCATIONS_MAP__ } }).add(
   'Shows or hides Info Addon header',
   withInfo({
     text: 'The Info Addon header should be hidden',
@@ -711,7 +711,7 @@ storiesOf('Addons|Info.Options.header', module).addParameters({ storySource: { s
   })(() => <BaseButton label=\\"Button\\" />)
 );
 
-storiesOf('Addons|Info.Options.source', module).addParameters({ storySource: { source: __STORY__, locationsMap: __ADDS_MAP__ } }).add(
+storiesOf('Addons|Info.Options.source', module).addParameters({ storySource: { source: __STORY__, locationsMap: __LOCATIONS_MAP__ } }).add(
   'Shows or hides Info Addon source',
   withInfo({
     text: 'The Info Addon source section should be hidden',
@@ -719,7 +719,7 @@ storiesOf('Addons|Info.Options.source', module).addParameters({ storySource: { s
   })(() => <BaseButton label=\\"Button\\" />)
 );
 
-storiesOf('Addons|Info.Options.propTables', module).addParameters({ storySource: { source: __STORY__, locationsMap: __ADDS_MAP__ } }).add(
+storiesOf('Addons|Info.Options.propTables', module).addParameters({ storySource: { source: __STORY__, locationsMap: __LOCATIONS_MAP__ } }).add(
   'Shows additional component prop tables',
   withInfo({
     text: 'There should be a prop table added for a component not included in the story',
@@ -727,7 +727,7 @@ storiesOf('Addons|Info.Options.propTables', module).addParameters({ storySource:
   })(() => <BaseButton label=\\"Button\\" />)
 );
 
-storiesOf('Addons|Info.Options.propTablesExclude', module).addParameters({ storySource: { source: __STORY__, locationsMap: __ADDS_MAP__ } }).add(
+storiesOf('Addons|Info.Options.propTablesExclude', module).addParameters({ storySource: { source: __STORY__, locationsMap: __LOCATIONS_MAP__ } }).add(
   'Exclude component from prop tables',
   withInfo({
     text: 'This can exclude extraneous components from being displayed in prop tables.',
@@ -740,7 +740,7 @@ storiesOf('Addons|Info.Options.propTablesExclude', module).addParameters({ story
   ))
 );
 
-storiesOf('Addons|Info.Options.styles', module).addParameters({ storySource: { source: __STORY__, locationsMap: __ADDS_MAP__ } })
+storiesOf('Addons|Info.Options.styles', module).addParameters({ storySource: { source: __STORY__, locationsMap: __LOCATIONS_MAP__ } })
   .add(
     'Extend info styles with an object',
     withInfo({
@@ -774,14 +774,14 @@ storiesOf('Addons|Info.Options.styles', module).addParameters({ storySource: { s
     })(() => <BaseButton label=\\"Button\\" />)
   );
 
-storiesOf('Addons|Info.Options.TableComponent', module).addParameters({ storySource: { source: __STORY__, locationsMap: __ADDS_MAP__ } }).add(
+storiesOf('Addons|Info.Options.TableComponent', module).addParameters({ storySource: { source: __STORY__, locationsMap: __LOCATIONS_MAP__ } }).add(
   'Use a custom component for the table',
   withInfo({
     TableComponent,
   })(() => <BaseButton label=\\"Button\\" />)
 );
 
-storiesOf('Addons|Info.Decorator', module).addParameters({ storySource: { source: __STORY__, locationsMap: __ADDS_MAP__ } })
+storiesOf('Addons|Info.Decorator', module).addParameters({ storySource: { source: __STORY__, locationsMap: __LOCATIONS_MAP__ } })
   .addDecorator((story, context) =>
     withInfo('Info could be used as a global or local decorator as well.')(story)(context)
   )
@@ -793,7 +793,7 @@ const Input = hoc(() => <input type=\\"text\\" />);
 
 const TextArea = hoc(({ children }) => <textarea>{children}</textarea>);
 
-storiesOf('Addons|Info.GitHub issues', module).addParameters({ storySource: { source: __STORY__, locationsMap: __ADDS_MAP__ } }).add(
+storiesOf('Addons|Info.GitHub issues', module).addParameters({ storySource: { source: __STORY__, locationsMap: __LOCATIONS_MAP__ } }).add(
   '#1814',
   withInfo('Allow Duplicate DisplayNames for HOC #1814')(() => (
     <div>

lib/source-loader/src/abstract-syntax-tree/generate-helpers.js

@@ -63,7 +63,7 @@ function prettifyCode(source, { prettierConfig, parser, filepath }) {
 }
 
 const ADD_PARAMETERS_STATEMENT =
-  '.addParameters({ storySource: { source: __STORY__, locationsMap: __ADDS_MAP__ } })';
+  '.addParameters({ storySource: { source: __STORY__, locationsMap: __LOCATIONS_MAP__ } })';
 const applyExportDecoratorStatement = part =>
   part.declaration.isVariableDeclaration
     ? ` ${part.source};`

lib/source-loader/src/build.js

@@ -16,7 +16,7 @@ export function transform(inputSource) {
       // @ts-ignore
       var __STORY__ = ${sourceJson};
       // @ts-ignore
-      var __ADDS_MAP__ = ${JSON.stringify(addsMap)};
+      var __LOCATIONS_MAP__ = ${JSON.stringify(addsMap)};
     `;
     return `${preamble}\n${source}`;
   });

lib/source-loader/src/index.ts

@@ -1,3 +1,6 @@
+// @ts-ignore
 import { transform } from './build';
 
 export default transform;
+
+export * from './types';

lib/source-loader/src/types.ts

@@ -0,0 +1,13 @@
+export interface SourceLoc {
+  line: number;
+  col: number;
+}
+
+export interface SourceBlock {
+  startLoc: SourceLoc;
+  endLoc: SourceLoc;
+}
+
+export interface LocationsMap {
+  [key: string]: SourceBlock;
+}

lib/source-loader/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "types": ["webpack-env"]
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "src/tests/**/*",
+    "src/__tests__/**/*"
+  ]
+}

yarn.lock

@@ -4438,10 +4438,10 @@
     "@types/react-dom" "*"
     "@types/react-transition-group" "*"
 
-"@types/react-syntax-highlighter@11.0.2":
-  version "11.0.2"
-  resolved "https://registry.yarnpkg.com/@types/react-syntax-highlighter/-/react-syntax-highlighter-11.0.2.tgz#a2e3ff657d7c47813f80ca930f3d959c31ec51e3"
-  integrity sha512-iMNcixH8330f2dq0RY+VOXCP8JFehgmOhLOtnO85Ty+qu0fHXJNEqWx5VuFv8v0aEq0U/N9d/k1yvA+c6PEmPw==
+"@types/react-syntax-highlighter@^11.0.2", "@types/react-syntax-highlighter@^11.0.4":
+  version "11.0.4"
+  resolved "https://registry.yarnpkg.com/@types/react-syntax-highlighter/-/react-syntax-highlighter-11.0.4.tgz#d86d17697db62f98046874f62fdb3e53a0bbc4cd"
+  integrity sha512-9GfTo3a0PHwQeTVoqs0g5bS28KkSY48pp5659wA+Dp4MqceDEa8EHBqrllJvvtyusszyJhViUEap0FDvlk/9Zg==
   dependencies:
     "@types/react" "*"
 
@@ -4475,6 +4475,14 @@
     "@types/prop-types" "*"
     csstype "^2.2.0"
 
+"@types/react@^16.9.17":
+  version "16.9.17"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.17.tgz#58f0cc0e9ec2425d1441dd7b623421a867aa253e"
+  integrity sha512-UP27In4fp4sWF5JgyV6pwVPAQM83Fj76JOcg02X5BZcpSu5Wx+fP9RMqc2v0ssBoQIFvD5JdKY41gjJJKmw6Bg==
+  dependencies:
+    "@types/prop-types" "*"
+    csstype "^2.2.0"
+
 "@types/retry@^0.12.0":
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/@types/retry/-/retry-0.12.0.tgz#2b35eccfcee7d38cd72ad99232fbd58bffb3c84d"
@@ -26458,7 +26466,7 @@ react-transition-group@^2.2.1:
     prop-types "^15.6.2"
     react-lifecycles-compat "^3.0.4"
 
-react@*, react@16.12.0, react@^16.10.2, react@^16.6.0, react@^16.8.3, react@^16.8.4:
+react@*, react@16.12.0, react@^16.10.2, react@^16.6.0, react@^16.8.3, react@^16.8.4, react@^16.9.17:
   version "16.12.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.12.0.tgz#0c0a9c6a142429e3614834d5a778e18aa78a0b83"
   integrity sha512-fglqy3k5E+81pA8s+7K0/T3DBCF0ZDOher1elBFzF7O6arXJgzyu/FW+COxFvAWXJoJN9KIZbT2LXlukwphYTA==