[Base] Add support for auto-updating a component when its DOM changes

[titouanmathis]

For now, we need to manually execute this.$update() to update a component refs and children when the DOM has changed. With the addition of the useMutation() service in #559, we could simplify this behavior and trigger an update automatically when the DOM changes.

[titouanmathis]

The first implementation in #565 is not stable enough yet and is more complex than anticipated with the current way of declaring components to be instantiated with a parent–child relation.

The need to have such parent—child relationship is becoming less and less relevant with additions such as the Action component or the DataBind component.

Here is a proposal to introduce a global registry (inspired by the CustomElementRegistry) that would be responsible for:

• storing all registered components (Map<string, BaseConstructor>)
• watching for DOM mutations and mount newly added components based on the stored component's constructors

This would be a step towards a more island-like way of adding interactivity to the DOM (less monolithic than the current createApp() recommended usage).

                                                                  ┌───────────────────────────────┐  ┌────────────┐                       
                                                               ┌─▶│ [data-component="ComponentB"] │─▶│ componentB │                       
                                                      ┌─────┐  │  └───────────────────────────────┘  └────────────┘                       
             ┌──────────────────────────┬────────────▶│ DOM │──┤                                                                          
             │                          │             └─────┘  │  ┌───────────────────────────────┐  ┌────────────┐                       
             │                          │                ▲     └─▶│ [data-component="ComponentA"] │─▶│ componentA │                       
          $mount()                   $mount()            │        └───────────────────────────────┘  └────────────┘                       
             │                          │             observe                                                                             
┌────────────────────────┐ ┌────────────────────────┐    │        ┌──────────────────┐                                                    
│ ComponentB.$register() │ │ ComponentA.$register() │    └───────▶│ MutationObserver │────┐                                               
└────────────────────────┘ └────────────────────────┘             └──────────────────┘    │                                               
             │                          │                                   ▲             │                                               
           push                       push                        ┌─────────┘          mutation                                           
             │                          │                         │                       │                                               
             │                          │    ┌─────────────────────────────────────────┐  │                                               
             └──────────────────────────┴───▶│ Registry (Map<string, BaseConstructor>) │◀─┘                                               
                                             └─────────────────────────────────────────┘                                                  
                                                                  │                                                                       
                                                                  │  ┌────────────┐  ┌────────────┐             ┌────────────────────────┐
                                                                  ├─▶│'ComponentA'│─▶│ ComponentA │──mutation──▶│ ComponentA.$register() │
                                                                  │  └────────────┘  └────────────┘             └────────────────────────┘
                                                                  │  ┌────────────┐  ┌────────────┐             ┌────────────────────────┐
                                                                  └─▶│'ComponentB'│─▶│ ComponentB │──mutation──▶│ ComponentB.$register() │
                                                                     └────────────┘  └────────────┘             └────────────────────────┘

With this proposal and the new registerComponent function added in #672, as well as the queryComponent function from #669, a main app.js entry point would look like the following:

import { registerComponent, importWhenVisible } from '@studiometa/ui';
import { Action, Frame } from '@studiometa/ui';

registerComponent(Action);
registerComponent(Frame);
registerComponent(import('./components/Slider.js'));
registerComponent(importWhenVisible(() => import('./components/Map.js'), 'Map');

Components could also be registered outside this main entry point while still being known by the framework.

To unlock the full power of this new island structue, #630 should be implemented as well.