Skip to content

Commit 9102b73

Browse files
y-schneiderfisker
y-schneider
and
fisker
authored
Add parentheses for decorator expressions (#16458)
Co-authored-by: fisker <[email protected]>
1 parent 6bbd461 commit 9102b73

6 files changed

Lines changed: 109 additions & 40 deletions

File tree

‎changelog_unreleased/typescript/16458.md‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
#### Add parentheses for decorator expressions (#16458 by @y-schneider)
2+
3+
Prevent parentheses around member expressions or tagged template literals from being removed to follow the stricter parsing rules of TypeScript 5.5.
4+
5+
<!-- prettier-ignore -->
6+
```ts
7+
// Input
8+
@(foo`tagged template`)
9+
class X {}
10+
11+
// Prettier stable
12+
@foo`tagged template`
13+
class X {}
14+
15+
// Prettier main
16+
@(foo`tagged template`)
17+
class X {}
18+
```

‎cspell.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -295,6 +295,7 @@
295295
"unaries",
296296
"uncook",
297297
"unparenthesised",
298+
"Unparenthesized",
298299
"Unrestrict",
299300
"upvoted",
300301
"upvotes",

‎src/language-js/needs-parens.js‎

Lines changed: 36 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -224,40 +224,10 @@ function needsParens(path, options) {
224224
);
225225

226226
case "Decorator":
227-
if (key === "expression") {
228-
if (isMemberExpression(node) && node.computed) {
229-
return true;
230-
}
231-
232-
let hasCallExpression = false;
233-
let hasMemberExpression = false;
234-
let current = node;
235-
while (current) {
236-
switch (current.type) {
237-
case "MemberExpression":
238-
hasMemberExpression = true;
239-
current = current.object;
240-
break;
241-
case "CallExpression":
242-
if (
243-
/** @(x().y) */ hasMemberExpression ||
244-
/** @(x().y()) */ hasCallExpression
245-
) {
246-
return options.parser !== "typescript";
247-
}
248-
hasCallExpression = true;
249-
current = current.callee;
250-
break;
251-
case "Identifier":
252-
return false;
253-
case "TaggedTemplateExpression":
254-
// babel-parser cannot parse
255-
// @foo`bar`
256-
return options.parser !== "typescript";
257-
default:
258-
return true;
259-
}
260-
}
227+
if (
228+
key === "expression" &&
229+
!canDecoratorExpressionUnparenthesized(node)
230+
) {
261231
return true;
262232
}
263233
break;
@@ -1276,4 +1246,36 @@ function shouldAddParenthesesToChainElement(path) {
12761246
return false;
12771247
}
12781248

1249+
function isDecoratorMemberExpression(node) {
1250+
if (node.type === "Identifier") {
1251+
return true;
1252+
}
1253+
1254+
if (isMemberExpression(node)) {
1255+
return (
1256+
!node.computed &&
1257+
!node.optional &&
1258+
node.property.type === "Identifier" &&
1259+
isDecoratorMemberExpression(node.object)
1260+
);
1261+
}
1262+
1263+
return false;
1264+
}
1265+
1266+
// Based on babel implementation
1267+
// https://github.com/nicolo-ribaudo/babel/blob/c4b88a4e5005364255f7e964fe324cf7bfdfb019/packages/babel-generator/src/node/index.ts#L111
1268+
function canDecoratorExpressionUnparenthesized(node) {
1269+
if (node.type === "ChainExpression") {
1270+
node = node.expression;
1271+
}
1272+
1273+
return (
1274+
isDecoratorMemberExpression(node) ||
1275+
(isCallExpression(node) &&
1276+
!node.optional &&
1277+
isDecoratorMemberExpression(node.callee))
1278+
);
1279+
}
1280+
12791281
export default needsParens;

‎tests/format/js/decorators/__snapshots__/format.test.js.snap‎

Lines changed: 34 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -176,7 +176,7 @@ exports[`member-expression.js [acorn] format 1`] = `
176176
"Unexpected character '@' (3:5)
177177
1 | [
178178
2 | class {
179-
> 3 | @(decorators[0])
179+
> 3 | @(decorator)
180180
| ^
181181
4 | method() {}
182182
5 | },
@@ -188,7 +188,7 @@ exports[`member-expression.js [espree] format 1`] = `
188188
"Unexpected character '@' (3:5)
189189
1 | [
190190
2 | class {
191-
> 3 | @(decorators[0])
191+
> 3 | @(decorator)
192192
| ^
193193
4 | method() {}
194194
5 | },
@@ -203,6 +203,18 @@ printWidth: 80
203203
| printWidth
204204
=====================================input======================================
205205
[
206+
class {
207+
@(decorator)
208+
method() {}
209+
},
210+
class {
211+
@(decorator())
212+
method() {}
213+
},
214+
class {
215+
@(decorator?.())
216+
method() {}
217+
},
206218
class {
207219
@(decorators[0])
208220
method() {}
@@ -223,6 +235,10 @@ printWidth: 80
223235
@(decorators?.at(0))
224236
method() {}
225237
},
238+
class {
239+
@(decorators.at?.(0))
240+
method() {}
241+
},
226242
class {
227243
@(decorators.first)
228244
method() {}
@@ -255,6 +271,18 @@ printWidth: 80
255271
256272
=====================================output=====================================
257273
[
274+
class {
275+
@decorator
276+
method() {}
277+
},
278+
class {
279+
@decorator()
280+
method() {}
281+
},
282+
class {
283+
@(decorator?.())
284+
method() {}
285+
},
258286
class {
259287
@(decorators[0])
260288
method() {}
@@ -275,6 +303,10 @@ printWidth: 80
275303
@(decorators?.at(0))
276304
method() {}
277305
},
306+
class {
307+
@(decorators.at?.(0))
308+
method() {}
309+
},
278310
class {
279311
@decorators.first
280312
method() {}

‎tests/format/js/decorators/member-expression.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,16 @@
11
[
2+
class {
3+
@(decorator)
4+
method() {}
5+
},
6+
class {
7+
@(decorator())
8+
method() {}
9+
},
10+
class {
11+
@(decorator?.())
12+
method() {}
13+
},
214
class {
315
@(decorators[0])
416
method() {}
@@ -19,6 +31,10 @@
1931
@(decorators?.at(0))
2032
method() {}
2133
},
34+
class {
35+
@(decorators.at?.(0))
36+
method() {}
37+
},
2238
class {
2339
@(decorators.first)
2440
method() {}

‎tests/format/misc/typescript-only/__snapshots__/format.test.js.snap‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -301,7 +301,7 @@ semi: false
301301
class X {}
302302
303303
=====================================output=====================================
304-
@test().x("global").y()
304+
@(test().x("global").y())
305305
class X {}
306306
307307
================================================================================
@@ -317,7 +317,7 @@ printWidth: 80
317317
class X {}
318318
319319
=====================================output=====================================
320-
@test().x("global").y()
320+
@(test().x("global").y())
321321
class X {}
322322
323323
================================================================================
@@ -337,7 +337,7 @@ class Test {
337337
338338
=====================================output=====================================
339339
class Test {
340-
@foo\`bar\`
340+
@(foo\`bar\`)
341341
text: string = "text"
342342
}
343343
@@ -357,7 +357,7 @@ class Test {
357357
358358
=====================================output=====================================
359359
class Test {
360-
@foo\`bar\`
360+
@(foo\`bar\`)
361361
text: string = "text";
362362
}
363363

0 commit comments

Comments
 (0)