@docusaurus/plugin-debug 2.0.0-beta.8e9b829d9 → 2.0.0-beta.9

package/lib/theme/DebugJsonView/index.js

@@ -0,0 +1,42 @@
+"use strict";
+/**
+ * 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.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importDefault)(require("react"));
+const BrowserOnly_1 = (0, tslib_1.__importDefault)(require("@docusaurus/BrowserOnly"));
+// avoids "react-json-view" to display  "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) => {
+    return (react_1.default.createElement(BrowserOnly_1.default, null, () => {
+        // eslint-disable-next-line global-require, @typescript-eslint/no-var-requires
+        const ReactJson = require('react-json-view').default;
+        return react_1.default.createElement(ReactJson, { ...props });
+    }));
+};
+function DebugJsonView({ src, collapseDepth }) {
+    return (react_1.default.createElement(BrowserOnlyReactJson
+    // Prop type defined by react-json-view
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    , { 
+        // Prop type defined by react-json-view
+        // eslint-disable-next-line @typescript-eslint/ban-types
+        src: src, 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
+            return field.name !== RootName && Object.keys(field.src).length > 50;
+        }, collapsed: collapseDepth, groupArraysAfterLength: 5, enableClipboard: false, displayDataTypes: false }));
+}
+exports.default = DebugJsonView;

package/lib/theme/DebugLayout/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 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 { ReactNode } from 'react';
+declare function DebugLayout({ children }: {
+    children: ReactNode;
+}): JSX.Element;
+export default DebugLayout;

package/lib/theme/DebugLayout/index.js

@@ -0,0 +1,32 @@
+"use strict";
+/**
+ * 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.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importDefault)(require("react"));
+const Head_1 = (0, tslib_1.__importDefault)(require("@docusaurus/Head"));
+const Link_1 = (0, tslib_1.__importDefault)(require("@docusaurus/Link"));
+const styles_module_css_1 = (0, tslib_1.__importDefault)(require("./styles.module.css"));
+const DebugNavLink = ({ to, children }) => (react_1.default.createElement(Link_1.default, { className: styles_module_css_1.default.navlink, isNavLink: true, to: to, exact: true, activeStyle: {
+        backgroundColor: '#363739',
+    } }, children));
+function DebugLayout({ children }) {
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Head_1.default, null,
+            react_1.default.createElement("html", { lang: "en" }),
+            react_1.default.createElement("title", null, "Docusaurus debug panel")),
+        react_1.default.createElement("div", null,
+            react_1.default.createElement("nav", { className: styles_module_css_1.default.nav },
+                react_1.default.createElement(DebugNavLink, { to: "/__docusaurus/debug" }, "Config"),
+                react_1.default.createElement(DebugNavLink, { to: "/__docusaurus/debug/metadata" }, "Metadata"),
+                react_1.default.createElement(DebugNavLink, { to: "/__docusaurus/debug/registry" }, "Registry"),
+                react_1.default.createElement(DebugNavLink, { to: "/__docusaurus/debug/routes" }, "Routes"),
+                react_1.default.createElement(DebugNavLink, { to: "/__docusaurus/debug/content" }, "Content"),
+                react_1.default.createElement(DebugNavLink, { to: "/__docusaurus/debug/globalData" }, "Global data")),
+            react_1.default.createElement("main", { className: styles_module_css_1.default.container }, children))));
+}
+exports.default = DebugLayout;

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

@@ -0,0 +1,75 @@
+/**
+ * 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.
+ */
+
+.container {
+  padding: 20px;
+  padding-top: 80px;
+  overflow-x: hidden;
+  background-color: #18191a;
+  color: white;
+  min-height: 100vh;
+}
+
+.container code {
+  color: white;
+  background-color: #444950;
+}
+
+.nav {
+  position: fixed;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  height: 3.75rem;
+  background-color: #242526;
+  width: 100%;
+  z-index: 1;
+}
+
+.navlink {
+  color: white;
+  font-weight: 500;
+  font-size: clamp(12px, 4vw, 16px);
+  text-align: center;
+  border-radius: 4px;
+  padding: 6px 6px;
+}
+
+.navlink:hover {
+  text-decoration: none;
+  background-color: #292a2b;
+}
+
+.active {
+  background-color: #363739;
+}
+
+@media screen and (min-width: 800px) {
+  .nav {
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    height: 100vh;
+    width: 200px;
+    float: left;
+    background-color: #18191a;
+    border-right: 1px solid #606770;
+    padding-top: 20px;
+  }
+
+  .navlink {
+    width: 80%;
+    margin-top: 20px;
+    text-align: left;
+  }
+
+  .container {
+    padding-top: 40px;
+    float: right;
+    width: calc(100% - 200px);
+  }
+}

