fix: upgrade material-ui and monaco

shanejonas · shanejonas · commit aef09f7d3f85 · 2019-12-12T17:29:29.000-08:00
diff --git a/monaco-rescript.js b/monaco-rescript.js
@@ -0,0 +1,14 @@
+const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
+const { prependWebpackPlugin } = require("@rescripts/utilities");
+
+console.log("loaded rescripts file");
+
+module.exports = function override(config, env) {
+  console.log("mangling webpack config");
+  //do stuff with the webpack config...
+  config.plugins.unshift(new MonacoWebpackPlugin({
+    // available options are documented at https://github.com/Microsoft/monaco-editor-webpack-plugin#options
+    languages: ["json", "html"]
+  }))
+  return config;
+}
diff --git a/open-rpc-inspector-0.0.0-development.tgz b/open-rpc-inspector-0.0.0-development.tgz
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,23 +10,29 @@
     "access": "public"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "start": "rescripts start",
+    "build": "rescripts build",
     "lint": "tslint --fix -p .",
-    "test": "npm run lint && react-scripts test --coverage --passWithNoTests",
+    "test": "npm run lint && rescripts test --coverage --passWithNoTests",
     "build:package": "tsc --noEmit false --outDir package --jsx react --declaration true --allowJs false --isolatedModules false --target es5 --module commonjs && mv package/exports.d.ts package/index.d.ts && mv package/exports.js package/index.js"
   },
+  "rescripts": [
+    "monaco-rescript"
+  ],
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
+    "@rescripts/cli": "0.0.13",
+    "@rescripts/utilities": "0.0.6",
     "@types/jest": "^24.0.13",
     "@types/qs": "^6.5.3",
     "@types/react-dom": "^16.8.4",
-    "jest": "24.7.1",
-    "react-scripts": "^3.0.1",
+    "jest": "24.9.0",
+    "monaco-editor-webpack-plugin": "^1.7.0",
+    "react-scripts": "^3.3.0",
     "ts-jest": "^24.0.2",
     "tslint": "^5.17.0",
