UI is not re-rendered when Set is used.

[sahithyandev]

I'm submitting a feature request

• Library Version: 1.3.1 (But what is the library version? How to find it? 1.3.1 is Aurelia CLI version)

Please tell us about your environment:

• Operating System: Windows 10

• Node Version: 12.16.2

• NPM Version: 6.9.0

• Aurelia CLI OR JSPM OR Webpack AND Version CLI 1.3.1 | webpack 4.43.0

• Browser: Chrome 81 (81.0.4044.138)

• Language: TypeScript 3.6.4

Current behavior: I am using Set to store the classNames of an object. I am binding the class with Set.join(' ') (I wrote the join method for Set, it works like Array.prototype.join). When I add value to the Set object, the UI doesn't change.

I think that there are no prototype overrides for Set.

Expected/desired behavior:

https://gist.run/?id=41630e04f1399a58fd693b8f7611c028

• What is the motivation/use case for changing the behavior? Sets are the most suitable data type to store the class names of an element as it won't hold duplicate values. So it would be great if Aurelia overrides Set.prototype functions.

[bigopon]

For you main Q related to

<div class.bind="Array.from(classNames).join(' ')">

It is how Aurelia works, nothing wrong with your extension. The expression Array.from(classNames).join(' ') will have only classNames property observed. Which means as long as the value of classNames hasn't changed, the binding to update class on the <div/> won't be updated. Note that mutation of an object/array/set/map doesn't count as property change. As following example:

app.classNames = new Set();
app.classNames.add('my-class'); // set mutation, not property change
app.classNames = new Set(); // property change

So for your scenario, the easiest way is to:

<div class.bind="Array.from(classNames).join(' ') | identity :classNames.size"

The part identity :classNames.size will tell Aurelia to also observe mutation on classNames Set, so that when you add new class to it, the binding will update.

Identity value converter can be simple like this;

import { valueConverter } from 'aurelia-framework';

@valueConverter('identity')
export class IdentityValueConverter {
  toView(val) {
    return val;
  }
}

And register it globally:

aurelia
  .use
  .globalResources(IdentityValueConverter)

[sahithyandev]

Thank you for your response. I will test it out and get back to you soon.

[sahithyandev]

I found another workaround to do this. Instead of using identities, I created a new Set and updated the classNames with it. So now, it is not a mutation and it works.

See it running here. (Click on the Hello World text to see it) https://gist.run/?id=41630e04f1399a58fd693b8f7611c028

[bigopon]

@KSahithyan yup, it works well that way too. So it's up to you, based on different situation/scenarios. Glad you got it work the way you want.

For reproduction of issues/bugs, I'd recommend this https://gist.dumber.app, it can be considered the successor of gist.run

[bigopon]

@KSahithyan @EisenbergEffect I guess we can close this?