🙄
salad_ui hex の初期化で追加される js-exec について
salad ui を使ってみた際にapp.jsに挿入される下記のコードについてのメモです。
// Allows to execute JS commands from the server
window.addEventListener("phx:js-exec", ({detail}) => {
document.querySelectorAll(detail.to).forEach(el => {
liveSocket.execJS(el, el.getAttribute(detail.attr))
})
})
これは各コンポーネントをサーバ側から操作するために挿入されています。
コンポーネントのタグ属性に、JS定義されている処理を、サーバ側から発火させる際に使われます。
なお、サンプルは公式にあります。
（以下ざっくり）
salad-uiのコンポーネントが下記のようになっているので、
<div
class="sheet-content relative z-50"
id={@id}
phx-show-sheet={@id && show_sheet(@id, @side)}
phx-hide-sheet={@id && hide_sheet(@id, @side)}
{@rest}
>
（この場合は）phx-hide-sheetの処理をサーバ側から起動させるために使います。
push_event(socket, "js-exec", %{to: "#my-sheet", attr: "phx-hide-sheet"})}
app.jpに挿入されたものは↑のjs-execイベントを受けるコードですね。
（push_eventしたイベントは特にHookしていないならphx:イベント名で受け取れます）
特にsalad uiと関係なくプラクティスとして使って良さそうです！
関連記事です。
Qiitaアドベントカレンダー Elixirもぜひご覧ください！
Discussion