From 8eabf0f71df51e5f11909966984153a796f4c20a Mon Sep 17 00:00:00 2001
From: Maxwell Barvian <max@clerk.dev>
Date: Tue, 21 Jan 2025 10:03:17 -0800
Subject: [PATCH] Fix hydration errors caused by mismatched locales

Fixes e.g. #108
---
 .../[...framework]/_demos/Continuous.tsx      |  1 +
 .../pages/[...framework]/_demos/Isolate.tsx   |  1 +
 .../pages/[...framework]/_demos/Styling.tsx   |  1 +
 .../pages/[...framework]/_demos/Suffix.tsx    |  1 +
 .../[...framework]/_demos/TabularNums.tsx     |  1 +
 .../pages/[...framework]/_demos/Timings.tsx   |  1 +
 .../src/pages/[...framework]/_demos/Trend.tsx |  1 +
 .../examples/_Activity/react/Component.tsx    | 25 ++++++++++++++++---
 .../_Activity/svelte/Component.svelte         |  7 +++---
 .../examples/_Activity/vue/Component.vue      |  8 +++---
 .../examples/_ColoredTrends/Example.tsx       |  1 +
 .../examples/_Group/react/Component.tsx       |  2 ++
 .../examples/_Group/svelte/Component.svelte   |  8 +++++-
 .../examples/_Group/vue/Component.vue         |  8 +++++-
 .../examples/_Input/react/Component.tsx       |  1 +
 .../examples/_Input/svelte/Component.svelte   |  1 +
 .../examples/_Input/vue/Component.vue         |  1 +
 .../examples/_Slider/react/Component.tsx      |  1 +
 .../examples/_Slider/svelte/Component.svelte  |  1 +
 .../examples/_Slider/vue/Component.vue        |  1 +
 20 files changed, 60 insertions(+), 12 deletions(-)

