Merge pull request #79 from pmndrs/update-react18

Upgrade to React 18
pmndrs · Apr 17, 2022 · ec95e71 · ec95e71
2 parents 6ad5659 + f3c6697
commit ec95e71
Show file tree

Hide file tree

Showing 43 changed files with 8,171 additions and 9,827 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -6,13 +6,11 @@
     "es6": true
   },
   "extends": [
-    "prettier",
-    "plugin:prettier/recommended",
     "plugin:react-hooks/recommended",
     "plugin:import/errors",
     "plugin:import/warnings"
   ],
-  "plugins": ["@typescript-eslint", "react", "prettier", "react-hooks", "import", "jest"],
+  "plugins": ["@typescript-eslint", "react", "react-hooks", "import", "jest"],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "ecmaVersion": 2018,

diff --git a/.prettierrc b/.prettierrc
@@ -3,5 +3,6 @@
   "trailingComma": "es5",
   "singleQuote": true,
   "tabWidth": 2,
-  "printWidth": 120
+  "printWidth": 150,
+  "jsxBracketSameLine": true
 }
diff --git a/examples/.env b/examples/.env
diff --git a/examples/.prettierrc b/examples/.prettierrc
diff --git a/examples/config-overrides.js b/examples/config-overrides.js
diff --git a/examples/index.html b/examples/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="./src/index.tsx" type="module"></script>
+  </body>
+</html>
diff --git a/examples/package.json b/examples/package.json
@@ -3,25 +3,21 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@react-spring/web": "9.2.4",
-    "@react-three/drei": "7.4.0",
-    "@react-three/fiber": "^7.0.6",
-    "@react-three/flex": "0.6.1",
-    "@react-three/postprocessing": "2.0.5",
+    "@react-spring/web": "9.4.4",
+    "@react-three/drei": "9.4.3",
+    "@react-three/fiber": "^8.0.11",
+    "@react-three/postprocessing": "2.3.2",
     "lerp": "^1.0.3",
-    "postprocessing": "6.22.3",
-    "react": "^0.0.0-experimental-94c0244ba",
-    "react-dom": "^0.0.0-experimental-94c0244ba",
-    "react-scripts": "4.0.3",
-    "three": "0.131.3",
-    "troika-three-text": "^0.42.0",
-    "zustand": "3.5.8"
+    "postprocessing": "6.26.3",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-scripts": "5.0.1",
+    "three": "^0.138.3",
+    "troika-three-text": "^0.46.2",
+    "zustand": "3.7.2"
   },
   "scripts": {
-    "start": "react-app-rewired start",
-    "build": "react-app-rewired build",
-    "test": "react-app-rewired test",
-    "eject": "react-scripts eject"
+    "start": "vite"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -39,9 +35,7 @@
     ]
   },
   "devDependencies": {
-    "customize-cra": "^1.0.0",
-    "customize-cra-react-refresh": "^1.1.0",
-    "react-app-rewired": "^2.1.6",
-    "webpack-bundle-analyzer": "^4.4.2"
+    "typescript": "^4.6.3",
+    "vite": "^2.9.5"
   }
 }
