upgrade monaco (#325)

* upgrade to react18

* fix

* remove .pause()

* fix login test

* log generate test

* upgrade react inspector

* upgrade package lock

* fix react-inspector

* fix

* Upgrade monaco (#324)

* wip: update monaco

* upgrade typescript and monaco

* upgrade to react18 (#323)

* upgrade to react18

* fix

* remove .pause()

* fix login test

* log generate test

* upgrade react inspector

* upgrade package lock

* fix react-inspector

* fix

* fix tests

* improve regexps

Author: YousefED

package-lock.json

@@ -14,8 +14,9 @@
   "scripts": {
     "--postinstall": "npm run bootstrap",
     "patch-package": "patch-package",
-    "bootstrap": "lerna bootstrap --ci -- --force && npm run patch-package",
-    "install-new-packages": "lerna bootstrap -- --force && npm run patch-package",
+    "postinstall": "patch-package",
+    "bootstrap": "lerna bootstrap --ci -- --force",
+    "install-new-packages": "lerna bootstrap -- --force",
     "playwright:dev": "lerna run playwright:dev --stream",
     "playwright:preview": "lerna run playwright:preview --stream",
     "install-playwright": "npx playwright install --with-deps",

package.json

@@ -9,7 +9,7 @@
   },
   "devDependencies": {
     "rimraf": "^3.0.2",
-    "typescript": "4.3.2",
+    "typescript": "4.5.5",
     "@types/uuid": "^8.3.4",
     "rollup-plugin-node-polyfills": "^0.2.1"
   },

packages/common/package.json

@@ -56,7 +56,7 @@
     "matrix-js-sdk": "^19.4.0",
     "mobx": "^6.2.0",
     "mobx-react-lite": "^3.2.0",
-    "monaco-editor": "^0.27.0",
+    "monaco-editor": "^0.34.1",
     "penpal": "^6.1.0",
     "prettier": "2.4.1",
     "probe.gl": "^3.1.4",
@@ -78,7 +78,7 @@
     "string.prototype.replaceall": "^1.0.5",
     "styled-components": "3.2.6",
     "tippy.js": "^6.3.1",
-    "typescript": "4.3.2",
+    "typescript": "4.5.5",
     "ua-parser-js": "^0.7.28",
     "uuid": "^8.3.2",
     "vscode-lib": "^0.1.2",

packages/editor/package.json

@@ -1,5 +1,4 @@
 import { observer } from "mobx-react-lite";
-import React from "react";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import { getStoreService } from "../store/local/stores";
 import { StartScreen } from "./main/components/startscreen/StartScreen";
@@ -12,6 +11,7 @@ import { ProfileRoute } from "./routes/profile";
 import { Register } from "./routes/register";
 
 export const App = observer((props: { config: ValidatedServerConfig }) => {
+  console.log("app render");
   const { sessionStore } = getStoreService();
   if (sessionStore.user === "loading") {
     return <div>Loading</div>;

packages/editor/src/app/App.tsx

@@ -7,7 +7,7 @@ import EditorWorker from "./workers/editor.worker?worker"; // eslint-disable-lin
 // @ts-ignore
 import TsWorker from "./workers/ts.worker?worker"; // eslint-disable-line import/no-webpack-loader-syntax
 // @ts-ignore
-import CSSWorker from "./workers/css.worker?worker"; // eslint-disable-line import/no-webpack-loader-syntax
+import CSSWorker from "monaco-editor/esm/vs/language/css/css.worker?worker";
 
 import { getDefaultSandboxCompilerOptions } from "./compilerOptions";
 import { setupPrettier } from "./prettier";

packages/editor/src/runtime/editor/index.ts

@@ -35,20 +35,25 @@ const errorMsg = (msg: string, response: any, config: ATAConfig) => {
   );
 };
 
+// https://regex101.com/r/Jxa3KX/4
+
+const requirePattern = RegExp(
+  /(const|let|var)(.|\n)*? require\(('|")(.*)('|")\);?$/,
+  "gm"
+);
+// this handle ths 'from' imports  https://regex101.com/r/hdEpzO/4
+const es6Pattern = RegExp(
+  /(import|export)((?!from)(?!require)(.|\n))*?(from|require\()\s?('|")(.*)('|")\)?;?$/,
+  "gm"
+);
+// https://regex101.com/r/hdEpzO/6
+const es6ImportOnly = RegExp(/import\s?\(?('|")(.*)('|")\)?;?/, "gm");
+
 /**
  * Grab any import/requires from inside the code and make a list of
  * its dependencies
  */
 const parseFileForModuleReferences = (sourceCode: string) => {
-  // https://regex101.com/r/Jxa3KX/4
-  const requirePattern =
-    /(const|let|var)(.|\n)*? require\(('|")(.*)('|")\);?$/gm;
-  // this handle ths 'from' imports  https://regex101.com/r/hdEpzO/4
-  const es6Pattern =
-    /(import|export)((?!from)(?!require)(.|\n))*?(from|require\()\s?('|")(.*)('|")\)?;?$/gm;
-  // https://regex101.com/r/hdEpzO/6
-  const es6ImportOnly = /import\s?\(?('|")(.*)('|")\)?;?/gm;
-
   const foundModules = new Set<string>();
   var match;
 
@@ -421,6 +426,11 @@ const getCachedDTSString = async (config: ATAConfig, url: string) => {
   return content;
 };
 
+const referencePathExtractionPattern = RegExp(
+  /<reference path="(.*)" \/>/,
+  "gm"
+);
+
 const getReferenceDependencies = async (
   sourceCode: string,
   mod: string,
@@ -430,7 +440,7 @@ const getReferenceDependencies = async (
   var match;
   if (sourceCode.indexOf("reference path") > 0) {
     // https://regex101.com/r/DaOegw/1
-    const referencePathExtractionPattern = /<reference path="(.*)" \/>/gm;
+
     while ((match = referencePathExtractionPattern.exec(sourceCode)) !== null) {
       const relativePath = match[1];
       if (relativePath) {