From e49951e5a3a071513bff7f575492dfc7e1c5aa81 Mon Sep 17 00:00:00 2001
From: sosukesuzuki <aosukeke@gmail.com>
Date: Thu, 9 Sep 2021 18:19:39 +0900
Subject: [PATCH 01/13] Release 2.4.0

---
 .github/ISSUE_TEMPLATE/formatting.md          |  2 +-
 .github/ISSUE_TEMPLATE/integration.md         |  2 +-
 CHANGELOG.md                                  |  6 +++
 docs/browser.md                               | 26 ++++++-------
 package.json                                  |  2 +-
 .../versioned_docs/version-stable/browser.md  | 26 ++++++-------
 .../versioned_docs/version-stable/install.md  |  2 +
 .../version-stable/option-philosophy.md       |  2 +-
 .../versioned_docs/version-stable/options.md  | 39 ++++++++++++++++++-
 9 files changed, 76 insertions(+), 31 deletions(-)

diff --git a/.github/ISSUE_TEMPLATE/formatting.md b/.github/ISSUE_TEMPLATE/formatting.md
index c6dd4d3af..4d1086e84 100644
--- a/.github/ISSUE_TEMPLATE/formatting.md
+++ b/.github/ISSUE_TEMPLATE/formatting.md
@@ -26,7 +26,7 @@ Don't fill the form below manually! Let a program create a report for you:
 
 -->
 
