Skip to content

formatter: Diff with Prettier on special char / unicode in angular-in-js templates #21160

@Arthie

Description

@Arthie

Input

@Component({
    selector: 'unicode',
    template: `
    <!-- ¯\\_(ツ)_//¯  -->
    {{ "¯\\_(ツ)_//¯" }}
  `,
})
export class UnicodeComponent {}

Config

{}

Oxfmt output

Oxfmt version: 0.43.0

@Component({
   selector: "unicode",
   template: `
     <!-- ¯\\_(ã
                 )_//¯  -->
     {{ "¯\\_(ã
                )_//¯" }}
   `,
})
export class UnicodeComponent {}

Oxfmt playground link

No response

Prettier output

Prettier version: 3.8.1

@Component({
    selector: 'unicode',
    template: `
    <!-- ¯\\_(ツ)_//¯  -->
    {{ "¯\\_(ツ)_//¯" }}
  `,
})
export class UnicodeComponent {}

Prettier playground link

No response

Additional notes

Wasn't able to figure out how to set up the playground to compile angular-in-js. Might be something to look into improving the playground for vue and svelte and angular ...

I added this test case to apps/oxfmt/test/cli/embedded_languages/fixtures/angular.ts and was easily able to reproduce it.

// apps/oxfmt/test/cli/embedded_languages/fixtures/angular.ts
@Component({
    selector: 'unicode',
    template: `
    <!-- ¯\\_(ツ)_//¯  -->
    {{ "¯\\_(ツ)_//¯" }}
  `,
})
export class UnicodeComponent {}

console output:

test/cli/embedded_languages/embedded_languages.test.ts > embedded_languages > should format with CLRF
Error: Snapshot `embedded_languages > should format with CLRF 1` mismatched

- Expected
+ Received

@@ -316,10 +316,19 @@
      [template]: `<h1>{{       hello }}</h1>`,
      [styles]: `h1 { color: blue }`
  })
  export class AppComponent2 {}

+ @Component({
+     selector: 'unicode',
+     template: `
+     <!-- ¯\\_(ツ)_//¯  -->
+     {{ "¯\\_(ツ)_//¯" }}
+   `,
+ })
+ export class UnicodeComponent {}
+
  --- AFTER ----------
  // Angular @Component decorator - direct template and styles
  // Uses Angular-specific syntax: interpolation, directives, bindings
  @Component({
    selector: "app-root",
@@ -368,6 +377,15 @@
    [template]: `<h1>{{       hello }}</h1>`,
    [styles]: `h1 { color: blue }`,
  })
  export class AppComponent2 {}

+ @Component({
+   selector: "unicode",
+   template: `
+     <!-- ¯\\_(ã
                 )_//¯  -->
+     {{ "¯\\_(ã
                )_//¯" }}
+   `,
+ })
+ export class UnicodeComponent {}
+
  --------------------"

 ❯ test/cli/embedded_languages/embedded_languages.test.ts:27:22
     25|       "crlf_embedded.json",
     26|     ]);
     27|     expect(snapshot).toMatchSnapshot();
       |                      ^
     28|   });
     29|

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    Priority

    None yet

    Effort

    None yet

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions