Dynamic import syntax highlighter from source to save on bundle size

config/webpack.common.js

@@ -44,7 +44,13 @@ module.exports = {
         use: ["source-map-loader"]
       },
       {
-        test: /\.tsx?$/,
+        test: /\.[jt]sx?$/,
+        exclude: {
+          and: [/node_modules/],
+          not: [
+            /react-syntax-highlighter/,
+          ]
+        },
         use: [{
           loader: "babel-loader",
           options: {

config/webpack.prod.js

@@ -59,7 +59,13 @@ const prodConfig = {
 const es5Config = {
   module: {
     rules: [{
-      test: /\.tsx?$/,
+      test: /\.[jt]sx?$/,
+      exclude: {
+        and: [/node_modules/],
+        not: [
+          /react-syntax-highlighter/,
+        ]
+      },
       use: [{
         loader: "babel-loader",
         options: {

package.json

@@ -204,12 +204,12 @@
   "size-limit": [
     {
       "path": "build/public/main.js",
-      "limit": "2303 kB",
+      "limit": "1988 kB",
       "gzip": false
     },
     {
       "path": "build/public/polyfills.es5.js",
-      "limit": "46 kB",
+      "limit": "43.6 kB",
       "gzip": false
     },
     {

src/client/drag-and-drop-polyfill.ts

@@ -23,9 +23,9 @@ const needsPatch = !(dragDiv || evts) || /iPad|iPhone|iPod|Android/.test(navigat
 if (needsPatch) {
   Promise.all([
     // @ts-ignore
-    import("../../lib/polyfill/drag-drop-polyfill.min.js"),
+    import(/* webpackChunkName: "dnd-js" */ "../../lib/polyfill/drag-drop-polyfill.min.js"),
     // @ts-ignore
-    import("../../lib/polyfill/drag-drop-polyfill.css")
+    import(/* webpackChunkName: "dnd-css" */"../../lib/polyfill/drag-drop-polyfill.css")
   ]).then(([DragDropPolyfill, _]) => {
     DragDropPolyfill.Initialize({});
   });

src/client/index.d.ts

@@ -68,3 +68,11 @@ declare module "@vx/tooltip" {
   }
   const TooltipWithBounds: React.ComponentType<TooltipWithBoundsProps>;
 }
+
+declare module 'react-syntax-highlighter/src/light' {
+  export { default } from 'react-syntax-highlighter/dist/esm/light'
+}
+
+declare module 'react-syntax-highlighter/src/styles/hljs/github-gist' {
+  export { default } from 'react-syntax-highlighter/dist/esm/styles/hljs/github-gist';
+}

src/client/modals/source-modal/highlighter.tsx

@@ -0,0 +1,35 @@
+/*
+ * Copyright 2017-2022 Allegro.pl
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react";
+import jsonLanguage from "highlight.js/lib/languages/json";
+import SyntaxHighlighter from  "react-syntax-highlighter/src/light";
+import githubGist from "react-syntax-highlighter/src/styles/hljs/github-gist";
+
+SyntaxHighlighter.registerLanguage("json", jsonLanguage);
+
+interface Props {
+}
+
+export default class Highlighter extends React.Component<Props> {
+    render() {
+        const { children: source } = this.props;
+
+        return <SyntaxHighlighter className="source-modal__source" language="json" style={githubGist}>
+            {source}
+        </SyntaxHighlighter>
+    }
+} 

src/client/modals/source-modal/source-modal.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2019 Allegro.pl
+ * Copyright 2017-2022 Allegro.pl
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -14,20 +14,17 @@
  * limitations under the License.
  */
 
-import jsonLanguage from "highlight.js/lib/languages/json";
 import React from "react";
-import { Light as SyntaxHighlighter } from "react-syntax-highlighter";
-import githubGist from "react-syntax-highlighter/dist/cjs/styles/hljs/github-gist";
+
 import { Fn } from "../../../common/utils/general/general";
 import { Button } from "../../components/button/button";
+import { Loader } from "../../components/loader/loader";
 import { Modal } from "../../components/modal/modal";
 import { SafeCopyToClipboard } from "../../components/safe-copy-to-clipboard/safe-copy-to-clipboard";
 import { STRINGS } from "../../config/constants";
 import { classNames, JSXNode } from "../../utils/dom/dom";
 import "./source-modal.scss";
 
-SyntaxHighlighter.registerLanguage("json", jsonLanguage);
-
 interface SourceModalProps {
   onClose: Fn;
   title: string;
@@ -49,6 +46,7 @@ export class SourceModal extends React.Component<SourceModalProps, SourceModalSt
 
   render() {
     const { copyLabel = STRINGS.copyDefinition, onClose, source, title, className, header } = this.props;
+    const SyntaxHighlighter = React.lazy(() => import(/* webpackChunkName: "highlighter" */ "./highlighter"));
 
     return <Modal
       onClose={onClose}
@@ -57,9 +55,11 @@ export class SourceModal extends React.Component<SourceModalProps, SourceModalSt
     >
       <div className="content">
         {header}
-        <SyntaxHighlighter className="source-modal__source" language="json" style={githubGist}>
-          {source}
-        </SyntaxHighlighter>
+        <React.Suspense fallback={Loader}>
+          <SyntaxHighlighter>
+            {source}
+          </SyntaxHighlighter>
+        </React.Suspense>
         <div className="button-bar">
           <Button type="primary" className="close" onClick={onClose} title={STRINGS.close} />
           <SafeCopyToClipboard text={source} onCopy={this.onCopy}>

test/setup/mocha.js

@@ -18,6 +18,11 @@ require("@babel/register")({
     cache: true,
     configFile: false,
     extensions: [".ts", ".tsx", ".js", ".jsx"],
+    ignore: [
+        function(filePath) {
+            return filePath.includes("node_modules") && !filePath.includes("react-syntax-highlighter")
+        }
+    ],
     presets: [
         "@babel/preset-typescript",
         ["@babel/preset-env", {