-**Prettier 2.3.2**
+**Prettier 2.4.0**
 [Playground link](https://prettier.io/playground/#.....)
 
 ```sh
diff --git a/.github/ISSUE_TEMPLATE/integration.md b/.github/ISSUE_TEMPLATE/integration.md
index c1eb47a77..392f0594a 100644
--- a/.github/ISSUE_TEMPLATE/integration.md
+++ b/.github/ISSUE_TEMPLATE/integration.md
@@ -20,7 +20,7 @@ BEFORE SUBMITTING AN ISSUE:
 
 **Environments:**
 
-- Prettier Version: 2.3.2
+- Prettier Version: 2.4.0
 - Running Prettier via: <!-- CLI, Node.js API, Browser API, etc. -->
 - Runtime: <!-- Node.js v14, Chrome v83, etc. -->
 - Operating System: <!-- Windows, Linux, macOS, etc. -->
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3eebeea69..34fccfd16 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,9 @@
+# 2.4.0
+
+[diff](https://github.com/prettier/prettier/compare/2.3.2...2.4.0)
+
+🔗 [Release Notes](https://prettier.io/blog/2021/09/09/2.4.0.html)
+
 # 2.3.2
 
 [diff](https://github.com/prettier/prettier/compare/2.3.1...2.3.2)
diff --git a/docs/browser.md b/docs/browser.md
index fa1718e0d..8c650329e 100644
--- a/docs/browser.md
+++ b/docs/browser.md
@@ -32,8 +32,8 @@ See below for examples.
 ### Global
 
 ```html
-<script src="https://unpkg.com/prettier@2.3.2/standalone.js"></script>
-<script src="https://unpkg.com/prettier@2.3.2/parser-graphql.js"></script>
+<script src="https://unpkg.com/prettier@2.4.0/standalone.js"></script>
+<script src="https://unpkg.com/prettier@2.4.0/parser-graphql.js"></script>
 <script>
   prettier.format("type Query { hello: String }", {
     parser: "graphql",
@@ -48,8 +48,8 @@ Note that the [`unpkg` field](https://unpkg.com/#examples) in Prettier’s `pack
 
 ```html
 <script type="module">
-  import prettier from "https://unpkg.com/prettier@2.3.2/esm/standalone.mjs";
-  import parserGraphql from "https://unpkg.com/prettier@2.3.2/esm/parser-graphql.mjs";
+  import prettier from "https://unpkg.com/prettier@2.4.0/esm/standalone.mjs";
+  import parserGraphql from "https://unpkg.com/prettier@2.4.0/esm/parser-graphql.mjs";
 
   prettier.format("type Query { hello: String }", {
     parser: "graphql",
@@ -62,8 +62,8 @@ Note that the [`unpkg` field](https://unpkg.com/#examples) in Prettier’s `pack
 
 ```js
 define([
-  "https://unpkg.com/prettier@2.3.2/standalone.js",
-  "https://unpkg.com/prettier@2.3.2/parser-graphql.js",
+  "https://unpkg.com/prettier@2.4.0/standalone.js",
+  "https://unpkg.com/prettier@2.4.0/parser-graphql.js",
 ], (prettier, ...plugins) => {
   prettier.format("type Query { hello: String }", {
     parser: "graphql",
@@ -88,8 +88,8 @@ This syntax doesn’t necessarily work in the browser, but it can be used when b
 ### Worker
 
 ```js
-importScripts("https://unpkg.com/prettier@2.3.2/standalone.js");
-importScripts("https://unpkg.com/prettier@2.3.2/parser-graphql.js");
+importScripts("https://unpkg.com/prettier@2.4.0/standalone.js");
+importScripts("https://unpkg.com/prettier@2.4.0/parser-graphql.js");
 prettier.format("type Query { hello: String }", {
   parser: "graphql",
   plugins: prettierPlugins,
@@ -102,8 +102,8 @@ If you want to format [embedded code](options.md#embedded-language-formatting),
 
 ```html
 <script type="module">
-  import prettier from "https://unpkg.com/prettier@2.3.2/esm/standalone.mjs";
-  import parserBabel from "https://unpkg.com/prettier@2.3.2/esm/parser-babel.mjs";
+  import prettier from "https://unpkg.com/prettier@2.4.0/esm/standalone.mjs";
+  import parserBabel from "https://unpkg.com/prettier@2.4.0/esm/parser-babel.mjs";
 
   console.log(
     prettier.format("const html=/* HTML */ `<DIV> </DIV>`", {
@@ -119,9 +119,9 @@ The HTML code embedded in JavaScript stays unformatted because the `html` parser
 
 ```html
 <script type="module">
-  import prettier from "https://unpkg.com/prettier@2.3.2/esm/standalone.mjs";
-  import parserBabel from "https://unpkg.com/prettier@2.3.2/esm/parser-babel.mjs";
-  import parserHtml from "https://unpkg.com/prettier@2.3.2/esm/parser-html.mjs";
+  import prettier from "https://unpkg.com/prettier@2.4.0/esm/standalone.mjs";
+  import parserBabel from "https://unpkg.com/prettier@2.4.0/esm/parser-babel.mjs";
+  import parserHtml from "https://unpkg.com/prettier@2.4.0/esm/parser-html.mjs";
 
   console.log(
     prettier.format("const html=/* HTML */ `<DIV> </DIV>`", {
diff --git a/package.json b/package.json
index 53a8d9665..f91394ac2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "prettier",
-  "version": "2.4.0-dev",
+  "version": "2.4.0",
   "description": "Prettier is an opinionated code formatter",
   "bin": "./bin/prettier.js",
   "repository": "prettier/prettier",
diff --git a/website/versioned_docs/version-stable/browser.md b/website/versioned_docs/version-stable/browser.md
index 74659cc1d..8e7dd3001 100644
--- a/website/versioned_docs/version-stable/browser.md
+++ b/website/versioned_docs/version-stable/browser.md
@@ -33,8 +33,8 @@ See below for examples.
 ### Global
 
 ```html
-<script src="https://unpkg.com/prettier@2.3.2/standalone.js"></script>
-<script src="https://unpkg.com/prettier@2.3.2/parser-graphql.js"></script>
+<script src="https://unpkg.com/prettier@2.4.0/standalone.js"></script>
+<script src="https://unpkg.com/prettier@2.4.0/parser-graphql.js"></script>
 <script>
   prettier.format("type Query { hello: String }", {
     parser: "graphql",
@@ -49,8 +49,8 @@ Note that the [`unpkg` field](https://unpkg.com/#examples) in Prettier’s `pack
 
 ```html
 <script type="module">
-  import prettier from "https://unpkg.com/prettier@2.3.2/esm/standalone.mjs";
-  import parserGraphql from "https://unpkg.com/prettier@2.3.2/esm/parser-graphql.mjs";
+  import prettier from "https://unpkg.com/prettier@2.4.0/esm/standalone.mjs";
+  import parserGraphql from "https://unpkg.com/prettier@2.4.0/esm/parser-graphql.mjs";
 
   prettier.format("type Query { hello: String }", {
     parser: "graphql",
@@ -63,8 +63,8 @@ Note that the [`unpkg` field](https://unpkg.com/#examples) in Prettier’s `pack
 
 ```js
 define([
-  "https://unpkg.com/prettier@2.3.2/standalone.js",
-  "https://unpkg.com/prettier@2.3.2/parser-graphql.js",
+  "https://unpkg.com/prettier@2.4.0/standalone.js",
+  "https://unpkg.com/prettier@2.4.0/parser-graphql.js",
 ], (prettier, ...plugins) => {
   prettier.format("type Query { hello: String }", {
     parser: "graphql",
@@ -89,8 +89,8 @@ This syntax doesn’t necessarily work in the browser, but it can be used when b
 ### Worker
 
 ```js
-importScripts("https://unpkg.com/prettier@2.3.2/standalone.js");
-importScripts("https://unpkg.com/prettier@2.3.2/parser-graphql.js");
+importScripts("https://unpkg.com/prettier@2.4.0/standalone.js");
+importScripts("https://unpkg.com/prettier@2.4.0/parser-graphql.js");
 prettier.format("type Query { hello: String }", {
   parser: "graphql",
   plugins: prettierPlugins,
@@ -103,8 +103,8 @@ If you want to format [embedded code](options.md#embedded-language-formatting),
 
 ```html
 <script type="module">
-  import prettier from "https://unpkg.com/prettier@2.3.2/esm/standalone.mjs";
-  import parserBabel from "https://unpkg.com/prettier@2.3.2/esm/parser-babel.mjs";
+  import prettier from "https://unpkg.com/prettier@2.4.0/esm/standalone.mjs";
+  import parserBabel from "https://unpkg.com/prettier@2.4.0/esm/parser-babel.mjs";
 
   console.log(
     prettier.format("const html=/* HTML */ `<DIV> </DIV>`", {
@@ -120,9 +120,9 @@ The HTML code embedded in JavaScript stays unformatted because the `html` parser
 
 ```html
 <script type="module">
-  import prettier from "https://unpkg.com/prettier@2.3.2/esm/standalone.mjs";
-  import parserBabel from "https://unpkg.com/prettier@2.3.2/esm/parser-babel.mjs";
-  import parserHtml from "https://unpkg.com/prettier@2.3.2/esm/parser-html.mjs";
+  import prettier from "https://unpkg.com/prettier@2.4.0/esm/standalone.mjs";
+  import parserBabel from "https://unpkg.com/prettier@2.4.0/esm/parser-babel.mjs";
+  import parserHtml from "https://unpkg.com/prettier@2.4.0/esm/parser-html.mjs";
 
   console.log(
     prettier.format("const html=/* HTML */ `<DIV> </DIV>`", {
diff --git a/website/versioned_docs/version-stable/install.md b/website/versioned_docs/version-stable/install.md
index 5c410b42f..aecc7938a 100644
--- a/website/versioned_docs/version-stable/install.md
+++ b/website/versioned_docs/version-stable/install.md
@@ -121,6 +121,8 @@ For example, you can do the following to have Prettier run before each commit:
 
    <!--END_DOCUSAURUS_CODE_TABS-->
 
+> Note: npm **set-script** command requires at least **npm v7.x**. See https://docs.npmjs.com/cli/v7/commands/npm-set-script.
+
 2. Add the following to your `package.json`:
 
 ```json
diff --git a/website/versioned_docs/version-stable/option-philosophy.md b/website/versioned_docs/version-stable/option-philosophy.md
index ed53cd2a3..005c4e56d 100644
--- a/website/versioned_docs/version-stable/option-philosophy.md
+++ b/website/versioned_docs/version-stable/option-philosophy.md
@@ -30,7 +30,7 @@ Options that are easier to motivate include:
 - `--end-of-line` makes it easier for teams to keep CRLFs out of their git repositories.
 - `--quote-props` is important for advanced usage of the Google Closure Compiler.
 
-But other options are harder to motivate in hindsight: `--arrow-parens`, `--jsx-single-quote`, `--jsx-bracket-same-line` and `--no-bracket-spacing` are not the type of options we’re happy to have. They cause a lot of [bike-shedding](https://en.wikipedia.org/wiki/Law_of_triviality) in teams, and we’re sorry for that. Difficult to remove now, these options exist as a historical artifact and should not motivate adding more options (“If _those_ options exist, why can’t this one?”).
+But other options are harder to motivate in hindsight: `--arrow-parens`, `--jsx-single-quote`, `--bracket-same-line` and `--no-bracket-spacing` are not the type of options we’re happy to have. They cause a lot of [bike-shedding](https://en.wikipedia.org/wiki/Law_of_triviality) in teams, and we’re sorry for that. Difficult to remove now, these options exist as a historical artifact and should not motivate adding more options (“If _those_ options exist, why can’t this one?”).
 
 For a long time, we left option requests open in order to let discussions play out and collect feedback. What we’ve learned during those years is that it’s really hard to measure demand. Prettier has grown a lot in usage. What was “great demand” back in the day is not as much today. GitHub reactions and Twitter polls became unrepresentative. What about all silent users? It looked easy to add “just one more” option. But where should we have stopped? When is one too many? Even after adding “that one final option”, there would always be a “top issue” in the issue tracker.
 
diff --git a/website/versioned_docs/version-stable/options.md b/website/versioned_docs/version-stable/options.md
index 31bb06879..6e1c4b3d7 100644
--- a/website/versioned_docs/version-stable/options.md
+++ b/website/versioned_docs/version-stable/options.md
@@ -136,7 +136,44 @@ Valid options:
 | ------- | ---------------------- | ------------------------ |
 | `true`  | `--no-bracket-spacing` | `bracketSpacing: <bool>` |
 
-## JSX Brackets
+## Bracket Line
+
+Put the `>` of a multi-line HTML (HTML, JSX, Vue, Angular) element at the end of the last line instead of being alone on the next line (does not apply to self closing elements).
+
+Valid options:
+
+- `true` - Example:
+
+<!-- prettier-ignore -->
+```html
+<button
+  className="prettier-class"
+  id="prettier-id"
+  onClick={this.handleClick}>
+  Click Here
+</button>
+```
+
+- `false` - Example:
+
+<!-- prettier-ignore -->
+```html
+<button
+  className="prettier-class"
+  id="prettier-id"
+  onClick={this.handleClick}
+>
+  Click Here
+</button>
+```
+
+| Default | CLI Override          | API Override              |
+| ------- | --------------------- | ------------------------- |
+| `false` | `--bracket-same-line` | `bracketSameLine: <bool>` |
+
+## [Deprecated] JSX Brackets
+
+_This option has been deprecated in v2.4.0, use --bracket-same-line instead_
 
 Put the `>` of a multi-line JSX element at the end of the last line instead of being alone on the next line (does not apply to self closing elements).
 

From ef514b9b5c817cf5105bac31a59e88cbdbdf189b Mon Sep 17 00:00:00 2001
From: sosukesuzuki <aosukeke@gmail.com>
Date: Thu, 9 Sep 2021 18:23:34 +0900
Subject: [PATCH 02/13] Bump Prettier dependency to 2.4.0

---
 package.json | 4 ++--
 yarn.lock    | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index f91394ac2..80c782171 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "prettier",
-  "version": "2.4.0",
+  "version": "2.5.0-dev",
   "description": "Prettier is an opinionated code formatter",
   "bin": "./bin/prettier.js",
   "repository": "prettier/prettier",
@@ -127,7 +127,7 @@
     "node-fetch": "2.6.1",
     "npm-run-all": "4.1.5",
     "path-browserify": "1.0.1",
-    "prettier": "2.3.2",
+    "prettier": "2.4.0",
     "pretty-bytes": "5.6.0",
     "rimraf": "3.0.2",
     "rollup": "2.53.3",
diff --git a/yarn.lock b/yarn.lock
index 2aa35562f..f37ad4782 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5241,10 +5241,10 @@ prelude-ls@~1.1.2:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
   integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=
 
-prettier@2.3.2:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.3.2.tgz#ef280a05ec253712e486233db5c6f23441e7342d"
-  integrity sha512-lnJzDfJ66zkMy58OL5/NY5zp70S7Nz6KqcKkXYzn2tMVrNxvbqaBpg7H3qHaLxCJ5lNMsGuM8+ohS7cZrthdLQ==
+prettier@2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.4.0.tgz#85bdfe0f70c3e777cf13a4ffff39713ca6f64cba"
+  integrity sha512-DsEPLY1dE5HF3BxCRBmD4uYZ+5DCbvatnolqTqcxEgKVZnL2kUfyu7b8pPQ5+hTBkdhU9SLUmK0/pHb07RE4WQ==
 
 pretty-bytes@5.6.0:
   version "5.6.0"

From 043043b8dee952abf8c5654d5e766d2da05cd9df Mon Sep 17 00:00:00 2001
From: sosukesuzuki <aosukeke@gmail.com>
Date: Thu, 9 Sep 2021 18:23:34 +0900
Subject: [PATCH 03/13] Git blame ignore 2.4.0

---
 .git-blame-ignore-revs | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.git-blame-ignore-revs b/.git-blame-ignore-revs
index 471f732ee..9423d6060 100644
--- a/.git-blame-ignore-revs
+++ b/.git-blame-ignore-revs
@@ -5,6 +5,8 @@
 # See https://git-scm.com/docs/git-blame#Documentation/git-blame.txt---ignore-revs-fileltfilegt
 
 # Prettier bump after release
+# 2.4.0
+ef514b9b5c817cf5105bac31a59e88cbdbdf189b
 # 2.3.2
 0747d9204113ee4bb4e3c2bab113dc3772a5e8d9
 # 2.3.1

From a93128ff1a1a6d7895f43ee9e40c51bf3bbb3686 Mon Sep 17 00:00:00 2001
From: sosukesuzuki <aosukeke@gmail.com>
Date: Thu, 9 Sep 2021 18:23:44 +0900
Subject: [PATCH 04/13] Update dependents count

---
 website/pages/en/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/website/pages/en/index.js b/website/pages/en/index.js
index 8eb30cb2d..07576f5d2 100755
--- a/website/pages/en/index.js
+++ b/website/pages/en/index.js
@@ -312,7 +312,7 @@ const UsersSection = ({ language }) => {
             <div style={{ marginLeft: ".7em", width: "260px" }}>
               <p>
                 More than{" "}
-                <strong data-placeholder="dependent-github">2.9 million</strong>{" "}
+                <strong data-placeholder="dependent-github">3.2 million</strong>{" "}
                 dependent repositories on GitHub
               </p>
               <Button href="https://github.com/prettier/prettier/network/dependents">
@@ -330,7 +330,7 @@ const UsersSection = ({ language }) => {
             </a>
             <div style={{ marginLeft: ".7em", width: "260px" }}>
               <p>
-                More than <strong data-placeholder="dependent-npm">8000</strong>{" "}
+                More than <strong data-placeholder="dependent-npm">9000</strong>{" "}
                 dependent packages on npm
               </p>
               <Button href="https://www.npmjs.com/browse/depended/prettier">

From 07476f80a7e02068a6bac36caa0d2c30a8690c90 Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Thu, 9 Sep 2021 18:24:31 +0900
Subject: [PATCH 05/13] 2.4 blog post (#11457)

* Mark highlights

* Add new draft

* Update intro

* Fix typo

* Update changelog_unreleased/blog-post-intro.md

Co-authored-by: Jed Fox <git@jedfox.com>

* Update changelog_unreleased/blog-post-intro.md

Co-authored-by: Jed Fox <git@jedfox.com>

* Update changelog_unreleased/blog-post-intro.md

Co-authored-by: Jed Fox <git@jedfox.com>

* Address review

* Address review

* Address review

* Regenerate draft

* Update changelog_unreleased/blog-post-intro.md

Co-authored-by: Jed Fox <git@jedfox.com>

* Update changelog_unreleased/blog-post-intro.md

Co-authored-by: Jed Fox <git@jedfox.com>

* Address review

* Regenerate draft

* Regenerate draft

Co-authored-by: Jed Fox <git@jedfox.com>
---
 changelog_unreleased/blog-post-intro.md  |  11 +
 changelog_unreleased/flow/11398.md       |   2 +-
 changelog_unreleased/html/11006.md       |   4 +-
 changelog_unreleased/javascript/11335.md |   4 +-
 changelog_unreleased/typescript/11247.md |   2 +-
 changelog_unreleased/typescript/11426.md |   2 +-
 website/blog/2021-09-09-2.4.0.md         | 267 +++++++++++++++++++++++
 7 files changed, 285 insertions(+), 7 deletions(-)
 create mode 100644 changelog_unreleased/blog-post-intro.md
 create mode 100644 website/blog/2021-09-09-2.4.0.md

diff --git a/changelog_unreleased/blog-post-intro.md b/changelog_unreleased/blog-post-intro.md
new file mode 100644
index 000000000..6dd06ac8a
--- /dev/null
+++ b/changelog_unreleased/blog-post-intro.md
@@ -0,0 +1,11 @@
+---
+author: "Sosuke Suzuki (@sosukesuzuki)"
+authorURL: "https://github.com/sosukesuzuki"
+title: "Prettier 2.4: new bracketSameLine option and TypeScript 4.4 support!"
+---
+
+This release renames the `jsxBracketSameLine` option to `bracketSameLine`, which supports HTML, Vue, and Angular in addition to JSX. The old name has been deprecated.
+
+We’ve also added support for [TypeScript 4.4](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-4.html), including new syntax features such as [class `static` blocks](https://github.com/tc39/proposal-class-static-block).
+
+If you enjoy Prettier and would like to support our work, consider sponsoring us directly via [our OpenCollective](https://opencollective.com/prettier) or by sponsoring the projects we depend on, including [typescript-eslint](https://opencollective.com/typescript-eslint), [remark](https://opencollective.com/unified), and [Babel](https://opencollective.com/babel).
diff --git a/changelog_unreleased/flow/11398.md b/changelog_unreleased/flow/11398.md
index 02b564d6f..9493cc1a8 100644
--- a/changelog_unreleased/flow/11398.md
+++ b/changelog_unreleased/flow/11398.md
@@ -1,4 +1,4 @@
-#### Print leading semi before Flow variance sigils (#11398 by @noppa)
+#### Always put a semicolon before Flow variance sigils (#11398 by @noppa)
 
 <!-- prettier-ignore -->
 ```jsx
diff --git a/changelog_unreleased/html/11006.md b/changelog_unreleased/html/11006.md
index ec31be784..7e5aeb1ec 100644
--- a/changelog_unreleased/html/11006.md
+++ b/changelog_unreleased/html/11006.md
@@ -1,6 +1,6 @@
-#### Replace `jsxBracketSameLine` option with `bracketSameLine` option (#11006 by @kurtztech)
+#### [HIGHLIGHT]Replace `jsxBracketSameLine` option with `bracketSameLine` option (#11006 by @kurtztech)
 
-Deprecate the `jsxBracketSameLine` option in favour of new `bracketSameLine` option that will work for HTML, Angular, Vue, and JSX.
+Deprecate the `jsxBracketSameLine` option in favour of the new `bracketSameLine` option that will work for HTML, Angular, Vue, and JSX.
 
 <!-- prettier-ignore -->
 ```html
diff --git a/changelog_unreleased/javascript/11335.md b/changelog_unreleased/javascript/11335.md
index ee81f936e..13ef57985 100644
--- a/changelog_unreleased/javascript/11335.md
+++ b/changelog_unreleased/javascript/11335.md
@@ -1,8 +1,8 @@
 #### Support hack-style pipeline proposal (#11335 by @sosukesuzuki)
 
-Support new [hack-style pipeline proposal](https://github.com/js-choi/proposal-hack-pipes). We chose `%` as the topic token, following the official explainer.
+The proposed [hack-style pipeline syntax](https://github.com/js-choi/proposal-hack-pipes) is now supported by Prettier. We are using `%` as the topic token, following the official explainer — although this may change in future releases as the proposal progresses.
 
-Also, [smart-style pipeline proposal](https://github.com/js-choi/proposal-smart-pipelines) is removed. See https://prettier.io/docs/en/rationale.html#disclaimer-about-non-standard-syntax for the rationale behind this decision.
+As part of this change, support for the [“smart” pipeline syntax](https://github.com/js-choi/proposal-smart-pipelines) has been removed. See [our policy on non-standardized syntax](https://prettier.io/docs/en/rationale.html#disclaimer-about-non-standard-syntax) for the rationale behind this decision.
 
 ```js
 // Input
diff --git a/changelog_unreleased/typescript/11247.md b/changelog_unreleased/typescript/11247.md
index be5c164d7..4547a2850 100644
--- a/changelog_unreleased/typescript/11247.md
+++ b/changelog_unreleased/typescript/11247.md
@@ -1,4 +1,4 @@
-#### Fix formatting intersection types that includes mapped types (#11247 by @sosukesuzuki)
+#### Fix formatting intersection types that include mapped types (#11247 by @sosukesuzuki)
 
 <!-- prettier-ignore -->
 ```ts
diff --git a/changelog_unreleased/typescript/11426.md b/changelog_unreleased/typescript/11426.md
index 5a0bd11e5..e2a94b905 100644
--- a/changelog_unreleased/typescript/11426.md
+++ b/changelog_unreleased/typescript/11426.md
@@ -1,4 +1,4 @@
-#### Support TypeScript 4.4 (#11426 by @sosukesuzuki)
+#### [HIGHLIGHT]Support TypeScript 4.4 (#11426 by @sosukesuzuki)
 
 Support [TypeScript 4.4](https://devblogs.microsoft.com/typescript/announcing-typescript-4-4/)!
 
diff --git a/website/blog/2021-09-09-2.4.0.md b/website/blog/2021-09-09-2.4.0.md
new file mode 100644
index 000000000..880bc75a7
--- /dev/null
+++ b/website/blog/2021-09-09-2.4.0.md
@@ -0,0 +1,267 @@
+---
+author: "Sosuke Suzuki (@sosukesuzuki)"
+authorURL: "https://github.com/sosukesuzuki"
+title: "Prettier 2.4: new bracketSameLine option and TypeScript 4.4 support!"
+---
+
+This release renames the `jsxBracketSameLine` option to `bracketSameLine`, which supports HTML, Vue, and Angular in addition to JSX. The old name has been deprecated.
+
+We’ve also added support for [TypeScript 4.4](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-4.html), including new syntax features such as [class `static` blocks](https://github.com/tc39/proposal-class-static-block).
+
+If you enjoy Prettier and would like to support our work, consider sponsoring us directly via [our OpenCollective](https://opencollective.com/prettier) or by sponsoring the projects we depend on, including [typescript-eslint](https://opencollective.com/typescript-eslint), [remark](https://opencollective.com/unified), and [Babel](https://opencollective.com/babel).
+
+<!--truncate-->
+
+## Highlights
+
+### TypeScript
+
+#### Support TypeScript 4.4 ([#11426](https://github.com/prettier/prettier/pull/11426) by [@sosukesuzuki](https://github.com/sosukesuzuki))
+
+Support [TypeScript 4.4](https://devblogs.microsoft.com/typescript/announcing-typescript-4-4/)!
+
+##### [`static` Blocks in Classes](https://devblogs.microsoft.com/typescript/announcing-typescript-4-4/#static-blocks)
+
+Class Static Blocks syntax is a Stage 4 ECMAScript proposal. See https://github.com/tc39/proposal-class-static-block for more details.
+
+<!-- prettier-ignore -->
+```tsx
+// Input
+class Foo {
+  static count = 0;
+
+  // This is a static block:
+  static {
+    if (someCondition()) {
+      Foo.count++;
+    }
+  }
+}
+
+// Prettier 2.3
+SyntaxError: Declaration expected. (5:9)
+  3 |
+  4 |   // This is a static block:
+> 5 |   static {
+    |         ^
+  6 |     if (someCondition()) {
+  7 |       Foo.count++;
+  8 |     }
+
+// Prettier 2.4
+class Foo {
+  static count = 0;
+
+  // This is a static block:
+  static {
+    if (someCondition()) {
+      Foo.count++;
+    }
+  }
+}
+
+```
+
+### HTML
+
+#### Replace `jsxBracketSameLine` option with `bracketSameLine` option ([#11006](https://github.com/prettier/prettier/pull/11006) by [@kurtztech](https://github.com/kurtztech))
+
+Deprecate the `jsxBracketSameLine` option in favour of the new `bracketSameLine` option that will work for HTML, Angular, Vue, and JSX.
+
+<!-- prettier-ignore -->
+```html
+<!-- Input -->
+<div id="foo-bar-baz"
+  class="bar-foo-baz"
+  title="a sample title"
+  data-foo="bar"
+  data-bar="baz">lorem ipsum dolor sit amet</div>
+
+<!-- Prettier 2.3 -->
+<div
+  id="foo-bar-baz"
+  class="bar-foo-baz"
+  title="a sample title"
+  data-foo="bar"
+  data-bar="baz"
+>
+  lorem ipsum dolor sit amet
+</div>
+
+<!-- Prettier 2.4 -->
+<!-- Options: `{bracketSameLine: true}` -->
+<div
+  id="foo-bar-baz"
+  class="bar-foo-baz"
+  title="a sample title"
+  data-foo="bar"
+  data-bar="baz">
+  lorem ipsum dolor sit amet
+</div>
+```
+
+## Other Changes
+
+### JavaScript
+
+#### Support parenthesized tagged template literals for styled components ([#11246](https://github.com/prettier/prettier/pull/11246) by [@sosukesuzuki](https://github.com/sosukesuzuki))
+
+<!-- prettier-ignore -->
+```js
+// Input
+const StyledComponent =
+  /** @type {import('styled-components').ThemedStyledFunction<'div',null,{overlap: boolean}>} */
+  (styled.div)`
+    position:   fixed;
+  color: red;
+  `;
+
+// Prettier 2.4
+const StyledComponent =
+  /** @type {import('styled-components').ThemedStyledFunction<'div',null,{overlap: boolean}>} */
+  (styled.div)`
+    position:   fixed;
+  color: red;
+  `;
+
+// Prettier 2.3
+const StyledComponent =
+  /** @type {import('styled-components').ThemedStyledFunction<'div',null,{overlap: boolean}>} */
+  (styled.div)`
+    position: fixed;
+    color: red;
+  `;
+
+```
+
+#### Count correctly regex literals in method chain arguments ([#11299](https://github.com/prettier/prettier/pull/11299) by [@sosukesuzuki](https://github.com/sosukesuzuki))
+
+<!-- prettier-ignore -->
+```js
+// Input
+foo1(/𠮟𠮟𠮟/).foo2(bar).foo3(baz);
+
+foo1(/叱叱叱/).foo2(bar).foo3(baz);
+
+// Prettier 2.3
+foo1(/𠮟𠮟𠮟/)
+  .foo2(bar)
+  .foo3(baz);
+
+foo1(/叱叱叱/).foo2(bar).foo3(baz);
+
+// Prettier 2.4
+foo1(/𠮟𠮟𠮟/)
+  .foo2(bar)
+  .foo3(baz);
+
+foo1(/叱叱叱/)
+  .foo2(bar)
+  .foo3(baz);
+
+```
+
+#### Support hack-style pipeline proposal ([#11335](https://github.com/prettier/prettier/pull/11335) by [@sosukesuzuki](https://github.com/sosukesuzuki))
+
+The proposed [hack-style pipeline syntax](https://github.com/js-choi/proposal-hack-pipes) is now supported by Prettier. We are using `%` as the topic token, following the official explainer — although this may change in future releases as the proposal progresses.
+
+As part of this change, support for the [“smart” pipeline syntax](https://github.com/js-choi/proposal-smart-pipelines) has been removed. See [our policy on non-standardized syntax](https://prettier.io/docs/en/rationale.html#disclaimer-about-non-standard-syntax) for the rationale behind this decision.
+
+```js
+// Input
+const foo = fn() |> fn1(%) |> fn2(%);
+
+// Prettier 2.3
+SyntaxError: Unexpected token (1:25)
+> 1 | const foo = fn() |> fn1(%) |> fn2(%);
+    |                         ^
+  2 |
+
+// Prettier 2.4
+const foo = fn() |> fn1(%) |> fn(%);
+
+```
+
+### TypeScript
+
+#### Fix formatting intersection types that include mapped types ([#11247](https://github.com/prettier/prettier/pull/11247) by [@sosukesuzuki](https://github.com/sosukesuzuki))
+
+<!-- prettier-ignore -->
+```ts
+// Input
+type Example = {
+  [A in B]: T;
+} & {
+  [A in B]: T;
+};
+
+// Prettier 2.3
+type Example = {
+  [A in B]: T;
+} &
+  {
+    [A in B]: T;
+  };
+
+// Prettier 2.4
+type Example = {
+  [A in B]: T;
+} & {
+  [A in B]: T;
+};
+
+```
+
+### Flow
+
+#### Always put a semicolon before Flow variance sigils ([#11398](https://github.com/prettier/prettier/pull/11398) by [@noppa](https://github.com/noppa))
+
+<!-- prettier-ignore -->
+```jsx
+// Input
+class A {
+  +one = function() {};
+  -two = val();
+  +#privOne = val();
+  static +#privTwo = val();
+}
+// Prettier 2.3
+class A {
+  +one = function() {}
+  -two = val()
+  +#privOne = val()
+  static +#privTwo = val()
+}
+// Prettier 2.4
+class A {
+  +one = function() {};
+  -two = val();
+  +#privOne = val()
+  static +#privTwo = val()
+}
+```
+
+### SCSS
+
+#### Consistently quote Sass modules strings ([#11461](https://github.com/prettier/prettier/pull/11461) by [@niksy](https://github.com/niksy))
+
+<!-- prettier-ignore -->
+```scss
+// Input
+@use "sass:math";
+@forward "list";
+
+// Prettier 2.3
+@use "sass:math";
+@forward "list";
+
+// Prettier 2.4
+@use 'sass:math';
+@forward 'list';
+```
+
+### CLI
+
+#### Infer parser for `.stylelintrc` ([#10924](https://github.com/prettier/prettier/pull/10924) by [@SevenOutman](https://github.com/SevenOutman))
+
+A `.stylelintrc` file (without extension) is handled using `json` and `yaml` parsers.

From d81268750247828388065aa811a11620e2aac37a Mon Sep 17 00:00:00 2001
From: sosukesuzuki <aosukeke@gmail.com>
Date: Thu, 9 Sep 2021 18:29:57 +0900
Subject: [PATCH 06/13] Clean changelog

---
 changelog_unreleased/blog-post-intro.md  | 11 ------
 changelog_unreleased/cli/10924.md        |  3 --
 changelog_unreleased/flow/11398.md       | 26 --------------
 changelog_unreleased/html/11006.md       | 35 ------------------
 changelog_unreleased/javascript/11246.md | 29 ---------------
 changelog_unreleased/javascript/11299.md | 26 --------------
 changelog_unreleased/javascript/11335.md | 20 -----------
 changelog_unreleased/scss/11461.md       | 16 ---------
 changelog_unreleased/typescript/11247.md | 27 --------------
 changelog_unreleased/typescript/11426.md | 45 ------------------------
 10 files changed, 238 deletions(-)
 delete mode 100644 changelog_unreleased/blog-post-intro.md
 delete mode 100644 changelog_unreleased/cli/10924.md
 delete mode 100644 changelog_unreleased/flow/11398.md
 delete mode 100644 changelog_unreleased/html/11006.md
 delete mode 100644 changelog_unreleased/javascript/11246.md
 delete mode 100644 changelog_unreleased/javascript/11299.md
 delete mode 100644 changelog_unreleased/javascript/11335.md
 delete mode 100644 changelog_unreleased/scss/11461.md
 delete mode 100644 changelog_unreleased/typescript/11247.md
 delete mode 100644 changelog_unreleased/typescript/11426.md

diff --git a/changelog_unreleased/blog-post-intro.md b/changelog_unreleased/blog-post-intro.md
deleted file mode 100644
index 6dd06ac8a..000000000
--- a/changelog_unreleased/blog-post-intro.md
+++ /dev/null
@@ -1,11 +0,0 @@
----
-author: "Sosuke Suzuki (@sosukesuzuki)"
-authorURL: "https://github.com/sosukesuzuki"
-title: "Prettier 2.4: new bracketSameLine option and TypeScript 4.4 support!"
----
-
-This release renames the `jsxBracketSameLine` option to `bracketSameLine`, which supports HTML, Vue, and Angular in addition to JSX. The old name has been deprecated.
-
-We’ve also added support for [TypeScript 4.4](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-4.html), including new syntax features such as [class `static` blocks](https://github.com/tc39/proposal-class-static-block).
-
-If you enjoy Prettier and would like to support our work, consider sponsoring us directly via [our OpenCollective](https://opencollective.com/prettier) or by sponsoring the projects we depend on, including [typescript-eslint](https://opencollective.com/typescript-eslint), [remark](https://opencollective.com/unified), and [Babel](https://opencollective.com/babel).
diff --git a/changelog_unreleased/cli/10924.md b/changelog_unreleased/cli/10924.md
deleted file mode 100644
index 22486a31d..000000000
--- a/changelog_unreleased/cli/10924.md
+++ /dev/null
@@ -1,3 +0,0 @@
-#### Infer parser for `.stylelintrc` (#10924 by @SevenOutman)
-
-A `.stylelintrc` file (without extension) is handled using `json` and `yaml` parsers.
diff --git a/changelog_unreleased/flow/11398.md b/changelog_unreleased/flow/11398.md
deleted file mode 100644
index 9493cc1a8..000000000
--- a/changelog_unreleased/flow/11398.md
+++ /dev/null
@@ -1,26 +0,0 @@
-#### Always put a semicolon before Flow variance sigils (#11398 by @noppa)
-
-<!-- prettier-ignore -->
-```jsx
-// Input
-class A {
-  +one = function() {};
-  -two = val();
-  +#privOne = val();
-  static +#privTwo = val();
-}
-// Prettier stable
-class A {
-  +one = function() {}
-  -two = val()
-  +#privOne = val()
-  static +#privTwo = val()
-}
-// Prettier main
-class A {
-  +one = function() {};
-  -two = val();
-  +#privOne = val()
-  static +#privTwo = val()
-}
-```
diff --git a/changelog_unreleased/html/11006.md b/changelog_unreleased/html/11006.md
deleted file mode 100644
index 7e5aeb1ec..000000000
--- a/changelog_unreleased/html/11006.md
+++ /dev/null
@@ -1,35 +0,0 @@
-#### [HIGHLIGHT]Replace `jsxBracketSameLine` option with `bracketSameLine` option (#11006 by @kurtztech)
-
-Deprecate the `jsxBracketSameLine` option in favour of the new `bracketSameLine` option that will work for HTML, Angular, Vue, and JSX.
-
-<!-- prettier-ignore -->
-```html
-<!-- Input -->
-<div id="foo-bar-baz"
-  class="bar-foo-baz"
-  title="a sample title"
-  data-foo="bar"
-  data-bar="baz">lorem ipsum dolor sit amet</div>
-
-<!-- Prettier stable -->
-<div
-  id="foo-bar-baz"
-  class="bar-foo-baz"
-  title="a sample title"
-  data-foo="bar"
-  data-bar="baz"
->
-  lorem ipsum dolor sit amet
-</div>
-
-<!-- Prettier main -->
-<!-- Options: `{bracketSameLine: true}` -->
-<div
-  id="foo-bar-baz"
-  class="bar-foo-baz"
-  title="a sample title"
-  data-foo="bar"
-  data-bar="baz">
-  lorem ipsum dolor sit amet
-</div>
-```
diff --git a/changelog_unreleased/javascript/11246.md b/changelog_unreleased/javascript/11246.md
deleted file mode 100644
index 7530e7b41..000000000
--- a/changelog_unreleased/javascript/11246.md
+++ /dev/null
@@ -1,29 +0,0 @@
-#### Support parenthesized tagged template literals for styled components (#11246 by @sosukesuzuki)
-
-<!-- prettier-ignore -->
-```js
-// Input
-const StyledComponent =
-  /** @type {import('styled-components').ThemedStyledFunction<'div',null,{overlap: boolean}>} */
-  (styled.div)`
-    position:   fixed;
-  color: red;
-  `;
-
-// Prettier main
-const StyledComponent =
-  /** @type {import('styled-components').ThemedStyledFunction<'div',null,{overlap: boolean}>} */
-  (styled.div)`
-    position:   fixed;
-  color: red;
-  `;
-
-// Prettier stable
-const StyledComponent =
-  /** @type {import('styled-components').ThemedStyledFunction<'div',null,{overlap: boolean}>} */
-  (styled.div)`
-    position: fixed;
-    color: red;
-  `;
-
-```
diff --git a/changelog_unreleased/javascript/11299.md b/changelog_unreleased/javascript/11299.md
deleted file mode 100644
index 93c8fea17..000000000
--- a/changelog_unreleased/javascript/11299.md
+++ /dev/null
@@ -1,26 +0,0 @@
-#### Count correctly regex literals in method chain arguments (#11299 by @sosukesuzuki)
-
-<!-- prettier-ignore -->
-```js
-// Input
-foo1(/𠮟𠮟𠮟/).foo2(bar).foo3(baz);
-
-foo1(/叱叱叱/).foo2(bar).foo3(baz);
-
-// Prettier stable
-foo1(/𠮟𠮟𠮟/)
-  .foo2(bar)
-  .foo3(baz);
-
-foo1(/叱叱叱/).foo2(bar).foo3(baz);
-
-// Prettier main
-foo1(/𠮟𠮟𠮟/)
-  .foo2(bar)
-  .foo3(baz);
-
-foo1(/叱叱叱/)
-  .foo2(bar)
-  .foo3(baz);
-
-```
diff --git a/changelog_unreleased/javascript/11335.md b/changelog_unreleased/javascript/11335.md
deleted file mode 100644
index 13ef57985..000000000
--- a/changelog_unreleased/javascript/11335.md
+++ /dev/null
@@ -1,20 +0,0 @@
-#### Support hack-style pipeline proposal (#11335 by @sosukesuzuki)
-
-The proposed [hack-style pipeline syntax](https://github.com/js-choi/proposal-hack-pipes) is now supported by Prettier. We are using `%` as the topic token, following the official explainer — although this may change in future releases as the proposal progresses.
-
-As part of this change, support for the [“smart” pipeline syntax](https://github.com/js-choi/proposal-smart-pipelines) has been removed. See [our policy on non-standardized syntax](https://prettier.io/docs/en/rationale.html#disclaimer-about-non-standard-syntax) for the rationale behind this decision.
-
-```js
-// Input
-const foo = fn() |> fn1(%) |> fn2(%);
-
-// Prettier stable
-SyntaxError: Unexpected token (1:25)
-> 1 | const foo = fn() |> fn1(%) |> fn2(%);
-    |                         ^
-  2 |
-
-// Prettier main
-const foo = fn() |> fn1(%) |> fn(%);
-
-```
diff --git a/changelog_unreleased/scss/11461.md b/changelog_unreleased/scss/11461.md
deleted file mode 100644
index 720248387..000000000
--- a/changelog_unreleased/scss/11461.md
+++ /dev/null
@@ -1,16 +0,0 @@
-#### Consistently quote Sass modules strings (#11461 by @niksy)
-
-<!-- prettier-ignore -->
-```scss
-// Input
-@use "sass:math";
-@forward "list";
-
-// Prettier stable
-@use "sass:math";
-@forward "list";
-
-// Prettier main
-@use 'sass:math';
-@forward 'list';
-```
diff --git a/changelog_unreleased/typescript/11247.md b/changelog_unreleased/typescript/11247.md
deleted file mode 100644
index 4547a2850..000000000
--- a/changelog_unreleased/typescript/11247.md
+++ /dev/null
@@ -1,27 +0,0 @@
-#### Fix formatting intersection types that include mapped types (#11247 by @sosukesuzuki)
-
-<!-- prettier-ignore -->
-```ts
-// Input
-type Example = {
-  [A in B]: T;
-} & {
-  [A in B]: T;
-};
-
-// Prettier stable
-type Example = {
-  [A in B]: T;
-} &
-  {
-    [A in B]: T;
-  };
-
-// Prettier main
-type Example = {
-  [A in B]: T;
-} & {
-  [A in B]: T;
-};
-
-```
diff --git a/changelog_unreleased/typescript/11426.md b/changelog_unreleased/typescript/11426.md
deleted file mode 100644
index e2a94b905..000000000
--- a/changelog_unreleased/typescript/11426.md
+++ /dev/null
@@ -1,45 +0,0 @@
-#### [HIGHLIGHT]Support TypeScript 4.4 (#11426 by @sosukesuzuki)
-
-Support [TypeScript 4.4](https://devblogs.microsoft.com/typescript/announcing-typescript-4-4/)!
-
-##### [`static` Blocks in Classes](https://devblogs.microsoft.com/typescript/announcing-typescript-4-4/#static-blocks)
-
-Class Static Blocks syntax is a Stage 4 ECMAScript proposal. See https://github.com/tc39/proposal-class-static-block for more details.
-
-<!-- prettier-ignore -->
-```tsx
-// Input
-class Foo {
-  static count = 0;
-
-  // This is a static block:
-  static {
-    if (someCondition()) {
-      Foo.count++;
-    }
-  }
-}
-
-// Prettier stable
-SyntaxError: Declaration expected. (5:9)
-  3 |
-  4 |   // This is a static block:
-> 5 |   static {
-    |         ^
-  6 |     if (someCondition()) {
-  7 |       Foo.count++;
-  8 |     }
-
-// Prettier main
-class Foo {
-  static count = 0;
-
-  // This is a static block:
-  static {
-    if (someCondition()) {
-      Foo.count++;
-    }
-  }
-}
-
-```

From a1cc5d4ecd0a178d2d83f43296767d5c8f07842b Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Thu, 9 Sep 2021 19:00:14 +0900
Subject: [PATCH 07/13] refactor: Extract `printChildren` and `printElement`
 (#11466)

* Extract printChildrent and printElement

* Refactor printChildren
---
 src/language-html/print/children.js | 210 ++++++++++++++++
 src/language-html/print/element.js  | 176 ++++++++++++++
 src/language-html/printer-html.js   | 364 +---------------------------
 3 files changed, 389 insertions(+), 361 deletions(-)
 create mode 100644 src/language-html/print/children.js
 create mode 100644 src/language-html/print/element.js

diff --git a/src/language-html/print/children.js b/src/language-html/print/children.js
new file mode 100644
index 000000000..02d97a54a
--- /dev/null
+++ b/src/language-html/print/children.js
@@ -0,0 +1,210 @@
+"use strict";
+
+const {
+  builders: { breakParent, group, ifBreak, line, softline, hardline },
+  utils: { replaceTextEndOfLine },
+} = require("../../document/index.js");
+const { locStart, locEnd } = require("../loc.js");
+const {
+  forceBreakChildren,
+  forceNextEmptyLine,
+  isTextLikeNode,
+  hasPrettierIgnore,
+  preferHardlineAsLeadingSpaces,
+} = require("../utils.js");
+const {
+  printOpeningTagPrefix,
+  needsToBorrowNextOpeningTagStartMarker,
+  printOpeningTagStartMarker,
+  needsToBorrowPrevClosingTagEndMarker,
+  printClosingTagEndMarker,
+  printClosingTagSuffix,
+  needsToBorrowParentClosingTagStartMarker,
+} = require("./tag.js");
+
+function printChild(childPath, options, print) {
+  const child = childPath.getValue();
+
+  if (hasPrettierIgnore(child)) {
+    return [
+      printOpeningTagPrefix(child, options),
+      ...replaceTextEndOfLine(
+        options.originalText.slice(
+          locStart(child) +
+            (child.prev && needsToBorrowNextOpeningTagStartMarker(child.prev)
+              ? printOpeningTagStartMarker(child).length
+              : 0),
+          locEnd(child) -
+            (child.next && needsToBorrowPrevClosingTagEndMarker(child.next)
+              ? printClosingTagEndMarker(child, options).length
+              : 0)
+        )
+      ),
+      printClosingTagSuffix(child, options),
+    ];
+  }
+
+  return print();
+}
+
+function printBetweenLine(prevNode, nextNode) {
+  return isTextLikeNode(prevNode) && isTextLikeNode(nextNode)
+    ? prevNode.isTrailingSpaceSensitive
+      ? prevNode.hasTrailingSpaces
+        ? preferHardlineAsLeadingSpaces(nextNode)
+          ? hardline
+          : line
+        : ""
+      : preferHardlineAsLeadingSpaces(nextNode)
+      ? hardline
+      : softline
+    : (needsToBorrowNextOpeningTagStartMarker(prevNode) &&
+        (hasPrettierIgnore(nextNode) ||
+          /**
+           *     123<a
+           *          ~
+           *       ><b>
+           */
+          nextNode.firstChild ||
+          /**
+           *     123<!--
+           *            ~
+           *     -->
+           */
+          nextNode.isSelfClosing ||
+          /**
+           *     123<span
+           *             ~
+           *       attr
+           */
+          (nextNode.type === "element" && nextNode.attrs.length > 0))) ||
+      /**
+       *     <img
+       *       src="long"
+       *                 ~
+       *     />123
+       */
+      (prevNode.type === "element" &&
+        prevNode.isSelfClosing &&
+        needsToBorrowPrevClosingTagEndMarker(nextNode))
+    ? ""
+    : !nextNode.isLeadingSpaceSensitive ||
+      preferHardlineAsLeadingSpaces(nextNode) ||
+      /**
+       *       Want to write us a letter? Use our<a
+       *         ><b><a>mailing address</a></b></a
+       *                                          ~
+       *       >.
+       */
+      (needsToBorrowPrevClosingTagEndMarker(nextNode) &&
+        prevNode.lastChild &&
+        needsToBorrowParentClosingTagStartMarker(prevNode.lastChild) &&
+        prevNode.lastChild.lastChild &&
+        needsToBorrowParentClosingTagStartMarker(prevNode.lastChild.lastChild))
+    ? hardline
+    : nextNode.hasLeadingSpaces
+    ? line
+    : softline;
+}
+
+function printChildren(path, options, print) {
+  const node = path.getValue();
+
+  if (forceBreakChildren(node)) {
+    return [
+      breakParent,
+
+      ...path.map((childPath) => {
+        const childNode = childPath.getValue();
+        const prevBetweenLine = !childNode.prev
+          ? ""
+          : printBetweenLine(childNode.prev, childNode);
+        return [
+          !prevBetweenLine
+            ? ""
+            : [
+                prevBetweenLine,
+                forceNextEmptyLine(childNode.prev) ? hardline : "",
+              ],
+          printChild(childPath, options, print),
+        ];
+      }, "children"),
+    ];
+  }
+
+  const groupIds = node.children.map(() => Symbol(""));
+  return path.map((childPath, childIndex) => {
+    const childNode = childPath.getValue();
+
+    if (isTextLikeNode(childNode)) {
+      if (childNode.prev && isTextLikeNode(childNode.prev)) {
+        const prevBetweenLine = printBetweenLine(childNode.prev, childNode);
+        if (prevBetweenLine) {
+          if (forceNextEmptyLine(childNode.prev)) {
+            return [hardline, hardline, printChild(childPath, options, print)];
+          }
+          return [prevBetweenLine, printChild(childPath, options, print)];
+        }
+      }
+      return printChild(childPath, options, print);
+    }
+
+    const prevParts = [];
+    const leadingParts = [];
+    const trailingParts = [];
+    const nextParts = [];
+
+    const prevBetweenLine = childNode.prev
+      ? printBetweenLine(childNode.prev, childNode)
+      : "";
+
+    const nextBetweenLine = childNode.next
+      ? printBetweenLine(childNode, childNode.next)
+      : "";
+
+    if (prevBetweenLine) {
+      if (forceNextEmptyLine(childNode.prev)) {
+        prevParts.push(hardline, hardline);
+      } else if (prevBetweenLine === hardline) {
+        prevParts.push(hardline);
+      } else {
+        if (isTextLikeNode(childNode.prev)) {
+          leadingParts.push(prevBetweenLine);
+        } else {
+          leadingParts.push(
+            ifBreak("", softline, {
+              groupId: groupIds[childIndex - 1],
+            })
+          );
+        }
+      }
+    }
+
+    if (nextBetweenLine) {
+      if (forceNextEmptyLine(childNode)) {
+        if (isTextLikeNode(childNode.next)) {
+          nextParts.push(hardline, hardline);
+        }
+      } else if (nextBetweenLine === hardline) {
+        if (isTextLikeNode(childNode.next)) {
+          nextParts.push(hardline);
+        }
+      } else {
+        trailingParts.push(nextBetweenLine);
+      }
+    }
+
+    return [
+      ...prevParts,
+      group([
+        ...leadingParts,
+        group([printChild(childPath, options, print), ...trailingParts], {
+          id: groupIds[childIndex],
+        }),
+      ]),
+      ...nextParts,
+    ];
+  }, "children");
+}
+
+module.exports = { printChildren };
diff --git a/src/language-html/print/element.js b/src/language-html/print/element.js
new file mode 100644
index 000000000..98f63c05a
--- /dev/null
+++ b/src/language-html/print/element.js
@@ -0,0 +1,176 @@
+"use strict";
+
+const {
+  builders: {
+    breakParent,
+    dedentToRoot,
+    group,
+    ifBreak,
+    indentIfBreak,
+    indent,
+    line,
+    softline,
+  },
+  utils: { replaceTextEndOfLine },
+} = require("../../document/index.js");
+const getNodeContent = require("../get-node-content.js");
+const {
+  shouldPreserveContent,
+  isScriptLikeTag,
+  isVueCustomBlock,
+  countParents,
+  forceBreakContent,
+} = require("../utils.js");
+const {
+  printOpeningTagPrefix,
+  printOpeningTag,
+  printClosingTagSuffix,
+  printClosingTag,
+  needsToBorrowPrevClosingTagEndMarker,
+  needsToBorrowLastChildClosingTagEndMarker,
+} = require("./tag.js");
+const { printChildren } = require("./children.js");
+
+function printElement(path, options, print) {
+  const node = path.getValue();
+
+  if (shouldPreserveContent(node, options)) {
+    return [
+      printOpeningTagPrefix(node, options),
+      group(printOpeningTag(path, options, print)),
+      ...replaceTextEndOfLine(getNodeContent(node, options)),
+      ...printClosingTag(node, options),
+      printClosingTagSuffix(node, options),
+    ];
+  }
+  /**
+   * do not break:
+   *
+   *     <div>{{
+   *         ~
+   *       interpolation
+   *     }}</div>
+   *            ~
+   *
+   * exception: break if the opening tag breaks
+   *
+   *     <div
+   *       long
+   *           ~
+   *       >{{
+   *         interpolation
+   *       }}</div
+   *              ~
+   *     >
+   */
+  const shouldHugContent =
+    node.children.length === 1 &&
+    node.firstChild.type === "interpolation" &&
+    node.firstChild.isLeadingSpaceSensitive &&
+    !node.firstChild.hasLeadingSpaces &&
+    node.lastChild.isTrailingSpaceSensitive &&
+    !node.lastChild.hasTrailingSpaces;
+
+  const attrGroupId = Symbol("element-attr-group-id");
+
+  const printTag = (doc) =>
+    group([
+      group(printOpeningTag(path, options, print), { id: attrGroupId }),
+      doc,
+      printClosingTag(node, options),
+    ]);
+
+  const printChildrenDoc = (childrenDoc) => {
+    if (shouldHugContent) {
+      return indentIfBreak(childrenDoc, { groupId: attrGroupId });
+    }
+    if (
+      (isScriptLikeTag(node) || isVueCustomBlock(node, options)) &&
+      node.parent.type === "root" &&
+      options.parser === "vue" &&
+      !options.vueIndentScriptAndStyle
+    ) {
+      return childrenDoc;
+    }
+    return indent(childrenDoc);
+  };
+
+  const printLineBeforeChildren = () => {
+    if (shouldHugContent) {
+      return ifBreak(softline, "", { groupId: attrGroupId });
+    }
+    if (
+      node.firstChild.hasLeadingSpaces &&
+      node.firstChild.isLeadingSpaceSensitive
+    ) {
+      return line;
+    }
+    if (
+      node.firstChild.type === "text" &&
+      node.isWhitespaceSensitive &&
+      node.isIndentationSensitive
+    ) {
+      return dedentToRoot(softline);
+    }
+    return softline;
+  };
+
+  const printLineAfterChildren = () => {
+    const needsToBorrow = node.next
+      ? needsToBorrowPrevClosingTagEndMarker(node.next)
+      : needsToBorrowLastChildClosingTagEndMarker(node.parent);
+    if (needsToBorrow) {
+      if (
+        node.lastChild.hasTrailingSpaces &&
+        node.lastChild.isTrailingSpaceSensitive
+      ) {
+        return " ";
+      }
+      return "";
+    }
+    if (shouldHugContent) {
+      return ifBreak(softline, "", { groupId: attrGroupId });
+    }
+    if (
+      node.lastChild.hasTrailingSpaces &&
+      node.lastChild.isTrailingSpaceSensitive
+    ) {
+      return line;
+    }
+    if (
+      (node.lastChild.type === "comment" ||
+        (node.lastChild.type === "text" &&
+          node.isWhitespaceSensitive &&
+          node.isIndentationSensitive)) &&
+      new RegExp(
+        `\\n[\\t ]{${
+          options.tabWidth *
+          countParents(
+            path,
+            (node) => node.parent && node.parent.type !== "root"
+          )
+        }}$`
+      ).test(node.lastChild.value)
+    ) {
+      return "";
+    }
+    return softline;
+  };
+
+  if (node.children.length === 0) {
+    return printTag(
+      node.hasDanglingSpaces && node.isDanglingSpaceSensitive ? line : ""
+    );
+  }
+
+  return printTag([
+    forceBreakContent(node) ? breakParent : "",
+    printChildrenDoc([
+      printLineBeforeChildren(),
+      printChildren(path, options, print),
+    ]),
+    printLineAfterChildren(),
+  ]);
+}
+
+module.exports = { printElement };
diff --git a/src/language-html/printer-html.js b/src/language-html/printer-html.js
index 86e57437a..101dce2d1 100644
--- a/src/language-html/printer-html.js
+++ b/src/language-html/printer-html.js
@@ -5,34 +5,12 @@
  */
 
 const {
-  builders: {
-    breakParent,
-    dedentToRoot,
-    fill,
-    group,
-    hardline,
-    ifBreak,
-    indentIfBreak,
-    indent,
-    line,
-    literalline,
-    softline,
-  },
+  builders: { fill, group, hardline, literalline },
   utils: { cleanDoc, getDocParts, isConcat, replaceTextEndOfLine },
 } = require("../document/index.js");
 const clean = require("./clean.js");
 const {
   countChars,
-  countParents,
-  forceBreakChildren,
-  forceBreakContent,
-  forceNextEmptyLine,
-  hasPrettierIgnore,
-  isVueCustomBlock,
-  isScriptLikeTag,
-  isTextLikeNode,
-  preferHardlineAsLeadingSpaces,
-  shouldPreserveContent,
   unescapeQuoteEntities,
   getTextValueParts,
 } = require("./utils.js");
@@ -41,20 +19,13 @@ const { insertPragma } = require("./pragma.js");
 const { locStart, locEnd } = require("./loc.js");
 const embed = require("./embed.js");
 const {
-  printClosingTagEndMarker,
   printClosingTagSuffix,
-  printClosingTag,
   printClosingTagEnd,
-  needsToBorrowPrevClosingTagEndMarker,
-  needsToBorrowLastChildClosingTagEndMarker,
-  needsToBorrowParentClosingTagStartMarker,
   printOpeningTagPrefix,
-  printOpeningTag,
   printOpeningTagStart,
-  printOpeningTagStartMarker,
-  needsToBorrowNextOpeningTagStartMarker,
 } = require("./print/tag.js");
-const getNodeContent = require("./get-node-content.js");
+const { printElement } = require("./print/element.js");
+const { printChildren } = require("./print/children.js");
 
 function genericPrint(path, options, print) {
   const node = path.getValue();
@@ -153,335 +124,6 @@ function genericPrint(path, options, print) {
   }
 }
 
-function printElement(path, options, print) {
-  const node = path.getValue();
-
-  if (shouldPreserveContent(node, options)) {
-    return [
-      printOpeningTagPrefix(node, options),
-      group(printOpeningTag(path, options, print)),
-      ...replaceTextEndOfLine(getNodeContent(node, options)),
-      ...printClosingTag(node, options),
-      printClosingTagSuffix(node, options),
-    ];
-  }
-  /**
-   * do not break:
-   *
-   *     <div>{{
-   *         ~
-   *       interpolation
-   *     }}</div>
-   *            ~
-   *
-   * exception: break if the opening tag breaks
-   *
-   *     <div
-   *       long
-   *           ~
-   *       >{{
-   *         interpolation
-   *       }}</div
-   *              ~
-   *     >
-   */
-  const shouldHugContent =
-    node.children.length === 1 &&
-    node.firstChild.type === "interpolation" &&
-    node.firstChild.isLeadingSpaceSensitive &&
-    !node.firstChild.hasLeadingSpaces &&
-    node.lastChild.isTrailingSpaceSensitive &&
-    !node.lastChild.hasTrailingSpaces;
-
-  const attrGroupId = Symbol("element-attr-group-id");
-
-  const printTag = (doc) =>
-    group([
-      group(printOpeningTag(path, options, print), { id: attrGroupId }),
-      doc,
-      printClosingTag(node, options),
-    ]);
-
-  const printChildrenDoc = (childrenDoc) => {
-    if (shouldHugContent) {
-      return indentIfBreak(childrenDoc, { groupId: attrGroupId });
-    }
-    if (
-      (isScriptLikeTag(node) || isVueCustomBlock(node, options)) &&
-      node.parent.type === "root" &&
-      options.parser === "vue" &&
-      !options.vueIndentScriptAndStyle
-    ) {
-      return childrenDoc;
-    }
-    return indent(childrenDoc);
-  };
-
-  const printLineBeforeChildren = () => {
-    if (shouldHugContent) {
-      return ifBreak(softline, "", { groupId: attrGroupId });
-    }
-    if (
-      node.firstChild.hasLeadingSpaces &&
-      node.firstChild.isLeadingSpaceSensitive
-    ) {
-      return line;
-    }
-    if (
-      node.firstChild.type === "text" &&
-      node.isWhitespaceSensitive &&
-      node.isIndentationSensitive
-    ) {
-      return dedentToRoot(softline);
-    }
-    return softline;
-  };
-
-  const printLineAfterChildren = () => {
-    const needsToBorrow = node.next
-      ? needsToBorrowPrevClosingTagEndMarker(node.next)
-      : needsToBorrowLastChildClosingTagEndMarker(node.parent);
-    if (needsToBorrow) {
-      if (
-        node.lastChild.hasTrailingSpaces &&
-        node.lastChild.isTrailingSpaceSensitive
-      ) {
-        return " ";
-      }
-      return "";
-    }
-    if (shouldHugContent) {
-      return ifBreak(softline, "", { groupId: attrGroupId });
-    }
-    if (
-      node.lastChild.hasTrailingSpaces &&
-      node.lastChild.isTrailingSpaceSensitive
-    ) {
-      return line;
-    }
-    if (
-      (node.lastChild.type === "comment" ||
-        (node.lastChild.type === "text" &&
-          node.isWhitespaceSensitive &&
-          node.isIndentationSensitive)) &&
-      new RegExp(
-        `\\n[\\t ]{${
-          options.tabWidth *
-          countParents(
-            path,
-            (node) => node.parent && node.parent.type !== "root"
-          )
-        }}$`
-      ).test(node.lastChild.value)
-    ) {
-      return "";
-    }
-    return softline;
-  };
-
-  if (node.children.length === 0) {
-    return printTag(
-      node.hasDanglingSpaces && node.isDanglingSpaceSensitive ? line : ""
-    );
-  }
-
-  return printTag([
-    forceBreakContent(node) ? breakParent : "",
-    printChildrenDoc([
-      printLineBeforeChildren(),
-      printChildren(path, options, print),
-    ]),
-    printLineAfterChildren(),
-  ]);
-}
-
-function printChildren(path, options, print) {
-  const node = path.getValue();
-
-  if (forceBreakChildren(node)) {
-    return [
-      breakParent,
-
-      ...path.map((childPath) => {
-        const childNode = childPath.getValue();
-        const prevBetweenLine = !childNode.prev
-          ? ""
-          : printBetweenLine(childNode.prev, childNode);
-        return [
-          !prevBetweenLine
-            ? ""
-            : [
-                prevBetweenLine,
-                forceNextEmptyLine(childNode.prev) ? hardline : "",
-              ],
-          printChild(childPath),
-        ];
-      }, "children"),
-    ];
-  }
-
-  const groupIds = node.children.map(() => Symbol(""));
-  return path.map((childPath, childIndex) => {
-    const childNode = childPath.getValue();
-
-    if (isTextLikeNode(childNode)) {
-      if (childNode.prev && isTextLikeNode(childNode.prev)) {
-        const prevBetweenLine = printBetweenLine(childNode.prev, childNode);
-        if (prevBetweenLine) {
-          if (forceNextEmptyLine(childNode.prev)) {
-            return [hardline, hardline, printChild(childPath)];
-          }
-          return [prevBetweenLine, printChild(childPath)];
-        }
-      }
-      return printChild(childPath);
-    }
-
-    const prevParts = [];
-    const leadingParts = [];
-    const trailingParts = [];
-    const nextParts = [];
-
-    const prevBetweenLine = childNode.prev
-      ? printBetweenLine(childNode.prev, childNode)
-      : "";
-
-    const nextBetweenLine = childNode.next
-      ? printBetweenLine(childNode, childNode.next)
-      : "";
-
-    if (prevBetweenLine) {
-      if (forceNextEmptyLine(childNode.prev)) {
-        prevParts.push(hardline, hardline);
-      } else if (prevBetweenLine === hardline) {
-        prevParts.push(hardline);
-      } else {
-        if (isTextLikeNode(childNode.prev)) {
-          leadingParts.push(prevBetweenLine);
-        } else {
-          leadingParts.push(
-            ifBreak("", softline, {
-              groupId: groupIds[childIndex - 1],
-            })
-          );
-        }
-      }
-    }
-
-    if (nextBetweenLine) {
-      if (forceNextEmptyLine(childNode)) {
-        if (isTextLikeNode(childNode.next)) {
-          nextParts.push(hardline, hardline);
-        }
-      } else if (nextBetweenLine === hardline) {
-        if (isTextLikeNode(childNode.next)) {
-          nextParts.push(hardline);
-        }
-      } else {
-        trailingParts.push(nextBetweenLine);
-      }
-    }
-
-    return [
-      ...prevParts,
-      group([
-        ...leadingParts,
-        group([printChild(childPath), ...trailingParts], {
-          id: groupIds[childIndex],
-        }),
-      ]),
-      ...nextParts,
-    ];
-  }, "children");
-
-  function printChild(childPath) {
-    const child = childPath.getValue();
-
-    if (hasPrettierIgnore(child)) {
-      return [
-        printOpeningTagPrefix(child, options),
-        ...replaceTextEndOfLine(
-          options.originalText.slice(
-            locStart(child) +
-              (child.prev && needsToBorrowNextOpeningTagStartMarker(child.prev)
-                ? printOpeningTagStartMarker(child).length
-                : 0),
-            locEnd(child) -
-              (child.next && needsToBorrowPrevClosingTagEndMarker(child.next)
-                ? printClosingTagEndMarker(child, options).length
-                : 0)
-          )
-        ),
-        printClosingTagSuffix(child, options),
-      ];
-    }
-
-    return print();
-  }
-
-  function printBetweenLine(prevNode, nextNode) {
-    return isTextLikeNode(prevNode) && isTextLikeNode(nextNode)
-      ? prevNode.isTrailingSpaceSensitive
-        ? prevNode.hasTrailingSpaces
-          ? preferHardlineAsLeadingSpaces(nextNode)
-            ? hardline
-            : line
-          : ""
-        : preferHardlineAsLeadingSpaces(nextNode)
-        ? hardline
-        : softline
-      : (needsToBorrowNextOpeningTagStartMarker(prevNode) &&
-          (hasPrettierIgnore(nextNode) ||
-            /**
-             *     123<a
-             *          ~
-             *       ><b>
-             */
-            nextNode.firstChild ||
-            /**
-             *     123<!--
-             *            ~
-             *     -->
-             */
-            nextNode.isSelfClosing ||
-            /**
-             *     123<span
-             *             ~
-             *       attr
-             */
-            (nextNode.type === "element" && nextNode.attrs.length > 0))) ||
-        /**
-         *     <img
-         *       src="long"
-         *                 ~
-         *     />123
-         */
-        (prevNode.type === "element" &&
-          prevNode.isSelfClosing &&
-          needsToBorrowPrevClosingTagEndMarker(nextNode))
-      ? ""
-      : !nextNode.isLeadingSpaceSensitive ||
-        preferHardlineAsLeadingSpaces(nextNode) ||
-        /**
-         *       Want to write us a letter? Use our<a
-         *         ><b><a>mailing address</a></b></a
-         *                                          ~
-         *       >.
-         */
-        (needsToBorrowPrevClosingTagEndMarker(nextNode) &&
-          prevNode.lastChild &&
-          needsToBorrowParentClosingTagStartMarker(prevNode.lastChild) &&
-          prevNode.lastChild.lastChild &&
-          needsToBorrowParentClosingTagStartMarker(
-            prevNode.lastChild.lastChild
-          ))
-      ? hardline
-      : nextNode.hasLeadingSpaces
-      ? line
-      : softline;
-  }
-}
-
 module.exports = {
   preprocess,
   print: genericPrint,

From 0cc8e96c3746dc9d6f2b77b6d1e8fe4ad164e700 Mon Sep 17 00:00:00 2001
From: fisker Cheung <lionkay@gmail.com>
Date: Thu, 9 Sep 2021 18:53:31 +0800
Subject: [PATCH 08/13] Refactor `installPrettier` (#11476)

---
 jest.config.js                   |  2 +-
 scripts/install-prettier.js      | 36 -------------------------
 tests/config/install-prettier.js | 46 ++++++++++++++++++++++++++++++++
 3 files changed, 47 insertions(+), 37 deletions(-)
 delete mode 100644 scripts/install-prettier.js
 create mode 100644 tests/config/install-prettier.js

diff --git a/jest.config.js b/jest.config.js
index c7338504c..cef136fd3 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,7 +1,7 @@
 "use strict";
 
 const path = require("path");
-const installPrettier = require("./scripts/install-prettier.js");
+const installPrettier = require("./tests/config/install-prettier.js");
 
 const PROJECT_ROOT = __dirname;
 const isProduction = process.env.NODE_ENV === "production";
diff --git a/scripts/install-prettier.js b/scripts/install-prettier.js
deleted file mode 100644
index d435defa6..000000000
--- a/scripts/install-prettier.js
+++ /dev/null
@@ -1,36 +0,0 @@
-"use strict";
-
-const path = require("path");
-const shell = require("shelljs");
-const tempy = require("tempy");
-
-shell.config.fatal = true;
-
-const client = process.env.NPM_CLIENT || "yarn";
-
-module.exports = (packageDir) => {
-  const tmpDir = tempy.directory();
-  const file = shell.exec("npm pack", { cwd: packageDir }).stdout.trim();
-  shell.mv(path.join(packageDir, file), tmpDir);
-  const tarPath = path.join(tmpDir, file);
-
-  shell.exec(`${client} init -y`, { cwd: tmpDir, silent: true });
-  let installCommand = "";
-  switch (client) {
-    case "npm":
-      // npm fails when engine requirement only with `--engine-strict`
-      installCommand = `npm install "${tarPath}" --engine-strict`;
-      break;
-    case "pnpm":
-      // Note: current pnpm can't work with `--engine-strict` and engineStrict setting in `.npmrc`
-      installCommand = `pnpm add "${tarPath}"`;
-      break;
-    default:
-      // yarn fails when engine requirement not compatible by default
-      installCommand = `yarn add "${tarPath}"`;
-  }
-
-  shell.exec(installCommand, { cwd: tmpDir });
-
-  return path.join(tmpDir, "node_modules/prettier");
-};
diff --git a/tests/config/install-prettier.js b/tests/config/install-prettier.js
new file mode 100644
index 000000000..2be746ab4
--- /dev/null
+++ b/tests/config/install-prettier.js
@@ -0,0 +1,46 @@
+"use strict";
+
+const path = require("path");
+const fs = require("fs");
+const execa = require("execa");
+const tempy = require("tempy");
+
+const allowedClients = new Set(["yarn", "npm", "pnpm"]);
+
+let client = process.env.NPM_CLIENT;
+if (!allowedClients.has(client)) {
+  client = "yarn";
+}
+
+module.exports = (packageDir) => {
+  const tmpDir = tempy.directory();
+  const fileName = execa
+    .sync("npm", ["pack"], { cwd: packageDir })
+    .stdout.trim();
+  const file = path.join(packageDir, fileName);
+  const packed = path.join(tmpDir, fileName);
+  fs.copyFileSync(file, packed);
+  fs.unlinkSync(file);
+
+  execa.sync(client, ["init", "-y"], { cwd: tmpDir });
+
+  let installArguments = [];
+  switch (client) {
+    case "npm":
+      // npm fails when engine requirement only with `--engine-strict`
+      installArguments = ["install", packed, "--engine-strict"];
+      break;
+    case "pnpm":
+      // Note: current pnpm can't work with `--engine-strict` and engineStrict setting in `.npmrc`
+      installArguments = ["add", packed, "--engine-strict"];
+      break;
+    default:
+      // yarn fails when engine requirement not compatible by default
+      installArguments = ["add", packed];
+  }
+
+  execa.sync(client, installArguments, { cwd: tmpDir });
+  fs.unlinkSync(packed);
+
+  return path.join(tmpDir, "node_modules/prettier");
+};

From 4b2ba4582510121e7139dd388e8ceafc41faf70b Mon Sep 17 00:00:00 2001
From: fisker Cheung <lionkay@gmail.com>
Date: Thu, 9 Sep 2021 18:54:45 +0800
Subject: [PATCH 09/13] Fix the `trailingComma` value from `"always"` to
 `"all"` in v2 blog post (#11480)

---
 website/blog/2020-03-21-2.0.0.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/blog/2020-03-21-2.0.0.md b/website/blog/2020-03-21-2.0.0.md
index 7ade3ab9c..b2e94e421 100644
--- a/website/blog/2020-03-21-2.0.0.md
+++ b/website/blog/2020-03-21-2.0.0.md
@@ -116,7 +116,7 @@ Prettier has included an [option to configure trailing commas](https://prettier.
 Finally, the default value becomes `es5` instead of `none` in Prettier v2.0.
 
 If the old behavior is still preferred, please configure Prettier with `{ "trailingComma": "none" }`.
-There is a possibility that the default value will change to `always` (meaning even more trailing commas) in a future major version of Prettier as the JavaScript ecosystem further matures.
+There is a possibility that the default value will change to `all` (meaning even more trailing commas) in a future major version of Prettier as the JavaScript ecosystem further matures.
 
 #### Plugin API: changes in `prettier.util` ([#6993](https://github.com/prettier/prettier/pull/6993) by [@fisker](https://github.com/fisker))
 

From 6739679767652700fd11cbe38c059aa7860650a0 Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Thu, 9 Sep 2021 19:59:04 +0900
Subject: [PATCH 10/13] Revert workaround (#11481)

---
 website/playground/Playground.js | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/website/playground/Playground.js b/website/playground/Playground.js
index 234e87feb..222896080 100644
--- a/website/playground/Playground.js
+++ b/website/playground/Playground.js
@@ -28,8 +28,6 @@ const MAX_LENGTH = 8000 - ISSUES_URL.length; // it seems that GitHub limit is 81
 const COPY_MESSAGE =
   "<!-- The issue body has been saved to the clipboard. Please paste it after this line! 👇 -->\n";
 
-const isProduction = location.host === "prettier.io";
-const isPreview = location.host.includes("netlify.app");
 const ENABLED_OPTIONS = [
   "parser",
   "printWidth",
@@ -48,15 +46,8 @@ const ENABLED_OPTIONS = [
   "requirePragma",
   "vueIndentScriptAndStyle",
   "embeddedLanguageFormatting",
+  "bracketSameLine",
 ];
-// "jsxBracketSameLine" will be deprecated in 2.4
-if (isProduction) {
-  ENABLED_OPTIONS.push("jsxBracketSameLine");
-}
-// "bracketSameLine" will be landed in 2.4
-if (isPreview) {
-  ENABLED_OPTIONS.push("bracketSameLine");
-}
 
 class Playground extends React.Component {
   constructor(props) {

From d3d1bc19bde38293b8d0fe0431996f9645133b12 Mon Sep 17 00:00:00 2001
From: fisker Cheung <lionkay@gmail.com>
Date: Thu, 9 Sep 2021 19:13:59 +0800
Subject: [PATCH 11/13] Use pnpm 6 (#11477)

---
 .github/workflows/dev-package-test.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/dev-package-test.yml b/.github/workflows/dev-package-test.yml
index 625a8b5f7..dd3b770f2 100644
--- a/.github/workflows/dev-package-test.yml
+++ b/.github/workflows/dev-package-test.yml
@@ -44,7 +44,7 @@ jobs:
 
       - name: Install Client Package
         if: ${{ matrix.NPM_CLIENT == 'pnpm' }}
-        run: npm install --global pnpm@5
+        run: npm install --global pnpm
 
       - name: Run Tests
         run: yarn test:dev-package --maxWorkers=2

From 2664fcb2baac16ed99d298ff7e6416e01ccf08d9 Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Fri, 10 Sep 2021 11:17:09 +0900
Subject: [PATCH 12/13] Enable `import/no-anonymous-default-export` (#11478)

* Enable import/no-anonymous-default-export

* Add names to default exported

* More

* Ignore shims

* Update scripts/build/config.mjs

Co-authored-by: fisker Cheung <lionkay@gmail.com>

* lint  for shims

Co-authored-by: fisker Cheung <lionkay@gmail.com>
---
 .eslintrc.js                                     | 1 +
 scripts/build/config.mjs                         | 3 ++-
 scripts/build/rollup-plugins/evaluate.mjs        | 2 +-
 scripts/build/rollup-plugins/executable.mjs      | 2 +-
 scripts/build/rollup-plugins/replace-module.mjs  | 2 +-
 scripts/build/shims/fs.mjs                       | 3 ++-
 scripts/build/shims/os.mjs                       | 3 ++-
 scripts/build/shims/tty.mjs                      | 3 ++-
 scripts/release/steps/bump-prettier.js           | 2 +-
 scripts/release/steps/check-git-status.js        | 2 +-
 scripts/release/steps/generate-bundles.js        | 2 +-
 scripts/release/steps/install-dependencies.js    | 2 +-
 scripts/release/steps/post-publish-steps.js      | 2 +-
 scripts/release/steps/publish-to-npm.js          | 2 +-
 scripts/release/steps/push-to-git.js             | 2 +-
 scripts/release/steps/run-tests.js               | 2 +-
 scripts/release/steps/update-changelog.js        | 2 +-
 scripts/release/steps/update-dependents-count.js | 2 +-
 scripts/release/steps/update-version.js          | 2 +-
 scripts/release/steps/validate-new-version.js    | 2 +-
 website/playground/BottomBar.js                  | 2 +-
 website/playground/EditorState.js                | 2 +-
 website/playground/VersionLink.js                | 2 +-
 website/playground/WorkerApi.js                  | 2 +-
 website/playground/codeSamples.js                | 2 +-
 website/playground/sidebar/SidebarOptions.js     | 2 +-
 website/playground/sidebar/options.js            | 2 +-
 27 files changed, 31 insertions(+), 26 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 965feb75e..562538ab6 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -97,6 +97,7 @@ module.exports = {
       },
     ],
     "import/order": "error",
+    "import/no-anonymous-default-export": "error",
 
     "regexp/match-any": [
       "error",
diff --git a/scripts/build/config.mjs b/scripts/build/config.mjs
index babccfac2..4a6952a2b 100644
--- a/scripts/build/config.mjs
+++ b/scripts/build/config.mjs
@@ -162,4 +162,5 @@ const coreBundles = [
   ...bundle,
 }));
 
-export default [...coreBundles, ...parsers];
+const configs = [...coreBundles, ...parsers];
+export default configs;
diff --git a/scripts/build/rollup-plugins/evaluate.mjs b/scripts/build/rollup-plugins/evaluate.mjs
index d793380be..bf60d0aef 100644
--- a/scripts/build/rollup-plugins/evaluate.mjs
+++ b/scripts/build/rollup-plugins/evaluate.mjs
@@ -2,7 +2,7 @@ import createEsmUtils from "esm-utils";
 
 const { require } = createEsmUtils(import.meta);
 
-export default function () {
+export default function rollupPluginEvaluate() {
   return {
     name: "evaluate",
 
diff --git a/scripts/build/rollup-plugins/executable.mjs b/scripts/build/rollup-plugins/executable.mjs
index 10f35df4b..651dd1439 100644
--- a/scripts/build/rollup-plugins/executable.mjs
+++ b/scripts/build/rollup-plugins/executable.mjs
@@ -1,7 +1,7 @@
 import fs from "node:fs";
 import path from "node:path";
 
-export default function () {
+export default function rollupPluginExecutable() {
   let banner;
   let entry;
   let file;
diff --git a/scripts/build/rollup-plugins/replace-module.mjs b/scripts/build/rollup-plugins/replace-module.mjs
index fe1ded959..5d84dd8c5 100644
--- a/scripts/build/rollup-plugins/replace-module.mjs
+++ b/scripts/build/rollup-plugins/replace-module.mjs
@@ -1,4 +1,4 @@
-export default function (replacements = {}) {
+export default function rollupPluginReplaceModule(replacements = {}) {
   return {
     name: "replace-module",
 
diff --git a/scripts/build/shims/fs.mjs b/scripts/build/shims/fs.mjs
index 26a5b26c2..a91fc24ce 100644
--- a/scripts/build/shims/fs.mjs
+++ b/scripts/build/shims/fs.mjs
@@ -1,3 +1,4 @@
 export const existsSync = () => false;
 export const readFileSync = () => "";
-export default { existsSync, readFileSync };
+const fs = { existsSync, readFileSync };
+export default fs;
diff --git a/scripts/build/shims/os.mjs b/scripts/build/shims/os.mjs
index 27e543d96..a39aa4726 100644
--- a/scripts/build/shims/os.mjs
+++ b/scripts/build/shims/os.mjs
@@ -1,5 +1,6 @@
-export default {
+const os = {
   EOL: "\n",
   platform: () => "browser",
   cpus: () => [{ model: "Prettier" }],
 };
+export default os;
diff --git a/scripts/build/shims/tty.mjs b/scripts/build/shims/tty.mjs
index 0fdd5b758..8023208d1 100644
--- a/scripts/build/shims/tty.mjs
+++ b/scripts/build/shims/tty.mjs
@@ -1,5 +1,6 @@
-export default {
+const tty = {
   isatty() {
     return false;
   },
 };
+export default tty;
diff --git a/scripts/release/steps/bump-prettier.js b/scripts/release/steps/bump-prettier.js
index 0084a1eb2..de98b4bd8 100644
--- a/scripts/release/steps/bump-prettier.js
+++ b/scripts/release/steps/bump-prettier.js
@@ -36,7 +36,7 @@ async function bump({
   await writeJson("package.json", pkg, { spaces: 2 });
 }
 
-export default async function (params) {
+export default async function bumpPrettier(params) {
   const { dry, version } = params;
 
   if (dry) {
diff --git a/scripts/release/steps/check-git-status.js b/scripts/release/steps/check-git-status.js
index 7860b3ec3..400cc8b0e 100644
--- a/scripts/release/steps/check-git-status.js
+++ b/scripts/release/steps/check-git-status.js
@@ -1,6 +1,6 @@
 import { runGit } from "../utils.js";
 
-export default async function () {
+export default async function checkGitStatus() {
   const { stdout: status } = await runGit(["status", "--porcelain"]);
 
   if (status) {
diff --git a/scripts/release/steps/generate-bundles.js b/scripts/release/steps/generate-bundles.js
index f5b799aba..d513cc43f 100644
--- a/scripts/release/steps/generate-bundles.js
+++ b/scripts/release/steps/generate-bundles.js
@@ -1,7 +1,7 @@
 import chalk from "chalk";
 import { runYarn, logPromise, readJson } from "../utils.js";
 
-export default async function ({ version }) {
+export default async function generateBundles({ version }) {
   await logPromise("Generating bundles", runYarn(["build", "--purge-cache"]));
 
   const builtPkg = await readJson("dist/package.json");
diff --git a/scripts/release/steps/install-dependencies.js b/scripts/release/steps/install-dependencies.js
index 8d5928143..202974019 100644
--- a/scripts/release/steps/install-dependencies.js
+++ b/scripts/release/steps/install-dependencies.js
@@ -13,6 +13,6 @@ async function install() {
   }
 }
 
-export default function () {
+export default function installDependencies() {
   return logPromise("Installing NPM dependencies", install());
 }
diff --git a/scripts/release/steps/post-publish-steps.js b/scripts/release/steps/post-publish-steps.js
index 3d4346149..3447d52f1 100644
--- a/scripts/release/steps/post-publish-steps.js
+++ b/scripts/release/steps/post-publish-steps.js
@@ -43,7 +43,7 @@ function twitterAnnouncement() {
   `);
 }
 
-export default async function () {
+export default async function postPublishSteps() {
   const steps = [await checkSchema(), twitterAnnouncement()].filter(Boolean);
 
   console.log(chalk.bold.green("The script has finished!\n"));
diff --git a/scripts/release/steps/publish-to-npm.js b/scripts/release/steps/publish-to-npm.js
index f4fede901..587f92c09 100644
--- a/scripts/release/steps/publish-to-npm.js
+++ b/scripts/release/steps/publish-to-npm.js
@@ -27,7 +27,7 @@ async function retryNpmPublish() {
   }
 }
 
-export default async function ({ dry, version }) {
+export default async function publishToNpm({ dry, version }) {
   if (dry) {
     return;
   }
diff --git a/scripts/release/steps/push-to-git.js b/scripts/release/steps/push-to-git.js
index 914b53713..e794a52f9 100644
--- a/scripts/release/steps/push-to-git.js
+++ b/scripts/release/steps/push-to-git.js
@@ -7,7 +7,7 @@ async function pushGit({ version }) {
   await runGit(["push", "--tags"]);
 }
 
-export default function (params) {
+export default function pushToGit(params) {
   if (params.dry) {
     return;
   }
diff --git a/scripts/release/steps/run-tests.js b/scripts/release/steps/run-tests.js
index cf1f4880b..268a104bf 100644
--- a/scripts/release/steps/run-tests.js
+++ b/scripts/release/steps/run-tests.js
@@ -1,6 +1,6 @@
 import { runYarn, logPromise } from "../utils.js";
 
-export default async function () {
+export default async function runTests() {
   await logPromise("Running linter", runYarn("lint:eslint"));
   await logPromise("Running Prettier on docs", runYarn("lint:prettier"));
   await logPromise("Running tests", runYarn("test"));
diff --git a/scripts/release/steps/update-changelog.js b/scripts/release/steps/update-changelog.js
index 1f3d0abcb..3d66b5f19 100644
--- a/scripts/release/steps/update-changelog.js
+++ b/scripts/release/steps/update-changelog.js
@@ -42,7 +42,7 @@ async function getChangelogForPatch({ version, previousVersion }) {
   return changelog;
 }
 
-export default async function ({ version, previousVersion }) {
+export default async function updateChangelog({ version, previousVersion }) {
   const semverDiff = semver.diff(version, previousVersion);
 
   if (semverDiff !== "patch") {
diff --git a/scripts/release/steps/update-dependents-count.js b/scripts/release/steps/update-dependents-count.js
index ce46a0e50..7fa3e8037 100644
--- a/scripts/release/steps/update-dependents-count.js
+++ b/scripts/release/steps/update-dependents-count.js
@@ -71,7 +71,7 @@ function formatNumber(value) {
   return Math.floor(value / 1e5) / 10 + " million";
 }
 
-export default async function () {
+export default async function updateDependentsCount() {
   try {
     await update();
   } catch (error) {
diff --git a/scripts/release/steps/update-version.js b/scripts/release/steps/update-version.js
index dce557463..78b7004c2 100644
--- a/scripts/release/steps/update-version.js
+++ b/scripts/release/steps/update-version.js
@@ -32,6 +32,6 @@ async function bump({ version }) {
   });
 }
 
-export default async function (params) {
+export default async function updateVersion(params) {
   await logPromise("Bumping version", bump(params));
 }
diff --git a/scripts/release/steps/validate-new-version.js b/scripts/release/steps/validate-new-version.js
index b936f4625..09ed33051 100644
--- a/scripts/release/steps/validate-new-version.js
+++ b/scripts/release/steps/validate-new-version.js
@@ -1,7 +1,7 @@
 import chalk from "chalk";
 import semver from "semver";
 
-export default function ({ version, previousVersion }) {
+export default function validateNewVersion({ version, previousVersion }) {
   if (!semver.valid(version)) {
     throw new Error("Invalid version specified");
   }
diff --git a/website/playground/BottomBar.js b/website/playground/BottomBar.js
index 61a87822f..85ae212ae 100644
--- a/website/playground/BottomBar.js
+++ b/website/playground/BottomBar.js
@@ -3,7 +3,7 @@ import * as ReactDOM from "react-dom";
 
 const root = document.getElementById("bottom-bar");
 
-export default function ({ left, right }) {
+export default function BottomBar({ left, right }) {
   return ReactDOM.createPortal(
     <React.Fragment>
       <div className="bottom-bar-buttons">{left}</div>
diff --git a/website/playground/EditorState.js b/website/playground/EditorState.js
index 69c6de097..6396cf0c3 100644
--- a/website/playground/EditorState.js
+++ b/website/playground/EditorState.js
@@ -3,7 +3,7 @@ import * as React from "react";
 import { stateToggler, shallowEqual } from "./helpers.js";
 import * as storage from "./storage.js";
 
-export default class extends React.Component {
+export default class EditorState extends React.Component {
   constructor() {
     super();
     this.state = {
diff --git a/website/playground/VersionLink.js b/website/playground/VersionLink.js
index e466ef312..9b32adf0a 100644
--- a/website/playground/VersionLink.js
+++ b/website/playground/VersionLink.js
@@ -3,7 +3,7 @@ import * as ReactDOM from "react-dom";
 
 const root = document.getElementById("version");
 
-export default function ({ version }) {
+export default function VersionLink({ version }) {
   const match = version.match(/^pr-(\d+)$/);
   let href;
   if (match) {
diff --git a/website/playground/WorkerApi.js b/website/playground/WorkerApi.js
index 8deae41df..c251741f2 100644
--- a/website/playground/WorkerApi.js
+++ b/website/playground/WorkerApi.js
@@ -1,4 +1,4 @@
-export default function (source) {
+export default function WorkerApi(source) {
   const worker = new Worker(source);
   let counter = 0;
   const handlers = {};
diff --git a/website/playground/codeSamples.js b/website/playground/codeSamples.js
index e5b258633..8fbb71c0d 100644
--- a/website/playground/codeSamples.js
+++ b/website/playground/codeSamples.js
@@ -1,4 +1,4 @@
-export default function (parser) {
+export default function getCodeSamples(parser) {
   switch (parser) {
     case "babel":
     case "espree":
diff --git a/website/playground/sidebar/SidebarOptions.js b/website/playground/sidebar/SidebarOptions.js
index 09ed4985b..c41c3c484 100644
--- a/website/playground/sidebar/SidebarOptions.js
+++ b/website/playground/sidebar/SidebarOptions.js
@@ -4,7 +4,7 @@ import groupBy from "lodash/groupBy";
 import { SidebarCategory } from "./components.js";
 import Option from "./options.js";
 
-export default function ({
+export default function SidebarOptions({
   categories,
   availableOptions,
   optionValues,
diff --git a/website/playground/sidebar/options.js b/website/playground/sidebar/options.js
index 376f6e713..7dd445054 100644
--- a/website/playground/sidebar/options.js
+++ b/website/playground/sidebar/options.js
@@ -42,7 +42,7 @@ export function NumberOption({ option, value, onChange }) {
   );
 }
 
-export default function (props) {
+export default function Option(props) {
   switch (props.option.type) {
     case "boolean":
       return <BooleanOption {...props} />;

From 8a01dee53e79ede37aed6d882b73fefe6090ff20 Mon Sep 17 00:00:00 2001
From: fisker Cheung <lionkay@gmail.com>
Date: Fri, 10 Sep 2021 10:20:43 +0800
Subject: [PATCH 13/13] Refactor build script (#11475)

---
 scripts/build/build.mjs   | 75 ++++++++++++++++++---------------------
 scripts/build/bundler.mjs | 14 +++++---
 scripts/build/cache.mjs   | 72 ++++++++++++++++++++-----------------
 scripts/build/utils.mjs   | 22 ++++++++++--
 4 files changed, 101 insertions(+), 82 deletions(-)

diff --git a/scripts/build/build.mjs b/scripts/build/build.mjs
index cc7a6c4af..2c718da65 100644
--- a/scripts/build/build.mjs
+++ b/scripts/build/build.mjs
@@ -4,12 +4,19 @@ import path from "node:path";
 import fs from "node:fs/promises";
 import readline from "node:readline";
 import chalk from "chalk";
-import execa from "execa";
 import minimist from "minimist";
 import prettyBytes from "pretty-bytes";
+import rimraf from "rimraf";
 import bundler from "./bundler.mjs";
 import bundleConfigs from "./config.mjs";
-import * as utils from "./utils.mjs";
+import {
+  PROJECT_ROOT,
+  CACHE_DIR,
+  DIST_DIR,
+  readJson,
+  writeJson,
+  copyFile,
+} from "./utils.mjs";
 import Cache from "./cache.mjs";
 
 // Errors in promises should be fatal.
@@ -67,7 +74,7 @@ async function createBundle(bundleConfig, cache, options) {
       return;
     }
 
-    const file = path.join("dist", output);
+    const file = path.join(DIST_DIR, output);
 
     // Files including U+FFEE can't load in Chrome Extension
     // `prettier-chrome-extension` https://github.com/prettier/prettier-chrome-extension
@@ -93,7 +100,11 @@ async function createBundle(bundleConfig, cache, options) {
         bundleConfig.bundler !== "webpack" &&
         target === "universal"
       ) {
-        const esmFile = path.join("dist/esm", output.replace(".js", ".mjs"));
+        const esmFile = path.join(
+          DIST_DIR,
+          "esm",
+          output.replace(".js", ".mjs")
+        );
         sizeTexts.push(`esm ${await getSizeText(esmFile)}`);
       }
       process.stdout.write(fitTerminal(output, `${sizeTexts.join(", ")} `));
@@ -112,41 +123,23 @@ function handleError(error) {
   throw error;
 }
 
-async function cacheFiles(cache) {
-  // Copy built files to .cache
-  try {
-    await execa("rm", ["-rf", path.join(".cache", "files")]);
-    await execa("mkdir", ["-p", path.join(".cache", "files")]);
-    await execa("mkdir", ["-p", path.join(".cache", "files", "esm")]);
-    const manifest = cache.updated;
-
-    for (const file of Object.keys(manifest.files)) {
-      await execa("cp", [
-        file,
-        path.join(".cache", file.replace("dist", "files")),
-      ]);
-    }
-  } catch {
-    // Don't fail the build
-  }
-}
-
 async function preparePackage() {
-  const pkg = await utils.readJson("package.json");
-  pkg.bin = "./bin-prettier.js";
-  pkg.engines.node = ">=10.13.0";
-  delete pkg.dependencies;
-  delete pkg.devDependencies;
-  delete pkg.browserslist;
-  pkg.scripts = {
+  const packageJson = await readJson(path.join(PROJECT_ROOT, "package.json"));
+  packageJson.bin = "./bin-prettier.js";
+  packageJson.engines.node = ">=10.13.0";
+  delete packageJson.dependencies;
+  delete packageJson.devDependencies;
+  delete packageJson.browserslist;
+  packageJson.scripts = {
     prepublishOnly:
       "node -e \"assert.equal(require('.').version, require('..').version)\"",
   };
-  pkg.files = ["*.js", "esm/*.mjs"];
-  await utils.writeJson("dist/package.json", pkg);
+  packageJson.files = ["*.js", "esm/*.mjs"];
+  await writeJson(path.join(DIST_DIR, "package.json"), packageJson);
 
-  await utils.copyFile("./README.md", "./dist/README.md");
-  await utils.copyFile("./LICENSE", "./dist/LICENSE");
+  for (const file of ["README.md", "LICENSE"]) {
+    await copyFile(path.join(PROJECT_ROOT, file), path.join(DIST_DIR, file));
+  }
 }
 
 async function run(params) {
@@ -156,19 +149,20 @@ async function run(params) {
   if (params.file) {
     configs = configs.filter(({ output }) => output === params.file);
   } else {
-    await execa("rm", ["-rf", "dist"]);
+    rimraf.sync(DIST_DIR);
   }
 
-  await execa("mkdir", ["-p", "dist"]);
-  await execa("mkdir", ["-p", "dist/esm"]);
-
   if (params["purge-cache"]) {
-    await execa("rm", ["-rf", ".cache"]);
+    rimraf.sync(CACHE_DIR);
   }
 
   let bundleCache;
   if (shouldUseCache) {
-    bundleCache = new Cache(".cache/", CACHE_VERSION);
+    bundleCache = new Cache({
+      cacheDir: CACHE_DIR,
+      distDir: DIST_DIR,
+      version: CACHE_VERSION,
+    });
     await bundleCache.load();
   }
 
@@ -179,7 +173,6 @@ async function run(params) {
   }
 
   if (shouldUseCache) {
-    await cacheFiles(bundleCache);
     await bundleCache.save();
   }
 
diff --git a/scripts/build/bundler.mjs b/scripts/build/bundler.mjs
index 05a228428..97a1e1a53 100644
--- a/scripts/build/bundler.mjs
+++ b/scripts/build/bundler.mjs
@@ -17,9 +17,9 @@ import rollupPluginExecutable from "./rollup-plugins/executable.mjs";
 import rollupPluginEvaluate from "./rollup-plugins/evaluate.mjs";
 import rollupPluginReplaceModule from "./rollup-plugins/replace-module.mjs";
 import bundles from "./config.mjs";
+import { PROJECT_ROOT, DIST_DIR } from "./utils.mjs";
 
 const { __dirname, require, json } = createEsmUtils(import.meta);
-const PROJECT_ROOT = path.join(__dirname, "../..");
 const packageJson = json.loadSync("../../package.json");
 
 const entries = [
@@ -114,7 +114,7 @@ function getBabelConfig(bundle) {
 
 function getRollupConfig(bundle) {
   const config = {
-    input: bundle.input,
+    input: path.join(PROJECT_ROOT, bundle.input),
     onwarn(warning) {
       if (
         // ignore `MIXED_EXPORTS` warn
@@ -255,7 +255,7 @@ function getRollupOutputOptions(bundle, buildOptions) {
   const options = {
     // Avoid warning form #8797
     exports: "auto",
-    file: `dist/${bundle.output}`,
+    file: path.join(DIST_DIR, bundle.output),
     name: bundle.name,
     plugins: [
       bundle.minify !== false &&
@@ -280,7 +280,10 @@ function getRollupOutputOptions(bundle, buildOptions) {
         !buildOptions.playground && {
           ...options,
           format: "esm",
-          file: `dist/esm/${bundle.output.replace(".js", ".mjs")}`,
+          file: path.join(
+            DIST_DIR,
+            `esm/${bundle.output.replace(".js", ".mjs")}`
+          ),
         },
       ].filter(Boolean);
     }
@@ -290,6 +293,7 @@ function getRollupOutputOptions(bundle, buildOptions) {
   if (buildOptions.playground && bundle.bundler !== "webpack") {
     return { skipped: true };
   }
+
   return [options];
 }
 
@@ -314,7 +318,7 @@ function getWebpackConfig(bundle) {
       ],
     },
     output: {
-      path: path.resolve(PROJECT_ROOT, "dist"),
+      path: DIST_DIR,
       filename: bundle.output,
       library: {
         type: "umd",
diff --git a/scripts/build/cache.mjs b/scripts/build/cache.mjs
index 6da2afb74..3e1a80c31 100644
--- a/scripts/build/cache.mjs
+++ b/scripts/build/cache.mjs
@@ -2,17 +2,14 @@ import { strict as assert } from "node:assert";
 import crypto from "node:crypto";
 import fs from "node:fs/promises";
 import path from "node:path";
-import execa from "execa";
 import { rollup } from "rollup";
-import createEsmUtils from "esm-utils";
-
-const { __dirname } = createEsmUtils(import.meta);
-const ROOT = path.join(__dirname, "..", "..");
+import { PROJECT_ROOT, readJson, writeJson, copyFile } from "./utils.mjs";
 
 class Cache {
-  constructor(cacheDir, version) {
-    this.cacheDir = path.resolve(cacheDir || required("cacheDir"));
-    this.manifest = path.join(this.cacheDir, "manifest.json");
+  constructor({ cacheDir, distDir, version }) {
+    this.cacheDir = cacheDir || required("cacheDir");
+    this.distDir = distDir || required("distDir");
+    this.manifest = path.join(cacheDir, "manifest.json");
     this.version = version || required("version");
     this.checksums = {};
     this.files = {};
@@ -26,13 +23,15 @@ class Cache {
   // Loads the manifest.json file with the information from the last build
   async load() {
     // This should never throw, if it does, let it fail the build
-    const lockfile = await fs.readFile("yarn.lock", "utf-8");
+    const lockfile = await fs.readFile(
+      path.join(PROJECT_ROOT, "yarn.lock"),
+      "utf8"
+    );
     const lockfileHash = hashString(lockfile);
     this.updated.checksums["yarn.lock"] = lockfileHash;
 
     try {
-      const manifest = await fs.readFile(this.manifest, "utf-8");
-      const { version, checksums, files } = JSON.parse(manifest);
+      const { version, checksums, files } = await readJson(this.manifest);
 
       // Ignore the cache if the version changed
       assert.strictEqual(this.version, version);
@@ -40,17 +39,17 @@ class Cache {
       assert.ok(typeof checksums === "object");
       // If yarn.lock changed, rebuild everything
       assert.strictEqual(lockfileHash, checksums["yarn.lock"]);
-      this.checksums = checksums;
 
       assert.ok(typeof files === "object");
-      this.files = files;
 
-      for (const files of Object.values(this.files)) {
-        assert.ok(Array.isArray(files));
+      for (const modules of Object.values(files)) {
+        assert.ok(Array.isArray(modules));
       }
+
+      this.checksums = checksums;
+      this.files = files;
     } catch {
-      this.checksums = {};
-      this.files = {};
+      // noop
     }
   }
 
@@ -69,7 +68,10 @@ class Cache {
 
     const modules = output
       .filter((mod) => !/\0/.test(mod.facadeModuleId))
-      .map((mod) => [path.relative(ROOT, mod.facadeModuleId), mod.code]);
+      .map((mod) => [
+        path.relative(PROJECT_ROOT, mod.facadeModuleId),
+        mod.code,
+      ]);
 
     for (const [id, code] of modules) {
       newFiles.push(id);
@@ -95,28 +97,32 @@ class Cache {
   }
 
   async save() {
-    try {
-      await fs.writeFile(this.manifest, JSON.stringify(this.updated, null, 2));
-    } catch {
-      // Don't fail the build
+    const { manifest, updated } = this;
+
+    await writeJson(manifest, updated);
+
+    const files = Object.keys(updated.files);
+    for (const file of files) {
+      await copyFile(
+        path.join(this.distDir, file),
+        path.join(this.cacheDir, "files", file)
+      );
     }
   }
 
   async isCached(inputOptions, outputOption) {
-    const useCache = await this.checkBundle(
-      outputOption.file,
-      inputOptions,
-      outputOption
-    );
+    const file = path.relative(this.distDir, outputOption.file);
+    const useCache = await this.checkBundle(file, inputOptions, outputOption);
+
     if (useCache) {
       try {
-        await execa("cp", [
-          path.join(this.cacheDir, outputOption.file.replace("dist", "files")),
-          outputOption.file,
-        ]);
+        await copyFile(
+          path.join(this.cacheDir, "files", file),
+          path.join(this.distDir, file)
+        );
+
         return true;
-      } catch (err) {
-        console.log(err);
+      } catch {
         // Proceed to build
       }
     }
diff --git a/scripts/build/utils.mjs b/scripts/build/utils.mjs
index b474be33f..1c4c6d992 100644
--- a/scripts/build/utils.mjs
+++ b/scripts/build/utils.mjs
@@ -1,4 +1,6 @@
 import fs from "node:fs/promises";
+import url from "node:url";
+import path from "node:path";
 
 async function readJson(file) {
   const data = await fs.readFile(file);
@@ -7,12 +9,26 @@ async function readJson(file) {
 
 function writeJson(file, content) {
   content = JSON.stringify(content, null, 2);
-  return fs.writeFile(file, content);
+  return writeFile(file, content);
 }
 
 async function copyFile(from, to) {
   const data = await fs.readFile(from);
-  return fs.writeFile(to, data);
+  return writeFile(to, data);
 }
 
-export { readJson, writeJson, copyFile };
+async function writeFile(file, content) {
+  const directory = path.dirname(file);
+  try {
+    await fs.mkdir(directory, { recursive: true });
+  } catch {
+    // noop
+  }
+  return fs.writeFile(file, content);
+}
+
+const PROJECT_ROOT = url.fileURLToPath(new URL("../../", import.meta.url));
+const CACHE_DIR = path.join(PROJECT_ROOT, ".cache");
+const DIST_DIR = path.join(PROJECT_ROOT, "dist");
+
+export { PROJECT_ROOT, DIST_DIR, CACHE_DIR, readJson, writeJson, copyFile };