chore(playground): Upgrade rome, re-format files

Upgrade rome to 0.6.0 and run the formatter on the playground files

website/playground/package.json

@@ -30,7 +30,7 @@
 		"@vitejs/plugin-react": "^1.0.7",
 		"autoprefixer": "^10.4.2",
 		"postcss": "^8.4.6",
-		"rome": "0.5.0-next",
+		"rome": "0.6.0-next",
 		"tailwindcss": "^3.0.19",
 		"typescript": "^4.4.4",
 		"vite": "^2.7.2"

website/playground/src/App.tsx

@@ -14,10 +14,10 @@ function App() {
 			init()
 				.then(() => {
 					setLoadingState(LoadingState.Success);
-				})
+				},)
 				.catch(() => {
 					setLoadingState(LoadingState.Error);
-				});
+				},);
 		},
 		[],
 	);

website/playground/src/LineWidthInput.tsx

@@ -1,4 +1,7 @@
-interface Props { lineWidth: number; setLineWidth: (lineWidth: number) => void }
+interface Props {
+	lineWidth: number;
+	setLineWidth: (lineWidth: number) => void;
+}
 export default function LineWidthInput({ lineWidth, setLineWidth }: Props) {
 	return (
 		<div className="w-[300px] p-5 flex items-end">

website/playground/src/SourceTypeSelect.tsx

@@ -10,7 +10,14 @@ interface Props {
 }
 
 export default function SourceTypeSelect(
-	{ setIsTypeScript, isTypeScript, setIsJsx, isJsx, setSourceType, sourceType }: Props,
+	{
+		setIsTypeScript,
+		isTypeScript,
+		setIsJsx,
+		isJsx,
+		setSourceType,
+		sourceType,
+	}: Props,
 ) {
 	return (
 		<div className="p-5 sm:pr-0 sm:pt-0">
@@ -54,7 +61,7 @@ export default function SourceTypeSelect(
 								setIsTypeScript(e.target.checked);
 							}}
 							className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded disabled:opacity-30"
-							disabled={sourceType == SourceType.Script}
+							disabled={sourceType === SourceType.Script}
 						/>
 					</div>
 					<div className="ml-1 text-sm">
@@ -76,7 +83,7 @@ export default function SourceTypeSelect(
 							checked={isJsx}
 							onChange={(e) => setIsJsx(e.target.checked)}
 							className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded disabled:opacity-30"
-							disabled={sourceType == SourceType.Script}
+							disabled={sourceType === SourceType.Script}
 						/>
 					</div>
 					<div className="ml-1 text-sm">

website/playground/src/TreeView.tsx

@@ -11,7 +11,9 @@ interface Props {
 	setPlaygroundState: Dispatch<SetStateAction<PlaygroundState>>;
 }
 
-export default function TreeView({ tree, treeStyle, setPlaygroundState }: Props) {
+export default function TreeView(
+	{ tree, treeStyle, setPlaygroundState }: Props,
+) {
 	return (
 		<div className="overflow-scroll">
 			<TreeStyleSelect

website/playground/src/utils.ts

@@ -2,14 +2,25 @@ import { Dispatch, SetStateAction, useEffect, useState } from "react";
 import prettier from "prettier";
 // @ts-ignore
 import parserBabel from "prettier/esm/parser-babel";
-import { IndentStyle, PlaygroundState, QuoteStyle, SourceType, TreeStyle } from "./types";
-
-export function classNames(...classes: (string | undefined | boolean)[]): string {
+import {
+	IndentStyle,
+	PlaygroundState,
+	QuoteStyle,
+	SourceType,
+	TreeStyle,
+} from "./types";
+
+export function classNames(
+	...classes: (string | undefined | boolean)[]
+): string {
 	return classes.filter(Boolean).join(" ");
 }
 
 // Define general type for useWindowSize hook, which includes width and height
-interface Size { width: number | undefined; height: number | undefined }
+interface Size {
+	width: number | undefined;
+	height: number | undefined;
+}
 
 // Hook
 export function useWindowSize(): Size {
@@ -18,7 +29,7 @@ export function useWindowSize(): Size {
 	const [windowSize, setWindowSize] = useState<Size>({
 		width: undefined,
 		height: undefined,
-	});
+	},);
 	useEffect(
 		() => {
 			// Handler to call on window resize
@@ -45,16 +56,20 @@ export function usePlaygroundState(): [
 	const searchParams = new URLSearchParams(window.location.search);
 	const [playgroundState, setPlaygroundState] = useState(
 		() => ({
-			code: window.location.hash !== "#" ? decodeCode(
-				window.location.hash.substring(1),
-			) : "",
+			code:
+				window.location.hash !== "#" ? decodeCode(
+					window.location.hash.substring(1),
+				) : "",
 			lineWidth: parseInt(searchParams.get("lineWidth") ?? "80"),
-			indentStyle: (searchParams.get("indentStyle") as IndentStyle) ?? IndentStyle.Tab,
-			quoteStyle: (searchParams.get("quoteStyle") as QuoteStyle) ?? QuoteStyle.Double,
+			indentStyle:
+				(searchParams.get("indentStyle") as IndentStyle) ?? IndentStyle.Tab,
+			quoteStyle:
+				(searchParams.get("quoteStyle") as QuoteStyle) ?? QuoteStyle.Double,
 			indentWidth: parseInt(searchParams.get("indentWidth") ?? "2"),
 			isTypeScript: searchParams.get("typescript") === "true",
 			isJsx: searchParams.get("jsx") === "true",
-			sourceType: (searchParams.get("sourceType") as SourceType) ?? SourceType.Module,
+			sourceType:
+				(searchParams.get("sourceType") as SourceType) ?? SourceType.Module,
 			treeStyle: TreeStyle.Json,
 		}),
 	);
@@ -67,7 +82,7 @@ export function usePlaygroundState(): [
 				...options,
 				typescript: isTypeScript.toString(),
 				jsx: isJsx.toString(),
-			}).toString();
+			},).toString();
 			const url = `${window.location.protocol}//${window.location.host}${window.location.pathname}?${queryString}#${encodeCode(
 				code,
 			)}`;
@@ -112,7 +127,10 @@ export function formatWithPrettier(
 		// @ts-ignore
 		let debug = prettier.__debug;
 		const document = debug.printToDoc(code, prettierOptions);
-		const formattedCode = debug.printDocToString(document, prettierOptions).formatted;
+		const formattedCode = debug.printDocToString(
+			document,
+			prettierOptions,
+		).formatted;
 		const ir = debug.formatDoc(
 			document,
 			{ parser: "babel", plugins: [parserBabel] },

website/playground/vite.config.ts

@@ -6,4 +6,4 @@ import svgr from "@honkhonk/vite-plugin-svgr";
 export default defineConfig({
 	base: process.env.BASE_URL,
 	plugins: [react(), svgr()],
-});
+},);

website/playground/workers-site/index.js

@@ -1,4 +1,7 @@
-import { getAssetFromKV, mapRequestToAsset } from "@cloudflare/kv-asset-handler";
+import {
+	getAssetFromKV,
+	mapRequestToAsset,
+} from "@cloudflare/kv-asset-handler";
 
 /**
  * The DEBUG flag will do two things that help during development: