3.3 blog post (#16332)
This commit is contained in:
SUZUKI Sosuke authored and GitHub committed
1 parent
2406fee590
commit
fb732fa7bb
2 files changed
+438
No files matched your search
@@ -0,0 +1,9 @@
|
||||
---
|
||||
author: "Sosuke Suzuki (@sosukesuzuki)"
|
||||
authorURL: "https://github.com/sosukesuzuki"
|
||||
title: "Prettier 3.3: New Flow features and a lot of bug fixes"
|
||||
---
|
||||
|
||||
This release includes support for new Flow features such as component and hook declarations. All of these features were implemented by the engineers on the Flow team, thank you.
|
||||
|
||||
If you appreciate Prettier and would like to support our work, please consider sponsoring us directly via [our OpenCollective](https://opencollective.com/prettier) or by sponsoring the projects we depend on, such as [typescript-eslint](https://opencollective.com/typescript-eslint), [remark](https://opencollective.com/unified), and [Babel](https://opencollective.com/babel). Thank you for your continued support!
|
||||
@@ -0,0 +1,429 @@
|
||||
---
|
||||
author: "Sosuke Suzuki (@sosukesuzuki)"
|
||||
authorURL: "https://github.com/sosukesuzuki"
|
||||
title: "Prettier 3.3: New Flow features and a lot of bug fixes"
|
||||
---
|
||||
|
||||
This release includes support for new Flow features such as component and hook declarations. All of these features were implemented by the engineers on the Flow team, thank you.
|
||||
|
||||
If you appreciate Prettier and would like to support our work, please consider sponsoring us directly via [our OpenCollective](https://opencollective.com/prettier) or by sponsoring the projects we depend on, such as [typescript-eslint](https://opencollective.com/typescript-eslint), [remark](https://opencollective.com/unified), and [Babel](https://opencollective.com/babel). Thank you for your continued support!
|
||||
|
||||
<!-- truncate -->
|
||||
|
||||
## Highlights
|
||||
|
||||
### Flow
|
||||
|
||||
#### `declare namespace` printing support ([#16066](https://github.com/prettier/prettier/pull/16066) by [@SamChou19815](https://github.com/SamChou19815))
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```jsx
|
||||
// Input
|
||||
declare namespace foo {
|
||||
declare var bar: string;
|
||||
}
|
||||
|
||||
// Prettier 3.2
|
||||
// does not parse
|
||||
|
||||
// Prettier 3.3
|
||||
declare namespace foo {
|
||||
declare var bar: string;
|
||||
}
|
||||
```
|
||||
|
||||
#### Component syntax printing support ([#16191](https://github.com/prettier/prettier/pull/16191) by [@SamChou19815](https://github.com/SamChou19815))
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```jsx
|
||||
// Input
|
||||
component MyComponent(a: string, b: number) renders SomeComponent {
|
||||
return <OtherComponent />;
|
||||
}
|
||||
hook useMyHook(a: string) {
|
||||
return useState(a);
|
||||
}
|
||||
|
||||
// Prettier 3.2
|
||||
// does not parse
|
||||
|
||||
// Prettier 3.3
|
||||
component MyComponent(a: string, b: number) renders SomeComponent {
|
||||
return <OtherComponent />;
|
||||
}
|
||||
hook useMyHook(a: string) {
|
||||
return useState(a);
|
||||
}
|
||||
```
|
||||
|
||||
#### Support big int Enums ([#16268](https://github.com/prettier/prettier/pull/16268) by [@gkz](https://github.com/gkz))
|
||||
|
||||
Adds support for big int [Flow Enums](https://flow.org/en/docs/enums/).
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```jsx
|
||||
// Input
|
||||
enum E {
|
||||
A = 0n,
|
||||
B = 1n,
|
||||
}
|
||||
|
||||
// Prettier 3.2
|
||||
// error
|
||||
|
||||
// Prettier 3.3
|
||||
enum E {
|
||||
A = 0n,
|
||||
B = 1n,
|
||||
}
|
||||
```
|
||||
|
||||
#### Support inexact tuple types ([#16271](https://github.com/prettier/prettier/pull/16271) by [@gkz](https://github.com/gkz))
|
||||
|
||||
Adds support for Flow's inexact tuple types.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```jsx
|
||||
// Input
|
||||
type T = [number, ...];
|
||||
|
||||
// Prettier 3.2
|
||||
type T = [number];
|
||||
|
||||
// Prettier 3.3
|
||||
type T = [number, ...];
|
||||
```
|
||||
|
||||
#### Support 'implies' type guard variant ([#16272](https://github.com/prettier/prettier/pull/16272) by [@gkz](https://github.com/gkz))
|
||||
|
||||
Adds support for Flow's `implies` type guard variant. Also updates the `flow-parser` dependency.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```jsx
|
||||
// Input
|
||||
declare function f(x: mixed): implies x is T;
|
||||
|
||||
// Prettier 3.2
|
||||
// error
|
||||
|
||||
// Prettier 3.3
|
||||
declare function f(x: mixed): implies x is T;
|
||||
```
|
||||
|
||||
## Other Changes
|
||||
|
||||
### JavaScript
|
||||
|
||||
#### Unquote keys in import attributes ([#15888](https://github.com/prettier/prettier/pull/15888) by [@sosukesuzuki](https://github.com/sosukesuzuki))
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```jsx
|
||||
// Input
|
||||
import json from "./mod.json" with { "type": "json" };
|
||||
|
||||
// Prettier 3.2
|
||||
import json from "./mod.json" with { "type": "json" };
|
||||
|
||||
// Prettier 3.3
|
||||
import json from "./mod.json" with { type: "json" };
|
||||
```
|
||||
|
||||
#### Fix unstable object print ([#16058](https://github.com/prettier/prettier/pull/16058) by [@fisker](https://github.com/fisker))
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```jsx
|
||||
// Input
|
||||
a = {"\a": 1, "b": 2}
|
||||
|
||||
// Prettier 3.2 (--quote-props consistent)
|
||||
a = { "a": 1, "b": 2 };
|
||||
|
||||
// Prettier 3.2 (--quote-props as-needed)
|
||||
a = { "a": 1, b: 2 };
|
||||
|
||||
// Prettier 3.3
|
||||
a = { a: 1, b: 2 };
|
||||
```
|
||||
|
||||
#### Format embedded GQL in template literal statements ([#16064](https://github.com/prettier/prettier/pull/16064) by [@keithlayne](https://github.com/keithlayne))
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```jsx
|
||||
// Input
|
||||
/* GraphQL */ `
|
||||
query foo { id }
|
||||
`;
|
||||
|
||||
// Prettier 3.2
|
||||
/* GraphQL */ `
|
||||
query foo { id }
|
||||
`;
|
||||
|
||||
// Prettier 3.3
|
||||
/* GraphQL */ `
|
||||
query foo {
|
||||
id
|
||||
}
|
||||
`;
|
||||
```
|
||||
|
||||
#### Improve formatting of React `useImperativeHandle` hook ([#16070](https://github.com/prettier/prettier/pull/16070) by [@Jaswanth-Sriram-Veturi](https://github.com/Jaswanth-Sriram-Veturi))
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```jsx
|
||||
// Input
|
||||
useImperativeHandle(ref, () => {
|
||||
/* Function body */
|
||||
}, []);
|
||||
|
||||
// Prettier 3.2
|
||||
useImperativeHandle(
|
||||
ref,
|
||||
() => {
|
||||
/* Function body */
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
// Prettier 3.3
|
||||
useImperativeHandle(ref, () => {
|
||||
/* Function body */
|
||||
}, []);
|
||||
```
|
||||
|
||||
#### Allow linebreaks in member expressions in template interpolations ([#16116](https://github.com/prettier/prettier/pull/16116) by [@bakkot](https://github.com/bakkot))
|
||||
|
||||
When there is already a linebreak in a template interpolation, allow it to stay there even if it is a member expression. Note that (as of [#15209](https://github.com/prettier/prettier/pull/15209)) Prettier will not insert a linebreak inside an interpolation when one is not already present.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```jsx
|
||||
// Input
|
||||
`template with ${
|
||||
very.very.very.very.very.very.very.very.very.very.very.long.chain
|
||||
}`;
|
||||
|
||||
// Prettier 3.2
|
||||
`template with ${very.very.very.very.very.very.very.very.very.very.very.long.chain}`;
|
||||
|
||||
// Prettier 3.3
|
||||
`template with ${
|
||||
very.very.very.very.very.very.very.very.very.very.very.long.chain
|
||||
}`;
|
||||
```
|
||||
|
||||
#### Fix dynamic import when the module source is a template string ([#16267](https://github.com/prettier/prettier/pull/16267) by [@fisker](https://github.com/fisker))
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```jsx
|
||||
// Input
|
||||
const module = await import(`data:text/javascript,
|
||||
console.log("RUN");
|
||||
`);
|
||||
|
||||
// Prettier 3.2
|
||||
const module = await (`data:text/javascript,
|
||||
console.log("RUN");
|
||||
`);
|
||||
|
||||
// Prettier 3.3
|
||||
const module = await import(`data:text/javascript,
|
||||
console.log("RUN");
|
||||
`);
|
||||
```
|
||||
|
||||
### TypeScript
|
||||
|
||||
#### Add missing parentheses to `TSInferType` ([#16031](https://github.com/prettier/prettier/pull/16031) by [@fisker](https://github.com/fisker))
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```jsx
|
||||
// Input
|
||||
type Foo<T> = T extends (infer U extends number) | { a: infer U extends number }
|
||||
? U
|
||||
: never;
|
||||
|
||||
// Prettier 3.2
|
||||
type Foo<T> = T extends infer U extends number | { a: infer U extends number }
|
||||
? U
|
||||
: never;
|
||||
|
||||
// Prettier 3.3
|
||||
type Foo<T> = T extends (infer U extends number) | { a: infer U extends number }
|
||||
? U
|
||||
: never;
|
||||
```
|
||||
|
||||
#### Throw errors for duplicated accessibility modifiers ([#16040](https://github.com/prettier/prettier/pull/16040) by [@fisker](https://github.com/fisker), [@auvred](https://github.com/auvred))
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```jsx
|
||||
// Input
|
||||
class Foo {
|
||||
public public bar() {};
|
||||
}
|
||||
|
||||
// Prettier 3.2
|
||||
class Foo {
|
||||
public bar() {}
|
||||
}
|
||||
|
||||
// Prettier 3.3
|
||||
SyntaxError: Accessibility modifier already seen. (2:10)
|
||||
1 | class Foo {
|
||||
> 2 | public public bar() {};
|
||||
| ^^^^^^
|
||||
3 | }
|
||||
```
|
||||
|
||||
#### Respect `--no-semi` for readonly class field ([#16133](https://github.com/prettier/prettier/pull/16133) by [@sxzz](https://github.com/sxzz))
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```tsx
|
||||
// Input
|
||||
class A {
|
||||
field
|
||||
readonly [expr] = true
|
||||
}
|
||||
|
||||
// Prettier 3.2
|
||||
class A {
|
||||
field;
|
||||
readonly [expr] = true
|
||||
}
|
||||
|
||||
// Prettier 3.3
|
||||
class A {
|
||||
field
|
||||
readonly [expr] = true
|
||||
}
|
||||
```
|
||||
|
||||
#### Add necessary parentheses to yield expressions ([#16194](https://github.com/prettier/prettier/pull/16194) by [@kirkwaiblinger](https://github.com/kirkwaiblinger))
|
||||
|
||||
Add parentheses around yield expressions if parent is an angle-bracket type assertion.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```ts
|
||||
// Input
|
||||
function* g() {
|
||||
const y = <T>(yield x);
|
||||
}
|
||||
|
||||
// Prettier 3.2
|
||||
function* g() {
|
||||
const y = <T>yield x;
|
||||
}
|
||||
|
||||
// Prettier 3.3
|
||||
function* g() {
|
||||
const y = <T>(yield x);
|
||||
}
|
||||
```
|
||||
|
||||
### Markdown
|
||||
|
||||
#### Improve wrapping for code block in markdown and jsx in mdx ([#15993](https://github.com/prettier/prettier/pull/15993) by [@seiyab](https://github.com/seiyab))
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
````md
|
||||
<!-- Input -->
|
||||
```css
|
||||
img {
|
||||
filter: drop-shadow(2px 2px 0 hsl(300deg 100% 50%)) drop-shadow(
|
||||
-2px -2px 0 hsl(210deg 100% 50%)
|
||||
)
|
||||
drop-shadow(2px 2px 0 hsl(120deg 100% 50%)) drop-shadow(
|
||||
-2px -2px 0 hsl(30deg 100% 50%)
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
<!-- Prettier 3.2 -->
|
||||
```css
|
||||
img {
|
||||
filter: drop-shadow(2px 2px 0 hsl(300deg 100% 50%)) drop-shadow(
|
||||
-2px -2px 0 hsl(210deg 100% 50%)
|
||||
)
|
||||
drop-shadow(2px 2px 0 hsl(120deg 100% 50%)) drop-shadow(
|
||||
-2px -2px 0 hsl(30deg 100% 50%)
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
<!-- Prettier 3.3 -->
|
||||
```css
|
||||
img {
|
||||
filter: drop-shadow(2px 2px 0 hsl(300deg 100% 50%))
|
||||
drop-shadow(-2px -2px 0 hsl(210deg 100% 50%))
|
||||
drop-shadow(2px 2px 0 hsl(120deg 100% 50%))
|
||||
drop-shadow(-2px -2px 0 hsl(30deg 100% 50%));
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```md
|
||||
<!-- Input -->
|
||||
<ExternalLink href="http://example.com">Prettier</ExternalLink> is an opinionated-code-formatter-that-support-many-languages-and-integrate-with-most-editors
|
||||
|
||||
<!-- Prettier 3.2 -->
|
||||
<ExternalLink href="http://example.com">Prettier</ExternalLink> is an opinionated-code-formatter-that-support-many-languages-and-integrate-with-most-editors
|
||||
|
||||
<!-- Prettier 3.3 -->
|
||||
<ExternalLink href="http://example.com">Prettier</ExternalLink> is an
|
||||
opinionated-code-formatter-that-support-many-languages-and-integrate-with-most-editors
|
||||
```
|
||||
|
||||
#### Add newline between markdown footnote definitions ([#16063](https://github.com/prettier/prettier/pull/16063) by [@Atema](https://github.com/Atema))
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```md
|
||||
<!-- Input -->
|
||||
[^a]: Footnote A
|
||||
|
||||
[^b]: Footnote B
|
||||
|
||||
<!-- Prettier 3.2 -->
|
||||
[^a]: Footnote A
|
||||
[^b]: Footnote B
|
||||
|
||||
<!-- Prettier 3.3 -->
|
||||
[^a]: Footnote A
|
||||
|
||||
[^b]: Footnote B
|
||||
```
|
||||
|
||||
#### Improve wrapping for markdown / mdx ([#16158](https://github.com/prettier/prettier/pull/16158) by [@seiyab](https://github.com/seiyab))
|
||||
|
||||
```json
|
||||
{ "proseWrap": "always" }
|
||||
```
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
```md
|
||||
<!-- Input -->
|
||||
\
|
||||
word very-very-very-very-very-very-very-very-very-very-long-word very-very-very-very-very-very-very-very-very-very-long-word
|
||||
|
||||
<!-- Prettier 3.2 -->
|
||||
\
|
||||
word very-very-very-very-very-very-very-very-very-very-long-word very-very-very-very-very-very-very-very-very-very-long-word
|
||||
|
||||
<!-- Prettier 3.3 -->
|
||||
\
|
||||
word very-very-very-very-very-very-very-very-very-very-long-word
|
||||
very-very-very-very-very-very-very-very-very-very-long-word
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
#### Add support for `package.yaml` config ([#16157](https://github.com/prettier/prettier/pull/16157) by [@danielbayley](https://github.com/danielbayley))
|
||||
|
||||
Enable support for reading `prettier` configuration from [`package.yaml`](https://github.com/pnpm/pnpm/pull/1799).
|
||||
|
||||
```yaml
|
||||
# package.yaml
|
||||
prettier:
|
||||
semi: false
|
||||
singleQuote: true
|
||||
```
|
||||
Reference in new issue
Block a user