Merge pull request #216 from gyurielf/feat-update-from-outside

feat: `updateValue` method.
gyurielf · Jun 27, 2024 · d49acb4 · d49acb4
2 parents f2b7d1a + da325a3
commit d49acb4
Show file tree

Hide file tree

Showing 11 changed files with 2,026 additions and 1,726 deletions.
diff --git a/.changeset/light-pianos-ring.md b/.changeset/light-pianos-ring.md
@@ -0,0 +1,5 @@
+---
+'svelte-tel-input': minor
+---
+
+feat: introduce `updateValue` method which allows you to update value from outside.
diff --git a/apps/site/package.json b/apps/site/package.json
@@ -33,38 +33,39 @@
 		"sync": "svelte-kit sync",
 		"test": "playwright test",
 		"ts": "tsc --noEmit",
-		"prettier:check": "prettier --check --plugin-search-dir=. .",
-		"prettier:fix": "prettier --write --plugin-search-dir=. .",
+		"prettier:check": "prettier --check .",
+		"prettier:fix": "prettier --write .",
 		"svelte-check": "svelte-kit sync && svelte-check --ignore 'dist,build,coverage,.svelte-kit,package' --fail-on-warnings"
 	},
 	"dependencies": {
 		"svelte-tel-input": "workspace:*",
-		"svelte": "^4.2.0"
+		"svelte": "^4.2.18"
 	},
 	"devDependencies": {
-		"@macfja/svelte-persistent-store": "^2.4.0",
-		"@playwright/test": "^1.37.1",
-		"@sveltejs/adapter-static": "^2.0.3",
-		"@sveltejs/kit": "^1.23.0",
-		"@types/micromatch": "^4.0.2",
-		"@typescript-eslint/eslint-plugin": "^6.5.0",
-		"@typescript-eslint/parser": "^6.5.0",
-		"autoprefixer": "^10.4.15",
-		"cssnano": "^6.0.1",
-		"dotenv": "^16.3.1",
-		"eslint": "^8.48.0",
-		"eslint-config-prettier": "^9.0.0",
-		"eslint-plugin-svelte": "^2.33.0",
-		"postcss": "^8.4.28",
-		"prettier": "^3.0.2",
-		"prettier-plugin-svelte": "^3.0.3",
+		"@macfja/svelte-persistent-store": "^2.4.1",
+		"@playwright/test": "^1.45.0",
+		"@sveltejs/adapter-static": "^3.0.2",
+		"@sveltejs/kit": "^2.5.17",
+		"@sveltejs/vite-plugin-svelte": "^3.1.1",
+		"@types/micromatch": "^4.0.8",
+		"@typescript-eslint/eslint-plugin": "^7.14.1",
+		"@typescript-eslint/parser": "^7.14.1",
+		"autoprefixer": "^10.4.19",
+		"cssnano": "^7.0.3",
+		"dotenv": "^16.4.5",
+		"eslint": "^8.57.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-svelte": "^2.41.0",
+		"postcss": "^8.4.38",
+		"prettier": "^3.3.2",
+		"prettier-plugin-svelte": "^3.2.5",
 		"schema-dts": "^1.1.2",
-		"svelte-check": "^3.5.1",
-		"svelte2tsx": "^0.6.21",
-		"tailwindcss": "^3.3.3",
-		"tslib": "^2.6.2",
-		"typescript": "^5.2.2",
-		"vite": "^4.4.9"
+		"svelte-check": "^3.8.4",
+		"svelte2tsx": "^0.7.13",
+		"tailwindcss": "^3.4.4",
+		"tslib": "^2.6.3",
+		"typescript": "^5.5.2",
+		"vite": "^5.3.1"
 	},
 	"type": "module",
 	"license": "MIT"

diff --git a/apps/site/svelte.config.js b/apps/site/svelte.config.js
@@ -1,5 +1,5 @@
 import staticAdapter from '@sveltejs/adapter-static';
