Handle turbo:morph events in PageObserver#182
Conversation
There was a problem hiding this comment.
Pull request overview
This PR updates LocalTime’s DOM observation so that Turbo “page refresh” morphing (which updates elements in place) triggers re-processing of affected <time> elements, preventing localized client-side attributes/text from being reverted after a morph.
Changes:
- Add Turbo morph event listeners to
PageObserverto re-run processing afterturbo:morphandturbo:morph-element. - Update the compiled ES2017 UMD and ESM bundles to include the new morph handling.
Tip
If you aren't ready for review, convert to a draft PR.
Click "Convert to draft" or run gh pr ready --undo.
Click "Ready for review" or run gh pr ready to reengage.
Reviewed changes
Copilot reviewed 1 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| lib/assets/javascripts/src/local-time/page_observer.js | Adds Turbo morph event observation to re-process localized elements after morphing updates. |
| app/assets/javascripts/local-time.es2017-umd.js | Regenerated UMD bundle reflecting the new Turbo morph handling. |
| app/assets/javascripts/local-time.es2017-esm.js | Regenerated ESM bundle reflecting the new Turbo morph handling. |
Files not reviewed (2)
- app/assets/javascripts/local-time.es2017-esm.js: Generated file
- app/assets/javascripts/local-time.es2017-umd.js: Generated file
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| observeWithTurboMorphEvents() { | ||
| document.addEventListener("turbo:morph", () => this.callback?.()) | ||
| document.addEventListener("turbo:morph-element", ({ target }) => { | ||
| this.notify(this.findSignificantElements(target)) | ||
| }) | ||
| } |
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 2 out of 4 changed files in this pull request and generated 1 comment.
Files not reviewed (2)
- app/assets/javascripts/local-time.es2017-esm.js: Generated file
- app/assets/javascripts/local-time.es2017-umd.js: Generated file
| } | ||
|
|
||
| observeWithTurboMorphEvents() { | ||
| document.addEventListener("turbo:morph", () => this.callback?.()) |
Problem
When Turbo's page refresh action uses morphing, local_time's DOM changes get reverted. The morph restores elements to their server-rendered state, stripping
data-localizedand other client-side attributes. PageObserver only watches for inserted nodes viaMutationObserver, so elements updated in-place are never re-processed.Fix
PageObserver#startnow listens forturbo:morphandturbo:morph-element. On a full-page morph, the existingprocessElementscallback runs with no arguments, scanning the whole document (same asLocalTime.run()). On a partial morph, only the morphed subtree is scanned viafindSignificantElements.The server never renders
data-localized, so after morph the selectortime[data-local]:not([data-localized])re-matches and elements get re-processed.Closes #165.