Skip to content

Commit f820d2f

Browse files
PavelVanecekPavelVanecek
authored
Fix syntax highlight, remove lodash (#331)
* Swap all data highlight syntax from e4x to jsx nicer colors * Fix bug where switching between code and data would forget the highlighting * Remove lodash
1 parent 8cbc3e3 commit f820d2f

File tree

8 files changed

+30
-59
lines changed

8 files changed

+30
-59
lines changed

‎package-lock.json

Lines changed: 0 additions & 25 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@
2424
"@babel/plugin-proposal-decorators": "^7.12.12",
2525
"@babel/preset-env": "^7.12.11",
2626
"@babel/preset-react": "^7.12.10",
27-
"@types/lodash": "^4.17.18",
2827
"@types/react": "^18.3.1",
2928
"@types/react-dom": "^18.3.1",
3029
"@types/react-helmet": "^6.1.11",
@@ -53,7 +52,6 @@
5352
"d3-scale-chromatic": "^1.3.3",
5453
"d3-shape": "^2.0.0",
5554
"highlight.js": "^11.11.1",
56-
"lodash": "^4.17.20",
5755
"monaco-editor": "^0.52.2",
5856
"prop-types": "^15.8.1",
5957
"react": "^18.3.1",

‎src/components/GuideView/Customize.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ function Customize({ locale }: { locale: SupportedLocale }) {
6161
<h4 className="sub-title">{localeGet(locale, 'customize', 'step-1-title')}</h4>
6262
<p className="paragraph-title">{localeGet(locale, 'customize', 'step-1-desc')}</p>
6363
<div className="demo">
64-
<Highlight className="e4x">
64+
<Highlight className="jsx">
6565
{`import { BarChart, Bar, XAxis, YAxis } from 'recharts';
6666
const data = [{name: 'Page A', uv: 400, pv: 2400, amt: 2400}, ...];
6767
const renderCustomAxisTick = ({ x, y, payload }) => {
@@ -90,7 +90,7 @@ const renderCustomBarLabel = ({ payload, x, y, width, height, value }) => {
9090
};
9191
`}
9292
</Highlight>
93-
<Highlight className="e4x">
93+
<Highlight className="jsx">
9494
{`const renderBarChart = (
9595
<BarChart width={600} height={300} data={data}>
9696
<XAxis dataKey="name" tick={renderCustomAxisTick} />
@@ -111,7 +111,7 @@ const renderCustomBarLabel = ({ payload, x, y, width, height, value }) => {
111111
<h4 className="sub-title">{localeGet(locale, 'customize', 'step-2-title')}</h4>
112112
<p className="paragraph-title">{localeGet(locale, 'customize', 'step-2-desc')}</p>
113113
<div className="demo">
114-
<Highlight className="e4x">
114+
<Highlight className="jsx">
115115
{`import { BarChart, Bar, XAxis, YAxis } from 'recharts';
116116
const data = [{name: 'Page A', uv: 400, pv: 2400, amt: 2400}, ...];
117117
...
@@ -131,7 +131,7 @@ const TriangleBar = (props) => {
131131
};
132132
`}
133133
</Highlight>
134-
<Highlight className="e4x">
134+
<Highlight className="jsx">
135135
{`const renderBarChart = (
136136
<BarChart width={600} height={300} data={data}>
137137
<XAxis dataKey="name" tick={renderCustomAxisTick} />
@@ -152,7 +152,7 @@ const TriangleBar = (props) => {
152152
<h4 className="sub-title">{localeGet(locale, 'customize', 'step-3-title')}</h4>
153153
<p className="paragraph-title">{localeGet(locale, 'customize', 'step-3-desc')}</p>
154154
<div className="demo">
155-
<Highlight className="e4x">
155+
<Highlight className="jsx">
156156
{`import { BarChart, Bar, XAxis, YAxis, Tooltip } from 'recharts';
157157
const data = [{name: 'Page A', uv: 400, pv: 2400, amt: 2400}, ...];
158158
...
@@ -187,7 +187,7 @@ function CustomTooltip({ payload, label, active }) {
187187
}
188188
`}
189189
</Highlight>
190-
<Highlight className="e4x">
190+
<Highlight className="jsx">
191191
{`const renderBarChart = (
192192
<BarChart width={600} height={300} data={data}>
193193
<XAxis dataKey="name" tick={renderCustomAxisTick} />
@@ -210,7 +210,7 @@ function CustomTooltip({ payload, label, active }) {
210210
<h4 className="sub-title">{localeGet(locale, 'customize', 'step-4-title')}</h4>
211211
<p className="paragraph-title">{localeGet(locale, 'customize', 'step-4-desc')}</p>
212212
<div className="demo">
213-
<Highlight className="e4x">
213+
<Highlight className="jsx">
214214
{`import { BarChart, Bar, XAxis, YAxis, Tooltip, CartesianGrid } from 'recharts';
215215
const data = [{name: 'Page A', uv: 400, pv: 2400, amt: 2400}, ...];
216216
@@ -237,7 +237,7 @@ const renderBarChart = (
237237
<h4 className="sub-title">{localeGet(locale, 'customize', 'step-5-title')}</h4>
238238
<p className="paragraph-title">{localeGet(locale, 'customize', 'step-5-desc')}</p>
239239
<div className="demo">
240-
<Highlight className="e4x">
240+
<Highlight className="jsx">
241241
{`import { BarChart, Bar, XAxis, YAxis, Tooltip, Legend, CartesianGrid } from 'recharts';
242242
const data = [{name: 'Page A', uv: 400, pv: 2400, amt: 2400}, ...];
243243

‎src/components/GuideView/GettingStarted.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ function GettingStarted({ locale }: { locale: SupportedLocale }) {
5858
<p className="paragraph-title">{localeGet(locale, 'getting-started', 'step-1-desc')}</p>
5959

6060
<div className="step-1">
61-
<Highlight className="e4x">
61+
<Highlight className="jsx">
6262
{`import { LineChart, Line } from 'recharts';
6363
const data = [{name: 'Page A', uv: 400, pv: 2400, amt: 2400}, ...];
6464
@@ -77,7 +77,7 @@ const renderLineChart = (
7777
<h4 className="sub-title">{localeGet(locale, 'getting-started', 'step-2-title')}</h4>
7878
<p className="paragraph-title">{localeGet(locale, 'getting-started', 'step-2-desc')}</p>
7979
<div className="step-2">
80-
<Highlight className="e4x">
80+
<Highlight className="jsx">
8181
{`import { LineChart, Line, CartesianGrid, XAxis, YAxis } from 'recharts';
8282
const data = [{name: 'Page A', uv: 400, pv: 2400, amt: 2400}, ...];
8383
@@ -102,7 +102,7 @@ const renderLineChart = (
102102
<h4 className="sub-title">{localeGet(locale, 'getting-started', 'step-3-title')}</h4>
103103
<p className="paragraph-title">{localeGet(locale, 'getting-started', 'step-3-desc')}</p>
104104
<div className="step-3">
105-
<Highlight className="e4x">
105+
<Highlight className="jsx">
106106
{`import { LineChart, Line, CartesianGrid, XAxis, YAxis } from 'recharts';
107107
const data = [{name: 'Page A', uv: 400, pv: 2400, amt: 2400}, ...];
108108
@@ -137,7 +137,7 @@ const renderLineChart = (
137137
<h4 className="sub-title">{localeGet(locale, 'getting-started', 'step-4-title')}</h4>
138138
<p className="paragraph-title">{localeGet(locale, 'getting-started', 'step-4-desc')}</p>
139139
<div className="step-4">
140-
<Highlight className="e4x">
140+
<Highlight className="jsx">
141141
{`import { LineChart, Line, CartesianGrid, XAxis, YAxis, Tooltip } from 'recharts';
142142
const data = [{name: 'Page A', uv: 400, pv: 2400, amt: 2400}, ...];
143143
@@ -174,7 +174,7 @@ const renderLineChart = (
174174
<h4 className="sub-title">{localeGet(locale, 'getting-started', 'step-5-title')}</h4>
175175
<p className="paragraph-title">{localeGet(locale, 'getting-started', 'step-5-desc')}</p>
176176
<div className="step-5">
177-
<Highlight className="e4x">
177+
<Highlight className="jsx">
178178
{`import { LineChart, Line, CartesianGrid, XAxis, YAxis, Tooltip } from 'recharts';
179179
const data = [{name: 'Page A', uv: 400, pv: 2400, amt: 2400}, ...];
180180
@@ -200,7 +200,7 @@ const renderCustomAxisTick = ({ x, y, payload }) => {
200200
);
201201
};`}
202202
</Highlight>
203-
<Highlight className="e4x">
203+
<Highlight className="jsx">
204204
{`const renderLineChart = (
205205
<LineChart width={600} height={300} data={data} margin={{ top: 5, right: 20, bottom: 5, left: 0 }}>
206206
<Line type="monotone" dataKey="uv" stroke="#8884d8" />

‎src/utils/Highlight.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
import React, { PureComponent, ReactNode } from 'react';
2-
// @ts-ignore
1+
import React, { PureComponent } from 'react';
32
import hljs from 'highlight.js';
43

54
type HighlightProps = {
65
className?: string;
7-
children: ReactNode;
6+
children: string;
87
};
98

109
class Highlight extends PureComponent<HighlightProps> {
@@ -31,7 +30,8 @@ class Highlight extends PureComponent<HighlightProps> {
3130

3231
if (nodes.length > 0) {
3332
for (let i = 0; i < nodes.length; i++) {
34-
hljs.highlightBlock(nodes[i]);
33+
nodes[i].removeAttribute('data-highlighted');
34+
hljs.highlightElement(nodes[i]);
3535
}
3636
}
3737
}

‎src/utils/LocaleUtils.ts

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1-
import _ from 'lodash';
1+
import { ReactNode } from 'react';
22
import Locale, { SupportedLocale, supportedLocales } from '../locale';
33

44
export const defaultLocale = 'en-US';
55

66
export const localeGet = (locale: SupportedLocale, component: string, path: string) =>
7-
_.get(Locale, `${locale}.${component}.${path}`);
7+
// @ts-ignore
8+
Locale?.[locale]?.[component]?.[path];
89

910
const isSupportedLocale = (locale: string): locale is SupportedLocale => {
1011
return supportedLocales.includes(locale as SupportedLocale);
@@ -28,13 +29,13 @@ export const getLocaleType = (props: LocaleProps): SupportedLocale => {
2829
return locale;
2930
};
3031

31-
export const parseLocalObj = (locale: SupportedLocale, value: string | object) => {
32+
export const parseLocalObj = (locale: SupportedLocale, value: string | Record<string, ReactNode>): ReactNode => {
3233
if (!value) {
3334
return '';
3435
}
3536

36-
if (_.isObject(value)) {
37-
return _.get(value, `${locale}`, '') || _.get(value, 'en-US', '');
37+
if (typeof value === 'object') {
38+
return value[locale] ?? value['en-US'] ?? '';
3839
}
3940

4041
return value || '';

‎src/views/APIView.tsx

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
/* eslint-disable class-methods-use-this */
22
import { PureComponent } from 'react';
3-
import _ from 'lodash';
43
import { Link, withRouter } from 'react-router-dom';
54
import Helmet from 'react-helmet';
65
import { RouteComponentProps } from 'react-router';
@@ -71,16 +70,14 @@ class APIView extends PureComponent<RouteComponentProps<RouteParams>, APIViewSta
7170
{localeGet(locale, 'api', isDataCodeActive ? 'hideData' : 'showData')}
7271
</button>
7372
) : null}
74-
<Highlight className="e4x">
75-
{_.trim(
76-
item.dataCode && isDataCodeActive
77-
? `
73+
<Highlight className="jsx">
74+
{item.dataCode && isDataCodeActive
75+
? `
7876
${item.dataCode}
7977
8078
${item.code}
81-
`
82-
: item.code,
83-
)}
79+
`.trim()
80+
: item.code.trim()}
8481
</Highlight>
8582
</div>
8683
) : null}

‎src/views/IndexView.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@ class IndexView extends PureComponent<RouteComponentProps> {
103103
<Line type="monotone" dataKey="uv" stroke="#8884d8" />
104104
<Line type="monotone" dataKey="pv" stroke="#82ca9d" />
105105
</LineChart>
106-
<Highlight className="e4x">{exCode}</Highlight>
106+
<Highlight className="jsx">{exCode}</Highlight>
107107
</div>
108108
</div>
109109

0 commit comments

Comments
 (0)