chore(playground):  remove TreeStyle and related functionality
MODIFY
Cargo.lock
Cargo.lock
@@ -1591,7 +1591,6 @@ dependencies = [
"rome_js_formatter",
"rome_js_parser",
"rome_js_syntax",
- "serde_json",
"wasm-bindgen",
"web-sys",
]

MODIFY
website/playground/Cargo.toml
website/playground/Cargo.toml
@@ -21,4 +21,3 @@ rome_diagnostics = { path = "../../crates/rome_diagnostics" }
rome_analyze = { path = "../../crates/rome_analyze" }
rome_js_analyze = { path = "../../crates/rome_js_analyze" }
rome_console = { path = "../../crates/rome_console" }
-serde_json = "1.0.79"

MODIFY
website/playground/package.json
website/playground/package.json
"prettier": "^2.7.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
- "react-json-view": "^1.21.3",
"react-tabs": "^3.2.3"
},
"devDependencies": {

MODIFY
website/playground/pnpm-lock.yaml
website/playground/pnpm-lock.yaml
@@ -14,7 +14,6 @@ specifiers:
prettier: ^2.7.0
react: ^17.0.2
react-dom: ^17.0.2
- react-json-view: ^1.21.3
react-tabs: ^3.2.3
rome: ^0.7.0-next
tailwindcss: ^3.0.19
@@ -28,7 +27,6 @@ dependencies:
prettier: 2.7.0
react: 17.0.2
react-dom: 17.0.2_react@17.0.2
- react-json-view: 1.21.3_xd63vgjm47lzoal5ybyqmsdesy
react-tabs: 3.2.3_react@17.0.2
devDependencies:
@@ -669,6 +667,7 @@ packages:
/@types/prop-types/15.7.4:
resolution: {integrity: sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==}
+ dev: true
/@types/react-dom/17.0.11:
resolution: {integrity: sha512-f96K3k+24RaLGVu/Y2Ng3e1EbZ8/cVJvypZWd7cy0ofCBaf2lcM46xNhycMZ2xGwbBjRql7hOlZ+e2WlJ5MH3Q==}
@@ -688,9 +687,11 @@ packages:
'@types/prop-types': 15.7.4
'@types/scheduler': 0.16.2
csstype: 3.0.10
+ dev: true
/@types/scheduler/0.16.2:
resolution: {integrity: sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==}
+ dev: true
/@uiw/react-codemirror/4.11.0_sfoxds7t5ydpegc3knd667wn6m:
resolution: {integrity: sha512-v15TtQvqS3cCR+oahH4OQwDzRftzDK76YPAFsGtPLxOflKN1XSwdHlZDeSiNkLLz65qY1UcD3cWqLu6ZrMHJqw==}
@@ -766,10 +767,6 @@ packages:
resolution: {integrity: sha512-e0hDa9H2Z9AwFkk2qDlwhoMYE4eToKarchkQHovNdLTCYMHZHeRjI71crOh+dio4K6u1IcwubQqo79Ga4CyAQA==}
dev: true
- /asap/2.0.6:
- resolution: {integrity: sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=}
- dev: false
-
/autoprefixer/10.4.2_postcss@8.4.6:
resolution: {integrity: sha512-9fOPpHKuDW1w/0EKfRmVnxTDt8166MAnLI3mgZ1JCnhNtYWxcJ6Ud5CO/AVOZi/AvFa8DY9RTy3h3+tFBlrrdQ==}
engines: {node: ^10 || ^12 || >=14}
@@ -786,10 +783,6 @@ packages:
postcss-value-parser: 4.2.0
dev: true
- /base16/1.0.0:
- resolution: {integrity: sha1-4pf2DX7BAUp6lxo568ipjAtoHnA=}
- dev: false
-
/binary-extensions/2.2.0:
resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
engines: {node: '>=8'}
@@ -924,14 +917,6 @@ packages:
resolution: {integrity: sha512-+BO9wPPi+DWTDcNYhr/W90myha8ptzftZT+LwcmUbbok0rcP/fequmFYCw8NMoH7pkAZQzU78b3kYrlua5a9eA==}
dev: false
- /cross-fetch/3.1.5:
- resolution: {integrity: sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==}
- dependencies:
- node-fetch: 2.6.7
- transitivePeerDependencies:
- - encoding
- dev: false
-
/cssesc/3.0.0:
resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
engines: {node: '>=4'}
@@ -940,6 +925,7 @@ packages:
/csstype/3.0.10:
resolution: {integrity: sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==}
+ dev: true
/debug/4.3.3:
resolution: {integrity: sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==}
@@ -1229,32 +1215,6 @@ packages:
reusify: 1.0.4
dev: true
- /fbemitter/3.0.0:
- resolution: {integrity: sha512-KWKaceCwKQU0+HPoop6gn4eOHk50bBv/VxjJtGMfwmJt3D29JpN4H4eisCtIPA+a8GVBam+ldMMpMjJUvpDyHw==}
- dependencies:
- fbjs: 3.0.4
- transitivePeerDependencies:
- - encoding
- dev: false
-
- /fbjs-css-vars/1.0.2:
- resolution: {integrity: sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ==}
- dev: false
-
- /fbjs/3.0.4:
- resolution: {integrity: sha512-ucV0tDODnGV3JCnnkmoszb5lf4bNpzjv80K41wd4k798Etq+UYD0y0TIfalLjZoKgjive6/adkRnszwapiDgBQ==}
- dependencies:
- cross-fetch: 3.1.5
- fbjs-css-vars: 1.0.2
- loose-envify: 1.4.0
- object-assign: 4.1.1
- promise: 7.3.1
- setimmediate: 1.0.5
- ua-parser-js: 0.7.31
- transitivePeerDependencies:
- - encoding
- dev: false
-
/fill-range/7.0.1:
resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==}
engines: {node: '>=8'}
@@ -1262,18 +1222,6 @@ packages:
to-regex-range: 5.0.1
dev: true
- /flux/4.0.3_react@17.0.2:
- resolution: {integrity: sha512-yKAbrp7JhZhj6uiT1FTuVMlIAT1J4jqEyBpFApi1kxpGZCvacMVc/t1pMQyotqHhAgvoE3bNvAykhCo2CLjnYw==}
- peerDependencies:
- react: ^15.0.2 || ^16.0.0 || ^17.0.0
- dependencies:
- fbemitter: 3.0.0
- fbjs: 3.0.4
- react: 17.0.2
- transitivePeerDependencies:
- - encoding
- dev: false
-
/fraction.js/4.1.3:
resolution: {integrity: sha512-pUHWWt6vHzZZiQJcM6S/0PXfS+g6FM4BF5rj9wZyreivhQPdsh5PpE25VtSNxq80wHS5RfY51Ii+8Z0Zl/pmzg==}
dev: true
@@ -1409,14 +1357,6 @@ packages:
resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
dev: true
- /lodash.curry/4.1.1:
- resolution: {integrity: sha1-JI42By7ekGUB11lmIAqG2riyMXA=}
- dev: false
-
- /lodash.flow/3.5.0:
- resolution: {integrity: sha1-h79AKSuM+D5OjOGjrkIJ4gBxZ1o=}
- dev: false
-
/loose-envify/1.4.0:
resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
hasBin: true
@@ -1462,18 +1402,6 @@ packages:
hasBin: true
dev: true
- /node-fetch/2.6.7:
- resolution: {integrity: sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==}
- engines: {node: 4.x || >=6.0.0}
- peerDependencies:
- encoding: ^0.1.0
- peerDependenciesMeta:
- encoding:
- optional: true
- dependencies:
- whatwg-url: 5.0.0
- dev: false
-
/node-releases/2.0.2:
resolution: {integrity: sha512-XxYDdcQ6eKqp/YjI+tb2C5WM2LgjnZrfYg4vgQt49EK268b6gYCHsBLrK2qvJo4FmCtqmKezb0WZFK4fkrZNsg==}
dev: true
@@ -1602,12 +1530,6 @@ packages:
hasBin: true
dev: false
- /promise/7.3.1:
- resolution: {integrity: sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==}
- dependencies:
- asap: 2.0.6
- dev: false
-
/prop-types/15.8.1:
resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
dependencies:
@@ -1616,10 +1538,6 @@ packages:
react-is: 16.13.1
dev: false
- /pure-color/1.3.0:
- resolution: {integrity: sha1-H+Bk+wrIUfDeYTIKi/eWg2Qi8z4=}
- dev: false
-
/queue-microtask/1.2.3:
resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
dev: true
@@ -1629,15 +1547,6 @@ packages:
engines: {node: '>=10'}
dev: true
- /react-base16-styling/0.6.0:
- resolution: {integrity: sha1-7yFW1mz0E5aVyKFniGy2nqZgeSw=}
- dependencies:
- base16: 1.0.0
- lodash.curry: 4.1.1
- lodash.flow: 3.5.0
- pure-color: 1.3.0
- dev: false
-
/react-dom/17.0.2_react@17.0.2:
resolution: {integrity: sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==}
peerDependencies:
@@ -1653,27 +1562,6 @@ packages:
resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
dev: false
- /react-json-view/1.21.3_xd63vgjm47lzoal5ybyqmsdesy:
- resolution: {integrity: sha512-13p8IREj9/x/Ye4WI/JpjhoIwuzEgUAtgJZNBJckfzJt1qyh24BdTm6UQNGnyTq9dapQdrqvquZTo3dz1X6Cjw==}
- peerDependencies:
- react: ^17.0.0 || ^16.3.0 || ^15.5.4
- react-dom: ^17.0.0 || ^16.3.0 || ^15.5.4
- dependencies:
- flux: 4.0.3_react@17.0.2
- react: 17.0.2
- react-base16-styling: 0.6.0
- react-dom: 17.0.2_react@17.0.2
- react-lifecycles-compat: 3.0.4
- react-textarea-autosize: 8.3.3_udcsdvdzjr5ns727jqoeu7kyda
- transitivePeerDependencies:
- - '@types/react'
- - encoding
- dev: false
-
- /react-lifecycles-compat/3.0.4:
- resolution: {integrity: sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==}
- dev: false
-
/react-refresh/0.11.0:
resolution: {integrity: sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==}
engines: {node: '>=0.10.0'}
@@ -1689,20 +1577,6 @@ packages:
react: 17.0.2
dev: false
- /react-textarea-autosize/8.3.3_udcsdvdzjr5ns727jqoeu7kyda:
- resolution: {integrity: sha512-2XlHXK2TDxS6vbQaoPbMOfQ8GK7+irc2fVK6QFIcC8GOnH3zI/v481n+j1L0WaPVvKxwesnY93fEfH++sus2rQ==}
- engines: {node: '>=10'}
- peerDependencies:
- react: ^16.8.0 || ^17.0.0
- dependencies:
- '@babel/runtime': 7.16.7
- react: 17.0.2
- use-composed-ref: 1.3.0_react@17.0.2
- use-latest: 1.2.1_udcsdvdzjr5ns727jqoeu7kyda
- transitivePeerDependencies:
- - '@types/react'
- dev: false
-
/react/17.0.2:
resolution: {integrity: sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==}
engines: {node: '>=0.10.0'}
@@ -1794,10 +1668,6 @@ packages:
hasBin: true
dev: true
- /setimmediate/1.0.5:
- resolution: {integrity: sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=}
- dev: false
-
/source-map-js/1.0.2:
resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
engines: {node: '>=0.10.0'}
@@ -1881,55 +1751,12 @@ packages:
is-number: 7.0.0
dev: true
- /tr46/0.0.3:
- resolution: {integrity: sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o=}
- dev: false
-
/typescript/4.5.5:
resolution: {integrity: sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==}
engines: {node: '>=4.2.0'}
hasBin: true
dev: true
- /ua-parser-js/0.7.31:
- resolution: {integrity: sha512-qLK/Xe9E2uzmYI3qLeOmI0tEOt+TBBQyUIAh4aAgU05FVYzeZrKUdkAZfBNVGRaHVgV0TDkdEngJSw/SyQchkQ==}
- dev: false
-
- /use-composed-ref/1.3.0_react@17.0.2:
- resolution: {integrity: sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ==}
- peerDependencies:
- react: ^16.8.0 || ^17.0.0 || ^18.0.0
- dependencies:
- react: 17.0.2
- dev: false
-
- /use-isomorphic-layout-effect/1.1.2_udcsdvdzjr5ns727jqoeu7kyda:
- resolution: {integrity: sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==}
- peerDependencies:
- '@types/react': '*'
- react: ^16.8.0 || ^17.0.0 || ^18.0.0
- peerDependenciesMeta:
- '@types/react':
- optional: true
- dependencies:
- '@types/react': 17.0.39
- react: 17.0.2
- dev: false
-
- /use-latest/1.2.1_udcsdvdzjr5ns727jqoeu7kyda:
- resolution: {integrity: sha512-xA+AVm/Wlg3e2P/JiItTziwS7FK92LWrDB0p+hgXloIMuVCeJJ8v6f0eeHyPZaJrM+usM1FkFfbNCrJGs8A/zw==}
- peerDependencies:
- '@types/react': '*'
- react: ^16.8.0 || ^17.0.0 || ^18.0.0
- peerDependenciesMeta:
- '@types/react':
- optional: true
- dependencies:
- '@types/react': 17.0.39
- react: 17.0.2
- use-isomorphic-layout-effect: 1.1.2_udcsdvdzjr5ns727jqoeu7kyda
- dev: false
-
/util-deprecate/1.0.2:
resolution: {integrity: sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=}
dev: true
@@ -1974,17 +1801,6 @@ packages:
resolution: {integrity: sha512-tOhfEwEzFLJzf6d1ZPkYfGj+FWhIpBux9ppoP3rlclw3Z0BZv3N7b7030Z1kYth+6rDuAsXUFr+d0VE6Ed1ikw==}
dev: false
- /webidl-conversions/3.0.1:
- resolution: {integrity: sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE=}
- dev: false
-
- /whatwg-url/5.0.0:
- resolution: {integrity: sha1-lmRU6HZUYuN2RNNib2dCzotwll0=}
- dependencies:
- tr46: 0.0.3
- webidl-conversions: 3.0.1
- dev: false
-
/xtend/4.0.2:
resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
engines: {node: '>=0.4'}

