2.0.0-beta.12 - Custom elements instances are now different

[tareqimbasher]

🐛 Bug Report

Starting with 2.0.0-beta.12, something must have changed with the way custom elements are resolved. Suppose we have the following:

my-view-model.html

<au-compose repeat="resultView of resultViews" component.bind="resultView"></au-compose>

my-view-model.ts

public class MyViewModel {
   resultViews: ResultView[] = [ new ResultView(), new ResultView() ];
}

result-view.html

<navigation-controls></navigation-controls>

Some output...

result-view.ts

public class ResultView {
}

In 2.0.0-beta.11, <navigation-controls></navigation-controls> would be a different instance of that custom element for each rendered <au-compose component.bind="resultView">. In 2.0.0-beta.12, they are the same instance.

I looked through the changelog for 2.0.0-beta.12 and there doesn't seem to be any info about this. Looking through the commits for that release I see a few places that could have caused this but I'm far from being familiar enough with Aurelia's internals to be certain.

I've seen this as part of a fairly large project, NetPad, so I'm still trying to put together a standalone repro to demonstrate it properly but its happening with multiple custom elements, and not just in one place. On the flip side, I'm not seeing this behavior everywhere, so maybe its something to do with it being hosted inside an <au-compose>.

In places where I'm resolving a custom element's viewmodel using the container, a singleton instance of the NavigationControls viewmodel is also returned, before it was a new instance each time. Using newInstanceOf gives me back a new instance of NavigationControls but we didn't have to do that before.

Is this a known change? And is there a way to change this behavior globally in app setup?

Repro link: TBD

🤔 Expected Behavior

Referencing a custom element in an HTML template should resolve a new instance every time.

😯 Current Behavior

Referencing a custom element in an HTML template returns the same instance every time, in some cases. I also see this new warning:

Error: AUR0153: Element {{0}} has already been registered.

{{0}} here is NavigationControls for example.

💁 Possible Solution

🔦 Context

This affects me in that custom element scopes are now all different than what they were previously. Passing each <navigation-controls> a bound value like <navigation-controls val.bind="someValFromParent"> doesn't work the same because there is only one <navigation-controls> element. This results in broken UI and alot of weird behaviors I'm still uncovering.

💻 Code Sample

🌍 Your Environment

Software	Version(s)
Aurelia	2.0.0-beta.12
Language
Browser	Chromium (Electron)
Bundler	Webpack
Operating System	Linux
NPM/Node/Yarn	Node v18

[bigopon]

@tareqimbasher can you try with latest beta? it's possible that it's been already fixed, since this looks like a very common scenario.

[tareqimbasher]

Unfortunately not in any timely manner, the latest beta (v15) requires a nontrivial change to decorator usage. That effort however is contingent on having a working app which this issue is blocking. I do see this issue in beta v14 as well.

I'm hoping I can try reproducing this issue in a standalone app to see if v15 would resolve it.

[tareqimbasher]

Is my expectation that a new custom element instance should be returned everytime a correct one? Regardless if it's used within a au-compose rendered block/element or not? And regardless if the custom element is used in a template or resolved directly from the container (container.get(ViewModel)) without the need for newInstanceOf?

[bigopon]

the latest beta (v15) requires a nontrivial change to decorator usage

beta 14 can do, there shouldn't be differences between them with regards to this.

container.get(ViewModel)

this does not result into a new instance, this will follow the standard resolution mode of container.get(). @Sayan751 asked about it too. Having container.get() using different way of resolution is considered inconsistent and thus it was changed from always a new instance to always a singleton.

If you want a new instance, use invoke:

container.invoke(ViewModel)

[tareqimbasher]

Got it, thank you for that last part, that is definitely different than how it was in beta.11.

So just to be sure, is my expectation that a new instance should be created everytime when used in a HTML template correct?

[bigopon]

Aurelia does that. Is your question about your app code?

[tareqimbasher]

My question is what does Aurelia do, which you've answered, thank you. I just didn't want to be expected something that the framework isn't doing by design.

[bigopon]

Thanks @tareqimbasher , closing this.

[tareqimbasher]

@bigopon thank you for answering my questions so far but I believe this issue shouldn't be closed yet as the issue I'm experiencing remains unresolved. I have yet to complete a standalone repro to determine if the problem I described is a change in behavior or some weird glitch specific to my app code.

[bigopon]

Indeed, i was hasty, my apology.