# Split the hooks out of app.js closes #554

simon commented

2026-10-27 16:28:55 +01:00

Owner

closes #554

Description of the implemented changes

The changes were:

Bugfixing
New Feature
Breaking Change
Refactoring

assets/js/app.js held every LiveView hook and several page-specific listeners; it is now wiring only. Hooks with one owner live as colocated hooks next to the component or LiveView that uses them, hooks shared by several modules live in assets/js/hooks/, and a test fails when a phx-hook name resolves to no registered hook. While moving the clipboard hook, copying email addresses turned out to fail silently in Safari (and in Firefox after a slow server reply), because the clipboard write started only after the server round trip; it now starts in the click and the success toast waits for the browser's confirmation.

What has been changed?

Fail when a phx-hook name resolves to no registered hook
Drop the set-input-value listener no server event triggers
Give hooks that several modules share their own files
Colocate single-owner hooks with the component or LiveView that uses them
Handle the view settings and scroll reset pushes in an overview hook
Copy email addresses in Safari and confirm only a copy that happened
Copy the join page URL in the click and confirm only a successful copy
Keep hook definitions and page listeners out of app.js
Describe where hooks live and how they copy to the clipboard
List the events, server pushes and URL parameters the overview handles
Drop overview tests the bulk actions component tests already cover

Definition of Done

Code Quality

No new technical depths
Linting passed
Documentation is added were needed

Accessibility

New elements are properly defined with html-tags
Colour contrast follows WCAG criteria
Aria labels are added when needed
Everything is accessible by keyboard
Tab-Order is comprehensible
All interactive elements have a visible focus

Testing

Tests for new code are written
All tests pass
axe-core dev tools show no critical or major issues

Additional Notes

Oversized commits: "Colocate single-owner hooks …" (8 files, +406 −390, hook code moved out of app.js) and "Copy email addresses in Safari …" (14 files, +500 −178, about half of it tests).
The copy flow was checked in Firefox 150, Chromium 148 and WebKit 26.4 (Playwright) and by hand in Safari; LiveViewTest does not run JS, so the JS bundle build (just mix assets.build) is not part of just ci-dev yet — a follow-up adds it to just lint.

--- closes #554 ## Description of the implemented changes The changes were: - [x] Bugfixing - [ ] New Feature - [ ] Breaking Change - [x] Refactoring `assets/js/app.js` held every LiveView hook and several page-specific listeners; it is now wiring only. Hooks with one owner live as colocated hooks next to the component or LiveView that uses them, hooks shared by several modules live in `assets/js/hooks/`, and a test fails when a `phx-hook` name resolves to no registered hook. While moving the clipboard hook, copying email addresses turned out to fail silently in Safari (and in Firefox after a slow server reply), because the clipboard write started only after the server round trip; it now starts in the click and the success toast waits for the browser's confirmation. ## What has been changed? - Fail when a phx-hook name resolves to no registered hook - Drop the set-input-value listener no server event triggers - Give hooks that several modules share their own files - Colocate single-owner hooks with the component or LiveView that uses them - Handle the view settings and scroll reset pushes in an overview hook - Copy email addresses in Safari and confirm only a copy that happened - Copy the join page URL in the click and confirm only a successful copy - Keep hook definitions and page listeners out of app.js - Describe where hooks live and how they copy to the clipboard - List the events, server pushes and URL parameters the overview handles - Drop overview tests the bulk actions component tests already cover ## Definition of Done ### Code Quality - [ ] No new technical depths - [x] Linting passed - [x] Documentation is added were needed ### Accessibility - [ ] New elements are properly defined with html-tags - [ ] Colour contrast follows WCAG criteria - [ ] Aria labels are added when needed - [ ] Everything is accessible by keyboard - [ ] Tab-Order is comprehensible - [ ] All interactive elements have a visible focus ### Testing - [x] Tests for new code are written - [x] All tests pass - [ ] axe-core dev tools show no critical or major issues ## Additional Notes Oversized commits: "Colocate single-owner hooks …" (8 files, +406 −390, hook code moved out of app.js) and "Copy email addresses in Safari …" (14 files, +500 −178, about half of it tests). The copy flow was checked in Firefox 150, Chromium 148 and WebKit 26.4 (Playwright) and by hand in Safari; LiveViewTest does not run JS, so the JS bundle build (`just mix assets.build`) is not part of `just ci-dev` yet — a follow-up adds it to `just lint`.

simon added 12 commits

2026-10-27 16:28:55 +01:00

test(hooks): fail when a phx-hook name resolves to no registered hook 05218b5037

refactor(js): drop the set-input-value listener no server event triggers 7bc703be3c

refactor(js): give hooks that several modules share their own files ff4946e50f

refactor(web): colocate single-owner hooks with the component or LiveView that uses them 0a281b00ef

refactor(member-overview): handle the view settings and scroll reset pushes in an overview hook 939347851a

fix(member-overview): copy email addresses in Safari and confirm only a copy that happened 80bdd0cc7e

Safari refuses a clipboard write that starts after a server round trip, and
Firefox one that starts about five seconds after the click. The hook now
starts a ClipboardItem write inside the click whose content is the promise of
the server's reply, and the success toast waits for the browser's confirmation.

fix(settings): copy the join page URL in the click and confirm only a successful copy 64abfea0ab

test(js): keep hook definitions and page listeners out of app.js 1d376f6bef

docs(guidelines): describe where hooks live and how they copy to the clipboard 640a8c1d9e

docs(member-overview): list the events, server pushes and URL parameters the overview handles e965f2d102

test(member): drop overview tests the bulk actions component tests already cover ba3812862e

docs(changelog): record the clipboard fixes for email addresses and the join link under Unreleased

continuous-integration/drone/push Build is passing

Details

continuous-integration/drone/promote/production Build is passing

Details

f5e34d6276

simon merged commit 57ceac2f94 into main