diff --git a/examples/public/favicon.ico b/examples/public/favicon.ico
diff --git a/examples/src/images/04zTfWB.jpg → examples/public/images/04zTfWB.jpg b/examples/src/images/04zTfWB.jpg → examples/public/images/04zTfWB.jpg
diff --git a/examples/src/images/BH41NVu.jpg → examples/public/images/BH41NVu.jpg b/examples/src/images/BH41NVu.jpg → examples/public/images/BH41NVu.jpg
diff --git a/examples/src/images/ajQ73ol.jpg → examples/public/images/ajQ73ol.jpg b/examples/src/images/ajQ73ol.jpg → examples/public/images/ajQ73ol.jpg
diff --git a/examples/src/images/c4cA8UN.jpg → examples/public/images/c4cA8UN.jpg b/examples/src/images/c4cA8UN.jpg → examples/public/images/c4cA8UN.jpg
diff --git a/examples/src/images/cAKwexj.jpg → examples/public/images/cAKwexj.jpg b/examples/src/images/cAKwexj.jpg → examples/public/images/cAKwexj.jpg
diff --git a/examples/src/images/ellipse.svg → examples/public/images/ellipse.svg b/examples/src/images/ellipse.svg → examples/public/images/ellipse.svg
diff --git a/examples/src/images/fBoIJLX.jpg → examples/public/images/fBoIJLX.jpg b/examples/src/images/fBoIJLX.jpg → examples/public/images/fBoIJLX.jpg
diff --git a/examples/src/images/gZOmLNU.jpg → examples/public/images/gZOmLNU.jpg b/examples/src/images/gZOmLNU.jpg → examples/public/images/gZOmLNU.jpg
diff --git a/examples/src/images/gwuZrgo.jpg → examples/public/images/gwuZrgo.jpg b/examples/src/images/gwuZrgo.jpg → examples/public/images/gwuZrgo.jpg
diff --git a/examples/src/images/mbFIW1b.jpg → examples/public/images/mbFIW1b.jpg b/examples/src/images/mbFIW1b.jpg → examples/public/images/mbFIW1b.jpg
diff --git a/examples/src/images/mlDUVig.jpg → examples/public/images/mlDUVig.jpg b/examples/src/images/mlDUVig.jpg → examples/public/images/mlDUVig.jpg
diff --git a/examples/public/index.html b/examples/public/index.html
diff --git a/examples/public/logo192.png b/examples/public/logo192.png
diff --git a/examples/public/logo512.png b/examples/public/logo512.png
diff --git a/examples/public/manifest.json b/examples/public/manifest.json
diff --git a/examples/public/robots.txt b/examples/public/robots.txt
diff --git a/examples/src/App.js → examples/src/App.tsx b/examples/src/App.js → examples/src/App.tsx
@@ -1,28 +1,42 @@
 import * as THREE from 'three'
 import React, { Suspense, useEffect, useRef, useState, useCallback, useLayoutEffect } from 'react'
 import { Canvas, useThree, useFrame, useLoader } from '@react-three/fiber'
-import { Flex, Box, useFlexSize } from '@react-three/flex'
 import { Line, Loader, useAspect } from '@react-three/drei'
+import { Flex, Box, useFlexSize } from '../../src'
 import Effects from './components/Effects'
 import Text from './components/Text'
 import Geo from './components/Geo'
 import state from './state'
 
