From fb732fa7bbd74e49e3420431d2b78428cfd79d53 Mon Sep 17 00:00:00 2001 From: SUZUKI Sosuke Date: Sun, 2 Jun 2024 02:09:16 +0900 Subject: [PATCH] 3.3 blog post (#16332) --- changelog_unreleased/blog-post-intro.md | 9 + website/blog/2024-06-01-3.3.0.md | 429 ++++++++++++++++++++++++ 2 files changed, 438 insertions(+) create mode 100644 changelog_unreleased/blog-post-intro.md create mode 100644 website/blog/2024-06-01-3.3.0.md diff --git a/changelog_unreleased/blog-post-intro.md b/changelog_unreleased/blog-post-intro.md new file mode 100644 index 000000000..94d62852d --- /dev/null +++ b/changelog_unreleased/blog-post-intro.md @@ -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! diff --git a/website/blog/2024-06-01-3.3.0.md b/website/blog/2024-06-01-3.3.0.md new file mode 100644 index 000000000..d9f8b97fe --- /dev/null +++ b/website/blog/2024-06-01-3.3.0.md @@ -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! + + + +## Highlights + +### Flow + +#### `declare namespace` printing support ([#16066](https://github.com/prettier/prettier/pull/16066) by [@SamChou19815](https://github.com/SamChou19815)) + + +```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)) + + +```jsx +// Input +component MyComponent(a: string, b: number) renders SomeComponent { + return ; +} +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 ; +} +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/). + + +```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. + + +```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. + + +```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)) + + +```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)) + + +```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)) + + +```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)) + + +```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. + + +```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)) + + +```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)) + + +```jsx +// Input +type Foo = T extends (infer U extends number) | { a: infer U extends number } + ? U + : never; + +// Prettier 3.2 +type Foo = T extends infer U extends number | { a: infer U extends number } + ? U + : never; + +// Prettier 3.3 +type Foo = 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)) + + +```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)) + + +```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. + + +```ts +// Input +function* g() { + const y = (yield x); +} + +// Prettier 3.2 +function* g() { + const y = yield x; +} + +// Prettier 3.3 +function* g() { + const y = (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)) + + +````md + +```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%) + ); +} +``` + + +```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%) + ); +} +``` + + +```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%)); +} +``` +```` + + +```md + +Prettier is an opinionated-code-formatter-that-support-many-languages-and-integrate-with-most-editors + + +Prettier is an opinionated-code-formatter-that-support-many-languages-and-integrate-with-most-editors + + +Prettier 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)) + + +```md + +[^a]: Footnote A + +[^b]: Footnote B + + +[^a]: Footnote A +[^b]: Footnote B + + +[^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" } +``` + + +```md + +\ +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 + + +\ +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 + + +\ +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 +```