-import { vitePreprocess } from '@sveltejs/kit/vite';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
 /** @type {import('@sveltejs/kit').Config} */
 export default {

diff --git a/package.json b/package.json
@@ -46,18 +46,18 @@
 		"test": "pnpm test -r --filter=./packages/*"
 	},
 	"devDependencies": {
-		"@changesets/cli": "^2.26.2",
-		"@changesets/get-github-info": "^0.5.2",
-		"@changesets/types": "^5.2.1",
-		"@typescript-eslint/eslint-plugin": "^6.5.0",
-		"dotenv": "^16.3.1",
-		"eslint": "^8.48.0",
-		"eslint-plugin-svelte": "^2.33.0",
-		"eslint-plugin-unicorn": "^48.0.1",
-		"eslint-config-prettier": "^9.0.0",
-		"husky": "^8.0.3",
-		"prettier": "^3.0.2",
-		"prettier-plugin-svelte": "^3.0.3"
+		"@changesets/cli": "^2.27.6",
+		"@changesets/get-github-info": "^0.6.0",
+		"@changesets/types": "^6.0.0",
+		"@typescript-eslint/eslint-plugin": "^7.14.1",
+		"dotenv": "^16.4.5",
+		"eslint": "^8.57.0",
+		"eslint-plugin-svelte": "^2.41.0",
+		"eslint-plugin-unicorn": "^54.0.0",
+		"eslint-config-prettier": "^9.1.0",
+		"husky": "^9.0.11",
+		"prettier": "^3.3.2",
+		"prettier-plugin-svelte": "^3.2.5"
 	},
 	"type": "module",
 	"license": "MIT",

diff --git a/packages/svelte-tel-input/package.json b/packages/svelte-tel-input/package.json
@@ -35,8 +35,8 @@
 		"lint:fix": "pnpm run eslint:fix && pnpm run prettier:fix",
 		"package:watch": "svelte-kit sync && svelte-package --watch",
 		"package": "svelte-kit sync && pnpm run convert && svelte-package && pnpm run check:publint",
-		"prettier:check": "prettier --check --plugin-search-dir=. .",
-		"prettier:fix": "prettier --write --plugin-search-dir=. .",
+		"prettier:check": "prettier --check .",
+		"prettier:fix": "prettier --write .",
 		"svelte-check": "svelte-kit sync && svelte-check --ignore 'dist,build,coverage,.svelte-kit,package' --fail-on-warnings",
 		"sync": "svelte-kit sync",
 		"test": "vitest",
@@ -46,38 +46,39 @@
 		"svelte": "^3.58.0 || ^4.0.0"
 	},
 	"dependencies": {
-		"libphonenumber-js": "^1.10.43"
+		"libphonenumber-js": "1.10.43"
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-auto": "2.1.0",
-		"@sveltejs/kit": "^1.23.0",
-		"@sveltejs/package": "^2.2.2",
-		"@testing-library/svelte": "^4.0.3",
-		"@testing-library/user-event": "^14.4.3",
-		"@types/micromatch": "^4.0.2",
-		"@typescript-eslint/eslint-plugin": "^6.5.0",
-		"@typescript-eslint/parser": "^6.5.0",
-		"autoprefixer": "^10.4.15",
-		"cssnano": "^6.0.1",
-		"dotenv": "^16.3.1",
-		"eslint": "^8.48.0",
-		"eslint-config-prettier": "^9.0.0",
-		"eslint-plugin-import": "^2.28.1",
-		"eslint-plugin-svelte": "^2.33.0",
-		"jsdom": "^22.1.0",
-		"micromatch": "^4.0.5",
-		"postcss": "^8.4.28",
-		"prettier": "^3.0.2",
-		"prettier-plugin-svelte": "^3.0.3",
-		"publint": "^0.2.2",
-		"svelte": "^4.2.0",
-		"svelte-check": "^3.5.1",
-		"svelte2tsx": "^0.6.21",
-		"tailwindcss": "^3.3.3",
-		"tslib": "^2.6.2",
-		"typescript": "^5.2.2",
-		"vite": "^4.4.9",
-		"vitest": "^0.34.3"
+		"@sveltejs/adapter-auto": "3.2.2",
+		"@sveltejs/kit": "^2.5.17",
+		"@sveltejs/package": "^2.3.2",
+		"@sveltejs/vite-plugin-svelte": "^3.1.1",
+		"@testing-library/svelte": "^5.1.0",
+		"@testing-library/user-event": "^14.5.2",
+		"@types/micromatch": "^4.0.8",
+		"@typescript-eslint/eslint-plugin": "^7.14.1",
+		"@typescript-eslint/parser": "^7.14.1",
+		"autoprefixer": "^10.4.19",
+		"cssnano": "^7.0.3",
+		"dotenv": "^16.4.5",
+		"eslint": "^8.57.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-import": "^2.29.1",
+		"eslint-plugin-svelte": "^2.41.0",
+		"jsdom": "^24.1.0",
+		"micromatch": "^4.0.7",
+		"postcss": "^8.4.38",
+		"prettier": "^3.3.2",
+		"prettier-plugin-svelte": "^3.2.5",
+		"publint": "^0.2.8",
+		"svelte": "^4.2.18",
+		"svelte-check": "^3.8.4",
+		"svelte2tsx": "^0.7.13",
+		"tailwindcss": "^3.4.4",
+		"tslib": "^2.6.3",
+		"typescript": "^5.5.2",
+		"vite": "^5.3.1",
+		"vitest": "^1.6.0"
 	},
 	"type": "module",
 	"license": "MIT",

