feat(playground): implement option quote_properties
ADD
website/playground/src/QuotePropertiesSelect.tsx
+import { QuoteProperties } from "./types";
+
+interface Props {
+ setQuoteProperties: (v: QuoteProperties) => void;
+ quoteProperties: QuoteProperties;
+}
+
+export default function QuotePropertiesSelect({
+ setQuoteProperties,
+ quoteProperties,
+}: Props) {
+ return (
+ <div className="pl-5 pb-5">
+ <fieldset>
+ <legend className="sr-only">Quote Properties</legend>
+ <div className="relative flex items-start">
+ <div className="">
+ <label
+ htmlFor="quoteProperties"
+ className="block text-sm font-medium text-gray-700"
+ >
+ Quote Properties
+ </label>
+ <span id="quote-properties-description" className="text-gray-500">
+ <span className="sr-only">Quote Properties</span>
+ </span>
+ <select
+ id="quoteProperties"
+ aria-describedby="quote-properties-description"
+ name="quoteProperties"
+ value={quoteProperties ?? ""}
+ onChange={(e) =>
+ setQuoteProperties(e.target.value as QuoteProperties)}
+ className="w-[100px] mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
+ >
+ <option value={QuoteProperties.AsNeeded}>As needed</option>
+ <option value={QuoteProperties.Preserve}>Preserve</option>
+ </select>
+ </div>
+ </div>
+ </fieldset>
+ </div>
+ );
+}

