From c79e8318c2e412ec16d2bd1d58d541ff91a4fe1f Mon Sep 17 00:00:00 2001 From: Joey Clover Date: Mon, 20 Nov 2023 09:30:58 +0000 Subject: [PATCH 1/6] chore: Migrate to react-json-view-lite in plugin-debug --- packages/docusaurus-plugin-debug/package.json | 2 +- .../src/theme/DebugJsonView/index.tsx | 54 ++----- yarn.lock | 139 +----------------- 3 files changed, 25 insertions(+), 170 deletions(-) diff --git a/packages/docusaurus-plugin-debug/package.json b/packages/docusaurus-plugin-debug/package.json index 04595b030cb2..3eb342f3dc3b 100644 --- a/packages/docusaurus-plugin-debug/package.json +++ b/packages/docusaurus-plugin-debug/package.json @@ -23,8 +23,8 @@ "@docusaurus/core": "3.0.0", "@docusaurus/types": "3.0.0", "@docusaurus/utils": "3.0.0", - "@microlink/react-json-view": "^1.22.2", "fs-extra": "^11.1.1", + "react-json-view-lite": "^1.2.0", "tslib": "^2.6.0" }, "peerDependencies": { diff --git a/packages/docusaurus-plugin-debug/src/theme/DebugJsonView/index.tsx b/packages/docusaurus-plugin-debug/src/theme/DebugJsonView/index.tsx index 809d96be1726..af7bdf1fcfb2 100644 --- a/packages/docusaurus-plugin-debug/src/theme/DebugJsonView/index.tsx +++ b/packages/docusaurus-plugin-debug/src/theme/DebugJsonView/index.tsx @@ -6,53 +6,31 @@ */ import React from 'react'; -import BrowserOnly from '@docusaurus/BrowserOnly'; +import {JsonView, darkStyles} from 'react-json-view-lite'; import type {Props} from '@theme/DebugJsonView'; -import type {ReactJsonViewProps} from '@microlink/react-json-view'; +import 'react-json-view-lite/dist/index.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 ( - - {() => { - 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 ; - }} - - ); -} +// Avoids "react-json-view-lite" displaying "root" +const RootName = undefined; export default function DebugJsonView({ src, collapseDepth, }: Props): JSX.Element { return ( - { + const hasCollapseDepth = collapseDepth !== undefined; + const keyLength = Object.keys(value).length; + + const shouldExpandByLength = keyLength < 50 && keyLength > 0; + const shouldExpandByDepth = hasCollapseDepth && idx < collapseDepth; + const isRootField = field === RootName; + + return (isRootField || shouldExpandByDepth) && shouldExpandByLength; }} - 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={darkStyles} /> ); } diff --git a/yarn.lock b/yarn.lock index acf3e4715673..3cdf0142cbda 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1197,7 +1197,7 @@ core-js-pure "^3.30.2" regenerator-runtime "^0.13.11" -"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.20.7", "@babel/runtime@^7.22.6", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4": +"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.20.7", "@babel/runtime@^7.22.6", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4": version "7.22.6" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.6.tgz#57d64b9ae3cff1d67eb067ae117dac087f5bd438" integrity sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ== @@ -2125,16 +2125,6 @@ dependencies: "@types/mdx" "^2.0.0" -"@microlink/react-json-view@^1.22.2": - version "1.22.2" - resolved "https://registry.yarnpkg.com/@microlink/react-json-view/-/react-json-view-1.22.2.tgz#dc8262d40912655d5c4a4cf8c7e0549e683808f6" - integrity sha512-liJzdlbspT5GbEuPffw4jzZfXOypKLK1Er9br03T31bAaIi/WptZqpcJaXPi7OmwC7v/YYczCkmAS7WaEfItPQ== - dependencies: - flux "~4.0.1" - react-base16-styling "~0.6.0" - react-lifecycles-compat "~3.0.4" - react-textarea-autosize "~8.3.2" - "@netlify/functions@^1.6.0": version "1.6.0" resolved "https://registry.yarnpkg.com/@netlify/functions/-/functions-1.6.0.tgz#c373423e6fef0e6f7422ac0345e8bbf2cb692366" @@ -4404,11 +4394,6 @@ arrify@^2.0.1: resolved "https://registry.yarnpkg.com/arrify/-/arrify-2.0.1.tgz#c9655e9331e0abcd588d2a7cad7e9956f66701fa" integrity sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug== -asap@~2.0.3: - version "2.0.6" - resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46" - integrity sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA== - ast-types-flow@^0.0.7: version "0.0.7" resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.7.tgz#f70b735c6bca1a5c9c22d982c3e39e7feba3bdad" @@ -4604,11 +4589,6 @@ balanced-match@^2.0.0: resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-2.0.0.tgz#dc70f920d78db8b858535795867bf48f820633d9" integrity sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA== -base16@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/base16/-/base16-1.0.0.tgz#e297f60d7ec1014a7a971a39ebc8a98c0b681e70" - integrity sha512-pNdYkNPiJUnEhnfXV56+sQy8+AaPcG3POZAUnwr4EeqCUZFz4u2PePbo3e5Gj4ziYPCWGUZT9RHisvJKnwFuBQ== - base64-js@^1.3.1: version "1.5.1" resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a" @@ -5771,13 +5751,6 @@ cross-env@^7.0.3: dependencies: cross-spawn "^7.0.1" -cross-fetch@^3.1.5: - version "3.1.8" - resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.1.8.tgz#0327eba65fd68a7d119f8fb2bf9334a1a7956f82" - integrity sha512-cvA+JwZoU0Xq+h6WkMvAUqPEYy92Obet6UdKLfW60qn99ftItKjB5T+BkyWOFWe2pUyfQ+IJHmpOTznqk1M6Kg== - dependencies: - node-fetch "^2.6.12" - cross-spawn@^6.0.5: version "6.0.5" resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4" @@ -7606,31 +7579,6 @@ fb-watchman@^2.0.0: dependencies: bser "2.1.1" -fbemitter@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/fbemitter/-/fbemitter-3.0.0.tgz#00b2a1af5411254aab416cd75f9e6289bee4bff3" - integrity sha512-KWKaceCwKQU0+HPoop6gn4eOHk50bBv/VxjJtGMfwmJt3D29JpN4H4eisCtIPA+a8GVBam+ldMMpMjJUvpDyHw== - dependencies: - fbjs "^3.0.0" - -fbjs-css-vars@^1.0.0: - version "1.0.2" - resolved "https://registry.yarnpkg.com/fbjs-css-vars/-/fbjs-css-vars-1.0.2.tgz#216551136ae02fe255932c3ec8775f18e2c078b8" - integrity sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ== - -fbjs@^3.0.0, fbjs@^3.0.1: - version "3.0.5" - resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-3.0.5.tgz#aa0edb7d5caa6340011790bd9249dbef8a81128d" - integrity sha512-ztsSx77JBtkuMrEypfhgc3cI0+0h+svqeie7xHbh1k/IKdcydnvadp/mUaGgjAOXQmQSxsqgaRhS3q9fy+1kxg== - dependencies: - cross-fetch "^3.1.5" - fbjs-css-vars "^1.0.0" - loose-envify "^1.0.0" - object-assign "^4.1.0" - promise "^7.1.1" - setimmediate "^1.0.5" - ua-parser-js "^1.0.35" - fd-slicer@~1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/fd-slicer/-/fd-slicer-1.1.0.tgz#25c7c89cb1f9077f8891bbe61d8f390eae256f1e" @@ -7768,14 +7716,6 @@ flatted@^3.1.0: resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.7.tgz#609f39207cb614b89d0765b477cb2d437fbf9787" integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ== -flux@~4.0.1: - version "4.0.4" - resolved "https://registry.yarnpkg.com/flux/-/flux-4.0.4.tgz#9661182ea81d161ee1a6a6af10d20485ef2ac572" - integrity sha512-NCj3XlayA2UsapRpM7va6wU1+9rE5FIL7qoMcmxWHRzbp0yujihMBm9BBHZ1MDIk5h5o2Bl6eGiCe8rYELAmYw== - dependencies: - fbemitter "^3.0.0" - fbjs "^3.0.1" - follow-redirects@^1.0.0, follow-redirects@^1.14.9, follow-redirects@^1.15.0: version "1.15.2" resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13" @@ -10490,21 +10430,11 @@ lodash.clonedeep@^4.5.0: resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef" integrity sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ== -lodash.curry@^4.0.1: - version "4.1.1" - resolved "https://registry.yarnpkg.com/lodash.curry/-/lodash.curry-4.1.1.tgz#248e36072ede906501d75966200a86dab8b23170" - integrity sha512-/u14pXGviLaweY5JI0IUzgzF2J6Ne8INyzAZjImcryjgkZ+ebruBxy2/JaOOkTqScddcYtakjhSaeemV8lR0tA== - lodash.debounce@^4.0.8: version "4.0.8" resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af" integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow== -lodash.flow@^3.3.0: - version "3.5.0" - resolved "https://registry.yarnpkg.com/lodash.flow/-/lodash.flow-3.5.0.tgz#87bf40292b8cf83e4e8ce1a3ae4209e20071675a" - integrity sha512-ff3BX/tSioo+XojX4MOsOMhJw0nZoUEF011LX8g8d3gvjVbxd89cCio4BCXronjxcTUIJUoqKEUA+n4CqvvRPw== - lodash.ismatch@^4.4.0: version "4.4.0" resolved "https://registry.yarnpkg.com/lodash.ismatch/-/lodash.ismatch-4.4.0.tgz#756cb5150ca3ba6f11085a78849645f188f85f37" @@ -12094,7 +12024,7 @@ node-fetch@2.6.7: dependencies: whatwg-url "^5.0.0" -node-fetch@^2.6.12, node-fetch@^2.6.7, node-fetch@^2.6.9: +node-fetch@^2.6.7, node-fetch@^2.6.9: version "2.6.12" resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.12.tgz#02eb8e22074018e3d5a83016649d04df0e348fba" integrity sha512-C/fGU2E8ToujUivIO0H+tpQ6HWo4eEmchoPIoXtxCrVghxdKq+QOHqEZW7tuP3KlV3bC8FRMO5nMCC7Zm1VP6g== @@ -12470,7 +12400,7 @@ nx@15.9.4, "nx@>=15.5.2 < 16": "@nrwl/nx-win32-arm64-msvc" "15.9.4" "@nrwl/nx-win32-x64-msvc" "15.9.4" -object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1: +object-assign@^4.0.1, object-assign@^4.1.1: version "4.1.1" resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863" integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg== @@ -13543,13 +13473,6 @@ promise-retry@^2.0.1: err-code "^2.0.2" retry "^0.12.0" -promise@^7.1.1: - version "7.3.1" - resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf" - integrity sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg== - dependencies: - asap "~2.0.3" - prompts@^2.0.1, prompts@^2.4.2: version "2.4.2" resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.4.2.tgz#7b57e73b3a48029ad10ebd44f74b01722a4cb069" @@ -13632,11 +13555,6 @@ pupa@^3.1.0: dependencies: escape-goat "^4.0.0" -pure-color@^1.2.0: - version "1.3.0" - resolved "https://registry.yarnpkg.com/pure-color/-/pure-color-1.3.0.tgz#1fe064fb0ac851f0de61320a8bf796836422f33e" - integrity sha512-QFADYnsVoBMw1srW7OVKEYjG+MbIa49s54w1MA1EDY6r2r/sTcKKYqRX1f4GYvnXP7eN/Pe9HFcX+hwzmrXRHA== - pure-rand@^6.0.0: version "6.0.2" resolved "https://registry.yarnpkg.com/pure-rand/-/pure-rand-6.0.2.tgz#a9c2ddcae9b68d736a8163036f088a2781c8b306" @@ -13742,16 +13660,6 @@ rc@1.2.8, rc@^1.2.7: minimist "^1.2.0" strip-json-comments "~2.0.1" -react-base16-styling@~0.6.0: - version "0.6.0" - resolved "https://registry.yarnpkg.com/react-base16-styling/-/react-base16-styling-0.6.0.tgz#ef2156d66cf4139695c8a167886cb69ea660792c" - integrity sha512-yvh/7CArceR/jNATXOKDlvTnPKPmGZz7zsenQ3jUwLzHkNUR0CvY3yGYJbWJ/nnxsL8Sgmt5cO3/SILVuPO6TQ== - dependencies: - base16 "^1.0.0" - lodash.curry "^4.0.1" - lodash.flow "^3.3.0" - pure-color "^1.2.0" - react-dev-utils@^12.0.1: version "12.0.1" resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-12.0.1.tgz#ba92edb4a1f379bd46ccd6bcd4e7bc398df33e73" @@ -13828,10 +13736,10 @@ react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0: resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== -react-lifecycles-compat@~3.0.4: - version "3.0.4" - resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" - integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== +react-json-view-lite@^1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/react-json-view-lite/-/react-json-view-lite-1.2.0.tgz#2fced1da474ae6e71ccd2352931033f3133311b4" + integrity sha512-Z5KSFNDjw3oYr6a2ZZ6SxAiU5OlXrlTbvEUshYeEn9eCEgrfb+DaJRK+6ZG+x7nLVl5RtOOBsfzD5iseUgLMRQ== react-lite-youtube-embed@^2.3.52: version "2.3.52" @@ -13919,15 +13827,6 @@ react-test-renderer@^18.0.0: react-shallow-renderer "^16.15.0" scheduler "^0.23.0" -react-textarea-autosize@~8.3.2: - version "8.3.4" - resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-8.3.4.tgz#270a343de7ad350534141b02c9cb78903e553524" - integrity sha512-CdtmP8Dc19xL8/R6sWvtknD/eCXkQr30dtvC4VmGInhRsfF8X/ihXCq6+9l9qbxmKRiq407/7z5fxE7cVWQNgQ== - dependencies: - "@babel/runtime" "^7.10.2" - use-composed-ref "^1.3.0" - use-latest "^1.2.1" - react-waypoint@^10.3.0: version "10.3.0" resolved "https://registry.yarnpkg.com/react-waypoint/-/react-waypoint-10.3.0.tgz#fcc60e86c6c9ad2174fa58d066dc6ae54e3df71d" @@ -14803,7 +14702,7 @@ set-blocking@^2.0.0: resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7" integrity sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw== -setimmediate@^1.0.5, setimmediate@~1.0.4: +setimmediate@~1.0.4: version "1.0.5" resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285" integrity sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA== @@ -16104,11 +16003,6 @@ typescript@~5.2.2: resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.2.2.tgz#5ebb5e5a5b75f085f22bc3f8460fba308310fa78" integrity sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w== -ua-parser-js@^1.0.35: - version "1.0.35" - resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-1.0.35.tgz#c4ef44343bc3db0a3cbefdf21822f1b1fc1ab011" - integrity sha512-fKnGuqmTBnIE+/KXSzCn4db8RTigUzw1AN0DmdU6hJovUTbYJKyqj+8Mt1c4VfRDnOVJnENmfYkIPZ946UrSAA== - uglify-js@^3.1.4: version "3.17.4" resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.17.4.tgz#61678cf5fa3f5b7eb789bb345df29afb8257c22c" @@ -16399,28 +16293,11 @@ url-parse@^1.5.3: querystringify "^2.1.1" requires-port "^1.0.0" -use-composed-ref@^1.3.0: - version "1.3.0" - resolved "https://registry.yarnpkg.com/use-composed-ref/-/use-composed-ref-1.3.0.tgz#3d8104db34b7b264030a9d916c5e94fbe280dbda" - integrity sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ== - use-editable@^2.3.3: version "2.3.3" resolved "https://registry.yarnpkg.com/use-editable/-/use-editable-2.3.3.tgz#a292fe9ba4c291cd28d1cc2728c75a5fc8d9a33f" integrity sha512-7wVD2JbfAFJ3DK0vITvXBdpd9JAz5BcKAAolsnLBuBn6UDDwBGuCIAGvR3yA2BNKm578vAMVHFCWaOcA+BhhiA== -use-isomorphic-layout-effect@^1.1.1: - version "1.1.2" - resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb" - integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA== - -use-latest@^1.2.1: - version "1.2.1" - resolved "https://registry.yarnpkg.com/use-latest/-/use-latest-1.2.1.tgz#d13dfb4b08c28e3e33991546a2cee53e14038cf2" - integrity sha512-xA+AVm/Wlg3e2P/JiItTziwS7FK92LWrDB0p+hgXloIMuVCeJJ8v6f0eeHyPZaJrM+usM1FkFfbNCrJGs8A/zw== - dependencies: - use-isomorphic-layout-effect "^1.1.1" - util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf" From c6e5471050b03a2cfdc958743f4bb16f5d16f89f Mon Sep 17 00:00:00 2001 From: Joey Clover Date: Tue, 21 Nov 2023 09:37:16 +0000 Subject: [PATCH 2/6] chore: refactor the json viewer implementation --- .../src/theme/DebugJsonView/index.tsx | 16 +++++----------- 1 file changed, 5 insertions(+), 11 deletions(-) diff --git a/packages/docusaurus-plugin-debug/src/theme/DebugJsonView/index.tsx b/packages/docusaurus-plugin-debug/src/theme/DebugJsonView/index.tsx index af7bdf1fcfb2..3cb8029f351b 100644 --- a/packages/docusaurus-plugin-debug/src/theme/DebugJsonView/index.tsx +++ b/packages/docusaurus-plugin-debug/src/theme/DebugJsonView/index.tsx @@ -10,9 +10,6 @@ import {JsonView, darkStyles} from 'react-json-view-lite'; import type {Props} from '@theme/DebugJsonView'; import 'react-json-view-lite/dist/index.css'; -// Avoids "react-json-view-lite" displaying "root" -const RootName = undefined; - export default function DebugJsonView({ src, collapseDepth, @@ -20,15 +17,12 @@ export default function DebugJsonView({ return ( { - const hasCollapseDepth = collapseDepth !== undefined; - const keyLength = Object.keys(value).length; - - const shouldExpandByLength = keyLength < 50 && keyLength > 0; - const shouldExpandByDepth = hasCollapseDepth && idx < collapseDepth; - const isRootField = field === RootName; + shouldExpandNode={(idx, value) => { + if (Array.isArray(value)) { + return value.length < 5; + } - return (isRootField || shouldExpandByDepth) && shouldExpandByLength; + return collapseDepth !== undefined && idx < collapseDepth; }} style={darkStyles} /> From cc196cc33814dac9338f9a2d51ecfb401a9b106d Mon Sep 17 00:00:00 2001 From: Joey Clover Date: Tue, 21 Nov 2023 17:27:03 +0000 Subject: [PATCH 3/6] fixed: yarn file problems --- yarn.lock | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/yarn.lock b/yarn.lock index 1d44ee4b17f5..6c034cd4f140 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7701,7 +7701,7 @@ flatted@^3.1.0: resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.7.tgz#609f39207cb614b89d0765b477cb2d437fbf9787" integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ== -follow-redirects@^1.0.0, follow-redirects@^1.14.9, follow-redirects@^1.15.0: +follow-redirects@^1.0.0, follow-redirects@^1.15.0: version "1.15.2" resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13" integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA== From 33758e8034899919658b7ced37d0c25166c00ea4 Mon Sep 17 00:00:00 2001 From: Joey Clover Date: Wed, 22 Nov 2023 20:51:29 +0000 Subject: [PATCH 4/6] fix: import --- .../src/theme/DebugJsonView/index.tsx | 22 +++- .../src/theme/DebugJsonView/styles.module.css | 101 ++++++++++++++++++ 2 files changed, 120 insertions(+), 3 deletions(-) create mode 100644 packages/docusaurus-plugin-debug/src/theme/DebugJsonView/styles.module.css diff --git a/packages/docusaurus-plugin-debug/src/theme/DebugJsonView/index.tsx b/packages/docusaurus-plugin-debug/src/theme/DebugJsonView/index.tsx index 3cb8029f351b..cc850b1623c7 100644 --- a/packages/docusaurus-plugin-debug/src/theme/DebugJsonView/index.tsx +++ b/packages/docusaurus-plugin-debug/src/theme/DebugJsonView/index.tsx @@ -6,9 +6,25 @@ */ import React from 'react'; -import {JsonView, darkStyles} from 'react-json-view-lite'; +import {JsonView} from 'react-json-view-lite'; import type {Props} from '@theme/DebugJsonView'; -import 'react-json-view-lite/dist/index.css'; +import './styles.module.css'; + +const paraisoStyles = { + container: 'container-paraiso', + basicChildStyle: 'basic-element-paraiso', + label: 'label-paraiso', + nullValue: 'null-value-paraiso', + undefinedValue: 'undefined-value-paraiso', + stringValue: 'string-value-paraiso', + booleanValue: 'boolean-value-paraiso', + numberValue: 'number-value-paraiso', + otherValue: 'other-value-paraiso', + punctuation: 'punctuation-paraiso', + collapseIcon: 'collapse-icon-paraiso', + expandIcon: 'expand-icon-paraiso', + collapsedContent: 'collapse-content-paraiso', +}; export default function DebugJsonView({ src, @@ -24,7 +40,7 @@ export default function DebugJsonView({ return collapseDepth !== undefined && idx < collapseDepth; }} - style={darkStyles} + style={paraisoStyles} /> ); } diff --git a/packages/docusaurus-plugin-debug/src/theme/DebugJsonView/styles.module.css b/packages/docusaurus-plugin-debug/src/theme/DebugJsonView/styles.module.css new file mode 100644 index 000000000000..3a056acc4364 --- /dev/null +++ b/packages/docusaurus-plugin-debug/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. + */ + +.container-paraiso { + font-family: monospace; + cursor: default; + background-color: rgb(41 42 43); + position: relative; + margin-top: 10px; + padding: 10px; + border-radius: 4px; + font-size: 13px; +} + +.basic-element-paraiso { + color: white; + padding: 3px 5px 3px 20px; + border-left: 1px solid rgb(79 66 76); +} + +.label-paraiso { + color: rgb(231 233 219); + letter-spacing: 0.5px; + margin-right: 3px; +} + +.null-value-paraiso { + 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; +} + +.undefined-value-paraiso { + color: rgb(141 134 135); +} + +.string-value-paraiso { + color: rgb(249 155 21); +} + +.boolean-value-paraiso { + color: rgb(129 91 164); +} + +.number-value-paraiso { + color: rgb(233 107 168); +} + +.other-value-paraiso { + color: white; +} + +.punctuation-paraiso { + color: white; +} + +.expand-icon-paraiso { + display: inline-block; + color: rgb(129 91 164); + font-size: 22px; + vertical-align: baseline; + margin-right: 3px; + line-height: 10px; +} + +.collapse-icon-paraiso::after { + content: '\25BE'; +} + +.collapse-icon-paraiso { + display: inline-block; + color: rgb(6 182 239); + font-size: 22px; + vertical-align: baseline; + margin-right: 3px; + line-height: 10px; +} + +.expand-icon-paraiso::after { + content: '\25B8'; +} + +.collapse-content-paraiso { + color: rgb(249 155 21); + font-size: 18px; + line-height: 10px; + cursor: pointer; +} + +.collapse-content-paraiso::after { + content: '...'; +} From 50fe14d8d0fabc030a43613b258122361b4a5e91 Mon Sep 17 00:00:00 2001 From: Joey Clover Date: Wed, 22 Nov 2023 21:06:26 +0000 Subject: [PATCH 5/6] fix: styling imports2 --- .../src/theme/DebugJsonView/index.tsx | 28 ++++++++-------- .../src/theme/DebugJsonView/styles.module.css | 32 +++++++++---------- 2 files changed, 30 insertions(+), 30 deletions(-) diff --git a/packages/docusaurus-plugin-debug/src/theme/DebugJsonView/index.tsx b/packages/docusaurus-plugin-debug/src/theme/DebugJsonView/index.tsx index cc850b1623c7..19a81f97846a 100644 --- a/packages/docusaurus-plugin-debug/src/theme/DebugJsonView/index.tsx +++ b/packages/docusaurus-plugin-debug/src/theme/DebugJsonView/index.tsx @@ -8,22 +8,22 @@ import React from 'react'; import {JsonView} from 'react-json-view-lite'; import type {Props} from '@theme/DebugJsonView'; -import './styles.module.css'; +import styles from './styles.module.css'; const paraisoStyles = { - container: 'container-paraiso', - basicChildStyle: 'basic-element-paraiso', - label: 'label-paraiso', - nullValue: 'null-value-paraiso', - undefinedValue: 'undefined-value-paraiso', - stringValue: 'string-value-paraiso', - booleanValue: 'boolean-value-paraiso', - numberValue: 'number-value-paraiso', - otherValue: 'other-value-paraiso', - punctuation: 'punctuation-paraiso', - collapseIcon: 'collapse-icon-paraiso', - expandIcon: 'expand-icon-paraiso', - collapsedContent: 'collapse-content-paraiso', + 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({ diff --git a/packages/docusaurus-plugin-debug/src/theme/DebugJsonView/styles.module.css b/packages/docusaurus-plugin-debug/src/theme/DebugJsonView/styles.module.css index 3a056acc4364..f7732cb7373f 100644 --- a/packages/docusaurus-plugin-debug/src/theme/DebugJsonView/styles.module.css +++ b/packages/docusaurus-plugin-debug/src/theme/DebugJsonView/styles.module.css @@ -5,7 +5,7 @@ * LICENSE file in the root directory of this source tree. */ -.container-paraiso { +.containerParaiso { font-family: monospace; cursor: default; background-color: rgb(41 42 43); @@ -16,19 +16,19 @@ font-size: 13px; } -.basic-element-paraiso { +.basicElementParaiso { color: white; padding: 3px 5px 3px 20px; border-left: 1px solid rgb(79 66 76); } -.label-paraiso { +.labelParaiso { color: rgb(231 233 219); letter-spacing: 0.5px; margin-right: 3px; } -.null-value-paraiso { +.nullValueParaiso { display: inline-block; color: rgb(254 196 24); font-size: 11px; @@ -39,31 +39,31 @@ text-transform: uppercase; } -.undefined-value-paraiso { +.undefinedValueParaiso { color: rgb(141 134 135); } -.string-value-paraiso { +.stringValueParaiso { color: rgb(249 155 21); } -.boolean-value-paraiso { +.booleanValueParaiso { color: rgb(129 91 164); } -.number-value-paraiso { +.numberValueParaiso { color: rgb(233 107 168); } -.other-value-paraiso { +.otherValueParaiso { color: white; } -.punctuation-paraiso { +.punctuationParaiso { color: white; } -.expand-icon-paraiso { +.expandIconParaiso { display: inline-block; color: rgb(129 91 164); font-size: 22px; @@ -72,11 +72,11 @@ line-height: 10px; } -.collapse-icon-paraiso::after { +.collapseIconParaiso::after { content: '\25BE'; } -.collapse-icon-paraiso { +.collapseIconParaiso { display: inline-block; color: rgb(6 182 239); font-size: 22px; @@ -85,17 +85,17 @@ line-height: 10px; } -.expand-icon-paraiso::after { +.expandIconParaiso::after { content: '\25B8'; } -.collapse-content-paraiso { +.collapseContentParaiso { color: rgb(249 155 21); font-size: 18px; line-height: 10px; cursor: pointer; } -.collapse-content-paraiso::after { +.collapseContentParaiso::after { content: '...'; } From 57fe3331530c96b9af25b62a7928c6e227bbc84f Mon Sep 17 00:00:00 2001 From: Joey Clover Date: Wed, 22 Nov 2023 21:08:48 +0000 Subject: [PATCH 6/6] fix: forced styles --- .../src/theme/DebugJsonView/index.tsx | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/docusaurus-plugin-debug/src/theme/DebugJsonView/index.tsx b/packages/docusaurus-plugin-debug/src/theme/DebugJsonView/index.tsx index 19a81f97846a..c4b28aab80b1 100644 --- a/packages/docusaurus-plugin-debug/src/theme/DebugJsonView/index.tsx +++ b/packages/docusaurus-plugin-debug/src/theme/DebugJsonView/index.tsx @@ -11,19 +11,19 @@ import type {Props} from '@theme/DebugJsonView'; 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, + 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({