Make @lion/ui side effect free

[tlouisse]

SItuation

Right now @lion/ui is side-effectful: our singletons localize (LocalizeManager instance), overlays (OverlaysManager instance) and icons (IconManager instance) create side effects.

The problems

• Side-effectful files do not create optimal bundles
• configuring a customized singleton can go wrong if some other file (indirectly) loads a side-effectful file:
  On an extension layer, we might want to do:

class MyLocalizeManager extends LocalizeManager { 
  // my default cfg 
}
singletonManager.set('@lion/ui::localize::0.x', new MyLocalizeManager());

The above needs to happen before singletonManager.get('@lion/ui::localize::0.x') gets loaded.
But... this can accidentally get loaded by a "chain" like form-core.js-> ValidateMixin -> localize.

We would not have to worry about this if our entry points were side effect free.

Solution proposal

A possible solution for making @lion/ui side effect free is to use singleton-manager as an "injector system":

class MyClassOrMixin {
  constructor() {
    this._localizeManager = singletonManager.get('@lion/ui::localize::0.x');
  }
}

However, this requires a dev that uses a component like LionInput to separately register singletons on top of his app...
Potentially, this can be solved with:

class MyClassOrMixin {
  constructor() {
    this._localizeManager = getLocalizeManager();
  }
}

Which would do:

function getLocalizeManager() {
  return singletonManager.get('@lion/ui::localize::0.x') || new LocalizeManager();
}

Now, we have:

• a side effect free codebase
• all web components that depend on singletons work as before (no singleton setup required)
• If wanted (for deduping purposes or for using customized singletons) we can register our own at the top of the app