Skip to content

Commit

Permalink
fix: upgrade material-ui and monaco
Browse files Browse the repository at this point in the history
  • Loading branch information
shanejonas committed Dec 13, 2019
1 parent afab13a commit aef09f7
Show file tree
Hide file tree
Showing 10 changed files with 7,834 additions and 4,383 deletions.
14 changes: 14 additions & 0 deletions monaco-rescript.js
Original file line number Diff line number Diff line change
@@ -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;
}
Binary file added open-rpc-inspector-0.0.0-development.tgz
Binary file not shown.
11,898 changes: 7,595 additions & 4,303 deletions package-lock.json

Large diffs are not rendered by default.

24 changes: 16 additions & 8 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": [
Expand All @@ -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",
Expand Down
7 changes: 6 additions & 1 deletion src/containers/App.tsx
Original file line number Diff line number Diff line change
@@ -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}>
Expand Down
28 changes: 28 additions & 0 deletions src/containers/ControlledMonacoEditor.tsx
Original file line number Diff line number Diff line change
@@ -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;
7 changes: 2 additions & 5 deletions src/containers/Inspector.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -185,7 +183,7 @@ const Inspector: React.FC<IProps> = (props) => {
Clear
</Button>
}
<Editor
<MonacoEditor
options={{
minimap: {
enabled: false,
Expand All @@ -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) || ""}
/>
Expand Down
123 changes: 57 additions & 66 deletions src/containers/JSONRPCRequest.tsx
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -12,7 +12,6 @@ interface IProps {
}

const JSONRPCRequest: React.FC<IProps> = (props) => {
const darkMode = useDarkMode();
const editorRef = useRef();
const windowSize = useWindowSize();

Expand All @@ -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) => {
Expand All @@ -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}
/>
);
};

Expand Down
39 changes: 39 additions & 0 deletions src/containers/MonacoContainer.tsx
Original file line number Diff line number Diff line change
@@ -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;
Loading

0 comments on commit aef09f7

Please sign in to comment.