basecamp
Reprocess elements after specific changes are made to them
Coming from https://github.com/basecamp/local_time/pull/155 by @northeastprince
Fixes https://github.com/basecamp/local_time/issues/151
This PR creates mutation observers for every <time> element tracked by LocalTime so they'll be reprocessed when certain changes occur.
We do this through a new class called ElementObservations which keeps track of which elements already have observers, and also manages said observers.
Note that not removing an observer after an element is removed from the dom can cause memory leaks. So we've modified our PageObserver to notify the controller of any relevant <time> elements that are removed. Their observers are then promptly disconnected.
Also note that we modify the <time> elements as a response to their mutations. This is prone to infinite loops, so we must be careful. Thus, we're also adding Playwright to run integration tests so we can ship more confidently — and also assert that this will work with Turbo 8 morphs, which is the main motivation behind this change.
As a side-effect, the integration-tests page can be accessed manually as a sort of playground:
Finally, if you wanted to test this out with actual Turbo 8 (instead of simulating a morph), you can do that by reverting https://github.com/basecamp/local_time/pull/156/commits/5ba63674e56709d3eab48066a070eeee98ccfdcf. There's more info in the commit.
@jorgemanrubia helpfully pointed out we might be able to simplify to a single observer + selector matching and an in-memory cache of the elements. I'll try that next.
@josefarias any update on this?
Hey @northeastprince. No updates, sorry. It's looking like it might be a while before I personally can find time during work to tackle this.
Might tackle it recreationally in my time off but that's a big if as I've been rather busy.
In the meantime, you might try the event listener from your linked PR or mark the <time> elements as turbo-permanent. Sorry I don't have a holistic solution yet!