refactor app.js and index.ex #554

New issue

Open

opened 2026-07-06 15:22:44 +02:00 by simon · 0 comments

simon commented

2026-07-06 15:22:44 +02:00

Owner

app.js has outgrown a single file

assets/js/app.js now holds 13 LiveView hooks in about 735 lines, all defined inline (it was 568 on main; #547 added IndeterminateCheckbox, LoadMorePrefetch, SortTooltip and StickyViewportWidth). This is the JS counterpart of the oversized-module smell the guidelines already flag for .ex files.

The natural fix on LiveView 1.1 is to move component-bound hooks into colocated hooks next to the component that uses them (SortTooltip with the sort header, StickyViewportWidth with the loading bar, IndeterminateCheckbox with the checkbox) and put the cross-cutting ones under assets/js/hooks/, leaving app.js with just the wiring. The convention should also be written into CODE_GUIDELINES.md as part of the same change.

index.ex is a very large LiveView

lib/mv_web/live/member_live/index.ex is around 1956 lines with roughly 140 private functions and 20 message handlers (9 handle_event, 11 handle_info), and mount alone is about 155 lines. The review loop already pulled the export-payload builder into its own module and stopped there on purpose, but the file is still large enough to be hard to navigate.

Good candidates to extract later are the filter-message handling, the bulk selection and scope logic together with the mailto/copy/export helpers, and the view-settings toggling, plus breaking mount into a few focused setup steps. This is a higher-churn refactor, so it wants its own pass rather than riding along with a feature branch.

## app.js has outgrown a single file `assets/js/app.js` now holds 13 LiveView hooks in about 735 lines, all defined inline (it was 568 on main; #547 added IndeterminateCheckbox, LoadMorePrefetch, SortTooltip and StickyViewportWidth). This is the JS counterpart of the oversized-module smell the guidelines already flag for `.ex` files. The natural fix on LiveView 1.1 is to move component-bound hooks into colocated hooks next to the component that uses them (SortTooltip with the sort header, StickyViewportWidth with the loading bar, IndeterminateCheckbox with the checkbox) and put the cross-cutting ones under `assets/js/hooks/`, leaving app.js with just the wiring. The convention should also be written into CODE_GUIDELINES.md as part of the same change. ## index.ex is a very large LiveView `lib/mv_web/live/member_live/index.ex` is around 1956 lines with roughly 140 private functions and 20 message handlers (9 `handle_event`, 11 `handle_info`), and `mount` alone is about 155 lines. The review loop already pulled the export-payload builder into its own module and stopped there on purpose, but the file is still large enough to be hard to navigate. Good candidates to extract later are the filter-message handling, the bulk selection and scope logic together with the mailto/copy/export helpers, and the view-settings toggling, plus breaking `mount` into a few focused setup steps. This is a higher-churn refactor, so it wants its own pass rather than riding along with a feature branch.