From 2843b317c557781cc7190aceb01b9c4f591fcc8c Mon Sep 17 00:00:00 2001 From: Cody Bennett Date: Wed, 1 Jan 2025 23:11:36 -0600 Subject: [PATCH 01/22] feat!: React 19 support --- package.json | 10 +- packages/core/src/components/Spring.tsx | 1 + packages/core/src/components/Transition.tsx | 1 + packages/core/src/hooks/useInView.ts | 4 +- packages/core/src/hooks/useResize.ts | 6 +- packages/core/src/hooks/useScroll.ts | 6 +- packages/core/src/hooks/useSpring.test.tsx | 4 +- packages/core/src/types/transition.ts | 2 +- packages/parallax/src/index.tsx | 10 +- packages/shared/src/hooks/useMemoOne.ts | 2 +- packages/shared/src/hooks/usePrev.ts | 2 +- packages/types/src/utils.ts | 6 +- targets/three/src/animated.ts | 3 +- targets/three/src/primitives.ts | 4 +- targets/web/src/primitives.ts | 2 + yarn.lock | 131 +++++++++++++++++--- 16 files changed, 151 insertions(+), 43 deletions(-) diff --git a/package.json b/package.json index 656c1be4fc..43b945fce7 100644 --- a/package.json +++ b/package.json @@ -66,7 +66,7 @@ "@changesets/cli": "2.27.9", "@commitlint/cli": "19.5.0", "@commitlint/config-conventional": "19.5.0", - "@react-three/fiber": "8.17.10", + "@react-three/fiber": "9.0.0-rc.1", "@remix-run/dev": "2.13.1", "@simonsmith/cypress-image-snapshot": "9.1.0", "@swc/core": "1.7.35", @@ -79,8 +79,8 @@ "@types/jest": "29.5.14", "@types/lodash.clamp": "4.0.9", "@types/lodash.shuffle": "4.2.9", - "@types/react": "18.3.11", - "@types/react-dom": "18.3.1", + "@types/react": "19.0.2", + "@types/react-dom": "19.0.2", "@types/react-lazyload": "3.2.3", "@types/react-native": "0.73.0", "@types/styled-components": "5.1.34", @@ -95,8 +95,8 @@ "mock-raf": "npm:@react-spring/mock-raf@1.1.1", "prettier": "3.3.3", "pretty-quick": "4.0.0", - "react": "18.3.1", - "react-dom": "18.3.1", + "react": "19.0.0", + "react-dom": "19.0.0", "react-konva": "18.2.10", "react-native": "0.75.4", "react-zdog": "1.2.2", diff --git a/packages/core/src/components/Spring.tsx b/packages/core/src/components/Spring.tsx index e835c2d482..c902dd2e64 100644 --- a/packages/core/src/components/Spring.tsx +++ b/packages/core/src/components/Spring.tsx @@ -1,3 +1,4 @@ +import { JSX } from 'react' import { NoInfer, UnknownProps } from '@react-spring/types' import { useSpring, UseSpringProps } from '../hooks/useSpring' import { SpringValues, SpringToFn, SpringChain } from '../types' diff --git a/packages/core/src/components/Transition.tsx b/packages/core/src/components/Transition.tsx index 7b2a3bd337..ce7fbe7203 100644 --- a/packages/core/src/components/Transition.tsx +++ b/packages/core/src/components/Transition.tsx @@ -1,3 +1,4 @@ +import { JSX } from 'react' import { Valid } from '../types/common' import { TransitionComponentProps } from '../types' import { useTransition } from '../hooks' diff --git a/packages/core/src/hooks/useInView.ts b/packages/core/src/hooks/useInView.ts index 7d26d2c3d2..28ec706022 100644 --- a/packages/core/src/hooks/useInView.ts +++ b/packages/core/src/hooks/useInView.ts @@ -8,7 +8,7 @@ import { Valid } from '../types/common' export interface IntersectionArgs extends Omit { - root?: React.MutableRefObject + root?: React.RefObject once?: boolean amount?: 'any' | 'all' | number | number[] } @@ -35,7 +35,7 @@ export function useInView( args?: IntersectionArgs ) { const [isInView, setIsInView] = useState(false) - const ref = useRef() + const ref = useRef(null) const propsFn = is.fun(props) && props diff --git a/packages/core/src/hooks/useResize.ts b/packages/core/src/hooks/useResize.ts index c5b4c2c06b..5b3a9a86ac 100644 --- a/packages/core/src/hooks/useResize.ts +++ b/packages/core/src/hooks/useResize.ts @@ -1,4 +1,4 @@ -import { MutableRefObject } from 'react' +import { RefObject } from 'react' import { onResize, each, useIsomorphicLayoutEffect } from '@react-spring/shared' import { SpringProps, SpringValues } from '../types' @@ -6,7 +6,7 @@ import { SpringProps, SpringValues } from '../types' import { useSpring } from './useSpring' export interface UseResizeOptions extends Omit { - container?: MutableRefObject + container?: RefObject } /** @@ -30,7 +30,7 @@ export interface UseResizeOptions extends Omit { ``` * * @param {UseResizeOptions} UseResizeOptions options for the useScroll hook. - * @param {MutableRefObject} UseResizeOptions.container the container to listen to scroll events on, defaults to the window. + * @param {RefObject} UseResizeOptions.container the container to listen to scroll events on, defaults to the window. * * @returns {SpringValues<{width: number; height: number;}>} SpringValues the collection of values returned from the inner hook */ diff --git a/packages/core/src/hooks/useScroll.ts b/packages/core/src/hooks/useScroll.ts index 58b05c7f5f..eb6520370d 100644 --- a/packages/core/src/hooks/useScroll.ts +++ b/packages/core/src/hooks/useScroll.ts @@ -1,4 +1,4 @@ -import { MutableRefObject } from 'react' +import { RefObject } from 'react' import { each, onScroll, useIsomorphicLayoutEffect } from '@react-spring/shared' import { SpringProps, SpringValues } from '../types' @@ -6,7 +6,7 @@ import { SpringProps, SpringValues } from '../types' import { useSpring } from './useSpring' export interface UseScrollOptions extends Omit { - container?: MutableRefObject + container?: RefObject } /** @@ -30,7 +30,7 @@ export interface UseScrollOptions extends Omit { ``` * * @param {UseScrollOptions} useScrollOptions options for the useScroll hook. - * @param {MutableRefObject} useScrollOptions.container the container to listen to scroll events on, defaults to the window. + * @param {RefObject} useScrollOptions.container the container to listen to scroll events on, defaults to the window. * * @returns {SpringValues<{scrollX: number; scrollY: number; scrollXProgress: number; scrollYProgress: number}>} SpringValues the collection of values returned from the inner hook */ diff --git a/packages/core/src/hooks/useSpring.test.tsx b/packages/core/src/hooks/useSpring.test.tsx index c5bd8892c8..68935ce676 100644 --- a/packages/core/src/hooks/useSpring.test.tsx +++ b/packages/core/src/hooks/useSpring.test.tsx @@ -115,7 +115,7 @@ interface TestContext extends SpringContext { } function createUpdater(Component: React.ComponentType<{ args: [any, any?] }>) { - let prevElem: JSX.Element | undefined + let prevElem: React.JSX.Element | undefined let result: RenderResult | undefined const context: TestContext = { @@ -139,7 +139,7 @@ function createUpdater(Component: React.ComponentType<{ args: [any, any?] }>) { } }) - function renderWithContext(elem: JSX.Element) { + function renderWithContext(elem: React.JSX.Element) { const wrapped = {elem} if (result) result.rerender(wrapped) else result = render(wrapped) diff --git a/packages/core/src/types/transition.ts b/packages/core/src/types/transition.ts index 8fe1344e0a..7ae3acf69e 100644 --- a/packages/core/src/types/transition.ts +++ b/packages/core/src/types/transition.ts @@ -1,4 +1,4 @@ -import { ReactNode } from 'react' +import { ReactNode, JSX } from 'react' import { Lookup, ObjectFromUnion, diff --git a/packages/parallax/src/index.tsx b/packages/parallax/src/index.tsx index 74e05932a5..4920eb89b8 100644 --- a/packages/parallax/src/index.tsx +++ b/packages/parallax/src/index.tsx @@ -52,8 +52,8 @@ export interface IParallax { current: number controller: Controller<{ scroll: number }> layers: Set - container: React.MutableRefObject - content: React.MutableRefObject + container: React.RefObject + content: React.RefObject scrollTo(offset: number): void update(): void stop(): void @@ -143,7 +143,7 @@ export const ParallaxLayer = React.memo( React.useImperativeHandle(ref, () => layer) - const layerRef = useRef() + const layerRef = useRef(null) const setSticky = (height: number, scrollTop: number) => { const start = layer.sticky!.start! * height @@ -229,8 +229,8 @@ export const Parallax = React.memo( ...rest } = props - const containerRef = useRef() - const contentRef = useRef() + const containerRef = useRef(null) + const contentRef = useRef(null) const state: IParallax = useMemoOne( () => ({ diff --git a/packages/shared/src/hooks/useMemoOne.ts b/packages/shared/src/hooks/useMemoOne.ts index 4d02743845..a06b84d052 100644 --- a/packages/shared/src/hooks/useMemoOne.ts +++ b/packages/shared/src/hooks/useMemoOne.ts @@ -14,7 +14,7 @@ export function useMemoOne(getResult: () => T, inputs?: any[]): T { }) ) - const committed = useRef>() + const committed = useRef>(null) const prevCache = committed.current let cache = prevCache diff --git a/packages/shared/src/hooks/usePrev.ts b/packages/shared/src/hooks/usePrev.ts index 9c97e064c8..bf44a12d3a 100644 --- a/packages/shared/src/hooks/usePrev.ts +++ b/packages/shared/src/hooks/usePrev.ts @@ -2,7 +2,7 @@ import { useEffect, useRef } from 'react' /** Use a value from the previous render */ export function usePrev(value: T): T | undefined { - const prevRef = useRef() + const prevRef = useRef(null) useEffect(() => { prevRef.current = value }) diff --git a/packages/types/src/utils.ts b/packages/types/src/utils.ts index 19807b4532..268b066517 100644 --- a/packages/types/src/utils.ts +++ b/packages/types/src/utils.ts @@ -23,7 +23,7 @@ */ import * as React from 'react' -import { ReactElement, MutableRefObject } from 'react' +import { ReactElement, RefObject } from 'react' /** Ensure each type of `T` is an array */ export type Arrify = [T, T] extends [infer T, infer DT] @@ -139,7 +139,7 @@ export interface Disposable { } // react.d.ts -export type RefProp = MutableRefObject +export type RefProp = RefObject // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/34237 export type ElementType

= @@ -155,7 +155,7 @@ type LeafFunctionComponent

= { export type ComponentPropsWithRef = T extends React.ComponentClass ? React.PropsWithoutRef

& React.RefAttributes> - : React.PropsWithRef> + : React.ComponentProps // In @types/react, a "children" prop is required by the "FunctionComponent" type. export type ComponentType

= diff --git a/targets/three/src/animated.ts b/targets/three/src/animated.ts index 39f100b5e4..c6fb939bf7 100644 --- a/targets/three/src/animated.ts +++ b/targets/three/src/animated.ts @@ -7,9 +7,10 @@ import { } from '@react-spring/types' import { FluidValue } from '@react-spring/shared' import { Primitives } from './primitives' +import { ThreeElements } from '@react-three/fiber' type AnimatedPrimitives = { - [P in Primitives]: AnimatedComponent> + [P in Primitives]: AnimatedComponent> } /** The type of the `animated()` function */ diff --git a/targets/three/src/primitives.ts b/targets/three/src/primitives.ts index 16c36921b0..2dfcd51b81 100644 --- a/targets/three/src/primitives.ts +++ b/targets/three/src/primitives.ts @@ -1,7 +1,7 @@ import * as THREE from 'three' -import '@react-three/fiber' +import { ThreeElements } from '@react-three/fiber' -export type Primitives = keyof JSX.IntrinsicElements +export type Primitives = keyof ThreeElements export const primitives = ['primitive'].concat( Object.keys(THREE) diff --git a/targets/web/src/primitives.ts b/targets/web/src/primitives.ts index a77a1f3d70..23edb245fa 100644 --- a/targets/web/src/primitives.ts +++ b/targets/web/src/primitives.ts @@ -1,3 +1,5 @@ +import { JSX } from 'react' + export type Primitives = keyof JSX.IntrinsicElements export const primitives: Primitives[] = [ 'a', diff --git a/yarn.lock b/yarn.lock index 223ae677ba..c7d81f0006 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5219,6 +5219,48 @@ __metadata: languageName: node linkType: hard +"@react-three/fiber@npm:9.0.0-rc.1": + version: 9.0.0-rc.1 + resolution: "@react-three/fiber@npm:9.0.0-rc.1" + dependencies: + "@babel/runtime": ^7.17.8 + "@types/debounce": ^1.2.1 + "@types/react-reconciler": ^0.28.8 + "@types/webxr": "*" + base64-js: ^1.5.1 + buffer: ^6.0.3 + debounce: ^1.2.1 + its-fine: ^1.2.5 + react-reconciler: 0.31.0-rc.1 + scheduler: 0.25.0-rc.1 + suspend-react: ^0.1.3 + zustand: ^4.1.2 + peerDependencies: + expo: ">=43.0" + expo-asset: ">=8.4" + expo-file-system: ">=11.0" + expo-gl: ">=11.0" + react: ">=19.0" + react-dom: ">=19.0" + react-native: ">=0.69" + three: ">=0.141" + peerDependenciesMeta: + expo: + optional: true + expo-asset: + optional: true + expo-file-system: + optional: true + expo-gl: + optional: true + react-dom: + optional: true + react-native: + optional: true + checksum: faf3a5c328a6e016aeedfbc1b4cefe0b61c3202a384f5995546094c67047e30d7484a6dd997900f7cf5b7d5cf50d714efd904ba29e127878ef77f8b44a6c5ab9 + languageName: node + linkType: hard + "@remix-run/dev@npm:2.13.1": version: 2.13.1 resolution: "@remix-run/dev@npm:2.13.1" @@ -6345,12 +6387,12 @@ __metadata: languageName: node linkType: hard -"@types/react-dom@npm:18.3.1": - version: 18.3.1 - resolution: "@types/react-dom@npm:18.3.1" - dependencies: - "@types/react": "*" - checksum: ad28ecce3915d30dc76adc2a1373fda1745ba429cea290e16c6628df9a05fd80b6403c8e87d78b45e6c60e51df7a67add389ab62b90070fbfdc9bda8307d9953 +"@types/react-dom@npm:19.0.2": + version: 19.0.2 + resolution: "@types/react-dom@npm:19.0.2" + peerDependencies: + "@types/react": ^19.0.0 + checksum: d2ae81ec0b8eee7a4bf31918796fdaa34e8db68f69682163bc212d759de76783e6ffcc02c02722dcf508429067148841e6da81414cc730ca2a28c9c2b350c880 languageName: node linkType: hard @@ -6390,6 +6432,15 @@ __metadata: languageName: node linkType: hard +"@types/react-reconciler@npm:^0.28.8": + version: 0.28.9 + resolution: "@types/react-reconciler@npm:0.28.9" + peerDependencies: + "@types/react": "*" + checksum: 06257f693c7b148a4258c0d0a958288116100014e7b3c21ceaea2d55a668c71718f79b4105a9a0f35b480f3729e46960b40026d685719f9386b4ed63108dda09 + languageName: node + linkType: hard + "@types/react-transition-group@npm:^4.4.0": version: 4.4.10 resolution: "@types/react-transition-group@npm:4.4.10" @@ -6399,7 +6450,7 @@ __metadata: languageName: node linkType: hard -"@types/react@npm:*, @types/react@npm:18.3.11": +"@types/react@npm:*": version: 18.3.11 resolution: "@types/react@npm:18.3.11" dependencies: @@ -6409,6 +6460,15 @@ __metadata: languageName: node linkType: hard +"@types/react@npm:19.0.2": + version: 19.0.2 + resolution: "@types/react@npm:19.0.2" + dependencies: + csstype: ^3.0.2 + checksum: 2f12c2a84b778283884d41560c723d815153d88c56cacf25c0166329e9099c35c82c602a21d8831a381e2ef5574434ebd7bf09a636fe073558919474b0b3c9ed + languageName: node + linkType: hard + "@types/semver@npm:^7.5.0": version: 7.5.6 resolution: "@types/semver@npm:7.5.6" @@ -12867,7 +12927,7 @@ __metadata: languageName: node linkType: hard -"its-fine@npm:^1.0.6, its-fine@npm:^1.1.1": +"its-fine@npm:^1.0.6, its-fine@npm:^1.1.1, its-fine@npm:^1.2.5": version: 1.2.5 resolution: "its-fine@npm:1.2.5" dependencies: @@ -17297,6 +17357,17 @@ __metadata: languageName: node linkType: hard +"react-dom@npm:19.0.0": + version: 19.0.0 + resolution: "react-dom@npm:19.0.0" + dependencies: + scheduler: ^0.25.0 + peerDependencies: + react: ^19.0.0 + checksum: 009cc6e575263a0d1906f9dd4aa6532d2d3d0d71e4c2b7777c8fe4de585fa06b5b77cdc2e0fbaa2f3a4a5e5d3305c189ba152153f358ee7da4d9d9ba5d3a8975 + languageName: node + linkType: hard + "react-dropzone@npm:^12.0.0": version: 12.1.0 resolution: "react-dropzone@npm:12.1.0" @@ -17413,6 +17484,17 @@ __metadata: languageName: node linkType: hard +"react-reconciler@npm:0.31.0-rc.1": + version: 0.31.0-rc.1 + resolution: "react-reconciler@npm:0.31.0-rc.1" + dependencies: + scheduler: 0.25.0-rc.1 + peerDependencies: + react: 19.0.0-rc.1 + checksum: cb769884a9cfc8707d49849533d6fccd9854bed786c5f58d6525da6772428b8853a881947dca27eaa41d3861283f58142ae39a0bb991a0ffd00f83a1df533990 + languageName: node + linkType: hard + "react-reconciler@npm:^0.27.0": version: 0.27.0 resolution: "react-reconciler@npm:0.27.0" @@ -17537,7 +17619,7 @@ __metadata: "@changesets/cli": 2.27.9 "@commitlint/cli": 19.5.0 "@commitlint/config-conventional": 19.5.0 - "@react-three/fiber": 8.17.10 + "@react-three/fiber": 9.0.0-rc.1 "@remix-run/dev": 2.13.1 "@simonsmith/cypress-image-snapshot": 9.1.0 "@swc/core": 1.7.35 @@ -17550,8 +17632,8 @@ __metadata: "@types/jest": 29.5.14 "@types/lodash.clamp": 4.0.9 "@types/lodash.shuffle": 4.2.9 - "@types/react": 18.3.11 - "@types/react-dom": 18.3.1 + "@types/react": 19.0.2 + "@types/react-dom": 19.0.2 "@types/react-lazyload": 3.2.3 "@types/react-native": 0.73.0 "@types/styled-components": 5.1.34 @@ -17566,8 +17648,8 @@ __metadata: mock-raf: "npm:@react-spring/mock-raf@1.1.1" prettier: 3.3.3 pretty-quick: 4.0.0 - react: 18.3.1 - react-dom: 18.3.1 + react: 19.0.0 + react-dom: 19.0.0 react-konva: 18.2.10 react-native: 0.75.4 react-zdog: 1.2.2 @@ -17682,6 +17764,13 @@ __metadata: languageName: node linkType: hard +"react@npm:19.0.0": + version: 19.0.0 + resolution: "react@npm:19.0.0" + checksum: 86de15d85b2465feb40297a90319c325cb07cf27191a361d47bcfe8c6126c973d660125aa67b8f4cbbe39f15a2f32efd0c814e98196d8e5b68c567ba40a399c6 + languageName: node + linkType: hard + "read-yaml-file@npm:^1.1.0": version: 1.1.0 resolution: "read-yaml-file@npm:1.1.0" @@ -18428,6 +18517,13 @@ __metadata: languageName: node linkType: hard +"scheduler@npm:0.25.0-rc.1": + version: 0.25.0-rc.1 + resolution: "scheduler@npm:0.25.0-rc.1" + checksum: 03b56e352ab835ee4d2e55525380f622807e6d2407291474e21bdb70e8135da0e0d7bec3e86c7b0d68d83ffa6645799e947ce34e1bc91c982f4d6e5285cfedcd + languageName: node + linkType: hard + "scheduler@npm:^0.21.0": version: 0.21.0 resolution: "scheduler@npm:0.21.0" @@ -18446,6 +18542,13 @@ __metadata: languageName: node linkType: hard +"scheduler@npm:^0.25.0": + version: 0.25.0 + resolution: "scheduler@npm:0.25.0" + checksum: b7bb9fddbf743e521e9aaa5198a03ae823f5e104ebee0cb9ec625392bb7da0baa1c28ab29cee4b1e407a94e76acc6eee91eeb749614f91f853efda2613531566 + languageName: node + linkType: hard + "section-matter@npm:^1.0.0": version: 1.0.0 resolution: "section-matter@npm:1.0.0" @@ -21395,7 +21498,7 @@ __metadata: languageName: node linkType: hard -"zustand@npm:^4.3.2": +"zustand@npm:^4.1.2, zustand@npm:^4.3.2": version: 4.5.5 resolution: "zustand@npm:4.5.5" dependencies: From 8f36899b95de8698f3bf54a8333990f68337a68c Mon Sep 17 00:00:00 2001 From: Cody Bennett Date: Thu, 2 Jan 2025 03:26:07 -0600 Subject: [PATCH 02/22] fix: remaining type errors --- packages/animated/src/withAnimated.tsx | 2 +- packages/core/src/SpringContext.tsx | 59 ++++++++++++++------------ targets/three/src/index.ts | 1 - 3 files changed, 33 insertions(+), 29 deletions(-) diff --git a/packages/animated/src/withAnimated.tsx b/packages/animated/src/withAnimated.tsx index ba715d8dde..d26fa6166b 100644 --- a/packages/animated/src/withAnimated.tsx +++ b/packages/animated/src/withAnimated.tsx @@ -66,7 +66,7 @@ export const withAnimated = (Component: any, host: HostConfig) => { const observer = new PropsObserver(callback, deps) - const observerRef = useRef() + const observerRef = useRef(null) useIsomorphicLayoutEffect(() => { observerRef.current = observer diff --git a/packages/core/src/SpringContext.tsx b/packages/core/src/SpringContext.tsx index 8e0a48d6fe..8f2f1ad813 100644 --- a/packages/core/src/SpringContext.tsx +++ b/packages/core/src/SpringContext.tsx @@ -13,33 +13,38 @@ export interface SpringContext { immediate?: boolean } -export const SpringContext = ({ - children, - ...props -}: PropsWithChildren) => { - const inherited = useContext(ctx) - - // Inherited values are dominant when truthy. - const pause = props.pause || !!inherited.pause, - immediate = props.immediate || !!inherited.immediate - - // Memoize the context to avoid unwanted renders. - props = useMemoOne(() => ({ pause, immediate }), [pause, immediate]) - - const { Provider } = ctx - return {children} -} - -const ctx = makeContext(SpringContext, {} as SpringContext) - -// Allow `useContext(SpringContext)` in TypeScript. -SpringContext.Provider = ctx.Provider -SpringContext.Consumer = ctx.Consumer +export const SpringContext = makeRenderableContext< + SpringContext, + PropsWithChildren +>( + Context => + ({ children, ...props }: PropsWithChildren) => { + const inherited = useContext(Context) + + // Inherited values are dominant when truthy. + const pause = props.pause || !!inherited.pause + const immediate = props.immediate || !!inherited.immediate + + // Memoize the context to avoid unwanted renders. + props = useMemoOne(() => ({ pause, immediate }), [pause, immediate]) + + return {children} + }, + {} as SpringContext +) /** Make the `target` compatible with `useContext` */ -function makeContext(target: any, init: T): React.Context { - Object.assign(target, React.createContext(init)) - target.Provider._context = target - target.Consumer._context = target - return target +function makeRenderableContext( + target: (context: React.Context) => React.FunctionComponent

, + init: T +): React.Context { + let context = React.createContext(init) + context = Object.assign(context, target(context)) + + // https://github.com/facebook/react/pull/28226 + context.Provider = context + // @ts-expect-error + context.Consumer._context = context + + return context } diff --git a/targets/three/src/index.ts b/targets/three/src/index.ts index 7840ae51ad..450a68c960 100644 --- a/targets/three/src/index.ts +++ b/targets/three/src/index.ts @@ -19,7 +19,6 @@ addEffect(() => { }) const host = createHost(primitives, { - // @ts-expect-error r3f related applyAnimatedValues: applyProps, }) From 4053dcc26f6e254f77743388e8c4a085c2cd66f7 Mon Sep 17 00:00:00 2001 From: Cody Bennett Date: Thu, 2 Jan 2025 03:27:28 -0600 Subject: [PATCH 03/22] chore: cleanup --- packages/core/src/SpringContext.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/src/SpringContext.tsx b/packages/core/src/SpringContext.tsx index 8f2f1ad813..d5e6d4cba8 100644 --- a/packages/core/src/SpringContext.tsx +++ b/packages/core/src/SpringContext.tsx @@ -18,7 +18,7 @@ export const SpringContext = makeRenderableContext< PropsWithChildren >( Context => - ({ children, ...props }: PropsWithChildren) => { + ({ children, ...props }) => { const inherited = useContext(Context) // Inherited values are dominant when truthy. From a3bd26d1eea22f99723ad6f23e1a88aece27c692 Mon Sep 17 00:00:00 2001 From: Cody Bennett Date: Thu, 2 Jan 2025 03:42:01 -0600 Subject: [PATCH 04/22] docs: add missing react-use-measure dep This used to be pulled in by R3F, but we vendor it upstream as of late. Even though we intend to later migrate changes, it's best to not depend on transient dependencies. --- docs/package.json | 1 + yarn.lock | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/package.json b/docs/package.json index 59067f6731..9707c9c55b 100644 --- a/docs/package.json +++ b/docs/package.json @@ -44,6 +44,7 @@ "react": "18.3.1", "react-dom": "18.3.1", "react-select": "5.8.1", + "react-use-measure": "^2.1.1", "zod": "3.23.8" }, "devDependencies": { diff --git a/yarn.lock b/yarn.lock index c7d81f0006..c5fdcf1580 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4971,6 +4971,7 @@ __metadata: react: 18.3.1 react-dom: 18.3.1 react-select: 5.8.1 + react-use-measure: ^2.1.1 refractor: 4.8.1 rehype-autolink-headings: 7.1.0 rehype-parse: 9.0.1 @@ -17721,7 +17722,7 @@ __metadata: languageName: node linkType: hard -"react-use-measure@npm:2.1.1": +"react-use-measure@npm:2.1.1, react-use-measure@npm:^2.1.1": version: 2.1.1 resolution: "react-use-measure@npm:2.1.1" dependencies: From f1b261785e4f4aa502cdc5e8825124ca68f3a52e Mon Sep 17 00:00:00 2001 From: Cody Bennett Date: Wed, 8 Jan 2025 07:04:42 -0600 Subject: [PATCH 05/22] docs: add missing use-gesture dep --- docs/package.json | 1 + yarn.lock | 1 + 2 files changed, 2 insertions(+) diff --git a/docs/package.json b/docs/package.json index cf9275c67f..3ced67a027 100644 --- a/docs/package.json +++ b/docs/package.json @@ -32,6 +32,7 @@ "@remix-run/serve": "2.15.2", "@remix-run/server-runtime": "2.15.2", "@supabase/supabase-js": "2.47.10", + "@use-gesture/react": "^10.3.1", "@vanilla-extract/css": "1.17.0", "@vanilla-extract/dynamic": "2.1.2", "@vanilla-extract/recipes": "0.5.5", diff --git a/yarn.lock b/yarn.lock index cf6e87e5ad..25532e79dd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4682,6 +4682,7 @@ __metadata: "@remix-run/serve": 2.15.2 "@remix-run/server-runtime": 2.15.2 "@supabase/supabase-js": 2.47.10 + "@use-gesture/react": ^10.3.1 "@vanilla-extract/css": 1.17.0 "@vanilla-extract/dynamic": 2.1.2 "@vanilla-extract/recipes": 0.5.5 From 6cdab5edef98cf9b853137c97196519cfa6085af Mon Sep 17 00:00:00 2001 From: Cody Bennett Date: Wed, 8 Jan 2025 07:10:27 -0600 Subject: [PATCH 06/22] chore: prefer JSX.IntrinsicElements for backwards compat --- targets/three/src/animated.ts | 5 ++--- targets/three/src/primitives.ts | 4 ++-- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/targets/three/src/animated.ts b/targets/three/src/animated.ts index c6fb939bf7..230837381b 100644 --- a/targets/three/src/animated.ts +++ b/targets/three/src/animated.ts @@ -1,5 +1,5 @@ /* eslint-disable @typescript-eslint/no-unused-vars */ -import { CSSProperties, ForwardRefExoticComponent, FC } from 'react' +import { CSSProperties, ForwardRefExoticComponent, FC, JSX } from 'react' import { AssignableKeys, ComponentPropsWithRef, @@ -7,10 +7,9 @@ import { } from '@react-spring/types' import { FluidValue } from '@react-spring/shared' import { Primitives } from './primitives' -import { ThreeElements } from '@react-three/fiber' type AnimatedPrimitives = { - [P in Primitives]: AnimatedComponent> + [P in Primitives]: AnimatedComponent> } /** The type of the `animated()` function */ diff --git a/targets/three/src/primitives.ts b/targets/three/src/primitives.ts index 2dfcd51b81..228d5bf1bc 100644 --- a/targets/three/src/primitives.ts +++ b/targets/three/src/primitives.ts @@ -1,7 +1,7 @@ import * as THREE from 'three' -import { ThreeElements } from '@react-three/fiber' +import { JSX } from 'react' -export type Primitives = keyof ThreeElements +export type Primitives = keyof JSX.IntrinsicElements export const primitives = ['primitive'].concat( Object.keys(THREE) From a7fd0aca62814ab4548cb2f4873f343d2a4aafd3 Mon Sep 17 00:00:00 2001 From: Cody Bennett Date: Wed, 8 Jan 2025 07:13:46 -0600 Subject: [PATCH 07/22] chore: keep PropsWithRef for React 18 --- packages/types/src/utils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/types/src/utils.ts b/packages/types/src/utils.ts index 268b066517..852037e823 100644 --- a/packages/types/src/utils.ts +++ b/packages/types/src/utils.ts @@ -155,7 +155,7 @@ type LeafFunctionComponent

= { export type ComponentPropsWithRef = T extends React.ComponentClass ? React.PropsWithoutRef

& React.RefAttributes> - : React.ComponentProps + : React.PropsWithRef> // In @types/react, a "children" prop is required by the "FunctionComponent" type. export type ComponentType

= From f2012233417b278cbaa1417370b05ad9c46b8580 Mon Sep 17 00:00:00 2001 From: Cody Bennett Date: Wed, 8 Jan 2025 07:24:04 -0600 Subject: [PATCH 08/22] chore(SpringContext): add React 18 backwards compat --- packages/core/src/SpringContext.tsx | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/packages/core/src/SpringContext.tsx b/packages/core/src/SpringContext.tsx index d5e6d4cba8..609bf3c8f5 100644 --- a/packages/core/src/SpringContext.tsx +++ b/packages/core/src/SpringContext.tsx @@ -33,18 +33,28 @@ export const SpringContext = makeRenderableContext< {} as SpringContext ) +interface RenderableContext extends React.ProviderExoticComponent

{ + Provider: RenderableContext + Consumer: React.Consumer + displayName?: string +} + /** Make the `target` compatible with `useContext` */ function makeRenderableContext( target: (context: React.Context) => React.FunctionComponent

, init: T -): React.Context { +): RenderableContext { let context = React.createContext(init) context = Object.assign(context, target(context)) // https://github.com/facebook/react/pull/28226 - context.Provider = context + if ('_context' in context.Provider) { + context.Provider._context = target + } else { + context.Provider = context + } // @ts-expect-error context.Consumer._context = context - return context + return context as unknown as RenderableContext } From f25225dcbde48a4576344c3b57394349c4fffc0a Mon Sep 17 00:00:00 2001 From: Cody Bennett Date: Wed, 8 Jan 2025 07:34:40 -0600 Subject: [PATCH 09/22] fix(SpringContext): swap mutation target --- packages/core/src/SpringContext.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/src/SpringContext.tsx b/packages/core/src/SpringContext.tsx index 609bf3c8f5..c3232b6751 100644 --- a/packages/core/src/SpringContext.tsx +++ b/packages/core/src/SpringContext.tsx @@ -45,7 +45,7 @@ function makeRenderableContext( init: T ): RenderableContext { let context = React.createContext(init) - context = Object.assign(context, target(context)) + context = Object.assign(target(context), context) // https://github.com/facebook/react/pull/28226 if ('_context' in context.Provider) { From f3cef194c36ecfe8b449ebd3317b1f2917774716 Mon Sep 17 00:00:00 2001 From: Cody Bennett Date: Wed, 8 Jan 2025 07:40:50 -0600 Subject: [PATCH 10/22] fix(SpringContext): typo --- packages/core/src/SpringContext.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/src/SpringContext.tsx b/packages/core/src/SpringContext.tsx index c3232b6751..41d1819ab0 100644 --- a/packages/core/src/SpringContext.tsx +++ b/packages/core/src/SpringContext.tsx @@ -49,7 +49,7 @@ function makeRenderableContext( // https://github.com/facebook/react/pull/28226 if ('_context' in context.Provider) { - context.Provider._context = target + context.Provider._context = context } else { context.Provider = context } From 9b12ea6eaa17f83d18dc92683c0a61729c2088c9 Mon Sep 17 00:00:00 2001 From: Cody Bennett Date: Wed, 8 Jan 2025 21:59:03 -0600 Subject: [PATCH 11/22] fix(SpringContext): feature check renderable context for consumer --- packages/core/src/SpringContext.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/core/src/SpringContext.tsx b/packages/core/src/SpringContext.tsx index 41d1819ab0..cd29cfa51e 100644 --- a/packages/core/src/SpringContext.tsx +++ b/packages/core/src/SpringContext.tsx @@ -53,8 +53,13 @@ function makeRenderableContext( } else { context.Provider = context } - // @ts-expect-error - context.Consumer._context = context + + if ('_context' in context.Consumer) { + context.Consumer._context = context + } else { + // @ts-expect-error + context.Consumer = context + } return context as unknown as RenderableContext } From cafa5b8818d77fe9e18f60f5ade1815022cdb89f Mon Sep 17 00:00:00 2001 From: Cody Bennett Date: Wed, 8 Jan 2025 23:03:55 -0600 Subject: [PATCH 12/22] chore: cleanup --- packages/core/src/SpringContext.tsx | 3 ++- targets/three/src/index.ts | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/core/src/SpringContext.tsx b/packages/core/src/SpringContext.tsx index cd29cfa51e..d1b62008e6 100644 --- a/packages/core/src/SpringContext.tsx +++ b/packages/core/src/SpringContext.tsx @@ -28,7 +28,7 @@ export const SpringContext = makeRenderableContext< // Memoize the context to avoid unwanted renders. props = useMemoOne(() => ({ pause, immediate }), [pause, immediate]) - return {children} + return {children} }, {} as SpringContext ) @@ -51,6 +51,7 @@ function makeRenderableContext( if ('_context' in context.Provider) { context.Provider._context = context } else { + // @ts-expect-error context.Provider = context } diff --git a/targets/three/src/index.ts b/targets/three/src/index.ts index 450a68c960..7840ae51ad 100644 --- a/targets/three/src/index.ts +++ b/targets/three/src/index.ts @@ -19,6 +19,7 @@ addEffect(() => { }) const host = createHost(primitives, { + // @ts-expect-error r3f related applyAnimatedValues: applyProps, }) From 97b33db7bef2110ce0bad21f07cea5c43a7c7af2 Mon Sep 17 00:00:00 2001 From: Cody Bennett Date: Wed, 8 Jan 2025 23:04:01 -0600 Subject: [PATCH 13/22] experiment: revert dep upgrade --- docs/package.json | 2 - package.json | 10 ++-- yarn.lock | 133 +++++----------------------------------------- 3 files changed, 19 insertions(+), 126 deletions(-) diff --git a/docs/package.json b/docs/package.json index 3ced67a027..032793171e 100644 --- a/docs/package.json +++ b/docs/package.json @@ -32,7 +32,6 @@ "@remix-run/serve": "2.15.2", "@remix-run/server-runtime": "2.15.2", "@supabase/supabase-js": "2.47.10", - "@use-gesture/react": "^10.3.1", "@vanilla-extract/css": "1.17.0", "@vanilla-extract/dynamic": "2.1.2", "@vanilla-extract/recipes": "0.5.5", @@ -45,7 +44,6 @@ "react": "18.3.1", "react-dom": "18.3.1", "react-select": "5.9.0", - "react-use-measure": "^2.1.1", "zod": "3.24.1" }, "devDependencies": { diff --git a/package.json b/package.json index 1d5f93daa0..6429c5e7f2 100644 --- a/package.json +++ b/package.json @@ -66,7 +66,7 @@ "@changesets/cli": "2.27.11", "@commitlint/cli": "19.6.1", "@commitlint/config-conventional": "19.6.0", - "@react-three/fiber": "9.0.0-rc.1", + "@react-three/fiber": "8.17.10", "@remix-run/dev": "2.15.2", "@simonsmith/cypress-image-snapshot": "9.1.0", "@swc/core": "1.10.4", @@ -79,8 +79,8 @@ "@types/jest": "29.5.14", "@types/lodash.clamp": "4.0.9", "@types/lodash.shuffle": "4.2.9", - "@types/react": "19.0.2", - "@types/react-dom": "19.0.2", + "@types/react": "18.3.18", + "@types/react-dom": "18.3.5", "@types/react-lazyload": "3.2.3", "@types/react-native": "0.73.0", "@types/styled-components": "5.1.34", @@ -95,8 +95,8 @@ "mock-raf": "npm:@react-spring/mock-raf@1.1.1", "prettier": "3.4.2", "pretty-quick": "4.0.0", - "react": "19.0.0", - "react-dom": "19.0.0", + "react": "18.3.1", + "react-dom": "18.3.1", "react-konva": "18.2.10", "react-native": "0.76.5", "react-zdog": "1.2.2", diff --git a/yarn.lock b/yarn.lock index 25532e79dd..c0fdc04aab 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4682,7 +4682,6 @@ __metadata: "@remix-run/serve": 2.15.2 "@remix-run/server-runtime": 2.15.2 "@supabase/supabase-js": 2.47.10 - "@use-gesture/react": ^10.3.1 "@vanilla-extract/css": 1.17.0 "@vanilla-extract/dynamic": 2.1.2 "@vanilla-extract/recipes": 0.5.5 @@ -4703,7 +4702,6 @@ __metadata: react: 18.3.1 react-dom: 18.3.1 react-select: 5.9.0 - react-use-measure: ^2.1.1 refractor: 4.8.1 rehype-autolink-headings: 7.1.0 rehype-parse: 9.0.1 @@ -4910,48 +4908,6 @@ __metadata: languageName: node linkType: hard -"@react-three/fiber@npm:9.0.0-rc.1": - version: 9.0.0-rc.1 - resolution: "@react-three/fiber@npm:9.0.0-rc.1" - dependencies: - "@babel/runtime": ^7.17.8 - "@types/debounce": ^1.2.1 - "@types/react-reconciler": ^0.28.8 - "@types/webxr": "*" - base64-js: ^1.5.1 - buffer: ^6.0.3 - debounce: ^1.2.1 - its-fine: ^1.2.5 - react-reconciler: 0.31.0-rc.1 - scheduler: 0.25.0-rc.1 - suspend-react: ^0.1.3 - zustand: ^4.1.2 - peerDependencies: - expo: ">=43.0" - expo-asset: ">=8.4" - expo-file-system: ">=11.0" - expo-gl: ">=11.0" - react: ">=19.0" - react-dom: ">=19.0" - react-native: ">=0.69" - three: ">=0.141" - peerDependenciesMeta: - expo: - optional: true - expo-asset: - optional: true - expo-file-system: - optional: true - expo-gl: - optional: true - react-dom: - optional: true - react-native: - optional: true - checksum: faf3a5c328a6e016aeedfbc1b4cefe0b61c3202a384f5995546094c67047e30d7484a6dd997900f7cf5b7d5cf50d714efd904ba29e127878ef77f8b44a6c5ab9 - languageName: node - linkType: hard - "@remix-run/dev@npm:2.15.2": version: 2.15.2 resolution: "@remix-run/dev@npm:2.15.2" @@ -6091,12 +6047,12 @@ __metadata: languageName: node linkType: hard -"@types/react-dom@npm:19.0.2": - version: 19.0.2 - resolution: "@types/react-dom@npm:19.0.2" +"@types/react-dom@npm:18.3.5": + version: 18.3.5 + resolution: "@types/react-dom@npm:18.3.5" peerDependencies: - "@types/react": ^19.0.0 - checksum: d2ae81ec0b8eee7a4bf31918796fdaa34e8db68f69682163bc212d759de76783e6ffcc02c02722dcf508429067148841e6da81414cc730ca2a28c9c2b350c880 + "@types/react": ^18.0.0 + checksum: 95c757684f71e761515c5a11299e5feec550c72bb52975487f360e6f0d359b26454c26eaf2ce45dd22748205aa9b2c2fe0abe7005ebcbd233a7615283ac39a7d languageName: node linkType: hard @@ -6136,15 +6092,6 @@ __metadata: languageName: node linkType: hard -"@types/react-reconciler@npm:^0.28.8": - version: 0.28.9 - resolution: "@types/react-reconciler@npm:0.28.9" - peerDependencies: - "@types/react": "*" - checksum: 06257f693c7b148a4258c0d0a958288116100014e7b3c21ceaea2d55a668c71718f79b4105a9a0f35b480f3729e46960b40026d685719f9386b4ed63108dda09 - languageName: node - linkType: hard - "@types/react-transition-group@npm:^4.4.0": version: 4.4.10 resolution: "@types/react-transition-group@npm:4.4.10" @@ -6154,7 +6101,7 @@ __metadata: languageName: node linkType: hard -"@types/react@npm:*": +"@types/react@npm:*, @types/react@npm:18.3.18": version: 18.3.18 resolution: "@types/react@npm:18.3.18" dependencies: @@ -6164,15 +6111,6 @@ __metadata: languageName: node linkType: hard -"@types/react@npm:19.0.2": - version: 19.0.2 - resolution: "@types/react@npm:19.0.2" - dependencies: - csstype: ^3.0.2 - checksum: 2f12c2a84b778283884d41560c723d815153d88c56cacf25c0166329e9099c35c82c602a21d8831a381e2ef5574434ebd7bf09a636fe073558919474b0b3c9ed - languageName: node - linkType: hard - "@types/semver@npm:^7.5.0": version: 7.5.6 resolution: "@types/semver@npm:7.5.6" @@ -12570,7 +12508,7 @@ __metadata: languageName: node linkType: hard -"its-fine@npm:^1.0.6, its-fine@npm:^1.1.1, its-fine@npm:^1.2.5": +"its-fine@npm:^1.0.6, its-fine@npm:^1.1.1": version: 1.2.5 resolution: "its-fine@npm:1.2.5" dependencies: @@ -16948,17 +16886,6 @@ __metadata: languageName: node linkType: hard -"react-dom@npm:19.0.0": - version: 19.0.0 - resolution: "react-dom@npm:19.0.0" - dependencies: - scheduler: ^0.25.0 - peerDependencies: - react: ^19.0.0 - checksum: 009cc6e575263a0d1906f9dd4aa6532d2d3d0d71e4c2b7777c8fe4de585fa06b5b77cdc2e0fbaa2f3a4a5e5d3305c189ba152153f358ee7da4d9d9ba5d3a8975 - languageName: node - linkType: hard - "react-dropzone@npm:^12.0.0": version: 12.1.0 resolution: "react-dropzone@npm:12.1.0" @@ -17074,17 +17001,6 @@ __metadata: languageName: node linkType: hard -"react-reconciler@npm:0.31.0-rc.1": - version: 0.31.0-rc.1 - resolution: "react-reconciler@npm:0.31.0-rc.1" - dependencies: - scheduler: 0.25.0-rc.1 - peerDependencies: - react: 19.0.0-rc.1 - checksum: cb769884a9cfc8707d49849533d6fccd9854bed786c5f58d6525da6772428b8853a881947dca27eaa41d3861283f58142ae39a0bb991a0ffd00f83a1df533990 - languageName: node - linkType: hard - "react-reconciler@npm:^0.27.0": version: 0.27.0 resolution: "react-reconciler@npm:0.27.0" @@ -17209,7 +17125,7 @@ __metadata: "@changesets/cli": 2.27.11 "@commitlint/cli": 19.6.1 "@commitlint/config-conventional": 19.6.0 - "@react-three/fiber": 9.0.0-rc.1 + "@react-three/fiber": 8.17.10 "@remix-run/dev": 2.15.2 "@simonsmith/cypress-image-snapshot": 9.1.0 "@swc/core": 1.10.4 @@ -17222,8 +17138,8 @@ __metadata: "@types/jest": 29.5.14 "@types/lodash.clamp": 4.0.9 "@types/lodash.shuffle": 4.2.9 - "@types/react": 19.0.2 - "@types/react-dom": 19.0.2 + "@types/react": 18.3.18 + "@types/react-dom": 18.3.5 "@types/react-lazyload": 3.2.3 "@types/react-native": 0.73.0 "@types/styled-components": 5.1.34 @@ -17238,8 +17154,8 @@ __metadata: mock-raf: "npm:@react-spring/mock-raf@1.1.1" prettier: 3.4.2 pretty-quick: 4.0.0 - react: 19.0.0 - react-dom: 19.0.0 + react: 18.3.1 + react-dom: 18.3.1 react-konva: 18.2.10 react-native: 0.76.5 react-zdog: 1.2.2 @@ -17310,7 +17226,7 @@ __metadata: languageName: node linkType: hard -"react-use-measure@npm:2.1.1, react-use-measure@npm:^2.1.1": +"react-use-measure@npm:2.1.1": version: 2.1.1 resolution: "react-use-measure@npm:2.1.1" dependencies: @@ -17353,13 +17269,6 @@ __metadata: languageName: node linkType: hard -"react@npm:19.0.0": - version: 19.0.0 - resolution: "react@npm:19.0.0" - checksum: 86de15d85b2465feb40297a90319c325cb07cf27191a361d47bcfe8c6126c973d660125aa67b8f4cbbe39f15a2f32efd0c814e98196d8e5b68c567ba40a399c6 - languageName: node - linkType: hard - "read-yaml-file@npm:^1.1.0": version: 1.1.0 resolution: "read-yaml-file@npm:1.1.0" @@ -18126,13 +18035,6 @@ __metadata: languageName: node linkType: hard -"scheduler@npm:0.25.0-rc.1": - version: 0.25.0-rc.1 - resolution: "scheduler@npm:0.25.0-rc.1" - checksum: 03b56e352ab835ee4d2e55525380f622807e6d2407291474e21bdb70e8135da0e0d7bec3e86c7b0d68d83ffa6645799e947ce34e1bc91c982f4d6e5285cfedcd - languageName: node - linkType: hard - "scheduler@npm:^0.21.0": version: 0.21.0 resolution: "scheduler@npm:0.21.0" @@ -18151,13 +18053,6 @@ __metadata: languageName: node linkType: hard -"scheduler@npm:^0.25.0": - version: 0.25.0 - resolution: "scheduler@npm:0.25.0" - checksum: b7bb9fddbf743e521e9aaa5198a03ae823f5e104ebee0cb9ec625392bb7da0baa1c28ab29cee4b1e407a94e76acc6eee91eeb749614f91f853efda2613531566 - languageName: node - linkType: hard - "section-matter@npm:^1.0.0": version: 1.0.0 resolution: "section-matter@npm:1.0.0" @@ -21139,7 +21034,7 @@ __metadata: languageName: node linkType: hard -"zustand@npm:^4.1.2, zustand@npm:^4.3.2": +"zustand@npm:^4.3.2": version: 4.5.5 resolution: "zustand@npm:4.5.5" dependencies: From 20c7df5bdddc21c2b9ccf6f28be964a8ae44bab7 Mon Sep 17 00:00:00 2001 From: Cody Bennett Date: Wed, 8 Jan 2025 23:10:52 -0600 Subject: [PATCH 14/22] experiment: restore dep upgrade --- docs/package.json | 2 + package.json | 10 +- packages/core/src/SpringContext.tsx | 2 +- targets/three/src/index.ts | 2 +- yarn.lock | 160 +++++++++++++++++++++++++--- 5 files changed, 156 insertions(+), 20 deletions(-) diff --git a/docs/package.json b/docs/package.json index 032793171e..3ced67a027 100644 --- a/docs/package.json +++ b/docs/package.json @@ -32,6 +32,7 @@ "@remix-run/serve": "2.15.2", "@remix-run/server-runtime": "2.15.2", "@supabase/supabase-js": "2.47.10", + "@use-gesture/react": "^10.3.1", "@vanilla-extract/css": "1.17.0", "@vanilla-extract/dynamic": "2.1.2", "@vanilla-extract/recipes": "0.5.5", @@ -44,6 +45,7 @@ "react": "18.3.1", "react-dom": "18.3.1", "react-select": "5.9.0", + "react-use-measure": "^2.1.1", "zod": "3.24.1" }, "devDependencies": { diff --git a/package.json b/package.json index 6429c5e7f2..1d5f93daa0 100644 --- a/package.json +++ b/package.json @@ -66,7 +66,7 @@ "@changesets/cli": "2.27.11", "@commitlint/cli": "19.6.1", "@commitlint/config-conventional": "19.6.0", - "@react-three/fiber": "8.17.10", + "@react-three/fiber": "9.0.0-rc.1", "@remix-run/dev": "2.15.2", "@simonsmith/cypress-image-snapshot": "9.1.0", "@swc/core": "1.10.4", @@ -79,8 +79,8 @@ "@types/jest": "29.5.14", "@types/lodash.clamp": "4.0.9", "@types/lodash.shuffle": "4.2.9", - "@types/react": "18.3.18", - "@types/react-dom": "18.3.5", + "@types/react": "19.0.2", + "@types/react-dom": "19.0.2", "@types/react-lazyload": "3.2.3", "@types/react-native": "0.73.0", "@types/styled-components": "5.1.34", @@ -95,8 +95,8 @@ "mock-raf": "npm:@react-spring/mock-raf@1.1.1", "prettier": "3.4.2", "pretty-quick": "4.0.0", - "react": "18.3.1", - "react-dom": "18.3.1", + "react": "19.0.0", + "react-dom": "19.0.0", "react-konva": "18.2.10", "react-native": "0.76.5", "react-zdog": "1.2.2", diff --git a/packages/core/src/SpringContext.tsx b/packages/core/src/SpringContext.tsx index d1b62008e6..0667c310a5 100644 --- a/packages/core/src/SpringContext.tsx +++ b/packages/core/src/SpringContext.tsx @@ -51,7 +51,7 @@ function makeRenderableContext( if ('_context' in context.Provider) { context.Provider._context = context } else { - // @ts-expect-error + // @ts-ignore React 18 types disallow this context.Provider = context } diff --git a/targets/three/src/index.ts b/targets/three/src/index.ts index 7840ae51ad..a8c4a9410a 100644 --- a/targets/three/src/index.ts +++ b/targets/three/src/index.ts @@ -19,7 +19,7 @@ addEffect(() => { }) const host = createHost(primitives, { - // @ts-expect-error r3f related + // @ts-ignore related to R3F v8 applyAnimatedValues: applyProps, }) diff --git a/yarn.lock b/yarn.lock index c0fdc04aab..8e9373f13e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4682,6 +4682,7 @@ __metadata: "@remix-run/serve": 2.15.2 "@remix-run/server-runtime": 2.15.2 "@supabase/supabase-js": 2.47.10 + "@use-gesture/react": ^10.3.1 "@vanilla-extract/css": 1.17.0 "@vanilla-extract/dynamic": 2.1.2 "@vanilla-extract/recipes": 0.5.5 @@ -4702,6 +4703,7 @@ __metadata: react: 18.3.1 react-dom: 18.3.1 react-select: 5.9.0 + react-use-measure: ^2.1.1 refractor: 4.8.1 rehype-autolink-headings: 7.1.0 rehype-parse: 9.0.1 @@ -4908,6 +4910,48 @@ __metadata: languageName: node linkType: hard +"@react-three/fiber@npm:9.0.0-rc.1": + version: 9.0.0-rc.1 + resolution: "@react-three/fiber@npm:9.0.0-rc.1" + dependencies: + "@babel/runtime": ^7.17.8 + "@types/debounce": ^1.2.1 + "@types/react-reconciler": ^0.28.8 + "@types/webxr": "*" + base64-js: ^1.5.1 + buffer: ^6.0.3 + debounce: ^1.2.1 + its-fine: ^1.2.5 + react-reconciler: 0.31.0-rc.1 + scheduler: 0.25.0-rc.1 + suspend-react: ^0.1.3 + zustand: ^4.1.2 + peerDependencies: + expo: ">=43.0" + expo-asset: ">=8.4" + expo-file-system: ">=11.0" + expo-gl: ">=11.0" + react: ">=19.0" + react-dom: ">=19.0" + react-native: ">=0.69" + three: ">=0.141" + peerDependenciesMeta: + expo: + optional: true + expo-asset: + optional: true + expo-file-system: + optional: true + expo-gl: + optional: true + react-dom: + optional: true + react-native: + optional: true + checksum: faf3a5c328a6e016aeedfbc1b4cefe0b61c3202a384f5995546094c67047e30d7484a6dd997900f7cf5b7d5cf50d714efd904ba29e127878ef77f8b44a6c5ab9 + languageName: node + linkType: hard + "@remix-run/dev@npm:2.15.2": version: 2.15.2 resolution: "@remix-run/dev@npm:2.15.2" @@ -6047,12 +6091,12 @@ __metadata: languageName: node linkType: hard -"@types/react-dom@npm:18.3.5": - version: 18.3.5 - resolution: "@types/react-dom@npm:18.3.5" +"@types/react-dom@npm:19.0.2": + version: 19.0.2 + resolution: "@types/react-dom@npm:19.0.2" peerDependencies: - "@types/react": ^18.0.0 - checksum: 95c757684f71e761515c5a11299e5feec550c72bb52975487f360e6f0d359b26454c26eaf2ce45dd22748205aa9b2c2fe0abe7005ebcbd233a7615283ac39a7d + "@types/react": ^19.0.0 + checksum: d2ae81ec0b8eee7a4bf31918796fdaa34e8db68f69682163bc212d759de76783e6ffcc02c02722dcf508429067148841e6da81414cc730ca2a28c9c2b350c880 languageName: node linkType: hard @@ -6092,6 +6136,15 @@ __metadata: languageName: node linkType: hard +"@types/react-reconciler@npm:^0.28.8": + version: 0.28.9 + resolution: "@types/react-reconciler@npm:0.28.9" + peerDependencies: + "@types/react": "*" + checksum: 06257f693c7b148a4258c0d0a958288116100014e7b3c21ceaea2d55a668c71718f79b4105a9a0f35b480f3729e46960b40026d685719f9386b4ed63108dda09 + languageName: node + linkType: hard + "@types/react-transition-group@npm:^4.4.0": version: 4.4.10 resolution: "@types/react-transition-group@npm:4.4.10" @@ -6101,7 +6154,7 @@ __metadata: languageName: node linkType: hard -"@types/react@npm:*, @types/react@npm:18.3.18": +"@types/react@npm:*": version: 18.3.18 resolution: "@types/react@npm:18.3.18" dependencies: @@ -6111,6 +6164,15 @@ __metadata: languageName: node linkType: hard +"@types/react@npm:19.0.2": + version: 19.0.2 + resolution: "@types/react@npm:19.0.2" + dependencies: + csstype: ^3.0.2 + checksum: 2f12c2a84b778283884d41560c723d815153d88c56cacf25c0166329e9099c35c82c602a21d8831a381e2ef5574434ebd7bf09a636fe073558919474b0b3c9ed + languageName: node + linkType: hard + "@types/semver@npm:^7.5.0": version: 7.5.6 resolution: "@types/semver@npm:7.5.6" @@ -12508,7 +12570,7 @@ __metadata: languageName: node linkType: hard -"its-fine@npm:^1.0.6, its-fine@npm:^1.1.1": +"its-fine@npm:^1.0.6, its-fine@npm:^1.1.1, its-fine@npm:^1.2.5": version: 1.2.5 resolution: "its-fine@npm:1.2.5" dependencies: @@ -16886,6 +16948,17 @@ __metadata: languageName: node linkType: hard +"react-dom@npm:19.0.0": + version: 19.0.0 + resolution: "react-dom@npm:19.0.0" + dependencies: + scheduler: ^0.25.0 + peerDependencies: + react: ^19.0.0 + checksum: 009cc6e575263a0d1906f9dd4aa6532d2d3d0d71e4c2b7777c8fe4de585fa06b5b77cdc2e0fbaa2f3a4a5e5d3305c189ba152153f358ee7da4d9d9ba5d3a8975 + languageName: node + linkType: hard + "react-dropzone@npm:^12.0.0": version: 12.1.0 resolution: "react-dropzone@npm:12.1.0" @@ -17001,6 +17074,17 @@ __metadata: languageName: node linkType: hard +"react-reconciler@npm:0.31.0-rc.1": + version: 0.31.0-rc.1 + resolution: "react-reconciler@npm:0.31.0-rc.1" + dependencies: + scheduler: 0.25.0-rc.1 + peerDependencies: + react: 19.0.0-rc.1 + checksum: cb769884a9cfc8707d49849533d6fccd9854bed786c5f58d6525da6772428b8853a881947dca27eaa41d3861283f58142ae39a0bb991a0ffd00f83a1df533990 + languageName: node + linkType: hard + "react-reconciler@npm:^0.27.0": version: 0.27.0 resolution: "react-reconciler@npm:0.27.0" @@ -17125,7 +17209,7 @@ __metadata: "@changesets/cli": 2.27.11 "@commitlint/cli": 19.6.1 "@commitlint/config-conventional": 19.6.0 - "@react-three/fiber": 8.17.10 + "@react-three/fiber": 9.0.0-rc.1 "@remix-run/dev": 2.15.2 "@simonsmith/cypress-image-snapshot": 9.1.0 "@swc/core": 1.10.4 @@ -17138,8 +17222,8 @@ __metadata: "@types/jest": 29.5.14 "@types/lodash.clamp": 4.0.9 "@types/lodash.shuffle": 4.2.9 - "@types/react": 18.3.18 - "@types/react-dom": 18.3.5 + "@types/react": 19.0.2 + "@types/react-dom": 19.0.2 "@types/react-lazyload": 3.2.3 "@types/react-native": 0.73.0 "@types/styled-components": 5.1.34 @@ -17154,8 +17238,8 @@ __metadata: mock-raf: "npm:@react-spring/mock-raf@1.1.1" prettier: 3.4.2 pretty-quick: 4.0.0 - react: 18.3.1 - react-dom: 18.3.1 + react: 19.0.0 + react-dom: 19.0.0 react-konva: 18.2.10 react-native: 0.76.5 react-zdog: 1.2.2 @@ -17226,7 +17310,7 @@ __metadata: languageName: node linkType: hard -"react-use-measure@npm:2.1.1": +"react-use-measure@npm:2.1.1, react-use-measure@npm:^2.1.1": version: 2.1.1 resolution: "react-use-measure@npm:2.1.1" dependencies: @@ -17269,6 +17353,13 @@ __metadata: languageName: node linkType: hard +"react@npm:19.0.0": + version: 19.0.0 + resolution: "react@npm:19.0.0" + checksum: 86de15d85b2465feb40297a90319c325cb07cf27191a361d47bcfe8c6126c973d660125aa67b8f4cbbe39f15a2f32efd0c814e98196d8e5b68c567ba40a399c6 + languageName: node + linkType: hard + "read-yaml-file@npm:^1.1.0": version: 1.1.0 resolution: "read-yaml-file@npm:1.1.0" @@ -18035,6 +18126,13 @@ __metadata: languageName: node linkType: hard +"scheduler@npm:0.25.0-rc.1": + version: 0.25.0-rc.1 + resolution: "scheduler@npm:0.25.0-rc.1" + checksum: 03b56e352ab835ee4d2e55525380f622807e6d2407291474e21bdb70e8135da0e0d7bec3e86c7b0d68d83ffa6645799e947ce34e1bc91c982f4d6e5285cfedcd + languageName: node + linkType: hard + "scheduler@npm:^0.21.0": version: 0.21.0 resolution: "scheduler@npm:0.21.0" @@ -18053,6 +18151,13 @@ __metadata: languageName: node linkType: hard +"scheduler@npm:^0.25.0": + version: 0.25.0 + resolution: "scheduler@npm:0.25.0" + checksum: b7bb9fddbf743e521e9aaa5198a03ae823f5e104ebee0cb9ec625392bb7da0baa1c28ab29cee4b1e407a94e76acc6eee91eeb749614f91f853efda2613531566 + languageName: node + linkType: hard + "section-matter@npm:^1.0.0": version: 1.0.0 resolution: "section-matter@npm:1.0.0" @@ -20138,6 +20243,15 @@ __metadata: languageName: node linkType: hard +"use-sync-external-store@npm:^1.2.2": + version: 1.4.0 + resolution: "use-sync-external-store@npm:1.4.0" + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 + checksum: dc3843a1b59ac8bd01417bd79498d4c688d5df8bf4801be50008ef4bfaacb349058c0b1605b5b43c828e0a2d62722d7e861573b3f31cea77a7f23e8b0fc2f7e3 + languageName: node + linkType: hard + "util-deprecate@npm:^1.0.1, util-deprecate@npm:^1.0.2, util-deprecate@npm:~1.0.1": version: 1.0.2 resolution: "util-deprecate@npm:1.0.2" @@ -21034,6 +21148,26 @@ __metadata: languageName: node linkType: hard +"zustand@npm:^4.1.2": + version: 4.5.6 + resolution: "zustand@npm:4.5.6" + dependencies: + use-sync-external-store: ^1.2.2 + peerDependencies: + "@types/react": ">=16.8" + immer: ">=9.0.6" + react: ">=16.8" + peerDependenciesMeta: + "@types/react": + optional: true + immer: + optional: true + react: + optional: true + checksum: c4e9c809c92195fa2f9e8e0cd6631b6830fc9676343c8584c20cf26d402f220c54ae0479a299dbcd5e1cdfc5977f116838f1b5f39d6a4997ff727c6cebe60d3f + languageName: node + linkType: hard + "zustand@npm:^4.3.2": version: 4.5.5 resolution: "zustand@npm:4.5.5" From 6c069501a46c39813c90bb3d77e49e5dbd3605af Mon Sep 17 00:00:00 2001 From: Cody Bennett Date: Fri, 10 Jan 2025 07:11:38 -0600 Subject: [PATCH 15/22] experiment: keep MutableRefObject --- packages/core/src/hooks/useInView.ts | 2 +- packages/core/src/hooks/useResize.ts | 6 +++--- packages/core/src/hooks/useScroll.ts | 6 +++--- packages/parallax/src/index.tsx | 4 ++-- packages/types/src/utils.ts | 4 ++-- 5 files changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/core/src/hooks/useInView.ts b/packages/core/src/hooks/useInView.ts index 28ec706022..90dc6c9067 100644 --- a/packages/core/src/hooks/useInView.ts +++ b/packages/core/src/hooks/useInView.ts @@ -8,7 +8,7 @@ import { Valid } from '../types/common' export interface IntersectionArgs extends Omit { - root?: React.RefObject + root?: React.MutableRefObject once?: boolean amount?: 'any' | 'all' | number | number[] } diff --git a/packages/core/src/hooks/useResize.ts b/packages/core/src/hooks/useResize.ts index 5b3a9a86ac..c5b4c2c06b 100644 --- a/packages/core/src/hooks/useResize.ts +++ b/packages/core/src/hooks/useResize.ts @@ -1,4 +1,4 @@ -import { RefObject } from 'react' +import { MutableRefObject } from 'react' import { onResize, each, useIsomorphicLayoutEffect } from '@react-spring/shared' import { SpringProps, SpringValues } from '../types' @@ -6,7 +6,7 @@ import { SpringProps, SpringValues } from '../types' import { useSpring } from './useSpring' export interface UseResizeOptions extends Omit { - container?: RefObject + container?: MutableRefObject } /** @@ -30,7 +30,7 @@ export interface UseResizeOptions extends Omit { ``` * * @param {UseResizeOptions} UseResizeOptions options for the useScroll hook. - * @param {RefObject} UseResizeOptions.container the container to listen to scroll events on, defaults to the window. + * @param {MutableRefObject} UseResizeOptions.container the container to listen to scroll events on, defaults to the window. * * @returns {SpringValues<{width: number; height: number;}>} SpringValues the collection of values returned from the inner hook */ diff --git a/packages/core/src/hooks/useScroll.ts b/packages/core/src/hooks/useScroll.ts index eb6520370d..58b05c7f5f 100644 --- a/packages/core/src/hooks/useScroll.ts +++ b/packages/core/src/hooks/useScroll.ts @@ -1,4 +1,4 @@ -import { RefObject } from 'react' +import { MutableRefObject } from 'react' import { each, onScroll, useIsomorphicLayoutEffect } from '@react-spring/shared' import { SpringProps, SpringValues } from '../types' @@ -6,7 +6,7 @@ import { SpringProps, SpringValues } from '../types' import { useSpring } from './useSpring' export interface UseScrollOptions extends Omit { - container?: RefObject + container?: MutableRefObject } /** @@ -30,7 +30,7 @@ export interface UseScrollOptions extends Omit { ``` * * @param {UseScrollOptions} useScrollOptions options for the useScroll hook. - * @param {RefObject} useScrollOptions.container the container to listen to scroll events on, defaults to the window. + * @param {MutableRefObject} useScrollOptions.container the container to listen to scroll events on, defaults to the window. * * @returns {SpringValues<{scrollX: number; scrollY: number; scrollXProgress: number; scrollYProgress: number}>} SpringValues the collection of values returned from the inner hook */ diff --git a/packages/parallax/src/index.tsx b/packages/parallax/src/index.tsx index 4920eb89b8..9594c852bd 100644 --- a/packages/parallax/src/index.tsx +++ b/packages/parallax/src/index.tsx @@ -52,8 +52,8 @@ export interface IParallax { current: number controller: Controller<{ scroll: number }> layers: Set - container: React.RefObject - content: React.RefObject + container: React.MutableRefObject + content: React.MutableRefObject scrollTo(offset: number): void update(): void stop(): void diff --git a/packages/types/src/utils.ts b/packages/types/src/utils.ts index 852037e823..19807b4532 100644 --- a/packages/types/src/utils.ts +++ b/packages/types/src/utils.ts @@ -23,7 +23,7 @@ */ import * as React from 'react' -import { ReactElement, RefObject } from 'react' +import { ReactElement, MutableRefObject } from 'react' /** Ensure each type of `T` is an array */ export type Arrify = [T, T] extends [infer T, infer DT] @@ -139,7 +139,7 @@ export interface Disposable { } // react.d.ts -export type RefProp = RefObject +export type RefProp = MutableRefObject // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/34237 export type ElementType

= From 33364f8cda0ac49cbe05ba9ef98c8b31ef595b46 Mon Sep 17 00:00:00 2001 From: Cody Bennett Date: Fri, 10 Jan 2025 07:12:19 -0600 Subject: [PATCH 16/22] experiment: revert deps upgrade --- docs/package.json | 2 - package.json | 10 +-- yarn.lock | 160 ++++------------------------------------------ 3 files changed, 18 insertions(+), 154 deletions(-) diff --git a/docs/package.json b/docs/package.json index 3ced67a027..032793171e 100644 --- a/docs/package.json +++ b/docs/package.json @@ -32,7 +32,6 @@ "@remix-run/serve": "2.15.2", "@remix-run/server-runtime": "2.15.2", "@supabase/supabase-js": "2.47.10", - "@use-gesture/react": "^10.3.1", "@vanilla-extract/css": "1.17.0", "@vanilla-extract/dynamic": "2.1.2", "@vanilla-extract/recipes": "0.5.5", @@ -45,7 +44,6 @@ "react": "18.3.1", "react-dom": "18.3.1", "react-select": "5.9.0", - "react-use-measure": "^2.1.1", "zod": "3.24.1" }, "devDependencies": { diff --git a/package.json b/package.json index 1d5f93daa0..6429c5e7f2 100644 --- a/package.json +++ b/package.json @@ -66,7 +66,7 @@ "@changesets/cli": "2.27.11", "@commitlint/cli": "19.6.1", "@commitlint/config-conventional": "19.6.0", - "@react-three/fiber": "9.0.0-rc.1", + "@react-three/fiber": "8.17.10", "@remix-run/dev": "2.15.2", "@simonsmith/cypress-image-snapshot": "9.1.0", "@swc/core": "1.10.4", @@ -79,8 +79,8 @@ "@types/jest": "29.5.14", "@types/lodash.clamp": "4.0.9", "@types/lodash.shuffle": "4.2.9", - "@types/react": "19.0.2", - "@types/react-dom": "19.0.2", + "@types/react": "18.3.18", + "@types/react-dom": "18.3.5", "@types/react-lazyload": "3.2.3", "@types/react-native": "0.73.0", "@types/styled-components": "5.1.34", @@ -95,8 +95,8 @@ "mock-raf": "npm:@react-spring/mock-raf@1.1.1", "prettier": "3.4.2", "pretty-quick": "4.0.0", - "react": "19.0.0", - "react-dom": "19.0.0", + "react": "18.3.1", + "react-dom": "18.3.1", "react-konva": "18.2.10", "react-native": "0.76.5", "react-zdog": "1.2.2", diff --git a/yarn.lock b/yarn.lock index 8e9373f13e..c0fdc04aab 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4682,7 +4682,6 @@ __metadata: "@remix-run/serve": 2.15.2 "@remix-run/server-runtime": 2.15.2 "@supabase/supabase-js": 2.47.10 - "@use-gesture/react": ^10.3.1 "@vanilla-extract/css": 1.17.0 "@vanilla-extract/dynamic": 2.1.2 "@vanilla-extract/recipes": 0.5.5 @@ -4703,7 +4702,6 @@ __metadata: react: 18.3.1 react-dom: 18.3.1 react-select: 5.9.0 - react-use-measure: ^2.1.1 refractor: 4.8.1 rehype-autolink-headings: 7.1.0 rehype-parse: 9.0.1 @@ -4910,48 +4908,6 @@ __metadata: languageName: node linkType: hard -"@react-three/fiber@npm:9.0.0-rc.1": - version: 9.0.0-rc.1 - resolution: "@react-three/fiber@npm:9.0.0-rc.1" - dependencies: - "@babel/runtime": ^7.17.8 - "@types/debounce": ^1.2.1 - "@types/react-reconciler": ^0.28.8 - "@types/webxr": "*" - base64-js: ^1.5.1 - buffer: ^6.0.3 - debounce: ^1.2.1 - its-fine: ^1.2.5 - react-reconciler: 0.31.0-rc.1 - scheduler: 0.25.0-rc.1 - suspend-react: ^0.1.3 - zustand: ^4.1.2 - peerDependencies: - expo: ">=43.0" - expo-asset: ">=8.4" - expo-file-system: ">=11.0" - expo-gl: ">=11.0" - react: ">=19.0" - react-dom: ">=19.0" - react-native: ">=0.69" - three: ">=0.141" - peerDependenciesMeta: - expo: - optional: true - expo-asset: - optional: true - expo-file-system: - optional: true - expo-gl: - optional: true - react-dom: - optional: true - react-native: - optional: true - checksum: faf3a5c328a6e016aeedfbc1b4cefe0b61c3202a384f5995546094c67047e30d7484a6dd997900f7cf5b7d5cf50d714efd904ba29e127878ef77f8b44a6c5ab9 - languageName: node - linkType: hard - "@remix-run/dev@npm:2.15.2": version: 2.15.2 resolution: "@remix-run/dev@npm:2.15.2" @@ -6091,12 +6047,12 @@ __metadata: languageName: node linkType: hard -"@types/react-dom@npm:19.0.2": - version: 19.0.2 - resolution: "@types/react-dom@npm:19.0.2" +"@types/react-dom@npm:18.3.5": + version: 18.3.5 + resolution: "@types/react-dom@npm:18.3.5" peerDependencies: - "@types/react": ^19.0.0 - checksum: d2ae81ec0b8eee7a4bf31918796fdaa34e8db68f69682163bc212d759de76783e6ffcc02c02722dcf508429067148841e6da81414cc730ca2a28c9c2b350c880 + "@types/react": ^18.0.0 + checksum: 95c757684f71e761515c5a11299e5feec550c72bb52975487f360e6f0d359b26454c26eaf2ce45dd22748205aa9b2c2fe0abe7005ebcbd233a7615283ac39a7d languageName: node linkType: hard @@ -6136,15 +6092,6 @@ __metadata: languageName: node linkType: hard -"@types/react-reconciler@npm:^0.28.8": - version: 0.28.9 - resolution: "@types/react-reconciler@npm:0.28.9" - peerDependencies: - "@types/react": "*" - checksum: 06257f693c7b148a4258c0d0a958288116100014e7b3c21ceaea2d55a668c71718f79b4105a9a0f35b480f3729e46960b40026d685719f9386b4ed63108dda09 - languageName: node - linkType: hard - "@types/react-transition-group@npm:^4.4.0": version: 4.4.10 resolution: "@types/react-transition-group@npm:4.4.10" @@ -6154,7 +6101,7 @@ __metadata: languageName: node linkType: hard -"@types/react@npm:*": +"@types/react@npm:*, @types/react@npm:18.3.18": version: 18.3.18 resolution: "@types/react@npm:18.3.18" dependencies: @@ -6164,15 +6111,6 @@ __metadata: languageName: node linkType: hard -"@types/react@npm:19.0.2": - version: 19.0.2 - resolution: "@types/react@npm:19.0.2" - dependencies: - csstype: ^3.0.2 - checksum: 2f12c2a84b778283884d41560c723d815153d88c56cacf25c0166329e9099c35c82c602a21d8831a381e2ef5574434ebd7bf09a636fe073558919474b0b3c9ed - languageName: node - linkType: hard - "@types/semver@npm:^7.5.0": version: 7.5.6 resolution: "@types/semver@npm:7.5.6" @@ -12570,7 +12508,7 @@ __metadata: languageName: node linkType: hard -"its-fine@npm:^1.0.6, its-fine@npm:^1.1.1, its-fine@npm:^1.2.5": +"its-fine@npm:^1.0.6, its-fine@npm:^1.1.1": version: 1.2.5 resolution: "its-fine@npm:1.2.5" dependencies: @@ -16948,17 +16886,6 @@ __metadata: languageName: node linkType: hard -"react-dom@npm:19.0.0": - version: 19.0.0 - resolution: "react-dom@npm:19.0.0" - dependencies: - scheduler: ^0.25.0 - peerDependencies: - react: ^19.0.0 - checksum: 009cc6e575263a0d1906f9dd4aa6532d2d3d0d71e4c2b7777c8fe4de585fa06b5b77cdc2e0fbaa2f3a4a5e5d3305c189ba152153f358ee7da4d9d9ba5d3a8975 - languageName: node - linkType: hard - "react-dropzone@npm:^12.0.0": version: 12.1.0 resolution: "react-dropzone@npm:12.1.0" @@ -17074,17 +17001,6 @@ __metadata: languageName: node linkType: hard -"react-reconciler@npm:0.31.0-rc.1": - version: 0.31.0-rc.1 - resolution: "react-reconciler@npm:0.31.0-rc.1" - dependencies: - scheduler: 0.25.0-rc.1 - peerDependencies: - react: 19.0.0-rc.1 - checksum: cb769884a9cfc8707d49849533d6fccd9854bed786c5f58d6525da6772428b8853a881947dca27eaa41d3861283f58142ae39a0bb991a0ffd00f83a1df533990 - languageName: node - linkType: hard - "react-reconciler@npm:^0.27.0": version: 0.27.0 resolution: "react-reconciler@npm:0.27.0" @@ -17209,7 +17125,7 @@ __metadata: "@changesets/cli": 2.27.11 "@commitlint/cli": 19.6.1 "@commitlint/config-conventional": 19.6.0 - "@react-three/fiber": 9.0.0-rc.1 + "@react-three/fiber": 8.17.10 "@remix-run/dev": 2.15.2 "@simonsmith/cypress-image-snapshot": 9.1.0 "@swc/core": 1.10.4 @@ -17222,8 +17138,8 @@ __metadata: "@types/jest": 29.5.14 "@types/lodash.clamp": 4.0.9 "@types/lodash.shuffle": 4.2.9 - "@types/react": 19.0.2 - "@types/react-dom": 19.0.2 + "@types/react": 18.3.18 + "@types/react-dom": 18.3.5 "@types/react-lazyload": 3.2.3 "@types/react-native": 0.73.0 "@types/styled-components": 5.1.34 @@ -17238,8 +17154,8 @@ __metadata: mock-raf: "npm:@react-spring/mock-raf@1.1.1" prettier: 3.4.2 pretty-quick: 4.0.0 - react: 19.0.0 - react-dom: 19.0.0 + react: 18.3.1 + react-dom: 18.3.1 react-konva: 18.2.10 react-native: 0.76.5 react-zdog: 1.2.2 @@ -17310,7 +17226,7 @@ __metadata: languageName: node linkType: hard -"react-use-measure@npm:2.1.1, react-use-measure@npm:^2.1.1": +"react-use-measure@npm:2.1.1": version: 2.1.1 resolution: "react-use-measure@npm:2.1.1" dependencies: @@ -17353,13 +17269,6 @@ __metadata: languageName: node linkType: hard -"react@npm:19.0.0": - version: 19.0.0 - resolution: "react@npm:19.0.0" - checksum: 86de15d85b2465feb40297a90319c325cb07cf27191a361d47bcfe8c6126c973d660125aa67b8f4cbbe39f15a2f32efd0c814e98196d8e5b68c567ba40a399c6 - languageName: node - linkType: hard - "read-yaml-file@npm:^1.1.0": version: 1.1.0 resolution: "read-yaml-file@npm:1.1.0" @@ -18126,13 +18035,6 @@ __metadata: languageName: node linkType: hard -"scheduler@npm:0.25.0-rc.1": - version: 0.25.0-rc.1 - resolution: "scheduler@npm:0.25.0-rc.1" - checksum: 03b56e352ab835ee4d2e55525380f622807e6d2407291474e21bdb70e8135da0e0d7bec3e86c7b0d68d83ffa6645799e947ce34e1bc91c982f4d6e5285cfedcd - languageName: node - linkType: hard - "scheduler@npm:^0.21.0": version: 0.21.0 resolution: "scheduler@npm:0.21.0" @@ -18151,13 +18053,6 @@ __metadata: languageName: node linkType: hard -"scheduler@npm:^0.25.0": - version: 0.25.0 - resolution: "scheduler@npm:0.25.0" - checksum: b7bb9fddbf743e521e9aaa5198a03ae823f5e104ebee0cb9ec625392bb7da0baa1c28ab29cee4b1e407a94e76acc6eee91eeb749614f91f853efda2613531566 - languageName: node - linkType: hard - "section-matter@npm:^1.0.0": version: 1.0.0 resolution: "section-matter@npm:1.0.0" @@ -20243,15 +20138,6 @@ __metadata: languageName: node linkType: hard -"use-sync-external-store@npm:^1.2.2": - version: 1.4.0 - resolution: "use-sync-external-store@npm:1.4.0" - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 - checksum: dc3843a1b59ac8bd01417bd79498d4c688d5df8bf4801be50008ef4bfaacb349058c0b1605b5b43c828e0a2d62722d7e861573b3f31cea77a7f23e8b0fc2f7e3 - languageName: node - linkType: hard - "util-deprecate@npm:^1.0.1, util-deprecate@npm:^1.0.2, util-deprecate@npm:~1.0.1": version: 1.0.2 resolution: "util-deprecate@npm:1.0.2" @@ -21148,26 +21034,6 @@ __metadata: languageName: node linkType: hard -"zustand@npm:^4.1.2": - version: 4.5.6 - resolution: "zustand@npm:4.5.6" - dependencies: - use-sync-external-store: ^1.2.2 - peerDependencies: - "@types/react": ">=16.8" - immer: ">=9.0.6" - react: ">=16.8" - peerDependenciesMeta: - "@types/react": - optional: true - immer: - optional: true - react: - optional: true - checksum: c4e9c809c92195fa2f9e8e0cd6631b6830fc9676343c8584c20cf26d402f220c54ae0479a299dbcd5e1cdfc5977f116838f1b5f39d6a4997ff727c6cebe60d3f - languageName: node - linkType: hard - "zustand@npm:^4.3.2": version: 4.5.5 resolution: "zustand@npm:4.5.5" From 51312c33199a9894f2309fb92a227e4eb2856659 Mon Sep 17 00:00:00 2001 From: Cody Bennett Date: Fri, 10 Jan 2025 07:15:17 -0600 Subject: [PATCH 17/22] Revert "experiment: keep MutableRefObject" This reverts commit 6c069501a46c39813c90bb3d77e49e5dbd3605af. --- packages/core/src/hooks/useInView.ts | 2 +- packages/core/src/hooks/useResize.ts | 6 +++--- packages/core/src/hooks/useScroll.ts | 6 +++--- packages/parallax/src/index.tsx | 4 ++-- packages/types/src/utils.ts | 4 ++-- 5 files changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/core/src/hooks/useInView.ts b/packages/core/src/hooks/useInView.ts index 90dc6c9067..28ec706022 100644 --- a/packages/core/src/hooks/useInView.ts +++ b/packages/core/src/hooks/useInView.ts @@ -8,7 +8,7 @@ import { Valid } from '../types/common' export interface IntersectionArgs extends Omit { - root?: React.MutableRefObject + root?: React.RefObject once?: boolean amount?: 'any' | 'all' | number | number[] } diff --git a/packages/core/src/hooks/useResize.ts b/packages/core/src/hooks/useResize.ts index c5b4c2c06b..5b3a9a86ac 100644 --- a/packages/core/src/hooks/useResize.ts +++ b/packages/core/src/hooks/useResize.ts @@ -1,4 +1,4 @@ -import { MutableRefObject } from 'react' +import { RefObject } from 'react' import { onResize, each, useIsomorphicLayoutEffect } from '@react-spring/shared' import { SpringProps, SpringValues } from '../types' @@ -6,7 +6,7 @@ import { SpringProps, SpringValues } from '../types' import { useSpring } from './useSpring' export interface UseResizeOptions extends Omit { - container?: MutableRefObject + container?: RefObject } /** @@ -30,7 +30,7 @@ export interface UseResizeOptions extends Omit { ``` * * @param {UseResizeOptions} UseResizeOptions options for the useScroll hook. - * @param {MutableRefObject} UseResizeOptions.container the container to listen to scroll events on, defaults to the window. + * @param {RefObject} UseResizeOptions.container the container to listen to scroll events on, defaults to the window. * * @returns {SpringValues<{width: number; height: number;}>} SpringValues the collection of values returned from the inner hook */ diff --git a/packages/core/src/hooks/useScroll.ts b/packages/core/src/hooks/useScroll.ts index 58b05c7f5f..eb6520370d 100644 --- a/packages/core/src/hooks/useScroll.ts +++ b/packages/core/src/hooks/useScroll.ts @@ -1,4 +1,4 @@ -import { MutableRefObject } from 'react' +import { RefObject } from 'react' import { each, onScroll, useIsomorphicLayoutEffect } from '@react-spring/shared' import { SpringProps, SpringValues } from '../types' @@ -6,7 +6,7 @@ import { SpringProps, SpringValues } from '../types' import { useSpring } from './useSpring' export interface UseScrollOptions extends Omit { - container?: MutableRefObject + container?: RefObject } /** @@ -30,7 +30,7 @@ export interface UseScrollOptions extends Omit { ``` * * @param {UseScrollOptions} useScrollOptions options for the useScroll hook. - * @param {MutableRefObject} useScrollOptions.container the container to listen to scroll events on, defaults to the window. + * @param {RefObject} useScrollOptions.container the container to listen to scroll events on, defaults to the window. * * @returns {SpringValues<{scrollX: number; scrollY: number; scrollXProgress: number; scrollYProgress: number}>} SpringValues the collection of values returned from the inner hook */ diff --git a/packages/parallax/src/index.tsx b/packages/parallax/src/index.tsx index 9594c852bd..4920eb89b8 100644 --- a/packages/parallax/src/index.tsx +++ b/packages/parallax/src/index.tsx @@ -52,8 +52,8 @@ export interface IParallax { current: number controller: Controller<{ scroll: number }> layers: Set - container: React.MutableRefObject - content: React.MutableRefObject + container: React.RefObject + content: React.RefObject scrollTo(offset: number): void update(): void stop(): void diff --git a/packages/types/src/utils.ts b/packages/types/src/utils.ts index 19807b4532..852037e823 100644 --- a/packages/types/src/utils.ts +++ b/packages/types/src/utils.ts @@ -23,7 +23,7 @@ */ import * as React from 'react' -import { ReactElement, MutableRefObject } from 'react' +import { ReactElement, RefObject } from 'react' /** Ensure each type of `T` is an array */ export type Arrify = [T, T] extends [infer T, infer DT] @@ -139,7 +139,7 @@ export interface Disposable { } // react.d.ts -export type RefProp = MutableRefObject +export type RefProp = RefObject // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/34237 export type ElementType

= From 59579e23e407da5faf7f9e1230a0675b00578c82 Mon Sep 17 00:00:00 2001 From: Cody Bennett Date: Fri, 10 Jan 2025 07:17:37 -0600 Subject: [PATCH 18/22] fix: add annotation for 18.3 immutable useRef --- packages/animated/src/withAnimated.tsx | 1 + packages/shared/src/hooks/useMemoOne.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/animated/src/withAnimated.tsx b/packages/animated/src/withAnimated.tsx index d26fa6166b..f2fcdf6cb9 100644 --- a/packages/animated/src/withAnimated.tsx +++ b/packages/animated/src/withAnimated.tsx @@ -68,6 +68,7 @@ export const withAnimated = (Component: any, host: HostConfig) => { const observerRef = useRef(null) useIsomorphicLayoutEffect(() => { + // @ts-expect-error useRef immutable in 18.3 types observerRef.current = observer // Observe the latest dependencies. diff --git a/packages/shared/src/hooks/useMemoOne.ts b/packages/shared/src/hooks/useMemoOne.ts index a06b84d052..2ceac60a6d 100644 --- a/packages/shared/src/hooks/useMemoOne.ts +++ b/packages/shared/src/hooks/useMemoOne.ts @@ -33,6 +33,7 @@ export function useMemoOne(getResult: () => T, inputs?: any[]): T { } useEffect(() => { + // @ts-expect-error useRef immutable in 18.3 types committed.current = cache if (prevCache == initial) { initial.inputs = initial.result = undefined From a61d9e7a83fb2af6020af3463e697c214f19e1a2 Mon Sep 17 00:00:00 2001 From: Cody Bennett Date: Fri, 10 Jan 2025 07:22:42 -0600 Subject: [PATCH 19/22] experiment: keep MutableRefObject --- packages/core/src/hooks/useInView.ts | 2 +- packages/core/src/hooks/useResize.ts | 6 +++--- packages/core/src/hooks/useScroll.ts | 6 +++--- packages/parallax/src/index.tsx | 4 ++-- packages/types/src/utils.ts | 4 ++-- 5 files changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/core/src/hooks/useInView.ts b/packages/core/src/hooks/useInView.ts index 28ec706022..90dc6c9067 100644 --- a/packages/core/src/hooks/useInView.ts +++ b/packages/core/src/hooks/useInView.ts @@ -8,7 +8,7 @@ import { Valid } from '../types/common' export interface IntersectionArgs extends Omit { - root?: React.RefObject + root?: React.MutableRefObject once?: boolean amount?: 'any' | 'all' | number | number[] } diff --git a/packages/core/src/hooks/useResize.ts b/packages/core/src/hooks/useResize.ts index 5b3a9a86ac..c5b4c2c06b 100644 --- a/packages/core/src/hooks/useResize.ts +++ b/packages/core/src/hooks/useResize.ts @@ -1,4 +1,4 @@ -import { RefObject } from 'react' +import { MutableRefObject } from 'react' import { onResize, each, useIsomorphicLayoutEffect } from '@react-spring/shared' import { SpringProps, SpringValues } from '../types' @@ -6,7 +6,7 @@ import { SpringProps, SpringValues } from '../types' import { useSpring } from './useSpring' export interface UseResizeOptions extends Omit { - container?: RefObject + container?: MutableRefObject } /** @@ -30,7 +30,7 @@ export interface UseResizeOptions extends Omit { ``` * * @param {UseResizeOptions} UseResizeOptions options for the useScroll hook. - * @param {RefObject} UseResizeOptions.container the container to listen to scroll events on, defaults to the window. + * @param {MutableRefObject} UseResizeOptions.container the container to listen to scroll events on, defaults to the window. * * @returns {SpringValues<{width: number; height: number;}>} SpringValues the collection of values returned from the inner hook */ diff --git a/packages/core/src/hooks/useScroll.ts b/packages/core/src/hooks/useScroll.ts index eb6520370d..58b05c7f5f 100644 --- a/packages/core/src/hooks/useScroll.ts +++ b/packages/core/src/hooks/useScroll.ts @@ -1,4 +1,4 @@ -import { RefObject } from 'react' +import { MutableRefObject } from 'react' import { each, onScroll, useIsomorphicLayoutEffect } from '@react-spring/shared' import { SpringProps, SpringValues } from '../types' @@ -6,7 +6,7 @@ import { SpringProps, SpringValues } from '../types' import { useSpring } from './useSpring' export interface UseScrollOptions extends Omit { - container?: RefObject + container?: MutableRefObject } /** @@ -30,7 +30,7 @@ export interface UseScrollOptions extends Omit { ``` * * @param {UseScrollOptions} useScrollOptions options for the useScroll hook. - * @param {RefObject} useScrollOptions.container the container to listen to scroll events on, defaults to the window. + * @param {MutableRefObject} useScrollOptions.container the container to listen to scroll events on, defaults to the window. * * @returns {SpringValues<{scrollX: number; scrollY: number; scrollXProgress: number; scrollYProgress: number}>} SpringValues the collection of values returned from the inner hook */ diff --git a/packages/parallax/src/index.tsx b/packages/parallax/src/index.tsx index 4920eb89b8..9594c852bd 100644 --- a/packages/parallax/src/index.tsx +++ b/packages/parallax/src/index.tsx @@ -52,8 +52,8 @@ export interface IParallax { current: number controller: Controller<{ scroll: number }> layers: Set - container: React.RefObject - content: React.RefObject + container: React.MutableRefObject + content: React.MutableRefObject scrollTo(offset: number): void update(): void stop(): void diff --git a/packages/types/src/utils.ts b/packages/types/src/utils.ts index 852037e823..19807b4532 100644 --- a/packages/types/src/utils.ts +++ b/packages/types/src/utils.ts @@ -23,7 +23,7 @@ */ import * as React from 'react' -import { ReactElement, RefObject } from 'react' +import { ReactElement, MutableRefObject } from 'react' /** Ensure each type of `T` is an array */ export type Arrify = [T, T] extends [infer T, infer DT] @@ -139,7 +139,7 @@ export interface Disposable { } // react.d.ts -export type RefProp = RefObject +export type RefProp = MutableRefObject // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/34237 export type ElementType

= From 983ca3f736b4f6cf1ccbc58d4e91b31a3e35deb7 Mon Sep 17 00:00:00 2001 From: Cody Bennett Date: Fri, 10 Jan 2025 07:39:56 -0600 Subject: [PATCH 20/22] experiment: upgrade deps to React 19 --- docs/package.json | 2 + package.json | 10 +-- yarn.lock | 160 ++++++++++++++++++++++++++++++++++++++++++---- 3 files changed, 154 insertions(+), 18 deletions(-) diff --git a/docs/package.json b/docs/package.json index 032793171e..3ced67a027 100644 --- a/docs/package.json +++ b/docs/package.json @@ -32,6 +32,7 @@ "@remix-run/serve": "2.15.2", "@remix-run/server-runtime": "2.15.2", "@supabase/supabase-js": "2.47.10", + "@use-gesture/react": "^10.3.1", "@vanilla-extract/css": "1.17.0", "@vanilla-extract/dynamic": "2.1.2", "@vanilla-extract/recipes": "0.5.5", @@ -44,6 +45,7 @@ "react": "18.3.1", "react-dom": "18.3.1", "react-select": "5.9.0", + "react-use-measure": "^2.1.1", "zod": "3.24.1" }, "devDependencies": { diff --git a/package.json b/package.json index 6429c5e7f2..1d5f93daa0 100644 --- a/package.json +++ b/package.json @@ -66,7 +66,7 @@ "@changesets/cli": "2.27.11", "@commitlint/cli": "19.6.1", "@commitlint/config-conventional": "19.6.0", - "@react-three/fiber": "8.17.10", + "@react-three/fiber": "9.0.0-rc.1", "@remix-run/dev": "2.15.2", "@simonsmith/cypress-image-snapshot": "9.1.0", "@swc/core": "1.10.4", @@ -79,8 +79,8 @@ "@types/jest": "29.5.14", "@types/lodash.clamp": "4.0.9", "@types/lodash.shuffle": "4.2.9", - "@types/react": "18.3.18", - "@types/react-dom": "18.3.5", + "@types/react": "19.0.2", + "@types/react-dom": "19.0.2", "@types/react-lazyload": "3.2.3", "@types/react-native": "0.73.0", "@types/styled-components": "5.1.34", @@ -95,8 +95,8 @@ "mock-raf": "npm:@react-spring/mock-raf@1.1.1", "prettier": "3.4.2", "pretty-quick": "4.0.0", - "react": "18.3.1", - "react-dom": "18.3.1", + "react": "19.0.0", + "react-dom": "19.0.0", "react-konva": "18.2.10", "react-native": "0.76.5", "react-zdog": "1.2.2", diff --git a/yarn.lock b/yarn.lock index c0fdc04aab..8e9373f13e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4682,6 +4682,7 @@ __metadata: "@remix-run/serve": 2.15.2 "@remix-run/server-runtime": 2.15.2 "@supabase/supabase-js": 2.47.10 + "@use-gesture/react": ^10.3.1 "@vanilla-extract/css": 1.17.0 "@vanilla-extract/dynamic": 2.1.2 "@vanilla-extract/recipes": 0.5.5 @@ -4702,6 +4703,7 @@ __metadata: react: 18.3.1 react-dom: 18.3.1 react-select: 5.9.0 + react-use-measure: ^2.1.1 refractor: 4.8.1 rehype-autolink-headings: 7.1.0 rehype-parse: 9.0.1 @@ -4908,6 +4910,48 @@ __metadata: languageName: node linkType: hard +"@react-three/fiber@npm:9.0.0-rc.1": + version: 9.0.0-rc.1 + resolution: "@react-three/fiber@npm:9.0.0-rc.1" + dependencies: + "@babel/runtime": ^7.17.8 + "@types/debounce": ^1.2.1 + "@types/react-reconciler": ^0.28.8 + "@types/webxr": "*" + base64-js: ^1.5.1 + buffer: ^6.0.3 + debounce: ^1.2.1 + its-fine: ^1.2.5 + react-reconciler: 0.31.0-rc.1 + scheduler: 0.25.0-rc.1 + suspend-react: ^0.1.3 + zustand: ^4.1.2 + peerDependencies: + expo: ">=43.0" + expo-asset: ">=8.4" + expo-file-system: ">=11.0" + expo-gl: ">=11.0" + react: ">=19.0" + react-dom: ">=19.0" + react-native: ">=0.69" + three: ">=0.141" + peerDependenciesMeta: + expo: + optional: true + expo-asset: + optional: true + expo-file-system: + optional: true + expo-gl: + optional: true + react-dom: + optional: true + react-native: + optional: true + checksum: faf3a5c328a6e016aeedfbc1b4cefe0b61c3202a384f5995546094c67047e30d7484a6dd997900f7cf5b7d5cf50d714efd904ba29e127878ef77f8b44a6c5ab9 + languageName: node + linkType: hard + "@remix-run/dev@npm:2.15.2": version: 2.15.2 resolution: "@remix-run/dev@npm:2.15.2" @@ -6047,12 +6091,12 @@ __metadata: languageName: node linkType: hard -"@types/react-dom@npm:18.3.5": - version: 18.3.5 - resolution: "@types/react-dom@npm:18.3.5" +"@types/react-dom@npm:19.0.2": + version: 19.0.2 + resolution: "@types/react-dom@npm:19.0.2" peerDependencies: - "@types/react": ^18.0.0 - checksum: 95c757684f71e761515c5a11299e5feec550c72bb52975487f360e6f0d359b26454c26eaf2ce45dd22748205aa9b2c2fe0abe7005ebcbd233a7615283ac39a7d + "@types/react": ^19.0.0 + checksum: d2ae81ec0b8eee7a4bf31918796fdaa34e8db68f69682163bc212d759de76783e6ffcc02c02722dcf508429067148841e6da81414cc730ca2a28c9c2b350c880 languageName: node linkType: hard @@ -6092,6 +6136,15 @@ __metadata: languageName: node linkType: hard +"@types/react-reconciler@npm:^0.28.8": + version: 0.28.9 + resolution: "@types/react-reconciler@npm:0.28.9" + peerDependencies: + "@types/react": "*" + checksum: 06257f693c7b148a4258c0d0a958288116100014e7b3c21ceaea2d55a668c71718f79b4105a9a0f35b480f3729e46960b40026d685719f9386b4ed63108dda09 + languageName: node + linkType: hard + "@types/react-transition-group@npm:^4.4.0": version: 4.4.10 resolution: "@types/react-transition-group@npm:4.4.10" @@ -6101,7 +6154,7 @@ __metadata: languageName: node linkType: hard -"@types/react@npm:*, @types/react@npm:18.3.18": +"@types/react@npm:*": version: 18.3.18 resolution: "@types/react@npm:18.3.18" dependencies: @@ -6111,6 +6164,15 @@ __metadata: languageName: node linkType: hard +"@types/react@npm:19.0.2": + version: 19.0.2 + resolution: "@types/react@npm:19.0.2" + dependencies: + csstype: ^3.0.2 + checksum: 2f12c2a84b778283884d41560c723d815153d88c56cacf25c0166329e9099c35c82c602a21d8831a381e2ef5574434ebd7bf09a636fe073558919474b0b3c9ed + languageName: node + linkType: hard + "@types/semver@npm:^7.5.0": version: 7.5.6 resolution: "@types/semver@npm:7.5.6" @@ -12508,7 +12570,7 @@ __metadata: languageName: node linkType: hard -"its-fine@npm:^1.0.6, its-fine@npm:^1.1.1": +"its-fine@npm:^1.0.6, its-fine@npm:^1.1.1, its-fine@npm:^1.2.5": version: 1.2.5 resolution: "its-fine@npm:1.2.5" dependencies: @@ -16886,6 +16948,17 @@ __metadata: languageName: node linkType: hard +"react-dom@npm:19.0.0": + version: 19.0.0 + resolution: "react-dom@npm:19.0.0" + dependencies: + scheduler: ^0.25.0 + peerDependencies: + react: ^19.0.0 + checksum: 009cc6e575263a0d1906f9dd4aa6532d2d3d0d71e4c2b7777c8fe4de585fa06b5b77cdc2e0fbaa2f3a4a5e5d3305c189ba152153f358ee7da4d9d9ba5d3a8975 + languageName: node + linkType: hard + "react-dropzone@npm:^12.0.0": version: 12.1.0 resolution: "react-dropzone@npm:12.1.0" @@ -17001,6 +17074,17 @@ __metadata: languageName: node linkType: hard +"react-reconciler@npm:0.31.0-rc.1": + version: 0.31.0-rc.1 + resolution: "react-reconciler@npm:0.31.0-rc.1" + dependencies: + scheduler: 0.25.0-rc.1 + peerDependencies: + react: 19.0.0-rc.1 + checksum: cb769884a9cfc8707d49849533d6fccd9854bed786c5f58d6525da6772428b8853a881947dca27eaa41d3861283f58142ae39a0bb991a0ffd00f83a1df533990 + languageName: node + linkType: hard + "react-reconciler@npm:^0.27.0": version: 0.27.0 resolution: "react-reconciler@npm:0.27.0" @@ -17125,7 +17209,7 @@ __metadata: "@changesets/cli": 2.27.11 "@commitlint/cli": 19.6.1 "@commitlint/config-conventional": 19.6.0 - "@react-three/fiber": 8.17.10 + "@react-three/fiber": 9.0.0-rc.1 "@remix-run/dev": 2.15.2 "@simonsmith/cypress-image-snapshot": 9.1.0 "@swc/core": 1.10.4 @@ -17138,8 +17222,8 @@ __metadata: "@types/jest": 29.5.14 "@types/lodash.clamp": 4.0.9 "@types/lodash.shuffle": 4.2.9 - "@types/react": 18.3.18 - "@types/react-dom": 18.3.5 + "@types/react": 19.0.2 + "@types/react-dom": 19.0.2 "@types/react-lazyload": 3.2.3 "@types/react-native": 0.73.0 "@types/styled-components": 5.1.34 @@ -17154,8 +17238,8 @@ __metadata: mock-raf: "npm:@react-spring/mock-raf@1.1.1" prettier: 3.4.2 pretty-quick: 4.0.0 - react: 18.3.1 - react-dom: 18.3.1 + react: 19.0.0 + react-dom: 19.0.0 react-konva: 18.2.10 react-native: 0.76.5 react-zdog: 1.2.2 @@ -17226,7 +17310,7 @@ __metadata: languageName: node linkType: hard -"react-use-measure@npm:2.1.1": +"react-use-measure@npm:2.1.1, react-use-measure@npm:^2.1.1": version: 2.1.1 resolution: "react-use-measure@npm:2.1.1" dependencies: @@ -17269,6 +17353,13 @@ __metadata: languageName: node linkType: hard +"react@npm:19.0.0": + version: 19.0.0 + resolution: "react@npm:19.0.0" + checksum: 86de15d85b2465feb40297a90319c325cb07cf27191a361d47bcfe8c6126c973d660125aa67b8f4cbbe39f15a2f32efd0c814e98196d8e5b68c567ba40a399c6 + languageName: node + linkType: hard + "read-yaml-file@npm:^1.1.0": version: 1.1.0 resolution: "read-yaml-file@npm:1.1.0" @@ -18035,6 +18126,13 @@ __metadata: languageName: node linkType: hard +"scheduler@npm:0.25.0-rc.1": + version: 0.25.0-rc.1 + resolution: "scheduler@npm:0.25.0-rc.1" + checksum: 03b56e352ab835ee4d2e55525380f622807e6d2407291474e21bdb70e8135da0e0d7bec3e86c7b0d68d83ffa6645799e947ce34e1bc91c982f4d6e5285cfedcd + languageName: node + linkType: hard + "scheduler@npm:^0.21.0": version: 0.21.0 resolution: "scheduler@npm:0.21.0" @@ -18053,6 +18151,13 @@ __metadata: languageName: node linkType: hard +"scheduler@npm:^0.25.0": + version: 0.25.0 + resolution: "scheduler@npm:0.25.0" + checksum: b7bb9fddbf743e521e9aaa5198a03ae823f5e104ebee0cb9ec625392bb7da0baa1c28ab29cee4b1e407a94e76acc6eee91eeb749614f91f853efda2613531566 + languageName: node + linkType: hard + "section-matter@npm:^1.0.0": version: 1.0.0 resolution: "section-matter@npm:1.0.0" @@ -20138,6 +20243,15 @@ __metadata: languageName: node linkType: hard +"use-sync-external-store@npm:^1.2.2": + version: 1.4.0 + resolution: "use-sync-external-store@npm:1.4.0" + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 + checksum: dc3843a1b59ac8bd01417bd79498d4c688d5df8bf4801be50008ef4bfaacb349058c0b1605b5b43c828e0a2d62722d7e861573b3f31cea77a7f23e8b0fc2f7e3 + languageName: node + linkType: hard + "util-deprecate@npm:^1.0.1, util-deprecate@npm:^1.0.2, util-deprecate@npm:~1.0.1": version: 1.0.2 resolution: "util-deprecate@npm:1.0.2" @@ -21034,6 +21148,26 @@ __metadata: languageName: node linkType: hard +"zustand@npm:^4.1.2": + version: 4.5.6 + resolution: "zustand@npm:4.5.6" + dependencies: + use-sync-external-store: ^1.2.2 + peerDependencies: + "@types/react": ">=16.8" + immer: ">=9.0.6" + react: ">=16.8" + peerDependenciesMeta: + "@types/react": + optional: true + immer: + optional: true + react: + optional: true + checksum: c4e9c809c92195fa2f9e8e0cd6631b6830fc9676343c8584c20cf26d402f220c54ae0479a299dbcd5e1cdfc5977f116838f1b5f39d6a4997ff727c6cebe60d3f + languageName: node + linkType: hard + "zustand@npm:^4.3.2": version: 4.5.5 resolution: "zustand@npm:4.5.5" From c30d8a05f0aa27afceaf7c58cdb87b484a39e8b5 Mon Sep 17 00:00:00 2001 From: Cody Bennett Date: Fri, 10 Jan 2025 07:52:19 -0600 Subject: [PATCH 21/22] chore: upgrade to rc.2 --- package.json | 2 +- yarn.lock | 47 ++++++++++++++++++++--------------------------- 2 files changed, 21 insertions(+), 28 deletions(-) diff --git a/package.json b/package.json index 1d5f93daa0..aacc19b7ea 100644 --- a/package.json +++ b/package.json @@ -66,7 +66,7 @@ "@changesets/cli": "2.27.11", "@commitlint/cli": "19.6.1", "@commitlint/config-conventional": "19.6.0", - "@react-three/fiber": "9.0.0-rc.1", + "@react-three/fiber": "9.0.0-rc.2", "@remix-run/dev": "2.15.2", "@simonsmith/cypress-image-snapshot": "9.1.0", "@swc/core": "1.10.4", diff --git a/yarn.lock b/yarn.lock index 8e9373f13e..4ed4a9c261 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4910,9 +4910,9 @@ __metadata: languageName: node linkType: hard -"@react-three/fiber@npm:9.0.0-rc.1": - version: 9.0.0-rc.1 - resolution: "@react-three/fiber@npm:9.0.0-rc.1" +"@react-three/fiber@npm:9.0.0-rc.2": + version: 9.0.0-rc.2 + resolution: "@react-three/fiber@npm:9.0.0-rc.2" dependencies: "@babel/runtime": ^7.17.8 "@types/debounce": ^1.2.1 @@ -4922,8 +4922,8 @@ __metadata: buffer: ^6.0.3 debounce: ^1.2.1 its-fine: ^1.2.5 - react-reconciler: 0.31.0-rc.1 - scheduler: 0.25.0-rc.1 + react-reconciler: 0.31.0 + scheduler: 0.25.0 suspend-react: ^0.1.3 zustand: ^4.1.2 peerDependencies: @@ -4931,10 +4931,10 @@ __metadata: expo-asset: ">=8.4" expo-file-system: ">=11.0" expo-gl: ">=11.0" - react: ">=19.0" - react-dom: ">=19.0" + react: ^19.0.0 + react-dom: ^19.0.0 react-native: ">=0.69" - three: ">=0.141" + three: ">=0.156" peerDependenciesMeta: expo: optional: true @@ -4948,7 +4948,7 @@ __metadata: optional: true react-native: optional: true - checksum: faf3a5c328a6e016aeedfbc1b4cefe0b61c3202a384f5995546094c67047e30d7484a6dd997900f7cf5b7d5cf50d714efd904ba29e127878ef77f8b44a6c5ab9 + checksum: efb7af039705b10fa456c3e90338e0d5fdaba50238901c84e3b7ddc59cc9b07f178900077625a628a53b9cc2013eca804bd5268b5f28883718b13e13ad85d4af languageName: node linkType: hard @@ -17074,14 +17074,14 @@ __metadata: languageName: node linkType: hard -"react-reconciler@npm:0.31.0-rc.1": - version: 0.31.0-rc.1 - resolution: "react-reconciler@npm:0.31.0-rc.1" +"react-reconciler@npm:0.31.0": + version: 0.31.0 + resolution: "react-reconciler@npm:0.31.0" dependencies: - scheduler: 0.25.0-rc.1 + scheduler: ^0.25.0 peerDependencies: - react: 19.0.0-rc.1 - checksum: cb769884a9cfc8707d49849533d6fccd9854bed786c5f58d6525da6772428b8853a881947dca27eaa41d3861283f58142ae39a0bb991a0ffd00f83a1df533990 + react: ^19.0.0 + checksum: 820c4e4003c5615849bf0cda97d8a55b99af2bb59cc0825882b727f0ad0c4bf4581bb3d25e00beca1164203dbc172f0a8c4725e7aa2fb85e025938722384a84e languageName: node linkType: hard @@ -17209,7 +17209,7 @@ __metadata: "@changesets/cli": 2.27.11 "@commitlint/cli": 19.6.1 "@commitlint/config-conventional": 19.6.0 - "@react-three/fiber": 9.0.0-rc.1 + "@react-three/fiber": 9.0.0-rc.2 "@remix-run/dev": 2.15.2 "@simonsmith/cypress-image-snapshot": 9.1.0 "@swc/core": 1.10.4 @@ -18126,10 +18126,10 @@ __metadata: languageName: node linkType: hard -"scheduler@npm:0.25.0-rc.1": - version: 0.25.0-rc.1 - resolution: "scheduler@npm:0.25.0-rc.1" - checksum: 03b56e352ab835ee4d2e55525380f622807e6d2407291474e21bdb70e8135da0e0d7bec3e86c7b0d68d83ffa6645799e947ce34e1bc91c982f4d6e5285cfedcd +"scheduler@npm:0.25.0, scheduler@npm:^0.25.0": + version: 0.25.0 + resolution: "scheduler@npm:0.25.0" + checksum: b7bb9fddbf743e521e9aaa5198a03ae823f5e104ebee0cb9ec625392bb7da0baa1c28ab29cee4b1e407a94e76acc6eee91eeb749614f91f853efda2613531566 languageName: node linkType: hard @@ -18151,13 +18151,6 @@ __metadata: languageName: node linkType: hard -"scheduler@npm:^0.25.0": - version: 0.25.0 - resolution: "scheduler@npm:0.25.0" - checksum: b7bb9fddbf743e521e9aaa5198a03ae823f5e104ebee0cb9ec625392bb7da0baa1c28ab29cee4b1e407a94e76acc6eee91eeb749614f91f853efda2613531566 - languageName: node - linkType: hard - "section-matter@npm:^1.0.0": version: 1.0.0 resolution: "section-matter@npm:1.0.0" From efda6683c37264cf3ada2b910b3cb2b335467b65 Mon Sep 17 00:00:00 2001 From: Cody Bennett Date: Fri, 10 Jan 2025 07:55:56 -0600 Subject: [PATCH 22/22] chore: cleanup --- packages/animated/src/withAnimated.tsx | 15 ++++++++++++--- packages/shared/src/hooks/useMemoOne.ts | 6 +++--- 2 files changed, 15 insertions(+), 6 deletions(-) diff --git a/packages/animated/src/withAnimated.tsx b/packages/animated/src/withAnimated.tsx index f2fcdf6cb9..cbfb3715a5 100644 --- a/packages/animated/src/withAnimated.tsx +++ b/packages/animated/src/withAnimated.tsx @@ -1,5 +1,12 @@ import * as React from 'react' -import { forwardRef, useRef, Ref, useCallback, useEffect } from 'react' +import { + forwardRef, + useRef, + Ref, + useCallback, + useEffect, + MutableRefObject, +} from 'react' import { is, each, @@ -66,9 +73,11 @@ export const withAnimated = (Component: any, host: HostConfig) => { const observer = new PropsObserver(callback, deps) - const observerRef = useRef(null) + // NOTE: useRef is bugged as immutable in 18.3 types + const observerRef = useRef( + null + ) as MutableRefObject useIsomorphicLayoutEffect(() => { - // @ts-expect-error useRef immutable in 18.3 types observerRef.current = observer // Observe the latest dependencies. diff --git a/packages/shared/src/hooks/useMemoOne.ts b/packages/shared/src/hooks/useMemoOne.ts index 2ceac60a6d..7d5cef54f1 100644 --- a/packages/shared/src/hooks/useMemoOne.ts +++ b/packages/shared/src/hooks/useMemoOne.ts @@ -1,4 +1,4 @@ -import { useEffect, useRef, useState } from 'react' +import { useEffect, useRef, useState, MutableRefObject } from 'react' type Cache = { inputs?: any[] @@ -14,7 +14,8 @@ export function useMemoOne(getResult: () => T, inputs?: any[]): T { }) ) - const committed = useRef>(null) + // NOTE: useRef is bugged as immutable in 18.3 types + const committed = useRef>(null) as MutableRefObject | null> const prevCache = committed.current let cache = prevCache @@ -33,7 +34,6 @@ export function useMemoOne(getResult: () => T, inputs?: any[]): T { } useEffect(() => { - // @ts-expect-error useRef immutable in 18.3 types committed.current = cache if (prevCache == initial) { initial.inputs = initial.result = undefined