Update the Interactivity API files to include latest changes

[DAreRodz]

What?

Updates all files related to the Interactivity API.

Tracking issue: woocommerce/woocommerce#42486

Why?

To maintain it updated, and thus be able to start using it in blocks (e.g. the "Add to cart" block).

How?

The JS runtime code comes from WordPress/block-interactivity-experiments, but the PHP one comes from WordPress/gutenberg (more precisely, from the interactivity branch).

All prefixes related to wp and gutenberg were replaced with wc and woocommerce ones.

There is also some custom code to register the Interactivity API runtime script.

Testing instructions

You can check the Simple Price Filter block using the updated Interactivity API in the next PR:

• Experiment: Simple price filter block using the Interactivity API #9926

• Do not include in the Testing Notes

[github-actions]

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-9924.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
wc-blocks.js	wp-block-editor, wp-blocks, wp-components, wp-compose, wp-core-data, wp-data, wp-edit-site, wp-element, wp-hooks, wp-i18n, wp-plugins, wp-polyfill, wp-primitives		⚠️
active-filters.js	wc-blocks-data-store, wc-price-format, wc-settings, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url		⚠️
all-products.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-components, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-escape-html, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-style-engine, wp-url, wp-warning, wp-wordcount		⚠️
all-reviews.js	wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives		⚠️
attribute-filter.js	lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-block-editor, wp-blocks, wp-components, 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		⚠️
breadcrumbs.js	wc-settings, wp-block-editor, wp-blocks, wp-components, wp-element, wp-i18n, wp-polyfill, wp-primitives		⚠️
cart.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-components, wp-compose, wp-core-data, wp-data, wp-deprecated, wp-dom, wp-editor, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-plugins, wp-polyfill, wp-primitives, wp-style-engine, wp-url, wp-warning, wp-wordcount		⚠️
catalog-sorting.js	wp-block-editor, wp-blocks, wp-components, wp-element, wp-i18n, wp-polyfill, wp-primitives		⚠️
checkout.js	lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-core-data, wp-data, wp-deprecated, wp-dom, wp-editor, 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		⚠️
customer-account.js	wc-settings, wp-block-editor, wp-blocks, wp-components, wp-element, wp-i18n, wp-polyfill, wp-primitives		⚠️
featured-category.js	react, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-style-engine, wp-url		⚠️
featured-product.js	react, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-style-engine, wp-url		⚠️
filter-wrapper.js	wp-block-editor, wp-blocks, wp-element, wp-i18n, wp-polyfill, wp-primitives		⚠️
handpicked-products.js	react, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url		⚠️
legacy-template.js	wc-settings, wp-block-editor, wp-blocks, wp-components, wp-core-data, wp-data, wp-element, wp-i18n, wp-notices, wp-polyfill, wp-primitives		⚠️
mini-cart.js	react, wc-price-format, wc-settings, wp-block-editor, wp-blocks, wp-components, wp-data, wp-dom, wp-element, wp-hooks, wp-i18n, wp-polyfill, wp-primitives		⚠️
mini-cart-contents.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-blocks, wp-components, 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		⚠️
store-notices.js	wp-block-editor, wp-blocks, wp-components, wp-element, wp-i18n, wp-polyfill, wp-primitives		⚠️
price-filter.js	react, wc-blocks-data-store, wc-price-format, wc-settings, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url		⚠️
product-best-sellers.js	wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url		⚠️
product-category.js	wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url		⚠️
product-categories.js	wp-block-editor, wp-blocks, wp-components, wp-data, wp-element, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render		⚠️
product-new.js	wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url		⚠️
product-on-sale.js	wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url		⚠️
product-query.js	wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-escape-html, wp-hooks, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-url		⚠️
product-results-count.js	wp-block-editor, wp-blocks, wp-element, wp-i18n, wp-polyfill, wp-primitives		⚠️
product-search.js	wc-settings, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-i18n, wp-polyfill, wp-primitives		⚠️
product-tag.js	wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url		⚠️
product-top-rated.js	wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url		⚠️
products-by-attribute.js	wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url		⚠️
rating-filter.js	lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-block-editor, wp-blocks, wp-components, 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		⚠️
reviews-by-category.js	wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url		⚠️
reviews-by-product.js	react, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url		⚠️
single-product.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-api-fetch, wp-autop, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-escape-html, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-style-engine, wp-url, wp-warning, wp-wordcount		⚠️
stock-filter.js	lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-block-editor, wp-blocks, wp-components, 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		⚠️
product-collection.js	wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-core-data, wp-data, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-url		⚠️
product-template.js	wc-settings, wp-block-editor, wp-blocks, wp-components, wp-core-data, wp-data, wp-element, wp-i18n, wp-polyfill		⚠️

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

