Does Breeze support Magento's linking properties

[walkwizus]

Hello,

I would like to know if Breeze supports linking properties (the imports feature of Magento's uiComponents): https://developer.adobe.com/commerce/frontend-core/ui-components/concepts/linking/

Context

I’m trying to make the following setup compatible with Breeze.

In my layout, I have defined a component like this:

<referenceContainer name="before.body.end">
    <block class="Walkwizus\MeilisearchFrontend\Block\Search" name="meilisearch.frontend.store" template="Walkwizus_MeilisearchFrontend::search-store.phtml">
        <arguments>
            <argument name="view_model" xsi:type="object">Walkwizus\MeilisearchFrontend\ViewModel\JsConfig</argument>
            <argument name="jsLayout" xsi:type="array">
                <item name="components" xsi:type="array">
                    <item name="meilisearch-frontend-store" xsi:type="array">
                        <item name="component" xsi:type="string">Walkwizus_MeilisearchFrontend/js/components/search-store</item>
                        <item name="config" xsi:type="array">
                            <item name="provider" xsi:type="string">meilisearch-frontend-store</item>
                        </item>
                    </item>
                </item>
            </argument>
        </arguments>
    </block>
</referenceContainer>

The Search block uses getJsLayout() to inject dynamic configuration into the component:

public function getJsLayout(): string
{
    /** @var JsConfig $viewModel */
    $viewModel = $this->getViewModel();

    foreach ($viewModel->get(self::COMPONENT_NAME) as $key => $value) {
        $this->jsLayout['components'][self::COMPONENT_NAME]['config'][$key] = $value;
    }

    return parent::getJsLayout();
}

Then I have another component that uses this provider:

<referenceBlock class="Walkwizus\MeilisearchFrontend\Block\Autocomplete" name="top.search">
    <action method="setTemplate">
        <argument name="template" xsi:type="string">Walkwizus_MeilisearchFrontend::form.mini.phtml</argument>
    </action>
    <arguments>
        <argument name="view_model" xsi:type="object">Walkwizus\MeilisearchFrontend\ViewModel\JsConfig</argument>
        <argument name="jsLayout" xsi:type="array">
            <item name="components" xsi:type="array">
                <item name="meilisearch-frontend-autocomplete" xsi:type="array">
                    <item name="component" xsi:type="string">Walkwizus_MeilisearchFrontend/js/components/autocomplete</item>
                    <item name="config" xsi:type="array">
                        <item name="template" xsi:type="string">Walkwizus_MeilisearchFrontend/autocomplete</item>
                    </item>
                    <item name="children" xsi:type="array">
                        <item name="hits" xsi:type="array">
                            <item name="component" xsi:type="string">Walkwizus_MeilisearchFrontend/js/components/hits</item>
                            <item name="config" xsi:type="array">
                                <item name="template" xsi:type="string">Walkwizus_MeilisearchFrontend/autocomplete/hits</item>
                                <item name="provider" xsi:type="string">meilisearch-frontend-store</item>
                                <item name="displayArea" xsi:type="string">hits</item>
                                <item name="deps" xsi:type="array">
                                    <item name="0" xsi:type="string">meilisearch-frontend-store</item>
                                    <item name="1" xsi:type="string">meilisearch-frontend-autocomplete</item>
                                </item>
                            </item>
                        </item>
                    </item>
                </item>
            </item>
        </argument>
    </arguments>
</referenceBlock>

In the hits component, I am trying to use the provider’s properties like this:

defaults: {
    searchResults: ko.observable({}),
    currentViewMode: ko.observable(),
    imports: {
        baseUrl: "${ $.provider }:baseUrl",
        productUrlSuffix: "${ $.provider }:productUrlSuffix",
        productUseCategories: "${ $.provider }:productUseCategories",
        mediaBaseUrl: "${ $.provider }:mediaBaseUrl"
    }
}

But it doesn’t work:
this.baseUrl is always undefined, even if I define the import directly in the layout.

Here is the Breeze configuration in my breeze_default.xml:

<item name="hits" xsi:type="array">
    <item name="path" xsi:type="string">Walkwizus_MeilisearchBreeze/js/components/hits</item>
    <item name="import" xsi:type="array">
        <item name="parent" xsi:type="string">Walkwizus_MeilisearchFrontend/js/components/hits</item>
        <item name="meilisearch-frontend-store" xsi:type="string">Walkwizus_MeilisearchFrontend/js/components/search-store</item>
    </item>
    <item name="load" xsi:type="array">
        <item name="onInteraction" xsi:type="boolean">true</item>
    </item>
</item>

You can access the full code here: https://github.com/walkwizus/magento2-module-meilisearch/tree/master/src/module-meilisearch-frontend

I feel like I’m missing something.

Thank you in advance for your help! 😊

[vovayatsyuk]

Unfortunately, Breeze doesn't implement links, imports, and exports keywords. Once, I did this for third-party integration: https://github.com/breezefront/module-breeze-webkul-order-by-whatsapp-bot/blob/master/view/frontend/web/js/ui-collection.js

You may try reusing this code. It's important to include this file into the core bundle: https://github.com/breezefront/module-breeze-webkul-order-by-whatsapp-bot/blob/master/view/frontend/layout/breeze_default.xml#L8-L14

[vovayatsyuk]

If I understand you correctly, you want to split breeze_default.xml into several files. Don't do this because it will not create proper bundles in production mode in this case. All modifications to breeze.js and breeze.css blocks must be placed in the breeze_default.xml layout update.

If you want to optimize JS file size, you can make your JS dynamic using the load property: https://breezefront.com/docs/components#dynamic-component

[walkwizus]

I’ve made an update, it looks good to me. If you have a moment, could you please check if everything looks fine on your side?

Thanks again for your support!

[vovayatsyuk]

I think you need to add anonymous prop to these as well:

• https://github.com/walkwizus/magento2-module-breeze-meilisearch/blob/master/view/frontend/layout/breeze_default.xml#L22-L30
• https://github.com/walkwizus/magento2-module-breeze-meilisearch/blob/master/view/frontend/layout/breeze_default.xml#L87-L104

Currently, it works fine because JS merge is disabled, each component is loaded from its file, and Breeze automatically resolves the component name from its filepath. But Breeze will not be able to do this when the scripts are combined into a single file.

[walkwizus]

I’ve added the different nodes. I’m going to test with merged JS to make sure everything works properly.
It would be great to have a Magento command to generate the breeze_default.xml file, just like Magento does for generating the db_schema_whitelist.json.

[vovayatsyuk]

Great idea about the command! I think it could work nicely 👍

Just added an issue: breezefront/module-breeze#88