Support unique component ids in the context of module federated apps..

[koenvd]

When using the lib in the context of module federated apps component ids are no longer unique.

This can cause issues as for example clicking a checkbox in one app resulting in the checkbox in the other app becoming selected.

Root cause is that ids are generated like (here for checkbox)

static checkboxCount = 0;
@Input() id = `checkbox-${Checkbox.checkboxCount}`; 

When different module federated apps load the checkbox module the checkboxCount is always initialised with 0 causing duplicated ids being generated in all related MFEs.

Currently a mechanism exist so the id can be provided as well at the component level but this quickly becomes cumbersome to generate ids on all places where a conflict could arise. It would be nice this would be fixed in a generic way in the library itself.

For example for now we patched the lib as this:

Checkbox.checkboxCount = 0;
Checkbox.checkboxIdPrefix = Math.random().toString(36).slice(2, 18);
 this.id = `checkbox-${Checkbox.checkboxIdPrefix}-${Checkbox.checkboxCount}`;

Due to adding the randomised prefix the change of conflicts is now becoming non existent. But maybe there's a nicer way to fix this?

[klaascuvelier]

@Akshat55, do you have any input on this issue? We've patched it locally, but I wonder if we could contribute it upstream. I'm not sure how many others are using federated apps, but this could be beneficial.