PhoenixでPage Specific JavaScript
と言ってもすでにインタネットに情報があります。
まずはviewモジュール名(@view_module
)とテンプレート名(@view_template
)からjsファイルのパスが導出できるように取り決めしておき、bodyタグのdata属性にそのパスを吐き出しておく。で、DOMContentLoaded
イベントでそのパスを読み、webpackのrequire.context
でガバっと読み込んだ中から実行するものを決める、という寸法。
ただこのページにあるコードではjsのファイル名がイマイチで、もうちょい良くなりそう。
def unique_view_name(view_module, view_template) do [_elixir, _app | context_controller_template] = view_module |> Phoenix.Naming.humanize() |> String.split(".") [action, "html"] = view_template |> String.split(".") Enum.join(context_controller_template ++ [action], "_") end
例えばUserController
のshow
アクションとかなら、userview_show
になるし、Admin.UserController
のindex
アクションとかなら、admin_userview_index
になる。ただしこれだとjsファイルを同じディレクトリに全部並べなくてはならず、Elixirのコードと同じような階層構造をつくって整理できない。また、jsのファイル名はkebab-caseかCamelCaseがおそらく一般的で、少なくとも_
区切りは好まれない。あとuserview
のようにview
が全部に付くのもどうにかしたい。
ということで書いてみたのが以下。
def js_module_path(view_module, view_template) do [_elixir, _my_app_web | context_view] = view_module |> Atom.to_string() |> String.split(".") context_names = context_view |> List.delete_at(-1) resource_name = view_module |> Phoenix.Naming.resource_name("View") template_name = view_template |> String.replace_suffix(".html", "") (context_names ++ [resource_name, template_name]) |> Enum.map(&(&1 |> Phoenix.Naming.underscore |> String.replace("_", "-"))) |> Enum.join("/") end
Phoenix.Naming
便利。これならマックス意地悪な入力を与えても
js_module_path( MyAppWeb.GreatShop.TopSeller.FancyItemView, "member_only_index.html" ) #=> "great-shop/top-seller/fancy-item/member-only-index"
という出力になっていい感じ。
ちなみに、これまでPhoenixのモジュールバンドラはbrunchがデフォルトでしたが、v1.4.0からwebpackになります。
全部書いておく。
<!-- app.html.eex --> <html> ... <body data-js-path="<%= js_module_path(@view_module, @view_template) %>"> ... </body> </html>
# lib/my_app_web/views/layout_view.ex defmodule MyAppWeb.LayoutView do use MyAppWeb, :view def js_module_path(view_module, view_template) do [_elixir, _my_app_web | context_view] = view_module |> Atom.to_string() |> String.split(".") context_names = context_view |> List.delete_at(-1) resource_name = view_module |> Phoenix.Naming.resource_name("View") template_name = view_template |> String.replace_suffix(".html", "") (context_names ++ [resource_name, template_name]) |> Enum.map(&(&1 |> Phoenix.Naming.underscore |> String.replace("_", "-"))) |> Enum.join("/") end end
// assets/js/app.js import css from "../css/app.css" import "phoenix_html" import pageScript from './pages/index' window.addEventListener("DOMContentLoaded", () => { pageScript() })
// assets/js/pages/index.js const requireContext = require.context(".", true, /\.js$/) const modules = {} requireContext .keys() .filter(filename => filename !== './index.js') .forEach(filename => { const path = filename.replace('./', '').replace('.js', '') modules[path] = requireContext(filename) }) export default function() { const path = document.querySelector('body').dataset.jsPath const fun = modules[path] if (fun && fun.default) { fun.default() } }