[new release] beta 24

vNext
1

Happy Tuesday folks!, it’s that time again for a new beta release: beta 24 is here :smiley:

Blog post: What’s New in Aurelia 2 Beta 24? | Aurelia

If you are only interested in the changelog: Release v2.0.0-beta.24 · aurelia/aurelia
This release further enhances our template type checking capabilities, together with other changes and improvements.

As usual, please help report any issues/unexpected behavior you run into either here, Github issue or here. If you wanna have a chat, come to our discord thread for beta 24 at (Discord | #announcements | Aurelia)

Previous release announcements:

Finally, thanks to everyone who contributed to this release :hugs:

11 Likes
2

Great stuff. Thank you :grinning_face:

1 Like
3

Yes! Good to see progress, after a rather quiet period (#hint).

So to throw the elephant in the porcelain closet (freely translated Dutch proverb :smiley: ):
what is left before the final release? :innocent:

1 Like
4

sync → back to async binding work, and while we are at it, whatever else that is deemed appropriate :smiley:

2 Likes
5

Great! Looking forward to see those changes too!

Do you perhaps know if there are any updates scheduled for the Google chrome extension? In the web store there is still the outdated manifest v2 version.

2 Likes
6

I’m going to take a look at this, as I know it is very important to the community.

7

So I updated to Beta 24 and I’m getting this error when enhancing multiple components (caused by this PR - remove controller host).

Node already associated with a controller, remove the ref “au:resource:custom-element” first before associating with another controller

So I assumed that I had to make sure components are disposed before re-enhancing them but that doesn’t seem to make a difference. What am I doing wrong?

I have code like this

const slotIdx = this._slots.findIndex(obj => obj.id === dataContext.id);
const slotObj = this._slots[slotIdx];
if (slotObj?.controller) {
  await slotObj.controller.deactivate(slotObj.controller, slotObj?.controller.parent ?? null);
  this._slots.slice(slotIdx, 1);
}
const comp = await this.au.enhance({
    host: targetElement,
    component: { bindableData },
    container: this.au.container.createChild().register(AppTask.creating(() => { }))
});
if (!slotObj) {
  const viewInfo: CreatedView = {
    id: dataContext.id,
    root: comp,
    controller: comp.controller
  };
  this._slots.push(viewInfo);
}

So how can I fix my error? Also why was that decided that we can’t re-enhance a VM? I’m asking because my lib Aurelia-Slickgrid does something very similar in a bunch of other frameworks that I support like Angular, React, Vue and none of them ever throw such errors when re-enhancing or recreating the same component on the same DOM target, so why is Aurelia becoming so strict all of a sudden? This seems like a huge breaking change that I’m not sure how to go around it.

Here’s 2 examples of where I’m using enhancing in Aurelia-Slickgrid:

1 Like
8

Thanks @ghiscoding , I missed your commment.
For

throw such errors when re-enhancing or recreating the same component on the same DOM target

Maybe we don’t have to be strict, but we need to be very clear about the behavior of the framework before we support such feture. We can start with a simple question: what should it do/not do when enhancing the same DOM element?

9

The minimum would be to warn the user of which component got re-enhanced multiple times (“au:resource:custom-element” doesn’t tell me anything since I don’t have any custom element with that name). Because at the moment, I’m just stuck with this new major breaking change. I’m blocked without knowing what to do in order to fix all of these. Does the code I provided above make any sense or is it totally wrong?

Also like I said, any other frameworks are totally fine with recreating/re-rendering the same components (leaking DOM elements is the end user’s problem), loosing up this strictness and possibly send improved console warnings could certainly help to make this transition a bit smoother because re-enhancing components in a datagrid (like in Aurelia-Slickgrid) can happen a lot of times when associated to a row or a cell of thegrid, and trying to find how to fix them at the moment is a pain and I just don’t understand what I need to do… I could drop that feature from Aurelia-Slickgrid (Example 19 and 26 as linked in comment above) but that would mean less features for the end users.

Is 2025 going to be the year for Aurelia 2 official release?

10

thanks @ghiscoding , in the code above, I only see the part related to enhance + after. How do you prepare the content of the host element being enhanced?

11

@bigopon the code is in Example 26

You can clone the project and checkout the open PR where I’m trying to upgrade to Beta 24

It’s probably better to discuss directly in there.
Thanks

1 Like
12

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.

13

Thanks to @bigopon a temp solution was provided and put in place, I was able to migrate to Beta 24. Cheers and thanks for the help. :rocket: