Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Migrate link-item to typescript #7080

Merged
merged 5 commits into from
Aug 29, 2023
Merged

Conversation

naman03malhotra
Copy link
Contributor

@naman03malhotra naman03malhotra commented Aug 28, 2023

Fixes #7052

Changes proposed in this Pull Request

  • Migrated link-item.js to typescript.
  • Updated target to es6 in tsconfig to allow spread operator.

Testing instructions

  • Test if link-item is working as expected in settings page in both desktop and mobile
  • Please verify it visually as I have moved CSS in JS to CSS file.

  • Run npm run changelog to add a changelog file, choose patch to leave it empty if the change is not significant. You can add multiple changelog files in one PR by running this command a few times.
  • Covered with tests (or have a good reason not to test in description ☝️)
  • Tested on mobile (or does not apply)

Post merge

@botwoo
Copy link
Collaborator

botwoo commented Aug 28, 2023

Test the build

Option 1. Jetpack Beta

  • Install and activate Jetpack Beta.
  • Use this build by searching for PR number 7080 or branch name imp/7052-migrate-to-ts in your-test.site/wp-admin/admin.php?page=jetpack-beta&plugin=woocommerce-payments

Option 2. Jurassic Ninja - available for logged-in A12s

🚀 Launch a JN site with this branch 🚀

ℹ️ Install this Tampermonkey script to get more options.


Build info:

  • Latest commit: cc9d607
  • Build time: 2023-08-29 18:35:37 UTC

Note: the build is updated when a new commit is pushed to this PR.

@github-actions
Copy link
Contributor

github-actions bot commented Aug 28, 2023

Size Change: -14.6 kB (-1%)

Total Size: 1.4 MB

Filename Size Change
release/woocommerce-payments/dist/index.js 276 kB -6.98 kB (-2%)
release/woocommerce-payments/dist/multi-currency-switcher-block.js 59.5 kB -1.13 kB (-2%)
release/woocommerce-payments/dist/multi-currency.js 54.2 kB -1.35 kB (-2%)
release/woocommerce-payments/dist/order.js 39.9 kB -1.41 kB (-3%)
release/woocommerce-payments/dist/payment-gateways.js 37.7 kB -1.29 kB (-3%)
release/woocommerce-payments/dist/settings-rtl.css 8.91 kB +26 B (0%)
release/woocommerce-payments/dist/settings.css 8.91 kB +27 B (0%)
release/woocommerce-payments/dist/settings.js 231 kB -2.34 kB (-1%)
release/woocommerce-payments/dist/upe-split-blocks-checkout.js 41 kB -67 B (0%)
release/woocommerce-payments/dist/woopay.js 71.6 kB -106 B (0%)
ℹ️ View Unchanged
Filename Size
release/woocommerce-payments/assets/css/admin.css 1.03 kB
release/woocommerce-payments/assets/css/success.css 158 B
release/woocommerce-payments/dist/blocks-checkout-rtl.css 1.51 kB
release/woocommerce-payments/dist/blocks-checkout.css 1.51 kB
release/woocommerce-payments/dist/blocks-checkout.js 73.5 kB
release/woocommerce-payments/dist/checkout-rtl.css 440 B
release/woocommerce-payments/dist/checkout.css 441 B
release/woocommerce-payments/dist/checkout.js 28.5 kB
release/woocommerce-payments/dist/index-rtl.css 35.6 kB
release/woocommerce-payments/dist/index.css 35.6 kB
release/woocommerce-payments/dist/multi-currency-analytics.js 1.05 kB
release/woocommerce-payments/dist/multi-currency-rtl.css 2.87 kB
release/woocommerce-payments/dist/multi-currency.css 2.87 kB
release/woocommerce-payments/dist/order-rtl.css 741 B
release/woocommerce-payments/dist/order.css 743 B
release/woocommerce-payments/dist/payment-gateways-rtl.css 686 B
release/woocommerce-payments/dist/payment-gateways.css 688 B
release/woocommerce-payments/dist/payment-request-rtl.css 146 B
release/woocommerce-payments/dist/payment-request.css 146 B
release/woocommerce-payments/dist/payment-request.js 11.6 kB
release/woocommerce-payments/dist/product-details.js 789 B
release/woocommerce-payments/dist/subscription-edit-page.js 669 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal-rtl.css 519 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal.css 519 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal.js 20.2 kB
release/woocommerce-payments/dist/subscription-product-onboarding-toast.js 693 B
release/woocommerce-payments/dist/subscriptions-empty-state-rtl.css 117 B
release/woocommerce-payments/dist/subscriptions-empty-state.css 117 B
release/woocommerce-payments/dist/subscriptions-empty-state.js 19.3 kB
release/woocommerce-payments/dist/tos-rtl.css 230 B
release/woocommerce-payments/dist/tos.css 231 B
release/woocommerce-payments/dist/tos.js 21.8 kB
release/woocommerce-payments/dist/upe_checkout-rtl.css 440 B
release/woocommerce-payments/dist/upe_checkout.css 441 B
release/woocommerce-payments/dist/upe_checkout.js 34 kB
release/woocommerce-payments/dist/upe_split_checkout-rtl.css 440 B
release/woocommerce-payments/dist/upe_split_checkout.css 441 B
release/woocommerce-payments/dist/upe_split_checkout.js 34.6 kB
release/woocommerce-payments/dist/upe_with_deferred_intent_creation_checkout.js 36.4 kB
release/woocommerce-payments/dist/upe-blocks-checkout-rtl.css 1.51 kB
release/woocommerce-payments/dist/upe-blocks-checkout.css 1.51 kB
release/woocommerce-payments/dist/upe-blocks-checkout.js 39.5 kB
release/woocommerce-payments/dist/upe-split-blocks-checkout-rtl.css 1.51 kB
release/woocommerce-payments/dist/upe-split-blocks-checkout.css 1.51 kB
release/woocommerce-payments/dist/woopay-express-button-rtl.css 146 B
release/woocommerce-payments/dist/woopay-express-button.css 146 B
release/woocommerce-payments/dist/woopay-express-button.js 50.5 kB
release/woocommerce-payments/dist/woopay-rtl.css 3.85 kB
release/woocommerce-payments/dist/woopay.css 3.85 kB
release/woocommerce-payments/includes/subscriptions/assets/css/plugin-page.css 633 B
release/woocommerce-payments/includes/subscriptions/assets/js/plugin-page.js 720 B
release/woocommerce-payments/vendor/automattic/jetpack-assets/build/i18n-loader.js 2.43 kB
release/woocommerce-payments/vendor/automattic/jetpack-assets/src/js/i18n-loader.js 1.01 kB
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/tracks-ajax.js 522 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/tracks-callables.js 581 B
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/babel.config.js 160 B
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.css 2.32 kB
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.js 13.8 kB
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.rtl.css 2.32 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/about.css 1.2 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin-order-statuses.css 403 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin.css 3.56 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/checkout.css 299 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/modal.css 742 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/view-subscription.css 572 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/wcs-upgrade.css 411 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/admin-pointers.js 544 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/admin.js 9.55 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/jstz.js 6.8 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/jstz.min.js 3.83 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/meta-boxes-coupon.js 544 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/meta-boxes-subscription.js 2.38 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/moment.js 22.1 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/moment.min.js 11.6 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/payment-method-restrictions.js 1.29 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/wcs-meta-boxes-order.js 502 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/payment-methods.js 355 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/single-product.js 429 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/view-subscription.js 1.38 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/wcs-cart.js 781 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/modal.js 1.1 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/wcs-upgrade.js 1.27 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/build/index.css 392 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/build/index.js 3.06 kB

