@docusaurus/plugin-debug 2.0.0-beta.1decd6f80 → 2.0.0-beta.20

package/src/plugin-debug.d.ts

@@ -0,0 +1,59 @@
+/**
+ * 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.
+ */
+
+/// <reference types="@docusaurus/module-type-aliases" />
+
+declare module '@docusaurus/plugin-debug' {
+  import type {LoadContext, Plugin} from '@docusaurus/types';
+
+  export default function pluginDebug(context: LoadContext): Plugin<undefined>;
+}
+
+declare module '@theme/DebugConfig' {
+  export default function DebugMetadata(): JSX.Element;
+}
+
+declare module '@theme/DebugContent' {
+  import type {AllContent} from '@docusaurus/types';
+
+  export interface Props {
+    readonly allContent: AllContent;
+  }
+  export default function DebugContent(props: Props): JSX.Element;
+}
+
+declare module '@theme/DebugGlobalData' {
+  export default function DebugGlobalData(): JSX.Element;
+}
+
+declare module '@theme/DebugJsonView' {
+  export interface Props {
+    readonly src: unknown;
+    readonly collapseDepth?: number;
+  }
+  export default function DebugJsonView(props: Props): JSX.Element;
+}
+
+declare module '@theme/DebugLayout' {
+  import type {ReactNode} from 'react';
+
+  export default function DebugLayout(props: {
+    children: ReactNode;
+  }): JSX.Element;
+}
+
+declare module '@theme/DebugRegistry' {
+  export default function DebugRegistry(): JSX.Element;
+}
+
+declare module '@theme/DebugRoutes' {
+  export default function DebugRoutes(): JSX.Element;
+}
+
+declare module '@theme/DebugSiteMetadata' {
+  export default function DebugSiteMetadata(): JSX.Element;
+}

package/src/theme/DebugConfig/{index.js → index.tsx}

@@ -7,19 +7,17 @@
 
 import React from 'react';
 
