Fix: remove IntersectionObserver shim

[dinhtungdu]

As WordPress 5.8 dropped support for IE11, so does WooCommerce, this PR removes the shim for IntersectionObserver. This PR also converts the source file to typescript.

Fixes #3035

Accessibility

• I've tested using only a keyboard (no mouse)
• I've tested using a screen reader
• All animations respect prefers-reduced-motion
• All text has at least a 4.5 color contrast with its background
• I've updated this doc for any feature flags or experimental interfaces implemented in this pull request.

Screenshots

Testing

Automated Tests

• Changes in this PR are covered by Automated Tests.
  • Unit tests
  • E2E tests

Manual Testing

How to test the changes in this Pull Request:

1. Check out this PR.
2. Run npm run dev.
3. Test the Cart block, see no error in console.

Changelog

Remove IntersectionObserver shim in favor of dropping IE11 support.

[dinhtungdu]

I'm wondering should we remove the function entirely because of the shim removal? We only use it in usePositionRelativeToViewport, and the @woocommerce/base-utils is an internal package of this repo.

[github-actions]

Size Change: -17 kB (-1%)

Total Size: 1.23 MB

Filename	Size	Change
build/active-filters-frontend.js	8.35 kB	+10 B (0%)
build/active-filters.js	8.01 kB	+2 B (0%)
build/all-products.js	37 kB	+6 B (0%)
build/all-reviews.js	9.56 kB	+1 B (0%)
build/atomic-block-components/add-to-cart--atomic-block-components/button.js	1.81 kB	+1 B (0%)
build/atomic-block-components/add-to-cart-frontend.js	8.39 kB	+9 B (0%)
build/atomic-block-components/add-to-cart.js	7.72 kB	-2 B (0%)
build/atomic-block-components/button-frontend.js	1.74 kB	-2 B (0%)
build/atomic-block-components/image-frontend.js	1.88 kB	+1 B (0%)
build/atomic-block-components/image.js	1.35 kB	-1 B (0%)
build/atomic-block-components/price-frontend.js	2.13 kB	-1 B (0%)
build/atomic-block-components/price.js	2.11 kB	+2 B (0%)
build/atomic-block-components/rating.js	567 B	+1 B (0%)
build/atomic-block-components/sale-badge-frontend.js	861 B	-1 B (0%)
build/atomic-block-components/sku-frontend.js	392 B	+1 B (0%)
build/atomic-block-components/sku.js	392 B	-1 B (0%)
build/atomic-block-components/stock-indicator-frontend.js	612 B	-1 B (0%)
build/atomic-block-components/summary-frontend.js	908 B	+2 B (0%)
build/atomic-block-components/tag-list-frontend.js	467 B	-1 B (0%)
build/atomic-block-components/tag-list.js	472 B	+1 B (0%)
build/atomic-block-components/title-frontend.js	1.47 kB	+7 B (0%)
build/atomic-block-components/title.js	1.29 kB	+1 B (0%)
build/attribute-filter-frontend.js	18.6 kB	-150 B (-1%)
build/attribute-filter.js	12.2 kB	+7 B (0%)
build/blocks-checkout.js	21.1 kB	+4 B (0%)
build/cart-frontend.js	91.5 kB	+240 B (0%)
build/cart-i2-frontend.js	52.5 kB	-38.5 kB (-42%)	🎉
build/cart-i2.js	47.8 kB	+911 B (+2%)
build/cart.js	46.5 kB	+17 B (0%)
build/checkout-blocks/actions-frontend.js	1.47 kB	+3 B (0%)
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js	0 B	-5.09 kB (removed)	🏆
build/checkout-blocks/billing-address-frontend.js	2.64 kB	+1.5 kB (+132%)	🆘
build/checkout-blocks/contact-information-frontend.js	3.88 kB	+5 B (0%)
build/checkout-blocks/express-payment--checkout-blocks/payment-frontend.js	0 B	-4.83 kB (removed)	🏆
build/checkout-blocks/express-payment-frontend.js	1.92 kB	+89 B (+5%)	🔍
build/checkout-blocks/order-note-frontend.js	1.56 kB	+2 B (0%)
build/checkout-blocks/order-summary-frontend.js	12.7 kB	+60 B (0%)
build/checkout-blocks/payment-frontend.js	4.58 kB	+69 B (+2%)
build/checkout-blocks/sample-frontend.js	0 B	-249 B (removed)	🏆
build/checkout-blocks/shipping-address-frontend.js	3.04 kB	+1.42 kB (+88%)	🆘
build/checkout-blocks/shipping-methods-frontend.js	5.55 kB	+8 B (0%)
build/checkout-blocks/terms-frontend.js	1.64 kB	+4 B (0%)
build/checkout-blocks/totals-frontend.js	271 B	+1 B (0%)
build/checkout-frontend.js	54.4 kB	+127 B (0%)
build/checkout.js	52.6 kB	+89 B (0%)
build/featured-category.js	7.73 kB	-1 B (0%)
build/handpicked-products.js	6.26 kB	+1 B (0%)
build/mini-cart-component-frontend.js	36.5 kB	-67 B (0%)
build/mini-cart-frontend.js	2.35 kB	-5 B (0%)
build/price-filter-frontend.js	14.3 kB	-93 B (-1%)
build/price-filter.js	9.63 kB	+1 B (0%)
build/product-best-sellers.js	6.61 kB	+1 B (0%)
build/product-categories.js	3.38 kB	+1 B (0%)
build/product-category.js	7.49 kB	+3 B (0%)
build/product-new.js	6.77 kB	+2 B (0%)
build/product-on-sale.js	7.13 kB	+1 B (0%)
build/product-search.js	2.66 kB	-1 B (0%)
build/product-tag.js	6.58 kB	+2 B (0%)
build/product-top-rated.js	6.73 kB	+3 B (0%)
build/products-by-attribute.js	7.7 kB	+2 B (0%)
build/reviews-by-category.js	11.5 kB	+2 B (0%)
build/reviews-by-product.js	13 kB	+1 B (0%)
build/reviews-frontend.js	8.96 kB	-17 B (0%)
build/single-product-frontend.js	26.2 kB	+32 B (0%)
build/single-product.js	9.76 kB	+1 B (0%)
build/stock-filter-frontend.js	8.76 kB	-6 B (0%)
build/stock-filter.js	7.81 kB	+2 B (0%)
build/vendors--atomic-block-components/add-to-cart--checkout-blocks/billing-address--checkout-blocks/orde--63cde524-frontend.js	0 B	-16.2 kB (removed)	🏆
build/vendors--atomic-block-components/add-to-cart-frontend.js	4.77 kB	-1 B (0%)
build/vendors--atomic-block-components/price--checkout-blocks/order-summary--checkout-blocks/shipping-methods-frontend.js	0 B	-5.71 kB (removed)	🏆
build/vendors--checkout-blocks/billing-address--checkout-blocks/order-summary--checkout-blocks/shipping-address-frontend.js	0 B	-5.02 kB (removed)	🏆
build/vendors--checkout-blocks/order-summary-frontend.js	0 B	-3.11 kB (removed)	🏆
build/wc-blocks-registry.js	3.71 kB	-23 B (-1%)
build/wc-blocks-shared-context.js	1.54 kB	+1 B (0%)
build/wc-blocks-style-rtl.css	20.4 kB	+308 B (+2%)
build/wc-blocks-style.css	20.4 kB	+309 B (+2%)
build/wc-blocks-vendors.js	254 kB	-7 B (0%)
build/wc-blocks.js	3.5 kB	-1 B (0%)
build/cart-blocks/checkout-button-frontend.js	2.38 kB	+2.38 kB (new file)	🆕
build/cart-blocks/empty-cart-frontend.js	327 B	+327 B (new file)	🆕
build/cart-blocks/express-payment--checkout-blocks/express-payment--checkout-blocks/payment-frontend.js	4.73 kB	+4.73 kB (new file)	🆕
build/cart-blocks/express-payment-frontend.js	1.58 kB	+1.58 kB (new file)	🆕
build/cart-blocks/filled-cart-frontend.js	781 B	+781 B (new file)	🆕
build/cart-blocks/items-frontend.js	254 B	+254 B (new file)	🆕
build/cart-blocks/line-items-frontend.js	5.52 kB	+5.52 kB (new file)	🆕
build/cart-blocks/order-summary--checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js	3.69 kB	+3.69 kB (new file)	🆕
build/cart-blocks/order-summary-frontend.js	7.31 kB	+7.31 kB (new file)	🆕
build/cart-blocks/totals-frontend.js	269 B	+269 B (new file)	🆕
build/vendors--atomic-block-components/add-to-cart--cart-blocks/order-summary--checkout-blocks/billing-ad--c5eb4dcd-frontend.js	16.2 kB	+16.2 kB (new file)	🆕
build/vendors--atomic-block-components/price--cart-blocks/line-items--cart-blocks/order-summary--checkout--8a3571de-frontend.js	5.71 kB	+5.71 kB (new file)	🆕
build/vendors--cart-blocks/line-items--checkout-blocks/order-summary-frontend.js	3.1 kB	+3.1 kB (new file)	🆕
build/vendors--cart-blocks/order-summary--checkout-blocks/billing-address--checkout-blocks/order-summary---eb4d2cec-frontend.js	5.02 kB	+5.02 kB (new file)	🆕

