@docusaurus/plugin-debug 3.0.0-rc.1 → 3.0.1

package/lib/theme/DebugJsonView/index.js

@@ -5,45 +5,34 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import BrowserOnly from '@docusaurus/BrowserOnly';
-// 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) {
-  return (
-    <BrowserOnly>
-      {() => {
-        const {default: ReactJson} =
-          // eslint-disable-next-line global-require, @typescript-eslint/no-var-requires
-          require('@microlink/react-json-view');
-        return <ReactJson {...props} />;
-      }}
-    </BrowserOnly>
-  );
-}
+import {JsonView} from 'react-json-view-lite';
+import styles from './styles.module.css';
+const paraisoStyles = {
+  container: styles.containerParaiso,
+  basicChildStyle: styles.basicElementParaiso,
+  label: styles.labelParaiso,
+  nullValue: styles.nullValueParaiso,
+  undefinedValue: styles.undefinedValueParaiso,
+  stringValue: styles.stringValueParaiso,
+  booleanValue: styles.booleanValueParaiso,
+  numberValue: styles.numberValueParaiso,
+  otherValue: styles.otherValueParaiso,
+  punctuation: styles.punctuationParaiso,
+  collapseIcon: styles.collapseIconParaiso,
+  expandIcon: styles.expandIconParaiso,
+  collapsedContent: styles.collapseContentParaiso,
+};
 export default function DebugJsonView({src, collapseDepth}) {
   return (
-    <BrowserOnlyReactJson
-      src={src}
-      style={{
-        marginTop: '10px',
-        padding: '10px',
-        borderRadius: '4px',
-        backgroundColor: '#292a2b',
+    <JsonView
+      data={src}
+      shouldExpandNode={(idx, value) => {
+        if (Array.isArray(value)) {
+          return value.length < 5;
+        }
+        return collapseDepth !== undefined && idx < collapseDepth;
       }}
-      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}
+      style={paraisoStyles}
     />
   );
 }

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

@@ -0,0 +1,101 @@
+/**
+ * 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.
+ */
+
+.containerParaiso {
+  font-family: monospace;
+  cursor: default;
+  background-color: rgb(41 42 43);
+  position: relative;
+  margin-top: 10px;
+  padding: 10px;
+  border-radius: 4px;
+  font-size: 13px;
+}
+
+.basicElementParaiso {
+  color: white;
+  padding: 3px 5px 3px 20px;
+  border-left: 1px solid rgb(79 66 76);
+}
+
+.labelParaiso {
+  color: rgb(231 233 219);
+  letter-spacing: 0.5px;
+  margin-right: 3px;
+}
+
+.nullValueParaiso {
+  display: inline-block;
+  color: rgb(254 196 24);
+  font-size: 11px;
+  font-weight: bold;
+  background-color: rgb(79 66 76);
+  padding: 1px 2px;
+  border-radius: 3px;
+  text-transform: uppercase;
+}
+
+.undefinedValueParaiso {
+  color: rgb(141 134 135);
+}
+
+.stringValueParaiso {
+  color: rgb(249 155 21);
+}
+
+.booleanValueParaiso {
+  color: rgb(129 91 164);
+}
+
+.numberValueParaiso {
+  color: rgb(233 107 168);
+}
+
+.otherValueParaiso {
+  color: white;
+}
+
+.punctuationParaiso {
+  color: white;
+}
+
+.expandIconParaiso {
+  display: inline-block;
+  color: rgb(129 91 164);
+  font-size: 22px;
+  vertical-align: baseline;
+  margin-right: 3px;
+  line-height: 10px;
+}
+
+.collapseIconParaiso::after {
+  content: '\25BE';
+}
+
+.collapseIconParaiso {
+  display: inline-block;
+  color: rgb(6 182 239);
+  font-size: 22px;
+  vertical-align: baseline;
+  margin-right: 3px;
+  line-height: 10px;
+}
+
+.expandIconParaiso::after {
+  content: '\25B8';
+}
+
+.collapseContentParaiso {
+  color: rgb(249 155 21);
+  font-size: 18px;
+  line-height: 10px;
+  cursor: pointer;
+}
+
+.collapseContentParaiso::after {
+  content: '...';
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/plugin-debug",
-  "version": "3.0.0-rc.1",
+  "version": "3.0.1",
   "description": "Debug plugin for Docusaurus.",
   "main": "lib/index.js",
   "types": "src/plugin-debug.d.ts",
@@ -20,11 +20,11 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@docusaurus/core": "3.0.0-rc.1",
-    "@docusaurus/types": "3.0.0-rc.1",
-    "@docusaurus/utils": "3.0.0-rc.1",
-    "@microlink/react-json-view": "^1.22.2",
+    "@docusaurus/core": "3.0.1",
+    "@docusaurus/types": "3.0.1",
+    "@docusaurus/utils": "3.0.1",
     "fs-extra": "^11.1.1",
+    "react-json-view-lite": "^1.2.0",
     "tslib": "^2.6.0"
   },
   "peerDependencies": {
@@ -34,5 +34,5 @@
   "engines": {
     "node": ">=18.0"
   },
-  "gitHead": "a51cc6fd7660d47ea08349f723cec9c017af0b4e"
+  "gitHead": "29d816067fd0022d4ca3bd5fdc42098dac9f7ffc"
 }

package/src/theme/DebugJsonView/index.tsx

@@ -6,53 +6,41 @@
  */
 
 import React from 'react';
-import BrowserOnly from '@docusaurus/BrowserOnly';
+import {JsonView} from 'react-json-view-lite';
 import type {Props} from '@theme/DebugJsonView';
-import type {ReactJsonViewProps} from '@microlink/react-json-view';
+import styles from './styles.module.css';
 
-// 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('@microlink/react-json-view') as typeof import('@microlink/react-json-view');
-        return <ReactJson {...props} />;
-      }}
-    </BrowserOnly>
-  );
-}
+const paraisoStyles = {
+  container: styles.containerParaiso!,
+  basicChildStyle: styles.basicElementParaiso!,
+  label: styles.labelParaiso!,
+  nullValue: styles.nullValueParaiso!,
+  undefinedValue: styles.undefinedValueParaiso!,
+  stringValue: styles.stringValueParaiso!,
+  booleanValue: styles.booleanValueParaiso!,
+  numberValue: styles.numberValueParaiso!,
+  otherValue: styles.otherValueParaiso!,
+  punctuation: styles.punctuationParaiso!,
+  collapseIcon: styles.collapseIconParaiso!,
+  expandIcon: styles.expandIconParaiso!,
+  collapsedContent: styles.collapseContentParaiso!,
+};
 
 export default function DebugJsonView({
   src,
   collapseDepth,
 }: Props): JSX.Element {
   return (
-    <BrowserOnlyReactJson
-      src={src as object}
-      style={{
-        marginTop: '10px',
-        padding: '10px',
-        borderRadius: '4px',
-        backgroundColor: '#292a2b',
+    <JsonView
+      data={src as object}
+      shouldExpandNode={(idx, value) => {
+        if (Array.isArray(value)) {
+          return value.length < 5;
+        }
+
+        return collapseDepth !== undefined && idx < collapseDepth;
       }}
-      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}
+      style={paraisoStyles}
     />
   );
 }

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

@@ -0,0 +1,101 @@
+/**
+ * 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.
+ */
+
+.containerParaiso {
+  font-family: monospace;
+  cursor: default;
+  background-color: rgb(41 42 43);
+  position: relative;
+  margin-top: 10px;
+  padding: 10px;
+  border-radius: 4px;
+  font-size: 13px;
+}
+
+.basicElementParaiso {
+  color: white;
+  padding: 3px 5px 3px 20px;
+  border-left: 1px solid rgb(79 66 76);
+}
+
+.labelParaiso {
+  color: rgb(231 233 219);
+  letter-spacing: 0.5px;
+  margin-right: 3px;
+}
+
+.nullValueParaiso {
+  display: inline-block;
+  color: rgb(254 196 24);
+  font-size: 11px;
+  font-weight: bold;
+  background-color: rgb(79 66 76);
+  padding: 1px 2px;
+  border-radius: 3px;
+  text-transform: uppercase;
+}
+
+.undefinedValueParaiso {
+  color: rgb(141 134 135);
+}
+
+.stringValueParaiso {
+  color: rgb(249 155 21);
+}
+
+.booleanValueParaiso {
+  color: rgb(129 91 164);
+}
+
+.numberValueParaiso {
+  color: rgb(233 107 168);
+}
+
+.otherValueParaiso {
+  color: white;
+}
+
+.punctuationParaiso {
+  color: white;
+}
+
+.expandIconParaiso {
+  display: inline-block;
+  color: rgb(129 91 164);
+  font-size: 22px;
+  vertical-align: baseline;
+  margin-right: 3px;
+  line-height: 10px;
+}
+
+.collapseIconParaiso::after {
+  content: '\25BE';
+}
+
+.collapseIconParaiso {
+  display: inline-block;
+  color: rgb(6 182 239);
+  font-size: 22px;
+  vertical-align: baseline;
+  margin-right: 3px;
+  line-height: 10px;
+}
+
+.expandIconParaiso::after {
+  content: '\25B8';
+}
+
+.collapseContentParaiso {
+  color: rgb(249 155 21);
+  font-size: 18px;
+  line-height: 10px;
+  cursor: pointer;
+}
+
+.collapseContentParaiso::after {
+  content: '...';
+}