Issues #10559 - Extend swatch using mixins (M2.2)

[srenon]

Description

Fixed Issues (if relevant)

#10559: Extending swatch functionality using javascript mixins does not work in Safari and MS Edge

Manual testing scenarios

1. See testing instruction in Extending swatch functionality using javascript mixins does not work in Safari and MS Edge #10559

[nicobatty]

Thanks a lot @srenon for your fix!

By the way, it seems like this file have the same issue on the product view form for the price-box mixin support:

magento2/app/code/Magento/Catalog/view/frontend/templates/product/view/form.phtml

Lines 42 to 57 in e177f45

	<script>
	require([
	'jquery',
	'priceBox'
	], function($){
	var dataPriceBoxSelector = '[data-role=priceBox]',
	dataProductIdSelector = '[data-product-id=<?= $block->escapeHtml($_product->getId()) ?>]',
	priceBoxes = $(dataPriceBoxSelector + dataProductIdSelector);
	priceBoxes = priceBoxes.filter(function(index, elem){
	return !$(elem).find('.price-from').length;
	});
	priceBoxes.priceBox({'priceConfig': <?= /* @escapeNotVerified */ $block->getJsonConfig() ?>});
	});
	</script>

I applied the same method you did for the price-box on the listing which seems to work.

For those wondering, I replaced it with this:

<script type="text/x-magento-init">
    {
        "[data-role=priceBox][data-price-box=product-id-<?= $block->escapeHtml($_product->getId()) ?>]": {
            "priceBox": {
                "priceConfig": <?= /* @escapeNotVerified */ $block->getJsonConfig() ?>
            }
        }
    }
</script>