Magento 2: making a module using UI component compatible both 2.0 and 2.1?

Question

As you may know, there are many differences in the way the UI components work on Magento 2.0 and Magento 2.1.

I find it very painful having to manage two different versions of the same module when using UI components (one version for 2.0 and one for 2.1). Cross version compatibility is important IMO specially when you are a module provider so the customer don't have to double check the version to know which module to install.

Thus I would like to make my module compatible with both.

Here is the idea I came up with:

• Having two different UI components under the ui_component folders: my_listing_v_2_0.xml and my_listing_v_2_1.xml

• Then in my layout file I could do something like this:

  <uiComponent ifversion="2.0" name="my_listing_v_2_0" />
  <uiComponent ifversion="2.1" name="my_listing_v_2_1" />
  

That is the theory, and in theory it could work fine.

Now here come the questions:

• how do I attack this ?
• Any way I can create conditional UI component declaration in my layout file ? I highly doubt that's possible out of the box but I'm willing to write some extra code so the layout can support such thing.
• even better (doubt it's possible), can we make a UI component file compatible both 2.0 and 2.1 ?

Answer 1

This is untested, but if I was going to try to do this I'd try a plugin on the uiComponent Reader/Scheduler class. You'll probably want to read this 10,000 foot view post explain layout rendering in Magento 2, but the short version is the following class/method

#File: project-community-edition/vendor/magento/framework/View/Layout/Reader/UiComponent.php
public function interpret(Context $readerContext, Layout\Element $currentElement)
{
    $attributes = $this->getAttributes($currentElement);
    $scheduledStructure = $readerContext->getScheduledStructure();
    $referenceName = $this->layoutHelper->scheduleStructure(
        $scheduledStructure,
        $currentElement,
        $currentElement->getParent(),
        ['attributes' => $attributes]
    );

    $scheduledStructure->setStructureElementData($referenceName, ['attributes' => $attributes]);
    $configPath = (string)$currentElement->getAttribute('ifconfig');
    if (!empty($configPath)) {
        $scheduledStructure->setElementToIfconfigList($referenceName, $configPath, $this->scopeType);
    }

    return $this;
}

is where Magento reads Layout XML values and tells the layout object to "schedule" the creation of a layout structure (block, uiComponent, container, etc.) object. This eventually leads to the creation of that element when Magento finally renders the layout.

A plugin on this method that looks for your uiComponent, and then modifies the component's name might work.