Phoenix.LiveView.ColocatedHook

Специальный компонент HEEx :type, который извлекает хуки из расположенного рядом тега <script> во время компиляции.

Примечание: для использования ColocatedHook требуется Phoenix 1.8 или выше.

Введение

Расположенные рядом хуки определяются так же, как :type={Phoenix.LiveView.ColocatedHook}:

defmodule MyAppWeb.DemoLive do
  use MyAppWeb, :live_view

  def mount(_params, _session, socket) do
    {:ok, socket}
  end

  def render(assigns) do
    ~H"""
    <input type="text" name="user[phone_number]" id="user-phone-number" phx-hook=".PhoneNumber" />
    <script :type={Phoenix.LiveView.ColocatedHook} name=".PhoneNumber">
      export default {
        mounted() {
          this.el.addEventListener("input", e => {
            let match = this.el.value.replace(/\D/g, "").match(/^(\d{3})(\d{3})(\d{4})$/)
            if(match) {
              this.el.value = `${match[1]}-${match[2]}-${match[3]}`
            }
          })
        }
      }
    </script>
    """
  end
end

Подробнее о внутреннем устройстве расположенных рядом хуков можно узнать в документации по расположенным рядом JS-фрагментам. Краткое описание: во время компиляции код хука извлекается в специальную папку, обычно в каталоге _build. Каждый хук также importуется в специальный файл манифеста. Файл манифеста предоставляет именованный экспорт, который позволяет импортировать его с помощью любого сборщика JavaScript, поддерживающего модули ES:

import {hooks} from "phoenix-colocated/my_app"

console.log(hooks);
/*
{
  "MyAppWeb.DemoLive.PhoneNumber": {...},
  ...
}
*/

release: ["assets.deploy", "release"]

release: ["compile", "assets.deploy", "release"]

Параметры

Расположенные рядом хуки настраиваются с помощью атрибутов тега <script>. Поддерживаются следующие атрибуты:

• name — имя хука. Этот атрибут обязателен, и значение должно начинаться с точки, например: name=".myhook". При обращении к этому хуку в атрибуте phx-hook другого HTML-элемента необходимо использовать то же имя.

• runtime — если этот атрибут указан, хук не извлекается, а регистрируется во время выполнения. Используйте этот параметр только в том случае, если он действительно необходим. Он имеет ряд ограничений:

  1. Содержимое не обрабатывается сборщиком, поэтому в нем можно использовать только функции, поддерживаемые целевыми браузерами.
  2. Необходимо учитывать возможные политики безопасности контента. Подробнее см. в разделе о хуках времени выполнения ниже.

Хуки времени выполнения

Хуки времени выполнения — это особый вид расположенных рядом хуков, которые не удаляются из DOM при отрисовке компонента. Вместо этого код хука выполняется непосредственно в браузере, без участия сборщика.

Это может пригодиться, например, при создании пользовательской страницы для такой библиотеки, как Phoenix.LiveDashboard. Интерактивная панель уже собирает свои хуки, поэтому при использовании панели в приложении добавить новые хуки в сборку невозможно.

По этой причине синтаксис хуков времени выполнения немного отличается. В обычных расположенных рядом хуках вы бы написали оператор export default, тогда как хуки времени выполнения должны возвращать сам хук:

<script :type={Phoenix.LiveView.ColocatedHook} name=".MyHook" runtime>
  {
    mounted() {
      ...
    }
  }
</script>

Это связано с тем, что LiveView оборачивает код хука примерно так:

window["phx_hook_HASH"] = function() {
  return {
    mounted() {
      ...
    }
  }
}

Однако даже для хуков времени выполнения имя хука должно начинаться с точки; к нему автоматически добавляется префикс с именем модуля, чтобы избежать конфликтов с другими хуками.

При использовании хуков времени выполнения важно учитывать ограничения, которые могут накладывать политики безопасности контента. Если используется CSP, хуки времени выполнения можно применять только с помощью nonce CSP:

<script :type={Phoenix.LiveView.ColocatedHook} name=".MyHook" runtime nonce={@script_csp_nonce}>
  function() {
    return ...;
  }
</script>

Предполагается, что assign @script_csp_nonce содержит значение nonce, которое также передается в заголовке Content-Security-Policy.