Merge pull request #180 from pmndrs/react-18-last-pp-last-three

Update rpp to work with latest React, R3F and PP, add GH actions

Author: v 1 r t l

.github/workflows/main.yml

@@ -0,0 +1,19 @@
+name: CI
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+    branches: [master]
+
+jobs:
+  ci:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "16"
+          cache: "yarn"
+      - name: "install deps and build"
+        run: yarn install --frozen-lockfile

.travis.yml

@@ -12,9 +12,14 @@
   ],
   "license": "MIT",
   "type": "module",
-  "main": "dist/index.cjs",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "exports": {
+    "types": "./dist/index.d.ts",
+    "require": "./dist/index.cjs",
+    "import": "./dist/index.js"
+  },
+  "types": "./dist/index.d.ts",
   "sideEffects": false,
   "files": [
     "dist"
@@ -39,53 +44,46 @@
     "typegen": "tsc --emitDeclarationOnly || true"
   },
   "dependencies": {
-    "postprocessing": "^6.30.1",
-    "react-merge-refs": "^1.1.0",
+    "postprocessing": "^6.30.2",
     "screen-space-reflections": "2.5.0",
-    "three-stdlib": "^2.8.11"
+    "three-stdlib": "^2.21.10"
   },
   "devDependencies": {
-    "@babel/core": "^7.17.8",
-    "@babel/plugin-transform-modules-commonjs": "7.17.7",
-    "@babel/plugin-transform-parameters": "7.16.7",
-    "@babel/plugin-transform-runtime": "7.17.0",
-    "@babel/plugin-transform-template-literals": "7.16.7",
-    "@babel/preset-env": "^7.16.11",
-    "@babel/preset-react": "7.16.7",
-    "@babel/preset-typescript": "^7.16.7",
-    "@react-three/fiber": "^7.0.26",
-    "@rollup/plugin-babel": "^5.3.1",
-    "@rollup/plugin-commonjs": "^21.0.3",
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^13.1.3",
-    "@types/react": "^17.0.43",
-    "@types/react-dom": "^17.0.14",
-    "@types/react-test-renderer": "^17.0.1",
-    "@types/three": "^0.139.0",
-    "@typescript-eslint/eslint-plugin": "^5.17.0",
-    "@typescript-eslint/parser": "^5.17.0",
-    "eslint": "^8.12.0",
-    "eslint-config-prettier": "^8.5.0",
+    "@babel/core": "^7.21.4",
+    "@babel/plugin-transform-runtime": "7.21.4",
+    "@babel/preset-env": "^7.21.4",
+    "@babel/preset-react": "7.18.6",
+    "@babel/preset-typescript": "^7.21.4",
+    "@react-three/fiber": "^8.13.0",
+    "@rollup/plugin-babel": "^6.0.3",
+    "@rollup/plugin-commonjs": "^24.1.0",
+    "@rollup/plugin-node-resolve": "^15.0.2",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.1",
+    "@types/three": "^0.150.2",
+    "@typescript-eslint/eslint-plugin": "^5.59.1",
+    "@typescript-eslint/parser": "^5.59.1",
+    "eslint": "^8.39.0",
+    "eslint-config-prettier": "^8.8.0",
     "eslint-import-resolver-alias": "^1.1.2",
-    "eslint-plugin-import": "^2.25.4",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.29.4",
-    "eslint-plugin-react-hooks": "^4.3.0",
-    "husky": "^7.0.4",
-    "husky-run": "^0.0.0",
-    "lint-staged": "^12.3.7",
-    "prettier": "^2.6.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "rimraf": "^3.0.2",
-    "rollup": "^2.70.1",
-    "rollup-plugin-filesize": "^9.1.2",
-    "rollup-plugin-terser": "^7.0.2",
-    "typescript": "^4.6.3"
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "husky": "^8.0.3",
+    "lint-staged": "^13.2.2",
+    "prettier": "^2.8.8",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rimraf": "^5.0.0",
+    "rollup": "^3.21.0",
+    "rollup-plugin-filesize": "^10.0.0",
+    "three": "^0.151.3",
+    "typescript": "^5.0.4"
   },
   "peerDependencies": {
-    "@react-three/fiber": ">=7.0",
-    "react": ">=17.0",
-    "three": ">=0.136.0"
+    "@react-three/fiber": ">=8.0",
+    "react": ">=18.0",
+    "three": ">= 0.138.0 < 0.152.0"
   }
 }

package.json

@@ -1,12 +1,11 @@
 import path from 'path'
-import babel from '@rollup/plugin-babel'
+import { babel } from '@rollup/plugin-babel'
 import resolve from '@rollup/plugin-node-resolve'
-import json from '@rollup/plugin-json'
 import filesize from 'rollup-plugin-filesize'
 
 const root = process.platform === 'win32' ? path.resolve('/') : '/'
 const external = (id) => !id.startsWith('.') && !id.startsWith(root)
