Add JavaScript hot-reloading to frontend template (#17)

* Add JavaScript hot-reloading to frontend template

- Add js_reloader.erl module to handle JavaScript rebuilds
- Configure reloader to watch assets/js directory for .js file changes
- Runs npm run build:js when JavaScript files are modified
- Broadcasts js reload event via arizona_pubsub for live updates
- Includes error handling for failed JS builds with output logging

* Add js_reloader.erl to frontend template definition

- Include js_reloader.erl in arizona.frontend.template file list
- Ensures JS reloader module is created when generating new projects
- Fixes missing template entry for JavaScript hot-reloading functionality

* Add debounce timing to hot-reload watchers

- Add 50ms debounce to CSS reloader to prevent excessive rebuilds
- Add 20ms debounce to JS reloader for faster feedback on JavaScript changes
- Optimizes performance by batching rapid file changes
- Reduces unnecessary build cycles during development

Author: williamthome

priv/templates/arizona.frontend.template

@@ -26,6 +26,7 @@
 {template, "arizona.frontend/src/app.src", "{{name}}/src/{{name}}.app.src"}.
 {template, "arizona.frontend/src/app.erl", "{{name}}/src/{{name}}_app.erl"}.
 {template, "arizona.frontend/src/css_reloader.erl", "{{name}}/src/{{name}}_css_reloader.erl"}.
+{template, "arizona.frontend/src/js_reloader.erl", "{{name}}/src/{{name}}_js_reloader.erl"}.
 {template, "arizona.frontend/src/layout.erl", "{{name}}/src/{{name}}_layout.erl"}.
 {template, "arizona.frontend/src/view.erl", "{{name}}/src/{{name}}_view.erl"}.
 {template, "arizona.frontend/src/sup.erl", "{{name}}/src/{{name}}_sup.erl"}.

priv/templates/arizona.frontend/config/sys.config

@@ -20,7 +20,16 @@
                     handler => {{{name}}_css_reloader, #{}},
                     watcher => #{
                         directories => ["assets/css", "src"],
-                        patterns => [".*\\.css$", ".*\\.erl$"]
+                        patterns => [".*\\.css$", ".*\\.erl$"],
+                        debounce_ms => 50
+                    }
+                },
+                #{
+                    handler => {{{name}}_js_reloader, #{}},
+                    watcher => #{
+                        directories => ["assets/js"],
+                        patterns => [".*\\.js$"],
+                        debounce_ms => 20
                     }
                 }
             ]

priv/templates/arizona.frontend/src/js_reloader.erl

@@ -0,0 +1,13 @@
+-module({{name}}_js_reloader).
+-behaviour(arizona_reloader).
+-export([reload/2]).
+
+reload(_Files, _Opts) ->
+    try
+        CompileResult = os:cmd("npm run build:js", #{exception_on_failure => true}),
+        ok = io:format("~ts", [CompileResult]),
+        arizona_pubsub:broadcast(~"reload", js)
+    catch
+        error:{command_failed, ResultBeforeFailure, _ExitCode} ->
+            io:format("JS build failed:~n~ts~n", [ResultBeforeFailure])
+    end.