feat: add SwaggerIDE mount point

char0n · char0n · commit a52285d20811 · 2022-01-03T16:35:45.000+01:00
Refs #439
diff --git a/create-react-app b/create-react-app
@@ -1 +1 @@
-Subproject commit 1819910e1c17680075fb8ba334745f08a8edcc7b
+Subproject commit 87d6fbac64bc673acd18bcee027112554a332226
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -31,6 +31,7 @@
     "@primer/octicons-react": "^16.2.0",
     "@swagger-api/apidom-ls": "^0.15.1",
     "axios": "^0.24.0",
+    "deepmerge": "^4.2.2",
     "file-dialog": "^0.0.8",
     "is-json": "^2.0.1",
     "js-file-download": "^0.4.12",
diff --git a/public/index.html b/public/index.html
@@ -28,7 +28,7 @@
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
+    <div id="swagger-ide"></div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,11 +1,32 @@
-import { PureComponent } from 'react';
+import React from 'react';
 import 'swagger-ui-react/swagger-ui.css';
+import deepmerge from 'deepmerge';
+import SwaggerUI from 'swagger-ui-react';
 
-import ide from './components/IdePreset.jsx';
 import './components/_all.scss';
+import layoutDefaultPlugin from './plugins/layout-default/index.js';
+import monacoPlugin from './plugins/monaco/index.js';
+import topbarPlugin from './plugins/topbar/index.js';
+import asyncApiPlugin from './plugins/asyncapi-react/index.js';
 
-export default class App extends PureComponent {
-  render() {
-    return ide;
-  }
-}
+const SwaggerIDE = React.memo((props = {}) => {
+  const mergedProps = deepmerge(SwaggerIDE.defaultProps, props);
+
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  return <SwaggerUI {...mergedProps} />;
+});
+
+SwaggerIDE.presets = {
+  default: () => [layoutDefaultPlugin, monacoPlugin, topbarPlugin, asyncApiPlugin],
+};
+
+SwaggerIDE.propTypes = SwaggerUI.propTypes;
+
+SwaggerIDE.defaultProps = {
+  ...SwaggerUI.defaultProps,
+  layout: 'LayoutDefault',
+  presets: [SwaggerIDE.presets.default],
+  url: 'https://raw.githubusercontent.com/asyncapi/spec/v2.2.0/examples/streetlights-kafka.yml',
+};
+
+export default SwaggerIDE;
diff --git a/src/components/IdePreset.jsx b/src/components/IdePreset.jsx
diff --git a/src/index.jsx b/src/index.jsx
@@ -1,9 +1,16 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import ReactModal from 'react-modal';
 
 import App from './App.jsx';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+const domContainer = document.getElementById('swagger-ide');
+
+if (process.env.NODE_ENV !== 'test') {
+  ReactModal.setAppElement(domContainer);
+}
+
+ReactDOM.render(<App />, domContainer);
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
diff --git a/src/plugins/topbar/components/Topbar.jsx b/src/plugins/topbar/components/Topbar.jsx
@@ -1,16 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import ReactModal from 'react-modal';
 
 import './_all.scss';
 import EditMenuDropdownHooks from './EditMenuDropdownHooks.jsx'; // getComponent incompatible with React hooks (due to nested functions?)
 import FileMenuDropdownHooks from './FileMenuDropdownHooks.jsx'; // getComponent incompatible with React hooks (due to nested functions?)
 
-// for screenreader aria-hidden
-if (process.env.NODE_ENV !== 'test') {
-  ReactModal.setAppElement('#root');
-}
-
 const Topbar = (props) => {
   const { getComponent, topbarActions, topbarSelectors } = props;
 
diff --git a/src/swagger-ide.jsx b/src/swagger-ide.jsx