TypeScript Errors Report

• Files with errors: 463
• Total errors: 2236

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

assets/js/interactivity/directives.js

assets/js/interactivity/hooks.js

assets/js/interactivity/router.js

assets/js/interactivity/utils.js

assets/js/interactivity/vdom.js

_{comments-aggregator}

[github-actions]

Size Change: -221 B (0%)

Total Size: 1.1 MB

Filename	Size	Change
build/woo-directives-runtime.js	0 B	-2.73 kB (removed)	🏆
build/woo-directives-vendors.js	0 B	-7.91 kB (removed)	🏆
build/wc-interactivity.js	10.4 kB	+10.4 kB (new file)	🆕

ℹ️ View Unchanged

Filename	Size
build/active-filters-frontend.js	8.64 kB
build/active-filters-wrapper-frontend.js	7.61 kB
build/active-filters.js	7.48 kB
build/all-products-frontend.js	12 kB
build/all-products.js	40.3 kB
build/all-reviews.js	7.86 kB
build/attribute-filter-wrapper--stock-filter-wrapper-frontend.js	4.04 kB
build/attribute-filter-wrapper-frontend.js	4.29 kB
build/attribute-filter.js	13.2 kB
build/blocks-checkout.js	35.1 kB
build/breadcrumbs.js	2.13 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js	1.39 kB
build/cart-blocks/cart-cross-sells-frontend.js	253 B
build/cart-blocks/cart-cross-sells-products--product-price-frontend.js	2.92 kB
build/cart-blocks/cart-cross-sells-products-frontend.js	3.77 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js	5.17 kB
build/cart-blocks/cart-express-payment-frontend.js	719 B
build/cart-blocks/cart-items-frontend.js	301 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js	5.57 kB
build/cart-blocks/cart-line-items-frontend.js	1.06 kB
build/cart-blocks/cart-order-summary-frontend.js	1.27 kB
build/cart-blocks/cart-totals-frontend.js	309 B
build/cart-blocks/empty-cart-frontend.js	346 B
build/cart-blocks/filled-cart-frontend.js	656 B
build/cart-blocks/order-summary-coupon-form-frontend.js	1.63 kB
build/cart-blocks/order-summary-discount-frontend.js	2.12 kB
build/cart-blocks/order-summary-fee-frontend.js	273 B
build/cart-blocks/order-summary-heading-frontend.js	334 B
build/cart-blocks/order-summary-shipping-frontend.js	17.1 kB
build/cart-blocks/order-summary-subtotal-frontend.js	273 B
build/cart-blocks/order-summary-taxes-frontend.js	433 B
build/cart-blocks/proceed-to-checkout-frontend.js	1.44 kB
build/cart-frontend.js	30 kB
build/cart.js	45.2 kB
build/catalog-sorting.js	1.7 kB
build/checkout-blocks/actions-frontend.js	1.88 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js	4.7 kB
build/checkout-blocks/billing-address-frontend.js	1.19 kB
build/checkout-blocks/contact-information-frontend.js	2.05 kB
build/checkout-blocks/express-payment-frontend.js	1.14 kB
build/checkout-blocks/fields-frontend.js	331 B
build/checkout-blocks/order-note-frontend.js	1.13 kB
build/checkout-blocks/order-summary-cart-items-frontend.js	3.75 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js	1.79 kB
build/checkout-blocks/order-summary-discount-frontend.js	2.29 kB
build/checkout-blocks/order-summary-fee-frontend.js	276 B
build/checkout-blocks/order-summary-frontend.js	1.27 kB
build/checkout-blocks/order-summary-shipping-frontend.js	17 kB
build/checkout-blocks/order-summary-subtotal-frontend.js	274 B
build/checkout-blocks/order-summary-taxes-frontend.js	434 B
build/checkout-blocks/payment-frontend.js	8.28 kB
build/checkout-blocks/pickup-options-frontend.js	4.84 kB
build/checkout-blocks/shipping-address-frontend.js	1.17 kB
build/checkout-blocks/shipping-method-frontend.js	2.63 kB
build/checkout-blocks/shipping-methods-frontend.js	6.4 kB
build/checkout-blocks/terms-frontend.js	1.56 kB
build/checkout-blocks/totals-frontend.js	362 B
build/checkout-frontend.js	31.9 kB
build/checkout.js	46.6 kB
build/customer-account.js	3.18 kB
build/featured-category.js	15.1 kB
build/featured-product.js	15.3 kB
build/filter-wrapper-frontend.js	14.3 kB
build/filter-wrapper.js	2.4 kB
build/general-style-rtl.css	1.31 kB
build/general-style.css	1.31 kB
build/handpicked-products.js	8.04 kB
build/legacy-template.js	6.8 kB
build/mini-cart-component-frontend.js	30.6 kB
build/mini-cart-contents-block/cart-button-frontend.js	1.72 kB
build/mini-cart-contents-block/checkout-button-frontend.js	1.81 kB
build/mini-cart-contents-block/empty-cart-frontend.js	361 B
build/mini-cart-contents-block/filled-cart-frontend.js	267 B
build/mini-cart-contents-block/footer-frontend.js	3.81 kB
build/mini-cart-contents-block/items-frontend.js	237 B
build/mini-cart-contents-block/products-table-frontend.js	594 B
build/mini-cart-contents-block/shopping-button-frontend.js	527 B
build/mini-cart-contents-block/title-frontend.js	1.89 kB
build/mini-cart-contents-block/title-items-counter-frontend.js	1.59 kB
build/mini-cart-contents-block/title-label-frontend.js	1.52 kB
build/mini-cart-contents.js	18.1 kB
build/mini-cart-frontend.js	2.84 kB
build/mini-cart.js	5.92 kB
build/price-filter-wrapper-frontend.js	6.75 kB
build/price-filter.js	8.55 kB
build/price-format.js	1.19 kB
build/product-add-to-cart--product-button--product-image--product-price--product-rating--product-sale-bad--49d3ecb2.js	250 B
build/product-add-to-cart--product-button--product-image--product-rating--product-title.js	151 B
build/product-add-to-cart-frontend.js	6.51 kB
build/product-add-to-cart.js	8.84 kB
build/product-best-sellers.js	8.36 kB
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--5bce0384.js	955 B
build/product-button-frontend.js	2.65 kB
build/product-button.js	3.98 kB
build/product-categories.js	2.71 kB
build/product-category.js	9.37 kB
build/product-collection.js	12.3 kB
build/product-image-frontend.js	2.61 kB
build/product-image.js	4.14 kB
build/product-new.js	8.65 kB
build/product-on-sale.js	8.65 kB
build/product-price-frontend.js	204 B
build/product-price.js	1.68 kB
build/product-query.js	11.9 kB
build/product-rating-frontend.js	2.33 kB
build/product-rating.js	1.03 kB
build/product-results-count.js	1.66 kB
build/product-sale-badge-frontend.js	1.78 kB
build/product-sale-badge.js	666 B
build/product-search.js	2.63 kB
build/product-sku-frontend.js	1.83 kB
build/product-sku.js	535 B
build/product-stock-indicator-frontend.js	2.02 kB
build/product-stock-indicator.js	731 B
build/product-summary-frontend.js	2.24 kB
build/product-summary.js	1.01 kB
build/product-tag.js	9.01 kB
build/product-template.js	3.34 kB
build/product-title-frontend.js	2.21 kB
build/product-title.js	3.66 kB
build/product-top-rated.js	8.91 kB
build/products-by-attribute.js	9.75 kB
build/rating-filter-frontend.js	21.4 kB
build/rating-filter-wrapper-frontend.js	6.2 kB
build/rating-filter.js	6.9 kB
build/reviews-by-category.js	12.1 kB
build/reviews-by-product.js	13.3 kB
build/reviews-frontend.js	7.17 kB
build/single-product.js	11.1 kB
build/stock-filter-wrapper-frontend.js	2.98 kB
build/stock-filter.js	7.62 kB
build/store-notices.js	1.68 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-coupon-form--cart-blocks/order-summary--48e1e4bb-frontend.js	6.82 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-shipping--checkout-blocks/billing-addr--d9f38f9d-frontend.js	4.21 kB
build/vendors--attribute-filter-wrapper--stock-filter-wrapper-frontend.js	5.11 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--3c5fe802-frontend.js	5.26 kB
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js	3.58 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js	19.4 kB
build/vendors--checkout-blocks/pickup-options--checkout-blocks/shipping-methods-frontend.js	8.25 kB
build/vendors--checkout-blocks/shipping-method-frontend.js	12.5 kB
build/vendors--price-filter-wrapper-frontend.js	2.2 kB
build/vendors--product-add-to-cart-frontend.js	7.26 kB
build/vendors--rating-filter-wrapper-frontend.js	5.1 kB
build/wc-blocks-data.js	22.3 kB
build/wc-blocks-editor-style-rtl.css	6.21 kB
build/wc-blocks-editor-style.css	6.21 kB
build/wc-blocks-google-analytics.js	1.56 kB
build/wc-blocks-middleware.js	934 B
build/wc-blocks-registry.js	3.15 kB
build/wc-blocks-shared-context.js	1.1 kB
build/wc-blocks-shared-hocs.js	1.75 kB
build/wc-blocks-style-rtl.css	28 kB
build/wc-blocks-style.css	28 kB
build/wc-blocks-vendors-style-rtl.css	1.96 kB
build/wc-blocks-vendors-style.css	1.96 kB
build/wc-blocks-vendors.js	65.1 kB
build/wc-blocks.js	3.7 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/wc-shipping-method-pickup-location.js	30.4 kB

