Extend Checkout XML to allow shipping method additional templates and UiComponents

Description

When a payment method is added on the checkout page, it renders its children automatically:

additional forms
xtra buttons and so on

However, for the shipping methods, there is no such option and in my personal opinion, that feature is missing from the platform.

This can be achieved by adding this to shipping-method-item.html template:

<tr class="row row-hidden"
    data-bind="css: {'show': element.isSelected}" attr="'id': 'row_' + method.method_code + '_' + method.carrier_code">
    <td class="col col-additional">
        <!-- ko if: (method.method_code) -->
        <each args="element.getRegion(method.method_code)" render=""></each>
        <!-- /ko -->
    </td>
</tr>

By having this in knockout.JS tempate, you can add a uiComponent by XML like this:

<item name="shippingAddress" xsi:type="array">
    <item name="children" xsi:type="array">
        <item name="pocztapolska" xsi:type="array">
            <item name="component" xsi:type="string">Custom_Shipping/js/view/checkout/shipping</item>
            <item name="config" xsi:type="array">
                <item name="method" xsi:type="string">pocztapolska</item>
            </item>
            <item name="displayArea" xsi:type="string">pocztapolska</item>
        </item>
    </item>
</item>

FOr reference: this is how payment methods do it:

<item name="children" xsi:type="array">
    <item name="renders" xsi:type="array">
        <item name="component" xsi:type="string">uiComponent</item>
        <item name="children" xsi:type="array">
            <!-- merge payment method renders here -->
        </item>
    </item>
</item>

Expected behavior

allow developers to easy extend shipping options with UiComponents

Benefits

no need for custom JS appending DOM
automatic initialization of UiComponents
faster shipping module development that have extra features, like this one:
easy to extend / modify custom features by using Layout XML

Additional information

This can be implemented just by simple shipping-method-item.html template modification. Would require some information for developers and some samples how easy it is to create UiComponents for shipping methods.

Release note

No response

Hi @qsolutions-pl. Thank you for your report. To speed up processing of this issue, make sure that the issue is reproducible on the vanilla Magento instance following Steps to reproduce. To deploy vanilla Magento instance on our environment, Add a comment to the issue:

@magento give me 2.4-develop instance - upcoming 2.4.x release
For more details, review the Magento Contributor Assistant documentation.
Add a comment to assign the issue: @magento I am working on this
To learn more about issue processing workflow, refer to the Code Contributions.

Join Magento Community Engineering Slack and ask your questions in #github channel. :warning: According to the Magento Contribution requirements, all issues must go through the Community Contributions Triage process. Community Contributions Triage is a public meeting. :clock10: You can find the schedule on the Magento Community Calendar page. :telephone_receiver: The triage of issues happens in the queue order. If you want to speed up the delivery of your contribution, join the Community Contributions Triage session to discuss the appropriate ticket.

magento / magento2