chore: update types and compat data

Author: jesperorb

package.json

@@ -26,9 +26,9 @@
 		"@commitlint/cli": "^19.2.1",
 		"@commitlint/config-conventional": "^19.1.0",
 		"@inlang/paraglide-js": "1.3.5",
-		"@mdn/browser-compat-data": "5.5.48",
-		"@melt-ui/pp": "^0.3.0",
-		"@melt-ui/svelte": "^0.76.3",
+		"@mdn/browser-compat-data": "5.6.3",
+		"@melt-ui/pp": "^0.3.2",
+		"@melt-ui/svelte": "^0.83.0",
 		"@playwright/test": "^1.42.1",
 		"@sveltejs/adapter-vercel": "5.2.0",
 		"@sveltejs/kit": "2.5.5",

pnpm-lock.yaml

@@ -17,11 +17,8 @@
     return value.next;
   }
 
-  const reset = () => value.set([275]) 
-
   const {
     elements: { root, range, thumbs },
-    states: { value }
   } = createSlider({
     defaultValue: defaultValue ? [defaultValue] : undefined,
     min,
@@ -41,13 +38,6 @@
   />
 </span>
 
-{#if defaultValue}
-  <Spacing />
-  <Button on:click={reset}>
-    Reset
-  </Button>
-{/if}
-
 <style>
   .slider {
     position: relative;
@@ -81,4 +71,4 @@
   .thumb:focus {
     outline: 2px solid var(--focus-color);
   }
-</style>
+</style>

src/lib/components/ui/Slider.svelte

@@ -1,10 +1,13 @@
 import { localeMatcher } from "$lib/format-options/common.options";
+import type { CreateOptions } from "$types/common";
 
-export const collatorFormatOptions = {
+export type CollatorOptions = CreateOptions<Intl.CollatorOptions>
+
+export const collatorFormatOptions: CollatorOptions = {
 	usage: ["sort", "search", undefined],
 	numeric: [true, false, undefined],
 	caseFirst: ["upper", "lower", "false", undefined],
 	sensitivity: ["base", "accent", "case", "variant", undefined],
 	ignorePunctuation: [true, false, undefined],
 	localeMatcher
-} as const;
+}

src/lib/format-options/collator.options.ts

@@ -1,7 +1,23 @@
-export const style = [undefined, "long", "short", "narrow"] as const;
-export const localeMatcher = [undefined, "best fit", "lookup"] as const;
-export const roundingPriority = ["auto", "morePrecision", "lessPrecision", undefined] as const;
-export const roundingIncrement = [
+import type { Tuple } from "$types/common";
+
+export const style: Tuple<Intl.RelativeTimeFormatOptions["style"]> = [
+	undefined,
+	"long",
+	"short",
+	"narrow"
+];
+export const localeMatcher: Tuple<Intl.CollatorOptions["localeMatcher"]> = [
+	undefined,
+	"best fit",
+	"lookup"
+];
+export const roundingPriority: Tuple<Intl.PluralRulesOptions["roundingPriority"]> = [
+	"auto",
+	"morePrecision",
+	"lessPrecision",
+	undefined
+];
+export const roundingIncrement: Tuple<Intl.PluralRulesOptions["roundingIncrement"]> = [
 	1,
 	2,
 	5,
@@ -18,8 +34,8 @@ export const roundingIncrement = [
 	2500,
 	5000,
 	undefined
-] as const;
-export const roundingMode = [
+];
+export const roundingMode: Tuple<Intl.PluralRulesOptions["roundingMode"]> = [
 	"ceil",
 	"floor",
 	"expand",
@@ -30,5 +46,9 @@ export const roundingMode = [
 	"halfTrunc",
 	"halfEven",
 	undefined
-] as const;
-export const trailingZeroDisplay = ["auto", "stripIfInteger", undefined] as const;
+];
+export const trailingZeroDisplay: Tuple<Intl.PluralRulesOptions["trailingZeroDisplay"]> = [
+	"auto",
+	"stripIfInteger",
+	undefined
+];

src/lib/format-options/common.options.ts

@@ -1,8 +1,11 @@
 import { calendars, numberingSystems } from "$lib/locale-data/calendars";
 import type { AllFormatOptionsKeys } from "$lib/format-options/types";
 import { style, localeMatcher } from "$lib/format-options/common.options";
+import type { CreateOptions, StringOrUndefinedTuple } from "$types/common";
 
-export const datetimeFormatOptions = {
+export type DateTimeFormatOptions = CreateOptions<Intl.DateTimeFormatOptions>;
+
+export const datetimeFormatOptions: DateTimeFormatOptions = {
 	dateStyle: ["full", "long", "medium", "short", undefined],
 	timeStyle: ["full", "long", "medium", "short", undefined],
 	year: ["numeric", "2-digit", undefined],
@@ -17,12 +20,20 @@ export const datetimeFormatOptions = {
 	hourCycle: ["h11", "h12", "h23", "h24", undefined],
 	dayPeriod: style,
 	fractionalSecondDigits: [1, 2, 3, undefined],
-	calendar: [...calendars, undefined],
-	numberingSystem: [...numberingSystems, undefined],
-	timeZoneName: ["long", "short", undefined],
+	calendar: [...calendars, undefined] as StringOrUndefinedTuple,
+	numberingSystem: [...numberingSystems, undefined] as StringOrUndefinedTuple,
+	timeZoneName: [
+		"long",
+		"short",
+		"shortOffset",
+		"longOffset",
+		"shortGeneric",
+		"longGeneric",
+		undefined
+	],
 	formatMatcher: ["best fit", "basic", undefined],
 	localeMatcher
-} as const;
+}
 
 export const getDateTimeFormatOptions = (
 	option: AllFormatOptionsKeys["DateTimeFormat"] | string,

src/lib/format-options/datetime-format.options.ts

@@ -1,9 +1,29 @@
 import { style, localeMatcher } from "$lib/format-options/common.options";
+import type { CreateOptions } from "$types/common";
 
-export const displayNamesOptions = {
+export type DateTimeFormatOptions = CreateOptions<Intl.DisplayNamesOptions>;
+
+const type: (Intl.DisplayNamesType | undefined)[] = [
+	"language",
+	"region",
+	"script",
+	"calendar",
+	"dateTimeField",
+	"currency",
+	undefined
+];
+
+export const displayNamesOptions: DateTimeFormatOptions = {
 	style,
-	type: ["language", "region", "script", "calendar", "dateTimeField", "currency", undefined],
+	type: type as [
+		Intl.DisplayNamesType,
+		Intl.DisplayNamesType,
+		Intl.DisplayNamesType,
+		Intl.DisplayNamesType,
+		Intl.DisplayNamesType,
+		Intl.DisplayNamesType
+	],
 	languageDisplay: ["dialect", "standard", undefined],
 	fallback: ["code", "none", undefined],
 	localeMatcher
-} as const;
+};

src/lib/format-options/display-names.options.ts

@@ -1,8 +1,11 @@
 import { defaultNumberRange } from "$utils/format-utils";
 import { style, localeMatcher } from "$lib/format-options/common.options";
+import type { CreateOptions, NumberOrUndefinedTuple } from "$types/common";
 
-export const durationFormatOptions = {
-	style,
+type DurationFormatOptions = CreateOptions<Intl.DurationFormatOptions>;
+
+export const durationFormatOptions: DurationFormatOptions = {
+	style: [...style, "digital"],
 	years: style,
 	months: style,
 	weeks: style,
@@ -13,9 +16,9 @@ export const durationFormatOptions = {
 	milliseconds: style,
 	microseconds: style,
 	nanoseconds: style,
-	fractionalDigits: [...defaultNumberRange, undefined],
+	fractionalDigits: [...defaultNumberRange, undefined] as NumberOrUndefinedTuple,
 	localeMatcher
-} as const;
+}
 
 export const durationValues: (keyof Intl.Duration)[] = [
 	"years",

src/lib/format-options/duration-format.options.ts

@@ -1,7 +1,10 @@
 import { style, localeMatcher } from "$lib/format-options/common.options";
+import type { CreateOptions } from "$types/common";
 
-export const listFormatOptions = {
+export type ListFormatOptions = CreateOptions<Intl.ListFormatOptions>;
+
+export const listFormatOptions: ListFormatOptions = {
 	type: [undefined, "conjunction", "disjunction", "unit"],
 	style,
 	localeMatcher
-} as const;
+}

src/lib/format-options/list-format.options.ts

@@ -9,6 +9,9 @@ import {
 	trailingZeroDisplay,
 	style
 } from "$lib/format-options/common.options";
+import type { CreateOptions } from "$types/common";
+
+export type NumberFormatOptions = CreateOptions<Intl.NumberFormatOptions>;
 
 export const numberFormatOptionsCommon = {
 	style: ["currency", "unit"],
@@ -24,17 +27,17 @@ export const numberFormatOptionsCommon = {
 	roundingPriority,
 	trailingZeroDisplay,
 	localeMatcher
-} as const;
+}
 
-export const numberFormatOptionsCurrency = {
+export const numberFormatOptionsCurrency: NumberFormatOptions = {
 	currencySign: ["standard", "accounting", undefined],
 	currencyDisplay: ["code", "symbol", "narrowSymbol", "name", undefined],
-	currency: Object.keys(currencies)
-} as const;
+	currency: Object.keys(currencies) as [string | undefined, string | undefined],
+}
 
-export const numberFormatOptionsUnit = {
-	unit: units,
+export const numberFormatOptionsUnit: NumberFormatOptions = {
+	unit: units as [string | undefined, string | undefined],
 	unitDisplay: style,
 	compactDisplay: ["short", "long", undefined],
 	notation: ["standard", "scientific", "engineering", "compact", undefined]
-} as const;
+}

src/lib/format-options/number-format.options.ts

@@ -6,17 +6,20 @@ import {
 	roundingPriority,
 	trailingZeroDisplay
 } from "$lib/format-options/common.options";
+import type { CreateOptions, NumberOrUndefinedTuple } from "$types/common";
 
-export const pluralRulesFormatOptions = {
+export type PluralRulesOptions = CreateOptions<Intl.PluralRulesOptions>;
+
+export const pluralRulesFormatOptions: PluralRulesOptions = {
 	type: ["cardinal", "ordinal", undefined],
-	minimumIntegerDigits: [...defaultNumberRange, undefined],
-	minimumFractionDigits: [...defaultNumberRange, undefined],
-	maximumFractionDigits: [...defaultNumberRange, undefined],
-	minimumSignificantDigits: [...defaultNumberRange, undefined],
-	maximumSignificantDigits: [...defaultNumberRange, undefined],
+	minimumIntegerDigits: [...defaultNumberRange, undefined] as NumberOrUndefinedTuple,
+	minimumFractionDigits: [...defaultNumberRange, undefined] as NumberOrUndefinedTuple,
+	maximumFractionDigits: [...defaultNumberRange, undefined] as NumberOrUndefinedTuple,
+	minimumSignificantDigits: [...defaultNumberRange, undefined] as NumberOrUndefinedTuple,
+	maximumSignificantDigits: [...defaultNumberRange, undefined] as NumberOrUndefinedTuple,
 	roundingIncrement,
 	roundingMode,
 	roundingPriority,
 	trailingZeroDisplay,
 	localeMatcher
-} as const;
+};

src/lib/format-options/plural-rules.options.ts

@@ -1,4 +1,9 @@
 import { localeMatcher, style } from "$lib/format-options/common.options";
+import type { CreateOptions } from "$types/common";
+
+export type RelativeTimeFormatOptions = CreateOptions<Intl.RelativeTimeFormatOptions> & {
+	unit: Intl.RelativeTimeFormatUnit[];
+}
 
 export const relativeTimeFormatUnits: Intl.RelativeTimeFormatUnit[] = [
 	"year",
@@ -19,9 +24,9 @@ export const relativeTimeFormatUnits: Intl.RelativeTimeFormatUnit[] = [
 	"seconds"
 ];
 
-export const relativeTimeFormatOptions = {
+export const relativeTimeFormatOptions: RelativeTimeFormatOptions = {
 	numeric: ["always", "auto", undefined],
 	style,
 	unit: relativeTimeFormatUnits,
 	localeMatcher
-} as const;
+}

src/lib/format-options/relative-time-format.options.ts

@@ -1,6 +1,9 @@
 import { localeMatcher } from "$lib/format-options/common.options";
+import type { CreateOptions } from "$types/common";
 
-export const segmenterOptions = {
+export type SegmenterOptions = CreateOptions<Intl.SegmenterOptions>;
+
+export const segmenterOptions: SegmenterOptions = {
 	granularity: ["word", "sentence", "grapheme", undefined],
 	localeMatcher
-} as const;
+}