-
Notifications
You must be signed in to change notification settings - Fork 219
Move FormattedMonetaryAmount
to the components package
#11230
Conversation
The release ZIP for this PR is accessible via:
Script Dependencies ReportThe
This comment was automatically generated by the TypeScript Errors Report
assets/js/base/components/index.ts
|
Size Change: -18.2 kB (-1%) Total Size: 1.54 MB
ℹ️ View Unchanged
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you, @opr, for working on this PR! The code looks good. There is only one issue with the last testing step:
- Repeat steps 5, 6, 7 but with the
All Products block
.
The All Products block
doesn't show up on the front-end, and the browser console shows the following error:
Uncaught SyntaxError: "undefined" is not valid JSON
at JSON.parse (<anonymous>)
at getProps (all-products-frontend.js?ver=94f5ae3d46aba92bfb95:5:8484)
at all-products-frontend.js?ver=94f5ae3d46aba92bfb95:1:11961
at NodeList.forEach (<anonymous>)
at i (all-products-frontend.js?ver=94f5ae3d46aba92bfb95:1:11937)
at all-products-frontend.js?ver=94f5ae3d46aba92bfb95:5:7951
at all-products-frontend.js?ver=94f5ae3d46aba92bfb95:5:8013
at all-products-frontend.js?ver=94f5ae3d46aba92bfb95:5:8367
at all-products-frontend.js?ver=94f5ae3d46aba92bfb95:5:8517
at all-products-frontend.js?ver=94f5ae3d46aba92bfb95:5:8521
I encountered the same problem with the released version of the Woo Blocks plugin. Therefore, I believe this error isn't tied to the modifications in this PR. Can you guide me on how to proceed with the final testing step?
3aba694
to
dd73a5f
Compare
import type { ReactElement, ReactNode } from 'react'; | ||
import type { Currency } from '@woocommerce/price-format'; | ||
|
||
/** | ||
* Internal dependencies | ||
*/ | ||
import './style.scss'; | ||
import FormattedMonetaryAmount from '../../../../components/formatted-monetary-amount'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
For my learning why we're not able to import this as below?
import { FormattedMonetaryAmount } from '@woocommerce/blocks-components';
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
That's because it causes a circular dependency, since this file is in the @woocommerce/blocks-checkout
package, loading from the @woocommerce/blocks-components
package will cause the packages/components/index.js
file to load, which in turn loads packages/components/checkbox-list
which in turn imports CheckboxControl
from packages/checkout/components
which in turn loads packages/checkout/components/totals/item/index.tsx
😁
Hope that's easy to understand, if not feel free to load the packages/checkout/components/totals/item/index.tsx
file and follow the dependency as if it were being loaded from the components package (packages/components/index.js
) and see where it leads you.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Gotcha! Thank you for detailed explanation. 🙂
dd73a5f
to
407f175
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The
All Products block
doesn't show up on the front-end, and the browser console shows the following error:
Uncaught SyntaxError: "undefined" is not valid JSON at JSON.parse (<anonymous>) at getProps (all-products-frontend.js?ver=94f5ae3d46aba92bfb95:5:8484) at all-products-frontend.js?ver=94f5ae3d46aba92bfb95:1:11961 at NodeList.forEach (<anonymous>) at i (all-products-frontend.js?ver=94f5ae3d46aba92bfb95:1:11937) at all-products-frontend.js?ver=94f5ae3d46aba92bfb95:5:7951 at all-products-frontend.js?ver=94f5ae3d46aba92bfb95:5:8013 at all-products-frontend.js?ver=94f5ae3d46aba92bfb95:5:8367 at all-products-frontend.js?ver=94f5ae3d46aba92bfb95:5:8517 at all-products-frontend.js?ver=94f5ae3d46aba92bfb95:5:8521
I encountered the same problem with the released version of the Woo Blocks plugin. Therefore, I believe this error isn't tied to the modifications in this PR. Can you guide me on how to proceed with the final testing step?
I think this bug was fixed yesterday in this PR: #11273. I was able to do the last testing step successfully! It looks good for me!
What
This PR is based on #11214 (update/checkbox-component)
Moves the
FormattedMonetaryAmount
to the components package and updates imports used across the project to reflect the new location:ProductSaleBadge
renderPackageRateOption
inShippingRatesControlPackage
TotalsFooterItem
PriceSlider
ProductPrice
checkout-pickup-options-block
checkout-shipping-method-block
checkout-shipping-methods-block
TotalsItem
(This is not imported from@woocommerce/blocks-components
but it does use a relative import because of circular dependecies)Why
As more developers integrate their extensions with WooCommerce Blocks, the case for reusing components grows. Rather than recreating components developers can access
wc.blocksComponents
and get the ones we need.Testing Instructions
Please consider any edge cases this change may have, and also other areas of the product this may impact.
Filter by Price
andProducts (Beta)
blocks to a page on your site.All Products block
.Screenshots or screencast
N/A
WooCommerce Visibility
Required:
Checklist
Required:
[type]
label or a[skip-changelog]
label.Conditional:
[skip-changelog]
label is not present).Changelog