diff --git a/packages/svelte-tel-input/scripts/convertExamples.js b/packages/svelte-tel-input/scripts/convertExamples.js
@@ -2,6 +2,6 @@ import fs from 'fs';
 const sourceFilePath = 'node_modules/libphonenumber-js/examples.mobile.json.js'; // Direct path to the file in node_modules
 const targetFilePath = './src/lib/assets/examplePhoneNumbers.ts'; // Change to desired path
 const content = fs.readFileSync(sourceFilePath, 'utf-8');
-const extendedContent = `import type { Examples } from 'libphonenumber-js'; \n${content} as const satisfies Examples;`;
+const extendedContent = `import type { Examples } from 'libphonenumber-js'; \n${content} as Examples;`;
 fs.writeFileSync(targetFilePath, extendedContent, 'utf-8');
 console.log(`Duplicated ${sourceFilePath} to ${targetFilePath}`);
diff --git a/packages/svelte-tel-input/src/lib/assets/examplePhoneNumbers.ts b/packages/svelte-tel-input/src/lib/assets/examplePhoneNumbers.ts
@@ -2,4 +2,4 @@ import type { Examples } from 'libphonenumber-js';
 // This file is a workaround for a bug in web browsers' "native"
 // ES6 importing system which is uncapable of importing "*.json" files.
 // https://github.com/catamphetamine/libphonenumber-js/issues/239
