Wrong lifecycle order when using idiomorph

[davidjr82]

Hi,

there is an issue when using new morph libraries like idiomorph. Idiomorph will insert first the new element in the dom and after remove the old one.

Due to this, the expected lifecycle when loading and replacing a frame (connect - disconnect - connect) is not happening. What happens is the wrong lifecycle (connect - connect - disconnect), letting the component in a wrong state (disconnected).

Let's put a simple controller with tomselect. In this example, at first the tomselect will load correctly. But as soon as the frame is replaced, tomselect is no longer working because the last method call is disconnect() as I explained before, with this output in the console log:

controller: connect
controller: connect
controller: disconnect

import { Controller } from "@hotwired/stimulus";
import TomSelect from "tom-select";

export default class extends Controller {

    static values = {
        options: Object,
    };

    connect() {
        console.log('controller: connect');

        new TomSelect(this.element, {});
    }

    disconnect() {
        console.log('controller: disconnect');

        if (this.element.tomselect) {
            this.element.tomselect.destroy();
        }
    }
}

If I put a setTimeout(() => { ... }, 100); around the connect code, then it works as expected (jumpy, but it will delay the execution of the connect logic to after the disconnect method execution):

controller: connect
controller: disconnect
controller: connect