fix: add examples paramStructure by-name support

fixes #320
fixes #309
fixes #26

Author: shanejonas

README.md

@@ -44,10 +44,10 @@ npm install @open-rpc/docs-react @open-rpc/meta-schema --save
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Documentation from "@open-rpc/docs-react";
-import { OpenRPC } from '@open-rpc/meta-schema';
+import { OpenRpcDocument } from '@open-rpc/meta-schema';
 
-const schema: OpenRPC = {
-  openrpc: "1.0.0-rc1",
+const schema: OpenrpcDocument = {
+  openrpc: "1.2.4",
   info: {
     "version": "0.0.0-development",
     "title": "My New API"

package-lock.json

@@ -15,7 +15,7 @@
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.47",
     "@material-ui/styles": "^4.7.1",
-    "@open-rpc/examples": "^1.3.3",
+    "@open-rpc/examples": "^1.5.0",
     "@xops.net/json-schema-to-react-tree": "^1.0.2",
     "hash-color-material": "^1.1.3",
     "jest-transform-css": "^2.0.0",
@@ -27,7 +27,7 @@
     "react-markdown": "^4.0.6"
   },
   "devDependencies": {
-    "@open-rpc/meta-schema": "^1.4.3",
+    "@open-rpc/meta-schema": "^1.11.0",
     "@types/jest": "^24.0.11",
     "@types/json-schema": "^7.0.3",
     "@types/lodash": "^4.14.123",

package.json

@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import ContentDescriptors from "./ContentDescriptors";
-import { OpenRPC } from "@open-rpc/meta-schema";
+import { OpenrpcDocument } from "@open-rpc/meta-schema";
 
 it("renders without crashing", () => {
   const div = document.createElement("div");
@@ -18,7 +18,7 @@ it("renders empty with no schema", () => {
 
 it("renders empty with empty schema", () => {
   const div = document.createElement("div");
-  const emptySchema = {} as OpenRPC;
+  const emptySchema = {} as OpenrpcDocument;
   ReactDOM.render(<ContentDescriptors schema={emptySchema}/>, div);
   expect(div.innerHTML).toBe("");
   ReactDOM.unmountComponentAtNode(div);

src/ContentDescriptors/ContentDescriptors.test.tsx

@@ -1,10 +1,10 @@
 import React, { Component } from "react";
 import ContentDescriptor from "../ContentDescriptor/ContentDescriptor";
 import { Typography } from "@material-ui/core";
-import { OpenRPC, ContentDescriptorObject } from "@open-rpc/meta-schema";
+import { OpenrpcDocument, ContentDescriptorObject } from "@open-rpc/meta-schema";
 
 interface IProps {
-  schema?: OpenRPC;
+  schema?: OpenrpcDocument;
   disableTransitionProps?: boolean;
   uiSchema?: any;
 }

src/ContentDescriptors/ContentDescriptors.tsx

@@ -3,10 +3,10 @@ import Info from "./Info/Info";
 import Servers from "./Servers/Servers";
 import Methods, { IMethodPluginProps } from "./Methods/Methods";
 import ContentDescriptors from "./ContentDescriptors/ContentDescriptors";
-import { OpenRPC } from "@open-rpc/meta-schema";
+import { OpenrpcDocument } from "@open-rpc/meta-schema";
 
 interface IProps {
-  schema: OpenRPC;
+  schema: OpenrpcDocument;
   uiSchema?: any;
   reactJsonOptions?: any;
   methodPlugins?: Array<React.FC<IMethodPluginProps>>;

src/Documentation.tsx

@@ -3,11 +3,11 @@ import ReactDOM from "react-dom";
 import ExamplePairing from "./ExamplePairing";
 import examples from "@open-rpc/examples";
 import refParser from "json-schema-ref-parser";
-import { OpenRPC } from "@open-rpc/meta-schema";
+import { OpenrpcDocument } from "@open-rpc/meta-schema";
 
 it("renders examples", async () => {
   const div = document.createElement("div");
-  const simpleMath = await refParser.dereference(examples.simpleMath) as OpenRPC;
+  const simpleMath = await refParser.dereference(examples.simpleMath) as OpenrpcDocument;
   ReactDOM.render(<ExamplePairing method={simpleMath.methods[0]} examplePosition={0} />, div);
   expect(div.innerHTML.includes("2")).toBe(true);
   expect(div.innerHTML.includes("4")).toBe(true);

src/ExamplePairing/ExamplePairing.test.tsx

@@ -6,6 +6,8 @@ import ReactMarkdown from "react-markdown";
 import { MethodObject, ExampleObject, ExamplePairingObject } from "@open-rpc/meta-schema";
 import _ from "lodash";
 
+export type TParamStructure = "either" | "by-name" | "by-position";
+
 interface IProps extends WithStyles<typeof styles> {
   examplePosition?: number;
   method?: MethodObject;
@@ -31,10 +33,21 @@ class ExamplePairing extends Component<IProps, {}> {
     if (!example || _.isEmpty(example)) {
       return null;
     }
+    if (!method) {
+      return;
+    }
+    const paramStructure: TParamStructure = method.paramStructure || "either";
+    const params = paramStructure === "by-name"
+      ? (example.params as ExampleObject[]).reduce(((memo, p) => {
+        memo[p.name] = p.value;
+        return memo;
+      }), {} as any)
+      : (example.params as ExampleObject[]).map(((p) => p.value));
+
     return (
       <Grid container spacing={10}>
         <Grid item xs={12}>
-          <ReactMarkdown source={example.description} className={classes.description}/>
+          <ReactMarkdown source={example.description} className={classes.description} />
         </Grid>
         <Grid item xs={6}>
           <Card>
@@ -43,7 +56,7 @@ class ExamplePairing extends Component<IProps, {}> {
                 id: 1,
                 jsonrpc: "2.0",
                 method: method && method.name,
-                params: (example.params as ExampleObject[]).map(((p) => p.value)),
+                params,
               }} {...this.props.reactJsonOptions} />}
             </CardContent>
           </Card>

src/ExamplePairing/ExamplePairing.tsx

@@ -3,7 +3,7 @@ import ReactDOM from "react-dom";
 import ExamplePairings from "./ExamplePairings";
 import examples from "@open-rpc/examples";
 import refParser from "json-schema-ref-parser";
-import { OpenRPC, ExamplePairingObject } from "@open-rpc/meta-schema";
+import { OpenrpcDocument, ExamplePairingObject } from "@open-rpc/meta-schema";
 
 it("renders without crashing", () => {
   const div = document.createElement("div");
@@ -27,7 +27,7 @@ it("renders empty with empty example", () => {
 
 it("renders examples", async () => {
   const div = document.createElement("div");
-  const simpleMath = await refParser.dereference(examples.simpleMath) as OpenRPC;
+  const simpleMath = await refParser.dereference(examples.simpleMath) as OpenrpcDocument;
   ReactDOM.render(
     <ExamplePairings
       method={simpleMath.methods[0]}

src/ExamplePairings/ExamplePairings.test.tsx

@@ -80,7 +80,7 @@ class ExamplePairings extends Component<IProps, IState> {
                   {example.name}
                 </MenuItem>
               ))}
-        </Menu>
+            </Menu>
           </List>
         </Grid>
         <Grid item xs={12}>