Skip to content

Commit

Permalink
Fix hook hydration errors
Browse files Browse the repository at this point in the history
  • Loading branch information
barvian committed Nov 25, 2024
1 parent 8028c5b commit e775131
Show file tree
Hide file tree
Showing 21 changed files with 567 additions and 79 deletions.
7 changes: 7 additions & 0 deletions .changeset/late-ears-camp.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
'@number-flow/react': patch
'@number-flow/vue': patch
'@number-flow/svelte': patch
---

Fix useCanAnimate hydration
2 changes: 1 addition & 1 deletion packages/react/src/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -276,7 +276,7 @@ export function NumberFlowGroup({ children }: { children: React.ReactNode }) {

// SSR-safe canAnimate
export function useCanAnimate({ respectMotionPreference = true } = {}) {
const [canAnimate, setCanAnimate] = React.useState(_canAnimate)
const [canAnimate, setCanAnimate] = React.useState(false)
const [reducedMotion, setReducedMotion] = React.useState(false)

// Handle SSR:
Expand Down
15 changes: 15 additions & 0 deletions packages/react/test/apps/react-18/app/can-animate/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
'use client'

import * as React from 'react'
import { useCanAnimate } from '@number-flow/react'

export default function Page() {
const canAnimate = useCanAnimate()
const disrespectMotionPreference = useCanAnimate({ respectMotionPreference: false })
return (
<div>
<p data-testid="default">{String(canAnimate)}</p>
<p data-testid="disrespect-motion-preference">{String(disrespectMotionPreference)}</p>
</div>
)
}
12 changes: 11 additions & 1 deletion packages/react/test/apps/react-18/next.config.mjs
Original file line number Diff line number Diff line change
@@ -1,4 +1,14 @@
import webpack from 'webpack'
/** @type {import('next').NextConfig} */
const nextConfig = {}
const nextConfig = {
webpack(config, context) {
config.plugins.push(
new webpack.DefinePlugin({
__REACT_DEVTOOLS_GLOBAL_HOOK__: '({ isDisabled: true })'
})
)
return config
}
}

export default nextConfig
5 changes: 4 additions & 1 deletion packages/react/test/apps/react-18/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@
"version": "0.1.0",
"private": true,
"scripts": {
"build": "next build",
"start": "next start --port 3039",
"dev": "next dev --port 3039",
"lint": "next lint",
"test": "playwright test",
Expand All @@ -23,7 +25,8 @@
"postcss": "^8",
"tailwindcss": "^3.4.1",
"tw-reset": "^0.0.5",
"typescript": "^5"
"typescript": "^5",
"webpack": "^5.96.1"
},
"packageManager": "[email protected]+sha512.22721b3a11f81661ae1ec68ce1a7b879425a1ca5b991c975b074ac220b187ce56c708fe5db69f4c962c989452eee76c82877f4ee80f474cebd61ee13461b6228"
}
15 changes: 15 additions & 0 deletions packages/react/test/apps/react-19/app/can-animate/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
'use client'

import * as React from 'react'
import { useCanAnimate } from '@number-flow/react'

export default function Page() {
const canAnimate = useCanAnimate()
const disrespectMotionPreference = useCanAnimate({ respectMotionPreference: false })
return (
<div>
<p data-testid="default">{String(canAnimate)}</p>
<p data-testid="disrespect-motion-preference">{String(disrespectMotionPreference)}</p>
</div>
)
}
9 changes: 9 additions & 0 deletions packages/react/test/apps/react-19/next.config.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,15 @@
import type { NextConfig } from 'next'
import webpack from 'webpack'

const nextConfig: NextConfig = {
webpack(config, context) {
config.plugins.push(
new webpack.DefinePlugin({
__REACT_DEVTOOLS_GLOBAL_HOOK__: '({ isDisabled: true })'
})
)
return config
},
devIndicators: {
appIsrStatus: false
}
Expand Down
3 changes: 2 additions & 1 deletion packages/react/test/apps/react-19/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
"@types/react-dom": "^18",
"postcss": "^8",
"tailwindcss": "^3.4.1",
"typescript": "^5"
"typescript": "^5",
"webpack": "^5.96.1"
}
}
2 changes: 1 addition & 1 deletion packages/svelte/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
"build:watch": "svelte-package --watch",
"build": "svelte-kit sync && svelte-package && publint",
"build:site": "vite build && pnpm build",
"preview": "vite preview",
"preview": "vite preview --port 3039",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"test": "playwright test",
Expand Down
12 changes: 11 additions & 1 deletion packages/svelte/playwright.config.ts
Original file line number Diff line number Diff line change
@@ -1 +1,11 @@
export { config as default } from '../../lib/playwright'
import { defineConfig } from '@playwright/test'
import { config } from '../../lib/playwright'

