I am trying to extend 'mage/mage' with additional function using mixin? #345

IbrahimS2 · 2024-12-30T10:52:41Z

IbrahimS2
Dec 30, 2024

I am trying to extend 'mage/mage' with additional function using mixin? any clue why this wont work?

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="breeze.js">
            <arguments>
                <argument name="bundles" xsi:type="array">
                    <item name="default" xsi:type="array">
                        <item name="items" xsi:type="array">
                            <item name="mageExtend" xsi:type="array">
                                <item name="path" xsi:type="string">Vendor_Module/js/mageExtend</item>
                                <item name="mixins" xsi:type="array">
                                    <item name="mage" xsi:type="string">mage</item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

mageExtend.js

(() => {
    "use strict";

    $.mixin("mage", {
        /**
         * Checks if provided string is a valid selector.
         * @param {String} selector - Selector to check.
         * @returns {Boolean}
         */
        isValidSelector: function (selector) {
            console.log("Mixin!");

            try {
                document.querySelector(selector);

                return true;
            } catch (e) {
                return false;
            }
        },
    });
})();

vovayatsyuk · 2024-12-30T12:12:45Z

vovayatsyuk
Dec 30, 2024
Maintainer

The component name is 'mage/mage':

$.mixin("mage/mage", {...});

7 replies

IbrahimS2 Dec 30, 2024
Author

Same issue, if you like I can send you the module to have a look... if so, share your email, please.

vovayatsyuk Dec 30, 2024
Maintainer

The issue is that we can't use <item name="mage" xsi:type="string">mage/mage</item> in xml due to breeze issue.

Here is the code that should work as expected:

breeze_default.xml:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="breeze.js">
            <arguments>
                <argument name="bundles" xsi:type="array">
                    <item name="default" xsi:type="array">
                        <item name="items" xsi:type="array">
                            <item name="mageExtend" xsi:type="array">
                                <item name="path" xsi:type="string">Vendor_Module/js/mageExtend</item>
                                <item name="autoload" xsi:type="boolean">true</item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

mageExtend.js:

$.mixin("mage/mage", {
    isValidSelector: ...
});

Usage:

define(["jquery", "mage/mage"], function ($, mage) { 
    console.log(mage.isValidSelector)
});

IbrahimS2 Dec 30, 2024
Author

vovayatsyuk Dec 30, 2024
Maintainer

Can you try to use core bundle for this mixin? This may be an issue since mage/mage is declared inside the core.

vovayatsyuk · 2024-12-30T16:14:11Z

vovayatsyuk
Dec 30, 2024
Maintainer

Here is a working code: breezefront/module-breeze-examples@ec9717d

Writing the mixin for the mage/mage was tricky, because there is no mage/mage declared in the breeze_default.xml, so we can't use its name in XML file. I ended up with a breeze-main reference instead.

Please review my commit.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Breeze Frontend

I am trying to extend 'mage/mage' with additional function using mixin? #345

{{title}}

Replies: 2 comments 7 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Breeze Frontend

I am trying to extend 'mage/mage' with additional function using mixin? #345

IbrahimS2 Dec 30, 2024

Replies: 2 comments · 7 replies

vovayatsyuk Dec 30, 2024 Maintainer

IbrahimS2 Dec 30, 2024 Author

vovayatsyuk Dec 30, 2024 Maintainer

IbrahimS2 Dec 30, 2024 Author

vovayatsyuk Dec 30, 2024 Maintainer

vovayatsyuk Dec 30, 2024 Maintainer

vovayatsyuk Dec 30, 2024 Maintainer

IbrahimS2
Dec 30, 2024

Replies: 2 comments 7 replies

vovayatsyuk
Dec 30, 2024
Maintainer

IbrahimS2 Dec 30, 2024
Author

vovayatsyuk Dec 30, 2024
Maintainer

IbrahimS2 Dec 30, 2024
Author

vovayatsyuk Dec 30, 2024
Maintainer

vovayatsyuk Dec 30, 2024
Maintainer

vovayatsyuk
Dec 30, 2024
Maintainer