Load color picker dependencies only when it is actually used

[krzksz]

Description (*)

This is just another performance PR, which focuses on loading only the needed dependencies. This time I am optimizing color picker component and its spectrum and tinycolor dependencies.

Loading mentioned modules dynamically saves us 2 JavaScript requests and 123,6kB (28,3kB gzipped) from downloading and parsing.

This change is covered by unit tests that had to be adjusted to take asynchronous dependencies loading into account.

Manual testing scenarios (*)

1. Verify that spectrum.js and tinycolor.js are no longer loaded by default.
2. Verify that above modules are loaded and color picker works as expected when used (see comment above to find out how to add it).

Questions or comments

While making sure this change doesn't break anything I found out that colorPicker binding is not used anywhere in Magento. The easiest way to get it is to for example add it to app/code/Magento/Catalog/view/adminhtml/ui_component/category_form.xml:

<field name="color_picker_test">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="component" xsi:type="string">Magento_Ui/js/form/element/color-picker</item>
            <item name="template" xsi:type="string">ui/form/field</item>
            <item name="elementTmpl" xsi:type="string">ui/form/element/color-picker</item>
            <item name="label" xsi:type="string">Background Color (hex)</item>
            <item name="labelVisible" xsi:type="boolean">true</item>
            <item name="visible" xsi:type="boolean">true</item>
            <item name="dataType" xsi:type="string">text</item>
            <item name="formElement" xsi:type="string">input</item>
            <item name="source" xsi:type="string">category_form</item>
        </item>
    </argument>
</field>

and test it in category edit form.

Contribution checklist (*)

• Pull request has a meaningful description of its purpose
• All commits are accompanied by meaningful commit messages
• All new or changed code is covered with unit/integration tests (if applicable)
• All automated tests passed successfully (all builds are green)

Resolved issues:

1. resolves [Issue] Load color picker dependencies only when it is actually used #28477: Load color picker dependencies only when it is actually used

Related Pull Requests

https://github.com/magento-commerce/magento2-page-builder/pull/76

[m2-assistant]

Hi @krzksz. Thank you for your contribution
Here is some useful tips how you can test your changes using Magento test environment.
Add the comment under your pull request to deploy test or vanilla Magento instance:

• @magento give me test instance - deploy test instance based on PR changes
• @magento give me 2.4-develop instance - deploy vanilla Magento instance

❗ Automated tests can be triggered manually with an appropriate comment:

• @magento run all tests - run or re-run all required tests against the PR changes
• @magento run <test-build(s)> - run or re-run specific test build(s)
  For example: @magento run Unit Tests

<test-build(s)> is a comma-separated list of build names. Allowed build names are:

1. Database Compare
2. Functional Tests CE
3. Functional Tests EE,
4. Functional Tests B2B
5. Integration Tests
6. Magento Health Index
7. Sample Data Tests CE
8. Sample Data Tests EE
9. Sample Data Tests B2B
10. Static Tests
11. Unit Tests
12. WebAPI Tests

You can find more information about the builds here

ℹ️ Please run only needed test builds instead of all when developing. Please run all test builds before sending your PR for review.

For more details, please, review the Magento Contributor Guide documentation.

[rogyar]

@magento run all tests

[krzksz]

@magento run all tests

[krzksz]

@magento run Static Tests,Unit Tests

[krzksz]

@magento run Static Tests,Unit Tests

[krzksz]

@magento run all tests

[engcom-Charlie]

@magento run all tests

[magento-automated-testing]

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please re-request them if they don't show in a reasonable amount of time.

[engcom-Charlie]

Hi @krzksz

Thank you for your contribution!

I am looking into the build failure.

Thank you!

[engcom-Charlie]

@magento run all tests

[magento-automated-testing]

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please re-request them if they don't show in a reasonable amount of time.

[engcom-Charlie]

Currently not looking into this PR as I am in between some other priority tasks. Will resume work on this once done with current work.

[engcom-Charlie]

@magento run all tests

[magento-automated-testing]

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please re-request them if they don't show in a reasonable amount of time.

[engcom-Charlie]

@magento run all tests

[magento-automated-testing]

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please re-request them if they don't show in a reasonable amount of time.

[engcom-Charlie]

@magento run all tests

[engcom-Charlie]

@magento run all tests

[magento-automated-testing]

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please re-request them if they don't show in a reasonable amount of time.

[magento-automated-testing]

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please re-request them if they don't show in a reasonable amount of time.

[engcom-Charlie]

@magento run all tests

[magento-automated-testing]

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please re-request them if they don't show in a reasonable amount of time.

[engcom-Charlie]

@magento run all tests

[magento-automated-testing]

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please re-request them if they don't show in a reasonable amount of time.

[engcom-Charlie]

As the build failure is showing errors in few outdated files after merging latest code too, closing this PR. All the code committed in this PR is covered in #34142 PR.

Thank you!