Support Angular @Component decorator alias

[flashios09]

It seems that prettier is not parsing the Component import statement and using the hard string "Component" to detect if it's an Angular component or not(node.callee.name === "Component") which means that this would work:

import { Component } from '@angular/core';

@Component({...})
export class ButtonComponent {}

But this will not:

import { Component as Page } from '@angular/core';

@Page({...})
export class PostsPage {}

-> Prettier will not be able to detect the template since the callee name is Page.

Same thing for this:

import { Component as Layout } from '@angular/core';

@Layout({...})
export class AdminLayout {}

-> Prettier will not be able to detect the template since the callee name is Layout.

The Component decorator name in Angular is so "generic", could be used as a Component, Page(route) and a Layout, using an alias will make it easier to read and understand.

Adding a support for those aliases is so easy too, all we need is to change one line:

// src/language-js/embed/utils.js
const angularComponentObjectExpressionPredicates = [
  (node, name) => node.type === "ObjectExpression" && name === "properties",
  (node, name) =>
    node.type === "CallExpression" &&
    node.callee.type === "Identifier" &&
    // node.callee.name === "Component" &&
    ["Component", "Layout", "Page"].includes(node.callee.name) &&
    name === "arguments",
  (node, name) => node.type === "Decorator" && name === "expression",
];

Now prettier will detect the new component aliases Page and Layout :)

[rubiesonthesky]

Regarding the open PR, Wouldn’t it be better to change the code understand any alias name instead of hard coding these Page and Layout names? I haven’t seen this convention in Angular ecosystem. I don’t doubt that it exists but I feel like that it isn’t something that is regarded standard way. And prettier would need to start to add all the aliases that people request.

I could be wrong and this is something that Angular is promoting in their style guide. If that it’s the case, then this change makes a lot sense.

[flashios09]

@rubiesonthesky I have updated the code, now it will support any alias name :)

[sosukesuzuki]

I am against adding this feature.

But I am not familiar with Angular, so let me ask a question. Is this rule common among people who write Angular? Or is it only needed by you and your team?