Mark dom-action items that were executed on the page to not re-apply them

[ninaceban]

Description

If the customer is having a React SPA application, we recommend to subscribe to React lifecycle hook to re-apply the view when the component was re-rendered. In this situation when the experience has some destructive actions like appendHTML, insertBefore, insertAfter. The same experience get's re-applied which can lead into doubled activity showed on the page.

In the SPA context, when a view get's rendered we will mark the container that was augmented by Web SDK with the item identifier - alloy-{item.id}. When re-applying the view we will check to see if that container has already the experience(the item id), we will not re-apply it.

Related Issue

https://jira.corp.adobe.com/browse/PDCL-12754

Motivation and Context

Screenshots (if appropriate):

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Improvement (non-breaking change which does not add functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• I have signed the Adobe Open Source CLA or I'm an Adobe employee.
• I have made any necessary test changes and all tests pass.
• I have run the Sandbox successfully.

[jonsnyder]

I appreciate this was built quickly for a customer. Let's take a step back and discuss the design decisions you've made here. Can you prepare a presentation or wiki that we can review in a check-in?