From 356f7e072c199b11ef46db95ad4fe05ad24a11fc Mon Sep 17 00:00:00 2001
From: keyan <keyan.kousha+huumn@gmail.com>
Date: Mon, 24 Jul 2023 16:06:26 -0500
Subject: [PATCH] 50% reduction in bundle size by being careful with big
 imports

---
 components/text.js        | 11 +++++------
 components/when-charts.js | 12 +++++++++++-
 pages/rewards.js          |  6 +++++-
 3 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/components/text.js b/components/text.js
index aff03ab0..cfa02e2d 100644
--- a/components/text.js
+++ b/components/text.js
@@ -1,8 +1,8 @@
 import styles from './text.module.css'
 import ReactMarkdown from 'react-markdown'
 import gfm from 'remark-gfm'
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
-import { atomDark } from 'react-syntax-highlighter/dist/cjs/styles/prism'
+import { LightAsync as SyntaxHighlighter } from 'react-syntax-highlighter'
+import atomDark from 'react-syntax-highlighter/dist/cjs/styles/prism/atom-dark'
 import mention from '../lib/remark-mention'
 import sub from '../lib/remark-sub'
 import remarkDirective from 'remark-directive'
@@ -18,7 +18,7 @@ import { IMGPROXY_URL_REGEXP, IMG_URL_REGEXP } from '../lib/url'
 import { extractUrls } from '../lib/md'
 import FileMissing from '../svgs/file-warning-line.svg'
 
-function myRemarkPlugin () {
+function searchHighlighter () {
   return (tree) => {
     visit(tree, (node) => {
       if (
@@ -128,10 +128,9 @@ export default memo(function Text ({ topLevel, noFragments, nofollow, onlyImgPro
             </span>,
           p: ({ children, ...props }) => <div className={styles.p} {...props}>{children}</div>,
           code ({ node, inline, className, children, ...props }) {
-            const match = /language-(\w+)/.exec(className || '')
             return !inline
               ? (
-                <SyntaxHighlighter showLineNumbers style={atomDark} language={match && match[1]} PreTag='div' {...props}>
+                <SyntaxHighlighter showLineNumbers style={atomDark} PreTag='div'>
                   {reactStringReplace(String(children).replace(/\n$/, ''), /:high\[([^\]]+)\]/g, (match, i) => {
                     return match
                   }).join('')}
@@ -176,7 +175,7 @@ export default memo(function Text ({ topLevel, noFragments, nofollow, onlyImgPro
           },
           img: ({ node, ...props }) => <ZoomableImage topLevel={topLevel} {...props} />
         }}
-        remarkPlugins={[gfm, mention, sub, remarkDirective, myRemarkPlugin]}
+        remarkPlugins={[gfm, mention, sub, remarkDirective, searchHighlighter]}
       >
         {children}
       </ReactMarkdown>
diff --git a/components/when-charts.js b/components/when-charts.js
index b7abbbb4..7083fc2f 100644
--- a/components/when-charts.js
+++ b/components/when-charts.js
@@ -1,4 +1,14 @@
-import { LineChart, Line, XAxis, YAxis, Tooltip, Legend, ResponsiveContainer, AreaChart, Area, ComposedChart, Bar } from 'recharts'
+import { LineChart } from 'recharts/lib/chart/LineChart'
+import { AreaChart } from 'recharts/lib/chart/AreaChart'
+import { ComposedChart } from 'recharts/lib/chart/ComposedChart'
+import { Line } from 'recharts/lib/cartesian/Line'
+import { XAxis } from 'recharts/lib/cartesian/XAxis'
+import { YAxis } from 'recharts/lib/cartesian/YAxis'
+import { Area } from 'recharts/lib/cartesian/Area'
+import { Bar } from 'recharts/lib/cartesian/Bar'
+import { Tooltip } from 'recharts/lib/component/Tooltip'
+import { Legend } from 'recharts/lib/component/Legend'
+import { ResponsiveContainer } from 'recharts/lib/component/ResponsiveContainer'
 import { abbrNum } from '../lib/format'
 import { useRouter } from 'next/router'
 
diff --git a/pages/rewards.js b/pages/rewards.js
index aa0d03b4..ff45f1ce 100644
--- a/pages/rewards.js
+++ b/pages/rewards.js
@@ -2,7 +2,11 @@ import { gql } from 'graphql-tag'
 import { useEffect, useState } from 'react'
 import Button from 'react-bootstrap/Button'
 import InputGroup from 'react-bootstrap/InputGroup'
-import { Cell, Pie, PieChart, ResponsiveContainer, Tooltip } from 'recharts'
+import { PieChart } from 'recharts/lib/chart/PieChart'
+import { Cell } from 'recharts/lib/component/Cell'
+import { Pie } from 'recharts/lib/polar/Pie'
+import { Tooltip } from 'recharts/lib/component/Tooltip'
+import { ResponsiveContainer } from 'recharts/lib/component/ResponsiveContainer'
 import { getGetServerSideProps } from '../api/ssrApollo'
 import { Form, Input, SubmitButton } from '../components/form'
 import { CenterLayout } from '../components/layout'