resourcesReady does not mean a script has finished parsing

[ctmm]

The resourcesReady event does not take into account the fact that scripts might not yet have finished loading/being parse.
This creates a racing condition on certain projects, especially ones that attach component contructor functions to jQuery.

[ctmm]

Proposed solution is to fire a scriptReady event from scripts added by the resource-loader, in the handler for javascript assets:

const emitScriptParsed = (nodes: HTMLElement[]) => {
  const scriptParsedEvent: CustomEvent = new CustomEvent('scriptParsed', { bubbles: true });
  nodes.forEach((node: Node) => {
    node.dispatchEvent(scriptParsedEvent);
  });
}

const onJsLoaded = (options: HandleOptions): void => {
    const script: HTMLScriptElement = document.createElement('script');
    script.src = options.resource.path;
    script.async = true;
    script.onload = () => emitScriptParsed(options.resource.elements);
    document.body.append(script);
}

const jsHandler: Handler = {
    match: isJs,
    handle: onJsLoaded
}

[ctmm]

Developers on codebases which use the legacy "evaled" data-init could then hook on this event to safely initialise any plugins:

window.addEventListener('scriptParsed', (event) => {
  const { target } = event;
  const intializationFunction = eval(target.getAttribute('data-init'));
  intializationFunction($(target))   
})