Support for Upsilon (upsilon.js) + Upgrading monaco (Omega-Numworks#10)

* Replacing numworks.js with upsilon.js + Upgrading monaco * DELETE package-lock.json
Yaya-Cout · Dec 28, 2022 · 3dfd37f · 3dfd37f
1 parent dbe23a3
commit 3dfd37f
Show file tree

Hide file tree

Showing 7 changed files with 11,474 additions and 10,371 deletions.
diff --git a/.gitignore b/.gitignore
@@ -24,3 +24,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.idea
diff --git a/package.json b/package.json
@@ -3,18 +3,18 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@monaco-editor/react": "^4.4.6",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.3",
     "@testing-library/user-event": "^13.5.0",
     "firebase": "^7.17.2",
     "jszip": "^3.7.1",
-    "numworks.js": "^1.1.0",
     "nw-react-scripts": "3.4.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-monaco-editor": "^0.47.0",
     "react-resize-detector": "^7.0.0",
-    "react-router-dom": "^6.2.1"
+    "react-router-dom": "^6.2.1",
+    "upsilon.js": "^1.4.0"
   },
   "scripts": {
     "start": "nw-react-scripts start",

diff --git a/public/index.html b/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Omega IDE</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.js b/src/App.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import Editor from './ide/Editor.js';
 import Simulator from './ide/Simulator.js';
 import LocalStorageConnector from './LocalStorageConnector.js';
@@ -9,10 +9,10 @@ function App() {
     <div className="App">
       <Router>
         <div className="body">
-          <Switch>
-            <Route path="/" component={() => <Editor base="/" connector={LocalStorageConnector} vercel={false} />} exact />
-            <Route path="/simulator" component={Simulator} exact />
-          </Switch>
+          <Routes>
+            <Route index element={<Editor base="/" connector={LocalStorageConnector} vercel={false} />} exact />
+            <Route path="/simulator" element={Simulator} exact />
+          </Routes>
         </div>
       </Router>
     </div>

diff --git a/src/ide/Editor.js b/src/ide/Editor.js
@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { Redirect } from "react-router-dom";
+import { Navigate } from "react-router-dom";
 import "../sass/omega.ide.sass";
 
 import File from "./components/File";
@@ -58,7 +58,7 @@ import {
 import Monaco from "./components/Monaco";
 import Loader from "./components/Loader";
 import JSZip from "jszip";
-import Numworks from "numworks.js";
+import Numworks from "upsilon.js";
 
 export default class IDEEditor extends Component {
     constructor(props) {
@@ -1819,7 +1819,7 @@ export default class IDEEditor extends Component {
                 return this.renderEditor();
             }
         } else if (this.state.logged === false) {
-            return <Redirect to={this.props.base} />;
+            return <Navigate replace to={this.props.base} />;
         } else {
             return this.renderLoading();
         }

diff --git a/src/ide/components/Monaco.js b/src/ide/components/Monaco.js
@@ -1,6 +1,6 @@
 
 import React, { Component } from 'react';
-import MonacoEditor from 'react-monaco-editor';
+import MonacoEditor from '@monaco-editor/react';
 import ReactResizeDetector from 'react-resize-detector';
 
 export default class Monaco extends Component {
@@ -47,7 +47,7 @@ export default class Monaco extends Component {
                         theme="vs-dark"
                         value={this.props.value}
                         onChange={this.handleChange}
-                        editorDidMount={this.editorDidMount}
+                        onMount={this.editorDidMount}
                     />
                 </div>
             </ReactResizeDetector>