js packages/changelog/etc

CHANGELOG.md

@@ -83,6 +83,10 @@ Read our [guidelines for writing a good changelog entry](https://github.com/biom
 
 ### Formatter
 
+#### New Features
+
+- Added a new option called `--bracket-spacing` to the formatter. This option allows you to control whether spaces are inserted around the brackets of object literals. [#627](https://github.com/rome/tools/issues/627)
+
 #### Bug fixes
 
 - Apply the correct layout when the right hand of an assignment expression is a await expression or a yield expression. Contributed by @ematipico

website/src/content/docs/internals/changelog.mdx

@@ -89,6 +89,10 @@ Read our [guidelines for writing a good changelog entry](https://github.com/biom
 
 ### Formatter
 
+#### New Features
+
+- Added a new option called `--bracket-spacing` to the formatter. This option allows you to control whether spaces are inserted around the brackets of object literals. [#627](https://github.com/rome/tools/issues/627)
+
 #### Bug fixes
 
 - Apply the correct layout when the right hand of an assignment expression is a await expression or a yield expression. Contributed by @ematipico

website/src/playground/PlaygroundLoader.tsx

@@ -335,6 +335,9 @@ function initState(
 			arrowParentheses:
 				(searchParams.get("arrowParentheses") as ArrowParentheses) ??
 				defaultPlaygroundState.settings.arrowParentheses,
+			bracketSpacing:
+				(searchParams.get("bracketSpacing") === "true") ??
+				defaultPlaygroundState.settings.bracketSpacing,
 			lintRules:
 				(searchParams.get("lintRules") as LintRules) ??
 				defaultPlaygroundState.settings.lintRules,

website/src/playground/tabs/SettingsTab.tsx

@@ -45,6 +45,7 @@ export default function SettingsTab({
 			trailingComma,
 			semicolons,
 			arrowParentheses,
+			bracketSpacing,
 			lintRules,
 			enabledLinting,
 			importSortingEnabled,
@@ -89,6 +90,10 @@ export default function SettingsTab({
 		setPlaygroundState,
 		"arrowParentheses",
 	);
+	const setBracketSpacing = createPlaygroundSettingsSetter(
+		setPlaygroundState,
+		"bracketSpacing",
+	);
 	const setLintRules = createPlaygroundSettingsSetter(
 		setPlaygroundState,
 		"lintRules",
@@ -252,6 +257,8 @@ export default function SettingsTab({
 				setSemicolons={setSemicolons}
 				arrowParentheses={arrowParentheses}
 				setArrowParentheses={setArrowParentheses}
+				bracketSpacing={bracketSpacing}
+				setBracketSpacing={setBracketSpacing}
 			/>
 			<LinterSettings
 				lintRules={lintRules}
@@ -581,6 +588,8 @@ function FormatterSettings({
 	setSemicolons,
 	arrowParentheses,
 	setArrowParentheses,
+	bracketSpacing,
+	setBracketSpacing,
 }: {
 	lineWidth: number;
 	setLineWidth: (value: number) => void;
@@ -600,6 +609,8 @@ function FormatterSettings({
 	setSemicolons: (value: Semicolons) => void;
 	arrowParentheses: ArrowParentheses;
 	setArrowParentheses: (value: ArrowParentheses) => void;
+	bracketSpacing: boolean;
+	setBracketSpacing: (value: boolean) => void;
 }) {
 	return (
 		<>
@@ -717,6 +728,18 @@ function FormatterSettings({
 						<option value={ArrowParentheses.AsNeeded}>As needed</option>
 					</select>
 				</div>
+				<div className="field-row">
+					<label htmlFor="bracketSpacing">Bracket Spacing</label>
+					<input
+						id="bracketSpacing"
+						name="bracketSpacing"
+						type="checkbox"
+						checked={bracketSpacing}
+						onChange={(e) =>
+							setBracketSpacing(e.target.checked)
+						}
+					/>
+				</div>
 			</section>
 		</>
 	);

website/src/playground/types.ts

@@ -113,6 +113,7 @@ export interface PlaygroundSettings {
 	trailingComma: TrailingComma;
 	semicolons: Semicolons;
 	arrowParentheses: ArrowParentheses;
+	bracketSpacing: boolean;
 	lintRules: LintRules;
 	enabledLinting: boolean;
 	importSortingEnabled: boolean;
@@ -157,6 +158,7 @@ export const defaultPlaygroundState: PlaygroundState = {
 		trailingComma: TrailingComma.All,
 		semicolons: Semicolons.Always,
 		arrowParentheses: ArrowParentheses.Always,
+		bracketSpacing: true,
 		lintRules: LintRules.Recommended,
 		enabledLinting: true,
 		importSortingEnabled: true,

website/src/playground/workers/biomeWorker.ts

@@ -73,6 +73,7 @@ self.addEventListener("message", async (e) => {
 				trailingComma,
 				semicolons,
 				arrowParentheses,
+				bracketSpacing,
 				importSortingEnabled,
 				unsafeParameterDecoratorsEnabled,
 				allowComments,
@@ -111,6 +112,7 @@ self.addEventListener("message", async (e) => {
 							arrowParentheses === ArrowParentheses.Always
 								? "always"
 								: "asNeeded",
+						bracketSpacing,
 					},
 					parser: {
 						unsafeParameterDecoratorsEnabled,

website/src/playground/workers/prettierWorker.ts

@@ -37,6 +37,7 @@ self.addEventListener("message", async (e) => {
 				trailingComma,
 				semicolons,
 				arrowParentheses,
+				bracketSpacing,
 			} = settings;
 			const code = e.data.code as string;
 			const filename = e.data.filename as string;
@@ -52,6 +53,7 @@ self.addEventListener("message", async (e) => {
 				trailingComma,
 				semicolons,
 				arrowParentheses,
+				bracketSpacing,
 			});
 
 			self.postMessage({
@@ -81,6 +83,7 @@ async function formatWithPrettier(
 		trailingComma: TrailingComma;
 		semicolons: Semicolons;
 		arrowParentheses: ArrowParentheses;
+		bracketSpacing: boolean;
 	},
 ): Promise<PrettierOutput> {
 	try {
@@ -100,6 +103,7 @@ async function formatWithPrettier(
 				options.arrowParentheses === ArrowParentheses.Always
 					? "always"
 					: "avoid",
+			bracketSpacing: options.bracketSpacing,
 		};
 
 		// @ts-expect-error