Support sorting of attributes

[Shinigami92]

Support sorting of attributes

It would be nice if attributes could optionally be sorted.

Acceptance criterion

• No breaking changes
• Minor update
• Sorting attributes is disabled by default
• The order of attributes can be changed / customized
• Tests are implemented

[Shinigami92]

In frameworks like Vue we have property bindings

In example:

//- Button will be enabled
v-btn(color="primary", disabled, :disabled="false") Test

//- Button will be disabled
v-btn(color="primary", :disabled="false", disabled) Test

Currently, the formatter first places an attribute with a colon because the ASCII literal is 58 and occurs before any alphabetical literal

In my opinion, property bindings should take precedence over non-property bindings
Also v-bind: should be prioritized

Need to look into the behavior of v-on and v-slot

[Shinigami92]

Theoretically ready for a beta release

Further thoughts:

• (maybe) prefer Vue's v-* higher up
• Prefer Angular's *ng etc higher up
• Think about ordering of Vue's event binding modifiers
• Write more tests for Vue bindings
• Check Vue's new slot syntax in example #header
• Write tests for Angular bindings
• Add docu to readme

[SkyaTura]

I'd like to help with this feature, how could I start?

[Shinigami92]

Thanks :) and yes I could possibly need your (someone else help)
The feature itself is working in this PR, but I was never really satisfied how it works
I want to design an option so you don't need to write like hundreds of different tags
I lastly worked around a year ago on this... yes thats september 16 2019 :D
Since then I thought about to replace this with a regex pattern strategy, but regex patterns are not for everyone and I don't know if I need to support both: plain tags and regex

So all in all, broken down: It's just a problem of how I consume a thing from were I create a compare function returning -1, 0 or 1

And then I want to provide a robust default value for this option to support a common base for vue AND angular together
But I'm only a vue developer myself...

[SkyaTura]

What about this:

interface pugSortingAttributes {
  sortLeft?: string[]
  sortRight?: string[]
}

where you can specify which starting content should be placed where.

You have 3 positions:

left - middle - right

left and right

Are positioned by the order that you specified in the options.

middle

Sorted ASC

Example

options

const pugSortingAttributes = {
  sortLeft: ['#', ':', 'v-'],
  sortRight: ['@'],
}

input

FooComponent(
  @click="fooAction"
  foo="123"
  :bind="888"
  #child="props"
  v-if="true"
  v-for="foo in bar"
  bar="321"
)

output

FooComponent(
  #child="props"
  :bind="888"
  v-for="foo in bar"
  v-if="true"
  bar="321"
  foo="123"
  @click="fooAction"
)

Testing

Details

const sort = (options) => {
  const {
    sortLeft = [],
    sortRight = []
  } = options || {}

  const sortFirst = [...sortLeft].reverse()
  const sortLast = [...sortRight].reverse()

  return (items) => [...items].sort((A, B) => {

    const [a] = A
    const [b] = B

    const aLeft = sortFirst.findIndex(item => a.startsWith(item)) + 1
    const bLeft = sortFirst.findIndex(item => b.startsWith(item)) + 1
    const left = aLeft - bLeft

    if (left > 0) return -1
    if (left < 0) return 1


    const aRight = sortLast.findIndex(item => a.startsWith(item)) + 1
    const bRight = sortLast.findIndex(item => b.startsWith(item)) + 1
    const right = aRight - bRight

    if (right > 0) return 1
    if (right < 0) return -1

    if (a > b) return 1
    if (a < b) return -1

    return 0
  })
}

// Test Cases

