@docusaurus/plugin-debug 2.0.0-beta.fbdeefcac → 2.0.0-rc.1

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "@docusaurus/plugin-debug",
-  "version": "2.0.0-beta.fbdeefcac",
+  "version": "2.0.0-rc.1",
   "description": "Debug plugin for Docusaurus.",
   "main": "lib/index.js",
+  "types": "src/plugin-debug.d.ts",
   "scripts": {
-    "build": "tsc",
-    "watch": "tsc --watch"
+    "build": "tsc --build && node ../../admin/scripts/copyUntypedFiles.js && prettier --config ../../.prettierrc --write \"lib/theme/**/*.js\"",
+    "watch": "run-p -c copy:watch build:watch",
+    "build:watch": "tsc --build --watch",
+    "copy:watch": "node ../../admin/scripts/copyUntypedFiles.js --watch"
   },
   "publishConfig": {
     "access": "public"
@@ -17,18 +20,22 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.fbdeefcac",
-    "@docusaurus/types": "2.0.0-beta.fbdeefcac",
-    "@docusaurus/utils": "2.0.0-beta.fbdeefcac",
+    "@docusaurus/core": "2.0.0-rc.1",
+    "@docusaurus/types": "2.0.0-rc.1",
+    "@docusaurus/utils": "2.0.0-rc.1",
+    "fs-extra": "^10.1.0",
     "react-json-view": "^1.21.3",
-    "tslib": "^2.1.0"
+    "tslib": "^2.4.0"
+  },
+  "devDependencies": {
+    "@docusaurus/types": "2.0.0-beta.21"
   },
   "peerDependencies": {
     "react": "^16.8.4 || ^17.0.0",
     "react-dom": "^16.8.4 || ^17.0.0"
   },
   "engines": {
-    "node": ">=12.13.0"
+    "node": ">=16.14"
   },
-  "gitHead": "636c490f68d16a7452499ab722deb5ed51ef49fc"
+  "gitHead": "c8ddd02a8e68dfaf515c20465a049a83153bd205"
 }

package/src/index.ts

@@ -5,14 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {LoadContext, Plugin} from '@docusaurus/types';
-import {docuHash, normalizeUrl, posixPath} from '@docusaurus/utils';
 import path from 'path';