MODIFY
website/playground/src/QuoteStyleSelect.tsx
website/playground/src/QuoteStyleSelect.tsx
@@ -7,23 +7,23 @@ interface Props {
export default function QuoteStyleSelect({ setQuoteStyle, quoteStyle }: Props) {
return (
- <div className="pl-5">
+ <div className="pl-5 pb-5">
<fieldset>
- <legend className="sr-only">File Type</legend>
+ <legend className="sr-only">Quote Style</legend>
<div className="relative flex items-start">
<div className="">
<label
htmlFor="quoteStyle"
className="block text-sm font-medium text-gray-700"
>
- Quote Type
+ Quote Style
</label>
- <span id="quote-type-description" className="text-gray-500">
- <span className="sr-only">Quote type</span>
+ <span id="quote-style-description" className="text-gray-500">
+ <span className="sr-only">Quote style</span>
</span>
<select
id="quoteStyle"
- aria-describedby="quote-type-description"
+ aria-describedby="quote-style-description"
name="quoteStyle"
value={quoteStyle ?? ""}
onChange={(e) => setQuoteStyle(e.target.value as QuoteStyle)}

MODIFY
website/playground/src/SettingsMenu.tsx
website/playground/src/SettingsMenu.tsx
@@ -5,6 +5,7 @@ import SourceTypeSelect from "./SourceTypeSelect";
import { PlaygroundSettings, PlaygroundState } from "./types";
import { Dispatch, SetStateAction } from "react";
import { createSetter } from "./utils";
+import QuotePropertiesSelect from "./QuotePropertiesSelect";
interface Props {
settings: PlaygroundSettings;
@@ -18,6 +19,7 @@ export function SettingsMenu({
indentWidth,
indentStyle,
quoteStyle,
+ quoteProperties,
sourceType,
isTypeScript,
isJsx,
@@ -42,6 +44,13 @@ export function SettingsMenu({
quoteStyle={quoteStyle}
setQuoteStyle={createSetter(setPlaygroundState, "quoteStyle")}
/>
+ <QuotePropertiesSelect
+ quoteProperties={quoteProperties}
+ setQuoteProperties={createSetter(
+ setPlaygroundState,
+ "quoteProperties",
+ )}
+ />
<SourceTypeSelect
isTypeScript={isTypeScript}
setIsTypeScript={createSetter(setPlaygroundState, "isTypeScript")}

MODIFY
website/playground/src/SourceTypeSelect.tsx
website/playground/src/SourceTypeSelect.tsx
@@ -18,7 +18,7 @@ export default function SourceTypeSelect({
sourceType,
}: Props) {
return (
- <div className="p-5 sm:pr-0 sm:pt-0">
+ <div className="pl-5 pb-5">
<fieldset className="flex items-center">
<legend className="sr-only">File Type</legend>
<div className="relative flex items-start">

MODIFY
website/playground/src/prettierWorker.ts
website/playground/src/prettierWorker.ts
@@ -9,6 +9,7 @@ self.addEventListener("message", (e) => {
indentStyle,
indentWidth,
quoteStyle,
+ quoteProperties,
isTypeScript,
} = e.data.playgroundState;
const prettierOutput = formatWithPrettier(code, {
@@ -17,6 +18,7 @@ self.addEventListener("message", (e) => {
indentWidth,
language: isTypeScript ? "ts" : "js",
quoteStyle,
+ quoteProperties,
});
self.postMessage({

MODIFY
website/playground/src/romeWorker.ts
website/playground/src/romeWorker.ts
@@ -10,6 +10,7 @@ import {
IndentStyle,
RomeOutput,
QuoteStyle,
+ QuoteProperties,
} from "./types";
let workspace: Workspace | null = null;
@@ -75,6 +76,7 @@ self.addEventListener("message", async (e) => {
indentStyle,
indentWidth,
quoteStyle,
+ quoteProperties,
isTypeScript,
isJsx,
sourceType,
@@ -98,6 +100,10 @@ self.addEventListener("message", async (e) => {
format: {
quote_style:
quoteStyle === QuoteStyle.Double ? "Double" : "Single",
+ quote_properties:
+ quoteProperties === QuoteProperties.Preserve
+ ? "Preserve"
+ : "AsNeeded",
},
},
},

MODIFY
website/playground/src/types.ts
website/playground/src/types.ts
@@ -13,6 +13,10 @@ export enum QuoteStyle {
Double = "double",
Single = "single",
}
+export enum QuoteProperties {
+ AsNeeded = "as-needed",
+ Preserve = "preserve",
+}
export enum LoadingState {
Loading,
Success,
@@ -34,6 +38,7 @@ export interface PlaygroundState {
indentStyle: IndentStyle;
indentWidth: number;
quoteStyle: QuoteStyle;
+ quoteProperties: QuoteProperties;
sourceType: SourceType;
isTypeScript: boolean;
isJsx: boolean;
@@ -50,6 +55,7 @@ export const defaultRomeConfig: RomeConfiguration = {
indentWidth: "2",
indentStyle: IndentStyle.Tab,
quoteStyle: QuoteStyle.Double,
+ quoteProperties: QuoteProperties.AsNeeded,
sourceType: SourceType.Module,
isTypeScript: false,
isJsx: false,
@@ -69,6 +75,7 @@ export type PlaygroundSettings = Pick<
| "indentWidth"
| "indentStyle"
| "quoteStyle"
+ | "quoteProperties"
| "sourceType"
| "isTypeScript"
| "isJsx"

MODIFY
website/playground/src/utils.ts
website/playground/src/utils.ts
import { Dispatch, SetStateAction, useEffect, useState } from "react";
-import prettier from "prettier";
+import prettier, { Options } from "prettier";
// @ts-ignore
import parserBabel from "prettier/esm/parser-babel";
import {
IndentStyle,
PlaygroundState,
QuoteStyle,
+ QuoteProperties,
RomeConfiguration,
SourceType,
} from "./types";
@@ -63,6 +64,9 @@ export function usePlaygroundState(
quoteStyle:
(searchParams.get("quoteStyle") as QuoteStyle) ??
defaultRomeConfig.quoteStyle,
+ quoteProperties:
+ (searchParams.get("quoteProperties") as QuoteProperties) ??
+ defaultRomeConfig.quoteProperties,
indentWidth: parseInt(
searchParams.get("indentWidth") ?? defaultRomeConfig.indentWidth,
),
@@ -122,16 +126,18 @@ export function formatWithPrettier(
indentWidth: number;
language: "js" | "ts";
quoteStyle: QuoteStyle;
+ quoteProperties: QuoteProperties;
},
): { code: string; ir: string } {
try {
- const prettierOptions = {
+ const prettierOptions: Options = {
useTabs: options.indentStyle === IndentStyle.Tab,
tabWidth: options.indentWidth,
printWidth: options.lineWidth,
parser: getPrettierParser(options.language),
plugins: [parserBabel],
singleQuote: options.quoteStyle === QuoteStyle.Single,
+ quoteProps: options.quoteProperties,
};
// @ts-ignore

feat(playground): implement option quote_properties (#3121)

Co-authored-by: Micha Reiser <micha@reiser.io>