Issues magento#10559 -Extend swatch using mixins

For  Magento 2.2

Author: srenon

app/code/Magento/Swatches/view/frontend/templates/product/listing/renderer.phtml

@@ -5,36 +5,33 @@
  */
 ?>
 <?php /** @var $block \Magento\Swatches\Block\Product\Renderer\Listing\Configurable */ ?>
-<div class="swatch-opt-<?= /* @escapeNotVerified */ $block->getProduct()->getId() ?>"></div>
-<script>
-    require([
-        'jquery',
-        'jquery/ui',
-        'Magento_Swatches/js/swatch-renderer',
-        'Magento_Swatches/js/catalog-add-to-cart',
-        'priceBox'
-    ], function ($) {
-        var jsonConfig = <?= /* @escapeNotVerified */ $block->getJsonConfig() ?>;
+<div class="swatch-opt-<?= /* @escapeNotVerified */ $block->getProduct()->getId() ?>" data-role="swatch-option-<?= /* @escapeNotVerified */ $block->getProduct()->getId() ?>"></div>
 
-        $('.swatch-opt-<?= /* @escapeNotVerified */ $block->getProduct()->getId() ?>').SwatchRenderer({
-            selectorProduct: '.product-item-details',
-            onlySwatches: true,
-            enableControlLabel: false,
-            numberToShow: <?= /* @escapeNotVerified */ $block->getNumberSwatchesPerProduct() ?>,
-            jsonConfig: jsonConfig,
-            jsonSwatchConfig: <?= /* @escapeNotVerified */ $block->getJsonSwatchConfig() ?>,
-            mediaCallback: '<?= /* @escapeNotVerified */ $block->getMediaCallback() ?>'
-        });
-
-        var dataPriceBoxSelector = '[data-role=priceBox]',
-            dataProductIdSelector = '[data-product-id=<?= $block->escapeHtml($block->getProduct()->getId()) ?>]',
-            priceBoxes = $(dataPriceBoxSelector + dataProductIdSelector);
+<script type="text/x-magento-init">
+    {
+        "[data-role=swatch-option-<?= /* @escapeNotVerified */ $block->getProduct()->getId() ?>]": {
+            "Magento_Swatches/js/swatch-renderer": {
+                "selectorProduct": ".product-item-details",
+                "onlySwatches": true,
+                "enableControlLabel": false,
+                "numberToShow": <?= /* @escapeNotVerified */ $block->getNumberSwatchesPerProduct(); ?>,
+                "jsonConfig": <?= /* @escapeNotVerified */ $block->getJsonConfig(); ?>,
+                "jsonSwatchConfig": <?= /* @escapeNotVerified */ $block->getJsonSwatchConfig(); ?>,
+                "mediaCallback": "<?= /* @escapeNotVerified */ $block->getMediaCallback() ?>"
+            }
+        }
+    }
+</script>
 
-        priceBoxes.priceBox({
-            'priceConfig': {
-                priceFormat: jsonConfig.priceFormat,
-                prices: jsonConfig.prices
+<script type="text/x-magento-init">
+    {
+        "[data-role=priceBox][data-price-box=product-id-<?= $block->escapeHtml($block->getProduct()->getId()) ?>]": {
+            "priceBox": {
+                "priceConfig": {
+                    "priceFormat": <?= $block->getPriceFormatJson(); ?>,
+                    "prices": <?= $block->getPricesJson(); ?>
+                }
             }
-        });
-    });
+        }
+    }
 </script>