// Use prod build cause it includes hydration errors but excludes random Vite stuff:
export default defineConfig({
...config,
webServer: {
...config.webServer,
command: 'pnpm build:site && pnpm preview'
}
})
2 changes: 1 addition & 1 deletion packages/svelte/src/lib/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export type { Value, Format, Trend } from 'number-flow'
export { default as NumberFlowGroup } from './NumberFlowGroup.svelte'
export { default, NumberFlowElement } from './NumberFlow.svelte'

const canAnimate = readable(_canAnimate, (set) => {
const canAnimate = readable(false, (set) => {
onMount(() => {
set(_canAnimate)
})
Expand Down
10 changes: 10 additions & 0 deletions packages/svelte/src/routes/can-animate/+page.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<script lang="ts">
import { getCanAnimate } from '$lib/index.js'
const canAnimate = getCanAnimate()
const disrespectMotionPreference = getCanAnimate({ respectMotionPreference: false })
</script>

<div>
<p data-testid="default">{String($canAnimate)}</p>
<p data-testid="disrespect-motion-preference">{String($disrespectMotionPreference)}</p>
</div>
2 changes: 1 addition & 1 deletion packages/vue/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export function useCanAnimate({
}: {
respectMotionPreference?: MaybeRefOrGetter<boolean>
} = {}) {
const canAnimate = ref(_canAnimate)
const canAnimate = ref(false)
const reducedMotion = ref(false)

// Handle SSR:
Expand Down
2 changes: 1 addition & 1 deletion packages/vue/test/apps/nuxt3/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
"scripts": {
"dev": "nuxt dev",
"build": "nuxt build",
"start": "nuxt start",
"start": "PORT=3039 nuxt start",
"generate": "nuxt generate",
"postinstall": "nuxt prepare",
"test": "playwright test",
Expand Down
12 changes: 11 additions & 1 deletion packages/vue/test/apps/nuxt3/playwright.config.ts
Original file line number Diff line number Diff line change
@@ -1 +1,11 @@
export { config as default } from '../../../../../lib/playwright'
import { defineConfig } from '@playwright/test'
import { config } from '../../../../../lib/playwright'

// Use prod build cause it includes hydration errors but excludes random Vite stuff:
export default defineConfig({
...config,
webServer: {
...config.webServer,
command: 'pnpm build && pnpm start'
}
})
12 changes: 12 additions & 0 deletions packages/vue/test/apps/nuxt3/src/pages/can-animate.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<script lang="ts" setup>
import { useCanAnimate } from '@number-flow/vue'
const canAnimate = useCanAnimate()
const disrespectMotionPreference = useCanAnimate({ respectMotionPreference: false })
</script>
<template>
<div>
<p data-testid="default">{{ String(canAnimate) }}</p>
<p data-testid="disrespect-motion-preference">{{ String(disrespectMotionPreference) }}</p>
</div>
</template>
File renamed without changes.
Loading

0 comments on commit e775131

Please sign in to comment.