Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Fix/you do not need lodash #9161

Merged
merged 31 commits into from
Apr 28, 2023
Merged

Fix/you do not need lodash #9161

merged 31 commits into from
Apr 28, 2023

Conversation

mikejolley
Copy link
Member

@mikejolley mikejolley commented Apr 21, 2023

This PR removes all usage of lodash dependency and replaces lodash functions with native functions, or alternative packages, where possible.

Since this touched a number of files, it will be easier to review each commit separately since I did it function by function and the commits are small. You can mark these off it it helps with the review.

Debounce/throttle was replaced with a mix of custom functions and the use-debounce package. We might be able to refactor more to use hooks in the future but I left this to avoid complex refactoring:

To guard against future usage, an ES Lint rule has been added:

Fixes #8642

Testing

Changes should have a degree of e2e and JS test coverage since a broken replacement would have knock on effect to components using that functionality, so take extra case to make sure tests pass across the board.

Beyond this we should smoke test the critical flows, areas touched include:

  • Checkout filling address form and changes being pushed
  • Placing the order via checkout
  • Inserting product blocks, handpicked products, filter blocks, products by category and checking the editor views work as expected.
  • Do not include in the Testing Notes

Changelog

Performance: Removed lodash dependency on the frontend.

@mikejolley mikejolley added the focus: performance The issue/PR is related to performance. label Apr 21, 2023
@mikejolley mikejolley self-assigned this Apr 21, 2023
@woocommercebot woocommercebot requested review from a team and wavvves and removed request for a team April 21, 2023 14:24
@github-actions
Copy link
Contributor

github-actions bot commented Apr 21, 2023

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-9161.zip

Script Dependencies Report

The compare-assets action has detected some changed script dependencies between this branch and trunk. Please review and confirm the following are correct before merging.

Script Handle Added Removed
reviews-frontend.js wc-settings, wp-a11y, wp-api-fetch, wp-compose, wp-element, wp-i18n, wp-is-shallow-equal, wp-polyfill ⚠️
active-filters-frontend.js wc-blocks-data-store, wc-price-format, wc-settings, wp-data, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url ⚠️
all-products-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-context, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-block-editor, wp-blocks, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️
attribute-filter-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-block-editor, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning ⚠️
cart-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-context, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-block-editor, wp-blocks, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-plugins, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️
checkout-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-plugins, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️
filter-wrapper-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-price-format, wc-settings, wp-a11y, wp-block-editor, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning ⚠️
mini-cart-frontend.js wp-polyfill ⚠️
price-filter-frontend.js react, wc-blocks-data-store, wc-price-format, wc-settings, wp-data, wp-element, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-url ⚠️
rating-filter-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-block-editor, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning ⚠️
stock-filter-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-block-editor, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning ⚠️
mini-cart-component-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-price-format, wc-settings, wp-a11y, wp-autop, wp-block-editor, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️

This comment was automatically generated by the ./github/compare-assets action.

TypeScript Errors Report

  • Files with errors: 450
  • Total errors: 2228

⚠️ ⚠️ This PR introduces new TS errors on 5 files:

assets/js/data/cart/push-changes.ts

assets/js/data/collections/reducers.js

assets/js/data/schema/reducers.js

assets/js/editor-components/grid-layout-control/index.js

assets/js/editor-components/utils/index.js

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented Apr 21, 2023

Size Change: +9.55 kB (+1%)

Total Size: 1.11 MB