+import {docuHash, normalizeUrl, posixPath} from '@docusaurus/utils';
+import type {LoadContext, Plugin} from '@docusaurus/types';
 
 export default function pluginDebug({
   siteConfig: {baseUrl},
   generatedFilesDir,
-}: LoadContext): Plugin<void> {
+}: LoadContext): Plugin<undefined> {
   const pluginDataDirRoot = path.join(
     generatedFilesDir,
     'docusaurus-plugin-debug',
@@ -24,7 +24,10 @@ export default function pluginDebug({
     name: 'docusaurus-plugin-debug',
 
     getThemePath() {
-      return path.resolve(__dirname, '../src/theme');
+      return '../lib/theme';
+    },
+    getTypeScriptThemePath() {
+      return '../src/theme';
     },
 
     async contentLoaded({actions: {createData, addRoute}, allContent}) {

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}

@@ -6,20 +6,16 @@
  */
 
 import React from 'react';
-
-import DebugLayout from '../DebugLayout';
-import DebugJsonView from '../DebugJsonView';
-
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import DebugLayout from '@theme/DebugLayout';
+import DebugJsonView from '@theme/DebugJsonView';
 
-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.tsx

@@ -0,0 +1,21 @@
+/**
+ * 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 useGlobalData from '@docusaurus/useGlobalData';
+import DebugLayout from '@theme/DebugLayout';
+import DebugJsonView from '@theme/DebugJsonView';
+
+export default function DebugMetadata(): JSX.Element {
+  const globalData = useGlobalData();
+  return (
+    <DebugLayout>
+      <h2>Global data</h2>
+      <DebugJsonView src={globalData} collapseDepth={3} />
+    </DebugLayout>
+  );
+}

package/src/theme/DebugJsonView/index.tsx

@@ -0,0 +1,58 @@
+/**
+ * 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 BrowserOnly from '@docusaurus/BrowserOnly';
+import type {Props} from '@theme/DebugJsonView';
+import type {ReactJsonViewProps} from 'react-json-view';
+
+// 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
+function BrowserOnlyReactJson(props: ReactJsonViewProps) {
+  return (
+    <BrowserOnly>
+      {() => {
+        const {default: ReactJson} =
+          // eslint-disable-next-line global-require, @typescript-eslint/no-var-requires
+          require('react-json-view') as typeof import('react-json-view');
+        return <ReactJson {...props} />;
+      }}
+    </BrowserOnly>
+  );
+}
+
+export default function DebugJsonView({
+  src,
+  collapseDepth,
+}: Props): JSX.Element {
+  return (
+    <BrowserOnlyReactJson
+      src={src as object}
+      style={{
+        marginTop: '10px',
+        padding: '10px',
+        borderRadius: '4px',
+        backgroundColor: '#292a2b',
+      }}
+      name={RootName}
+      theme="paraiso"
+      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
+        field.name !== RootName && Object.keys(field.src).length > 50
+      }
+      collapsed={collapseDepth}
+      groupArraysAfterLength={5}
+      enableClipboard={false}
+      displayDataTypes={false}
+    />
+  );
+}

package/src/theme/DebugLayout/index.tsx

@@ -0,0 +1,60 @@
+/**
+ * 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, {type ReactNode} from 'react';
+import Head from '@docusaurus/Head';
+import Link from '@docusaurus/Link';
+import styles from './styles.module.css';
+
+function DebugNavLink({to, children}: {to: string; children: ReactNode}) {
+  return (
+    <Link
+      className={styles.navlink}
+      isNavLink
+      to={to}
+      exact
+      activeStyle={{
+        backgroundColor: '#363739',
+      }}>
+      {children}
+    </Link>
+  );
+}
+
+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>
+        <nav className={styles.nav}>
+          <DebugNavLink to="/__docusaurus/debug">Config</DebugNavLink>
+          <DebugNavLink to="/__docusaurus/debug/metadata">
+            Metadata
+          </DebugNavLink>
+          <DebugNavLink to="/__docusaurus/debug/registry">
+            Registry
+          </DebugNavLink>
+          <DebugNavLink to="/__docusaurus/debug/routes">Routes</DebugNavLink>
+          <DebugNavLink to="/__docusaurus/debug/content">Content</DebugNavLink>
+          <DebugNavLink to="/__docusaurus/debug/globalData">
+            Global data
+          </DebugNavLink>
+        </nav>
+        <main className={styles.container}>{children}</main>
+      </div>
+    </>
+  );
+}

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}

@@ -6,16 +6,15 @@
  */
 
 import React from 'react';
-
-import DebugLayout from '../DebugLayout';
 import registry from '@generated/registry';
+import DebugLayout from '@theme/DebugLayout';
 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 +29,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.tsx

@@ -0,0 +1,38 @@
+/**
+ * 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 routes from '@generated/routes';
+import DebugLayout from '@theme/DebugLayout';
+import DebugJsonView from '@theme/DebugJsonView';
+import styles from './styles.module.css';
+
+export default function DebugRoutes(): JSX.Element {
+  return (
+    <DebugLayout>
+      <h2>Routes</h2>
+      <ul className="clean-list">
+        {routes.map(({path, exact, routes: childRoutes}) => (
+          <li key={path} className={styles.listItem}>
+            <div className={styles.route}>
+              <code className={styles.routeName}>{path}</code>
+            </div>
+            <div>
+              Is exact: <code>{String(Boolean(exact))}</code>
+            </div>
+            {childRoutes && (
+              <div>
+                Child Routes:
+                <DebugJsonView src={childRoutes} />
+              </div>
+            )}
+          </li>
+        ))}
+      </ul>
+    </DebugLayout>
+  );
+}

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.tsx

@@ -0,0 +1,44 @@
+/**
+ * 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 useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import DebugLayout from '@theme/DebugLayout';
+import styles from './styles.module.css';
+
+export default function DebugMetadata(): JSX.Element {
+  const {siteMetadata} = useDocusaurusContext();
+  return (
+    <DebugLayout>
+      <h2>Site Metadata</h2>
+      <div>
+        Docusaurus Version: <code>{siteMetadata.docusaurusVersion}</code>
+      </div>
+      <div>
+        Site Version:{' '}
+        <code>{siteMetadata.siteVersion ?? 'No version specified'}</code>
+      </div>
+      <h3 className={styles.sectionTitle}>Plugins and themes</h3>
+      <ul className="clean-list">
+        {Object.entries(siteMetadata.pluginVersions).map(
+          ([name, versionInformation]) => (
+            <li key={name} className={styles.listItem}>
+              {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>
+          ),
+        )}
+      </ul>
+    </DebugLayout>
+  );
+}

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;