-import DebugLayout from '../DebugLayout';
-import DebugJsonView from '../DebugJsonView';
+import DebugLayout from '@theme/DebugLayout';
+import DebugJsonView from '@theme/DebugJsonView';
 
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 
-function DebugMetadata() {
+export default function DebugMetadata(): JSX.Element {
   const {siteConfig} = useDocusaurusContext();
   return (
     <DebugLayout>
       <h2>Site config</h2>
-      <DebugJsonView src={siteConfig} collapseDepth="3" />
+      <DebugJsonView src={siteConfig} collapseDepth={3} />
     </DebugLayout>
   );
 }
-
-export default DebugMetadata;

package/src/theme/DebugContent/index.tsx

@@ -0,0 +1,77 @@
+/**
+ * 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 '@theme/DebugLayout';
+import DebugJsonView from '@theme/DebugJsonView';
+import type {Props} from '@theme/DebugContent';
+
+function PluginInstanceContent({
+  pluginId,
+  pluginInstanceContent,
+}: {
+  pluginId: string;
+  pluginInstanceContent: unknown;
+}) {
+  return (
+    <section style={{marginBottom: 30}}>
+      <code>{pluginId}</code>
+      <DebugJsonView src={pluginInstanceContent} collapseDepth={2} />
+    </section>
+  );
+}
+
+function PluginContent({
+  pluginName,
+  pluginContent,
+}: {
+  pluginName: string;
+  pluginContent: {[pluginId: string]: unknown};
+}) {
+  return (
+    <section style={{marginBottom: 60}}>
+      <h3>{pluginName}</h3>
+      <div>
+        {Object.entries(pluginContent)
+          // Filter plugin instances with no content
+          .filter(([, pluginInstanceContent]) => !!pluginInstanceContent)
+          .map(([pluginId, pluginInstanceContent]) => (
+            <PluginInstanceContent
+              key={pluginId}
+              pluginId={pluginId}
+              pluginInstanceContent={pluginInstanceContent}
+            />
+          ))}
+      </div>
+    </section>
+  );
+}
+
+export default function DebugContent({allContent}: Props): JSX.Element {
+  return (
+    <DebugLayout>
+      <h2>Plugin content</h2>
+      <div>
+        {Object.entries(allContent)
+          // Filter plugins with no content
+          .filter(([, pluginContent]) =>
+            Object.values(pluginContent).some(
+              (instanceContent) => !!instanceContent,
+            ),
+          )
+          .map(([pluginName, pluginContent]) => (
+            <PluginContent
+              key={pluginName}
+              pluginName={pluginName}
+              pluginContent={pluginContent}
+            />
+          ))}
+      </div>
+    </DebugLayout>
+  );
+}

package/src/theme/DebugGlobalData/{index.js → index.tsx}

@@ -7,18 +7,16 @@
 
 import React from 'react';
 
-import DebugLayout from '../DebugLayout';
-import DebugJsonView from '../DebugJsonView';
+import DebugLayout from '@theme/DebugLayout';
+import DebugJsonView from '@theme/DebugJsonView';
 import useGlobalData from '@docusaurus/useGlobalData';
 
-function DebugMetadata() {
+export default function DebugMetadata(): JSX.Element {
   const globalData = useGlobalData();
   return (
     <DebugLayout>
       <h2>Global data</h2>
-      <DebugJsonView src={globalData} collapseDepth="3" />
+      <DebugJsonView src={globalData} collapseDepth={3} />
     </DebugLayout>
   );
 }
-
-export default DebugMetadata;

package/src/theme/DebugJsonView/{index.js → index.tsx}

@@ -6,30 +6,34 @@
  */
 
 import React from 'react';
-
 import BrowserOnly from '@docusaurus/BrowserOnly';
+import type {Props} from '@theme/DebugJsonView';
+import type {ReactJsonViewProps} from 'react-json-view';
 
-// avoids "react-json-view" to display  "root"
-const RootName = false;
+// Avoids "react-json-view" displaying "root"
+const RootName = null;
 
 // Seems ReactJson does not work with SSR
 // https://github.com/mac-s-g/react-json-view/issues/121
-const BrowserOnlyReactJson = (props) => {
+function BrowserOnlyReactJson(props: ReactJsonViewProps) {
   return (
     <BrowserOnly>
       {() => {
-        // eslint-disable-next-line global-require
+        // eslint-disable-next-line global-require, @typescript-eslint/no-var-requires
         const ReactJson = require('react-json-view').default;
         return <ReactJson {...props} />;
       }}
     </BrowserOnly>
   );
-};
+}
 
-function DebugJsonView({src, collapseDepth}) {
+export default function DebugJsonView({
+  src,
+  collapseDepth,
+}: Props): JSX.Element {
   return (
     <BrowserOnlyReactJson
-      src={src}
+      src={src as object}
       style={{
         marginTop: '10px',
         padding: '10px',
@@ -38,18 +42,16 @@ function DebugJsonView({src, collapseDepth}) {
       }}
       name={RootName}
       theme="paraiso"
-      shouldCollapse={(field) => {
+      shouldCollapse={(field) =>
         // By default, we collapse the json for performance reasons
         // See https://github.com/mac-s-g/react-json-view/issues/235
         // Non-root elements that are larger than 50 fields are collapsed
-        return field.name !== RootName && Object.keys(field.src).length > 50;
-      }}
+        field.name !== RootName && Object.keys(field.src).length > 50
+      }
       collapsed={collapseDepth}
-      groupArraysAfterLength="5"
+      groupArraysAfterLength={5}
       enableClipboard={false}
       displayDataTypes={false}
     />
   );
 }
-
-export default DebugJsonView;

package/src/theme/DebugLayout/{index.js → index.tsx}

@@ -5,30 +5,37 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {type ReactNode} from 'react';
 import Head from '@docusaurus/Head';
 import Link from '@docusaurus/Link';
 import styles from './styles.module.css';
 
-const DebugNavLink = ({to, children}) => (
-  <Link
-    className={styles.navlink}
-    isNavLink
-    to={to}
-    exact
-    activeStyle={{
-      backgroundColor: '#363739',
-    }}>
-    {children}
-  </Link>
-);
+function DebugNavLink({to, children}: {to: string; children: ReactNode}) {
+  return (
+    <Link
+      className={styles.navlink}
+      isNavLink
+      to={to}
+      exact
+      activeStyle={{
+        backgroundColor: '#363739',
+      }}>
+      {children}
+    </Link>
+  );
+}
 
-function DebugLayout({children}) {
+export default function DebugLayout({
+  children,
+}: {
+  children: ReactNode;
+}): JSX.Element {
   return (
     <>
       <Head>
         <html lang="en" />
         <title>Docusaurus debug panel</title>
+        <meta name="robots" content="noindex" />
       </Head>
 
       <div>
@@ -51,5 +58,3 @@ function DebugLayout({children}) {
     </>
   );
 }
-
-export default DebugLayout;

package/src/theme/DebugLayout/styles.module.css

@@ -36,7 +36,7 @@
   font-size: clamp(12px, 4vw, 16px);
   text-align: center;
   border-radius: 4px;
-  padding: 6px 6px;
+  padding: 6px;
 }
 
 .navlink:hover {

package/src/theme/DebugRegistry/{index.js → index.tsx}

@@ -7,15 +7,15 @@
 
 import React from 'react';
 
-import DebugLayout from '../DebugLayout';
+import DebugLayout from '@theme/DebugLayout';
 import registry from '@generated/registry';
 import styles from './styles.module.css';
 
-function DebugRegistry() {
+export default function DebugRegistry(): JSX.Element {
   return (
     <DebugLayout>
       <h2>Registry</h2>
-      <ul className={styles.list}>
+      <ul className="clean-list">
         {Object.values(registry).map(([, aliasedPath, resolved]) => (
           <li key={aliasedPath} className={styles.listItem}>
             <div style={{marginBottom: '10px'}}>
@@ -30,5 +30,3 @@ function DebugRegistry() {
     </DebugLayout>
   );
 }
-
-export default DebugRegistry;

package/src/theme/DebugRegistry/styles.module.css

@@ -5,12 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-.list {
-  padding: 0;
-}
-
 .listItem {
-  list-style: none;
   background-color: #242526;
   padding: 10px;
   border-radius: 4px;

package/src/theme/DebugRoutes/{index.js → index.tsx}

@@ -7,16 +7,16 @@
 
 import React from 'react';
 
-import DebugLayout from '../DebugLayout';
-import DebugJsonView from '../DebugJsonView';
+import DebugLayout from '@theme/DebugLayout';
+import DebugJsonView from '@theme/DebugJsonView';
 import routes from '@generated/routes';
 import styles from './styles.module.css';
 
-function DebugRoutes() {
+export default function DebugRoutes(): JSX.Element {
   return (
     <DebugLayout>
       <h2>Routes</h2>
-      <ul className={styles.list}>
+      <ul className="clean-list">
         {routes.map(({path, exact, routes: childRoutes}) => (
           <li key={path} className={styles.listItem}>
             <div className={styles.route}>
@@ -37,5 +37,3 @@ function DebugRoutes() {
     </DebugLayout>
   );
 }
-
-export default DebugRoutes;

package/src/theme/DebugRoutes/styles.module.css

@@ -5,12 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
- .list {
-  padding: 0;
-}
-
 .listItem {
-  list-style: none;
   background-color: #242526;
   padding: 10px;
   border-radius: 4px;

package/src/theme/DebugSiteMetadata/{index.js → index.tsx}

@@ -7,11 +7,11 @@
 
 import React from 'react';
 
-import DebugLayout from '../DebugLayout';
+import DebugLayout from '@theme/DebugLayout';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import styles from './styles.module.css';
 
-function DebugMetadata() {
+export default function DebugMetadata(): JSX.Element {
   const {siteMetadata} = useDocusaurusContext();
   return (
     <DebugLayout>
@@ -24,15 +24,16 @@ function DebugMetadata() {
         <code>{siteMetadata.siteVersion || 'No version specified'}</code>
       </div>
       <h3 className={styles.sectionTitle}>Plugins and themes</h3>
-      <ul className={styles.list}>
+      <ul className="clean-list">
         {Object.entries(siteMetadata.pluginVersions).map(
           ([name, versionInformation]) => (
             <li key={name} className={styles.listItem}>
-              {versionInformation.version && (
-                <div className={styles.version}>
-                  <code>{versionInformation.version}</code>
-                </div>
-              )}
+              {versionInformation.type === 'package' &&
+                versionInformation.version && (
+                  <div className={styles.version}>
+                    <code>{versionInformation.version}</code>
+                  </div>
+                )}
               <div className={styles.name}>{name}</div>
               <div>Type: {versionInformation.type}</div>
             </li>
@@ -42,5 +43,3 @@ function DebugMetadata() {
     </DebugLayout>
   );
 }
-
-export default DebugMetadata;

package/src/theme/DebugSiteMetadata/styles.module.css

@@ -9,12 +9,7 @@
   margin-top: 20px;
 }
 
-.list {
-  padding: 0;
-}
-
 .listItem {
-  list-style: none;
   background-color: #242526;
   padding: 10px;
   border-radius: 4px;