Support for allOf and a host of small improvements and bug fixes

README.md

@@ -10,6 +10,7 @@ This repo consists of the following npm modules:
 
 - [@readme/api-explorer](https://npm.im/@readme/api-explorer) - the React components that make up the explorer
 - [@readme/markdown](https://npm.im/@readme/markdown) - the markdown parser
+- [@readme/markdown-magic](https://npm.im/@readme/markdown-magic) - the legacy "magic block"-based markdown parser
 - [@readme/oas-extensions](https://npm.im/@readme/oas-extensions) - an exported object of our [OAS extensions](https://docs.readme.com/docs/swagger-extensions)
 - [@readme/oas-to-har](https://npm.im/@readme/oas-to-har) - utility to transform an OAS operation into a HAR representation
 - [@readme/syntax-highlighter](https://npm.im/@readme/syntax-highlighter) - the syntax highlighter in use on ReadMe

example/index.html

@@ -9,6 +9,20 @@
     .api-list-header {
       padding-left: 30px;
     }
+
+    .api-experiments label {
+      margin-top: 0;
+      font-size: 14px;
+      line-height: 24px;
+      color: #747c84;
+      padding-left: 5px;
+    }
+
+    .api-experiments li {
+      display: inline;
+      padding-right: 10px;
+    }
+
     /* Removing sidebar padding */
     section#hub-content {
       padding-left: 0;

example/src/Demo.jsx

@@ -9,63 +9,130 @@ const ApiExplorer = require('../../packages/api-explorer/src');
 const Logs = require('../../packages/api-logs/index');
 const ApiList = require('./ApiList');
 
-require('../../example/swagger-files/types.json');
-require('../../example/swagger-files/response-schemas.json');
-
 require('../../packages/api-logs/main.css');
 
-function Demo({ fetchSwagger, status, docs, oas, oauth }) {
-  return (
-    <div>
-      <div className="api-list-header">
-        <ApiList fetchSwagger={fetchSwagger} />
-        <pre>{status.join('\n')}</pre>
+class Demo extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      brokenExplorerState: false,
+      maskErrorMessages: false,
+      useNewMarkdownEngine: false,
+    };
+  }
+
+  experimentToggles() {
+    const experiments = {
+      'Mask error messages?': {
+        description: 'Switch between our different error states: consumer and project/API owner.',
+        stateProp: 'maskErrorMessages',
+      },
+      'Show fully broken state?': {
+        description: "Send the Explorer into a broken state. You'll need to refresh the page to get it working again.",
+        stateProp: 'brokenExplorerState',
+      },
+      'Use new Markdown engine?': {
+        description: null,
+        stateProp: 'useNewMarkdownEngine',
+      },
+    };
+
+    return (
+      <div className="api-experiments">
+        <ul>
+          {Object.keys(experiments).map(name => {
+            const experiment = experiments[name];
+
+            return (
+              <li key={name}>
+                <input
+                  checked={this.state[experiment.stateProp]}
+                  name={experiment.stateProp}
+                  onChange={e => {
+                    this.setState({ [experiment.stateProp]: e.target.checked });
+                    this.forceUpdate();
+                  }}
+                  type="checkbox"
+                />
+                <label htmlFor={experiment.stateProp} title={experiment.description}>
+                  {name}
+                </label>
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+    );
+  }
+
+  render() {
+    const { fetchSwagger, status, docs, oas, oauth } = this.props;
+    const { brokenExplorerState, maskErrorMessages, useNewMarkdownEngine } = this.state;
+
+    const additionalProps = {
+      oasFiles: {
+        'api-setting': Object.assign(extensions.defaults, oas),
+      },
+    };
+
+    if (brokenExplorerState) {
+      delete additionalProps.oasFiles;
+    }
+
+    return (
+      <div>
+        <div className="api-list-header">
+          <ApiList fetchSwagger={fetchSwagger} />
+
+          {status.length > 0 ? <pre>{status.join('\n')}</pre> : this.experimentToggles()}
+        </div>
+
+        {status.length === 0 && (
+          <ApiExplorer
+            {...additionalProps}
+            // Uncomment this in for column layout
+            // appearance={{ referenceLayout: 'column' }}
+            appearance={{ referenceLayout: 'row' }}
+            // Uncomment this if you want to test enterprise-structured URLs
+            // baseUrl={'/child/v1.0'}
+            baseUrl="/"
+            // To test the top level error boundary, uncomment this
+            // docs={[null, null]}
+            docs={docs}
+            // We only really set this to `true` for testing sites for errors using puppeteer
+            dontLazyLoad={false}
+            flags={{ correctnewlines: false }}
+            glossaryTerms={[{ term: 'apiKey', definition: 'This is a definition' }]}
+            Logs={Logs}
+            maskErrorMessages={maskErrorMessages}
+            oauth={oauth}
+            suggestedEdits
+            useNewMarkdownEngine={useNewMarkdownEngine}
+            variables={{
+              // Uncomment this to test without logs
+              // user: {}
+              // Uncomment this to test with logs
+              // user: {
+              //   keys: [
+              //     { id: 'someid', name: 'project1', apiKey: '123' },
+              //     { id: 'anotherid', name: 'project2', apiKey: '456' },
+              //   ],
+              // },
+              // Uncomment this to test without keys array
+              // user: { user: '123456', pass: 'abc', apiKey: '123456' },
+              user: {
+                keys: [
+                  { id: 'asdfghjkl', name: 'project1', apiKey: '123', user: 'user1', pass: 'pass1' },
+                  { id: 'zxcvbnm', name: 'project2', apiKey: '456', user: 'user2', pass: 'pass2' },
+                ],
+              },
+              defaults: [],
+            }}
+          />
+        )}
       </div>
-      {status.length === 0 && (
-        <ApiExplorer
-          // Uncomment this in for column layout
-          // appearance={{ referenceLayout: 'column' }}
-          appearance={{ referenceLayout: 'row' }}
-          // Uncomment this if you want to test enterprise-structured URLs
-          // baseUrl={'/child/v1.0'}
-          baseUrl="/"
-          // To test the top level error boundary, uncomment this
-          // docs={[null, null]}
-          docs={docs}
-          // We only really set this to `true` for testing sites for errors using puppeteer
-          dontLazyLoad={false}
-          flags={{ correctnewlines: false }}
-          glossaryTerms={[{ term: 'apiKey', definition: 'This is a definition' }]}
-          Logs={Logs}
-          oasFiles={{
-            'api-setting': Object.assign(extensions.defaults, oas),
-          }}
-          oauth={oauth}
-          suggestedEdits
-          variables={{
-            // Uncomment this to test without logs
-            // user: {}
-            // Uncomment this to test with logs
-            // user: {
-            //   keys: [
-            //     { id: 'someid', name: 'project1', apiKey: '123' },
-            //     { id: 'anotherid', name: 'project2', apiKey: '456' },
-            //   ],
-            // },
-            // Uncomment this to test without keys array
-            // user: { user: '123456', pass: 'abc', apiKey: '123456' },
-            user: {
-              keys: [
-                { id: 'asdfghjkl', name: 'project1', apiKey: '123', user: 'user1', pass: 'pass1' },
-                { id: 'zxcvbnm', name: 'project2', apiKey: '456', user: 'user2', pass: 'pass2' },
-              ],
-            },
-            defaults: [],
-          }}
-        />
-      )}
-    </div>
-  );
+    );
+  }
 }
 
 Demo.propTypes = {