[feat] Centralized event-bus to manage synced carousels

[ismail9k]

Motivation

The current approach to synchronize two carousels requires that the two carousels must be in the same context, where Hooper search for a carousel with ref prop same as the current carousel's synced prop value and link them together. This approach seemed to have many issues, especially when passing the carousels to another component slot (#69 #55).

Suggested Solution

A new centralized event-bus to manage synced-carousels, which each carousel with synced prop subscribe to, and when one of the subscribed carousels is updated it notifies all the other carousels which have the same synced prop name.

Using Example

<hoooper synced="myCarousel">
    ...
</hooper>

<hoooper synced="myCarousel">
    ...
</hooper>

<hoooper synced="myCarousel">
    ...
</hooper>

Benefits

• Ability to sync more than two carousels
• Syncing carousels will be context independent
• Fix issue when passing carousel to another component slot

Drawbacks

Deprecates the ref/synced API to link two carousels, instead, use synced prop for all carousels with the same value.

Alternatives

N/A

[logaretm]

I suggest we drop the propsynced as it implies boolean value, instead we could go for group name which is clearer. I thought about sync but it would be confusing since prop.sync modifier is a thing.

<hoooper group="myCarousel">
    ...
</hooper>

<hoooper group="myCarousel">
    ...
</hooper>

<hoooper group="myCarousel">
    ...
</hooper>

[ismail9k]

Seems better for me, we will deprecate the old props completely, and introduce the more intuitive group prop.