Skip to content

Commit

Permalink
fix(playground): Prettier TS formatting (rome#2368)
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
MichaReiser authored Apr 7, 2022
1 parent b4e6d26 commit 403bd49
Show file tree
Hide file tree
Showing 2 changed files with 20 additions and 5 deletions.
2 changes: 1 addition & 1 deletion website/playground/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
"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",
Expand Down
23 changes: 19 additions & 4 deletions website/playground/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand All @@ -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],
},
);
Expand All @@ -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"
Expand Down Expand Up @@ -171,7 +185,7 @@ function App() {
<h1>Rome</h1>
<CodeEditor
value={formatted_code}
language="js"
language={language}
placeholder="Rome Output"
style={{
fontSize: 12,
Expand All @@ -187,8 +201,9 @@ function App() {
lineWidth,
indentStyle,
indentWidth,
language: isTypeScript ? "ts" : "js"
})}
language="js"
language={language}
placeholder="Prettier Output"
style={{
fontSize: 12,
Expand Down

0 comments on commit 403bd49

Please sign in to comment.