fix(openapi): use swagger-ui-dist

Author: chenshuai2144

packages/plugin-openapi/package.json

@@ -30,6 +30,6 @@
   "dependencies": {
     "@umijs/openapi": "^1.2.0",
     "serve-static": "^1.14.1",
-    "swagger-ui-react": "^3.41.1"
+    "swagger-ui-dist": "^4.12.0"
   }
 }

packages/plugin-openapi/src/index.ts

@@ -51,12 +51,22 @@ export default (api: IApi) => {
     api.writeTmpFile({
       path: join('plugin-openapi', 'openapi.tsx'),
       content: `
-import { useState } from "react";
-import SwaggerUI from "swagger-ui-react";
-import "swagger-ui-react/swagger-ui.css";
+// This file is generated by Umi automatically
+// DO NOT CHANGE IT MANUALLY!
+import { useEffect, useState } from 'react';
+import { SwaggerUIBundle } from 'swagger-ui-dist';
+import 'swagger-ui-dist/swagger-ui.css';
 
 const App = () => {
-  const [value, setValue] = useState("${config}" || "openapi");
+  const [value, setValue] = useState("${config || 'openapi'}" );
+
+  useEffect(() => {
+    SwaggerUIBundle({
+      url: \`/umi-plugins_$\{value}.json\`,
+      dom_id: '#swagger-ui',
+    });
+  }, [value]);
+  
   return (
     <div
       style={{
@@ -79,10 +89,11 @@ const App = () => {
           })
           .join('\n')}
       </select>
-      <SwaggerUI url={\`/umi-plugins_$\{value}.json\`} />
+      <div id="swagger-ui" />
     </div>
   );
 };
+
 export default App;
 `,
     });