diff --git a/site/src/pages/[...framework]/_demos/Continuous.tsx b/site/src/pages/[...framework]/_demos/Continuous.tsx
index 092e2bd2..18db33b8 100644
--- a/site/src/pages/[...framework]/_demos/Continuous.tsx
+++ b/site/src/pages/[...framework]/_demos/Continuous.tsx
@@ -26,6 +26,7 @@ export default function DemoHOC({
 		>
 			<div className="~text-3xl/4xl flex items-center gap-4">
 				<NumberFlow
+					locales="en-US"
 					plugins={useContinuous ? [continuous] : undefined}
 					style={{ '--number-flow-char-height': '0.85em' }}
 					value={value}
diff --git a/site/src/pages/[...framework]/_demos/Isolate.tsx b/site/src/pages/[...framework]/_demos/Isolate.tsx
index b0311e49..fc109865 100644
--- a/site/src/pages/[...framework]/_demos/Isolate.tsx
+++ b/site/src/pages/[...framework]/_demos/Isolate.tsx
@@ -19,6 +19,7 @@ export default function DemoHOC({ ...rest }: Omit<DemoProps, 'children' | 'code'
 			<div className="~text-3xl/4xl flex items-center gap-4">
 				{increased && <div className="bg-faint ~w-20/40 h-[1em] rounded-sm" />}
 				<NumberFlow
+					locales="en-US"
 					isolate={isolate}
 					style={{ '--number-flow-char-height': '0.85em' }}
 					value={increased ? 1.2423 : 0.4175}
diff --git a/site/src/pages/[...framework]/_demos/Styling.tsx b/site/src/pages/[...framework]/_demos/Styling.tsx
index 69a385c9..5a354556 100644
--- a/site/src/pages/[...framework]/_demos/Styling.tsx
+++ b/site/src/pages/[...framework]/_demos/Styling.tsx
@@ -14,6 +14,7 @@ export default function DemoHOC({
 	return (
 		<Demo {...rest} code={children} onClick={cycleValue}>
 			<NumberFlow
+				locales="en-US"
 				value={value}
 				format={{ style: 'currency', currency: 'USD', trailingZeroDisplay: 'stripIfInteger' }}
 				suffix="/mo"
diff --git a/site/src/pages/[...framework]/_demos/Suffix.tsx b/site/src/pages/[...framework]/_demos/Suffix.tsx
index bb96e253..9b581c31 100644
--- a/site/src/pages/[...framework]/_demos/Suffix.tsx
+++ b/site/src/pages/[...framework]/_demos/Suffix.tsx
@@ -14,6 +14,7 @@ export default function DemoHOC({
 	return (
 		<Demo {...rest} code={children} onClick={cycleValue}>
 			<NumberFlow
+				locales="en-US"
 				value={value}
 				format={{ style: 'currency', currency: 'USD', trailingZeroDisplay: 'stripIfInteger' }}
 				suffix="/mo"
diff --git a/site/src/pages/[...framework]/_demos/TabularNums.tsx b/site/src/pages/[...framework]/_demos/TabularNums.tsx
index 2af75e99..8e99e3c8 100644
--- a/site/src/pages/[...framework]/_demos/TabularNums.tsx
+++ b/site/src/pages/[...framework]/_demos/TabularNums.tsx
@@ -18,6 +18,7 @@ export default function DemoHOC({ ...rest }: Omit<DemoProps, 'children' | 'code'
 		>
 			<div className="~text-3xl/4xl flex items-center gap-4">
 				<NumberFlow
+					locales="en-US"
 					style={{
 						fontVariantNumeric: tabularNums ? 'tabular-nums' : undefined,
 						'--number-flow-char-height': '0.85em'
diff --git a/site/src/pages/[...framework]/_demos/Timings.tsx b/site/src/pages/[...framework]/_demos/Timings.tsx
index e650c264..9096228c 100644
--- a/site/src/pages/[...framework]/_demos/Timings.tsx
+++ b/site/src/pages/[...framework]/_demos/Timings.tsx
@@ -22,6 +22,7 @@ export default function DemoHOC({
 	return (
 		<Demo {...rest} code={children} onClick={cycleValue}>
 			<NumberFlow
+				locales="en-US"
 				value={value}
 				transformTiming={bouncySpring}
 				opacityTiming={opacityTiming}
diff --git a/site/src/pages/[...framework]/_demos/Trend.tsx b/site/src/pages/[...framework]/_demos/Trend.tsx
index 8fba2f1e..7ba37321 100644
--- a/site/src/pages/[...framework]/_demos/Trend.tsx
+++ b/site/src/pages/[...framework]/_demos/Trend.tsx
@@ -52,6 +52,7 @@ export default function DemoHOC({ ...rest }: Omit<DemoProps, 'children' | 'code'
 			onClick={cycleValue}
 		>
 			<NumberFlow
+				locales="en-US"
 				trend={trend}
 				value={value}
 				className="~text-3xl/4xl text-primary font-semibold"
diff --git a/site/src/pages/[...framework]/examples/_Activity/react/Component.tsx b/site/src/pages/[...framework]/examples/_Activity/react/Component.tsx
index 54d55db2..915f609a 100644
--- a/site/src/pages/[...framework]/examples/_Activity/react/Component.tsx
+++ b/site/src/pages/[...framework]/examples/_Activity/react/Component.tsx
@@ -45,7 +45,13 @@ export default function Activity({
 		>
 			<div className="flex flex-1 items-center gap-1.5">
 				<ChartNoAxesColumn absoluteStrokeWidth className="~size-4/5" />
-				<NumberFlow willChange plugins={[continuous]} value={views} format={format} />
+				<NumberFlow
+					willChange
+					plugins={[continuous]}
+					value={views}
+					locales="en-US"
+					format={format}
+				/>
 			</div>
 			<div className="flex-1">
 				<button
@@ -61,7 +67,13 @@ export default function Activity({
 							className="~size-4/5 group-active:spring-duration-[25] spring-bounce-50 spring-duration-300 transition-transform group-active:scale-[85%]"
 						/>
 					</div>
-					<NumberFlow willChange plugins={[continuous]} value={reposts} format={format} />
+					<NumberFlow
+						willChange
+						plugins={[continuous]}
+						value={reposts}
+						locales="en-US"
+						format={format}
+					/>
 				</button>
 			</div>
 			<div className="flex-1">
@@ -81,7 +93,13 @@ export default function Activity({
 							)}
 						/>
 					</div>
-					<NumberFlow willChange plugins={[continuous]} value={likes} format={format} />
+					<NumberFlow
+						willChange
+						plugins={[continuous]}
+						value={likes}
+						locales="en-US"
+						format={format}
+					/>
 				</button>
 			</div>
 			<div className="min-[30rem]:flex-1 max-[24rem]:hidden flex shrink-0 items-center gap-1.5">
@@ -106,6 +124,7 @@ export default function Activity({
 						willChange
 						plugins={[continuous]}
 						value={bookmarks}
+						locales="en-US"
 						format={format}
 					/>
 				</button>
diff --git a/site/src/pages/[...framework]/examples/_Activity/svelte/Component.svelte b/site/src/pages/[...framework]/examples/_Activity/svelte/Component.svelte
index 564a4f49..29aff9c2 100644
--- a/site/src/pages/[...framework]/examples/_Activity/svelte/Component.svelte
+++ b/site/src/pages/[...framework]/examples/_Activity/svelte/Component.svelte
@@ -45,7 +45,7 @@
 >
 	<div class="flex flex-1 items-center gap-1.5">
 		<ChartNoAxesColumn absoluteStrokeWidth class="~size-4/5" />
-		<NumberFlow willChange plugins={[continuous]} value={views} {format} />
+		<NumberFlow willChange plugins={[continuous]} value={views} locales="en-US" {format} />
 	</div>
 	<div class="flex-1">
 		<button
@@ -61,7 +61,7 @@
 					class="~size-4/5 group-active:spring-duration-[25] spring-bounce-50 spring-duration-300 transition-transform group-active:scale-[85%]"
 				/>
 			</div>
-			<NumberFlow willChange plugins={[continuous]} value={reposts} {format} />
+			<NumberFlow willChange plugins={[continuous]} value={reposts} locales="en-US" {format} />
 		</button>
 	</div>
 	<div class="flex-1">
@@ -81,7 +81,7 @@
 					)}
 				/>
 			</div>
-			<NumberFlow willChange plugins={[continuous]} value={likes} {format} />
+			<NumberFlow willChange plugins={[continuous]} value={likes} locales="en-US" {format} />
 		</button>
 	</div>
 	<div class="min-[30rem]:flex-1 max-[24rem]:hidden flex shrink-0 items-center gap-1.5">
@@ -106,6 +106,7 @@
 				willChange
 				plugins={[continuous]}
 				value={bookmarks}
+				locales="en-US"
 				{format}
 			/>
 		</button>
diff --git a/site/src/pages/[...framework]/examples/_Activity/vue/Component.vue b/site/src/pages/[...framework]/examples/_Activity/vue/Component.vue
index 31326a1d..515972bc 100644
--- a/site/src/pages/[...framework]/examples/_Activity/vue/Component.vue
+++ b/site/src/pages/[...framework]/examples/_Activity/vue/Component.vue
@@ -29,7 +29,7 @@ const emit = defineEmits<{
 	<div class="flex w-full select-none items-center text-zinc-600 dark:text-zinc-300">
 		<div class="flex flex-1 items-center gap-1.5">
 			<ChartNoAxesColumn absoluteStrokeWidth class="~size-4/5" />
-			<NumberFlow willChange :plugins="[continuous]" :value="views" :format />
+			<NumberFlow willChange :plugins="[continuous]" :value="views" locales="en-US" :format />
 		</div>
 		<div class="flex-1">
 			<button
@@ -45,7 +45,7 @@ const emit = defineEmits<{
 						class="~size-4/5 group-active:spring-duration-[25] spring-bounce-50 spring-duration-300 transition-transform group-active:scale-[85%]"
 					/>
 				</div>
-				<NumberFlow willChange :plugins="[continuous]" :value="reposts" :format />
+				<NumberFlow willChange :plugins="[continuous]" :value="reposts" locales="en-US" :format />
 			</button>
 		</div>
 		<div class="flex-1">
@@ -65,7 +65,7 @@ const emit = defineEmits<{
 						]"
 					/>
 				</div>
-				<NumberFlow willChange :plugins="[continuous]" :value="likes" :format />
+				<NumberFlow willChange :plugins="[continuous]" :value="likes" locales="en-US" :format />
 			</button>
 		</div>
 		<div class="flex shrink-0 min-[30rem]:flex-1 items-center gap-1.5 max-[24rem]:hidden">
@@ -85,7 +85,7 @@ const emit = defineEmits<{
 						]"
 					/>
 				</div>
-				<NumberFlow class="max-[30rem]:hidden" willChange :plugins="[continuous]" :value="bookmarks" :format />
+				<NumberFlow class="max-[30rem]:hidden" willChange :plugins="[continuous]" :value="bookmarks" locales="en-US" :format />
 			</button>
 		</div>
 		<Share absoluteStrokeWidth class="~size-4/5 shrink-0" />
diff --git a/site/src/pages/[...framework]/examples/_ColoredTrends/Example.tsx b/site/src/pages/[...framework]/examples/_ColoredTrends/Example.tsx
index 6c3d52bb..a18a820f 100644
--- a/site/src/pages/[...framework]/examples/_ColoredTrends/Example.tsx
+++ b/site/src/pages/[...framework]/examples/_ColoredTrends/Example.tsx
@@ -30,6 +30,7 @@ export default function PriceWithColoredTrend({ value }: Props) {
 		<NumberFlow
 			ref={ref}
 			value={value}
+			locales="en-US"
 			format={{
 				style: 'currency',
 				currency: 'USD'
diff --git a/site/src/pages/[...framework]/examples/_Group/react/Component.tsx b/site/src/pages/[...framework]/examples/_Group/react/Component.tsx
index a6ab9af9..c6bb8731 100644
--- a/site/src/pages/[...framework]/examples/_Group/react/Component.tsx
+++ b/site/src/pages/[...framework]/examples/_Group/react/Component.tsx
@@ -15,11 +15,13 @@ export default function PriceWithDiff({ value, diff }: Props) {
 			>
 				<NumberFlow
 					value={value}
+					locales="en-US"
 					format={{ style: 'currency', currency: 'USD' }}
 					className="~text-2xl/4xl"
 				/>
 				<NumberFlow
 					value={diff}
+					locales="en-US"
 					format={{ style: 'percent', maximumFractionDigits: 2, signDisplay: 'always' }}
 					className={clsx(
 						'~text-lg/2xl transition-colors duration-300',
diff --git a/site/src/pages/[...framework]/examples/_Group/svelte/Component.svelte b/site/src/pages/[...framework]/examples/_Group/svelte/Component.svelte
index 563c52e7..1b5d490a 100644
--- a/site/src/pages/[...framework]/examples/_Group/svelte/Component.svelte
+++ b/site/src/pages/[...framework]/examples/_Group/svelte/Component.svelte
@@ -13,9 +13,15 @@
 
 <NumberFlowGroup>
 	<div style="--number-flow-char-height: 0.85em" class="flex items-center gap-4 font-semibold">
-		<NumberFlow {value} format={{ style: 'currency', currency: 'USD' }} class="~text-2xl/4xl" />
+		<NumberFlow
+			{value}
+			locales="en-US"
+			format={{ style: 'currency', currency: 'USD' }}
+			class="~text-2xl/4xl"
+		/>
 		<NumberFlow
 			value={diff}
+			locales="en-US"
 			format={{ style: 'percent', maximumFractionDigits: 2, signDisplay: 'always' }}
 			class={clsx(
 				'~text-lg/2xl transition-colors duration-300',
diff --git a/site/src/pages/[...framework]/examples/_Group/vue/Component.vue b/site/src/pages/[...framework]/examples/_Group/vue/Component.vue
index 430c8008..b84ce708 100644
--- a/site/src/pages/[...framework]/examples/_Group/vue/Component.vue
+++ b/site/src/pages/[...framework]/examples/_Group/vue/Component.vue
@@ -9,9 +9,15 @@ const { value, diff } = defineProps<{
 <template>
 	<NumberFlowGroup>
 		<div style="--number-flow-char-height: 0.85em" class="flex items-center gap-4 font-semibold">
-			<NumberFlow :value :format="{ style: 'currency', currency: 'USD' }" class="~text-2xl/4xl" />
+			<NumberFlow
+				:value
+				locales="en-US"
+				:format="{ style: 'currency', currency: 'USD' }"
+				class="~text-2xl/4xl"
+			/>
 			<NumberFlow
 				:value="diff"
+				locales="en-US"
 				:format="{ style: 'percent', maximumFractionDigits: 2, signDisplay: 'always' }"
 				:class="[
 					'~text-lg/2xl transition-colors duration-300',
diff --git a/site/src/pages/[...framework]/examples/_Input/react/Component.tsx b/site/src/pages/[...framework]/examples/_Input/react/Component.tsx
index 159e6966..b4a9706c 100644
--- a/site/src/pages/[...framework]/examples/_Input/react/Component.tsx
+++ b/site/src/pages/[...framework]/examples/_Input/react/Component.tsx
@@ -72,6 +72,7 @@ export default function Input({ value = 0, min = -Infinity, max = Infinity, onCh
 				/>
 				<NumberFlow
 					value={value}
+					locales="en-US"
 					format={{ useGrouping: false }}
 					aria-hidden="true"
 					animated={animated}
diff --git a/site/src/pages/[...framework]/examples/_Input/svelte/Component.svelte b/site/src/pages/[...framework]/examples/_Input/svelte/Component.svelte
index 9393c359..e7df4110 100644
--- a/site/src/pages/[...framework]/examples/_Input/svelte/Component.svelte
+++ b/site/src/pages/[...framework]/examples/_Input/svelte/Component.svelte
@@ -74,6 +74,7 @@
 		/>
 		<NumberFlow
 			{value}
+			locales="en-US"
 			format={{ useGrouping: false }}
 			aria-hidden="true"
 			{animated}
diff --git a/site/src/pages/[...framework]/examples/_Input/vue/Component.vue b/site/src/pages/[...framework]/examples/_Input/vue/Component.vue
index a91e5bce..c7dd7b21 100644
--- a/site/src/pages/[...framework]/examples/_Input/vue/Component.vue
+++ b/site/src/pages/[...framework]/examples/_Input/vue/Component.vue
@@ -77,6 +77,7 @@ function handlePointerDown(event: PointerEvent, diff: number) {
 			/>
 			<NumberFlow
 				:value="modelValue"
+				locales="en-US"
 				:format="{ useGrouping: false }"
 				aria-hidden="true"
 				:animated
diff --git a/site/src/pages/[...framework]/examples/_Slider/react/Component.tsx b/site/src/pages/[...framework]/examples/_Slider/react/Component.tsx
index c45ba5fc..daf0670a 100644
--- a/site/src/pages/[...framework]/examples/_Slider/react/Component.tsx
+++ b/site/src/pages/[...framework]/examples/_Slider/react/Component.tsx
@@ -18,6 +18,7 @@ export default function Slider({ value, className, ...props }: RadixSlider.Slide
 			>
 				{value?.[0] != null && (
 					<NumberFlow
+						locales="en-US"
 						willChange
 						value={value[0]}
 						isolate
diff --git a/site/src/pages/[...framework]/examples/_Slider/svelte/Component.svelte b/site/src/pages/[...framework]/examples/_Slider/svelte/Component.svelte
index 9933be5c..3b11de7f 100644
--- a/site/src/pages/[...framework]/examples/_Slider/svelte/Component.svelte
+++ b/site/src/pages/[...framework]/examples/_Slider/svelte/Component.svelte
@@ -25,6 +25,7 @@
 	{#if value[0] != null}
 		<div class="w-8 shrink-0 text-center">
 			<NumberFlow
+				locales="en-US"
 				willChange
 				value={value[0]}
 				aria-hidden="true"
diff --git a/site/src/pages/[...framework]/examples/_Slider/vue/Component.vue b/site/src/pages/[...framework]/examples/_Slider/vue/Component.vue
index 6d6b27aa..e9870c31 100644
--- a/site/src/pages/[...framework]/examples/_Slider/vue/Component.vue
+++ b/site/src/pages/[...framework]/examples/_Slider/vue/Component.vue
@@ -17,6 +17,7 @@ import { SliderRange, SliderRoot, SliderThumb, SliderTrack } from 'radix-vue'
 		>
 			<NumberFlow
 				v-if="modelValue[0] != null"
+				locales="en-US"
 				willChange
 				:value="modelValue[0]"
 				:plugins="[continuous]"