feat: update Aurelia 2 Beta 24

[ghiscoding]

No description provided.

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[codecov]

Codecov Report

Attention: Patch coverage is 71.42857% with 2 lines in your changes missing coverage. Please review.

Project coverage is 20.58%. Comparing base (66b4592) to head (7326f6b).
Report is 10 commits behind head on master.

Files with missing lines	Patch %	Lines
...slickgrid/src/custom-elements/aurelia-slickgrid.ts	0.00%	1 Missing ⚠️
...relia-slickgrid/src/services/translater.service.ts	66.67%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #1348      +/-   ##
==========================================
+ Coverage   20.32%   20.58%   +0.27%     
==========================================
  Files           8        8              
  Lines         965      967       +2     
  Branches      352      352              
==========================================
+ Hits          196      199       +3     
+ Misses        769      768       -1     

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

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[ghiscoding]

@bigopon from your post in Aurelia discourse

thanks, so just to be clear for the topic we already have: the use case is to wash away existing content of an element with .innerHTML = html and call .enhance on that element again and again. I do think it’s a valid case, probably we should have some tweaks to make it support such scenario.

I'm not exactly sure what you mean with regards to my code, can you elaborate?

is it because of this code below?

aurelia-slickgrid/packages/aurelia-slickgrid/src/services/aureliaUtil.service.ts

Lines 17 to 23 in 1d740b6

	targetElement.innerHTML = `<${def.name} model.bind="bindableData.model" ${addonBindable} ${gridBindable} ${dataViewBindable} ${parentBindable}></${def.name}>`.trim();
	return await this.au.enhance({
	host: targetElement,
	component: { bindableData },
	container: this.au.container.createChild().register(AppTask.creating(() => { }))
	});

[bigopon]

@ghiscoding
for this part

... wash away existing content of an element with .innerHTML = html

I meant this code

aurelia-slickgrid/packages/aurelia-slickgrid/src/services/aureliaUtil.service.ts

Lines 17 to 23 in 1d740b6

	targetElement.innerHTML = `<${def.name} model.bind="bindableData.model" ${addonBindable} ${gridBindable} ${dataViewBindable} ${parentBindable}></${def.name}>`.trim();
	return await this.au.enhance({
	host: targetElement,
	component: { bindableData },
	container: this.au.container.createChild().register(AppTask.creating(() => { }))
	});

And for

... call .enhance on that element again and again

I meant your .enhance call

[ghiscoding]

@bigopon so are there any code that I can use that would work then? This util was just a helper for the end user to easily create a component

[bigopon]

immediately it can be worked around using delete element['$au']. I'll be coming up with a better way.

[ghiscoding]

@bigopon Yeah I would rather find a workable temp solution until you make another release, so you meant something like this?

targetElement.innerHTML = `<${def.name} model.bind="bindableData.model" ${addonBindable} ${gridBindable} ${dataViewBindable} ${parentBindable}></${def.name}>`.trim();
delete (targetElement as any)['$au'];

return await this.au.enhance({
  host: targetElement,
  component: { bindableData },
  container: this.au.container.createChild().register(AppTask.creating(() => { }))
});

that doesn't seem to help since I'm still getting the same error it seems. There's probably a cache somewhere?

dom.node.ts:31 Uncaught (in promise) Error: Node already associated with a controller, remove the ref "au:resource:custom-element" first before associating with another controller
    at set (dom.node.ts:31:15)
    at _Controller._hydrate (controller.ts:407:5)
    at app-root.ts:132:20
    at onResolve (functions.ts:433:10)
    at app-root.ts:131:14
    at onResolve (functions.ts:433:10)
    at new AppRoot (app-root.ts:94:28)
    at _Aurelia.enhance (aurelia.ts:77:34)
    at AureliaUtilService.createAureliaViewModelAddToSlot (aureliaUtil.service.ts:20:28)

[bigopon]

Ahh yes my bad, should be deleting the property inside $au, not the object itself. It would be the au:resource:custom-element property

[ghiscoding]

Awesome that works and is a good temp solution to upgrade, thanks a lot 🚀

delete (targetElement as any)['$au']?.['au:resource:custom-element'];

Side note, I was a little surprised to see you hijack the DOM element that way, it probably make sense though since that is the element being the target to the enhancing, but still was a surprise to me. Are there any Type helper instead of using any for this kind of things though?

ahh reviewing your PR code and I guess this is what I should use
delete (targetElement as Writable<INode>)['$au']?.['au:resource:custom-element'];