chore(deps): replace google-libphonenumber with libphonenumber-js (#21)

Author: sondreorland

.github/dependabot.yml

@@ -0,0 +1,9 @@
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+    allow:
+      - dependency-name: "libphonenumber-js"
+    open-pull-requests-limit: 2

README.md

@@ -3,7 +3,7 @@
 [![Payload CMS](https://img.shields.io/badge/Payload%20CMS-v3-blue)](https://github.com/payloadcms/payload)
 [![NPM Version](https://img.shields.io/npm/v/payload-phone-number-plugin)](https://www.npmjs.com/package/payload-phone-number-plugin)
 
-This Payload CMS plugin uses [google-libphonenumber](https://github.com/ruimarinho/google-libphonenumber) to format and validate phone numbers.
+This Payload CMS plugin uses [libphonenumber-js](https://www.npmjs.com/package/libphonenumber-js) to format and validate phone numbers.
 
 ![Preview](./src/assets/preview.png)
 

package.json

@@ -119,8 +119,7 @@
   "registry": "https://registry.npmjs.org/",
   "dependencies": {
     "@payloadcms/translations": "^3.0.0",
-    "@types/google-libphonenumber": "^7.4.30",
     "clsx": "^2.1.1",
-    "google-libphonenumber": "^3.2.43"
+    "libphonenumber-js": "^1.12.33"
   }
 }

pnpm-lock.yaml

@@ -1,4 +1,4 @@
-import type { RegionCode } from 'google-libphonenumber';
+import type { CountryCode } from 'libphonenumber-js';
 
 export type PhoneNumberPluginOptions = {};
 
@@ -40,4 +40,4 @@ export type Defaults = {
     countryPrefixDisplayFormat: CountryPrefixDisplayFormat;
 };
 
-export type { RegionCode };
+export type RegionCode = CountryCode;

src/types.ts

@@ -1,19 +1,17 @@
-import libphonenumber from 'google-libphonenumber';
-const { PhoneNumberUtil, PhoneNumberFormat, AsYouTypeFormatter } = libphonenumber;
+import { AsYouType, parsePhoneNumber } from 'libphonenumber-js/max';
 
 import type { PhoneNumberValue, RegionCode } from '../../types.js';
 
-const phoneUtil = PhoneNumberUtil.getInstance();
-
 export function extractE164FromValue(value: PhoneNumberValue) {
     return typeof value === 'object' && value !== null ? value.e164 : value || '';
 }
 
 export function parseE164ToNationalFormat(e164PhoneNumber: string): { regionCode: RegionCode | null; national: string } | null {
     try {
-        const number = phoneUtil.parse(e164PhoneNumber);
-        const regionCode = phoneUtil.getRegionCodeForNumber(number) || null;
-        const national = phoneUtil.format(number, PhoneNumberFormat.NATIONAL);
+        const phoneNumber = parsePhoneNumber(e164PhoneNumber);
+
+        const regionCode = phoneNumber.country || null;
+        const national = phoneNumber.formatNational();
 
         return { regionCode, national };
     } catch {
@@ -22,20 +20,18 @@ export function parseE164ToNationalFormat(e164PhoneNumber: string): { regionCode
 }
 
 export function formatToNationalAsYouType(input: string, regionCode: RegionCode) {
-    const formatter = new AsYouTypeFormatter(regionCode);
-    let nationalFormat = '';
-    for (const char of input.replace(/\D/g, '')) {
-        nationalFormat = formatter.inputDigit(char);
-    }
+    const formatter = new AsYouType(regionCode);
+    const nationalFormat = formatter.input(input.replace(/\D/g, ''));
 
     return nationalFormat;
 }
 
 export function convertToE164(nationalPhoneNumber: string, regionCode: RegionCode): { e164: string; detectedRegion: RegionCode | null } | null {
     try {
-        const number = phoneUtil.parseAndKeepRawInput(nationalPhoneNumber, regionCode);
-        const e164 = phoneUtil.format(number, PhoneNumberFormat.E164);
-        const detectedRegion = phoneUtil.getRegionCodeForNumber(number) || null;
+        const phoneNumber = parsePhoneNumber(nationalPhoneNumber, regionCode);
+
+        const e164 = phoneNumber.number;
+        const detectedRegion = phoneNumber.country || null;
 
         return { e164, detectedRegion };
     } catch {
@@ -52,9 +48,10 @@ export function extractDigitsWithPlus(input: string) {
 export function parseInternationalNumber(input: string): { regionCode: RegionCode | null; national: string } | null {
     try {
         const cleanInput = extractDigitsWithPlus(input);
-        const number = phoneUtil.parse(cleanInput);
-        const regionCode = phoneUtil.getRegionCodeForNumber(number) || null;
-        const national = phoneUtil.format(number, PhoneNumberFormat.NATIONAL);
+        const phoneNumber = parsePhoneNumber(cleanInput);
+
+        const regionCode = phoneNumber.country || null;
+        const national = phoneNumber.formatNational();
 
         return { regionCode, national };
     } catch {

src/ui/Field/helpers.ts

@@ -1,31 +1,25 @@
 import type { PhoneNumber } from '../types.js';
 
-import libphonenumber from 'google-libphonenumber';
-const { PhoneNumberUtil, PhoneNumberFormat } = libphonenumber;
+import { parsePhoneNumber } from 'libphonenumber-js/max';
 
 import { countries } from './countries.js';
 
-let phoneUtil: libphonenumber.PhoneNumberUtil | null = null;
-
 export function getPhoneNumberDetails(e164PhoneNumber: string): PhoneNumber | null {
-    if (!phoneUtil) {
-        phoneUtil = PhoneNumberUtil.getInstance();
-    }
-
     try {
-        const number = phoneUtil.parse(e164PhoneNumber);
-        const regionCode = phoneUtil.getRegionCodeForNumber(number);
+        const phoneNumber = parsePhoneNumber(e164PhoneNumber);
+
+        const regionCode = phoneNumber.country;
 
         if (!regionCode) {
             return null;
         }
 
-        const national = phoneUtil.format(number, PhoneNumberFormat.NATIONAL);
-        const international = phoneUtil.format(number, PhoneNumberFormat.INTERNATIONAL);
-        const e164Formatted = phoneUtil.format(number, PhoneNumberFormat.E164);
+        const national = phoneNumber.formatNational();
+        const international = phoneNumber.formatInternational();
+        const e164Formatted = phoneNumber.number;
 
         const country = countries.find((c) => c.regionCode === regionCode);
-        const callingCode = country?.callingCode || `+${number.getCountryCode()}`;
+        const callingCode = country?.callingCode || `+${phoneNumber.countryCallingCode}`;
 
         return {
             e164: e164Formatted,

src/utilities/getPhoneNumberDetails.ts

@@ -1,18 +1,11 @@
 import type { TextField, Validate } from 'payload';
 
-import libphonenumber from 'google-libphonenumber';
-const { PhoneNumberUtil } = libphonenumber;
+import { parsePhoneNumber } from 'libphonenumber-js/max';
 
 import type { RegionCode } from '../types.js';
 
-let phoneUtil: libphonenumber.PhoneNumberUtil | null = null;
-
 export const createPhoneNumberValidator = (allowedCountries?: RegionCode[]): Validate<string, unknown, unknown, TextField> => {
     return (value, { req, required }) => {
-        if (!phoneUtil) {
-            phoneUtil = PhoneNumberUtil.getInstance();
-        }
-
         if (!value) {
             if (required) {
                 return req.t('validation:required');
@@ -31,15 +24,15 @@ export const createPhoneNumberValidator = (allowedCountries?: RegionCode[]): Val
         }
 
         try {
-            const number = phoneUtil.parse(phoneNumberValue);
-            if (!phoneUtil.isValidNumber(number)) {
+            const phoneNumber = parsePhoneNumber(phoneNumberValue);
+            if (!phoneNumber.isValid()) {
                 // @ts-expect-error - translations are not typed in plugins yet
                 return req.t('payload-phone-number-plugin:invalidPhoneNumber');
             }
 
             if (allowedCountries && allowedCountries.length > 0) {
-                const regionCode = phoneUtil.getRegionCodeForNumber(number);
-                if (regionCode && !allowedCountries.includes(regionCode as RegionCode)) {
+                const regionCode = phoneNumber.country;
+                if (regionCode && !allowedCountries.includes(regionCode)) {
                     // @ts-expect-error - translations are not typed in plugins yet
                     return req.t('payload-phone-number-plugin:phoneNumberCountryNotAllowed');
                 }