Add date-fns 3 support

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## Next
 - Add MMM format to allow short month names (@peterbell215)
+- Add date-fns 3 support
 
 ## 2.12.0 - 2024 Apr 9
 - Disable autocomplete for date input (@gianarb)

package.json

@@ -23,7 +23,7 @@
 		"@typescript-eslint/eslint-plugin": "^7.10.0",
 		"@typescript-eslint/parser": "^7.10.0",
 		"@vitest/coverage-v8": "^1.6.0",
-		"date-fns": "^2.30.0",
+		"date-fns": "^3.6.0",
 		"eslint": "^8.57.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.39.0",

src/lib/locale.ts

@@ -55,13 +55,16 @@ export function getInnerLocale(locale: Locale): InnerLocale {
 	return innerLocale
 }
 
+type Month = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11
+type Day = 0 | 1 | 2 | 3 | 4 | 5 | 6
+type LocaleWidth = 'short' | 'wide' | 'abbreviated' | 'narrow' | 'any'
 type DateFnsLocale = {
 	options?: {
 		weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6
 	}
 	localize?: {
-		month: (n: number, options?: { width?: string }) => string
-		day: (i: number, options?: { width?: string }) => string
+		month: (n: Month, options?: { width?: LocaleWidth }) => string
+		day: (i: Day, options?: { width?: LocaleWidth }) => string
 	}
 }
 /** Create a Locale from a date-fns locale */
@@ -73,12 +76,12 @@ export function localeFromDateFnsLocale(dateFnsLocale: DateFnsLocale): InnerLoca
 	if (dateFnsLocale.localize) {
 		for (let i = 0; i < 7; i++) {
 			// widths: narrow, short, abbreviated, wide, any
-			locale.weekdays[i] = dateFnsLocale.localize.day(i, { width: 'short' })
+			locale.weekdays[i] = dateFnsLocale.localize.day(i as Day, { width: 'short' })
 		}
 
 		for (let i = 0; i < 12; i++) {
-			locale.months[i] = dateFnsLocale.localize.month(i, { width: 'wide' })
-			locale.shortMonths[i] = dateFnsLocale.localize.month(i, { width: 'abbreviated' })
+			locale.months[i] = dateFnsLocale.localize.month(i as Month, { width: 'wide' })
+			locale.shortMonths[i] = dateFnsLocale.localize.month(i as Month, { width: 'abbreviated' })
 		}
 	}
 	return locale

src/routes/DateInput.svelte

@@ -3,12 +3,7 @@
 	import Prop from './prop.svelte'
 	import Split from './split.svelte'
 	import { localeFromDateFnsLocale } from '$lib'
-
-	// had to import it this way to avoid errors
-	// in `npm run build:site` or `npm run check`:
-	import hy from 'date-fns/locale/hy/index'
-	import de from 'date-fns/locale/de/index'
-	import nb from 'date-fns/locale/nb/index'
+	import { hy, de, nb } from 'date-fns/locale'
 
 	let id: string
 	let placeholder: string

src/routes/DatePicker.svelte

@@ -3,12 +3,7 @@
 	import { localeFromDateFnsLocale } from '$lib/locale.js'
 	import Prop from './prop.svelte'
 	import Split from './split.svelte'
-
-	// had to import it this way to avoid errors
-	// in `npm run build:site` or `npm run check`:
-	import hy from 'date-fns/locale/hy/index'
-	import de from 'date-fns/locale/de/index'
-	import nb from 'date-fns/locale/nb/index'
+	import { hy, de, nb } from 'date-fns/locale'
 
 	let value: Date
 	let min: Date