diff --git a/.github/workflows/prod-test.yml b/.github/workflows/prod-test.yml index e649961b0..76348e2ee 100644 --- a/.github/workflows/prod-test.yml +++ b/.github/workflows/prod-test.yml @@ -133,4 +133,4 @@ jobs: run: node -v | grep "v0.10.48" || exit 1 - name: Run CLI on Node.js v0.10.48 - run: node dist/bin-prettier.cjs --version 2>&1 >/dev/null | grep "prettier requires at least version 14 of Node, please upgrade" || exit 1 + run: node dist/bin/prettier.cjs --version 2>&1 >/dev/null | grep "prettier requires at least version 14 of Node, please upgrade" || exit 1 diff --git a/changelog_unreleased/api/12740.md b/changelog_unreleased/api/12740.md index a596abee2..9676f6a1d 100644 --- a/changelog_unreleased/api/12740.md +++ b/changelog_unreleased/api/12740.md @@ -1,13 +1,57 @@ -#### [BREAKING] standalone version export style changed (#12740 by @fisker) +#### [BREAKING] npm package file structures changed (#12740 by @fisker, #13530 by @fisker) -The `esm/standalone.mjs` entry has changed export style from default export to named export. +Export style changes: + +The ESM version standalone entry has changed export style from default export to named export. ```diff -- import prettier from "https://unpkg.com/prettier@2.6.2/esm/standalone.mjs"; -+ import * as prettier from "https://unpkg.com/prettier@3.0.0/esm/standalone.mjs"; +- import prettier from "https://unpkg.com/prettier@2.7.1/esm/standalone.mjs"; ++ import * as prettier from "https://unpkg.com/prettier@3.0.0/standalone.mjs"; ``` ```diff -- import prettier from "https://unpkg.com/prettier@2.6.2/esm/standalone.mjs"; -+ import { format } from "https://unpkg.com/prettier@3.0.0/esm/standalone.mjs"; +- import prettier from "https://unpkg.com/prettier@2.7.1/esm/standalone.mjs"; ++ import { format } from "https://unpkg.com/prettier@3.0.0/standalone.mjs"; +``` + +File structures changes: + +- `bin-prettier.js` -> `bin/prettier.cjs` +- `esm/standalone.mjs` -> `standalone.mjs` +- `esm/parser-angular.mjs` -> `plugins/angular.mjs` +- `parser-angular.js` -> `plugins/angular.js` +- `esm/parser-babel.mjs` -> `plugins/babel.mjs` +- `parser-babel.js` -> `plugins/babel.js` +- `esm/parser-espree.mjs` -> `plugins/acorn-and-espree.mjs` +- `parser-espree.js` -> `plugins/acorn-and-espree.js`\ + global object renamed `prettierPlugins.espree` -> `prettierPlugins.acornAndEspree` +- `esm/parser-flow.mjs` -> `plugins/flow.mjs` +- `parser-flow.js` -> `plugins/flow.js` +- `esm/parser-glimmer.mjs` -> `plugins/glimmer.mjs` +- `parser-glimmer.js` -> `plugins/glimmer.js` +- `esm/parser-graphql.mjs` -> `plugins/graphql.mjs` +- `parser-graphql.js` -> `plugins/graphql.js` +- `esm/parser-html.mjs` -> `plugins/html.mjs` +- `parser-html.js` -> `plugins/html.js` +- `esm/parser-markdown.mjs` -> `plugins/markdown.mjs` +- `parser-markdown.js` -> `plugins/markdown.js` +- `esm/parser-meriyah.mjs` -> `plugins/meriyah.mjs` +- `parser-meriyah.js` -> `plugins/meriyah.js` +- `esm/parser-postcss.mjs` -> `plugins/postcss.mjs` +- `parser-postcss.js` -> `plugins/postcss.js` +- `esm/parser-typescript.mjs` -> `plugins/typescript.mjs` +- `parser-typescript.js` -> `plugins/typescript.js` +- `esm/parser-yaml.mjs` -> `plugins/yaml.mjs` +- `parser-yaml.js` -> `plugins/yaml.js` + +Check full list on . + +```diff +- import pluginBabel from "prettier/parser-babel"; ++ import pluginBabel from "prettier/plugins/babel"; +``` + +```diff +- node ./node_modules/prettier/bin-prettier.js . --write ++ node ./node_modules/prettier/bin/prettier.cjs . --write ``` diff --git a/changelog_unreleased/api/13268.md b/changelog_unreleased/api/13268.md index 285cb0189..29ea1d14b 100644 --- a/changelog_unreleased/api/13268.md +++ b/changelog_unreleased/api/13268.md @@ -14,16 +14,16 @@ function parse(text: string, options: object): Promise | AST; The second argument `parsers` has been removed, if you still need other parser during parse process, you can: -1. Import the parser yourself +1. Import the plugin yourself ```js - import parserBabel from "prettier/parser-babel.js"; + import pluginBabel from "prettier/plugins/babel"; const myCustomPlugin = { parsers: { "my-custom-parser": { async parse(text) { - const ast = await parserBabel.parsers.babel.parse(text); + const ast = await pluginBabel.parsers.babel.parse(text); ast.program.body[0].expression.callee.name = "_"; return ast; }, @@ -37,8 +37,8 @@ The second argument `parsers` has been removed, if you still need other parser d ```js function getParserFromOptions(options, parserName) { - const parserOrParserInitFunction = options.plugins.find(({ parsers }) => - Object.prototype.hasOwnProperty.call(parsers, parserName) + const parserOrParserInitFunction = options.plugins.find((plugin) => + Object.hasOwn(plugin.parsers, parserName) )?.parsers[parserName]; return typeof parserOrParserInitFunction === "function" ? parserOrParserInitFunction() diff --git a/docs/api.md b/docs/api.md index 2e1c71b40..6ff3ad361 100644 --- a/docs/api.md +++ b/docs/api.md @@ -151,13 +151,13 @@ format("lodash ( )", { ```js import { format } from "prettier"; -import parserBabel from "prettier/parser-babel.js"; +import pluginBabel from "prettier/plugins/babel"; const myCustomPlugin = { parsers: { "my-custom-parser": { async parse(text) { - const ast = await parserBabel.parsers.babel.parse(text); + const ast = await pluginBabel.parsers.babel.parse(text); ast.program.body[0].expression.callee.name = "_"; return ast; }, diff --git a/docs/browser.md b/docs/browser.md index da0f075a5..610cee5d2 100644 --- a/docs/browser.md +++ b/docs/browser.md @@ -7,7 +7,7 @@ Run Prettier in the browser using its **standalone** version. This version doesn The standalone version comes as: -- ES modules: `esm/standalone.mjs`, starting in version 2.2 +- ES modules: `standalone.mjs`, starting in version 3.0 (In version 2, `esm/standalone.mjs`.) - UMD: `standalone.js`, starting in version 1.13 The [`browser` field](https://github.com/defunctzombie/package-browser-field-spec) in Prettier’s `package.json` points to `standalone.js`. That’s why you can just `import` or `require` the `prettier` module to access Prettier’s API, and your code can stay compatible with both Node and the browser as long as webpack or another bundler that supports the `browser` field is used. This is especially convenient for [plugins](plugins.md). @@ -18,10 +18,7 @@ Required options: - **[`parser`](options.md#parser) (or [`filepath`](options.md#file-path))**: One of these options has to be specified for Prettier to know which parser to use. -- **`plugins`**: Unlike the `format` function from the [Node.js-based API](api.md#prettierformatsource--options), this function doesn’t load plugins automatically. The `plugins` option is required because all the parsers included in the Prettier package come as plugins (for reasons of file size). These plugins are files named - - - `parser-*.js` in and - - `parser-*.mjs` in +- **`plugins`**: Unlike the `format` function from the [Node.js-based API](api.md#prettierformatsource--options), this function doesn’t load plugins automatically. The `plugins` option is required because all the parsers included in the Prettier package come as plugins (for reasons of file size). These plugins are files in You need to load the ones that you’re going to use and pass them to `prettier.format` using the `plugins` option. @@ -33,7 +30,7 @@ See below for examples. ```html - + ``` @@ -65,7 +62,7 @@ Note that the [`unpkg` field](https://unpkg.com/#examples) in Prettier’s `pack ```js define([ "https://unpkg.com/prettier@2.7.1/standalone.js", - "https://unpkg.com/prettier@2.7.1/parser-graphql.js", + "https://unpkg.com/prettier@2.7.1/plugins/graphql.js", ], async (prettier, ...plugins) => { const formatted = await prettier.format("type Query { hello: String }", { parser: "graphql", @@ -78,7 +75,7 @@ define([ ```js const prettier = require("prettier/standalone"); -const plugins = [require("prettier/parser-graphql")]; +const plugins = [require("prettier/plugins/graphql")]; (async () => { const formatted = await prettier.format("type Query { hello: String }", { parser: "graphql", @@ -93,7 +90,7 @@ This syntax doesn’t necessarily work in the browser, but it can be used when b ```js importScripts("https://unpkg.com/prettier@2.7.1/standalone.js"); -importScripts("https://unpkg.com/prettier@2.7.1/parser-graphql.js"); +importScripts("https://unpkg.com/prettier@2.7.1/plugins/graphql.js"); (async () => { const formatted = await prettier.format("type Query { hello: String }", { parser: "graphql", @@ -108,13 +105,13 @@ If you want to format [embedded code](options.md#embedded-language-formatting), ```html