compressed-size-action

@naman03malhotra naman03malhotra marked this pull request as ready for review August 28, 2023 16:56
@naman03malhotra naman03malhotra requested review from ismaeldcom and a team August 28, 2023 16:56
@naman03malhotra naman03malhotra self-assigned this Aug 28, 2023
@naman03malhotra
Copy link
Contributor Author

@ismaeldcom I've updated the target in tsconfig to ES6, can you please check it once.

@ismaeldcom
Copy link
Contributor

Hey @naman03malhotra! I wonder what's the use case for the tsconfig target update. I see Updated target to es6 in tsconfig to allow spread operator on the proposed changes, but we don't actually need to modify the target for that.

The target option in TS config stand for which target of JavaScript will be emitted, but doesn't affect which TS/JS features we can use while coding.

Although, with our current browser support it's probably okay to start targeting ES6 instead of ES5 🙂

@naman03malhotra
Copy link
Contributor Author

I wonder what's the use case for the tsconfig target update. I see Updated target to es6 in tsconfig to allow spread operator on the proposed changes, but we don't actually need to modify the target for that.

With the target as ES5, ts throws an error regarding the usage of ES6 goodies. There are other ways to solve it, but I found this the recommended way.

@naman03malhotra
Copy link
Contributor Author

This what you get when using spread operator with ES5 as target.

Type 'Set<any>' can only be iterated through when using the '--downlevelIteration' flag or with a '--target' of 'es2015' or higher.ts

I think it should be safe to update the target to ES6 with the present browser support.

Copy link
Contributor

@ismaeldcom ismaeldcom left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh! I thought it was due to the use of the spread operator, but it's due to the iteration of Set. Yep, updating the target to ES6 is probably the easiest way to do it.

I just checked our current supported browsers, and can confirm that it's safe to use ES6 from now on 🙂

@naman03malhotra
Copy link
Contributor Author

@ismaeldcom can you please take a look at #7081 which is an extension of this PR :)

Copy link
Contributor

@zmaglica zmaglica left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! I tested the changes on my local env. and everything is working.

@naman03malhotra naman03malhotra merged commit 605e329 into develop Aug 29, 2023
@naman03malhotra naman03malhotra deleted the imp/7052-migrate-to-ts branch August 29, 2023 21:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Migrate link-item.js and woopay-item.js to typescript.
4 participants