[JavaScript] Stimulus フレームワークでのコントローラーをまたぐ処理について

『ページ内のサムネイルをクリックしたらモーダルウィンドウで拡大画像が表示される』といったような
まったく異なる要素間での連携が必要になるケースの実装についてです。

フレームワーク側でイベントをディスパッチするような仕組みはあるのでしょうか。

公式のリファレンスを見ても一切そういうものは見当たりませんでしたので pubsub-js を使用しました。
これでいいのならこのままでよいですが、Stimulus で用意されているものがあればそちらを使いたいと考えています。

サンプルコード

html
1<!-- サムネイルリスト -->
2  <ul>
3    <li 
4      data-controller="thumbnail" 
5      data-action="click->thumbnail#show"
6      data-thumbnail-index="0">
7      <img src="//placehold.it/200/c99" alt="">
8    </li>
9    <li
10      data-controller="thumbnail" 
11      data-action="click->thumbnail#show"
12      data-thumbnail-index="1">
13      <img src="//placehold.it/200/99c" alt="">
14    </li>
15  </ul>
16
17  <!-- モーダルウィンドウ -->
18  <div data-controller="modal-window">
19    <img 
20      src="//placehold.it/800/c99"
21      data-target="modal-window.image">
22    <img 
23      src="//placehold.it/800/99c"
24      data-target="modal-window.image">
25  </div>

js
1// thumbnail_controller.js
2import { Controller } from 'stimulus'
3import PubSub from 'pubsub-js'
4
5export default class extends Controller {
6  show() {
7    const index = this.data.get('index')
8    PubSub.publish('thumbnail:click', { index })
9  }
10}

js
1// modal_window_controller.js
2import { Controller } from 'stimulus'
3import PubSub from 'pubsub-js'
4
5export default class extends Controller {
6  static targets = ['image']
7  connect() {
8    PubSub.subscribe('thumbnail:click', this.show.bind(this))
9  }
10  show(e, { index }) {
11    this.imageTargets[index].style.display = 'block'
12  }
13}