Skip to content

Commit 8fd4ea9

Browse files
leaysgurleaysgur
committed
feat(oxfmt): options.embeddedLanguageFormatting is now "auto" by default (#17649)
Fixes #16763
1 parent f0fdf83 commit 8fd4ea9

File tree

9 files changed

+110
-40
lines changed

9 files changed

+110
-40
lines changed

‎apps/oxfmt/src-js/cli/migration/migrate-prettier.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -93,8 +93,7 @@ export async function runMigratePrettier() {
9393
);
9494
oxfmtrc.printWidth = 80;
9595
}
96-
// `embeddedLanguageFormatting` is not fully supported yet and default "off" in Oxfmt.
97-
// Prettier default is "auto".
96+
// `embeddedLanguageFormatting` is not fully supported for JS-in-XXX yet.
9897
if (oxfmtrc.embeddedLanguageFormatting !== "off") {
9998
console.error(` - "embeddedLanguageFormatting" in JS/TS files is not fully supported yet`);
10099
}

‎apps/oxfmt/test/__snapshots__/embedded_languages.test.ts.snap‎

Lines changed: 91 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
22

3-
exports[`embedded_languages > should format embedded languages (CSS, GraphQL, HTML, Markdown) 1`] = `
3+
exports[`embedded_languages > should format embedded languages by default 1`] = `
44
"--- FILE -----------
55
embedded_languages.js
66
--- BEFORE ---------
@@ -304,7 +304,7 @@ const sql = sql\`
304304
--------------------"
305305
`;
306306
307-
exports[`embedded_languages > should not format embedded languages by default (at alpha release) 1`] = `
307+
exports[`embedded_languages > should format embedded languages when embeddedLanguageFormatting is auto 1`] = `
308308
"--- FILE -----------
309309
embedded_languages.js
310310
--- BEFORE ---------
@@ -427,52 +427,108 @@ const sql = sql\`
427427
// CSS - Tagged template literals with css and styled tags
428428
// ============================================================================
429429
430-
const styles = css\`.button{color:red;background:blue;padding:10px 20px;}.container{display:flex;justify-content:center;}\`;
430+
const styles = css\`
431+
.button {
432+
color: red;
433+
background: blue;
434+
padding: 10px 20px;
435+
}
436+
.container {
437+
display: flex;
438+
justify-content: center;
439+
}
440+
\`;
431441
432-
const styledComponent = styled\`background-color:#ffffff;border-radius:4px;padding:8px;\`;
442+
const styledComponent = styled\`
443+
background-color: #ffffff;
444+
border-radius: 4px;
445+
padding: 8px;
446+
\`;
433447
434448
// ============================================================================
435449
// GraphQL - Tagged template literals with gql and graphql tags
436450
// ============================================================================
437451
438-
const query = gql\`query GetUser($id:ID!){user(id:$id){name email posts{title}}}\`;
452+
const query = gql\`
453+
query GetUser($id: ID!) {
454+
user(id: $id) {
455+
name
456+
email
457+
posts {
458+
title
459+
}
460+
}
461+
}
462+
\`;
439463
440-
const mutation = graphql\`mutation CreatePost($input:PostInput!){createPost(input:$input){id title}}\`;
464+
const mutation = graphql\`
465+
mutation CreatePost($input: PostInput!) {
466+
createPost(input: $input) {
467+
id
468+
title
469+
}
470+
}
471+
\`;
441472
442473
// ============================================================================
443474
// HTML - Tagged template literals with html tag
444475
// ============================================================================
445476
446-
const template = html\`<div class="container"><h1>Hello World</h1><p>This is a paragraph with <strong>bold</strong> text.</p></div>\`;
477+
const template = html\`
478+
<div class="container">
479+
<h1>Hello World</h1>
480+
<p>This is a paragraph with <strong>bold</strong> text.</p>
481+
</div>
482+
\`;
447483
448-
const component = html\`<button type="button" onclick="handleClick()">Click me</button>\`;
484+
const component = html\`
485+
<button type="button" onclick="handleClick()">Click me</button>
486+
\`;
449487
450488
// ============================================================================
451489
// Markdown - Tagged template literals with md and markdown tags
452490
// ============================================================================
453491
454-
const documentation = md\`#Heading
455-
This is **bold** and this is _italic_.
456-
-Item 1
457-
-Item 2\`;
492+
const documentation = md\`
493+
#Heading
494+
This is **bold** and this is _italic_.
495+
-Item 1
496+
-Item 2
497+
\`;
458498
459-
const readme = markdown\`##Installation
460-
\\\`\\\`\\\`bash
461-
npm install package
462-
\\\`\\\`\\\`\`;
499+
const readme = markdown\`
500+
##Installation
501+
\\\`\\\`\\\`bash
502+
npm install package
503+
\\\`\\\`\\\`
504+
\`;
463505
464506
// ============================================================================
465507
// Mixed - Multiple embedded languages in one file
466508
// ============================================================================
467509
468-
const mixedStyles = css\`.button{color:red;}\`;
510+
const mixedStyles = css\`
511+
.button {
512+
color: red;
513+
}
514+
\`;
469515
470-
const mixedQuery = gql\`query{users{name}}\`;
516+
const mixedQuery = gql\`
517+
query {
518+
users {
519+
name
520+
}
521+
}
522+
\`;
471523
472-
const mixedTemplate = html\`<div><h1>Title</h1></div>\`;
524+
const mixedTemplate = html\`
525+
<div><h1>Title</h1></div>
526+
\`;
473527
474-
const mixedDocs = md\`#Documentation
475-
This is **important**.\`;
528+
const mixedDocs = md\`
529+
#Documentation
530+
This is **important**.
531+
\`;
476532
477533
// ============================================================================
478534
// No Embedded Languages - Regular JavaScript (no tagged templates)
@@ -497,12 +553,24 @@ class Formatter {
497553
// prettier-ignore
498554
const unformatted = css\`.button{color:red;background:blue;border:1px solid green;}\`;
499555
500-
const formattedCss = css\`.container{display:flex;align-items:center;}\`;
556+
const formattedCss = css\`
557+
.container {
558+
display: flex;
559+
align-items: center;
560+
}
561+
\`;
501562
502563
// prettier-ignore
503564
const ignoredGql = gql\`query GetUser($id:ID!){user(id:$id){name email}}\`;
504565
505-
const normalGql = gql\`query GetPosts{posts{title author}}\`;
566+
const normalGql = gql\`
567+
query GetPosts {
568+
posts {
569+
title
570+
author
571+
}
572+
}
573+
\`;
506574
507575
// ============================================================================
508576
// Unsupported Tags - Tags not recognized by the formatter

‎apps/oxfmt/test/api.test.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,9 @@ describe("API Tests", () => {
6464
`
6565
<template><div>Vue</div></template>
6666
<style>
67-
div{color:red;}
67+
div {
68+
color: red;
69+
}
6870
</style>
6971
`.trimStart(),
7072
);

‎apps/oxfmt/test/embedded_languages.test.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,12 @@ import { runWriteModeAndSnapshot } from "./utils";
55
const fixturesDir = join(__dirname, "fixtures", "embedded_languages");
66

77
describe("embedded_languages", () => {
8-
it("should format embedded languages (CSS, GraphQL, HTML, Markdown)", async () => {
8+
it("should format embedded languages by default", async () => {
9+
const snapshot = await runWriteModeAndSnapshot(fixturesDir, ["embedded_languages.js"]);
10+
expect(snapshot).toMatchSnapshot();
11+
});
12+
13+
it("should format embedded languages when embeddedLanguageFormatting is auto", async () => {
914
const snapshot = await runWriteModeAndSnapshot(
1015
fixturesDir,
1116
["embedded_languages.js"],
@@ -22,9 +27,4 @@ describe("embedded_languages", () => {
2227
);
2328
expect(snapshot).toMatchSnapshot();
2429
});
25-
26-
it("should not format embedded languages by default (at alpha release)", async () => {
27-
const snapshot = await runWriteModeAndSnapshot(fixturesDir, ["embedded_languages.js"]);
28-
expect(snapshot).toMatchSnapshot();
29-
});
3030
});

‎crates/oxc_formatter/src/options.rs‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -947,10 +947,9 @@ impl fmt::Display for OperatorPosition {
947947
#[derive(Clone, Copy, Debug, Default, Eq, Hash, PartialEq)]
948948
pub enum EmbeddedLanguageFormatting {
949949
/// Enable formatting for embedded languages.
950+
#[default]
950951
Auto,
951-
// Disable by default at alpha release, synced with `oxfmtrc.rs`
952952
/// Disable formatting for embedded languages.
953-
#[default]
954953
Off,
955954
}
956955

‎crates/oxc_formatter/src/oxfmtrc.rs‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,8 @@ pub struct Oxfmtrc {
8080
#[schemars(skip)]
8181
pub experimental_ternaries: Option<bool>,
8282

83-
/// Control whether to format embedded parts in the file. (Default: `"off"`)
83+
/// Control whether to format embedded parts in the file.
84+
/// e.g. JS-in-Vue, CSS-in-JS, etc. (Default: `"auto"`)
8485
#[serde(skip_serializing_if = "Option::is_none")]
8586
pub embedded_language_formatting: Option<EmbeddedLanguageFormattingConfig>,
8687

‎crates/oxc_formatter/tests/snapshots/schema_json.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -183,8 +183,8 @@ expression: json
183183
"type": "null"
184184
}
185185
],
186-
"description": "Control whether to format embedded parts in the file. (Default: `\"off\"`)",
187-
"markdownDescription": "Control whether to format embedded parts in the file. (Default: `\"off\"`)"
186+
"description": "Control whether to format embedded parts in the file.\ne.g. JS-in-Vue, CSS-in-JS, etc. (Default: `\"auto\"`)",
187+
"markdownDescription": "Control whether to format embedded parts in the file.\ne.g. JS-in-Vue, CSS-in-JS, etc. (Default: `\"auto\"`)"
188188
},
189189
"endOfLine": {
190190
"anyOf": [

‎npm/oxfmt/configuration_schema.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -179,8 +179,8 @@
179179
"type": "null"
180180
}
181181
],
182-
"description": "Control whether to format embedded parts in the file. (Default: `\"off\"`)",
183-
"markdownDescription": "Control whether to format embedded parts in the file. (Default: `\"off\"`)"
182+
"description": "Control whether to format embedded parts in the file.\ne.g. JS-in-Vue, CSS-in-JS, etc. (Default: `\"auto\"`)",
183+
"markdownDescription": "Control whether to format embedded parts in the file.\ne.g. JS-in-Vue, CSS-in-JS, etc. (Default: `\"auto\"`)"
184184
},
185185
"endOfLine": {
186186
"anyOf": [

‎tasks/website_formatter/src/snapshots/schema_markdown.snap‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,8 @@ Print spaces between brackets in object literals. (Default: `true`)
4444
type: `string | null`
4545

4646

47-
Control whether to format embedded parts in the file. (Default: `"off"`)
47+
Control whether to format embedded parts in the file.
48+
e.g. JS-in-Vue, CSS-in-JS, etc. (Default: `"auto"`)
4849

4950

5051
## endOfLine

0 commit comments

Comments
 (0)