Add hooks support

[gshokanov]

Hi,
I have a use case where adding hooks support to @angular-extensions/elements would be beneficial. This idea is somewhat similar to #30, so maybe they could be implemented at the same time.

Problem

Let's take an application with several Angular elements packaged as web components. Naturally, they may have several common dependencies that we may want to load only once per page (for example core Angular packages or ngrx). In order to improve UX and time to first meaningful paint, we postpone loading these dependencies until the components are requested by the current view.

With the current API of @angular-extensions/elements I don't see a way this could be easily achieved.

Proposal

Add hooks to ElementConfig:

{
  url: 'https://my-awesome-component.com',
  hooks: {
    beforeLoad: () => resolveDependencies('my-component')
  }
}

The library will execute beforeLoad hook before inserting script with the component's JS bundle. If the hook returns a Promise (which is necessary in this particular case), the library will wait for this Promise to resolve before proceeding with the request. If the Promise fails, the corresponding error component is shown instead.

Do you think this API makes sense for @angular-extensions/elements?

[tomastrajan]

@MagicCurlyHair I like the proposal! Would you be able to give it a try and implement it ?

One thing that comes to my mind is that the dependency has to be a single file else we can not determine when it was really finished ( if it uses es modules ).

We have already the same problem as showing loading template for webcomponents which use es modules, we hide loading once the initial file was loaded but it will then trigger further loadings as browser parses its imports...

[gshokanov]

@tomastrajan
I don't think that single dependency is a mandatory limitation if the developer is willing to do some manual work. beforeLoad hook might manually add several scripts to the current page, subscribe to load events and return a Promise that resolves when all load events have been emitted (or fails if one of the scripts emits an error event).

[gshokanov]

@tomastrajan
I'll try to come up with implementation this weekend

[tomastrajan]

@MagicCurlyHair sure, I meant when using <script type="module" src="someurl"></script> if that script does es 2015 imports inside, there is no way of knowing when everything was finished AFAIK.

Of course developer can implement as precise solution for individual js files as necessary :)

[tomastrajan]

Example

contains

import { LitElement, html, customElement } from '@material/mwc-base/base-element';
import { style } from './mwc-icon-host-css.js';
import './mwc-icon-font.js';

How would you detect that everything was downloaded including files triggered by the imports ?