diff --git a/apps/oxfmt/src-js/cli/migration/migrate-prettier.ts b/apps/oxfmt/src-js/cli/migration/migrate-prettier.ts index e3a30153974a7..b9e710af30e3e 100644 --- a/apps/oxfmt/src-js/cli/migration/migrate-prettier.ts +++ b/apps/oxfmt/src-js/cli/migration/migrate-prettier.ts @@ -93,8 +93,7 @@ export async function runMigratePrettier() { ); oxfmtrc.printWidth = 80; } - // `embeddedLanguageFormatting` is not fully supported yet and default "off" in Oxfmt. - // Prettier default is "auto". + // `embeddedLanguageFormatting` is not fully supported for JS-in-XXX yet. if (oxfmtrc.embeddedLanguageFormatting !== "off") { console.error(` - "embeddedLanguageFormatting" in JS/TS files is not fully supported yet`); } diff --git a/apps/oxfmt/test/__snapshots__/embedded_languages.test.ts.snap b/apps/oxfmt/test/__snapshots__/embedded_languages.test.ts.snap index f26cd4639ed3a..1f7408178f9ac 100644 --- a/apps/oxfmt/test/__snapshots__/embedded_languages.test.ts.snap +++ b/apps/oxfmt/test/__snapshots__/embedded_languages.test.ts.snap @@ -1,6 +1,6 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`embedded_languages > should format embedded languages (CSS, GraphQL, HTML, Markdown) 1`] = ` +exports[`embedded_languages > should format embedded languages by default 1`] = ` "--- FILE ----------- embedded_languages.js --- BEFORE --------- @@ -304,7 +304,7 @@ const sql = sql\` --------------------" `; -exports[`embedded_languages > should not format embedded languages by default (at alpha release) 1`] = ` +exports[`embedded_languages > should format embedded languages when embeddedLanguageFormatting is auto 1`] = ` "--- FILE ----------- embedded_languages.js --- BEFORE --------- @@ -427,52 +427,108 @@ const sql = sql\` // CSS - Tagged template literals with css and styled tags // ============================================================================ -const styles = css\`.button{color:red;background:blue;padding:10px 20px;}.container{display:flex;justify-content:center;}\`; +const styles = css\` + .button { + color: red; + background: blue; + padding: 10px 20px; + } + .container { + display: flex; + justify-content: center; + } +\`; -const styledComponent = styled\`background-color:#ffffff;border-radius:4px;padding:8px;\`; +const styledComponent = styled\` + background-color: #ffffff; + border-radius: 4px; + padding: 8px; +\`; // ============================================================================ // GraphQL - Tagged template literals with gql and graphql tags // ============================================================================ -const query = gql\`query GetUser($id:ID!){user(id:$id){name email posts{title}}}\`; +const query = gql\` + query GetUser($id: ID!) { + user(id: $id) { + name + email + posts { + title + } + } + } +\`; -const mutation = graphql\`mutation CreatePost($input:PostInput!){createPost(input:$input){id title}}\`; +const mutation = graphql\` + mutation CreatePost($input: PostInput!) { + createPost(input: $input) { + id + title + } + } +\`; // ============================================================================ // HTML - Tagged template literals with html tag // ============================================================================ -const template = html\`

Hello World

This is a paragraph with bold text.

