feature(website): Toggle Tree Style

website/playground/src/App.tsx

@@ -1,7 +1,7 @@
 import "react-tabs/style/react-tabs.css";
 import init, { run } from "../pkg/rome_playground";
 import { useEffect, useState } from "react";
-import { IndentStyle } from "./types";
+import { IndentStyle, TreeStyle } from "./types";
 import { formatWithPrettier, usePlaygroundState, useWindowSize } from "./utils";
 import DesktopPlayground from "./DesktopPlayground";
 import { MobilePlayground } from "./MobilePlayground";
@@ -23,7 +23,7 @@ function App() {
 	);
 
 	const [loadingState, setLoadingState] = useState(LoadingState.Loading);
-	const playgroundState = usePlaygroundState();
+	const [playgroundState, setPlaygroundState] = usePlaygroundState();
 	const { width } = useWindowSize();
 
 	switch (loadingState) {
@@ -45,6 +45,7 @@ function App() {
 				isTypeScript,
 				isJsx,
 				sourceType,
+				treeStyle,
 			} = playgroundState;
 
 			const romeOutput = run(
@@ -55,6 +56,7 @@ function App() {
 				isTypeScript,
 				isJsx,
 				sourceType,
+				treeStyle === TreeStyle.Json,
 			);
 			const prettierOutput = formatWithPrettier(
 				code,
@@ -70,6 +72,7 @@ function App() {
 			if (width && width < 480) {
 				return (
 					<MobilePlayground
+						setPlaygroundState={setPlaygroundState}
 						playgroundState={playgroundState}
 						prettierOutput={prettierOutput}
 						romeOutput={romeOutput}
@@ -78,6 +81,7 @@ function App() {
 			}
 			return (
 				<DesktopPlayground
+					setPlaygroundState={setPlaygroundState}
 					playgroundState={playgroundState}
 					prettierOutput={prettierOutput}
 					romeOutput={romeOutput}

website/playground/src/DesktopPlayground.tsx

@@ -1,13 +1,15 @@
 import { PlaygroundProps } from "./types";
 import CodeEditor from "@uiw/react-textarea-code-editor";
-import { getLanguage } from "./utils";
+import { createSetter, getLanguage } from "./utils";
 import { Tab, TabList, TabPanel, Tabs } from "react-tabs";
 import { SettingsMenu } from "./SettingsMenu";
 import TreeView from "./TreeView";
+import ReactJson from "react-json-view";
 
 export default function DesktopPlayground(
 	{
-		playgroundState: { code, setCode, ...settings },
+		setPlaygroundState,
+		playgroundState: { code, treeStyle, ...settings },
 		prettierOutput,
 		romeOutput: { cst, ast, formatted_code, formatter_ir, errors },
 	}: PlaygroundProps,
@@ -17,15 +19,21 @@ export default function DesktopPlayground(
 	return (
 		<div className="divide-y divide-slate-300">
 			<h1 className="p-4 text-xl">Rome Playground</h1>
-			<SettingsMenu settings={settings} />
+			<SettingsMenu
+				settings={settings}
+				setPlaygroundState={setPlaygroundState}
+			/>
 			<div className="box-border flex h-screen divide-x divide-slate-300">
 				<div className="w-1/2 p-5">
 					<CodeEditor
 						value={code}
 						language={language}
 						placeholder="Enter some code here"
 						onChange={(evn) => {
-							setCode(evn.target.value);
+							setPlaygroundState((state) => ({
+								...state,
+								code: evn.target.value,
+							}));
 						}}
 						style={{
 							fontSize: 12,
@@ -76,16 +84,24 @@ export default function DesktopPlayground(
 							/>
 						</TabPanel>
 						<TabPanel>
-							<TreeView tree={JSON.parse(cst)} />
+							<TreeView
+								treeStyle={treeStyle}
+								setPlaygroundState={setPlaygroundState}
+								tree={cst}
+							/>
 						</TabPanel>
 						<TabPanel>
-							<TreeView tree={JSON.parse(ast)} />
+							<TreeView
+								treeStyle={treeStyle}
+								setPlaygroundState={setPlaygroundState}
+								tree={ast}
+							/>
 						</TabPanel>
 						<TabPanel>
 							<pre className="h-screen overflow-scroll">{formatter_ir}</pre>
 						</TabPanel>
 						<TabPanel>
-							<TreeView tree={prettierOutput.ir} />
+							<ReactJson src={prettierOutput.ir} />
 						</TabPanel>
 						<TabPanel>
 							<pre className="h-screen overflow-scroll whitespace-pre-wrap text-red-500 text-xs">

website/playground/src/MobilePlayground.tsx

@@ -1,13 +1,15 @@
 import { Tab, TabList, TabPanel, Tabs } from "react-tabs";
 import CodeEditor from "@uiw/react-textarea-code-editor";
-import { getLanguage } from "./utils";
+import { createSetter, getLanguage } from "./utils";
 import { PlaygroundProps } from "./types";
 import { SettingsMenu } from "./SettingsMenu";
 import TreeView from "./TreeView";
+import ReactJson from "react-json-view";
 
 export function MobilePlayground(
 	{
-		playgroundState: { code, setCode, ...settings },
+		setPlaygroundState,
+		playgroundState: { code, treeStyle, ...settings },
 		prettierOutput,
 		romeOutput: { cst, ast, formatted_code, formatter_ir, errors },
 	}: PlaygroundProps,
@@ -36,7 +38,10 @@ export function MobilePlayground(
 						language={language}
 						placeholder="Enter some code here"
 						onChange={(evn) => {
-							setCode(evn.target.value);
+							setPlaygroundState((state) => ({
+								...state,
+								code: evn.target.value,
+							}));
 						}}
 						style={{
 							fontSize: 12,
@@ -47,7 +52,10 @@ export function MobilePlayground(
 					/>
 				</TabPanel>
 				<TabPanel>
-					<SettingsMenu settings={settings} />
+					<SettingsMenu
+						setPlaygroundState={setPlaygroundState}
+						settings={settings}
+					/>
 				</TabPanel>
 				<TabPanel>
 					<h1>Rome</h1>
@@ -78,16 +86,24 @@ export function MobilePlayground(
 					/>
 				</TabPanel>
 				<TabPanel>
-					<TreeView tree={JSON.parse(cst)} />
+					<TreeView
+						tree={cst}
+						treeStyle={treeStyle}
+						setPlaygroundState={setPlaygroundState}
+					/>
 				</TabPanel>
 				<TabPanel>
-					<TreeView tree={JSON.parse(ast)} />
+					<TreeView
+						tree={ast}
+						treeStyle={treeStyle}
+						setPlaygroundState={setPlaygroundState}
+					/>
 				</TabPanel>
 				<TabPanel>
 					<pre className="h-screen overflow-y-scroll">{formatter_ir}</pre>
 				</TabPanel>
 				<TabPanel>
-					<TreeView tree={prettierOutput.ir} />
+					<ReactJson src={prettierOutput.ir} />
 				</TabPanel>
 				<TabPanel>
 					<pre className="h-screen overflow-y-scroll whitespace-pre-wrap text-red-500 text-xs">

website/playground/src/SettingsMenu.tsx

@@ -2,53 +2,55 @@ import LineWidthInput from "./LineWidthInput";
 import IndentStyleSelect from "./IndentStyleSelect";
 import QuoteStyleSelect from "./QuoteStyleSelect";
 import SourceTypeSelect from "./SourceTypeSelect";
-import { PlaygroundSettings } from "./types";
+import { PlaygroundSettings, PlaygroundState } from "./types";
+import { Dispatch, SetStateAction } from "react";
+import { createSetter } from "./utils";
 
-interface Props { settings: PlaygroundSettings }
+interface Props {
+	settings: PlaygroundSettings;
+	setPlaygroundState: Dispatch<SetStateAction<PlaygroundState>>;
+}
 
 export function SettingsMenu(
 	{
+		setPlaygroundState,
 		settings: {
 			lineWidth,
-			setLineWidth,
 			indentWidth,
-			setIndentWidth,
 			indentStyle,
-			setIndentStyle,
 			quoteStyle,
-			setQuoteStyle,
 			sourceType,
-			setSourceType,
 			isTypeScript,
-			setIsTypeScript,
 			isJsx,
-			setIsJsx,
 		},
 	}: Props,
 ) {
 	return (
 		<div>
 			<div className="flex flex-col sm:flex-row">
-				<LineWidthInput lineWidth={lineWidth} setLineWidth={setLineWidth} />
+				<LineWidthInput
+					lineWidth={lineWidth}
+					setLineWidth={createSetter(setPlaygroundState, "lineWidth")}
+				/>
 				<IndentStyleSelect
 					indentWidth={indentWidth}
-					setIndentWidth={setIndentWidth}
+					setIndentWidth={createSetter(setPlaygroundState, "indentWidth")}
 					indentStyle={indentStyle}
-					setIndentStyle={setIndentStyle}
+					setIndentStyle={createSetter(setPlaygroundState, "indentStyle")}
 				/>
 			</div>
 			<div className="flex flex-col sm:flex-row">
 				<QuoteStyleSelect
 					quoteStyle={quoteStyle}
-					setQuoteStyle={setQuoteStyle}
+					setQuoteStyle={createSetter(setPlaygroundState, "quoteStyle")}
 				/>
 				<SourceTypeSelect
 					isTypeScript={isTypeScript}
-					setIsTypeScript={setIsTypeScript}
+					setIsTypeScript={createSetter(setPlaygroundState, "isTypeScript")}
 					isJsx={isJsx}
-					setIsJsx={setIsJsx}
+					setIsJsx={createSetter(setPlaygroundState, "isJsx")}
 					sourceType={sourceType}
-					setSourceType={setSourceType}
+					setSourceType={createSetter(setPlaygroundState, "sourceType")}
 				/>
 			</div>
 		</div>

website/playground/src/TreeStyleSelect.tsx

@@ -0,0 +1,54 @@
+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>
+	);
+}