[Feature Request] Support for single file components

[yharaskrik]

This plugin works great if the HTML is in it's own file! But now with Standalone Components, Single File components are coming to the forefront a bit more now (and they are clean for small components). Unfortunately this plugin does not work with components that use template strings for the HTML template like so:

import { NgIf, NgOptimizedImage } from '@angular/common';
import { Component, Input } from '@angular/core';
import { HttpsPipe } from '@trellis/shared/util/formatting';
import { nanoId } from '@trellis/shared/util/id';
import { SafeHtmlModule } from '@trellis/shared/util/web/formatting';

@Component({
    selector: 'display',
    template: `
        <div class="w-100 aspect-ratio"></div>
    `,
    standalone: true,
})
export class MyComponent {
}

aspect-ratio should be before w-100 but the plugin must not recognize single file components and HTML template strings.

[NiklasPor]

So the plugin is only about organizing attributes, not their values.

If I input:

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

@Component({
  selector: 'display',
  template: ` <div aspect-ratio class="w-100"></div> `,
  standalone: true,
})
export class MyComponent {}

it outputs:

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

@Component({
  selector: 'display',
  template: ` <div class="w-100" aspect-ratio></div> `,
  standalone: true,
})
export class MyComponent {}

which seems like it's handling single file components.

[NiklasPor]

Also maybe check the preset, and whether you need to supply your own config: https://github.com/NiklasPor/prettier-plugin-organize-attributes#angular

[yharaskrik]

Ah man I think I provided the wrong example (was transferring it from a comment on a PR of mine in our internal repo) I will fix it here:

import { NgIf, NgOptimizedImage } from '@angular/common';
import { Component, Input } from '@angular/core';
import { HttpsPipe } from '@trellis/shared/util/formatting';
import { nanoId } from '@trellis/shared/util/id';
import { SafeHtmlModule } from '@trellis/shared/util/web/formatting';

@Component({
    selector: 'display',
    template: `
        <img
                class="aspect-ratio w-100"
                *ngIf="!website"
                [priority]="index <= 1"
                [rawSrc]="image"
                rawSrcset="100w, 200w, 300w, 400w"
                width="1"
                height="1" />
    `,
    standalone: true,
})
export class MyComponent {
}

Sorry about the confusion!, for some reason that does not get sorted for us (for example width should be at the bottom i believe?)

We are using the default setup (I am going to go double check an example like this would be formatted correctly in an html)

[yharaskrik]

Ok so sort of...

This is sorted correctly:

<div class="trellis-h6" width="12">

but this

<mat-form-field width="12" class="w-100" appearance="outline">

Is sorted as:

<mat-form-field class="w-100" width="12" appearance="outline">

That might be something else though?

If I take the example from above

and have this in an HTML file:

<img
                class="aspect-ratio w-100"
                rawSrcset="100w, 200w, 300w, 400w"
                width="1"
                height="1" />

and I format it comes out as (which is admittedly the same order that the SFC ends up as):

<img class="aspect-ratio w-100" rawSrcset="100w, 200w, 300w, 400w" width="1" height="1" />

Do I need a custom configuration for this? Shouldn't width be last?

[NiklasPor]

The default groups attributes like the example I pinned at the start of this conversation: https://github.com/NiklasPor/prettier-plugin-organize-attributes#angular

If you want to sort the attributes additionally to the grouping, you can do it like it's pointed out here: https://github.com/NiklasPor/prettier-plugin-organize-attributes#sort

---

For your example:

<mat-form-field class="w-100" width="12" appearance="outline">

The default angular settings puts class at the very front of the attributes. "Other" attributes, come in their original order at the end. Please take a look at the readme.

[NiklasPor]

I'll put this down as closed, as you can configure all of it with custom configuration.