ekzyis
/
stacker.news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

50% reduction in bundle size by being careful with big imports

This commit is contained in:
keyan 2023-07-24 16:06:26 -05:00
parent 6407455def
commit 356f7e072c
3 changed files with 21 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
components/text.js
View File

@ -1,8 +1,8 @@
import styles from './text.module.css' import styles from './text.module.css'
import ReactMarkdown from 'react-markdown' import ReactMarkdown from 'react-markdown'
import gfm from 'remark-gfm' import gfm from 'remark-gfm'
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter' import { LightAsync as SyntaxHighlighter } from 'react-syntax-highlighter'
import { atomDark } from 'react-syntax-highlighter/dist/cjs/styles/prism' import atomDark from 'react-syntax-highlighter/dist/cjs/styles/prism/atom-dark'
import mention from '../lib/remark-mention' import mention from '../lib/remark-mention'
import sub from '../lib/remark-sub' import sub from '../lib/remark-sub'
import remarkDirective from 'remark-directive' 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 { extractUrls } from '../lib/md'
import FileMissing from '../svgs/file-warning-line.svg' import FileMissing from '../svgs/file-warning-line.svg'
function myRemarkPlugin () { function searchHighlighter () {
return (tree) => { return (tree) => {
visit(tree, (node) => { visit(tree, (node) => {
if ( if (
@ -128,10 +128,9 @@ export default memo(function Text ({ topLevel, noFragments, nofollow, onlyImgPro
</span>, </span>,
p: ({ children, ...props }) => <div className={styles.p} {...props}>{children}</div>, p: ({ children, ...props }) => <div className={styles.p} {...props}>{children}</div>,
code ({ node, inline, className, children, ...props }) { code ({ node, inline, className, children, ...props }) {
const match = /language-(\w+)/.exec(className || '')
return !inline 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) => { {reactStringReplace(String(children).replace(/\n$/, ''), /:high\[([^\]]+)\]/g, (match, i) => {
return match return match
}).join('')} }).join('')}
@ -176,7 +175,7 @@ export default memo(function Text ({ topLevel, noFragments, nofollow, onlyImgPro
}, },
img: ({ node, ...props }) => <ZoomableImage topLevel={topLevel} {...props} /> img: ({ node, ...props }) => <ZoomableImage topLevel={topLevel} {...props} />
}} }}
remarkPlugins={[gfm, mention, sub, remarkDirective, myRemarkPlugin]} remarkPlugins={[gfm, mention, sub, remarkDirective, searchHighlighter]}
> >
{children} {children}
</ReactMarkdown> </ReactMarkdown>

12
components/when-charts.js
View File

@ -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 { abbrNum } from '../lib/format'
import { useRouter } from 'next/router' import { useRouter } from 'next/router'

6
pages/rewards.js
View File

@ -2,7 +2,11 @@ import { gql } from 'graphql-tag'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import Button from 'react-bootstrap/Button' import Button from 'react-bootstrap/Button'
import InputGroup from 'react-bootstrap/InputGroup' 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 { getGetServerSideProps } from '../api/ssrApollo'
import { Form, Input, SubmitButton } from '../components/form' import { Form, Input, SubmitButton } from '../components/form'
import { CenterLayout } from '../components/layout' import { CenterLayout } from '../components/layout'