Skip to content

Unexpected embedded formatting for Angular template #15969

Closed
Bug
#15972
Closed
Unexpected embedded formatting for Angular template#15969
Bug
#15972
Labels
good first issueGood fist issue!lang:angularIssues affecting Angular template (not general JS/TS issues used for Angular)lang:typescriptIssues affecting TypeScript-specific constructs (not general JS issues)locked-due-to-inactivityPlease open a new issue and fill out the template instead of commenting.
@sosukesuzuki

Description

@sosukesuzuki
sosukesuzuki
opened on Jan 21, 2024

Prettier 3.2.4
Playground link

--parser babel

Input:

const template = "foobar";

@Component({
  [template]: `<h1>{{       hello }}</h1>`,
})
export class AppComponent {}

Output:

const template = "foobar";

@Component({
  [template]: `<h1>{{ hello }}</h1>`,
})
export class AppComponent {}

Expected output:

const template = "foobar";

@Component({
  [template]: `<h1>{{       hello }}</h1>`,
})
export class AppComponent {}

Why?

Prettier formats the content of the template field in Angular's @Component decorator as HTML. However, it now also formats the content of a different field named template as HTML. This isn't expected.

I think adding !node.computed to

prettier/src/language-js/embed/utils.js

Lines 47 to 51 in 4b1965a

(node, name) =>
isObjectProperty(node) &&
node.key.type === "Identifier" &&
node.key.name === "template" &&
name === "value",
will fix this.

Metadata

Metadata

Assignees

No one assigned

    Labels

    good first issueGood fist issue!lang:angularIssues affecting Angular template (not general JS/TS issues used for Angular)lang:typescriptIssues affecting TypeScript-specific constructs (not general JS issues)locked-due-to-inactivityPlease open a new issue and fill out the template instead of commenting.

    Type

    Bug

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions