Fix hydration errors caused by mismatched locales

Fixes e.g. #108
barvian · Jan 21, 2025 · 8eabf0f · 8eabf0f
1 parent 48b4b79
commit 8eabf0f
Show file tree

Hide file tree

Showing 20 changed files with 60 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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]"