feat: Export surface hooks as a separate file

.gitignore

@@ -30,6 +30,7 @@ npm-debug.log
 
 # Ignore assets that are produced by build tools.
 /priv/static/assets/
+!/priv/static/assets/hooks.js
 
 node_modules
 .DS_Store

assets/js/app.js

@@ -1,22 +1,8 @@
-// webpack automatically bundles all modules in your
-// entry points. Those entry points can be configured
-// in 'webpack.config.js'.
-//
-// Import deps with the dep name or local files with a relative path, for example:
-//
-//     import {Socket} from 'phoenix'
-//     import socket from './socket'
-//
 import 'phoenix_html'
 import { Socket } from 'phoenix'
 import { LiveSocket } from 'phoenix_live_view'
 import Alpine from 'alpinejs'
-
-import Datepicker from './hooks/datepicker'
-
-const hooks = {
-  Datepicker
-}
+import { hooks } from './hooks'
 
 let csrfToken = document
   .querySelector("meta[name='csrf-token']")

assets/js/hooks.js

@@ -0,0 +1 @@
+export { default as hooks } from './hooks/index'

assets/js/hooks/datepicker.js

@@ -1,4 +1,4 @@
-const Datepicker = {
+export default {
   updated() {
     if (this.el.value) {
       const newVal = this.el.dataset.pendingVal
@@ -8,5 +8,3 @@ const Datepicker = {
     }
   }
 }
-
-export default Datepicker

assets/js/hooks/index.js

@@ -0,0 +1,5 @@
+import { default as Datepicker } from './datepicker'
+
+export default {
+  Datepicker
+}

config/config.exs

@@ -28,7 +28,7 @@ config :phoenix, :json_library, Jason
 config :esbuild,
   version: "0.12.18",
   default: [
-    args: ~w(js/app.js --bundle --target=es2016 --outdir=../priv/static/assets),
+    args: ~w(js/app.js js/hooks.js --bundle --target=es2016 --outdir=../priv/static/assets),
     cd: Path.expand("../assets", __DIR__),
     env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
   ]