-    "typescript": "^3.5.1"
+    "typescript": "^3.7.3"
   },
   "browserslist": {
     "production": [
@@ -42,12 +48,14 @@
   },
   "dependencies": {
     "@etclabscore/monaco-add-json-schema-diagnostics": "^1.0.3",
-    "@material-ui/core": "^4.3.2",
-    "@material-ui/icons": "^4.2.1",
+    "@material-ui/core": "^4.7.2",
+    "@material-ui/icons": "^4.5.1",
     "@monaco-editor/react": "^2.3.0",
     "@open-rpc/client-js": "^1.2.1",
     "@open-rpc/meta-schema": "^1.5.3",
     "@rehooks/window-size": "^1.0.2",
+    "acorn-dynamic-import": "^4.0.0",
+    "monaco-editor": "^0.18.1",
     "qs": "^6.8.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
diff --git a/src/containers/App.tsx b/src/containers/App.tsx
@@ -1,15 +1,20 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { CssBaseline } from "@material-ui/core";
 import { MuiThemeProvider } from "@material-ui/core";
 import { lightTheme, darkTheme } from "../themes/openrpcTheme";
 import useDarkMode from "use-dark-mode";
 import Inspector from "./Inspector";
 import useQueryParams from "../hooks/useQueryParams";
+import * as monaco from "monaco-editor";
 
 const App: React.FC = () => {
   const darkMode = useDarkMode();
   const [query] = useQueryParams();
   const theme = darkMode.value ? darkTheme : lightTheme;
+  useEffect(() => {
+    const t = darkMode.value ? "vs-dark" : "vs";
+    monaco.editor.setTheme(t);
+  }, [darkMode.value]);
 
   return (
     <MuiThemeProvider theme={theme}>
diff --git a/src/containers/ControlledMonacoEditor.tsx b/src/containers/ControlledMonacoEditor.tsx
@@ -0,0 +1,28 @@
+import React, { RefObject } from "react";
+import MonacoEditor from "./MonacoEditor";
+
+interface IProps {
+  value: string;
+  language: string;
+  editorDidMount: (editor: any, ref: React.RefObject<any>) => any;
+  options?: any;
+  theme: string;
+  line?: number;
+  loading?: Element | string;
+  width?: string | number;
+  height?: string | number;
+  onChange: any;
+}
+
+const ControlledMonacoEditor: React.FC<IProps> = ({value, onChange, editorDidMount, ...props}) => {
+  return (
+    <MonacoEditor
+      value={value}
+      editorDidMount={editorDidMount}
+      controlled={true}
+      {...props}
+    />
+  );
+};
+
+export default ControlledMonacoEditor;
diff --git a/src/containers/Inspector.tsx b/src/containers/Inspector.tsx
@@ -7,9 +7,8 @@ import { Client, RequestManager, HTTPTransport, WebSocketTransport } from "@open
 import Brightness3Icon from "@material-ui/icons/Brightness3";
 import WbSunnyIcon from "@material-ui/icons/WbSunny";
 import { JSONRPCError } from "@open-rpc/client-js/build/Error";
-import useDarkMode from "use-dark-mode";
-import Editor from "@monaco-editor/react";
 import { MethodObject } from "@open-rpc/meta-schema";
+import MonacoEditor from "./MonacoEditor";
 
 interface IProps {
   url?: string;
@@ -58,7 +57,6 @@ function useCounter(defaultValue: number): [number, () => void] {
 }
 
 const Inspector: React.FC<IProps> = (props) => {
-  const darkMode = useDarkMode();
   const [id, incrementId] = useCounter(0);
   const [json, setJson] = useState(props.request || {
     jsonrpc: "2.0",
@@ -185,7 +183,7 @@ const Inspector: React.FC<IProps> = (props) => {
               Clear
                 </Button>
           }
-          <Editor
+          <MonacoEditor
             options={{
               minimap: {
                 enabled: false,
@@ -198,7 +196,6 @@ const Inspector: React.FC<IProps> = (props) => {
             }}
             height="100vh"
             editorDidMount={handleResponseEditorDidMount}
-            theme={darkMode.value ? "dark" : "light"}
             language="json"
             value={JSON.stringify(error || results, null, 4) || ""}
           />
diff --git a/src/containers/JSONRPCRequest.tsx b/src/containers/JSONRPCRequest.tsx
@@ -1,6 +1,6 @@
 import React, { useRef, useEffect } from "react";
-import useDarkMode from "use-dark-mode";
-import { monaco, ControlledEditor, Monaco } from "@monaco-editor/react";
+import MonacoEditor from "./MonacoEditor";
+import * as monaco from "monaco-editor";
 import { MethodObject } from "@open-rpc/meta-schema";
 import useWindowSize from "@rehooks/window-size";
 import { addDiagnostics } from "@etclabscore/monaco-add-json-schema-diagnostics";
@@ -12,7 +12,6 @@ interface IProps {
 }
 
 const JSONRPCRequest: React.FC<IProps> = (props) => {
-  const darkMode = useDarkMode();
   const editorRef = useRef();
   const windowSize = useWindowSize();
 
@@ -25,63 +24,58 @@ const JSONRPCRequest: React.FC<IProps> = (props) => {
   function handleEditorDidMount(_: any, editor: any) {
     editorRef.current = editor;
     const modelName = props.openrpcMethodObject ? props.openrpcMethodObject.name : "inspector";
-    const modelUriString = `inmemory://${modelName}.json`;
-    monaco
-      .init()
-      .then((m: Monaco) => {
-        const modelUri = m.Uri.parse(modelUriString);
-        const model = m.editor.createModel(props.value || "", "json", modelUri);
-        editor.setModel(model);
-        let schema: any = {
-          type: "object",
-          properties: {
-            jsonrpc: {
+    const modelUriString = `inmemory://${modelName}-${Math.random()}.json`;
+    const modelUri = monaco.Uri.parse(modelUriString);
+    const model = monaco.editor.createModel(props.value || "", "json", modelUri);
+    editor.setModel(model);
+    let schema: any = {
+      type: "object",
+      properties: {
+        jsonrpc: {
+          type: "string",
+          enum: ["2.0"],
+        },
+        id: {
+          oneOf: [
+            {
               type: "string",
-              enum: ["2.0"],
             },
-            id: {
-              oneOf: [
-                {
-                  type: "string",
-                },
-                {
-                  type: "number",
-                },
-              ],
-            },
-            method: {
-              type: "string",
-            },
-            params: {
-              type: "array",
+            {
+              type: "number",
             },
+          ],
+        },
+        method: {
+          type: "string",
+        },
+        params: {
+          type: "array",
+        },
+      },
+    };
+    if (props.openrpcMethodObject) {
+      schema = {
+        ...schema,
+        additionalProperties: false,
+        properties: {
+          ...schema.properties,
+          method: {
+            type: "string",
+            enum: [props.openrpcMethodObject.name],
           },
-        };
-        if (props.openrpcMethodObject) {
-          schema = {
-            ...schema,
-            additionalProperties: false,
-            properties: {
-              ...schema.properties,
-              method: {
-                type: "string",
-                enum: [props.openrpcMethodObject.name],
-              },
-              params: {
-                ...schema.properties.params,
-                items: props.openrpcMethodObject.params.map((param: any) => {
-                  return {
-                    ...param.schema,
-                    additionalProperties: false,
-                  };
-                }),
-              },
-            },
-          };
-        }
-        addDiagnostics(modelUri.toString(), schema, m);
-      })
-      .catch((error: Error) => console.error("An error occurred during initialization of Monaco: ", error));
+          params: {
+            ...schema.properties.params,
+            items: props.openrpcMethodObject.params.map((param: any) => {
+              return {
+                ...param.schema,
+                additionalProperties: false,
+              };
+            }),
+          },
+        },
+      };
+    }
+    addDiagnostics(modelUri.toString(), schema, monaco);
   }
 
   const handleChange = (ev: any, value: any) => {
@@ -91,16 +85,13 @@ const JSONRPCRequest: React.FC<IProps> = (props) => {
   };
 
   return (
-    <>
-      <ControlledEditor
-        height="100vh"
-        theme={darkMode.value ? "dark" : "light"}
-        value={props.value}
-        editorDidMount={handleEditorDidMount}
-        language="json"
-        onChange={handleChange}
-      />
-    </>
+    <MonacoEditor
+      height="100vh"
+      value={props.value}
+      editorDidMount={handleEditorDidMount}
+      language="json"
+      onChange={handleChange}
+    />
   );
 };
 
diff --git a/src/containers/MonacoContainer.tsx b/src/containers/MonacoContainer.tsx
@@ -0,0 +1,39 @@
+import React, { RefObject } from "react";
+import { makeStyles } from "@material-ui/core/styles";
+
+interface IProps {
+  width?: string | number;
+  height?: string | number;
+  loading?: Element | string;
+  isEditorReady: boolean;
+  reference: RefObject<any>;
+}
+
+const useStyles = makeStyles({
+  wrapper: {
+    display: "flex",
+    position: "relative",
+    textAlign: "initial",
+  },
+  fullWidth: {
+    width: "100%",
+  },
+  hide: {
+    display: "none",
+  },
+});
+
+const MonacoContainer: React.FC<IProps> = ({ width, height, isEditorReady, loading, reference }) => {
+  const classes = useStyles({});
+  return (
+    <section className={classes.wrapper} style={{ width, height }}>
+      {/* {!isEditorReady && <Loading content={loading} />} */}
+      <div
+        ref={reference}
+        className={classes.fullWidth}
+      />
+    </section>
+  );
+};
+
+export default MonacoContainer;
diff --git a/src/containers/MonacoEditor.tsx b/src/containers/MonacoEditor.tsx
