Aurelia enhance() will crash if a <compose> element exists within a compiled component

[silbinarywolf]

trafficstars

Related to this comment: https://github.com/aurelia/framework/issues/600#issuecomment-252479570

Related gist from above comment: https://gist.run/?id=c59eed72e1c255b8f462c1d45e495a7a

I'm submitting a bug report

• Library Version: 1.8.2

Please tell us about your environment:

• Operating System: Windows 10

• Aurelia CLI OR JSPM OR Webpack AND Version Webpack

• Browser: Chrome

• Language: TypeScript

Current behavior: If I use aurelia.enhance(bindingContext, document.body) on template that was run through the template compiler and has a element in it, I'll get a crash error.

TypeError: Cannot read property 'behaviorInstructions' of undefined
    at applyInstructions (webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:2438:42)
    at ViewFactory.create (webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:2706:7)
    at TemplatingEngine.enhance (webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:5233:24)
    at eval (webpack:///./node_modules/aurelia-framework/dist/native-modules/aurelia-framework.js?:489:28)
    at Aurelia.enhance (webpack:///./node_modules/aurelia-framework/dist/native-modules/aurelia-framework.js?:487:12)
    at eval (webpack:///./src/cypress/component-cypress-tester.ts?:195:44)
From previous event:
    at eval (webpack:///./src/cypress/component-tester.ts?:153:48)
From previous event:
    at eval (webpack:///./src/cypress/component-tester.ts?:116:70)
    at eval (webpack:///./node_modules/aurelia-bootstrapper/dist/native-modules/aurelia-bootstrapper.js?:132:12)
From previous event:
    at bootstrap (webpack:///./node_modules/aurelia-bootstrapper/dist/native-modules/aurelia-bootstrapper.js?:131:24)
    at eval (webpack:///./src/cypress/component-tester.ts?:115:24)
    at Context.eval (webpack:///./src/cypress/component-tester.ts?:114:20)

Expected/desired behavior: I wouldn't expect this to crash. Currently my workaround is to run the following:

// NOTE: Jake: 2018-12-20
// Fix aurelia.enhance() problems that are occuring due to
// a <compose> in a component.
// Research: https://github.com/aurelia/framework/issues/600#issuecomment-252479570
// Gist: https://gist.run/?id=c59eed72e1c255b8f462c1d45e495a7a
document.body.querySelectorAll('.au-target').forEach((el) => {
	el.classList.remove('au-target');
	el.removeAttribute('au-target-id');
});

return aurelia.enhance(this.bindingContext, document.body).then(() => {

[Alexander-Taran]

.enhance is a tricky beast. it is supposed to be run on not hydrated with aurelia dom. and be called only once.

If you have au-target and au-target-id already on elements.. than you already ran aurelia magic on them. your workaround is fine. you would also want to add el.au && el.au.controller.viewModel.detached() && el.au.controller.viewModel.unbind()

[bigopon]

I think this has more to do with documentation than fixing the issue. It doesn't seem there is a safe or easy way to detect which element should be avoided when enhancing a DOM tree.

@fkleuver @EisenbergEffect

[silbinarywolf]

I've opted to only run it once in my use-case and it seems to be working OK. Improved documentation on enhancing/rendering a template manually would be much appreciated though.

https://github.com/silbinarywolf/cypress-aurelia-unit-test/blob/7a8b69ea872a2b31828549168a7a0210e08743e6/lib/component-tester.ts#L202

[EisenbergEffect]

@bigopon Agree. Let me see if I can add a note right now to go out with the next site content release.