Create renderFrontend utils function #954
Conversation
Aljullu
added
status: needs review
type: refactor
| const containers = document.querySelectorAll( | ||
| '.wp-block-woocommerce-product-categories' | ||
| ); | ||
| const selector = '.wp-block-woocommerce-product-categories'; |
There was a problem hiding this comment.
Declaring this variable here is unnecessary, can just reference the selector directly in the renderFrontend call.
|
|
||
| if ( containers.length ) { | ||
| // Use Array.forEach for IE11 compatibility | ||
| Array.prototype.forEach.call( containers, ( el ) => { |
There was a problem hiding this comment.
I'm curious, why not just containers.forEach which is functionally equivalent because containers is an array? I see the comment about "for IE11" compatibility but won't babel transpile handle that?
There was a problem hiding this comment.
containers is a NodeList and IE11 doesn't support the forEach method:
https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach#Browser_Compatibility
I also thought Babel and the polyfills would take care of it, but it looks like they don't (just tested with IE11): #, #.
There was a problem hiding this comment.
containers is a NodeList
Ahh right! Thanks for verifying with polyfills too 👍
|
Thanks for the review @nerrad! This is ready for another look. |
Aljullu
added
the
skip-changelog
This PR creates a
renderFrontendutils function so we avoid duplicating code infrontend.jsfiles for each new component.How to test the changes in this Pull Request:
Changelog