refactor(plugin-debug): migrate package to TypeScript (#5465)

* Complete migration

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Fix JSON root name

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

packages/docusaurus-module-type-aliases/src/index.d.ts

@@ -38,6 +38,7 @@ declare module '@generated/routes' {
     readonly path: string;
     readonly component: RouteConfig['component'];
     readonly exact?: boolean;
+    readonly routes?: Route[];
   };
   const routes: Route[];
   export default routes;

packages/docusaurus-plugin-debug/copyUntypedFiles.js

@@ -0,0 +1,20 @@
+/**
+ * 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.
+ */
+
+const path = require('path');
+const fs = require('fs-extra');
+
+/**
+ * Copy all untyped and static assets files to lib.
+ */
+const srcDir = path.resolve(__dirname, 'src');
+const libDir = path.resolve(__dirname, 'lib');
+fs.copySync(srcDir, libDir, {
+  filter(filepath) {
+    return !/__tests__/.test(filepath) && !/\.tsx?$/.test(filepath);
+  },
+});

packages/docusaurus-plugin-debug/package.json

@@ -3,9 +3,10 @@
   "version": "2.0.0-beta.5",
   "description": "Debug plugin for Docusaurus.",
   "main": "lib/index.js",
+  "types": "src/types.d.ts",
   "scripts": {
-    "build": "tsc",
+    "build": "tsc && node copyUntypedFiles.js",
-    "watch": "tsc --watch"
+    "watch": "node copyUntypedFiles.js && tsc --watch"
   },
   "publishConfig": {
     "access": "public"
@@ -20,6 +21,7 @@
     "@docusaurus/core": "2.0.0-beta.5",
     "@docusaurus/types": "2.0.0-beta.5",
     "@docusaurus/utils": "2.0.0-beta.5",
+    "fs-extra": "^9.1.0",
     "react-json-view": "^1.21.3",
     "tslib": "^2.1.0"
   },

packages/docusaurus-plugin-debug/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}) {

packages/docusaurus-plugin-debug/src/theme/DebugConfig/index.tsx

@@ -7,17 +7,17 @@
 
 import React from 'react';
 
-import DebugLayout from '../DebugLayout';
+import DebugLayout from '@theme/DebugLayout';
-import DebugJsonView from '../DebugJsonView';
+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>
   );
 }

packages/docusaurus-plugin-debug/src/theme/DebugContent/index.tsx

@@ -7,17 +7,30 @@
 
 import React from 'react';
 
-import DebugLayout from '../DebugLayout';
+import DebugLayout from '@theme/DebugLayout';
-import DebugJsonView from '../DebugJsonView';
+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>

packages/docusaurus-plugin-debug/src/theme/DebugGlobalData/index.tsx

@@ -7,16 +7,16 @@
 
 import React from 'react';
 
-import DebugLayout from '../DebugLayout';
+import DebugLayout from '@theme/DebugLayout';
-import DebugJsonView from '../DebugJsonView';
+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>
   );
 }

packages/docusaurus-plugin-debug/src/theme/DebugJsonView/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}
     />

packages/docusaurus-plugin-debug/src/theme/DebugLayout/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>

packages/docusaurus-plugin-debug/src/theme/DebugRegistry/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>

packages/docusaurus-plugin-debug/src/theme/DebugRoutes/index.tsx

@@ -7,12 +7,12 @@
 
 import React from 'react';
 
-import DebugLayout from '../DebugLayout';
+import DebugLayout from '@theme/DebugLayout';
-import DebugJsonView from '../DebugJsonView';
+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>

packages/docusaurus-plugin-debug/src/theme/DebugSiteMetadata/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,7 +28,8 @@ function DebugMetadata() {
         {Object.entries(siteMetadata.pluginVersions).map(
           ([name, versionInformation]) => (
             <li key={name} className={styles.listItem}>
-              {versionInformation.version && (
+              {versionInformation.type === 'package' &&
+                versionInformation.version && (
                   <div className={styles.version}>
                     <code>{versionInformation.version}</code>
                   </div>

packages/docusaurus-plugin-debug/src/types.d.ts

@@ -0,0 +1,51 @@
+/**
+ * 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 '@theme/DebugConfig' {
+  export default function DebugMetadata(): JSX.Element;
+}
+
+declare module '@theme/DebugContent' {
+  import type {AllContent} from '@docusaurus/types';
+
+  export type Props = {
+    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 type Props = {
+    src: unknown;
+    collapseDepth?: number;
+  };
+  export default function DebugJsonView(props: Props): JSX.Element;
+}
+
+declare module '@theme/DebugLayout' {
+  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;
+}