ℹ️ View Unchanged

Filename	Size
build/all-products-frontend.js	23.1 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---a7e2bb9b.js	2.66 kB
build/atomic-block-components/add-to-cart--atomic-block-components/image--atomic-block-components/title.js	332 B
build/atomic-block-components/button.js	875 B
build/atomic-block-components/category-list-frontend.js	472 B
build/atomic-block-components/category-list.js	476 B
build/atomic-block-components/rating-frontend.js	563 B
build/atomic-block-components/sale-badge.js	869 B
build/atomic-block-components/stock-indicator.js	611 B
build/atomic-block-components/summary.js	911 B
build/checkout-blocks/fields-frontend.js	290 B
build/featured-product.js	9.42 kB
build/mini-cart.js	2.34 kB
build/price-format.js	1.37 kB
build/wc-blocks-data.js	11.3 kB
build/wc-blocks-editor-style-rtl.css	15.6 kB
build/wc-blocks-editor-style.css	15.6 kB
build/wc-blocks-google-analytics.js	1.98 kB
build/wc-blocks-middleware.js	1.47 kB
build/wc-blocks-shared-hocs.js	1.75 kB
build/wc-blocks-vendors-style-rtl.css	1.37 kB
build/wc-blocks-vendors-style.css	1.37 kB
build/wc-payment-method-bacs.js	806 B
build/wc-payment-method-cheque.js	806 B
build/wc-payment-method-cod.js	898 B
build/wc-payment-method-paypal.js	839 B
build/wc-payment-method-stripe.js	12.2 kB
build/wc-settings.js	2.91 kB

_{compressed-size-action}

[tjcafferkey]

I'm wondering should we remove the function entirely because of the shim removal? We only use it in usePositionRelativeToViewport, and the @woocommerce/base-utils is an internal package of this repo.

I think so. Lets encourage the usage of the native Web API now that we support it and seeing as though it is only used in one place it should be a fairly simple removal.

[dinhtungdu]

@tjcafferkey I removed the helper, please give this PR another look!

[tjcafferkey]

Sorry for the delay on this re-review. LGTM 🚀