allow to omit name for colocated js (#3860)

Author: SteffenDE

lib/phoenix_live_view/colocated_js.ex

@@ -128,15 +128,14 @@ defmodule Phoenix.LiveView.ColocatedJS do
   The supported attributes are:
 
     * `name` - The name under which the default export of the script is available when importing
-      the manifest. This is required, even if you don't plan to access the exported values or the
-      script does not actually export anything.
+      the manifest. If omitted, the file will be imported for side effects only.
 
     * `key` - A custom key to use for the export. This is used by `Phoenix.LiveView.ColocatedHook` to
       export all hooks under the named `hooks` export (`export { ... as hooks }`).
       For example, you could set this to `web_components` for each colocated script that defines
       a web component and then import all of them as `import { web_components } from "phoenix-colocated/my_app"`.
       Defaults to `:default`, which means the export will be available under the manifest's `default` export.
-      This needs to be a valid JavaScript identifier.
+      This needs to be a valid JavaScript identifier. When given, a `name` is required as well.
 
     * `extension` - a custom extension to use when writing the extracted file. The default is `js`.
 
@@ -173,8 +172,12 @@ defmodule Phoenix.LiveView.ColocatedJS do
         raise ArgumentError,
               "the name attribute of a colocated script must be a compile-time string. Got: #{Macro.to_string(name)}"
 
+      %{"key" => _} ->
+        raise ArgumentError,
+              "a name is required when a key is given"
+
       _ ->
-        raise ArgumentError, "missing required name attribute for ColocatedJS"
+        :ok
     end
   end
 
@@ -191,7 +194,7 @@ defmodule Phoenix.LiveView.ColocatedJS do
       |> maybe_put_opt(opts, "manifest", :manifest)
 
     hashed_name =
-      filename_opts.name
+      (filename_opts.name || text_content)
       |> then(&:crypto.hash(:md5, &1))
       |> Base.encode32(case: :lower, padding: false)
 
@@ -304,13 +307,17 @@ defmodule Phoenix.LiveView.ColocatedJS do
           {:default, entries} ->
             [
               acc,
-              Enum.map(entries, fn {file, %{name: name}} ->
-                import_name =
-                  "js_" <> Base.encode32(:crypto.hash(:md5, file), case: :lower, padding: false)
+              Enum.map(entries, fn
+                {file, %{name: nil}} ->
+                  ~s[import "./#{Path.relative_to(file, target_dir)}";\n]
 
-                escaped_name = Phoenix.HTML.javascript_escape(name)
+                {file, %{name: name}} ->
+                  import_name =
+                    "js_" <> Base.encode32(:crypto.hash(:md5, file), case: :lower, padding: false)
 
-                ~s<import #{import_name} from "./#{Path.relative_to(file, target_dir)}"; js["#{escaped_name}"] = #{import_name};\n>
+                  escaped_name = Phoenix.HTML.javascript_escape(name)
+
+                  ~s<import #{import_name} from "./#{Path.relative_to(file, target_dir)}"; js["#{escaped_name}"] = #{import_name};\n>
               end)
             ]
 
@@ -320,13 +327,17 @@ defmodule Phoenix.LiveView.ColocatedJS do
             [
               acc,
               ~s<const #{tmp_name} = {}; export { #{tmp_name} as #{key} };\n>,
-              Enum.map(entries, fn {file, %{name: name}} ->
-                import_name =
-                  "js_" <> Base.encode32(:crypto.hash(:md5, file), case: :lower, padding: false)
+              Enum.map(entries, fn
+                {file, %{name: nil}} ->
+                  ~s[import "./#{Path.relative_to(file, target_dir)}";\n]
+
+                {file, %{name: name}} ->
+                  import_name =
+                    "js_" <> Base.encode32(:crypto.hash(:md5, file), case: :lower, padding: false)
 
-                escaped_name = Phoenix.HTML.javascript_escape(name)
+                  escaped_name = Phoenix.HTML.javascript_escape(name)
 
-                ~s<import #{import_name} from "./#{Path.relative_to(file, target_dir)}"; #{tmp_name}["#{escaped_name}"] = #{import_name};\n>
+                  ~s<import #{import_name} from "./#{Path.relative_to(file, target_dir)}"; #{tmp_name}["#{escaped_name}"] = #{import_name};\n>
               end)
             ]
         end

test/phoenix_live_view/colocated_js_test.exs

@@ -24,7 +24,7 @@ defmodule Phoenix.LiveView.ColocatedJSTest do
 
     assert folder =
              Enum.find(module_folders, fn folder ->
-               folder =~ ~r/#{inspect(__MODULE__)}\.TestComponent/
+               folder =~ ~r/#{inspect(__MODULE__)}\.TestComponent$/
              end)
 
     assert [script] =
@@ -132,6 +132,67 @@ defmodule Phoenix.LiveView.ColocatedJSTest do
     :code.purge(__MODULE__.TestComponentKey)
   end
 
+  test "nameless script is imported for side effects only" do
+    defmodule TestComponentSideEffects do
+      use Phoenix.Component
+      alias Phoenix.LiveView.ColocatedJS, as: Colo
+
+      def fun(assigns) do
+        ~H"""
+        <script :type={Colo}>
+          console.log("hey!");
+        </script>
+        """
+      end
+    end
+
+    assert module_folders =
+             File.ls!(Path.join(Mix.Project.build_path(), "phoenix-colocated/phoenix_live_view"))
+
+    assert folder =
+             Enum.find(module_folders, fn folder ->
+               folder =~ ~r/#{inspect(__MODULE__)}\.TestComponentSideEffects/
+             end)
+
+    assert [script] =
+             Path.wildcard(
+               Path.join(
+                 Mix.Project.build_path(),
+                 "phoenix-colocated/phoenix_live_view/#{folder}/*.js"
+               )
+             )
+
+    assert File.read!(script) == """
+
+             console.log("hey!");
+           """
+
+    # now write the manifest manually as we are in a test
+    Phoenix.LiveView.ColocatedJS.compile()
+
+    relative_script_path =
+      Path.relative_to(
+        script,
+        Path.join(Mix.Project.build_path(), "phoenix-colocated/phoenix_live_view/")
+      )
+
+    assert manifest =
+             File.read!(
+               Path.join(Mix.Project.build_path(), "phoenix-colocated/phoenix_live_view/index.js")
+             )
+
+    assert line =
+             Enum.find(String.split(manifest, "\n"), fn line ->
+               line =~ inspect(__MODULE__.TestComponentSideEffects)
+             end)
+
+    assert [_match] =
+             Regex.run(~r/import "\.\/#{Regex.escape(relative_script_path)}";/, line)
+  after
+    :code.delete(__MODULE__.TestComponentSideEffects)
+    :code.purge(__MODULE__.TestComponentSideEffects)
+  end
+
   test "raises for invalid name" do
     assert_raise Phoenix.LiveView.Tokenizer.ParseError,
                  ~r/the name attribute of a colocated script must be a compile-time string\. Got: @foo/,