Mithril m.mount on a legacy-managed DOM node: teardown and route prefix conflicts during incremental migration

Answer to the Core Questions

1. Cleanup after m.mount on a legacy‑managed node

• m.mount replaces the target element’s innerHTML with the virtual‑DOM output of the component tree.
• During unmount (or when a new component is mounted over the same node), Mithril removes only the event listeners and DOM nodes it created. It does not touch listeners that were added by other frameworks unless those listeners were attached via m.mount itself.
• Therefore, legacy code that attaches its own listeners directly to the node (e.g., via addEventListener or jQuery .on()) will survive a Mithril unmount, but any listeners that were delegated through Mithril’s internal m.mount call will be cleaned up.

2. Route prefix clashes with a legacy router

• m.route.prefix merely matches the beginning of the URL (e.g., /app). It does not intercept the event that actually changes the URL – that is still handled by the browser’s hashchange or popstate events.
• If the legacy framework also listens to those events on the same prefix, both routers can react to the same navigation action. This can lead to double‑handling, race conditions, or the legacy router overriding Mithril’s navigation.
• Mitigation: disable the legacy router’s event listeners for URLs that fall under the Mithril prefix, or wrap the legacy router’s initialization in a guard that checks if a Mithril component is currently active.

3. Scroll position and focus preservation

• Mithril’s default route change does not preserve window.scrollY or element focus. On a route swap the page scrolls to the top and focus is lost.
• To preserve scroll and focus you must implement custom logic, e.g.:

  const prevScroll = window.scrollY;
  const prevFocus = document.activeElement;
  
  m.route.set('/new');
  
  // after the new component has rendered
  m.redraw(() => {
    window.scrollTo(0, prevScroll);
    if (prevFocus) prevFocus.focus();
  });
  

4. Practical Checklist for the Migration

1. Wrap the legacy initialization in a function that checks for an existing Mithril component:

   if (!document.querySelector('#app .mithril')) {
     legacyInit();
   }

2. When mounting a Mithril component, use m.mount on the same element and store a reference to the component instance.
3. On navigation away, call m.mount(null, null) to unmount and rely on Mithril’s cleanup. Verify via console.log that event listeners are removed.
4. Disable or remove the legacy router’s hashchange/popstate listeners for the m.route.prefix path.
5. Implement scroll/focus restoration logic around m.route.set or in the Mithril component’s onunload hook.

5. Diagnostic Detail Needed

To refine the recommendation, could you confirm whether the legacy framework attaches its event listeners directly to the target DOM element, or does it use event delegation on a higher‑level ancestor?

Summary

Mithril’s m.mount cleans up only what it owns, route prefixes can clash if both routers are active, and scroll/focus preservation is not automatic. By guarding legacy listeners, disabling overlapping router events, and adding explicit scroll/focus handling, you can achieve a zero‑downtime incremental migration.