feat(enhance): call app tasks with .enhance API

[bigopon]

📖 Description

In a PR awhile ago, the return value of the enhance call was changed from an IAppRoot to a controller for simplicity. This was necessary at the time because the app root created by enhance would override an existing app root on an Aurelia instance. This , however, resulted in the loss of the ability to call app tasks in the .enhance call.

This PR makes .enhance create an app root again, but this app root would not be used by the owning Aurelia instance.

Changes:

• BREAKING CHANGE: enhance results in an app root instance instead of a controller
• improve typings of .enhance & IAppRoot to auto infer component instance type
• script dist target changed from es2020 to es2021
• remove .create API on container

Resolves #1787

cc @Sayan751 @Vheissu

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 88.46%. Comparing base (deed11e) to head (4d44e07).

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #1916      +/-   ##
==========================================
- Coverage   88.47%   88.46%   -0.01%     
==========================================
  Files         260      260              
  Lines       22862    22843      -19     
  Branches     5301     5258      -43     
==========================================
- Hits        20227    20209      -18     
+ Misses       2635     2634       -1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[ghiscoding]

@bigopon
this code change seems to be breaking my lib Aurelia-Slickgrid and I don't know how to fix it. I got a Stackblitz available in my opened PR to update Aurelia to latest in this PR and going to "Example 19 - Row Detail" will display the error.

I'm enhancing dynamic components on the fly and my current code is as shown below (ref of original code here)

@singleton()
export class AureliaUtilService {
  constructor(@IAurelia private readonly au: IAurelia) { }

  async createAureliaViewModelAddToSlot(viewModel: Constructable, bindableData?: ViewModelBindableInputData, targetElement?: HTMLElement | Element): Promise<AureliaViewOutput | null> {
    if (!targetElement) {
      return null;
    }

    const def = CustomElement.getDefinition(viewModel);
    const addonBindable = bindableData?.addon ? 'addon.bind="bindableData.addon"' : '';
    const gridBindable = bindableData?.grid ? 'grid.bind="bindableData.grid"' : '';
    const dataViewBindable = bindableData?.dataView ? 'data-view.bind="bindableData.dataView"' : '';
    const parentBindable = bindableData?.parent ? 'parent.bind="bindableData.parent"' : '';

    targetElement.innerHTML = `<${def.name} model.bind="bindableData.model" ${addonBindable} ${gridBindable} ${dataViewBindable} ${parentBindable}></${def.name}>`.trim();

    return { controller: await this.au.enhance({ host: targetElement, component: { bindableData } }) };
  }
}

with your PR change, my previously working code is now throwing with this weird error, I have no clue why it fails with Router !??

index.mjs:4789 Uncaught (in promise) Error: Router has already been started
    at Router.start (index.mjs:4789:1)
    at RouterConfiguration.configurationCall (index.mjs:5755:1)
    at $AppTask.run (index.mjs:525:1)
    at eval (index.mjs:4966:1)
    at Array.reduce (<anonymous>)
    at AppRoot.ae (index.mjs:4964:1)
    at eval (index.mjs:4958:1)
    at onResolve (index.mjs:259:1)
    at AppRoot.activate (index.mjs:4958:1)
    at Aurelia.enhance (index.mjs:5039:1)

if I change my code with the following code (taken from your PR)

constructor(private readonly au = resolve(Aurelia)) {}

then it fails with this different error which is not very helpful to me

index.mjs:19 Uncaught (in promise) Error: AUR0010:function Object() { [native code] }
    at createMappedError (index.mjs:19:1)
    at Container.L (index.mjs:717:1)
    at Container.get (index.mjs:580:1)
    at Container.containerGetKey (index.mjs:779:1)
    at Array.map (<anonymous>)
    at Factory.construct (index.mjs:751:1)
    at Resolver.resolve (index.mjs:1201:1)
    at Container.get (index.mjs:581:1)
    at Container.containerGetKey (index.mjs:779:1)
    at Array.map (<anonymous>)

I'm confused into what I'm supposed to change into my lib to get it working again. If you could help by opening my Stackblitz from my open PR and opening aureliaUtil.service.ts and tell me what I'm supposed to change, it would be really helpful. If not, I might just stop supporting Aurelia-Slickgrid altogether or maybe just that enhancing part

[bigopon]

Thanks for the issue @ghiscoding , this is unintentional, I've commented here https://github.com/ghiscoding/aurelia-slickgrid/pull/1166/files#r1517169458

[ghiscoding]

Thanks a lot, the last suggestion was the one I went ahead with since it work the same as before. However, I could not find such approach in the Documentation, it might be a good idea to add it to the official Docs. Thanks again for your help, you are always helpful as usual :)