fix(playground): Prettier TS formatting
Use `babel-typescript` in the playground when formatting a TypeScript file.
## Test
Verified that
```ts
export interface Class<T, Args extends any[] = ClassConstructorParams<T>> {
new(...args: Args): T,
prototype: T,
}
```
gets formatted with semicolon separators.
MODIFY
website/playground/package.json
website/playground/package.json
"build": "npm run build:wasm && npm run build:js",
"build:js": "tsc && vite build",
"build:wasm": "wasm-pack build --target web --release",
- "format": "cargo run -p rome_cli --release -- format ./src"
+ "format": "cargo run -p rome_cli --release -- format --write ./src"
},
"dependencies": {
"@uiw/react-textarea-code-editor": "^1.4.16",

MODIFY
website/playground/src/App.tsx
website/playground/src/App.tsx
@@ -15,7 +15,12 @@ enum LoadingState { Loading, Success, Error }
function formatWithPrettier(
code: string,
- options: { lineWidth: number, indentStyle: IndentStyle, indentWidth: number },
+ options: {
+ lineWidth: number,
+ indentStyle: IndentStyle,
+ indentWidth: number,
+ language: "js" | "ts",
+ },
) {
try {
return prettier.format(
@@ -24,7 +29,7 @@ function formatWithPrettier(
useTabs: options.indentStyle === IndentStyle.Tab,
tabWidth: options.indentWidth,
printWidth: options.lineWidth,
- parser: "babel",
+ parser: getPrettierParser(options.language),
plugins: [parserBabel],
},
);
@@ -33,6 +38,15 @@ function formatWithPrettier(
}
}
+function getPrettierParser(language: "js" | "ts"): string {
+ switch (language) {
+ case "js":
+ return "babel";
+ case "ts":
+ return "babel-ts";
+ }
+}
+
function getLanguage(isJsx: boolean, isTypeScript: boolean):
| "jsx"
| "typescript"
@@ -171,7 +185,7 @@ function App() {
<h1>Rome</h1>
<CodeEditor
value={formatted_code}
- language="js"
+ language={language}
placeholder="Rome Output"
style={{
fontSize: 12,
@@ -187,8 +201,9 @@ function App() {
lineWidth,
indentStyle,
indentWidth,
+ language: isTypeScript ? "ts" : "js"
})}
- language="js"
+ language={language}
placeholder="Prettier Output"
style={{
fontSize: 12,

fix(playground): Prettier TS formatting (#2368)

Use `babel-typescript` in the playground when formatting a TypeScript file.

## Test

Verified that

```ts
export interface Class<T, Args extends any[] = ClassConstructorParams<T>> {
	new(...args: Args): T,
	prototype: T,
}
```

gets formatted with semicolon separators.