Upgrade react-syntax-highlighter to the latest version

addons/storysource/package.json

@@ -38,7 +38,7 @@
     "loader-utils": "^1.2.3",
     "prettier": "^1.16.4",
     "prop-types": "^15.7.2",
-    "react-syntax-highlighter": "^8.0.1",
+    "react-syntax-highlighter": "^11.0.2",
     "regenerator-runtime": "^0.12.1",
     "util-deprecate": "^1.0.2"
   },

addons/storysource/src/StoryPanel.js

@@ -4,7 +4,7 @@ import { styled } from '@storybook/theming';
 import { Link } from '@storybook/router';
 import { SyntaxHighlighter } from '@storybook/components';
 
-import createElement from 'react-syntax-highlighter/create-element';
+import createElement from 'react-syntax-highlighter/dist/esm/create-element';
 import { EVENT_ID } from './events';
 
 const StyledStoryLink = styled(Link)(({ theme }) => ({

lib/components/package.json

@@ -29,7 +29,7 @@
   "dependencies": {
     "@storybook/client-logger": "5.3.0-alpha.5",
     "@storybook/theming": "5.3.0-alpha.5",
-    "@types/react-syntax-highlighter": "10.1.0",
+    "@types/react-syntax-highlighter": "11.0.0",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
     "markdown-to-jsx": "^6.9.1",
@@ -42,7 +42,7 @@
     "react-focus-lock": "^1.18.3",
     "react-helmet-async": "^1.0.2",
     "react-popper-tooltip": "^2.8.3",
-    "react-syntax-highlighter": "^8.0.1",
+    "react-syntax-highlighter": "^11.0.2",
     "react-textarea-autosize": "^7.1.0",
     "simplebar-react": "^1.0.0-alpha.6",
     "ts-dedent": "^1.1.0"

lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx

@@ -3,22 +3,22 @@ import { styled } from '@storybook/theming';
 import { document, window } from 'global';
 import memoize from 'memoizerific';
 
-import jsx from 'react-syntax-highlighter/languages/prism/jsx';
-import bash from 'react-syntax-highlighter/languages/prism/bash';
-import css from 'react-syntax-highlighter/languages/prism/css';
-import html from 'react-syntax-highlighter/languages/prism/markup';
+import jsx from 'react-syntax-highlighter/dist/esm/languages/prism/jsx';
+import bash from 'react-syntax-highlighter/dist/esm/languages/prism/bash';
+import css from 'react-syntax-highlighter/dist/esm/languages/prism/css';
+import html from 'react-syntax-highlighter/dist/esm/languages/prism/markup';
 
-import ReactSyntaxHighlighter, { registerLanguage } from 'react-syntax-highlighter/prism-light';
+import { PrismLight as ReactSyntaxHighlighter } from 'react-syntax-highlighter';
 
 import { ActionBar } from '../ActionBar/ActionBar';
 import { ScrollArea } from '../ScrollArea/ScrollArea';
 
 import { formatter } from './formatter';
 
-registerLanguage('jsx', jsx);
-registerLanguage('bash', bash);
-registerLanguage('css', css);
-registerLanguage('html', html);
+ReactSyntaxHighlighter.registerLanguage('jsx', jsx);
+ReactSyntaxHighlighter.registerLanguage('bash', bash);
+ReactSyntaxHighlighter.registerLanguage('css', css);
+ReactSyntaxHighlighter.registerLanguage('html', html);
 
 const themedSyntax = memoize(2)(theme =>
   Object.entries(theme.code || {}).reduce((acc, [key, val]) => ({ ...acc, [`* .${key}`]: val }), {})

yarn.lock

@@ -4207,6 +4207,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/[email protected]":
+  version "11.0.0"
+  resolved "https://registry.yarnpkg.com/@types/react-syntax-highlighter/-/react-syntax-highlighter-11.0.0.tgz#ae67cce95cca4da66911ef7c3fc97e3ae042076b"
+  integrity sha512-iZ3uJ4Cv+ya47zirtfOua/h3EzTOlgvOr7MP1QaPPf35e14Vjz5bOdM3kIOTURo32y7FUOouke1ZpHgRqXfqbQ==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-textarea-autosize@^4.3.3":
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/@types/react-textarea-autosize/-/react-textarea-autosize-4.3.4.tgz#9a93f751c91ad5e86387bce75e3b7e11ed195813"
@@ -14880,6 +14887,11 @@ highlight.js@~9.12.0:
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.12.0.tgz#e6d9dbe57cbefe60751f02af336195870c90c01e"
   integrity sha1-5tnb5Xy+/mB1HwKvM2GVhwyQwB4=
 
+highlight.js@~9.13.0:
+  version "9.13.1"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.13.1.tgz#054586d53a6863311168488a0f58d6c505ce641e"
+  integrity sha512-Sc28JNQNDzaH6PORtRLMvif9RSn1mYuOoX3omVjnb0+HbpPygU2ALBI0R/wsiqCb4/fcp07Gdo8g+fhtFrQl6A==
+
 hmac-drbg@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -18724,6 +18736,14 @@ lowercase-keys@^2.0.0:
   resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-2.0.0.tgz#2603e78b7b4b0006cbca2fbcc8a3202558ac9479"
   integrity sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==
 
+lowlight@~1.11.0:
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/lowlight/-/lowlight-1.11.0.tgz#1304d83005126d4e8b1dc0f07981e9b689ec2efc"
+  integrity sha512-xrGGN6XLL7MbTMdPD6NfWPwY43SNkjf/d0mecSx/CW36fUZTjRHEq0/Cdug3TWKtRXLWi7iMl1eP0olYxj/a4A==
+  dependencies:
+    fault "^1.0.2"
+    highlight.js "~9.13.0"
+
 lowlight@~1.9.1:
   version "1.9.2"
   resolved "https://registry.yarnpkg.com/lowlight/-/lowlight-1.9.2.tgz#0b9127e3cec2c3021b7795dd81005c709a42fdd1"
@@ -24655,6 +24675,17 @@ react-sizeme@^2.5.2, react-sizeme@^2.6.7:
     shallowequal "^1.1.0"
     throttle-debounce "^2.1.0"
 
+react-syntax-highlighter@^11.0.2:
+  version "11.0.2"
+  resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-11.0.2.tgz#4e3f376e752b20d2f54e4c55652fd663149e4029"
+  integrity sha512-kqmpM2OH5OodInbEADKARwccwSQWBfZi0970l5Jhp4h39q9Q65C4frNcnd6uHE5pR00W8pOWj9HDRntj2G4Rww==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    highlight.js "~9.13.0"
+    lowlight "~1.11.0"
+    prismjs "^1.8.4"
+    refractor "^2.4.1"
+
 react-syntax-highlighter@^8.0.1:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-8.1.0.tgz#59103ff17a828a27ed7c8f035ae2558f09b6b78c"