package/lib/theme/DebugRegistry/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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="react" />
+declare function DebugRegistry(): JSX.Element;
+export default DebugRegistry;

package/lib/theme/DebugRegistry/index.js

@@ -0,0 +1,25 @@
+"use strict";
+/**
+ * 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.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importDefault)(require("react"));
+const DebugLayout_1 = (0, tslib_1.__importDefault)(require("@theme/DebugLayout"));
+const registry_1 = (0, tslib_1.__importDefault)(require("@generated/registry"));
+const styles_module_css_1 = (0, tslib_1.__importDefault)(require("./styles.module.css"));
+function DebugRegistry() {
+    return (react_1.default.createElement(DebugLayout_1.default, null,
+        react_1.default.createElement("h2", null, "Registry"),
+        react_1.default.createElement("ul", { className: styles_module_css_1.default.list }, Object.values(registry_1.default).map(([, aliasedPath, resolved]) => (react_1.default.createElement("li", { key: aliasedPath, className: styles_module_css_1.default.listItem },
+            react_1.default.createElement("div", { style: { marginBottom: '10px' } },
+                "Aliased Path: ",
+                react_1.default.createElement("code", null, aliasedPath)),
+            react_1.default.createElement("div", null,
+                "Resolved Path: ",
+                react_1.default.createElement("code", null, resolved))))))));
+}
+exports.default = DebugRegistry;

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

@@ -0,0 +1,18 @@
+/**
+ * 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.
+ */
+
+.list {
+  padding: 0;
+}
+
+.listItem {
+  list-style: none;
+  background-color: #242526;
+  padding: 10px;
+  border-radius: 4px;
+  margin-bottom: 20px;
+}

package/lib/theme/DebugRoutes/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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="react" />
+declare function DebugRoutes(): JSX.Element;
+export default DebugRoutes;

package/lib/theme/DebugRoutes/index.js

@@ -0,0 +1,28 @@
+"use strict";
+/**
+ * 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.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importDefault)(require("react"));
+const DebugLayout_1 = (0, tslib_1.__importDefault)(require("@theme/DebugLayout"));
+const DebugJsonView_1 = (0, tslib_1.__importDefault)(require("@theme/DebugJsonView"));
+const routes_1 = (0, tslib_1.__importDefault)(require("@generated/routes"));
+const styles_module_css_1 = (0, tslib_1.__importDefault)(require("./styles.module.css"));
+function DebugRoutes() {
+    return (react_1.default.createElement(DebugLayout_1.default, null,
+        react_1.default.createElement("h2", null, "Routes"),
+        react_1.default.createElement("ul", { className: styles_module_css_1.default.list }, routes_1.default.map(({ path, exact, routes: childRoutes }) => (react_1.default.createElement("li", { key: path, className: styles_module_css_1.default.listItem },
+            react_1.default.createElement("div", { className: styles_module_css_1.default.route },
+                react_1.default.createElement("code", { className: styles_module_css_1.default.routeName }, path)),
+            react_1.default.createElement("div", null,
+                "Is exact: ",
+                react_1.default.createElement("code", null, String(Boolean(exact)))),
+            childRoutes && (react_1.default.createElement("div", null,
+                "Child Routes:",
+                react_1.default.createElement(DebugJsonView_1.default, { src: childRoutes })))))))));
+}
+exports.default = DebugRoutes;

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

@@ -0,0 +1,26 @@
+/**
+ * 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.
+ */
+
+ .list {
+  padding: 0;
+}
+
+.listItem {
+  list-style: none;
+  background-color: #242526;
+  padding: 10px;
+  border-radius: 4px;
+  margin-bottom: 20px;
+}
+
+.route {
+  margin-bottom: 10px;
+}
+
+.routeName {
+  color: #e06b6b;
+}

package/lib/theme/DebugSiteMetadata/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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="react" />
+declare function DebugMetadata(): JSX.Element;
+export default DebugMetadata;

package/lib/theme/DebugSiteMetadata/index.js