-export default {"AC":"40123","AD":"312345","AE":"501234567","AF":"701234567","AG":"2684641234","AI":"2642351234","AL":"672123456","AM":"77123456","AO":"923123456","AR":"91123456789","AS":"6847331234","AT":"664123456","AU":"412345678","AW":"5601234","AX":"412345678","AZ":"401234567","BA":"61123456","BB":"2462501234","BD":"1812345678","BE":"470123456","BF":"70123456","BG":"43012345","BH":"36001234","BI":"79561234","BJ":"90011234","BL":"690001234","BM":"4413701234","BN":"7123456","BO":"71234567","BQ":"3181234","BR":"11961234567","BS":"2423591234","BT":"17123456","BW":"71123456","BY":"294911911","BZ":"6221234","CA":"5062345678","CC":"412345678","CD":"991234567","CF":"70012345","CG":"061234567","CH":"781234567","CI":"0123456789","CK":"71234","CL":"221234567","CM":"671234567","CN":"13123456789","CO":"3211234567","CR":"83123456","CU":"51234567","CV":"9911234","CW":"95181234","CX":"412345678","CY":"96123456","CZ":"601123456","DE":"15123456789","DJ":"77831001","DK":"32123456","DM":"7672251234","DO":"8092345678","DZ":"551234567","EC":"991234567","EE":"51234567","EG":"1001234567","EH":"650123456","ER":"7123456","ES":"612345678","ET":"911234567","FI":"412345678","FJ":"7012345","FK":"51234","FM":"3501234","FO":"211234","FR":"612345678","GA":"06031234","GB":"7400123456","GD":"4734031234","GE":"555123456","GF":"694201234","GG":"7781123456","GH":"231234567","GI":"57123456","GL":"221234","GM":"3012345","GN":"601123456","GP":"690001234","GQ":"222123456","GR":"6912345678","GT":"51234567","GU":"6713001234","GW":"955012345","GY":"6091234","HK":"51234567","HN":"91234567","HR":"921234567","HT":"34101234","HU":"201234567","ID":"812345678","IE":"850123456","IL":"502345678","IM":"7924123456","IN":"8123456789","IO":"3801234","IQ":"7912345678","IR":"9123456789","IS":"6111234","IT":"3123456789","JE":"7797712345","JM":"8762101234","JO":"790123456","JP":"9012345678","KE":"712123456","KG":"700123456","KH":"91234567","KI":"72001234","KM":"3212345","KN":"8697652917","KP":"1921234567","KR":"1020000000","KW":"50012345","KY":"3453231234","KZ":"7710009998","LA":"2023123456","LB":"71123456","LC":"7582845678","LI":"660234567","LK":"712345678","LR":"770123456","LS":"50123456","LT":"61234567","LU":"628123456","LV":"21234567","LY":"912345678","MA":"650123456","MC":"612345678","MD":"62112345","ME":"67622901","MF":"690001234","MG":"321234567","MH":"2351234","MK":"72345678","ML":"65012345","MM":"92123456","MN":"88123456","MO":"66123456","MP":"6702345678","MQ":"696201234","MR":"22123456","MS":"6644923456","MT":"96961234","MU":"52512345","MV":"7712345","MW":"991234567","MX":"12221234567","MY":"123456789","MZ":"821234567","NA":"811234567","NC":"751234","NE":"93123456","NF":"381234","NG":"8021234567","NI":"81234567","NL":"612345678","NO":"40612345","NP":"9841234567","NR":"5551234","NU":"8884012","NZ":"211234567","OM":"92123456","PA":"61234567","PE":"912345678","PF":"87123456","PG":"70123456","PH":"9051234567","PK":"3012345678","PL":"512345678","PM":"551234","PR":"7872345678","PS":"599123456","PT":"912345678","PW":"6201234","PY":"961456789","QA":"33123456","RE":"692123456","RO":"712034567","RS":"601234567","RU":"9123456789","RW":"720123456","SA":"512345678","SB":"7421234","SC":"2510123","SD":"911231234","SE":"701234567","SG":"81234567","SH":"51234","SI":"31234567","SJ":"41234567","SK":"912123456","SL":"25123456","SM":"66661212","SN":"701234567","SO":"71123456","SR":"7412345","SS":"977123456","ST":"9812345","SV":"70123456","SX":"7215205678","SY":"944567890","SZ":"76123456","TA":"8999","TC":"6492311234","TD":"63012345","TG":"90112345","TH":"812345678","TJ":"917123456","TK":"7290","TL":"77212345","TM":"66123456","TN":"20123456","TO":"7715123","TR":"5012345678","TT":"8682911234","TV":"901234","TW":"912345678","TZ":"621234567","UA":"501234567","UG":"712345678","US":"2015550123","UY":"94231234","UZ":"912345678","VA":"3123456789","VC":"7844301234","VE":"4121234567","VG":"2843001234","VI":"3406421234","VN":"912345678","VU":"5912345","WF":"821234","WS":"7212345","XK":"43201234","YE":"712345678","YT":"639012345","ZA":"711234567","ZM":"955123456","ZW":"712345678"} as const satisfies Examples;
+export default {"AC":"40123","AD":"312345","AE":"501234567","AF":"701234567","AG":"2684641234","AI":"2642351234","AL":"672123456","AM":"77123456","AO":"923123456","AR":"91123456789","AS":"6847331234","AT":"664123456","AU":"412345678","AW":"5601234","AX":"412345678","AZ":"401234567","BA":"61123456","BB":"2462501234","BD":"1812345678","BE":"470123456","BF":"70123456","BG":"43012345","BH":"36001234","BI":"79561234","BJ":"90011234","BL":"690001234","BM":"4413701234","BN":"7123456","BO":"71234567","BQ":"3181234","BR":"11961234567","BS":"2423591234","BT":"17123456","BW":"71123456","BY":"294911911","BZ":"6221234","CA":"5062345678","CC":"412345678","CD":"991234567","CF":"70012345","CG":"061234567","CH":"781234567","CI":"0123456789","CK":"71234","CL":"221234567","CM":"671234567","CN":"13123456789","CO":"3211234567","CR":"83123456","CU":"51234567","CV":"9911234","CW":"95181234","CX":"412345678","CY":"96123456","CZ":"601123456","DE":"15123456789","DJ":"77831001","DK":"32123456","DM":"7672251234","DO":"8092345678","DZ":"551234567","EC":"991234567","EE":"51234567","EG":"1001234567","EH":"650123456","ER":"7123456","ES":"612345678","ET":"911234567","FI":"412345678","FJ":"7012345","FK":"51234","FM":"3501234","FO":"211234","FR":"612345678","GA":"06031234","GB":"7400123456","GD":"4734031234","GE":"555123456","GF":"694201234","GG":"7781123456","GH":"231234567","GI":"57123456","GL":"221234","GM":"3012345","GN":"601123456","GP":"690001234","GQ":"222123456","GR":"6912345678","GT":"51234567","GU":"6713001234","GW":"955012345","GY":"6091234","HK":"51234567","HN":"91234567","HR":"921234567","HT":"34101234","HU":"201234567","ID":"812345678","IE":"850123456","IL":"502345678","IM":"7924123456","IN":"8123456789","IO":"3801234","IQ":"7912345678","IR":"9123456789","IS":"6111234","IT":"3123456789","JE":"7797712345","JM":"8762101234","JO":"790123456","JP":"9012345678","KE":"712123456","KG":"700123456","KH":"91234567","KI":"72001234","KM":"3212345","KN":"8697652917","KP":"1921234567","KR":"1020000000","KW":"50012345","KY":"3453231234","KZ":"7710009998","LA":"2023123456","LB":"71123456","LC":"7582845678","LI":"660234567","LK":"712345678","LR":"770123456","LS":"50123456","LT":"61234567","LU":"628123456","LV":"21234567","LY":"912345678","MA":"650123456","MC":"612345678","MD":"62112345","ME":"67622901","MF":"690001234","MG":"321234567","MH":"2351234","MK":"72345678","ML":"65012345","MM":"92123456","MN":"88123456","MO":"66123456","MP":"6702345678","MQ":"696201234","MR":"22123456","MS":"6644923456","MT":"96961234","MU":"52512345","MV":"7712345","MW":"991234567","MX":"12221234567","MY":"123456789","MZ":"821234567","NA":"811234567","NC":"751234","NE":"93123456","NF":"381234","NG":"8021234567","NI":"81234567","NL":"612345678","NO":"40612345","NP":"9841234567","NR":"5551234","NU":"8884012","NZ":"211234567","OM":"92123456","PA":"61234567","PE":"912345678","PF":"87123456","PG":"70123456","PH":"9051234567","PK":"3012345678","PL":"512345678","PM":"551234","PR":"7872345678","PS":"599123456","PT":"912345678","PW":"6201234","PY":"961456789","QA":"33123456","RE":"692123456","RO":"712034567","RS":"601234567","RU":"9123456789","RW":"720123456","SA":"512345678","SB":"7421234","SC":"2510123","SD":"911231234","SE":"701234567","SG":"81234567","SH":"51234","SI":"31234567","SJ":"41234567","SK":"912123456","SL":"25123456","SM":"66661212","SN":"701234567","SO":"71123456","SR":"7412345","SS":"977123456","ST":"9812345","SV":"70123456","SX":"7215205678","SY":"944567890","SZ":"76123456","TA":"8999","TC":"6492311234","TD":"63012345","TG":"90112345","TH":"812345678","TJ":"917123456","TK":"7290","TL":"77212345","TM":"66123456","TN":"20123456","TO":"7715123","TR":"5012345678","TT":"8682911234","TV":"901234","TW":"912345678","TZ":"621234567","UA":"501234567","UG":"712345678","US":"2015550123","UY":"94231234","UZ":"912345678","VA":"3123456789","VC":"7844301234","VE":"4121234567","VG":"2843001234","VI":"3406421234","VN":"912345678","VU":"5912345","WF":"821234","WS":"7212345","XK":"43201234","YE":"712345678","YT":"639012345","ZA":"711234567","ZM":"955123456","ZW":"712345678"} as Examples;
diff --git a/packages/svelte-tel-input/src/lib/components/input/TelInput.svelte b/packages/svelte-tel-input/src/lib/components/input/TelInput.svelte
@@ -80,9 +80,10 @@
 	};
 
 	const handleParsePhoneNumber = (
-		input: string | null,
+		rawInput: string | null,
 		currCountry: CountryCode | null = null
 	) => {
+		const input = rawInput as E164Number;
 		if (input !== null) {
 			const numberHasCountry = getCountryForPartialE164Number(input);
 
@@ -157,12 +158,13 @@
 	$: $countryChangeWatch = country;
 
 	// Generate placeholder based on the autoPlaceholder option
-	$: getPlaceholder = combinedOptions.autoPlaceholder && country
-		? generatePlaceholder(country, {
-				format: combinedOptions.format,
-				spaces: combinedOptions.spaces
-		  })
-		: placeholder;
+	$: getPlaceholder =
+		combinedOptions.autoPlaceholder && country
+			? generatePlaceholder(country, {
+					format: combinedOptions.format,
+					spaces: combinedOptions.spaces
+				})
+			: placeholder;
 
 	// Handle reset value only
 	$: if (value === null && inputValue !== null && detailedValue !== null) {
@@ -171,6 +173,19 @@
 		dispatch('updateDetailedValue', detailedValue);
 	}
 
+	export const updateValue = (
+		newValue: string | E164Number | null,
+		newCountry: CountryCode | null
+	) => {
+		const castedValue = newValue as E164Number;
+		if (castedValue) {
+			handleParsePhoneNumber(
+				castedValue,
+				getCountryForPartialE164Number(castedValue) || newCountry
+			);
+		}
+	};
+
 	onMount(() => {
 		if (value) {
 			handleParsePhoneNumber(value, getCountryForPartialE164Number(value) || country);

diff --git a/packages/svelte-tel-input/src/lib/types/index.d.ts b/packages/svelte-tel-input/src/lib/types/index.d.ts
@@ -39,11 +39,11 @@ export interface DetailedValue {
 	isValid: boolean;
 	phoneNumber: string | null;
 	countryCallingCode: CountryCallingCode | null;
-	formattedNumber: string | null;
-	formatOriginal: string | null;
-	nationalNumber: string | null;
-	formatInternational: string | null;
-	formatNational: string | null;
+	formattedNumber: E164Number | null;
+	formatOriginal: E164Number | null;
+	nationalNumber: E164Number | null;
+	formatInternational: E164Number | null;
+	formatNational: E164Number | null;
 	uri: string | null;
 	e164: E164Number | null;
 	error?: string;

diff --git a/packages/svelte-tel-input/svelte.config.js b/packages/svelte-tel-input/svelte.config.js
@@ -1,5 +1,5 @@
 import autoAdapter from '@sveltejs/adapter-auto';
-import { vitePreprocess } from '@sveltejs/kit/vite';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
 /** @type {import('@sveltejs/kit').Config} */
 export default {