MODIFY
website/playground/src/App.tsx
website/playground/src/App.tsx
@@ -2,11 +2,7 @@ import "react-tabs/style/react-tabs.css";
import { useEffect, useState, useRef } from "react";
import { LoadingState, RomeOutput } from "./types";
import { defaultRomeConfig } from "./types";
-import {
- loadRomeConfigFromLocalStorage,
- usePlaygroundState,
- useWindowSize,
-} from "./utils";
+import { usePlaygroundState, useWindowSize } from "./utils";
import DesktopPlayground from "./DesktopPlayground";
import { MobilePlayground } from "./MobilePlayground";
@@ -43,9 +39,7 @@ function App() {
const loadingState = event.data.loadingState as LoadingState;
setLoadingState(loadingState);
if (loadingState === LoadingState.Success) {
- // We only load the config from local storage once when app is loaded.
- const localStorageRomeConfig = loadRomeConfigFromLocalStorage();
- setRomeConfig({ ...romeConfig, ...localStorageRomeConfig });
+ setRomeConfig({ ...romeConfig });
}
break;
}

MODIFY
website/playground/src/DesktopPlayground.tsx
website/playground/src/DesktopPlayground.tsx
@@ -15,7 +15,7 @@ import { useCallback, useEffect, useState } from "react";
export default function DesktopPlayground(
{
setPlaygroundState,
- playgroundState: { code, treeStyle, ...settings },
+ playgroundState: { code, ...settings },
prettierOutput,
romeOutput: { cst, ast, formatted_code, formatter_ir, errors },
}: PlaygroundProps,
@@ -105,20 +105,8 @@ export default function DesktopPlayground(
readOnly={true}
/>
</TabPanel>
- <TabPanel>
- <TreeView
- treeStyle={treeStyle}
- setPlaygroundState={setPlaygroundState}
- tree={cst}
- />
- </TabPanel>
- <TabPanel>
- <TreeView
- treeStyle={treeStyle}
- setPlaygroundState={setPlaygroundState}
- tree={ast}
- />
- </TabPanel>
+ <TabPanel><TreeView tree={cst} /></TabPanel>
+ <TabPanel><TreeView tree={ast} /></TabPanel>
<TabPanel>
<button
className="bg-gray-300 px-2 py-2 text-white absolute right-0 top--1 mr-5 flex items-center rounded-md"

MODIFY
website/playground/src/MobilePlayground.tsx
website/playground/src/MobilePlayground.tsx
@@ -9,7 +9,7 @@ import TreeView from "./TreeView";
export function MobilePlayground(
{
setPlaygroundState,
- playgroundState: { code, treeStyle, ...settings },
+ playgroundState: { code, ...settings },
prettierOutput,
romeOutput: { cst, ast, formatted_code, formatter_ir, errors },
}: PlaygroundProps,
@@ -91,20 +91,8 @@ export function MobilePlayground(
}}
/>
</TabPanel>
- <TabPanel>
- <TreeView
- tree={cst}
- treeStyle={treeStyle}
- setPlaygroundState={setPlaygroundState}
- />
- </TabPanel>
- <TabPanel>
- <TreeView
- tree={ast}
- treeStyle={treeStyle}
- setPlaygroundState={setPlaygroundState}
- />
- </TabPanel>
+ <TabPanel><TreeView tree={cst} /></TabPanel>
+ <TabPanel><TreeView tree={ast} /></TabPanel>
<TabPanel>
<pre className="h-screen overflow-y-scroll">{formatter_ir}</pre>
</TabPanel>

DELETE
website/playground/src/TreeStyleSelect.tsx
-import { classNames } from "./utils";
-import { TreeStyle } from "./types";
-import { Dispatch, SetStateAction } from "react";
-
-interface Props {
- treeStyle: TreeStyle;
- setTreeStyle: (treeStyle: TreeStyle) => void;
-}
-
-export default function TreeStyleSelect({ treeStyle, setTreeStyle }: Props) {
- return (
- <div className="group p-0.5 rounded-lg flex bg-gray-200 mb-4 m-2 w-fit">
- <button
- type="button"
- onClick={() => setTreeStyle(TreeStyle.Json)}
- className={classNames(
- "flex focus-visible:ring-2 focus-visible:ring-teal-500 focus-visible:ring-offset-2 rounded-md focus:outline-none focus-visible:ring-offset-gray-100",
- treeStyle === TreeStyle.Json && "bg-white shadow-sm ring-1 ring-black ring-opacity-5",
- )}
- >
- <span
- className={classNames(
- "p-1.5 lg:pl-2.5 lg:pr-3.5 rounded-md flex items-center text-sm font-medium",
- treeStyle === TreeStyle.Json && "bg-white shadow-sm ring-1 ring-black ring-opacity-5",
- )}
- >
- <span
- className={classNames(
- "text-gray-900",
- treeStyle === TreeStyle.Json ? "text-gray-900" : "text-gray-600 group-hover:text-gray-900",
- )}
- >
- JSON
- </span>
- </span>
- </button>
- <button
- type="button"
- onClick={() => setTreeStyle(TreeStyle.Text)}
- className={classNames(
- "ml-0.5 p-1.5 lg:pl-2.5 lg:pr-3.5 rounded-md flex items-center text-sm text-gray-600 font-medium focus-visible:ring-2 focus-visible:ring-teal-500 focus-visible:ring-offset-2 focus:outline-none focus-visible:ring-offset-gray-100",
- treeStyle === TreeStyle.Text && "bg-white shadow-sm ring-1 ring-black ring-opacity-5",
- )}
- >
- <span className="text-gray-900">Text</span>
- </button>
- </div>
- );
-}

MODIFY
website/playground/src/TreeView.tsx
website/playground/src/TreeView.tsx
-import { SetStateAction } from "react";
-import { Dispatch } from "react";
-import ReactJson from "react-json-view";
-import TreeStyleSelect from "./TreeStyleSelect";
-import { PlaygroundState, TreeStyle } from "./types";
-import { createSetter } from "./utils";
-
interface Props {
tree: string;
- treeStyle: TreeStyle;
- setPlaygroundState: Dispatch<SetStateAction<PlaygroundState>>;
}
-export default function TreeView(
- { tree, treeStyle, setPlaygroundState }: Props,
-) {
- return (
- <div className="overflow-scroll">
- <TreeStyleSelect
- treeStyle={treeStyle}
- setTreeStyle={createSetter(setPlaygroundState, "treeStyle")}
- />
- {treeStyle === TreeStyle.Json ? <ReactJson src={JSON.parse(tree)} /> : (
- <pre>{tree}</pre>
- )}
- </div>
- );
+export default function TreeView({ tree }: Props) {
+ return <div className="overflow-scroll"><pre>{tree}</pre></div>;
}

MODIFY
website/playground/src/lib.rs
website/playground/src/lib.rs
@@ -10,7 +10,6 @@ use rome_js_formatter::context::JsFormatContext;
use rome_js_formatter::format_node;
use rome_js_parser::parse;
use rome_js_syntax::{LanguageVariant, SourceType};
-use serde_json::json;
use std::io;
use wasm_bindgen::prelude::*;
@@ -125,28 +124,6 @@ impl WriteColor for ErrorOutput {
}
}
-/// Serde's default serialization results in a lot of nesting because of how it serializes
-/// Results and Vectors. We flatten this nesting to make the JSON easier to read
-fn clean_up_json(json: serde_json::Value) -> serde_json::Value {
- match json {
- serde_json::Value::Array(entries) => {
- serde_json::Value::Array(entries.into_iter().map(clean_up_json).collect())
- }
- serde_json::Value::Object(mut fields) => {
- if fields.len() == 1 && fields.contains_key("Ok") {
- clean_up_json(fields.remove("Ok").unwrap())
- } else {
- serde_json::Value::Object(
- fields
- .into_iter()
- .map(|(key, value)| (key, clean_up_json(value)))
- .collect(),
- )
- }
- }
- s => s,
- }
-}
#[wasm_bindgen]
pub struct PlaygroundFormatOptions {
line_width: u16,
@@ -196,7 +173,6 @@ pub fn run(
is_typescript: bool,
is_jsx: bool,
source_type: String,
- output_json: bool,
) -> RomeOutput {
let mut simple_files = SimpleFiles::new();
let main_file_id = simple_files.add("main.js".to_string(), code.clone());
@@ -236,21 +212,7 @@ pub fn run(
.with_line_width(options.line_width.try_into().unwrap_or_default())
.with_quote_style(options.quote_style.parse().unwrap_or_default());
- let (cst, ast) = if output_json {
- let cst_json = clean_up_json(
- serde_json::to_value(&syntax)
- .unwrap_or_else(|_| json!({ "error": "CST could not be serialized" })),
- );
-
- let ast_json = clean_up_json(
- serde_json::to_value(&parse.tree())
- .unwrap_or_else(|_| json!({ "error": "AST could not be serialized" })),
- );
-
- (cst_json.to_string(), ast_json.to_string())
- } else {
- (format!("{:#?}", syntax), format!("{:#?}", parse.tree()))
- };
+ let (cst, ast) = (format!("{:#?}", syntax), format!("{:#?}", parse.tree()));
mark("rome::format::begin");
let formatted = format_node(context, &syntax).unwrap();

MODIFY
website/playground/src/romeWorker.ts
website/playground/src/romeWorker.ts
import init, { PlaygroundFormatOptions, run } from "../pkg/rome_playground";
-import { IndentStyle, TreeStyle, LoadingState } from "./types";
+import { IndentStyle, LoadingState } from "./types";
self.addEventListener("message", async (e) => {
switch (e.data.type) {
@@ -24,7 +24,6 @@ self.addEventListener("message", async (e) => {
isTypeScript,
isJsx,
sourceType,
- treeStyle,
} = e.data.playgroundState;
const romeOutput = run(
code,
@@ -36,7 +35,6 @@ self.addEventListener("message", async (e) => {
isTypeScript,
isJsx,
sourceType,
- treeStyle === TreeStyle.Json,
);
self.postMessage({
type: "formatted",

MODIFY
website/playground/src/types.ts
website/playground/src/types.ts
@@ -3,7 +3,6 @@ import { Dispatch, SetStateAction } from "react";
export enum IndentStyle { Tab = "tab", Space = "space" }
export enum SourceType { Module = "module", Script = "script" }
export enum QuoteStyle { Double = "double", Single = "single" }
-export enum TreeStyle { Json, Text }
export enum LoadingState { Loading, Success, Error }
@@ -24,7 +23,6 @@ export interface PlaygroundState {
sourceType: SourceType;
isTypeScript: boolean;
isJsx: boolean;
- treeStyle: TreeStyle;
}
// change `lineWidth` and `indentWidth` to string type, just to fits our `usePlaygroundState` fallback usage
@@ -40,7 +38,6 @@ export const defaultRomeConfig: RomeConfiguration = {
sourceType: SourceType.Module,
isTypeScript: false,
isJsx: false,
- treeStyle: TreeStyle.Json,
};
export interface PlaygroundProps {

MODIFY
website/playground/src/utils.ts
website/playground/src/utils.ts
@@ -9,7 +9,6 @@ import {
QuoteStyle,
RomeConfiguration,
SourceType,
- TreeStyle,
} from "./types";
export function classNames(
@@ -17,8 +16,6 @@ export function classNames(
): string {
return classes.filter(Boolean).join(" ");
}
-// Only save prop of `PlaygroundState` that we interested
-export const OPTIONS_TO_PERSIST: Array<keyof RomeConfiguration> = ["treeStyle"];
// Define general type for useWindowSize hook, which includes width and height
interface Size {
width: number | undefined;
@@ -82,7 +79,6 @@ export function usePlaygroundState(defaultRomeConfig: RomeConfiguration): [
(
searchParams.get("sourceType") as SourceType
) ?? defaultRomeConfig.sourceType,
- treeStyle: defaultRomeConfig.treeStyle ?? TreeStyle.Json,
});
const [playgroundState, setPlaygroundState] = useState(initState());
@@ -93,11 +89,7 @@ export function usePlaygroundState(defaultRomeConfig: RomeConfiguration): [
useEffect(() => {
const { code, isTypeScript, isJsx } = playgroundState;
const queryString = new URLSearchParams({
- ...crateObjectExcludeKeys(playgroundState, [
- "isTypeScript",
- "isJsx",
- "treeStyle",
- ]),
+ ...crateObjectExcludeKeys(playgroundState, ["isTypeScript", "isJsx"]),
typescript: isTypeScript.toString(),
jsx: isJsx.toString(),
}).toString();
@@ -117,9 +109,6 @@ export function createSetter(
return function (param: PlaygroundState[typeof field]) {
setPlaygroundState((state) => {
let nextState = { ...state, [field]: param };
- if (field === "treeStyle") {
- changeLocalStorageConfig(nextState);
- }
return nextState;
});
};
@@ -157,7 +146,6 @@ export function formatWithPrettier(
return { code: formattedCode, ir };
} catch (err: any) {
console.error(err);
- //@ts-ignore
const code = err.toString();
return { code, ir: `Error: Invalid code\n${err.message}` };
}
@@ -210,39 +198,6 @@ function fromBinary(binary: string) {
return result;
}
-function changeLocalStorageConfig(playgroundState: PlaygroundState) {
- let romeConfig = createObjectIncludeKeys(playgroundState, OPTIONS_TO_PERSIST);
- localStorage.setItem("rome_config", JSON.stringify(romeConfig));
-}
-
-export function loadRomeConfigFromLocalStorage(): RomeConfiguration {
- let configString = window.localStorage.getItem("rome_config");
- let config: Partial<RomeConfiguration> = {};
- try {
- config = JSON.parse(configString || "");
- } catch (err) {
- config = {};
- console.error(err);
- }
- return mergeRomeConfig(config, defaultRomeConfig);
-}
-
-// Change the romeConfig in local storage seems to be meaningless, so we simplify the validation phase.
-// only use default value if some key is empty
-function mergeRomeConfig(
- config: Partial<RomeConfiguration>,
- defaultConfig: RomeConfiguration,
-): RomeConfiguration {
- return OPTIONS_TO_PERSIST.reduce((acc, key) => {
- if (config[key]) {
- acc[key] = config[key as keyof RomeConfiguration];
- } else {
- acc[key] = defaultConfig[key as keyof RomeConfiguration];
- }
- return acc;
- }, Object.create(null)) as RomeConfiguration;
-}
-
/**
* Crate an object with some keys omitted of original object
* @param obj
@@ -260,21 +215,3 @@ function crateObjectExcludeKeys<T extends object>(
return acc;
}, Object.create(null));
}
-
-/**
- * Crate an object with only interested keys of original object
- * @param obj
- * @param keys
- * @returns
- */
-function createObjectIncludeKeys<T extends object>(
- obj: T,
- keys: Array<keyof T>,
-): Record<string, any> {
- return Object.keys(obj).reduce((acc, key) => {
- if (keys.includes(key as keyof T)) {
- acc[key] = obj[key as keyof T];
- }
- return acc;
- }, Object.create(null));
-}

chore(playground):  remove TreeStyle and related functionality (#2892)