Fix infinite-scroll demo

pmndrs · Aug 9, 2024 · a6e4c6d · a6e4c6d
1 parent 340d651
commit a6e4c6d
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 12 deletions.
diff --git a/demos/infinite-scroll/package.json b/demos/infinite-scroll/package.json
@@ -29,7 +29,7 @@
     "dev": "vite --host",
     "dev3": "e2e-dev $npm_package_name",
     "build": "tsc && vite build",
-    "bbuild2": "tsc && e2e-build $npm_package_name",
+    "build2": "tsc && e2e-build $npm_package_name",
     "preview": "vite preview"
   },
   "browserslist": [

diff --git a/demos/infinite-scroll/src/ScrollControls.tsx b/demos/infinite-scroll/src/ScrollControls.tsx
@@ -1,6 +1,6 @@
 import * as THREE from 'three'
 import * as React from 'react'
-import * as ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import { context as fiberContext, useFrame, useThree } from '@react-three/fiber'
 import mergeRefs from 'react-merge-refs'
 
@@ -113,14 +113,17 @@ export function ScrollControls({
 
     const oldTarget = typeof events.connected !== 'boolean' ? events.connected : gl.domElement
     requestAnimationFrame(() => events.connect?.(el))
+    // @ts-ignore
     const oldCompute = raycaster.computeOffsets
+    // @ts-ignore
     raycaster.computeOffsets = ({ clientX, clientY }) => ({
       offsetX: clientX - (target as HTMLElement).offsetLeft,
       offsetY: clientY - (target as HTMLElement).offsetTop
     })
 
     return () => {
       target.removeChild(el)
+      // @ts-ignore
       raycaster.computeOffsets = oldCompute
       events.connect?.(oldTarget)
     }
@@ -135,7 +138,7 @@ export function ScrollControls({
     let disableScroll = true
     let firstRun = true
 
-    const onScroll = (e) => {
+    const onScroll = (e : any) => {
       // Prevent first scroll because it is indirectly caused by the one pixel offset
       if (!enabled || firstRun) return
       invalidate()
@@ -161,7 +164,7 @@ export function ScrollControls({
     el.addEventListener('scroll', onScroll, { passive: true })
     requestAnimationFrame(() => (firstRun = false))
 
-    const onWheel = (e) => (el.scrollLeft += e.deltaY / 2)
+    const onWheel = (e : any) => (el.scrollLeft += e.deltaY / 2)
     if (horizontal) el.addEventListener('wheel', onWheel, { passive: true })
 
     return () => {
@@ -179,7 +182,7 @@ export function ScrollControls({
   return <context.Provider value={state}>{children}</context.Provider>
 }
 
-const ScrollCanvas = React.forwardRef(({ children }, ref) => {
+const ScrollCanvas = React.forwardRef(({ children } : { children?: React.ReactNode}, ref) => {
   const group = React.useRef<THREE.Group>(null!)
   const state = useScroll()
   const { width, height } = useThree((state) => state.viewport)
@@ -203,13 +206,12 @@ const ScrollHtml = React.forwardRef(
         }px,0)`
       }
     })
-    ReactDOM.render(
+    createRoot(state.fixed).render(
       <div ref={mergeRefs([ref, group])} style={{ ...style, position: 'absolute', top: 0, left: 0, willChange: 'transform' }} {...props}>
         <context.Provider value={state}>
           <fiberContext.Provider value={fiberState}>{children}</fiberContext.Provider>
         </context.Provider>
-      </div>,
-      state.fixed
+      </div>
     )
     return null
   }

diff --git a/demos/infinite-scroll/src/index.jsx b/demos/infinite-scroll/src/index.jsx
@@ -1,4 +1,4 @@
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import { Logo } from '@pmndrs/branding'
 import './styles.css'
 import App from './App'
@@ -17,11 +17,11 @@ function Overlay() {
   )
 }
 
-ReactDOM.render(
+createRoot(
+  document.getElementById('root')).render(
   <>
     <App />
     <Overlay />
     <Logo style={{ position: 'absolute', bottom: 40, left: 40, width: 30 }} />
-  </>,
-  document.getElementById('root')
+  </>
 )