Open
Conversation
Move the 582-line countryCodeData module (~8.7KB) out of the ui-common chunk and into its own async chunk (phone-country-data) loaded on demand when PhoneInput renders. - Create countryCodeDataLoader.ts with dynamic import and sync cache - Update phoneUtils.ts to use lazy getters with US fallback - Update useFormattedPhoneNumber.ts to use lazy getters - Update PhoneInput to load data before rendering via useCountryCodeData hook - Exclude countryCodeData from ui-common cache group in rspack config - Add bundlewatch entry for new phone-country-data chunk (10KB budget) - Add loadCountryCodeData() to test files that need country data
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
@clerk/agent-toolkit
@clerk/astro
@clerk/backend
@clerk/chrome-extension
@clerk/clerk-js
@clerk/dev-cli
@clerk/expo
@clerk/expo-passkeys
@clerk/express
@clerk/fastify
@clerk/hono
@clerk/localizations
@clerk/nextjs
@clerk/nuxt
@clerk/react
@clerk/react-router
@clerk/shared
@clerk/tanstack-react-start
@clerk/testing
@clerk/ui
@clerk/upgrade
@clerk/vue
commit: |
Contributor
📝 WalkthroughWalkthroughThis change implements lazy-loading of country code data by introducing a new loader module that asynchronously imports and caches country code maps. The bundler configuration is updated to create a separate chunk for the country code data. Components and utilities are refactored to use getter functions instead of direct static imports. Test files are updated to preload the country code data before execution to ensure data availability during testing. 🚥 Pre-merge checks | ✅ 2 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/ui/src/utils/phoneUtils.ts (1)
27-46:⚠️ Potential issue | 🟠 MajorAsync country data load can return incorrect results on first call.
These functions kick offloadCountryCodeData()but immediately read from the maps. On a cold call, the maps are still empty and the logic falls back to US, which mis-parses non‑US numbers. This is a functional regression unless every caller preloads the data.Please either make these APIs async and await the load, or fail fast when data isn’t loaded to force callers to preload (instead of silently returning the US fallback).
Also applies to: 103-146
🧹 Nitpick comments (1)
packages/ui/src/elements/PhoneInput/countryCodeDataLoader.ts (1)
46-48: Missing explicit return type annotation.Per coding guidelines, functions should have explicit return types. The
getSubAreaCodeSetsfunction lacks a return type annotation unlike the other getter functions in this module.Suggested fix
-export function getSubAreaCodeSets() { +export function getSubAreaCodeSets(): { us: ReadonlySet<string>; ca: ReadonlySet<string> } | undefined { return subAreaCodeSets; }As per coding guidelines: "Always define explicit return types for functions, especially public APIs".
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Split the 12KB
countryCodeData.tsmodule into its own async chunk, loaded only when PhoneInput is rendered. This removes static data (~245 countries) from theui-commonchunk, reducing its size and improving initial load performance for applications that don't use phone functionality.Changes
countryCodeDataLoader.tswith a dynamic import and sync cache patternphoneUtils.ts,useFormattedPhoneNumber.ts, andPhoneInputto use lazy getters with US fallbackbeforeAllVerification
pnpm buildpasses;phone-country-datachunk created (~8.7KB raw, 3.8KB gzip, within 10KB budget)pnpm testpasses (1548 tests across 109 files)ui-commonChecklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change
Summary by CodeRabbit
Release Notes