Enhance in Au 1 vs 2

I’m using a Stencil component library to compose different framework components into an existing Stencil component.

In Aurelia 1, it’s pretty trivial:

this.templatingEngine.enhance({element: document.getElementById(id), bindingContext: {model}});

When I try to accomplish something similar in Aurelia 2, I get an error:

Aurelia.enhance({host: document.getElementById(id), component: SimpleComponent });

The error:

Uncaught (in promise) Error: Invalid surrogate attribute: id

I know everything won’t be the same, but I was hoping it’d be this simple. Is there a different way in 2?

1 Like

I should eventually be as simple as v1: any piece of templating can be enhanced. Or it can read as composition using any kind of template & view model. For now, we don’t have it yet. For the error you got, it’s mainly for a fullblown CE compilation.
Can you help create a ticket to track this?

@m0ngr31 in the meantime you can do it like this aurelia-mdc-web/mdc-dialog-service.ts at 77abb13af1aec17e1cc1af2c7be1be194a8a90f8 · aurelia-ui-toolkits/aurelia-mdc-web · GitHub

1 Like

Okay that’s good to know. What’s the best repo to do this?

1 Like

I’ll look at this in the morning. Thanks!

1 Like

Will this new “enhance” method call all lifecycle hooks automatically including detaching, unbinding and dispose?

Or is there even a better function in Au2?

The v2 “enhance” will call all the lifecycle hooks. Except it won’t detach the enhance root, because the root was not attached by the “enhance” in the first place.

1 Like