feat(playground): remove import sorting tab, rename import sorting to assist, add rule domains

src/playground/Playground.tsx

@@ -8,7 +8,6 @@ import DiagnosticsConsoleTab from "@/playground/tabs/DiagnosticsConsoleTab";
 import DiagnosticsListTab from "@/playground/tabs/DiagnosticsListTab";
 import FormatterCodeTab from "@/playground/tabs/FormatterCodeTab";
 import FormatterIrTab from "@/playground/tabs/FormatterIrTab";
-import ImportSortingTab from "@/playground/tabs/ImportSortingTab";
 import SettingsTab from "@/playground/tabs/SettingsTab";
 import SyntaxTab from "@/playground/tabs/SyntaxTab";
 import {
@@ -270,16 +269,6 @@ export default function Playground({
 						<ControlFlowTab graph={biomeOutput.analysis.controlFlowGraph} />
 					),
 				},
-				{
-					key: PlaygroundTab.ImportSorting,
-					title: "Import Sorting",
-					children: (
-						<ImportSortingTab
-							code={biomeOutput.importSorting.code}
-							extensions={codeMirrorExtensions}
-						/>
-					),
-				},
 				{
 					key: PlaygroundTab.Console,
 					title: "Console",

src/playground/PlaygroundLoader.tsx

@@ -28,6 +28,7 @@ import {
 	isTypeScriptFilename,
 	normalizeFilename,
 } from "@/playground/utils";
+import type { FixFileMode } from "@biomejs/wasm-web";
 import {
 	type Dispatch,
 	type SetStateAction,
@@ -355,9 +356,12 @@ function initState(
 			enabledLinting:
 				searchParams.get("enabledLinting") === "true" ||
 				defaultPlaygroundState.settings.enabledLinting,
-			importSortingEnabled:
-				searchParams.get("importSortingEnabled") === "true" ||
-				defaultPlaygroundState.settings.importSortingEnabled,
+			enabledAssist:
+				searchParams.get("enabledAssist") === "true" ||
+				defaultPlaygroundState.settings.enabledAssist,
+			analyzerFixMode:
+				(searchParams.get("analyzerFixMode") as FixFileMode) ||
+				defaultPlaygroundState.settings.analyzerFixMode,
 			unsafeParameterDecoratorsEnabled:
 				searchParams.get("unsafeParameterDecoratorsEnabled") === "true" ||
 				defaultPlaygroundState.settings.unsafeParameterDecoratorsEnabled,

src/playground/tabs/SettingsTab.tsx

@@ -20,7 +20,11 @@ import {
 	modifyFilename,
 	normalizeFilename,
 } from "@/playground/utils";
-import type { FixFileMode } from "@biomejs/wasm-web";
+import type {
+	FixFileMode,
+	RuleDomain,
+	RuleDomainValue,
+} from "@biomejs/wasm-web";
 import type { Dispatch, SetStateAction } from "react";
 import type React from "react";
 import { useState } from "react";
@@ -53,10 +57,11 @@ export default function SettingsTab({
 			lintRules,
 			enabledLinting,
 			analyzerFixMode,
-			importSortingEnabled,
+			enabledAssist,
 			unsafeParameterDecoratorsEnabled,
 			allowComments,
 			attributePosition,
+			ruleDomains,
 		},
 	},
 }: SettingsTabProps) {
@@ -121,9 +126,9 @@ export default function SettingsTab({
 		"analyzerFixMode",
 	);
 
-	const setImportSorting = createPlaygroundSettingsSetter(
+	const setEnabledAssist = createPlaygroundSettingsSetter(
 		setPlaygroundState,
-		"importSortingEnabled",
+		"enabledAssist",
 	);
 
 	const setUnsafeParameterDecoratorsEnabled = createPlaygroundSettingsSetter(
@@ -135,6 +140,11 @@ export default function SettingsTab({
 		"allowComments",
 	);
 
+	const setRuleDomains = createPlaygroundSettingsSetter(
+		setPlaygroundState,
+		"ruleDomains",
+	);
+
 	function setCurrentFilename(newFilename: string) {
 		setPlaygroundState((state) => {
 			if (state.currentFile === newFilename) {
@@ -290,10 +300,12 @@ export default function SettingsTab({
 				setEnabledLinting={setEnabledLinting}
 				analyzerFixMode={analyzerFixMode}
 				setAnalyzerFixMode={setAnalyzerFixMode}
+				ruleDomains={ruleDomains}
+				setRuleDomains={setRuleDomains}
 			/>
-			<ImportSortingSettings
-				importSortingEnabled={importSortingEnabled}
-				setImportSorting={setImportSorting}
+			<AssistSettings
+				enabledAssist={enabledAssist}
+				setEnabledAssist={setEnabledAssist}
 			/>
 			<SyntaxSettings
 				filename={currentFile}
@@ -809,14 +821,40 @@ function LinterSettings({
 	setEnabledLinting,
 	analyzerFixMode,
 	setAnalyzerFixMode,
+	ruleDomains,
+	setRuleDomains,
 }: {
 	lintRules: LintRules;
 	setLintRules: (value: LintRules) => void;
 	enabledLinting: boolean;
 	setEnabledLinting: (value: boolean) => void;
 	analyzerFixMode: FixFileMode;
 	setAnalyzerFixMode: (value: FixFileMode) => void;
+	ruleDomains: Record<RuleDomain, RuleDomainValue>;
+	setRuleDomains: (value: Record<RuleDomain, RuleDomainValue>) => void;
 }) {
+	const updateDomain = (domain: RuleDomain, value: RuleDomainValue) => {
+		setRuleDomains({
+			...ruleDomains,
+			[domain]: value,
+		});
+	};
+	if (ruleDomains === undefined) {
+		ruleDomains = {};
+	}
+
+	const domainConfigs: Array<{
+		id: RuleDomain;
+		label: string;
+	}> = [
+		{ id: "react", label: "React Rules" },
+		{ id: "test", label: "Test Rules" },
+		{ id: "solid", label: "Solid Rules" },
+		{ id: "next", label: "Next.js Rules" },
+	];
+
+	const domainValues: RuleDomainValue[] = ["all", "recommended", "none"];
+
 	return (
 		<>
 			<h2>Linter options</h2>
@@ -831,6 +869,7 @@ function LinterSettings({
 					/>
 					<label htmlFor="linting-enabled">Linter enabled</label>
 				</div>
+
 				<div className="field-row">
 					<label htmlFor="lint-rules">Lint Rules</label>
 					<select
@@ -860,31 +899,52 @@ function LinterSettings({
 						<option value={"applySuppressions"}>Apply Suppressions</option>
 					</select>
 				</div>
+
+				<h3>Domains</h3>
+				{domainConfigs.map(({ id, label }) => (
+					<div key={id} className="field-row">
+						<label htmlFor={`${id}-domain`}>{label}</label>
+						<select
+							id={`${id}-domain`}
+							value={ruleDomains[id] ?? "none"}
+							onChange={(e) =>
+								updateDomain(id, e.target.value as RuleDomainValue)
+							}
+							disabled={!enabledLinting}
+						>
+							{domainValues.map((value) => (
+								<option key={value} value={value}>
+									{value.charAt(0).toUpperCase() + value.slice(1)}
+								</option>
+							))}
+						</select>
+					</div>
+				))}
 			</section>
 		</>
 	);
 }
 
-export function ImportSortingSettings({
-	importSortingEnabled,
-	setImportSorting,
+export function AssistSettings({
+	enabledAssist,
+	setEnabledAssist,
 }: {
-	importSortingEnabled: boolean;
-	setImportSorting: (value: boolean) => void;
+	enabledAssist: boolean;
+	setEnabledAssist: (value: boolean) => void;
 }) {
 	return (
 		<>
-			<h2>Import sorting options</h2>
+			<h2>Assist options</h2>
 			<section>
 				<div className="field-row">
 					<input
-						id="import-sorting-enabled"
-						name="import-sorting-enabled"
+						id="assist-enabled"
+						name="assist-enabled"
 						type="checkbox"
-						checked={importSortingEnabled}
-						onChange={(e) => setImportSorting(e.target.checked)}
+						checked={enabledAssist}
+						onChange={(e) => setEnabledAssist(e.target.checked)}
 					/>
-					<label htmlFor="import-sorting-enabled">Import sorting enabled</label>
+					<label htmlFor="assist-enabled">Assists enabled</label>
 				</div>
 			</section>
 		</>

src/playground/types.ts

@@ -1,4 +1,9 @@
-import type { Diagnostic, FixFileMode } from "@biomejs/wasm-web";
+import type {
+	Diagnostic,
+	FixFileMode,
+	RuleDomain,
+	RuleDomainValue,
+} from "@biomejs/wasm-web";
 import type { parser } from "codemirror-lang-rome-ast";
 import type { Dispatch, SetStateAction } from "react";
 
@@ -96,9 +101,6 @@ export interface BiomeOutput {
 		/** The snippet with lint fixes applied. */
 		fixed: string;
 	};
-	importSorting: {
-		code: string;
-	};
 }
 
 export const emptyBiomeOutput: BiomeOutput = {
@@ -118,9 +120,6 @@ export const emptyBiomeOutput: BiomeOutput = {
 		controlFlowGraph: "",
 		fixed: "",
 	},
-	importSorting: {
-		code: "",
-	},
 };
 
 export interface PlaygroundSettings {
@@ -139,9 +138,10 @@ export interface PlaygroundSettings {
 	lintRules: LintRules;
 	enabledLinting: boolean;
 	analyzerFixMode: FixFileMode;
-	importSortingEnabled: boolean;
+	enabledAssist: boolean;
 	unsafeParameterDecoratorsEnabled: boolean;
 	allowComments: boolean;
+	ruleDomains: Record<RuleDomain, RuleDomainValue>;
 }
 
 export interface PlaygroundFileState {
@@ -187,9 +187,10 @@ export const defaultPlaygroundState: PlaygroundState = {
 		lintRules: LintRules.Recommended,
 		enabledLinting: true,
 		analyzerFixMode: "safeFixes",
-		importSortingEnabled: true,
+		enabledAssist: true,
 		unsafeParameterDecoratorsEnabled: true,
 		allowComments: true,
+		ruleDomains: {},
 	},
 };
 

src/playground/workers/biomeWorker.ts

@@ -88,10 +88,11 @@ self.addEventListener("message", async (e) => {
 				arrowParentheses,
 				bracketSpacing,
 				bracketSameLine,
-				importSortingEnabled,
+				enabledAssist,
 				unsafeParameterDecoratorsEnabled,
 				allowComments,
 				attributePosition,
+				ruleDomains,
 			} = e.data.settings as PlaygroundSettings;
 
 			configuration = {
@@ -107,10 +108,11 @@ self.addEventListener("message", async (e) => {
 
 				linter: {
 					enabled: enabledLinting,
+					domains: ruleDomains,
 				},
 
 				assist: {
-					enabled: importSortingEnabled,
+					enabled: enabledAssist,
 				},
 
 				javascript: {
@@ -165,12 +167,16 @@ self.addEventListener("message", async (e) => {
 					break;
 				}
 				case LintRules.All: {
-					// temporary until we update the UI to be able to select rules better.
-					configuration.linter!.domains = {
-						test: "all",
-						react: "all",
-						solid: "all",
-						next: "all",
+					// TODO: not entirely sure what to do here now that we have rule domains, and no longer have a single "all" option
+					configuration.linter!.rules = {
+						a11y: "on",
+						nursery: "on",
+						complexity: "on",
+						correctness: "on",
+						performance: "on",
+						security: "on",
+						style: "on",
+						suspicious: "on",
 					};
 					break;
 				}
@@ -275,10 +281,6 @@ self.addEventListener("message", async (e) => {
 				formatterIr = "Can't format";
 			}
 
-			const importSorting = {
-				code: "Moved to Analyzer Fixes tab",
-			};
-
 			const categories: RuleCategories = [];
 			if (configuration?.formatter?.enabled) {
 				categories.push("syntax");
@@ -363,9 +365,6 @@ self.addEventListener("message", async (e) => {
 					controlFlowGraph,
 					fixed: fixed.code,
 				},
-				importSorting: {
-					code: importSorting.code,
-				},
 			};
 
 			self.postMessage({