chore: refactor + jsxify md tags

demo/openapi.yaml

@@ -38,7 +38,7 @@ info:
     OAuth2 - an open protocol to allow secure authorization in a simple
     and standard method from web, mobile and desktop applications.
 
-    <security-definitions />
+    <SecurityDefinitions />
 
   version: 1.0.0
   title: Swagger Petstore
@@ -78,11 +78,11 @@ tags:
   - name: pet_model
     x-displayName: The Pet Model
     description: |
-      <object-description schemaRef="#/components/schemas/Pet" />
+      <ObjectDescription schemaRef="#/components/schemas/Pet" />
   - name: store_model
     x-displayName: The Order Model
     description: |
-      <object-description schemaRef="#/components/schemas/Order" examplesRef="#/components/examples/Order" showReadOnly={true} showWriteOnly={true} />
+      <ObjectDescription schemaRef="#/components/schemas/Order" exampleRef="#/components/examples/Order" showReadOnly={true} showWriteOnly={true} />
 x-tagGroups:
   - name: General
     tags:

src/components/ObjectDescription/ObjectDescription.tsx

@@ -1,14 +1,15 @@
 import * as React from 'react';
-import { Schema } from '../Schema';
 
 import { DarkRightPanel, MiddlePanel, Row, Section } from '../../common-elements';
 import { MediaTypeModel, OpenAPIParser, RedocNormalizedOptions } from '../../services';
+import styled from '../../styled-components';
 import { OpenAPIMediaType } from '../../types';
 import { MediaTypeSamples } from '../PayloadSamples/MediaTypeSamples';
