diff --git a/src/playground/Playground.tsx b/src/playground/Playground.tsx index 7b6afdee7..76fe9a953 100644 --- a/src/playground/Playground.tsx +++ b/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: ( + + ), + }, { key: PlaygroundTab.Syntax, title: "Syntax", diff --git a/src/playground/tabs/AnalyzerFixesTab.tsx b/src/playground/tabs/AnalyzerFixesTab.tsx new file mode 100644 index 000000000..5a49f8f2d --- /dev/null +++ b/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 ( + + ); +} diff --git a/src/playground/tabs/SettingsTab.tsx b/src/playground/tabs/SettingsTab.tsx index 2b7238aa9..e0625f0a9 100644 --- a/src/playground/tabs/SettingsTab.tsx +++ b/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} /> void; enabledLinting: boolean; setEnabledLinting: (value: boolean) => void; + analyzerFixMode: FixFileMode; + setAnalyzerFixMode: (value: FixFileMode) => void; }) { return ( <> @@ -833,6 +845,21 @@ function LinterSettings({ +
+ + +
); diff --git a/src/playground/types.ts b/src/playground/types.ts index 39cbcd185..64cb1ce3d 100644 --- a/src/playground/types.ts +++ b/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, diff --git a/src/playground/workers/biomeWorker.ts b/src/playground/workers/biomeWorker.ts index f271f3f79..dffc44507 100644 --- a/src/playground/workers/biomeWorker.ts +++ b/src/playground/workers/biomeWorker.ts @@ -31,6 +31,7 @@ type File = { const files: Map = 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,