-const extensions = ['.js', '.jsx', '.ts', '.tsx', '.json']
+const extensions = ['.js', '.jsx', '.ts', '.tsx']
 
 const getBabelOptions = ({ useESModules }, targets) => ({
   babelrc: false,
@@ -27,7 +26,6 @@ export default [
     output: { file: `dist/index.js`, format: 'esm' },
     external,
     plugins: [
-      json(),
       babel(getBabelOptions({ useESModules: true }, '>5%, not dead, not ie 11, not op_mini all, node >=12')),
       filesize(),
       resolve({ extensions }),
@@ -37,6 +35,6 @@ export default [
     input: `./src/index.tsx`,
     output: { file: `dist/index.cjs`, format: 'cjs' },
     external,
-    plugins: [json(), babel(getBabelOptions({ useESModules: false })), filesize(), resolve({ extensions })],
+    plugins: [babel(getBabelOptions({ useESModules: false })), filesize(), resolve({ extensions })],
   },
 ]

rollup.config.js

@@ -1,4 +1,5 @@
-import { HalfFloatType, TextureDataType } from 'three'
+import type { TextureDataType } from 'three'
+import { HalfFloatType } from 'three'
 import React, {
   forwardRef,
   useMemo,
@@ -8,14 +9,15 @@ import React, {
   useRef,
   useImperativeHandle,
 } from 'react'
-import { useThree, useFrame } from '@react-three/fiber'
+import { useThree, useFrame, useInstanceHandle } from '@react-three/fiber'
 import {
   EffectComposer as EffectComposerImpl,
   RenderPass,
   EffectPass,
   NormalPass,
   // @ts-ignore
   DepthDownsamplingPass,
+  Effect,
 } from 'postprocessing'
 import { isWebGL2Available } from 'three-stdlib'
 
@@ -26,7 +28,7 @@ export const EffectComposerContext = createContext<{
   camera: THREE.Camera
   scene: THREE.Scene
   resolutionScale?: number
-}>(null)
+}>(null!)
 
 export type EffectComposerProps = {
   enabled?: boolean
@@ -48,8 +50,8 @@ export const EffectComposer = React.memo(
     (
       {
         children,
-        camera,
-        scene,
+        camera: _camera,
+        scene: _scene,
         resolutionScale,
         enabled = true,
         renderPriority = 1,
@@ -63,8 +65,8 @@ export const EffectComposer = React.memo(
       ref
     ) => {
       const { gl, scene: defaultScene, camera: defaultCamera, size } = useThree()
-      scene = scene || defaultScene
-      camera = camera || defaultCamera
+      const scene = _scene || defaultScene
+      const camera = _camera || defaultCamera
 
       const [composer, normalPass, downSamplingPass] = useMemo(() => {
         const webGL2Available = isWebGL2Available()
@@ -118,21 +120,22 @@ export const EffectComposer = React.memo(
       )
 
       const group = useRef(null)
+      const instance = useInstanceHandle(group)
       useLayoutEffect(() => {
-        let effectPass
-        if (group.current && group.current.__r3f && composer) {
-          effectPass = new EffectPass(camera, ...(group.current as any).__r3f.objects)
+        let effectPass: EffectPass
+        if (group.current && instance.current && composer) {
+          effectPass = new EffectPass(camera, ...(instance.current.objects as unknown as Effect[]))
           effectPass.renderToScreen = true
           composer.addPass(effectPass)
           if (normalPass) normalPass.enabled = true
-          if (downSamplingPass) downSamplingPass.enabled = true          
+          if (downSamplingPass) downSamplingPass.enabled = true
         }
         return () => {
           if (effectPass) composer?.removePass(effectPass)
           if (normalPass) normalPass.enabled = false
           if (downSamplingPass) downSamplingPass.enabled = false
         }
-      }, [composer, children, camera, normalPass, downSamplingPass])
+      }, [composer, children, camera, normalPass, downSamplingPass, instance])
 
       // Memoize state, otherwise it would trigger all consumers on every render
       const state = useMemo(

src/EffectComposer.tsx

@@ -18,14 +18,13 @@ export function Selection({ children, enabled = true }: { enabled?: boolean; chi
   return <selectionContext.Provider value={value}>{children}</selectionContext.Provider>
 }
 
-
 export function Select({ enabled = false, children, ...props }: SelectApi) {
   const group = useRef<THREE.Group>(null!)
   const api = useContext(selectionContext)
   useEffect(() => {
     if (api && enabled) {
       let changed = false
-      const current = []
+      const current: THREE.Object3D<THREE.Event>[] = []
       group.current.traverse((o) => {
         o.type === 'Mesh' && current.push(o)
         if (api.selected.indexOf(o) === -1) changed = true

src/Selection.tsx

@@ -1,7 +1,7 @@
 import { DepthOfFieldEffect } from 'postprocessing'
-import React, { Ref, forwardRef, useMemo, useLayoutEffect, useContext } from 'react'
+import { Ref, forwardRef, useMemo, useLayoutEffect, useContext } from 'react'
 import { ReactThreeFiber, useThree } from '@react-three/fiber'
-import { Texture, Vector3 } from 'three'
+import { type DepthPackingStrategies, type Texture, Vector3 } from 'three'
 import { EffectComposerContext } from '../EffectComposer'
 
 type DOFProps = ConstructorParameters<typeof DepthOfFieldEffect>[1] &
@@ -22,14 +22,14 @@ export const DepthOfField = forwardRef(function DepthOfField(
   const { camera } = useContext(EffectComposerContext)
   const effect = useMemo(() => new DepthOfFieldEffect(camera, props), [camera, props])
   useLayoutEffect(() => {
-    if (target) {
+    if (target && typeof target !== 'number') {
       const vec: Vector3 =
         target instanceof Vector3
           ? new Vector3().set(target.x, target.y, target.z)
           : new Vector3().set(target[0], target[1], target[2])
       effect.target = vec
     }
-    if (depthTexture) effect.setDepthTexture(depthTexture.texture, depthTexture.packing)
+    if (depthTexture) effect.setDepthTexture(depthTexture.texture, depthTexture.packing as DepthPackingStrategies)
     invalidate()
   }, [target, depthTexture, effect])
   return <primitive ref={ref} object={effect} dispose={null} />

src/effects/DepthOfField.tsx

@@ -1,11 +1,11 @@
 import { GlitchEffect, GlitchMode } from 'postprocessing'
-import React, { Ref, forwardRef, useMemo, useLayoutEffect } from 'react'
+import { Ref, forwardRef, useMemo, useLayoutEffect } from 'react'
 import { ReactThreeFiber, useThree } from '@react-three/fiber'
 import { useVector2 } from '../util'
 
 export type GlitchProps = ConstructorParameters<typeof GlitchEffect>[0] &
   Partial<{
-    mode: typeof GlitchMode[keyof typeof GlitchMode]
+    mode: GlitchMode
     active: boolean
     delay: ReactThreeFiber.Vector2
     duration: ReactThreeFiber.Vector2
@@ -21,15 +21,13 @@ export const Glitch = forwardRef<GlitchEffect, GlitchProps>(function Glitch(
   const delay = useVector2(props, 'delay')
   const duration = useVector2(props, 'duration')
   const strength = useVector2(props, 'strength')
-  const effect = useMemo(() => new GlitchEffect({ ...props, delay, duration, strength }), [
-    delay,
-    duration,
-    props,
-    strength,
-  ])
+  const effect = useMemo(
+    () => new GlitchEffect({ ...props, delay, duration, strength }),
+    [delay, duration, props, strength]
+  )
   useLayoutEffect(() => {
     effect.mode = active ? props.mode || GlitchMode.SPORADIC : GlitchMode.DISABLED
     invalidate()
-  }, [active, effect, props.mode])
+  }, [active, effect, invalidate, props.mode])
   return <primitive ref={ref} object={effect} dispose={null} />
 })

src/effects/Glitch.tsx

@@ -1,21 +1,26 @@
-import { LUTEffect } from 'postprocessing'
-import React, { forwardRef, Ref, useMemo, useLayoutEffect } from 'react'
-import { Texture } from 'three'
 import { useThree } from '@react-three/fiber'
+import { LUT3DEffect, BlendFunction } from 'postprocessing'
+import React, { forwardRef, Ref, useLayoutEffect, useMemo } from 'react'
+import type { Texture } from 'three'
 
-type LUTProps = ConstructorParameters<typeof LUTEffect>[1] & {
+export type LUTProps = {
   lut: Texture
+  blendFunction?: BlendFunction
+  tetrahedralInterpolation?: boolean
 }
 
-export const LUT = forwardRef(function LUT({ lut, tetrahedralInterpolation, ...props }: LUTProps, ref: Ref<LUTEffect>) {
+export const LUT = forwardRef(function LUT(
+  { lut, tetrahedralInterpolation, ...props }: LUTProps,
+  ref: Ref<LUT3DEffect>
+) {
+  const effect = useMemo(() => new LUT3DEffect(lut, props), [lut, props])
   const invalidate = useThree((state) => state.invalidate)
-  const effect = useMemo(() => new LUTEffect(lut, props), [lut, props])
 
   useLayoutEffect(() => {
-    if (lut) effect.setLUT(lut)
-    if (tetrahedralInterpolation) effect.setTetrahedralInterpolationEnabled(tetrahedralInterpolation)
+    if (tetrahedralInterpolation) effect.tetrahedralInterpolation = tetrahedralInterpolation
+    if (lut) effect.lut = lut
     invalidate()
-  }, [effect, lut, tetrahedralInterpolation])
+  }, [effect, invalidate, lut, tetrahedralInterpolation])
 
   return <primitive ref={ref} object={effect} dispose={null} />
 })