const cases = [

  // Case 0
  {
    input: {},
    expect: {},
    options: {},
  },


  // Case 1
  {
    input: {
      foo: 123,
      'v-for': 555,
      bar: 321,
    },
    expect: {
      bar: 321,
      foo: 123,
      'v-for': 555,
    },
    options: {},
  },


  // Case 2
  {
    input: {
      foo: 123,
      'v-for': 555,
      bar: 321,
    },
    expect: {
      bar: 321,
      foo: 123,
      'v-for': 555,
    },
    options: {
      sortLeft: [],
      sortRight: [],
    },
  },


  // Case 3
  {
    input: {
      foo: 123,
      'v-for': 555,
      bar: 321,
    },
    expect: {
      'v-for': 555,
      bar: 321,
      foo: 123,
    },
    options: {
      sortLeft: ['v-'],
      sortRight: [],
    },
  },


  // Case 4
  {
    input: {
      foo: 123,
      'v-if': 666,
      'v-for': 555,
      bar: 321,
    },
    expect: {
      'v-for': 555,
      'v-if': 666,
      bar: 321,
      foo: 123,
    },
    options: {
      sortLeft: ['v-'],
      sortRight: [],
    },
  },


  // Case 5
  {
    input: {
      '@click': 000,
      foo: 123,
      'v-if': 666,
      'v-for': 555,
      bar: 321,
    },
    expect: {
      'v-for': 555,
      'v-if': 666,
      bar: 321,
      foo: 123,
      '@click': 000,
    },
    options: {
      sortLeft: ['v-'],
      sortRight: ['@'],
    },
  },

  // Case 6
  {
    input: {
      '@click': 000,
      foo: 123,
      ':bind': 888,
      '#slot': 777,
      'v-if': 666,
      'v-for': 555,
      bar: 321,
    },
    expect: {
      '#slot': 777,
      ':bind': 888,
      'v-for': 555,
      'v-if': 666,
      bar: 321,
      foo: 123,
      '@click': 000,
    },
    options: {
      sortLeft: ['#', ':', 'v-',],
      sortRight: ['@'],
    },
  },

]

// "Test Framework"

const isEqual = (a, b) => JSON.stringify(a) === JSON.stringify(b)
const fromEntries = (acc, [key, value]) => ({...acc, [key]: value})
const sortObject = (obj, sortHandler) =>
  sortHandler(Object.entries(obj))
    .reduce(fromEntries, {})
const test = (cases, sortHandler) => cases
  .map((payload, index) => {
    const {input, expect, options} = payload
    const output = sortObject(input, sortHandler(options))
    const equal = isEqual(output, expect)
    return equal
      ? {testCase: index, equal}
      : {testCase: index, equal, expect, output}
  })
  .forEach(item => console.log(item))

test(cases, sort)

I don't know if you already though about this, honestly I should've seen what you already did before, but I forgot it and I didn't want to throw this away 😅

[Shinigami92]

What about v-for, :key and v-if?
I want to force an order of v-col(v-for="x in y", :key="x.id", v-if="x.visible")

[SkyaTura]

You could set

const pugSortingAttributes = {
  sortLeft: [
    '#',
    'v-slot',
    'v-for',
    ':key',
    'v-if',
    ':',
    'v-',
  ],
  sortRight: ['v-on', '@'],
}

it would output

FooComponent(
  #child="props"
  v-for="foo in bar"
  :key="foo.id"
  v-if="true"
  :bind="888"
  bar="321"
  foo="123"
  v-on="$listeners"
  @click="fooAction"
)

Not that this would be the best pattern, I'm thinking only about the options specs

[Shinigami92]

Mhhhh
Maybe it needs to be pugAttributesSortLeft and pugAttributesSortRight or I need to find out if "complex" objects are possible as option value 🤔

Could you also please look into angular support? https://angular.io/guide/binding-syntax
So maybe we need to arrange attributes like (click), [(ngModel)], [disabled], *ngIf and *ngFor (and so on)

[SkyaTura]

However, if you had a prop named like keyItems it would be sorted incorrectly.

Maybe should be interesting the mixed usage of RegEx, as you proposed, and maybe a object configuration for easing.

Spec

type SortingParameter = string | RegExp | {
  value: string,
  type: 'exactMatch' | 'contains' | 'startsWith' | 'endsWith'
}

interface SortingAttributes {
  sortLeft?: SortingParameter[]
  sortRight?: SortingParameter[]
}

Vue usage

const pugSortingAttributes: SortingAttributes = {
  sortLeft: [
    { value: '#', type: 'startsWith' },
    { value: 'v-slot', type: 'startsWith' },
    { value: 'v-for', type: 'exactMatch' },
    { value: ':key', type: 'exactMatch' },
    { value: 'v-bind:key', type: 'exactMatch' },
    { value: 'v-if', type: 'exactMatch' },
    { value: ':', type: 'startsWith' },
    { value: 'v-bind:', type: 'startsWith' },
    { value: 'v-', type: 'startsWith' },
  ],
  sortRight: [
    'v-on',
    '@',
  ],
}

Angular usage

• TODO

Workarounds

If these propositions aren't compatible with Prettier's possibilities, we could create some kind of syntax to convert this into a string format, which, however, would make it a lot harder to customize.

Default patterns

There should be an option to toggle between frameworks too, as they may contradict themselves.