Skip to content

Commit 9c071dd

Browse files
souravraxsouravrax
committed
Update dependencies and improve code structure
- Upgraded `react-monaco-editor` to version 0.58.0 and added `react-resize-detector` to importmap in `index.html`. - Refactored `Editor.jsx` to use React's lazy loading for `MonacoEditor`. - Updated `MainPage.jsx` to use `Suspense` for loading the `Editor` component. - Adjusted `vite.config.ts` to exclude `react-monaco-editor` and `react-resize-detector` from the build. - Cleaned up imports in `NavBar.jsx` for better organization.
1 parent f5f8248 commit 9c071dd

File tree

7 files changed

+126
-101
lines changed

7 files changed

+126
-101
lines changed

‎index.html

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,14 @@
1010
<link rel="apple-touch-icon" href="/images/logo192.png" />
1111
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
1212
crossorigin="anonymous" />
13+
<script type="importmap">
14+
{
15+
"imports": {
16+
"react-monaco-editor": "https://esm.sh/react-monaco-editor@0.58.0",
17+
"react-resize-detector": "https://esm.sh/react-resize-detector@5.2.0"
18+
}
19+
}
20+
</script>
1321
<!--
1422
manifest.json provides metadata used when your web app is installed on a
1523
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
"react": "^17.0.1",
1717
"react-dom": "^17.0.1",
1818
"react-github-corner": "^2.5.0",
19-
"react-monaco-editor": "^0.40.0",
19+
"react-monaco-editor": "^0.58.0",
2020
"react-redux": "^7.2.2",
2121
"react-resize-detector": "^5.2.0",
2222
"react-select": "^3.1.0",

‎pnpm-lock.yaml

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

‎src/components/Editor.jsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import React, { Component } from "react";
2-
import MonacoEditor from "react-monaco-editor";
2+
3+
const MonacoEditor = React.lazy(() => import("react-monaco-editor"))
4+
35
import ReactResizeDetector from 'react-resize-detector'
46
import { MetroSpinner as Loader } from 'react-spinners-kit'
57

‎src/components/NavBar.jsx

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
"use strict";
2-
import React, { useState } from "react";
1+
"use strict";;
2+
import { useState } from "react";
33

44
// Baseui
55
import {
@@ -8,19 +8,18 @@ import {
88
StyledNavigationList,
99
StyledNavigationItem,
1010
} from "baseui/header-navigation";
11-
import { Button, SIZE, SHAPE, KIND as ButtonKind, KIND } from "baseui/button";
12-
import { Input } from "baseui/input";
11+
import { Button, SIZE, SHAPE } from "baseui/button";
1312
import { Combobox } from "baseui/combobox";
1413
import { Heading, HeadingLevel } from "baseui/heading";
1514
import { useSnackbar, PLACEMENT, DURATION } from "baseui/snackbar";
1615
import { StatefulPopover, TRIGGER_TYPE } from "baseui/popover";
1716

1817
// Custom Components
19-
import Settings from "./Settings";
2018
import Share from "./Share";
2119
import ImportSharedCode from "./ImportSharedCode";
22-
import Logo from "../assets/logo.png";
2320
import InfoModel from "./Info";
21+
import Logo from "../assets/logo.png";
22+
import Settings from "./Settings";
2423

2524
// Redux
2625
import { connect } from "react-redux";

‎src/pages/MainPage.jsx

Lines changed: 69 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,77 @@
1-
import React, { useState } from 'react';
2-
import NavBar from '../components/NavBar'
3-
import Editor from "../components/Editor"
1+
import { lazy, Suspense } from "react";
2+
import NavBar from "../components/NavBar";
3+
const Editor = lazy(() => import("../components/Editor"));
44

5-
import { Textarea } from 'baseui/textarea';
5+
import { Textarea } from "baseui/textarea";
66

7-
import { connect } from 'react-redux'
8-
9-
import { setInput } from '../app/master/master-actions';
7+
import { connect } from "react-redux";
108

9+
import { setInput } from "../app/master/master-actions";
1110

1211
const MainPage = ({ input, setInput, output }) => {
13-
return (
14-
<>
15-
<NavBar
16-
toggleTheme={(val) => console.log(val)}
17-
/>
18-
<div className="editor"
19-
style={{
20-
height: "60vh",
21-
width: "100vw"
22-
}}
23-
>
24-
<Editor />
25-
</div>
26-
<div className="input-output"
27-
style={{
28-
display: "flex",
29-
height: "calc(40vh - 61px)"
30-
}}
31-
>
32-
<Textarea
33-
placeholder="Input"
34-
value={input}
35-
clearable
36-
onChange={(e) => setInput(e.target.value)}
37-
overrides={{
38-
InputContainer: {
39-
style: ({ $theme }) => {
40-
return {
41-
borderRight: `1px solid ${$theme.colors.primary100}`,
42-
borderTop: `1px solid ${$theme.colors.primary100}`,
43-
}
44-
}
45-
}
46-
}}
47-
/>
48-
<Textarea
49-
value={output}
50-
placeholder="Output"
51-
overrides={{
52-
InputContainer: {
53-
style: ({ $theme }) => {
54-
return {
55-
borderTop: `1px solid ${$theme.colors.primary100}`,
56-
backgroundColor: `${$theme.colors.backgroundStateDisabled}`,
57-
}
58-
}
59-
}
60-
}}
61-
62-
/>
63-
</div>
64-
</>
65-
)
66-
}
12+
return (
13+
<>
14+
<NavBar toggleTheme={(val) => console.log(val)} />
15+
<div
16+
className="editor"
17+
style={{
18+
height: "60vh",
19+
width: "100vw",
20+
}}
21+
>
22+
<Suspense fallback={<div>Loading...</div>}>
23+
<Editor />
24+
</Suspense>
25+
</div>
26+
<div
27+
className="input-output"
28+
style={{
29+
display: "flex",
30+
height: "calc(40vh - 61px)",
31+
}}
32+
>
33+
<Textarea
34+
placeholder="Input"
35+
value={input}
36+
clearable
37+
onChange={(e) => setInput(e.target.value)}
38+
overrides={{
39+
InputContainer: {
40+
style: ({ $theme }) => {
41+
return {
42+
borderRight: `1px solid ${$theme.colors.primary100}`,
43+
borderTop: `1px solid ${$theme.colors.primary100}`,
44+
};
45+
},
46+
},
47+
}}
48+
/>
49+
<Textarea
50+
value={output}
51+
placeholder="Output"
52+
overrides={{
53+
InputContainer: {
54+
style: ({ $theme }) => {
55+
return {
56+
borderTop: `1px solid ${$theme.colors.primary100}`,
57+
backgroundColor: `${$theme.colors.backgroundStateDisabled}`,
58+
};
59+
},
60+
},
61+
}}
62+
/>
63+
</div>
64+
</>
65+
);
66+
};
6767

68-
const mapDispatchToProps = dispatch => ({
69-
setInput: input => dispatch(setInput(input)),
70-
})
68+
const mapDispatchToProps = (dispatch) => ({
69+
setInput: (input) => dispatch(setInput(input)),
70+
});
7171

72-
const mapStateToProps = state => ({
73-
input: state.master.input,
74-
output: state.master.output,
75-
})
72+
const mapStateToProps = (state) => ({
73+
input: state.master.input,
74+
output: state.master.output,
75+
});
7676

77-
export default connect(mapStateToProps, mapDispatchToProps)(MainPage);
77+
export default connect(mapStateToProps, mapDispatchToProps)(MainPage);

0 commit comments

Comments
 (0)