Merge pull request #51 from open-rpc/feat/openrpc-method-object-support

feat: add openrpc method object support
open-rpc · Nov 28, 2019 · d880a95 · d880a95
2 parents cc10cb1 + faaa947
commit d880a95
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 27 deletions.
diff --git a/src/containers/App.tsx b/src/containers/App.tsx
@@ -18,6 +18,7 @@ const App: React.FC = () => {
         onToggleDarkMode={darkMode.toggle}
         darkMode={darkMode.value}
         url={query.url}
+        openrpcMethodObject={query.openrpcMethodObject}
         request={query.request}
       />
     </MuiThemeProvider>

diff --git a/src/containers/Inspector.tsx b/src/containers/Inspector.tsx
@@ -9,12 +9,14 @@ 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";
 
 interface IProps {
   url?: string;
   request?: any;
   darkMode?: boolean;
   hideToggleTheme?: boolean;
+  openrpcMethodObject?: MethodObject;
   onToggleDarkMode?: () => void;
 }
 
@@ -68,6 +70,16 @@ const Inspector: React.FC<IProps> = (props) => {
   const [results, setResults] = useState();
   const [url, setUrl] = useState(props.url || "");
   const [client, error, setError] = useClient(url);
+  useEffect(() => {
+    if (props.openrpcMethodObject) {
+      setJson({
+        jsonrpc: "2.0",
+        method: props.openrpcMethodObject.name,
+        params: json.params,
+        id,
+      });
+    }
+  }, [props.openrpcMethodObject, json, setJson, id]);
 
   useEffect(() => {
     if (props.url) {
@@ -151,7 +163,11 @@ const Inspector: React.FC<IProps> = (props) => {
             }
           }}>
           <div style={{ width: "99%", padding: "10px" }}>
-            <JSONRPCRequest onChange={(val) => setJson(JSON.parse(val))} value={JSON.stringify(json, null, 4)} />
+            <JSONRPCRequest
+              onChange={(val) => setJson(JSON.parse(val))}
+              openrpcMethodObject={props.openrpcMethodObject}
+              value={JSON.stringify(json, null, 4)}
+            />
           </div>
           <div style={{ height: "100%", padding: "10px", overflowY: "auto", paddingBottom: "80px" }}>
             {(results || error) &&

diff --git a/src/containers/JSONRPCRequest.tsx b/src/containers/JSONRPCRequest.tsx
@@ -1,42 +1,81 @@
 import React from "react";
 import useDarkMode from "use-dark-mode";
 import { monaco, ControlledEditor, Monaco } from "@monaco-editor/react";
+import { MethodObject } from "@open-rpc/meta-schema";
 
 interface IProps {
   onChange?: (newValue: any) => void;
+  openrpcMethodObject?: MethodObject;
   value: any;
 }
-monaco
-  .init()
-  .then((m: Monaco) => {
-    const modelUri = m.Uri.parse(`inmemory:/${Math.random()}/model/userSpec.json`);
-    m.languages.json.jsonDefaults.setDiagnosticsOptions({
-      enableSchemaRequest: true,
-      schemas: [
-        {
-          fileMatch: ["*"],
-          schema: {
-            type: "object",
-            properties: {
-              method: {
+
+const JSONRPCRequest: React.FC<IProps> = (props) => {
+  const darkMode = useDarkMode();
+  monaco
+    .init()
+    .then((m: Monaco) => {
+      const modelUri = m.Uri.parse(`inmemory:/${Math.random()}/model/userSpec.json`);
+      let schema: any = {
+        type: "object",
+        properties: {
+          jsonrpc: {
+            type: "string",
+            enum: ["2.0"],
+          },
+          id: {
+            oneOf: [
+              {
                 type: "string",
               },
-              params: {
-                type: "array",
+              {
+                type: "number",
               },
-            },
+            ],
+          },
+          method: {
+            type: "string",
+          },
+          params: {
+            type: "array",
           },
-          uri: modelUri.toString(),
         },
-      ],
-      validate: true,
-    });
-    window.addEventListener("resize", m.editor.layout());
-  })
-  .catch((error: Error) => console.error("An error occurred during initialization of Monaco: ", error));
-
-const JSONRPCRequest: React.FC<IProps> = (props) => {
-  const darkMode = useDarkMode();
+      };
+      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,
+                };
+              }),
+            },
+          },
+        };
+      }
+      m.languages.json.jsonDefaults.setDiagnosticsOptions({
+        enableSchemaRequest: true,
+        schemas: [
+          {
+            fileMatch: ["*"],
+            schema,
+            uri: modelUri.toString(),
+          },
+        ],
+        validate: true,
+      });
+      window.addEventListener("resize", m.editor.layout());
+    })
+    .catch((error: Error) => console.error("An error occurred during initialization of Monaco: ", error));
 
   const handleChange = (ev: any, value: any) => {
     if (props.onChange) {