@@ -0,0 +1,35 @@
+"use strict";
+/**
+ * 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.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importDefault)(require("react"));
+const DebugLayout_1 = (0, tslib_1.__importDefault)(require("@theme/DebugLayout"));
+const useDocusaurusContext_1 = (0, tslib_1.__importDefault)(require("@docusaurus/useDocusaurusContext"));
+const styles_module_css_1 = (0, tslib_1.__importDefault)(require("./styles.module.css"));
+function DebugMetadata() {
+    const { siteMetadata } = (0, useDocusaurusContext_1.default)();
+    return (react_1.default.createElement(DebugLayout_1.default, null,
+        react_1.default.createElement("h2", null, "Site Metadata"),
+        react_1.default.createElement("div", null,
+            "Docusaurus Version: ",
+            react_1.default.createElement("code", null, siteMetadata.docusaurusVersion)),
+        react_1.default.createElement("div", null,
+            "Site Version:",
+            ' ',
+            react_1.default.createElement("code", null, siteMetadata.siteVersion || 'No version specified')),
+        react_1.default.createElement("h3", { className: styles_module_css_1.default.sectionTitle }, "Plugins and themes"),
+        react_1.default.createElement("ul", { className: styles_module_css_1.default.list }, Object.entries(siteMetadata.pluginVersions).map(([name, versionInformation]) => (react_1.default.createElement("li", { key: name, className: styles_module_css_1.default.listItem },
+            versionInformation.type === 'package' &&
+                versionInformation.version && (react_1.default.createElement("div", { className: styles_module_css_1.default.version },
+                react_1.default.createElement("code", null, versionInformation.version))),
+            react_1.default.createElement("div", { className: styles_module_css_1.default.name }, name),
+            react_1.default.createElement("div", null,
+                "Type: ",
+                versionInformation.type)))))));
+}
+exports.default = DebugMetadata;

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

@@ -0,0 +1,31 @@
+/**
+ * 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.
+ */
+
+.sectionTitle {
+  margin-top: 20px;
+}
+
+.list {
+  padding: 0;
+}
+
+.listItem {
+  list-style: none;
+  background-color: #242526;
+  padding: 10px;
+  border-radius: 4px;
+  margin-bottom: 20px;
+}
+
+.version {
+  float: right;
+}
+
+.name {
+  font-weight: 800;
+  color: #e06b6b;
+}

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@docusaurus/plugin-debug",
-  "version": "2.0.0-beta.8e9b829d9",
+  "version": "2.0.0-beta.9",
   "description": "Debug plugin for Docusaurus.",
   "main": "lib/index.js",
+  "types": "src/types.d.ts",
   "scripts": {
-    "build": "tsc",
-    "watch": "tsc --watch"
+    "build": "tsc && node copyUntypedFiles.js",
+    "watch": "node copyUntypedFiles.js && tsc --watch"
   },
   "publishConfig": {
     "access": "public"
@@ -17,18 +18,19 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.8e9b829d9",
-    "@docusaurus/types": "2.0.0-beta.8e9b829d9",
-    "@docusaurus/utils": "2.0.0-beta.8e9b829d9",
+    "@docusaurus/core": "2.0.0-beta.9",
+    "@docusaurus/types": "2.0.0-beta.9",
+    "@docusaurus/utils": "2.0.0-beta.9",
+    "fs-extra": "^10.0.0",
     "react-json-view": "^1.21.3",
-    "tslib": "^2.1.0"
+    "tslib": "^2.3.1"
   },
   "peerDependencies": {
     "react": "^16.8.4 || ^17.0.0",
     "react-dom": "^16.8.4 || ^17.0.0"
   },
   "engines": {
-    "node": ">=12.13.0"
+    "node": ">=14"
   },
-  "gitHead": "cb79fda03ac12835068842a7e0a86f610974eae2"
+  "gitHead": "8a491fc29ad002f90e97f5b5fe4178ac8fa0c4d7"
 }

package/src/index.ts

