feat(v2): debug pages + debug layout + ability to debug content (#3229)

* improve debug plugin: - add multiple debug pages + debug layout - ability to debug plugin contentLoaded data * add missing dependency * fix broken test * improve content rendering a bit * create basic DebugJsonView * fix ReactJson SSR issues
facebook · Aug 7, 2020 · fe281a8 · fe281a8
1 parent be210a1
commit fe281a8
Show file tree

Hide file tree

Showing 30 changed files with 511 additions and 110 deletions.
diff --git a/packages/docusaurus-plugin-client-redirects/package.json b/packages/docusaurus-plugin-client-redirects/package.json
@@ -12,6 +12,7 @@
   },
   "license": "MIT",
   "dependencies": {
+    "@docusaurus/core": "^2.0.0-alpha.61",
     "@docusaurus/types": "^2.0.0-alpha.61",
     "@docusaurus/utils": "^2.0.0-alpha.61",
     "@hapi/joi": "^17.1.1",

diff --git a/packages/docusaurus-plugin-client-redirects/src/__tests__/normalizePluginOptions.test.ts b/packages/docusaurus-plugin-client-redirects/src/__tests__/normalizePluginOptions.test.ts
@@ -39,6 +39,7 @@ describe('normalizePluginOptions', () => {
         redirects: [{from: '/x', to: '/y'}],
       }),
     ).toEqual({
+      id: 'default',
       fromExtensions: ['exe', 'zip'],
       toExtensions: ['html'],
       createRedirects,

diff --git a/packages/docusaurus-plugin-client-redirects/src/normalizePluginOptions.ts b/packages/docusaurus-plugin-client-redirects/src/normalizePluginOptions.ts
@@ -8,8 +8,10 @@
 import {PluginOptions, RedirectOption, UserPluginOptions} from './types';
 import * as Joi from '@hapi/joi';
 import {PathnameValidator} from './redirectValidation';
+import {DEFAULT_PLUGIN_ID} from '@docusaurus/core/lib/constants';
 
 export const DefaultPluginOptions: PluginOptions = {
+  id: DEFAULT_PLUGIN_ID, // TODO temporary
   fromExtensions: [],
   toExtensions: [],
   redirects: [],
@@ -26,6 +28,7 @@ const RedirectPluginOptionValidation = Joi.object<RedirectOption>({
 const isString = Joi.string().required().not(null);
 
 const UserOptionsSchema = Joi.object<UserPluginOptions>({
+  id: Joi.string().optional(), // TODO remove once validation  migrated to new system
   fromExtensions: Joi.array().items(isString),
   toExtensions: Joi.array().items(isString),
   redirects: Joi.array().items(RedirectPluginOptionValidation),

diff --git a/packages/docusaurus-plugin-client-redirects/src/types.ts b/packages/docusaurus-plugin-client-redirects/src/types.ts
@@ -8,6 +8,7 @@
 import {Props} from '@docusaurus/types';
 
 export type PluginOptions = {
+  id: string;
   fromExtensions: string[];
   toExtensions: string[];
   redirects: RedirectOption[];

diff --git a/packages/docusaurus-plugin-content-blog/src/index.ts b/packages/docusaurus-plugin-content-blog/src/index.ts
@@ -28,7 +28,6 @@ import {
 import {PluginOptionSchema} from './pluginOptionSchema';
 import {
   LoadContext,
-  PluginContentLoadedActions,
   ConfigureWebpackUtils,
   Props,
   Plugin,
@@ -195,13 +194,7 @@ export default function pluginContentBlog(
       };
     },
 
-    async contentLoaded({
-      content: blogContents,
-      actions,
-    }: {
-      content: BlogContent;
-      actions: PluginContentLoadedActions;
-    }) {
+    async contentLoaded({content: blogContents, actions}) {
       if (!blogContents) {
         return;
       }

diff --git a/packages/docusaurus-plugin-debug/package.json b/packages/docusaurus-plugin-debug/package.json
@@ -13,7 +13,8 @@
   "license": "MIT",
   "dependencies": {
     "@docusaurus/types": "^2.0.0-alpha.61",
-    "@docusaurus/utils": "^2.0.0-alpha.61"
+    "@docusaurus/utils": "^2.0.0-alpha.61",
+    "react-json-view": "^1.19.1"
   },
   "peerDependencies": {
     "@docusaurus/core": "^2.0.0",

diff --git a/packages/docusaurus-plugin-debug/src/index.ts b/packages/docusaurus-plugin-debug/src/index.ts
@@ -6,26 +6,84 @@
  */
 
 import {LoadContext, Plugin} from '@docusaurus/types';
-import {normalizeUrl} from '@docusaurus/utils';
-
+import {docuHash, normalizeUrl} from '@docusaurus/utils';
 import path from 'path';
 
 export default function pluginContentPages({
   siteConfig: {baseUrl},
+  generatedFilesDir,
 }: LoadContext): Plugin<void> {
+  const pluginDataDirRoot = path.join(
+    generatedFilesDir,
+    'docusaurus-plugin-debug',
+  );
+  const aliasedSource = (source: string) =>
+    `~debug/${path.relative(pluginDataDirRoot, source)}`;
+
   return {
     name: 'docusaurus-plugin-debug',
 
     getThemePath() {
       return path.resolve(__dirname, '../src/theme');
     },
 
-    contentLoaded({actions: {addRoute}}) {
+    async contentLoaded({actions: {createData, addRoute}, allContent}) {
+      const allContentPath = await createData(
+        // Note that this created data path must be in sync with
+        // metadataPath provided to mdx-loader.
+        `${docuHash('docusaurus-debug-allContent')}.json`,
+        JSON.stringify(allContent, null, 2),
+      );
+
+      // Home is config (duplicate for now)
       addRoute({
         path: normalizeUrl([baseUrl, '__docusaurus/debug']),
-        component: '@theme/Debug',
+        component: '@theme/DebugConfig',
+        exact: true,
+      });
+
+      addRoute({
+        path: normalizeUrl([baseUrl, '__docusaurus/debug/config']),
+        component: '@theme/DebugConfig',
         exact: true,
       });
+
+      addRoute({
+        path: normalizeUrl([baseUrl, '__docusaurus/debug/metadata']),
+        component: '@theme/DebugMetadata',
+        exact: true,
+      });
+
+      addRoute({
+        path: normalizeUrl([baseUrl, '__docusaurus/debug/registry']),
+        component: '@theme/DebugRegistry',
+        exact: true,
+      });
+
+      addRoute({
+        path: normalizeUrl([baseUrl, '__docusaurus/debug/routes']),
+        component: '@theme/DebugRoutes',
+        exact: true,
+      });
+
+      addRoute({
+        path: normalizeUrl([baseUrl, '__docusaurus/debug/content']),
+        component: '@theme/DebugContent',
+        exact: true,
+        modules: {
+          allContent: aliasedSource(allContentPath),
+        },
+      });
+    },
+
+    configureWebpack() {
+      return {
+        resolve: {
+          alias: {
+            '~debug': pluginDataDirRoot,
+          },
+        },
+      };
     },
   };
 }
diff --git a/packages/docusaurus-plugin-debug/src/theme/Debug/index.js b/packages/docusaurus-plugin-debug/src/theme/Debug/index.js
diff --git a/packages/docusaurus-plugin-debug/src/theme/DebugConfig/index.js b/packages/docusaurus-plugin-debug/src/theme/DebugConfig/index.js
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+
+import DebugLayout from '../DebugLayout';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+
+function DebugMetadata() {
+  const {siteConfig} = useDocusaurusContext();
+  return (
+    <DebugLayout>
+      <h2>Site config</h2>
+      <div>{JSON.stringify(siteConfig, null, 2)}</div>
+    </DebugLayout>
+  );
+}
+
+export default DebugMetadata;
diff --git a/...n-debug/src/theme/Debug/styles.module.css → ...g/src/theme/DebugConfig/styles.module.css b/...n-debug/src/theme/Debug/styles.module.css → ...g/src/theme/DebugConfig/styles.module.css
@@ -5,13 +5,3 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-.Container {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  margin: 1em;
-}
-
-.Section {
-  width: 500px;
-}
diff --git a/packages/docusaurus-plugin-debug/src/theme/DebugContent/index.js b/packages/docusaurus-plugin-debug/src/theme/DebugContent/index.js
@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, {useState} from 'react';
+
+import DebugLayout from '../DebugLayout';
+import DebugJsonView from '../DebugJsonView';
+
+const PluginInstanceContent = ({pluginId, pluginInstanceContent}) => (
+  <section style={{marginBottom: 30}}>
+    <h4>{`>> ${pluginId}`}</h4>
+    <div
+      style={{
+        marginTop: 10,
+        padding: 10,
+        border: 'thin cyan solid',
+        borderRadius: 5,
+        backgroundColor: 'lightgrey',
+      }}>
+      <DebugJsonView src={pluginInstanceContent} />
+    </div>
+  </section>
+);
+
+const PluginContent = ({pluginName, pluginContent}) => {
+  const [visible, setVisible] = useState(true);
+  return (
+    <section style={{marginBottom: 60}}>
+      <h3 onClick={() => setVisible((v) => !v)} style={{cursor: 'pointer'}}>
+        {pluginName}
+      </h3>
+      {visible && (
+        <div>
+          {Object.entries(pluginContent)
+            // filter plugin instances with no content
+            .filter(
+              ([_pluginId, pluginInstanceContent]) => !!pluginInstanceContent,
+            )
+            .map(([pluginId, pluginInstanceContent]) => {
+              return (
+                <PluginInstanceContent
+                  key={pluginId}
+                  pluginId={pluginId}
+                  pluginInstanceContent={pluginInstanceContent}
+                />
+              );
+            })}
+        </div>
+      )}
+    </section>
+  );
+};
+
+function DebugContent({allContent}) {
+  return (
+    <DebugLayout>
+      <h2>Plugin content</h2>
+      <div>
+        {Object.entries(allContent)
+          // filter plugins with no content
+          .filter(([_pluginName, pluginContent]) =>
+            Object.values(pluginContent).some(
+              (instanceContent) => !!instanceContent,
+            ),
+          )
+          .map(([pluginName, pluginContent]) => {
+            return (
+              <PluginContent
+                key={pluginName}
+                pluginName={pluginName}
+                pluginContent={pluginContent}
+              />
+            );
+          })}
+      </div>
+    </DebugLayout>
+  );
+}
+
+export default DebugContent;
diff --git a/packages/docusaurus-plugin-debug/src/theme/DebugContent/styles.module.css b/packages/docusaurus-plugin-debug/src/theme/DebugContent/styles.module.css
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+