diff --git a/config/webpack.common.js b/config/webpack.common.js index 6b694cb9a..be99af387 100644 --- a/config/webpack.common.js +++ b/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: { diff --git a/config/webpack.prod.js b/config/webpack.prod.js index aaa557e0b..65740c500 100644 --- a/config/webpack.prod.js +++ b/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: { diff --git a/package.json b/package.json index d0f2c013a..7cbd934ba 100644 --- a/package.json +++ b/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 }, { diff --git a/src/client/drag-and-drop-polyfill.ts b/src/client/drag-and-drop-polyfill.ts index 36ea20309..15de08d4b 100644 --- a/src/client/drag-and-drop-polyfill.ts +++ b/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({}); }); diff --git a/src/client/index.d.ts b/src/client/index.d.ts index 8da139501..d038e5bae 100644 --- a/src/client/index.d.ts +++ b/src/client/index.d.ts @@ -68,3 +68,11 @@ declare module "@vx/tooltip" { } const TooltipWithBounds: React.ComponentType; } + +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'; +} diff --git a/src/client/modals/source-modal/highlighter.tsx b/src/client/modals/source-modal/highlighter.tsx new file mode 100644 index 000000000..b0d64b36f --- /dev/null +++ b/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 { + render() { + const { children: source } = this.props; + + return + {source} + + } +} \ No newline at end of file diff --git a/src/client/modals/source-modal/source-modal.tsx b/src/client/modals/source-modal/source-modal.tsx index c38da6977..656612856 100644 --- a/src/client/modals/source-modal/source-modal.tsx +++ b/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 import(/* webpackChunkName: "highlighter" */ "./highlighter")); return
{header} - - {source} - + + + {source} + +