@@ -24,7 +24,7 @@ export default function pluginDebug({
     name: 'docusaurus-plugin-debug',
 
     getThemePath() {
-      return path.resolve(__dirname, '../src/theme');
+      return path.resolve(__dirname, '../lib/theme');
     },
 
     async contentLoaded({actions: {createData, addRoute}, allContent}) {

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

@@ -7,17 +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() {
+function DebugMetadata(): JSX.Element {
   const {siteConfig} = useDocusaurusContext();
   return (
     <DebugLayout>
       <h2>Site config</h2>
-      <DebugJsonView src={siteConfig} collapseDepth="3" />
+      <DebugJsonView src={siteConfig} collapseDepth={3} />
     </DebugLayout>
   );
 }

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

@@ -7,17 +7,30 @@
 
 import React from 'react';
 
-import DebugLayout from '../DebugLayout';
-import DebugJsonView from '../DebugJsonView';
+import DebugLayout from '@theme/DebugLayout';
+import DebugJsonView from '@theme/DebugJsonView';
+import type {Props} from '@theme/DebugContent';
 
-const PluginInstanceContent = ({pluginId, pluginInstanceContent}) => (
+const PluginInstanceContent = ({
+  pluginId,
+  pluginInstanceContent,
+}: {
+  pluginId: string;
+  pluginInstanceContent: unknown;
+}) => (
   <section style={{marginBottom: 30}}>
     <code>{pluginId}</code>
-    <DebugJsonView src={pluginInstanceContent} collapseDepth="2" />
+    <DebugJsonView src={pluginInstanceContent} collapseDepth={2} />
   </section>
 );
 
-const PluginContent = ({pluginName, pluginContent}) => {
+const PluginContent = ({
+  pluginName,
+  pluginContent,
+}: {
+  pluginName: string;
+  pluginContent: Record<string, unknown>;
+}) => {
   return (
     <section style={{marginBottom: 60}}>
       <h3>{pluginName}</h3>
@@ -41,7 +54,7 @@ const PluginContent = ({pluginName, pluginContent}) => {
   );
 };
 
-function DebugContent({allContent}) {
+function DebugContent({allContent}: Props): JSX.Element {
   return (
     <DebugLayout>
       <h2>Plugin content</h2>

package/src/theme/DebugGlobalData/{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 useGlobalData from '@docusaurus/useGlobalData';
 
-function DebugMetadata() {
+function DebugMetadata(): JSX.Element {
   const globalData = useGlobalData();
   return (
     <DebugLayout>
       <h2>Global data</h2>
-      <DebugJsonView src={globalData} collapseDepth="3" />
+      <DebugJsonView src={globalData} collapseDepth={3} />
     </DebugLayout>
   );
 }

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

@@ -6,19 +6,20 @@
  */
 
 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;
+const RootName = null;
 
 // Seems ReactJson does not work with SSR
 // https://github.com/mac-s-g/react-json-view/issues/121
-const BrowserOnlyReactJson = (props) => {
+const 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} />;
       }}
@@ -26,10 +27,12 @@ const BrowserOnlyReactJson = (props) => {
   );
 };
 
-function DebugJsonView({src, collapseDepth}) {
+function DebugJsonView({src, collapseDepth}: Props): JSX.Element {
   return (
     <BrowserOnlyReactJson
-      src={src}
+      // Prop type defined by react-json-view
+      // eslint-disable-next-line @typescript-eslint/ban-types
+      src={src as object}
       style={{
         marginTop: '10px',
         padding: '10px',
@@ -45,7 +48,7 @@ function DebugJsonView({src, collapseDepth}) {
         return field.name !== RootName && Object.keys(field.src).length > 50;
       }}
       collapsed={collapseDepth}
-      groupArraysAfterLength="5"
+      groupArraysAfterLength={5}
       enableClipboard={false}
       displayDataTypes={false}
     />

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

@@ -5,12 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {ReactNode} from 'react';
 import Head from '@docusaurus/Head';
 import Link from '@docusaurus/Link';
 import styles from './styles.module.css';
 
-const DebugNavLink = ({to, children}) => (
+const DebugNavLink = ({to, children}: {to: string; children: ReactNode}) => (
   <Link
     className={styles.navlink}
     isNavLink
@@ -23,7 +23,7 @@ const DebugNavLink = ({to, children}) => (
   </Link>
 );
 
-function DebugLayout({children}) {
+function DebugLayout({children}: {children: ReactNode}): JSX.Element {
   return (
     <>
       <Head>

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

@@ -7,11 +7,11 @@
 
 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() {
+function DebugRegistry(): JSX.Element {
   return (
     <DebugLayout>
       <h2>Registry</h2>

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

@@ -7,12 +7,12 @@
 
 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() {
+function DebugRoutes(): JSX.Element {
   return (
     <DebugLayout>
       <h2>Routes</h2>

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() {
+function DebugMetadata(): JSX.Element {
   const {siteMetadata} = useDocusaurusContext();
   return (
     <DebugLayout>
@@ -28,11 +28,12 @@ function DebugMetadata() {
         {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>