docs(website): added checkbox to toggle linter in playground (#3699)

Fixes #3010

website/src/playground/components/SettingsPane.tsx

@@ -33,6 +33,7 @@ export default function SettingsPane({
 		typescript: isTypeScript,
 		jsx: isJsx,
 		enabledNurseryRules,
+        enabledLinting,
 	},
 }: Props) {
 	const setIsTypeScript = createSetter(setPlaygroundState, "typescript");
@@ -51,6 +52,7 @@ export default function SettingsPane({
 		setPlaygroundState,
 		"enabledNurseryRules",
 	);
+	const setEnabledLinting = createSetter(setPlaygroundState, "enabledLinting");
 
 	const [isCollapsed, setIsCollapsed] = useState(isCollapsedStore.getBoolean());
 
@@ -88,6 +90,8 @@ export default function SettingsPane({
 					<LinterSettings
 						enabledNurseryRules={enabledNurseryRules}
 						setEnabledNurseryRules={setEnabledNurseryRules}
+						enabledLinting={enabledLinting}
+						setEnabledLinting={setEnabledLinting}
 					/>
 					<SyntaxSettings
 						sourceType={sourceType}
@@ -284,20 +288,35 @@ function FormatterSettings({
 function LinterSettings({
 	enabledNurseryRules,
 	setEnabledNurseryRules,
+    enabledLinting,
+    setEnabledLinting,
 }: {
 	enabledNurseryRules: boolean;
 	setEnabledNurseryRules: (value: boolean) => void;
+	enabledLinting: boolean;
+	setEnabledLinting: (value: boolean) => void;
 }) {
 	return (
 		<>
 			<h2>Linter</h2>
 			<section>
+				<div className="field-row">
+						<input
+								id="linting-enabled"
+								name="linting-enabled"
+								type="checkbox"
+								checked={enabledLinting}
+								onChange={(e) => setEnabledLinting(e.target.checked)}
+						/>
+					<label htmlFor="linting-enabled">Linter enabled</label>
+				</div>
 				<div className="field-row">
 					<input
 						id="nursery-rules"
 						aria-describedby="nursery-rules-description"
 						name="nursery-rules"
 						type="checkbox"
+						disabled={!enabledLinting}
 						checked={enabledNurseryRules}
 						onChange={(e) => setEnabledNurseryRules(e.target.checked)}
 					/>

website/src/playground/types.ts

@@ -50,6 +50,7 @@ export interface PlaygroundState {
 	jsx: boolean;
 	cursorPosition: number;
 	enabledNurseryRules: boolean;
+    enabledLinting: boolean;
 }
 
 // change `lineWidth` and `indentWidth` to string type, just to fits our `usePlaygroundState` fallback usage
@@ -70,6 +71,7 @@ export const defaultRomeConfig: RomeConfiguration = {
 	jsx: true,
 	cursorPosition: 0,
 	enabledNurseryRules: true,
+	enabledLinting: true,
 };
 
 export interface PlaygroundProps {
@@ -92,6 +94,7 @@ export type PlaygroundSettings = Pick<
 	| "typescript"
 	| "jsx"
 	| "enabledNurseryRules"
+	| "enabledLinting"
 >;
 
 export type Tree = ReturnType<typeof parser.parse>;

website/src/playground/utils.ts

@@ -145,6 +145,9 @@ export function usePlaygroundState(
 		enabledNurseryRules:
 			searchParams.get("enabledNurseryRules") === "true" ||
 			defaultRomeConfig.enabledNurseryRules,
+        enabledLinting:
+            searchParams.get("enabledLinting") === "true" ||
+            defaultRomeConfig.enabledLinting,
 	});
 	const [playgroundState, setPlaygroundState] = useState(
 		initState(initialSearchParams),

website/src/playground/workers/romeWorker.ts

@@ -2,6 +2,7 @@ import init, {
 	Configuration,
 	DiagnosticPrinter,
 	RomePath,
+	RuleCategories,
 	Workspace,
 } from "@rometools/wasm-web";
 import {
@@ -83,6 +84,7 @@ self.addEventListener("message", async (e) => {
 				sourceType,
 				cursorPosition,
 				enabledNurseryRules,
+        enabledLinting,
 				trailingComma,
 			} = playgroundState;
 
@@ -95,7 +97,7 @@ self.addEventListener("message", async (e) => {
 					indentSize: indentWidth,
 				},
 				linter: {
-					enabled: true,
+					enabled: enabledLinting,
 				},
 				javascript: {
 					formatter: {
@@ -110,7 +112,7 @@ self.addEventListener("message", async (e) => {
 			};
 			if (enabledNurseryRules) {
 				configuration.linter = {
-					enabled: true,
+					enabled: enabledLinting,
 					rules: {
 						nursery: {
 							noConstAssign: "error",
@@ -160,9 +162,16 @@ self.addEventListener("message", async (e) => {
 				path,
 			});
 
+			const categories: RuleCategories = [];
+			if (configuration.formatter?.enabled) {
+					categories.push("Syntax");
+			}
+			if (configuration.linter?.enabled) {
+					categories.push("Lint");
+			}
 			const diagnostics = workspace.pullDiagnostics({
 				path,
-				categories: ["Syntax", "Lint"],
+				categories: categories,
 				max_diagnostics: Number.MAX_SAFE_INTEGER,
 			});