Hello everyone, we are playing around with some AJAX content. Therefore we are using Ajax-Provider a

U019JM2HE7N

Hello everyone,
we are playing around with some AJAX content. Therefore we are using Ajax-Provider and Ajax-Renderer to place new content in the DOM.
https://github.com/spryker-shop/shop-ui/blob/master/src/SprykerShop/Yves/ShopUi/Theme/default/components/molecules/ajax-provider/ajax-provider.ts
https://github.com/spryker-shop/shop-ui/blob/master/src/SprykerShop/Yves/ShopUi/Theme/default/components/molecules/ajax-renderer/ajax-renderer.ts

Afterwards we need to call the application mount() function to register new Components as Custom Elements.
https://github.com/spryker-shop/shop-ui/blob/master/src/SprykerShop/Yves/ShopUi/Theme/default/app/index.ts#L75
 
This seems to work fine with just one new component at a time. But if there are multiple AJAX calls which contains the same new component, the mount() functions run sometimes into the following error:

application error -> Error: component1 failed to be defined
Failed to execute 'define' on 'CustomElementRegistry': the name "component1" has already been used with this registry
   at candidate.ts:53
   at Generator.next (<anonymous>)
   at asyncGeneratorStep

https://github.com/spryker-shop/shop-ui/blob/master/src/SprykerShop/Yves/ShopUi/Theme/default/app/candidate.ts#L53

Any ideas how we can ensure that the new component is only once submitted as a new candidate?

Aleksander Kovalenko

Hi Marcel. I’m really interested in this case. Can you please provide more details? Are you calling mount() method just once or it’s called after each ajax call? I assume second variant.

U019JM2HE7N

Hi Alexander, thanks for your response. Yes you are right, we are calling the mount() after each AJAX call, which seems to collide in this error.
mount() should be performed after all AjaxRenderer had ran their render() method. How can we hook into this point?

Aleksander Kovalenko

It looks for me like another component that should subscribe on ajax-renderer events and run mount() once all calls are done.

U019JM2HE7N

Thanks for your help, we got indeed this managed to work with Promise.all() on all contained AjaxProvider fetch promises. AjaxRenderer seems to be executed even before AjaxProvider will resolve his fetch promise 😉

U019JM2HE7N

@UN6T8SEM7 Or is there another way to mount new components independently of each other without collision? Cause some of the components need more time to load than others. This slows up the entire mount process