Update plugin to support Docusaurus 2.0.0 beta (#51)

* Update plugin for Webpack 5 & Docusaurus 2.0.0-beta.9. - Update to the latest Docusaurus and React versions. - Modernize the Docusaurus config and Markdown sample files (some parameters, like `id` were deprecated). - Remove deprecated `routesLoaded` lifecycle function. - Address `useScrollPosition` et al. being moved to `@docusaurus/theme-common`. - Address `react-markdown` being significantly outdated by upgrading to v6 and adding `rehype` plugins as recommended. - Address significant Webpack 5 issues caused by removal of polyfills. - Resolve mismatched React and React-DOM version issues (which breaks SSR builds). - Resolve duplicate React/ReactDOM/Webpack issues. Co-authored-by: Nick Bourdakos <[email protected]>
cloud-annotations · Nov 3, 2021 · df7f8f9 · df7f8f9
1 parent c0469be
commit df7f8f9
Show file tree

Hide file tree

Showing 17 changed files with 5,725 additions and 15,325 deletions.
diff --git a/blog/2019-05-28-hola.md b/blog/2019-05-28-hola.md
@@ -1,11 +1,11 @@
 ---
-id: hola
-title: Hola
 author: Gao Wei
 author_title: Docusaurus Core Team
 author_url: https://github.com/wgao19
 author_image_url: https://avatars1.githubusercontent.com/u/2055384?v=4
 tags: [hola, docusaurus]
 ---
 
+# Hola
+
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
diff --git a/blog/2019-05-29-hello-world.md b/blog/2019-05-29-hello-world.md
@@ -1,13 +1,13 @@
 ---
-id: hello-world
-title: Hello
 author: Endilie Yacop Sucipto
 author_title: Maintainer of Docusaurus
 author_url: https://github.com/endiliey
 author_image_url: https://avatars1.githubusercontent.com/u/17883920?s=460&v=4
 tags: [hello, docusaurus]
 ---
 
+# Hello
+
 Welcome to this blog. This blog is created with [**Docusaurus 2 alpha**](https://v2.docusaurus.io/).
 
 <!--truncate-->

diff --git a/blog/2019-05-30-welcome.md b/blog/2019-05-30-welcome.md
@@ -1,13 +1,13 @@
 ---
-id: welcome
-title: Welcome
 author: Yangshun Tay
 author_title: Front End Engineer @ Facebook
 author_url: https://github.com/yangshun
 author_image_url: https://avatars0.githubusercontent.com/u/1315101?s=400&v=4
 tags: [facebook, hello, docusaurus]
 ---
 
+# Welcome
+
 Blog features are powered by the blog plugin. Simply add files to the `blog` directory. It supports tags as well!
 
 Delete the whole directory if you don't want the blog features. As simple as that!
diff --git a/docs/doc1.md b/docs/doc1.md
@@ -1,9 +1,9 @@
 ---
-id: doc1
-title: Style Guide
-sidebar_label: Style Guide
+slug: /
 ---
 
+# Style Guide
+
 You can write content using [GitHub-flavored Markdown syntax](https://github.github.com/gfm/).
 
 ## Markdown Syntax
@@ -63,7 +63,7 @@ Strikethrough uses two tildes. ~~Scratch this.~~
 
 [I'm a reference-style link][arbitrary case-insensitive reference text]
 
-[I'm a relative reference to a repository file](../blob/master/LICENSE)
+[I'm a relative reference to a repository file](../LICENSE)
 
 [You can use numbers for reference-style link definitions][1]
 

diff --git a/docs/doc2.md b/docs/doc2.md
@@ -1,6 +1,3 @@
----
-id: doc2
-title: Document Number 2
----
+# Document Number 2
 
 This is a link to [another document.](doc3.md) This is a link to an [external page.](http://www.example.com/)
diff --git a/docs/doc3.md b/docs/doc3.md
@@ -1,7 +1,4 @@
----
-id: doc3
-title: This is Document Number 3
----
+# This is Document Number 3
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac euismod odio, eu consequat dui. Nullam molestie consectetur risus id imperdiet. Proin sodales ornare turpis, non mollis massa ultricies id. Nam at nibh scelerisque, feugiat ante non, dapibus tortor. Vivamus volutpat diam quis tellus elementum bibendum. Praesent semper gravida velit quis aliquam. Etiam in cursus neque. Nam lectus ligula, malesuada et mauris a, bibendum faucibus mi. Phasellus ut interdum felis. Phasellus in odio pulvinar, porttitor urna eget, fringilla lectus. Aliquam sollicitudin est eros. Mauris consectetur quam vitae mauris interdum hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 

diff --git a/docs/mdx.md b/docs/mdx.md
@@ -1,7 +1,4 @@
----
-id: mdx
-title: Powered by MDX
----
+# Powered by MDX
 
 You can write JSX and use React components within your Markdown thanks to [MDX](https://mdxjs.com/).
 

diff --git a/docusaurus-plugin-openapi/package.json b/docusaurus-plugin-openapi/package.json
@@ -15,16 +15,13 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@docusaurus/types": "2.0.0-alpha.69",
     "@types/fs-extra": "^9.0.1",
-    "@types/loader-utils": "^1.1.3",
     "@types/lodash.flatmap": "^4.5.6",
     "@types/lodash.groupby": "^4.6.6",
     "@types/lodash.kebabcase": "^4.1.1",
     "@types/lodash.pick": "^4.4.6",
     "@types/lodash.pickby": "^4.6.6",
     "@types/postman-collection": "^3.5.3",
-    "@types/webpack-merge": "^4.1.5",
     "@types/shelljs": "^0.8.8",
     "commander": "^5.0.0",
     "concurrently": "^5.2.0",
@@ -36,6 +33,7 @@
   },
   "dependencies": {
     "@monaco-editor/react": "^3.3.2",
+    "buffer": "^6.0.3",
     "dag-map": "^2.0.2",
     "fs-extra": "^9.0.1",
     "import-fresh": "^3.2.1",
@@ -45,24 +43,28 @@
     "md5": "^2.2.1",
     "openapi-to-postmanv2": "^1.2.1",
     "postman-code-generators": "^1.0.0",
-    "postman-collection": "^3.6.2",
+    "postman-collection": "^4.1.0",
+    "process": "^0.11.10",
     "react-magic-dropzone": "^1.0.1",
-    "react-markdown": "^4.3.1",
+    "react-markdown": "^7.1.0",
     "react-redux": "^7.2.0",
     "redux": "^4.0.5",
     "redux-devtools-extension": "^2.13.8",
+    "rehype-raw": "6.0.0",
+    "rehype-sanitize": "^5.0.0",
     "remark-admonitions": "^1.2.1",
-    "traverse": "^0.6.6",
-    "@docusaurus/core": "2.0.0-alpha.69",
-    "@docusaurus/mdx-loader": "2.0.0-alpha.69",
-    "@docusaurus/utils": "2.0.0-alpha.69",
-    "@docusaurus/utils-validation": "2.0.0-alpha.69"
+    "traverse": "^0.6.6"
   },
   "peerDependencies": {
-    "react": "^16.8.4",
-    "react-dom": "^16.8.4"
+    "@docusaurus/types": "^2.0.0-beta.9",
+    "@docusaurus/core": "^2.0.0-beta.9",
+    "@docusaurus/mdx-loader": "^2.0.0-beta.9",
+    "@docusaurus/utils": "^2.0.0-beta.9",
+    "@docusaurus/utils-validation": "^2.0.0-beta.9",
+    "react": "*",
+    "react-dom": "*"
   },
   "engines": {
-    "node": ">=10.15.1"
+    "node": ">=14"
   }
 }
diff --git a/docusaurus-plugin-openapi/src/index.ts b/docusaurus-plugin-openapi/src/index.ts
@@ -15,7 +15,7 @@ import {
   RouteConfig,
   ConfigureWebpackUtils,
 } from "@docusaurus/types";
-import { Configuration, Loader } from "webpack";
+import webpack, { Configuration } from "webpack";
 
 import { PluginOptions, LoadedContent, ApiSection } from "./types";
 import { loadOpenapi } from "./openapi";
@@ -37,8 +37,6 @@ export default function pluginOpenAPI(
   const name = "docusaurus-plugin-openapi";
 
   const options: PluginOptions = { ...DEFAULT_OPTIONS, ...opts };
-  const homePageDocsRoutePath =
-    options.routeBasePath === "" ? "/" : options.routeBasePath;
 
   if (options.admonitions) {
     options.remarkPlugins = options.remarkPlugins.concat([
@@ -184,52 +182,44 @@ export default function pluginOpenAPI(
       return;
     },
 
-    async routesLoaded(routes) {
-      const homeDocsRoutes = routes.filter(
-        (routeConfig) => routeConfig.path === homePageDocsRoutePath
-      );
-
-      // Remove the route for docs home page if there is a page with the same path (i.e. docs).
-      if (homeDocsRoutes.length > 1) {
-        const docsHomePageRouteIndex = routes.findIndex(
-          (route) =>
-            route.component === options.apiLayoutComponent &&
-            route.path === homePageDocsRoutePath
-        );
-
-        delete routes[docsHomePageRouteIndex!];
-      }
-    },
-
     configureWebpack(
       _config: Configuration,
       isServer: boolean,
-      { getBabelLoader, getCacheLoader }: ConfigureWebpackUtils
+      { getJSLoader }: ConfigureWebpackUtils
     ) {
       const { rehypePlugins, remarkPlugins } = options;
 
-      const wp = {
+      const wp: Configuration = {
         resolve: {
           alias: {
             "~api": dataDir,
           },
+          fallback: {
+            buffer: require.resolve('buffer/'),
+            process: require.resolve("process/browser"),
+          },
         },
+        plugins: [
+          new webpack.ProvidePlugin({
+            Buffer: [require.resolve("buffer/"), 'Buffer'],
+            process: require.resolve("process/browser"),
+          }),
+        ],
         module: {
           rules: [
             {
               test: /(\.mdx?)$/,
               include: [dataDir],
-              use: compact([ // compact because getCacheLoader may return nil on CI
-                getCacheLoader(isServer),
-                getBabelLoader(isServer),
+              use: compact([ 
+                getJSLoader({ isServer }),
                 {
                   loader: require.resolve("@docusaurus/mdx-loader"),
                   options: {
                     remarkPlugins,
                     rehypePlugins,
                   },
                 },
-              ]) as Loader[],
+              ]),
             },
           ],
         },
@@ -240,6 +230,6 @@ export default function pluginOpenAPI(
   };
 }
 
-function compact<T>(elems: T[]): T[] {
-  return elems.filter((t) => !!t);
+function compact<T>(elems: (T | null)[]): T[] {
+  return elems.filter((t) => !!t) as T[];
 }
diff --git a/docusaurus-plugin-openapi/src/theme/ApiItem/index.js b/docusaurus-plugin-openapi/src/theme/ApiItem/index.js
@@ -1,5 +1,7 @@
 import React from "react";
-import MD from "react-markdown/with-html";
+import MD from "react-markdown";
+import rehypeRaw from 'rehype-raw'
+import rehypeSanitize from 'rehype-sanitize'
 
 import Head from "@docusaurus/Head";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
@@ -84,8 +86,8 @@ function ApiItem({ openapi, content: DescriptionContent }) {
                         {deprecatedDescription && (
                           <div className="admonition-content">
                             <MD
-                              escapeHtml={false}
-                              source={deprecatedDescription}
+                              rehypePlugins={[rehypeRaw, rehypeSanitize]}
+                              children={deprecatedDescription}
                             />
                           </div>
                         )}
@@ -96,7 +98,7 @@ function ApiItem({ openapi, content: DescriptionContent }) {
                       <DescriptionContent />
                     </MDXProvider>
 
-                    {/* <MD escapeHtml={false} source={description} /> */}
+                    {/* <MD rehypePlugins={[rehypeRaw, rehypeSanitize]} children={description} /> */}
                     <ParamsTable parameters={parameters} type="path" />
                     <ParamsTable parameters={parameters} type="query" />
                     <ParamsTable parameters={parameters} type="header" />

diff --git a/docusaurus-plugin-openapi/src/theme/ApiParamsTable/index.js b/docusaurus-plugin-openapi/src/theme/ApiParamsTable/index.js
@@ -1,5 +1,7 @@
 import React from "react";
-import MD from "react-markdown/with-html";
+import MD from "react-markdown";
+import rehypeRaw from 'rehype-raw'
+import rehypeSanitize from 'rehype-sanitize'
 
 import styles from "./styles.module.css";
 
@@ -66,9 +68,9 @@ function ParamsTable({ parameters, type }) {
                   {param.description && (
                     <div className={styles.description}>
                       <MD
-                        escapeHtml={false}
+                        rehypePlugins={[rehypeRaw, rehypeSanitize]}
                         className="table-markdown"
-                        source={param.description}
+                        children={param.description}
                       />
                     </div>
                   )}

diff --git a/docusaurus-plugin-openapi/src/theme/ApiRequestBodyTable/index.js b/docusaurus-plugin-openapi/src/theme/ApiRequestBodyTable/index.js
@@ -1,5 +1,7 @@
 import React from "react";
-import MD from "react-markdown/with-html";
+import MD from "react-markdown";
+import rehypeRaw from 'rehype-raw'
+import rehypeSanitize from 'rehype-sanitize'
 
 import styles from "./styles.module.css";
 
@@ -47,9 +49,9 @@ function Row({ name, schema, required }) {
         {schema.description && (
           <div className={styles.description}>
             <MD
-              escapeHtml={false}
+              rehypePlugins={[rehypeRaw, rehypeSanitize]}
               className="table-markdown"
-              source={schema.description}
+              children={schema.description}
             />
           </div>
         )}
@@ -127,9 +129,9 @@ function RowsRoot({ schema }) {
         {schema.description && (
           <div className={styles.description}>
             <MD
-              escapeHtml={false}
+              rehypePlugins={[rehypeRaw, rehypeSanitize]}
               className="table-markdown"
-              source={schema.description}
+              children={schema.description}
             />
           </div>
         )}
@@ -183,9 +185,9 @@ function RequestBodyTable({ body, title }) {
               )}
               <div style={{ fontWeight: "normal" }}>
                 <MD
+                  rehypePlugins={[rehypeRaw, rehypeSanitize]}
                   className="table-markdown"
-                  escapeHtml={false}
-                  source={body.description}
+                  children={body.description}
                 />
               </div>
             </th>

diff --git a/docusaurus-plugin-openapi/src/theme/ApiSidebar/index.js b/docusaurus-plugin-openapi/src/theme/ApiSidebar/index.js
@@ -10,8 +10,8 @@ import clsx from "clsx";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import useUserPreferencesContext from "@theme/hooks/useUserPreferencesContext";
 import useLockBodyScroll from "@theme/hooks/useLockBodyScroll";
-import useWindowSize, { windowSizes } from "@theme/hooks/useWindowSize";
-import useScrollPosition from "@theme/hooks/useScrollPosition";
+import useWindowSize from "@theme/hooks/useWindowSize";
+import { useScrollPosition } from "@docusaurus/theme-common";
 import Link from "@docusaurus/Link";
 import isInternalUrl from "@docusaurus/isInternalUrl";
 
@@ -209,7 +209,7 @@ function DocSidebar(props) {
   const windowSize = useWindowSize();
 
   useEffect(() => {
-    if (windowSize === windowSizes.desktop) {
+    if (windowSize === 'desktop') {
       setShowResponsiveSidebar(false);
     }
   }, [windowSize]);