Phoenix 1.7.2 已發布

發布於 2023 年 3 月 20 日，作者 Chris McCord

---

Phoenix 1.7.2 已推出！此小版本包含一些值得討論的功能。我們開始吧！

更輕鬆地退出 Tailwind

Phoenix 1.7 已預設包含 tailwindcss 和新的基於元件架構的表單。這使得以其他工具或自訂 CSS 取代 Tailwind 變得很容易，但仍有一些手動步驟。具體來說，您需要移除 tailwind.config.js 檔案和開發階段的 :watchers 設定。我們引入了 mix phx.new --no-tailwind 旗標，讓大家在產生新專案時可以略過這些步驟。

通道和 LiveView Socket 釋放

對於像通道或 LiveView 等有狀態應用程式，在高階層環境中進行冷部署會很具有挑戰性，且難以編排。部署通常需要自訂調整部署工具或代理，以時間分批釋出版本，避免因為大量流量而使新伺服器過載。Phoenix 1.7.2 引入了新的通道 socket 釋放功能，可在應用程式關閉時，編排按批次、分階段進行釋放的程序。預設已啟用釋放功能，您可以從端點中的 socket 巨集設定關閉程序。

來自文件

  @doc """
  ...
  * `:drainer` - a keyword list configuring how to drain sockets
    on application shutdown. The goal is to notify all channels (and
    LiveViews) clients to reconnect. The supported options are:

    * `:batch_size` - How many clients to notify at once in a given batch.
      Defaults to 10000.
    * `:batch_interval` - The amount of time in milliseconds given for a
      batch to terminate. Defaults to 2000ms.
    * `:shutdown` - The maximum amount of time in milliseconds allowed
      to drain all batches. Defaults to 30000ms.

  For example, if you have 150k connections, the default values will
  split them into 15 batches of 10k connections. Each batch takes
  2000ms before the next batch starts. In this case, we will do everything
  right under the maximum shutdown time of 30000ms. Therefore, as
  you increase the number of connections, remember to adjust the shutdown
  accordingly. Finally, after the socket drainer runs, the lower level
  HTTP/HTTPS connection drainer will still run, and apply to all connections.
  Set it to `false` to disable draining.
  """

如果您沒有在高階層環境中作業，就不需要擔心這個功能，但在需要時，它會在那裡等著您。如果您已經在高階層環境中作業，這個功能應該可以降低基礎架構的部署壓力，或讓您擺脫特定於雲端平台的設定。

JS.exec

我們引入了新的 JS 命令，用於執行位於其他 DOM 元素上頁面上的現有命令。這在某些情況下能大幅最佳化 payload，這些情況下通常需要在 DOM 中多次嵌入重複的命令。例如，您在 core_components.ex 模組中的預設對話方塊以前含有用於在多個地方關閉對話方塊的重複命令。

  def modal(assigns) do
    ~H"""
    <div
      id={@id}
      phx-mounted={@show && show_modal(@id)}
      phx-remove={hide_modal(@id)}
    >
      <div id={"#{@id}-bg"}>
      <div>
        <div class="flex min-h-full items-center justify-center">
          <div class="w-full max-w-3xl p-4 sm:p-6 lg:py-8">
            <.focus_wrap
              id={"#{@id}-container"}
              phx-window-keydown={hide_modal(@on_cancel, @id)}
              phx-key="escape"
              phx-click-away={hide_modal(@on_cancel, @id)}
    """
  end

我們對 phx-window-keydown 和 phx-click-away 有相同的命令，而在 phx-remove 上也有類似的命令。這些命令會隱藏對話方塊，並呼叫呼叫者自己的命令（在 按下 ESC 鍵或點按對話方塊外側時），並在使用者導航離開時轉換對話方塊。當 JS 命令包含像帶有自己 class 和時間值的轉換這種東西時，會產生相當大的 payload。我們可以透過只指定一次命令，並告訴 LiveView 它可以在哪裡執行，讓 payload 減少一半以上。新的對話方塊如下所示

  def modal(assigns) do
    ~H"""
    <div
      id={@id}
      phx-mounted={@show && show_modal(@id)}
      phx-remove={hide_modal(@id)}
      data-cancel={JS.exec(@on_cancel, "phx-remove")}
    >
      <div id={"#{@id}-bg"}>
      <div>
        <div class="flex min-h-full items-center justify-center">
          <div class="w-full max-w-3xl p-4 sm:p-6 lg:py-8">
            <.focus_wrap
              id={"#{@id}-container"}
              phx-window-keydown={JS.exec("data-cancel", to: "##{@id}")}
              phx-key="escape"
              phx-click-away={JS.exec("data-cancel", to: "##{@id}")}
    """
  end

我們使用 JS.exec 執行 data-cancel 屬性，我們在這裡共用在 phx-remove 中指定的 hide_modal 命令。我們的行為和以前一樣，但現在只傳送一次，而不是三次。

快快樂樂地寫程式吧！

–Chris

---