Reimplement Turbo support using MutationObserver

[daniel-rikowski]

My attempt to tackle #796.

There are many changed files, but the bulk of them are to allow initializing only a subtree of the DOM instead of the whole document. The actual core of the functionality is in src/dom/observer.ts.

The only Turbo-specific code is the initial load event. After that, all new elements are initialized automatically, regardless how they entered the DOM (Turbo Frame, Turbo Stream, jQuery, innerHTML, insertAdjacentHTML, append, appendChild, Vue, React, ...)

Similiarly, whenever a DOM element gets removed, and it had an ID, and that ID responds to any component instance, that instance is removed and destroyed.

Components from unchanged parts of the DOM are not touched. (This is the deciding difference, compared with the previous event-based "sledgehammer" approach)

I tested this successfully, with a simple app, where a Flowbite modal is created on-the-fly with HTML sent via both Turbo frame and Turbo stream actions.

Unfortunately, I don't have a larger Flowbite-and-Turbo-based app to play around with, so I'm hoping for feedback on how well (or not) this behaves in a larger app with many components and/or heavy Turbo frame or Turbo stream usage.

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[bhtabor]

The only Turbo-specific code is the initial load event. After that, all new elements are initialized automatically, regardless how they entered the DOM (Turbo Frame, Turbo Stream, jQuery, innerHTML, insertAdjacentHTML, append, appendChild, Vue, React, ...)

Thank you @daniel-rikowski!

Does this support Turbo Drive form submission errors? https://turbo.hotwired.dev/handbook/drive#redirecting-after-a-form-submission

[artinboghosian]

Any updates on if this PR will get merged?