_{compressed-size-action}

[luisherranz]

I don't think the server-side rendering implementation is ready to be used in production.

[DAreRodz]

I don't think the server-side rendering implementation is ready to be used in production.

I removed all files related to directive processing during SSR-ing. The store, the runtime script registering, and the code including the CSN meta tag in <head> are the only remaining parts.

[luisherranz]

Thanks David! 🙂

[DAreRodz]

I think this is ready for review again. 🙂

[DAreRodz]

I almost forgot to replicate the changes @danielwrobert did to adjust JSON escaping for the Store script. 😄

Added in e0a3e8d.

[luisherranz]

LGTM! Thanks David 🎉

[luisherranz]

@gigitux could you please also take a look at it?

[luisherranz]

I almost forgot to replicate the changes @danielwrobert did to adjust JSON escaping for the Store script. 😄

Oh, @DAreRodz, would you mind doing that change in Gutenberg as well? Thanks!! 🙏

[DAreRodz]

@gigitux could you please also take a look at it?

Luigi, feel free to ping someone else if you feel they need to review these changes. 😊

[gigitux]

Is there a specific reason for this change?

[DAreRodz]

It's just that I changed the name to make it consistent with the format used in other WooCommerce scripts in the repository. Nothing important. 😄

Note that there's still a WooCommerce prefix in that file; the name of the output file has turned from woo-directives-runtime.js to wc-interactivity.js.

[DAreRodz]

I also removed the vendors chunk, so I saw it unnecessary to differentiate between runtime and vendors.

[gigitux]

LGTM! I'm just curious about a change, but let's 🚢 it!

[DAreRodz]

Thanks, folks, for the reviews. PR merged. 🚀