[reactive-element] Add static initializers list for extending class definitions from decorators

[justinfagnani]

We would like to support extending component definitions with third-party decorators without always requiring a new subclass of LitElement.

Since decorators run as class definition time, they don't have access to the class instance. Usually this is solved by having a facility for the decorator to register itself or add some static metadata so that instance-level logic can implement the desired behavior. This is somewhat how @property works.

But it's a bit cumbersome to require this for every decorator that needs to add instance behavior. A @listen() decorator would need the base class to have support for iterating and adding/removing listeners registered with the decorator, probably in connectedCallback() and disconnectedCallback(). Similarly with @observe() decorator would need custom logic to run in update() or updated() depending on its specific semantics.

Luckily we now have Reactive Controllers as a way to add lifecycle-dependent helpers externally to the class definition. It's easy to imagine how a ListenController or ObserverController would be implemented. What's missing is a way to instantiate and add those controller to the host.

A very simple and general solution would be to add a static addInit(this) => void) method to the class. Decorators can use that to run code on instance creation.

Example with @listen:

export function listen(event: string) {
  return (proto: Object, name: PropertyKey) => {
    (proto.constructor as typeof ReactiveElement).addInit((i: ReactiveElement) => {
      const listener = (e) => proto[name].call(i, e);
      i.addController({
        hostConnected() {
          i.addEventListener(event, listener);
        },
        hostDisconnected() {
          i.removeEventListener(event, listener);
        },
    }));
  }
}

[sorvell]

Fixed via #1672