feat(playground): add tab to preview analyzer fixes (#1701)

src/playground/Playground.tsx

@@ -48,6 +48,7 @@ import {
 	useRef,
 	useState,
 } from "react";
+import AnalyzerFixesTab from "./tabs/AnalyzerFixesTab";
 
 export default function Playground({
 	setPlaygroundState,
@@ -241,6 +242,16 @@ export default function Playground({
 						/>
 					),
 				},
+				{
+					key: PlaygroundTab.AnalyzerFixes,
+					title: "Analyzer Fixes",
+					children: (
+						<AnalyzerFixesTab
+							code={biomeOutput.analysis.fixed}
+							extensions={codeMirrorExtensions}
+						/>
+					),
+				},
 				{
 					key: PlaygroundTab.Syntax,
 					title: "Syntax",

src/playground/tabs/AnalyzerFixesTab.tsx

@@ -0,0 +1,18 @@
+import CodeMirror, { type BiomeExtension } from "@/playground/CodeMirror";
+
+interface Props {
+	code: string;
+	extensions: BiomeExtension[];
+}
+
+export default function AnalyzerFixesTab({ code, extensions }: Props) {
+	return (
+		<CodeMirror
+			value={code}
+			readOnly={true}
+			extensions={extensions}
+			placeholder="No fixes available"
+			data-testid="analyzer-fixes"
+		/>
+	);
+}

src/playground/tabs/SettingsTab.tsx

@@ -20,6 +20,7 @@ import {
 	modifyFilename,
 	normalizeFilename,
 } from "@/playground/utils";
+import type { FixFileMode } from "@biomejs/wasm-web";
 import type { Dispatch, SetStateAction } from "react";
 import type React from "react";
 import { useState } from "react";
@@ -51,6 +52,7 @@ export default function SettingsTab({
 			bracketSameLine,
 			lintRules,
 			enabledLinting,
+			analyzerFixMode,
 			importSortingEnabled,
 			unsafeParameterDecoratorsEnabled,
 			allowComments,
@@ -114,6 +116,10 @@ export default function SettingsTab({
 		setPlaygroundState,
 		"enabledLinting",
 	);
+	const setAnalyzerFixMode = createPlaygroundSettingsSetter(
+		setPlaygroundState,
+		"analyzerFixMode",
+	);
 
 	const setImportSorting = createPlaygroundSettingsSetter(
 		setPlaygroundState,
@@ -282,6 +288,8 @@ export default function SettingsTab({
 				setLintRules={setLintRules}
 				enabledLinting={enabledLinting}
 				setEnabledLinting={setEnabledLinting}
+				analyzerFixMode={analyzerFixMode}
+				setAnalyzerFixMode={setAnalyzerFixMode}
 			/>
 			<ImportSortingSettings
 				importSortingEnabled={importSortingEnabled}
@@ -799,11 +807,15 @@ function LinterSettings({
 	setLintRules,
 	enabledLinting,
 	setEnabledLinting,
+	analyzerFixMode,
+	setAnalyzerFixMode,
 }: {
 	lintRules: LintRules;
 	setLintRules: (value: LintRules) => void;
 	enabledLinting: boolean;
 	setEnabledLinting: (value: boolean) => void;
+	analyzerFixMode: FixFileMode;
+	setAnalyzerFixMode: (value: FixFileMode) => void;
 }) {
 	return (
 		<>
@@ -833,6 +845,21 @@ function LinterSettings({
 						<option value={LintRules.All}>All</option>
 					</select>
 				</div>
+				<div className="field-row">
+					<label htmlFor="analyzer-fix-mode">Fix Mode</label>
+					<select
+						id="analyzer-fix-mode"
+						aria-describedby="analyzer-fix-mode-description"
+						name="analyzer-fix-mode"
+						disabled={!enabledLinting}
+						value={analyzerFixMode ?? "SafeFixes"}
+						onChange={(e) => setAnalyzerFixMode(e.target.value as FixFileMode)}
+					>
+						<option value={"SafeFixes"}>Safe Fixes</option>
+						<option value={"SafeAndUnsafeFixes"}>Safe and Unsafe Fixes</option>
+						<option value={"ApplySuppressions"}>Apply Suppressions</option>
+					</select>
+				</div>
 			</section>
 		</>
 	);

src/playground/types.ts

@@ -1,4 +1,4 @@
-import type { Diagnostic } from "@biomejs/wasm-web";
+import type { Diagnostic, FixFileMode } from "@biomejs/wasm-web";
 import type { parser } from "codemirror-lang-rome-ast";
 import type { Dispatch, SetStateAction } from "react";
 
@@ -12,6 +12,7 @@ export enum PlaygroundTab {
 	ImportSorting = "import-sorting",
 	Console = "console",
 	Settings = "settings",
+	AnalyzerFixes = "analyzer-fixes",
 }
 
 export type { Options as PrettierOptions } from "prettier";
@@ -92,6 +93,8 @@ export interface BiomeOutput {
 	};
 	analysis: {
 		controlFlowGraph: string;
+		/** The snippet with lint fixes applied. */
+		fixed: string;
 	};
 	importSorting: {
 		code: string;
@@ -113,6 +116,7 @@ export const emptyBiomeOutput: BiomeOutput = {
 	},
 	analysis: {
 		controlFlowGraph: "",
+		fixed: "",
 	},
 	importSorting: {
 		code: "",
@@ -134,6 +138,7 @@ export interface PlaygroundSettings {
 	bracketSameLine: boolean;
 	lintRules: LintRules;
 	enabledLinting: boolean;
+	analyzerFixMode: FixFileMode;
 	importSortingEnabled: boolean;
 	unsafeParameterDecoratorsEnabled: boolean;
 	allowComments: boolean;
@@ -181,6 +186,7 @@ export const defaultPlaygroundState: PlaygroundState = {
 		bracketSameLine: false,
 		lintRules: LintRules.Recommended,
 		enabledLinting: true,
+		analyzerFixMode: "SafeFixes",
 		importSortingEnabled: true,
 		unsafeParameterDecoratorsEnabled: true,
 		allowComments: true,

src/playground/workers/biomeWorker.ts

@@ -31,6 +31,7 @@ type File = {
 const files: Map<string, File> = new Map();
 
 let configuration: undefined | Configuration;
+let fullSettings: undefined | PlaygroundSettings;
 
 function getPathForFile(file: File): BiomePath {
 	return {
@@ -72,6 +73,8 @@ self.addEventListener("message", async (e) => {
 				break;
 			}
 
+			fullSettings = e.data.settings;
+
 			const {
 				lineWidth,
 				indentStyle,
@@ -302,6 +305,28 @@ self.addEventListener("message", async (e) => {
 				};
 			}
 
+			let fixed = {
+				code: "",
+			};
+			try {
+				fixed =
+					fileFeatures.features_supported.get("Lint") === "Supported"
+						? workspace.fixFile({
+								path,
+								only: [],
+								skip: [],
+								rule_categories: ["Lint"],
+								should_format: false,
+								fix_file_mode: fullSettings?.analyzerFixMode ?? "SafeFixes",
+							})
+						: { code: "Not supported" };
+			} catch (e) {
+				console.error(e);
+				fixed = {
+					code: "Can't apply fixes with errors",
+				};
+			}
+
 			const biomeOutput: BiomeOutput = {
 				syntax: {
 					// Replace 4 spaced indentation with 2
@@ -319,6 +344,7 @@ self.addEventListener("message", async (e) => {
 				},
 				analysis: {
 					controlFlowGraph,
+					fixed: fixed.code,
 				},
 				importSorting: {
 					code: importSorting.code,