Enhance in Au 1 vs 2

Help Requests
1

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
2

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?

3

@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
4

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

1 Like
5

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

1 Like
6

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

Or is there even a better function in Au2?

7

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
8

This does not work anymore, there is no function createElement in aurelia package.
Recent version of mdc-dialog-service wraps dialog in a DIV.

How to enhance the element, but not the host in Aurelia 2?
How to dynamically add and enhance child elements when parent is already enhanced?

Range object as host is not supported too:

let dynamic = document.createElement('MY-ELEMENT');
this.element.appendChild(dynamic);
 let range = document.createRange();
range.selectNode(dynamic);
this.au.enhance({
     component: this,
     host: range
})