Is htmx have something like "cleanup function"?

[bakunya]

Hi all, I have htmx components with inner script to listen some event in the component. But every i made change between components (ie. component A replaced with component B), the event listener in previous component still active. Currently i use htmx:beforeRequest to cleanup the event, but i curious if in here have another way to cleanup event/subscription. Thanks.

[Telroshan]

Hey, elements that htmx itself removes are automatically cleaned up.
Assuming you're doing a manual replacement here, note that normally automatically cleans up triggered listeners if the element is not in the DOM anymore, so the event should be fired once, but htmx doesn't do anything except unregistering that listener.
Could you maybe share some more information about your situation?
I'm assuming here that "component A replaced with component B" means component A is removed from the DOM, but if it's not and it instead moved to another place, then you might want to call htmx.process on it, as it'll first uninitialize any htmx-related stuff to that element, then initialize it again with its new attributes

[jkmnt]

I have the same question.

I need to attach scripts to some components. Some of these scripts require the proper dismount to stop timers, cancel fetches, release observers etc. Potentially it may be even small react/vue-powered 'islands'.

Now I'm using the simple automount function (some housekeeping/checks omitted for clarity):

function AutoMounter() {
  const repo = new Map();

  function mount(selector, func) {
    repo.set(selector, func);
  }

  function install_handler(elt, f) {
    const cleanup = f(elt);
    if (cleanup) {
      htmx.on(elt, 'htmx:beforeCleanupElement', (evt) => {
        if (evt.detail.elt === elt) 
        cleanup();
      });
    }
  }

  function onload(content) {
    repo.forEach((f, selector) => {
      if (content.matches(selector)) 
        install_handler(content, f);

      content.querySelectorAll(selector).forEach((elt) => install_handler(elt, f));
    });
  }

  htmx.onLoad(onload);

  return { mount };
}

Scripts mounts as soon as htmx loads elements with matching selectors.
Scripts return the cleanup function to be called upon unmount.

Example of usage with the bootstrap modal - open modal on mount, dispose on dismount.

automounter = AutoMounter()

automounter.mount('.modal', (elt) => {
   const modal = bootstrap.Modal.getOrCreateInstance(elt);
   modal.show();
  
   return () => { modal.hide(); modal.dispose(); }
})

The question is it the right way to do cleanup ?
Is htmx:beforeCleanupElement guaranteed to be called for any DOM removal deep in the tree ?
It must be hugely non-effective.
Now it seems to be the thing, but the htmx code comments hints it's for the IE11 support only.

[Telroshan]

Note you could also use a MutationObserver to detect elements removed from the DOM and call your cleanup here with a custom event or anything, if you don't want to rely solely on htmx. I would probably encourage you do to it with a MutationObserver if your component doesn't use htmx at all for example, to keep them separated.
Nonetheless, to answer the question

is it the right way to do cleanup ?

Sounds good to me!

• Is htmx:beforeCleanupElement guaranteed to be called for any DOM removal deep in the tree

  It is guaranteed, at the condition that htmx processed the root node in the first place. So for nodes that are dynamically added to the DOM but not by htmx itself, you would need to call htmx.process on them first

• the htmx code comments hints it's for the IE11 support only

  I admit I don't know what the comment is referring to here, as element.children is supported on all major browsers (and IE11), but that loop indeed recursively cleans up any child element

[anentropic]

is htmx:beforeCleanupElement called for every (child) node that is removed, or just that parent that is swapped out?

[Telroshan]

Hey @anentropic , as you can see here in the codebase :

htmx/src/htmx.js

Lines 1003 to 1009 in 15243b5

	function cleanUpElement(element) {
	triggerEvent(element, "htmx:beforeCleanupElement")
	deInitNode(element);
	if (element.children) { // IE
	forEach(element.children, function(child) { cleanUpElement(child) });
	}
	}

The clean up function is called on the root node then recursively on all of its children

[jkmnt]

@Telroshan, thank you for the MutationObserver suggestion. I'm not into the frontend that much, so I didn't knew such thing exists.
I like that it allows to handle adds/removes in self-sufficient way outside of htmx. So it must be quite robust and even handle the history navigation.

In case some would find it useful, I ended up with this MutationObserver-powered automounter:

class AutoMounter {
  constructor() {
    this.is_started = false;
    this.handlers = new Map();
    this.active_elts = new Map();
    this.observer = new MutationObserver(this._observe.bind(this));
  }

  _process_removed(nodes) {
    for (const node of nodes) {
      for (const [elt, cleanup] of this.active_elts.entries()) {
        if (node.contains(elt)) {
          this.active_elts.delete(elt);
          if (cleanup) {
            cleanup();
          }
        }
      }
    }
  }

  _install_handler(elt, handler) {
    if (!elt.isConnected) return;
    if (this.active_elts.has(elt)) return;

    const cleanup = handler(elt);
    this.active_elts.set(elt, cleanup);
  }

  _process_added(nodes) {
    for (const node of nodes) {
      for (const [selector, handler] of this.handlers) {
        if (node.matches(selector)) {
          this._install_handler(node, handler);
        }
        for (const sub of node.querySelectorAll(selector)) {
          this._install_handler(sub, handler);
        }
      }
    }
  }

  _take_elements(nodelist) {
    return Array.from(nodelist).filter((node) => node.nodeType === Node.ELEMENT_NODE);
  }

  _observe(records) {
    for (const record of records) {
      this._process_removed(this._take_elements(record.removedNodes));
      this._process_added(this._take_elements(record.addedNodes));
    }
  }

  start() {
    this.is_started = true;
    this._process_added(this._take_elements(document.body.childNodes));
    this.observer.observe(document.body, { childList: true, subtree: true });
  }

  register(selector, handler) {
    if (this.handlers.has(selector)) {
      throw 'Selector already registered';
    }
    this.handlers.set(selector, handler);
    if (this.is_started) {
      this._process_added(this._take_elements(document.body.childNodes));
    }
  }

  unregister(selector) {
    if (!this.handlers.has(selector)) return;

    if (this.is_started) {
      this._process_removed(this._take_elements(document.body.querySelectorAll(selector)));
    }
    this.handlers.delete(selector);
  }
}

Usage

const automounter = new AutoMounter();
automounter.register('.modal', (elt) => { /* modal code here */});
automounter.register('.chart', (elt) => { /* chart code here */});
...
automounter.start()