+import { Schema } from '../Schema';
 
 export interface ObjectDescriptionProps {
   schemaRef: string;
-  examplesRef?: string;
+  exampleRef?: string;
   showReadOnly?: boolean;
   showWriteOnly?: boolean;
   parser: OpenAPIParser;
@@ -16,7 +17,7 @@ export interface ObjectDescriptionProps {
 }
 
 export class ObjectDescription extends React.PureComponent<ObjectDescriptionProps> {
-  private static getMediaType(schemaRef, examplesRef): OpenAPIMediaType {
+  private static getMediaType(schemaRef: string, exampleRef?: string): OpenAPIMediaType {
     if (!schemaRef) {
       return {};
     }
@@ -25,33 +26,28 @@ export class ObjectDescription extends React.PureComponent<ObjectDescriptionProp
       schema: { $ref: schemaRef },
     };
 
-    if (examplesRef) {
-      info.examples = { object: { $ref: examplesRef } };
+    if (exampleRef) {
+      info.examples = { example: { $ref: exampleRef } };
     }
 
     return info;
   }
 
-  private static getMediaModel({
-    schemaRef,
-    examplesRef,
-    parser,
-    options,
-  }: ObjectDescriptionProps) {
-    return new MediaTypeModel(
-      parser,
-      'json',
-      false,
-      ObjectDescription.getMediaType(schemaRef, examplesRef),
-      options,
-    );
-  }
+  private _mediaModel: MediaTypeModel;
 
-  private mediaModel: MediaTypeModel;
+  private get mediaModel() {
+    const { parser, schemaRef, exampleRef, options } = this.props;
+    if (!this._mediaModel) {
+      this._mediaModel = new MediaTypeModel(
+        parser,
+        'json',
+        false,
+        ObjectDescription.getMediaType(schemaRef, exampleRef),
+        options,
+      );
+    }
 
-  constructor(props: ObjectDescriptionProps) {
-    super(props);
-    this.mediaModel = ObjectDescription.getMediaModel(this.props);
+    return this._mediaModel;
   }
 
   render() {
@@ -63,15 +59,29 @@ export class ObjectDescription extends React.PureComponent<ObjectDescriptionProp
             <Schema
               skipWriteOnly={!showWriteOnly}
               skipReadOnly={!showReadOnly}
-              key="schema"
               schema={this.mediaModel.schema}
             />
           </MiddlePanel>
           <DarkRightPanel>
-            <MediaTypeSamples mediaType={this.mediaModel} />
+            <MediaSamplesWrap>
+              <MediaTypeSamples mediaType={this.mediaModel} />
+            </MediaSamplesWrap>
           </DarkRightPanel>
         </Row>
       </Section>
     );
   }
 }
+
+const MediaSamplesWrap = styled.div`
+  background: ${({ theme }) => theme.codeSample.backgroundColor};
+  & > div,
+  & > pre {
+    padding: ${props => props.theme.spacing.unit * 4}px;
+    margin: 0;
+  }
+
+  & > div > pre {
+    padding: 0;
+  }
+`;

src/services/AppStore.ts

@@ -13,8 +13,9 @@ import { SearchStore } from './SearchStore';
 import { ObjectDescription } from '../components/ObjectDescription/ObjectDescription';
 import { SecurityDefs } from '../components/SecuritySchemes/SecuritySchemes';
 import {
-  OBJECT_DEFINTION_COMPONENT_NAME,
+  OBJECT_DEFINTION_JSX_NAME,
   SECURITY_DEFINITIONS_COMPONENT_NAME,
+  SECURITY_DEFINITIONS_JSX_NAME,
 } from '../utils/openapi';
 
 export interface StoreState {
@@ -155,10 +156,15 @@ const DEFAULT_OPTIONS: RedocRawOptions = {
         securitySchemes: store.spec.securitySchemes,
       }),
     },
-    [OBJECT_DEFINTION_COMPONENT_NAME]: {
-      component: ObjectDescription,
+    [SECURITY_DEFINITIONS_JSX_NAME]: {
+      component: SecurityDefs,
       propsSelector: (store: AppStore) => ({
         securitySchemes: store.spec.securitySchemes,
+      }),
+    },
+    [OBJECT_DEFINTION_JSX_NAME]: {
+      component: ObjectDescription,
+      propsSelector: (store: AppStore) => ({
         parser: store.spec.parser,
         options: store.options,
       }),

src/services/MenuBuilder.ts

@@ -59,16 +59,16 @@ export class MenuBuilder {
    */
   static addMarkdownItems(
     description: string,
-    grandparent: GroupModel | undefined,
+    parent: GroupModel | undefined,
     initialDepth: number,
     options: RedocNormalizedOptions,
   ): ContentItemModel[] {
     const renderer = new MarkdownRenderer(options);
     const headings = renderer.extractHeadings(description || '');
 
-    const mapHeadingsDeep = (parent, items, depth = 1) =>
+    const mapHeadingsDeep = (_parent, items, depth = 1) =>
       items.map(heading => {
-        const group = new GroupModel('section', heading, parent);
+        const group = new GroupModel('section', heading, _parent);
         group.depth = depth;
         if (heading.items) {
           group.items = mapHeadingsDeep(group, heading.items, depth + 1);
@@ -84,7 +84,7 @@ export class MenuBuilder {
         return group;
       });
 
-    return mapHeadingsDeep(grandparent, headings, initialDepth);
+    return mapHeadingsDeep(parent, headings, initialDepth);
   }
 
   /**

src/utils/openapi.ts

@@ -495,8 +495,10 @@ export function normalizeServers(
   });
 }
 
-export const OBJECT_DEFINTION_COMPONENT_NAME = 'object-description';
 export const SECURITY_DEFINITIONS_COMPONENT_NAME = 'security-definitions';
+export const SECURITY_DEFINITIONS_JSX_NAME = 'SecurityDefinitions';
+export const OBJECT_DEFINTION_JSX_NAME = 'ObjectDescription';
+
 export let SECURITY_SCHEMES_SECTION_PREFIX = 'section/Authentication/';
 export function setSecuritySchemePrefix(prefix: string) {
   SECURITY_SCHEMES_SECTION_PREFIX = prefix;