Improve development setup

Author: Flo0807

Dockerfile

@@ -58,7 +58,6 @@ COPY demo/package.json demo/yarn.lock demo/.stylelintrc.json ./
 
 COPY assets ../assets/
 COPY package.json ../
-COPY priv/static/js ../priv/static/js/
 
 RUN yarn install --pure-lockfile
 

demo/.gitignore

@@ -22,6 +22,7 @@ erl_crash.dump
 demo-*.tar
 /priv/cert
 /priv/static/assets/
+/priv/static/js
 /priv/static/cache_manifest.json
 report.*.json
 openapi.json

demo/assets/js/app.js

@@ -3,7 +3,9 @@ import * as Sentry from '@sentry/browser'
 import topbar from 'topbar'
 import { Socket } from 'phoenix'
 import { LiveSocket } from 'phoenix_live_view'
-import { Hooks as BackpexHooks } from 'backpex'
+// in your app.js, just use 'backpex' like this:
+// import { Hooks as BackpexHooks } from 'backpex'
+import { Hooks as BackpexHooks } from '#backpex'
 
 /**
  * Sentry

demo/config/config.exs

@@ -56,6 +56,12 @@ config :esbuild,
       ~w(assets/js/app.js --bundle --target=es2017 --outdir=priv/static/assets --external:/fonts/* --external:/images/*),
     cd: Path.expand("..", __DIR__),
     env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
+  ],
+  backpex: [
+    args:
+      ~w(../assets/js/backpex.js --bundle --format=esm --sourcemap --outfile=priv/static/js/backpex.esm.js),
+    cd: Path.expand("..", __DIR__),
+    env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
   ]
 
 config :tailwind,

demo/config/dev.exs

@@ -16,6 +16,7 @@ config :demo, DemoWeb.Endpoint,
   code_reloader: true,
   check_origin: false,
   watchers: [
+    backpex: {Esbuild, :install_and_run, [:backpex, ~w(--sourcemap=inline --watch)]},
     esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]},
     tailwind: {Tailwind, :install_and_run, [:default, ~w(--watch)]}
   ],
@@ -26,7 +27,8 @@ config :demo, DemoWeb.Endpoint,
       ~r"demo/lib/demo_web/helpers.ex$",
       ~r"demo/lib/demo_web/(live|views)/.*(ex)$",
       ~r"demo/lib/demo_web/templates/.*(eex)$",
-      ~r"lib/backpex/(fields|html)/.*(ex)$"
+      ~r"lib/backpex/(fields|html)/.*(ex)$",
+      ~r"priv/static/js/.*(js)$"
     ]
   ],
   force_ssl: [hsts: true],

demo/package.json

@@ -1,5 +1,8 @@
 {
   "private": true,
+  "imports": {
+    "#backpex": "./priv/static/js/backpex.esm.js"
+  },
   "scripts": {
     "test": "env $(cat .env.test | xargs) mix test",
     "test:playwright": "env $(cat .env.test | xargs) mix test --include playwright:true",
@@ -30,7 +33,6 @@
     "topbar": "3.0.0"
   },
   "dependencies": {
-    "backpex": "file:..",
     "daisyui": "^5.0.3"
   }
 }