-function HeightReporter({ onReflow }) {
+function HeightReporter({ onReflow }: { onReflow: (w: number, h: number) => void }) {
   const size = useFlexSize()
-  useLayoutEffect(() => onReflow && onReflow(...size), [onReflow, size])
+  useLayoutEffect(() => onReflow && onReflow(size[0], size[1]), [onReflow, size])
   return null
 }
 
-function Page({ text, tag, images, textScaleFactor, onReflow, left = false }) {
+function Page({
+  text,
+  tag,
+  images,
+  textScaleFactor,
+  onReflow,
+  left = false,
+}: {
+  text: string
+  tag: string
+  images: string[]
+  textScaleFactor: number
+  onReflow: (w: number, h: number) => void
+  left?: boolean
+}) {
   const textures = useLoader(THREE.TextureLoader, images)
   const { viewport } = useThree()
   const boxProps = {
     centerAnchor: true,
     grow: 1,
     marginTop: 1,
-    marginLeft: left * 1,
-    marginRight: !left * 1,
+    marginLeft: left ? 1 : 0,
+    marginRight: !left ? 1 : 0,
     width: 'auto',
     height: 'auto',
     minWidth: 3,
@@ -68,13 +82,31 @@ function Page({ text, tag, images, textScaleFactor, onReflow, left = false }) {
   )
 }
 
-function Layercard({ depth, boxWidth, boxHeight, text, textColor, color, map, textScaleFactor }) {
-  const ref = useRef()
+function Layercard({
+  depth,
+  boxWidth,
+  boxHeight,
+  text,
+  textColor,
+  color,
+  map,
+  textScaleFactor,
+}: {
+  depth: number
+  boxWidth: number
+  boxHeight: number
+  text: string
+  textColor: string
+  color?: string
+  map: THREE.Texture
+  textScaleFactor: number
+}) {
+  const ref = useRef<THREE.MeshBasicMaterial>(null)
   const { viewport, size } = useThree()
   const pageLerp = useRef(state.top / size.height)
   useFrame(() => {
     const page = (pageLerp.current = THREE.MathUtils.lerp(pageLerp.current, state.top / size.height, 0.15))
-    if (depth >= 0) ref.current.opacity = page < state.threshold * 1.7 ? 1 : 1 - (page - state.threshold * 1.7)
+    if (depth >= 0 && ref.current) ref.current.opacity = page < state.threshold * 1.7 ? 1 : 1 - (page - state.threshold * 1.7)
   })
   return (
     <>
@@ -98,8 +130,8 @@ function Layercard({ depth, boxWidth, boxHeight, text, textColor, color, map, te
   )
 }
 
-function Content({ onReflow }) {
-  const group = useRef()
+function Content({ onReflow }: { onReflow: (n: number) => void }) {
+  const group = useRef<THREE.Group>(null)
   const { viewport, size } = useThree()
   const [bW, bH] = useAspect(1920, 1920, 0.5)
   const texture = useLoader(THREE.TextureLoader, state.depthbox[0].image)
@@ -109,10 +141,10 @@ function Content({ onReflow }) {
     const page = (pageLerp.current = THREE.MathUtils.lerp(pageLerp.current, state.top / size.height, 0.15))
     const y = page * viewport.height
     const sticky = state.threshold * viewport.height
-    group.current.position.lerp(vec.set(0, page < state.threshold ? y : sticky, page < state.threshold ? 0 : page * 1.25), 0.15)
+    group.current?.position.lerp(vec.set(0, page < state.threshold ? y : sticky, page < state.threshold ? 0 : page * 1.25), 0.15)
   })
-  const handleReflow = useCallback((w, h) => onReflow((state.pages = h / viewport.height + 5.5)), [onReflow, viewport.height])
-  const sizesRef = useRef([])
+  const handleReflow = useCallback((w: number, h: number) => onReflow((state.pages = h / viewport.height + 5.5)), [onReflow, viewport.height])
+  const sizesRef = useRef<number[]>([])
   const scale = Math.min(1, viewport.width / 16)
   return (
     <group ref={group}>
@@ -160,15 +192,14 @@ function Content({ onReflow }) {
 }
 
 export default function App() {
-  const scrollArea = useRef()
-  const onScroll = (e) => (state.top = e.target.scrollTop)
+  const scrollArea = useRef<HTMLDivElement>(null)
+  const onScroll = (e: { target: any }) => (state.top = e.target.scrollTop)
   useEffect(() => void onScroll({ target: scrollArea.current }), [])
   const [pages, setPages] = useState(0)
   return (
     <>
       <Canvas
         shadows
-        noEvents
         dpr={2}
         camera={{ position: [0, 0, 10], far: 1000 }}
         gl={{ powerPreference: 'high-performance', alpha: false, antialias: false, stencil: false, depth: false }}

diff --git a/examples/src/components/Effects.js → examples/src/components/Effects.tsx b/examples/src/components/Effects.js → examples/src/components/Effects.tsx
@@ -1,6 +1,6 @@
 import * as THREE from 'three'
 import React, { useEffect, useRef } from 'react'
-import { extend, useThree, useFrame } from '@react-three/fiber'
+import { extend, useThree, useFrame, ReactThreeFiber } from '@react-three/fiber'
 import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer'
 import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass'
 import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass'
@@ -10,15 +10,25 @@ import state from '../state'
 
 extend({ EffectComposer, ShaderPass, RenderPass, WaterPass })
 
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace JSX {
+    interface IntrinsicElements {
+      waterPass: ReactThreeFiber.Node<WaterPass, typeof WaterPass>
+    }
+  }
+}
+
 export default function Effects() {
-  const composer = useRef()
-  const water = useRef()
+  const composer = useRef<EffectComposer>()
+  const water = useRef<WaterPass>(null)
   const { gl, size, camera, scene } = useThree()
-  useEffect(() => void composer.current.setSize(size.width, size.height), [size])
+  useEffect(() => void composer.current?.setSize(size.width, size.height), [size])
   let last = state.top
   let index = 0
   let values = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
   useFrame(() => {
+    if (!water.current || !composer.current) return
     const { top } = state
     values[index] = Math.abs(top - last)
     const normalize = values.reduce((a, b) => a + b) / values.length
@@ -29,10 +39,10 @@ export default function Effects() {
     composer.current.render()
   }, 1)
   return (
-    <effectComposer ref={composer} args={[gl]}>
-      <renderPass attachArray="passes" scene={scene} camera={camera} />
-      <waterPass attachArray="passes" ref={water} />
-      <shaderPass attachArray="passes" args={[GammaCorrectionShader]} />
+    <effectComposer ref={composer as any} args={[gl]}>
+      <renderPass attach="passes-0" scene={scene} camera={camera} />
+      <waterPass attach="passes-1" ref={water} />
+      <shaderPass attach="passes-2" args={[GammaCorrectionShader]} />
     </effectComposer>
   )
 }
diff --git a/examples/src/components/Geo.js → examples/src/components/Geo.tsx b/examples/src/components/Geo.js → examples/src/components/Geo.tsx
@@ -1,15 +1,16 @@
 import * as THREE from 'three'
 import React, { useRef } from 'react'
-import { useFrame } from '@react-three/fiber'
+import { GroupProps, useFrame } from '@react-three/fiber'
 import { Shadow, MeshDistortMaterial, useGLTF } from '@react-three/drei'
 import Text from './Text'
 import state from '../state'
 
-export default function Model(props) {
-  const group = useRef()
-  const shadow = useRef()
-  const { nodes } = useGLTF('/geo.min.glb')
+export default function Model(props: GroupProps) {
+  const group = useRef<THREE.Group>(null)
+  const shadow = useRef<THREE.Group>(null)
+  const { nodes } = useGLTF('/geo.min.glb') as any
   useFrame(({ clock }) => {
+    if (!group.current || !shadow.current) return
     const t = (1 + Math.sin(clock.getElapsedTime() * 1.5)) / 2
     group.current.position.y = t / 3
     shadow.current.scale.y = shadow.current.scale.z = 1 + t

diff --git a/examples/src/components/Text.js → examples/src/components/Text.tsx b/examples/src/components/Text.js → examples/src/components/Text.tsx
@@ -1,8 +1,10 @@
 import React from 'react'
-import { useReflow } from '@react-three/flex'
+import { useReflow } from '../../../src'
 import { Text as TextImpl } from '@react-three/drei'
 
-export default function Text({ bold = false, anchorX = 'left', anchorY = 'top', textAlign = 'left', ...props }) {
+type Props = Parameters<typeof TextImpl>[0] & { bold?: boolean }
+
+export default function Text({ bold = false, anchorX = 'left', anchorY = 'top', textAlign = 'left', ...props }: Props) {
   const reflow = useReflow()
   const font = bold ? '/Inter-Bold.woff' : '/Inter-Regular.woff'
   return <TextImpl anchorX={anchorX} anchorY={anchorY} textAlign={textAlign} font={font} onSync={reflow} {...props} />