\`; +const template = html\` +
+

Hello World

+

This is a paragraph with bold text.

+
+\`; -const component = html\`\`; +const component = html\` + +\`; // ============================================================================ // Markdown - Tagged template literals with md and markdown tags // ============================================================================ -const documentation = md\`#Heading -This is **bold** and this is _italic_. --Item 1 --Item 2\`; +const documentation = md\` + #Heading + This is **bold** and this is _italic_. + -Item 1 + -Item 2 +\`; -const readme = markdown\`##Installation -\\\`\\\`\\\`bash -npm install package -\\\`\\\`\\\`\`; +const readme = markdown\` + ##Installation + \\\`\\\`\\\`bash + npm install package + \\\`\\\`\\\` +\`; // ============================================================================ // Mixed - Multiple embedded languages in one file // ============================================================================ -const mixedStyles = css\`.button{color:red;}\`; +const mixedStyles = css\` + .button { + color: red; + } +\`; -const mixedQuery = gql\`query{users{name}}\`; +const mixedQuery = gql\` + query { + users { + name + } + } +\`; -const mixedTemplate = html\`

Title

\`; +const mixedTemplate = html\` +

Title

+\`; -const mixedDocs = md\`#Documentation -This is **important**.\`; +const mixedDocs = md\` + #Documentation + This is **important**. +\`; // ============================================================================ // No Embedded Languages - Regular JavaScript (no tagged templates) @@ -497,12 +553,24 @@ class Formatter { // prettier-ignore const unformatted = css\`.button{color:red;background:blue;border:1px solid green;}\`; -const formattedCss = css\`.container{display:flex;align-items:center;}\`; +const formattedCss = css\` + .container { + display: flex; + align-items: center; + } +\`; // prettier-ignore const ignoredGql = gql\`query GetUser($id:ID!){user(id:$id){name email}}\`; -const normalGql = gql\`query GetPosts{posts{title author}}\`; +const normalGql = gql\` + query GetPosts { + posts { + title + author + } + } +\`; // ============================================================================ // Unsupported Tags - Tags not recognized by the formatter diff --git a/apps/oxfmt/test/api.test.ts b/apps/oxfmt/test/api.test.ts index 479d24ffa6893..6aa4044a0fec1 100644 --- a/apps/oxfmt/test/api.test.ts +++ b/apps/oxfmt/test/api.test.ts @@ -64,7 +64,9 @@ describe("API Tests", () => { ` `.trimStart(), ); diff --git a/apps/oxfmt/test/embedded_languages.test.ts b/apps/oxfmt/test/embedded_languages.test.ts index bf41ec3dd0b91..e0a7f1cc2a70a 100644 --- a/apps/oxfmt/test/embedded_languages.test.ts +++ b/apps/oxfmt/test/embedded_languages.test.ts @@ -5,7 +5,12 @@ import { runWriteModeAndSnapshot } from "./utils"; const fixturesDir = join(__dirname, "fixtures", "embedded_languages"); describe("embedded_languages", () => { - it("should format embedded languages (CSS, GraphQL, HTML, Markdown)", async () => { + it("should format embedded languages by default", async () => { + const snapshot = await runWriteModeAndSnapshot(fixturesDir, ["embedded_languages.js"]); + expect(snapshot).toMatchSnapshot(); + }); + + it("should format embedded languages when embeddedLanguageFormatting is auto", async () => { const snapshot = await runWriteModeAndSnapshot( fixturesDir, ["embedded_languages.js"], @@ -22,9 +27,4 @@ describe("embedded_languages", () => { ); expect(snapshot).toMatchSnapshot(); }); - - it("should not format embedded languages by default (at alpha release)", async () => { - const snapshot = await runWriteModeAndSnapshot(fixturesDir, ["embedded_languages.js"]); - expect(snapshot).toMatchSnapshot(); - }); }); diff --git a/crates/oxc_formatter/src/options.rs b/crates/oxc_formatter/src/options.rs index e3fbd19f43f02..a8358bc00e90e 100644 --- a/crates/oxc_formatter/src/options.rs +++ b/crates/oxc_formatter/src/options.rs @@ -947,10 +947,9 @@ impl fmt::Display for OperatorPosition { #[derive(Clone, Copy, Debug, Default, Eq, Hash, PartialEq)] pub enum EmbeddedLanguageFormatting { /// Enable formatting for embedded languages. + #[default] Auto, - // Disable by default at alpha release, synced with `oxfmtrc.rs` /// Disable formatting for embedded languages. - #[default] Off, } diff --git a/crates/oxc_formatter/src/oxfmtrc.rs b/crates/oxc_formatter/src/oxfmtrc.rs index 0c7282383fb10..2bc23e4aa7b31 100644 --- a/crates/oxc_formatter/src/oxfmtrc.rs +++ b/crates/oxc_formatter/src/oxfmtrc.rs @@ -80,7 +80,8 @@ pub struct Oxfmtrc { #[schemars(skip)] pub experimental_ternaries: Option, - /// Control whether to format embedded parts in the file. (Default: `"off"`) + /// Control whether to format embedded parts in the file. + /// e.g. JS-in-Vue, CSS-in-JS, etc. (Default: `"auto"`) #[serde(skip_serializing_if = "Option::is_none")] pub embedded_language_formatting: Option, diff --git a/crates/oxc_formatter/tests/snapshots/schema_json.snap b/crates/oxc_formatter/tests/snapshots/schema_json.snap index 5d5e573eefa09..cbf34d162bd63 100644 --- a/crates/oxc_formatter/tests/snapshots/schema_json.snap +++ b/crates/oxc_formatter/tests/snapshots/schema_json.snap @@ -183,8 +183,8 @@ expression: json "type": "null" } ], - "description": "Control whether to format embedded parts in the file. (Default: `\"off\"`)", - "markdownDescription": "Control whether to format embedded parts in the file. (Default: `\"off\"`)" + "description": "Control whether to format embedded parts in the file.\ne.g. JS-in-Vue, CSS-in-JS, etc. (Default: `\"auto\"`)", + "markdownDescription": "Control whether to format embedded parts in the file.\ne.g. JS-in-Vue, CSS-in-JS, etc. (Default: `\"auto\"`)" }, "endOfLine": { "anyOf": [ diff --git a/npm/oxfmt/configuration_schema.json b/npm/oxfmt/configuration_schema.json index 7e3d699ca1120..c6f1563ba751f 100644 --- a/npm/oxfmt/configuration_schema.json +++ b/npm/oxfmt/configuration_schema.json @@ -179,8 +179,8 @@ "type": "null" } ], - "description": "Control whether to format embedded parts in the file. (Default: `\"off\"`)", - "markdownDescription": "Control whether to format embedded parts in the file. (Default: `\"off\"`)" + "description": "Control whether to format embedded parts in the file.\ne.g. JS-in-Vue, CSS-in-JS, etc. (Default: `\"auto\"`)", + "markdownDescription": "Control whether to format embedded parts in the file.\ne.g. JS-in-Vue, CSS-in-JS, etc. (Default: `\"auto\"`)" }, "endOfLine": { "anyOf": [ diff --git a/tasks/website_formatter/src/snapshots/schema_markdown.snap b/tasks/website_formatter/src/snapshots/schema_markdown.snap index 7eb80f43334a8..56bec50bb7fa2 100644 --- a/tasks/website_formatter/src/snapshots/schema_markdown.snap +++ b/tasks/website_formatter/src/snapshots/schema_markdown.snap @@ -44,7 +44,8 @@ Print spaces between brackets in object literals. (Default: `true`) type: `string | null` -Control whether to format embedded parts in the file. (Default: `"off"`) +Control whether to format embedded parts in the file. +e.g. JS-in-Vue, CSS-in-JS, etc. (Default: `"auto"`) ## endOfLine