Filename Size Change
build/active-filters-frontend.js 8.56 kB +573 B (+7%) 🔍
build/active-filters-wrapper-frontend.js 4.68 kB -1.29 kB (-22%) 🎉
build/active-filters.js 7.48 kB -2 B (0%)
build/all-products-frontend.js 12.1 kB +304 B (+3%)
build/all-products.js 38.8 kB +178 B (0%)
build/all-reviews.js 7.77 kB +115 B (+2%)
build/attribute-filter-frontend.js 23.2 kB +701 B (+3%)
build/attribute-filter-wrapper-frontend.js 4.63 kB -2.44 kB (-34%) 🎉
build/attribute-filter.js 13.3 kB +81 B (+1%)
build/blocks-checkout.js 35.1 kB -1 B (0%)
build/breadcrumbs.js 2.05 kB -2 B (0%)
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.38 kB +1 B (0%)
build/cart-blocks/cart-cross-sells-products-frontend.js 5.39 kB +4 B (0%)
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.16 kB -3 B (0%)
build/cart-blocks/cart-express-payment-frontend.js 717 B -2 B (0%)
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.39 kB -5 B (0%)
build/cart-blocks/cart-line-items-frontend.js 1.07 kB +3 B (0%)
build/cart-blocks/cart-order-summary-frontend.js 1.27 kB +2 B (0%)
build/cart-blocks/cart-totals-frontend.js 308 B +1 B (0%)
build/cart-blocks/filled-cart-frontend.js 654 B -2 B (0%)
build/cart-blocks/order-summary-coupon-form-frontend.js 1.63 kB +2 B (0%)
build/cart-blocks/order-summary-discount-frontend.js 2.12 kB +4 B (0%)
build/cart-blocks/order-summary-heading-frontend.js 332 B -1 B (0%)
build/cart-blocks/order-summary-shipping-frontend.js 16.9 kB +5.1 kB (+43%) 🚨
build/cart-blocks/order-summary-subtotal-frontend.js 273 B -1 B (0%)
build/cart-blocks/order-summary-taxes-frontend.js 434 B +3 B (+1%)
build/cart-blocks/proceed-to-checkout-frontend.js 1.38 kB +3 B (0%)
build/cart-frontend.js 29.6 kB +337 B (+1%)
build/cart.js 44.5 kB +35 B (0%)
build/catalog-sorting.js 1.7 kB +1 B (0%)
build/checkout-blocks/actions-frontend.js 1.85 kB +3 B (0%)
build/checkout-blocks/billing-address-frontend.js 1.18 kB -3 kB (-72%) 🏆
build/checkout-blocks/contact-information-frontend.js 2.05 kB -1 B (0%)
build/checkout-blocks/express-payment-frontend.js 1.13 kB -2 B (0%)
build/checkout-blocks/order-note-frontend.js 1.13 kB -2 B (0%)
build/checkout-blocks/order-summary-cart-items-frontend.js 3.69 kB +2 B (0%)
build/checkout-blocks/order-summary-discount-frontend.js 2.29 kB +4 B (0%)
build/checkout-blocks/order-summary-frontend.js 1.28 kB +3 B (0%)
build/checkout-blocks/order-summary-shipping-frontend.js 17 kB +5.12 kB (+43%) 🚨
build/checkout-blocks/order-summary-taxes-frontend.js 434 B +4 B (+1%)
build/checkout-blocks/payment-frontend.js 8.27 kB +4 B (0%)
build/checkout-blocks/pickup-options-frontend.js 4.81 kB +675 B (+16%) ⚠️
build/checkout-blocks/shipping-address-frontend.js 1.14 kB -3 kB (-72%) 🏆
build/checkout-blocks/shipping-method-frontend.js 2.59 kB +6 B (0%)
build/checkout-blocks/shipping-methods-frontend.js 6.3 kB +655 B (+12%) ⚠️
build/checkout-blocks/terms-frontend.js 1.56 kB -3 B (0%)
build/checkout-blocks/totals-frontend.js 311 B +1 B (0%)
build/checkout-frontend.js 31.3 kB +366 B (+1%)
build/checkout.js 46.2 kB +33 B (0%)
build/customer-account.js 3.18 kB +11 B (0%)
build/featured-category.js 14.4 kB +89 B (+1%)
build/featured-product.js 14.7 kB +137 B (+1%)
build/filter-wrapper-frontend.js 14.2 kB +125 B (+1%)
build/filter-wrapper.js 2.4 kB -1 B (0%)
build/handpicked-products.js 8 kB +75 B (+1%)
build/legacy-template.js 5.63 kB +2 B (0%)
build/mini-cart-component-frontend.js 29.5 kB +315 B (+1%)
build/mini-cart-contents-block/cart-button-frontend.js 864 B -3 B (0%)
build/mini-cart-contents-block/checkout-button-frontend.js 866 B -4 B (0%)
build/mini-cart-contents-block/footer-frontend.js 3.23 kB +27 B (+1%)
build/mini-cart-contents-block/shopping-button-frontend.js 760 B +1 B (0%)
build/mini-cart-contents-block/title-frontend.js 1.09 kB -4 B (0%)
build/mini-cart-contents-block/title-items-counter-frontend.js 731 B -1 B (0%)
build/mini-cart-contents-block/title-label-frontend.js 661 B +1 B (0%)
build/mini-cart-contents.js 17.9 kB +54 B (0%)
build/mini-cart.js 4.49 kB -1 B (0%)
build/price-filter-frontend.js 14.5 kB +611 B (+4%)
build/price-filter-wrapper-frontend.js 5.78 kB -1.25 kB (-18%) 👏
build/price-filter.js 8.46 kB +19 B (0%)
build/price-format.js 1.19 kB +1 B (0%)
build/product-add-to-cart--product-button--product-image--product-price--product-rating--product-sale-bad--49d3ecb2.js 251 B -2 B (-1%)
build/product-add-to-cart--product-button--product-image--product-rating--product-title.js 0 B -151 B (removed) 🏆
build/product-add-to-cart-frontend.js 6.5 kB +79 B (+1%)
build/product-add-to-cart.js 8.87 kB +34 B (0%)
build/product-best-sellers.js 8.34 kB +81 B (+1%)
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--5bce0384.js 463 B -1 B (0%)
build/product-button-frontend.js 1.92 kB +1 B (0%)
build/product-button.js 4.18 kB +14 B (0%)
build/product-categories.js 2.36 kB +1 B (0%)
build/product-category.js 9.35 kB +99 B (+1%)
build/product-image-frontend.js 1.84 kB -3 B (0%)
build/product-image.js 4.31 kB +9 B (0%)
build/product-new.js 8.34 kB +88 B (+1%)
build/product-on-sale.js 8.67 kB +87 B (+1%)
build/product-price-frontend.js 2.12 kB +1 B (0%)
build/product-price.js 1.68 kB +2 B (0%)
build/product-query.js 11.4 kB +81 B (+1%)
build/product-rating-frontend.js 1.33 kB -3 B (0%)
build/product-rating.js 921 B +1 B (0%)
build/product-results-count.js 1.66 kB -1 B (0%)
build/product-sale-badge-frontend.js 974 B -1 B (0%)
build/product-sku-frontend.js 998 B -2 B (0%)
build/product-stock-indicator-frontend.js 1.19 kB -1 B (0%)
build/product-stock-indicator.js 770 B +1 B (0%)
build/product-summary-frontend.js 1.29 kB -3 B (0%)
build/product-summary.js 922 B +2 B (0%)
build/product-tag.js 8.97 kB +224 B (+3%)
build/product-title-frontend.js 1.37 kB -3 B (0%)
build/product-title.js 3.75 kB +21 B (+1%)
build/product-top-rated.js 8.58 kB +84 B (+1%)
build/products-by-attribute.js 9.7 kB +109 B (+1%)
build/rating-filter-frontend.js 21.5 kB +667 B (+3%)
build/rating-filter-wrapper-frontend.js 3.04 kB -2.55 kB (-46%) 🎉
build/rating-filter.js 7.01 kB +31 B (0%)
build/reviews-by-category.js 12.1 kB +190 B (+2%)
build/reviews-by-product.js 13.2 kB +228 B (+2%)
build/reviews-frontend.js 7.1 kB -2 B (0%)
build/single-product.js 11.1 kB +116 B (+1%)
build/stock-filter-frontend.js 21.8 kB +687 B (+3%)
build/stock-filter-wrapper-frontend.js 3.31 kB -2.52 kB (-43%) 🎉
build/stock-filter.js 7.73 kB +22 B (0%)
build/store-notices.js 1.69 kB +4 B (0%)
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-coupon-form--cart-blocks/order-summary--48e1e4bb-frontend.js 6.82 kB -1 B (0%)
build/vendors--attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js 0 B -7.7 kB (removed) 🏆
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.58 kB +435 B (+14%) ⚠️
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js 19.1 kB +1 B (0%)
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping--checkout-block--24d3fc0c-frontend.js 0 B -8.25 kB (removed) 🏆
build/vendors--checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 0 B -5.44 kB (removed) 🏆
build/vendors--checkout-blocks/shipping-method-frontend.js 12.4 kB +484 B (+4%)
build/vendors--product-add-to-cart-frontend.js 7.25 kB +1 B (0%)
build/wc-blocks-data.js 22.7 kB +842 B (+4%)
build/wc-blocks-shared-hocs.js 1.75 kB +3 B (0%)
build/wc-blocks-style-rtl.css 27.6 kB -6 B (0%)
build/wc-blocks-style.css 27.6 kB -6 B (0%)
build/wc-blocks-vendors.js 64.1 kB +1.32 kB (+2%)
build/wc-blocks.js 2.62 kB -2 B (0%)
build/wc-shipping-method-pickup-location.js 30.3 kB +276 B (+1%)
build/active-filters-wrapper--attribute-filter-wrapper--price-filter-wrapper--rating-filter-wrapper--stoc--78b62dd5-frontend.js 2.31 kB +2.31 kB (new file) 🆕
build/attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js 5.53 kB +5.53 kB (new file) 🆕
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.66 kB +4.66 kB (new file) 🆕
build/product-add-to-cart--product-rating.js 151 B +151 B (new file) 🆕
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-shipping--checkout-blocks/billing-addr--d9f38f9d-frontend.js 4.2 kB +4.2 kB (new file) 🆕
build/vendors--checkout-blocks/pickup-options--checkout-blocks/shipping-methods-frontend.js 8.25 kB +8.25 kB (new file) 🆕
ℹ️ View Unchanged
Filename Size
build/cart-blocks/cart-cross-sells-frontend.js 253 B
build/cart-blocks/cart-items-frontend.js 302 B
build/cart-blocks/empty-cart-frontend.js 345 B
build/cart-blocks/order-summary-fee-frontend.js 273 B
build/checkout-blocks/fields-frontend.js 331 B
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.79 kB
build/checkout-blocks/order-summary-fee-frontend.js 275 B
build/checkout-blocks/order-summary-subtotal-frontend.js 273 B
build/general-style-rtl.css 1.31 kB
build/general-style.css 1.31 kB
build/mini-cart-contents-block/empty-cart-frontend.js 360 B
build/mini-cart-contents-block/filled-cart-frontend.js 268 B
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 589 B
build/mini-cart-frontend.js 2.02 kB
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--408017d2.js 262 B
build/product-sale-badge.js 801 B
build/product-search.js 2.63 kB
build/product-sku.js 578 B
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--3c5fe802-frontend.js 5.26 kB
build/wc-blocks-editor-style-rtl.css 5.87 kB
build/wc-blocks-editor-style.css 5.87 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 933 B
build/wc-blocks-registry.js 3.15 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-vendors-style-rtl.css 1.96 kB
build/wc-blocks-vendors-style.css 1.96 kB
build/wc-payment-method-bacs.js 816 B
build/wc-payment-method-cheque.js 811 B
build/wc-payment-method-cod.js 909 B
build/wc-payment-method-paypal.js 837 B
build/wc-settings.js 2.6 kB
build/woo-directives-runtime.js 2.73 kB
build/woo-directives-vendors.js 7.91 kB

compressed-size-action

@mikejolley mikejolley force-pushed the fix/you-do-not-need-lodash branch from 650c04e to a57875c Compare April 25, 2023 12:47
@mikejolley mikejolley force-pushed the fix/you-do-not-need-lodash branch from a57875c to fb4c398 Compare April 25, 2023 13:12
Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com>
@mikejolley mikejolley requested a review from wavvves April 27, 2023 14:33
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
focus: performance The issue/PR is related to performance.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Remove lodash dependency from frontend scripts
2 participants