diff --git a/.changeset/twelve-eagles-rule.md b/.changeset/twelve-eagles-rule.md new file mode 100644 index 000000000..d2fa89e91 --- /dev/null +++ b/.changeset/twelve-eagles-rule.md @@ -0,0 +1,11 @@ +--- +"@suspensive/jotai": patch +"@suspensive/react-dom": patch +"@suspensive/react-native": patch +"@suspensive/react-query-4": patch +"@suspensive/react-query-5": patch +"@suspensive/react-query": patch +"@suspensive/react": patch +--- + +feat(*): support react 19 diff --git a/docs/suspensive.org/package.json b/docs/suspensive.org/package.json index 2f08b3785..5b06a9e5b 100644 --- a/docs/suspensive.org/package.json +++ b/docs/suspensive.org/package.json @@ -29,12 +29,12 @@ "@tanstack/react-query-devtools": "^4.36.1", "codehike": "^1.0.4", "d3": "^7.9.0", - "framer-motion": "^11.13.1", + "motion": "^11.13.5", "next": "catalog:", - "nextra": "^3.2.4", - "nextra-theme-docs": "^3.2.4", - "react": "catalog:react18", - "react-dom": "catalog:react-dom", + "nextra": "^3.2.5", + "nextra-theme-docs": "^3.2.5", + "react": "catalog:react19", + "react-dom": "catalog:react19", "remark-sandpack": "^0.0.5", "sharp": "catalog:", "zod": "^3.23.8" @@ -42,8 +42,8 @@ "devDependencies": { "@suspensive/eslint-config": "workspace:*", "@types/d3": "^7.4.3", - "@types/react": "catalog:react18", - "@types/react-dom": "catalog:react-dom", + "@types/react": "catalog:react19", + "@types/react-dom": "catalog:react19", "autoprefixer": "catalog:", "postcss": "catalog:", "prettier-plugin-tailwindcss": "catalog:", diff --git a/docs/suspensive.org/src/components/HomePage.tsx b/docs/suspensive.org/src/components/HomePage.tsx index 98e7cf6f7..5db04e8ed 100644 --- a/docs/suspensive.org/src/components/HomePage.tsx +++ b/docs/suspensive.org/src/components/HomePage.tsx @@ -1,4 +1,4 @@ -import { motion } from 'framer-motion' +import { motion } from 'motion/react' import Image from 'next/image' import { useRouter } from 'nextra/hooks' import { Link } from 'nextra-theme-docs' diff --git a/docs/suspensive.org/src/components/Scrollycoding.tsx b/docs/suspensive.org/src/components/Scrollycoding.tsx index c70120b71..ee8c3e906 100644 --- a/docs/suspensive.org/src/components/Scrollycoding.tsx +++ b/docs/suspensive.org/src/components/Scrollycoding.tsx @@ -36,8 +36,7 @@ export class SmoothPre extends Component { } getSnapshotBeforeUpdate() { - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - return getStartingSnapshot(this.ref.current!) + return getStartingSnapshot(this.ref.current) } componentDidUpdate( @@ -45,8 +44,7 @@ export class SmoothPre extends Component { prevState: never, snapshot: TokenTransitionsSnapshot ) { - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - const transitions = calculateTransitions(this.ref.current!, snapshot) + const transitions = calculateTransitions(this.ref.current, snapshot) transitions.forEach(({ element, keyframes, options }) => { const { translateX, translateY, ...kf } = keyframes as any if (translateX && translateY) { diff --git a/docs/suspensive.org/theme.config.tsx b/docs/suspensive.org/theme.config.tsx index bc84e2c98..124dae950 100644 --- a/docs/suspensive.org/theme.config.tsx +++ b/docs/suspensive.org/theme.config.tsx @@ -1,4 +1,4 @@ -import { motion } from 'framer-motion' +import { motion } from 'motion/react' import Image from 'next/image' import Link from 'next/link' import { useRouter } from 'nextra/hooks' diff --git a/examples/next-streaming-react-query/package.json b/examples/next-streaming-react-query/package.json index 2c3bba751..09741da7c 100644 --- a/examples/next-streaming-react-query/package.json +++ b/examples/next-streaming-react-query/package.json @@ -18,14 +18,14 @@ "@tanstack/react-query-devtools": "catalog:react-query5", "@tanstack/react-query-next-experimental": "catalog:react-query5", "next": "catalog:", - "react": "catalog:react18", - "react-dom": "catalog:react-dom", + "react": "catalog:react19", + "react-dom": "catalog:react19", "sharp": "catalog:" }, "devDependencies": { "@suspensive/eslint-config": "workspace:*", - "@types/react": "catalog:react18", - "@types/react-dom": "catalog:react-dom", + "@types/react": "catalog:react19", + "@types/react-dom": "catalog:react19", "autoprefixer": "catalog:", "postcss": "catalog:", "prettier-plugin-tailwindcss": "catalog:", diff --git a/examples/react-native-playground/package.json b/examples/react-native-playground/package.json index 50619c1e1..ba23b754d 100644 --- a/examples/react-native-playground/package.json +++ b/examples/react-native-playground/package.json @@ -15,40 +15,40 @@ "web": "expo start --web" }, "dependencies": { - "@expo/vector-icons": "catalog:react-native", - "@react-navigation/bottom-tabs": "catalog:react-native", - "@react-navigation/native": "catalog:react-native", + "@expo/vector-icons": "catalog:react19", + "@react-navigation/bottom-tabs": "catalog:react19", + "@react-navigation/native": "catalog:react19", "@suspensive/react-native": "workspace:*", - "expo": "catalog:react-native", - "expo-blur": "catalog:react-native", - "expo-constants": "catalog:react-native", - "expo-font": "catalog:react-native", - "expo-haptics": "catalog:react-native", - "expo-linking": "catalog:react-native", - "expo-router": "catalog:react-native", - "expo-splash-screen": "catalog:react-native", - "expo-status-bar": "catalog:react-native", - "expo-symbols": "catalog:react-native", - "expo-system-ui": "catalog:react-native", - "expo-web-browser": "catalog:react-native", - "react": "catalog:react18", - "react-dom": "catalog:react-dom", - "react-native": "catalog:react-native", - "react-native-gesture-handler": "catalog:react-native", - "react-native-reanimated": "catalog:react-native", - "react-native-safe-area-context": "catalog:react-native", - "react-native-screens": "catalog:react-native", - "react-native-web": "catalog:react-native", - "react-native-webview": "catalog:react-native" + "expo": "catalog:react19", + "expo-blur": "catalog:react19", + "expo-constants": "catalog:react19", + "expo-font": "catalog:react19", + "expo-haptics": "catalog:react19", + "expo-linking": "catalog:react19", + "expo-router": "catalog:react19", + "expo-splash-screen": "catalog:react19", + "expo-status-bar": "catalog:react19", + "expo-symbols": "catalog:react19", + "expo-system-ui": "catalog:react19", + "expo-web-browser": "catalog:react19", + "react": "catalog:react19", + "react-dom": "catalog:react19", + "react-native": "catalog:react19", + "react-native-gesture-handler": "catalog:react19", + "react-native-reanimated": "catalog:react19", + "react-native-safe-area-context": "catalog:react19", + "react-native-screens": "catalog:react19", + "react-native-web": "catalog:react19", + "react-native-webview": "catalog:react19" }, "devDependencies": { "@babel/core": "^7.26.0", "@types/jest": "^29.5.12", - "@types/react": "catalog:react18", - "@types/react-test-renderer": "^18.3.0", + "@types/react": "catalog:react19", + "@types/react-test-renderer": "^19.0.0", "jest": "catalog:", - "jest-expo": "catalog:react-native", - "react-test-renderer": "18.3.1", + "jest-expo": "catalog:react19", + "react-test-renderer": "19.0.0", "typescript": "^5.7.2" }, "jest": { diff --git a/examples/visualization/next.config.js b/examples/visualization/next.config.js index 370013118..8613db64c 100644 --- a/examples/visualization/next.config.js +++ b/examples/visualization/next.config.js @@ -1,7 +1,7 @@ /** @type {import('next').NextConfig} */ module.exports = { reactStrictMode: true, - transpilePackages: ['@suspensive/react', '@suspensive/react-query'], + transpilePackages: ['@suspensive/react', '@suspensive/react-query-5'], experimental: { typedRoutes: true, }, diff --git a/examples/visualization/package.json b/examples/visualization/package.json index 86cc6d8ed..313b3a8de 100644 --- a/examples/visualization/package.json +++ b/examples/visualization/package.json @@ -14,22 +14,22 @@ "dependencies": { "@suspensive/react": "workspace:*", "@suspensive/react-dom": "workspace:*", - "@suspensive/react-query": "workspace:*", - "@tanstack/react-query": "catalog:react-query4", - "@tanstack/react-query-devtools": "catalog:react-query4", + "@suspensive/react-query-5": "workspace:*", + "@tanstack/react-query": "catalog:react-query5", + "@tanstack/react-query-devtools": "catalog:react-query5", "axios": "^1.7.9", "clsx": "catalog:", "next": "catalog:", - "react": "catalog:react18", - "react-dom": "catalog:react-dom", + "react": "catalog:react19", + "react-dom": "catalog:react19", "sharp": "catalog:", "zod": "^3.23.8" }, "devDependencies": { "@suspensive/eslint-config": "workspace:*", "@suspensive/tsconfig": "workspace:*", - "@types/react": "catalog:react18", - "@types/react-dom": "catalog:react-dom", + "@types/react": "catalog:react19", + "@types/react-dom": "catalog:react19", "autoprefixer": "catalog:", "postcss": "catalog:", "prettier-plugin-tailwindcss": "catalog:", diff --git a/examples/visualization/src/app/react-dom/FadeIn/page.tsx b/examples/visualization/src/app/react-dom/FadeIn/page.tsx index 833169b75..2b49ac863 100644 --- a/examples/visualization/src/app/react-dom/FadeIn/page.tsx +++ b/examples/visualization/src/app/react-dom/FadeIn/page.tsx @@ -2,7 +2,8 @@ import { ErrorBoundary, Suspense } from '@suspensive/react' import { FadeIn } from '@suspensive/react-dom' -import { SuspenseQuery, queryOptions } from '@suspensive/react-query' +import { SuspenseQuery } from '@suspensive/react-query-5' +import { queryOptions } from '@tanstack/react-query' import axios from 'axios' import { delay } from '~/utils' diff --git a/examples/visualization/src/app/react-query/SuspenseInfiniteQuery/page.tsx b/examples/visualization/src/app/react-query/SuspenseInfiniteQuery/page.tsx index 5609e6aae..51962993a 100644 --- a/examples/visualization/src/app/react-query/SuspenseInfiniteQuery/page.tsx +++ b/examples/visualization/src/app/react-query/SuspenseInfiniteQuery/page.tsx @@ -1,7 +1,7 @@ 'use client' import { ErrorBoundary, Suspense } from '@suspensive/react' -import { SuspenseInfiniteQuery } from '@suspensive/react-query' +import { SuspenseInfiniteQuery } from '@suspensive/react-query-5' import axios from 'axios' import { Spinner } from '~/components/uis' @@ -12,33 +12,25 @@ export default function Page() { }> { - const { limit, skip } = (pageParam ?? { limit: 5, skip: undefined }) as { limit: number; skip?: number } - return axios + queryFn={({ pageParam }) => + axios .get<{ limit: number skip: number total: number - products: Array<{ - id: number - title: string - price: number - }> - }>(`https://dummyjson.com/products?limit=${limit}${skip ? `&skip=${skip}` : ''}&select=title,price`) - .then(({ data }) => ({ - data, - pageParam: { - limit: data.limit, - skip: data.limit, - }, - })) - }} - getNextPageParam={(lastPage) => lastPage.pageParam} + products: Array<{ id: number; title: string; price: number }> + }>( + `https://dummyjson.com/products?limit=${pageParam.limit}${pageParam.skip ? `&skip=${pageParam.skip}` : ''}&select=title,price` + ) + .then(({ data }) => data) + } + initialPageParam={{ limit: 5, skip: undefined } as { limit: number; skip: number | undefined }} + getNextPageParam={(lastPage) => ({ limit: 5, skip: lastPage.skip + 5 })} > {({ data, fetchNextPage, hasNextPage, isFetchingNextPage }) => (
- {data.pages.map(({ data }) => - data.products.map((product) => ( + {data.pages.map((page) => + page.products.map((product) => (

title: {product.title}

price: {product.price}

@@ -51,14 +43,10 @@ export default function Page() { ) : (