@react-three/postprocessing 3.0.2 → 3.0.4

package/dist/util.d.ts

@@ -0,0 +1,17 @@
+import React, { RefObject } from 'react';
+import { Vector2 } from 'three';
+import * as THREE from 'three';
+import { type ThreeElement } from '@react-three/fiber';
+import type { Effect, Pass, BlendFunction } from 'postprocessing';
+export declare const resolveRef: <T>(ref: T | React.RefObject<T>) => T;
+export type EffectConstructor = new (...args: any[]) => Effect | Pass;
+export type EffectProps<T extends EffectConstructor> = ThreeElement<T> & ConstructorParameters<T>[0] & {
+    blendFunction?: BlendFunction;
+    opacity?: number;
+};
+export declare const wrapEffect: <T extends EffectConstructor>(effect: T, defaults?: EffectProps<T> | undefined) => ({ blendFunction, opacity, ...props }: {
+    [x: string]: any;
+    blendFunction?: any;
+    opacity?: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useVector2: (props: Record<string, unknown>, key: string) => THREE.Vector2;

package/package.json

@@ -1,68 +1,67 @@
-{
-  "name": "@react-three/postprocessing",
-  "version": "3.0.2",
-  "description": "postprocessing wrapper for React and @react-three/fiber",
-  "keywords": [
-    "postprocessing",
-    "react",
-    "three",
-    "@react-three/fiber",
-    "webgl",
-    "3d"
-  ],
-  "license": "MIT",
-  "files": [
-    "dist",
-    "src"
-  ],
-  "type": "module",
-  "main": "./dist/index.js",
-  "exports": "./dist/index.js",
-  "sideEffects": false,
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/pmndrs/react-postprocessing.git"
-  },
-  "scripts": {
-    "build": "vite build",
-    "eslint": "eslint . --fix --ext=js,ts,jsx,tsx",
-    "eslint:ci": "eslint . --ext=js,ts,jsx,tsx",
-    "test": "vitest run",
-    "typecheck": "tsc",
-    "release": "semantic-release"
-  },
-  "dependencies": {
-    "maath": "^0.6.0",
-    "n8ao": "^1.9.4",
-    "postprocessing": "^6.36.6"
-  },
-  "devDependencies": {
-    "@react-three/fiber": "^9.0.1",
-    "@types/node": "^22.10.7",
-    "@types/react": "^19.0.2",
-    "@types/react-dom": "^19.0.2",
-    "@types/three": "^0.156.0",
-    "@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.27.5",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.32.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "prettier": "^2.8.8",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "semantic-release": "^21.0.2",
-    "three": "^0.156.0",
-    "typescript": "^5.0.4",
-    "vite": "^4.3.5",
-    "vitest": "^2.1.8"
-  },
-  "peerDependencies": {
-    "@react-three/fiber": "^9.0.0",
-    "react": "^19.0",
-    "three": ">= 0.156.0"
-  }
-}
+{
+  "name": "@react-three/postprocessing",
+  "version": "3.0.4",
+  "description": "postprocessing wrapper for React and @react-three/fiber",
+  "keywords": [
+    "postprocessing",
+    "react",
+    "three",
+    "@react-three/fiber",
+    "webgl",
+    "3d"
+  ],
+  "license": "MIT",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "type": "module",
+  "main": "./dist/index.js",
+  "exports": "./dist/index.js",
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pmndrs/react-postprocessing.git"
+  },
+  "scripts": {
+    "build": "rimraf dist && vite build && tsc",
+    "eslint": "eslint . --fix --ext=js,ts,jsx,tsx",
+    "eslint:ci": "eslint . --ext=js,ts,jsx,tsx",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "maath": "^0.6.0",
+    "n8ao": "^1.9.4",
+    "postprocessing": "^6.36.6"
+  },
+  "devDependencies": {
+    "@react-three/fiber": "^9.0.4",
+    "@types/node": "^22.10.7",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
+    "@types/three": "^0.156.0",
+    "@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.27.5",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "prettier": "^2.8.8",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "rimraf": "^6.0.1",
+    "three": "^0.156.0",
+    "typescript": "^5.0.4",
+    "vite": "^4.3.5",
+    "vitest": "^2.1.8"
+  },
+  "peerDependencies": {
+    "@react-three/fiber": "^9.0.0",
+    "react": "^19.0",
+    "three": ">= 0.156.0"
+  }
+}

package/src/EffectComposer.test.tsx

@@ -1,126 +1,126 @@
-import * as React from 'react'
-import * as THREE from 'three'
-import { vi, describe, it, expect } from 'vitest'
-import { extend, createRoot, act } from '@react-three/fiber'
-import { EffectComposer } from './EffectComposer'
-import { EffectComposer as EffectComposerImpl, RenderPass, Pass, Effect, EffectPass } from 'postprocessing'
-
-// Let React know that we'll be testing effectful components
-declare global {
-  var IS_REACT_ACT_ENVIRONMENT: boolean
-}
-global.IS_REACT_ACT_ENVIRONMENT = true
-
-// Create virtual R3F root for testing
-extend(THREE as any)
-const root = createRoot({
-  style: {} as CSSStyleDeclaration,
-  addEventListener: (() => {}) as any,
-  removeEventListener: (() => {}) as any,
-  width: 1280,
-  height: 800,
-  clientWidth: 1280,
-  clientHeight: 800,
-  getContext: (() =>
-    new Proxy(
-      {},
-      {
-        get(_target, prop) {
-          switch (prop) {
-            case 'getParameter':
-              return () => 'WebGL 2' // GL_VERSION
-            case 'getExtension':
-              return () => ({}) // EXT_blend_minmax
-            case 'getContextAttributes':
-              return () => ({ alpha: true })
-            case 'getShaderPrecisionFormat':
-              return () => ({ rangeMin: 1, rangeMax: 1, precision: 1 })
-            default:
-              return () => {}
-          }
-        },
-      }
-    )) as any,
-} satisfies Partial<HTMLCanvasElement> as HTMLCanvasElement)
-root.configure({ frameloop: 'never' })
-
-const EFFECT_SHADER = 'mainImage() {}'
-
-describe('EffectComposer', () => {
-  it('should merge effects together', async () => {
-    const composerRef = React.createRef<EffectComposerImpl>()
-
-    const effectA = new Effect('A', EFFECT_SHADER)
-    const effectB = new Effect('B', EFFECT_SHADER)
-    const effectC = new Effect('C', EFFECT_SHADER)
-    const passA = new Pass()
-    const passB = new Pass()
-
-    // Forward order
-    await act(async () =>
-      root.render(
-        <EffectComposer ref={composerRef}>
-          {/* EffectPass(effectA, effectB) */}
-          <primitive object={effectA} />
-          <primitive object={effectB} />
-          {/* PassA */}
-          <primitive object={passA} />
-          {/* EffectPass(effectC) */}
-          <primitive object={effectC} />
-          {/* PassB */}
-          <primitive object={passB} />
-        </EffectComposer>
-      )
-    )
-    expect(composerRef.current!.passes.map((p) => p.constructor)).toStrictEqual([
-      RenderPass,
-      EffectPass,
-      Pass,
-      EffectPass,
-      Pass,
-    ])
-    // @ts-expect-error
-    expect((composerRef.current!.passes[1] as EffectPass).effects).toStrictEqual([effectA, effectB])
-    expect(composerRef.current!.passes[2]).toBe(passA)
-    // @ts-expect-error
-    expect((composerRef.current!.passes[3] as EffectPass).effects).toStrictEqual([effectC])
-    expect(composerRef.current!.passes[4]).toBe(passB)
-
-    // NOTE: instance children ordering is unstable until R3F v9, so we remount from scratch
-    await act(async () => root.render(null))
-
-    // Reverse order
-    await act(async () =>
-      root.render(
-        <EffectComposer ref={composerRef}>
-          {/* PassB */}
-          <primitive object={passB} />
-          {/* EffectPass(effectC) */}
-          <primitive object={effectC} />
-          {/* PassA */}
-          <primitive object={passA} />
-          {/* EffectPass(effectB, effectA) */}
-          <primitive object={effectB} />
-          <primitive object={effectA} />
-        </EffectComposer>
-      )
-    )
-    expect(composerRef.current!.passes.map((p) => p.constructor)).toStrictEqual([
-      RenderPass,
-      Pass,
-      EffectPass,
-      Pass,
-      EffectPass,
-    ])
-    expect(composerRef.current!.passes[1]).toBe(passB)
-    // @ts-expect-error
-    expect((composerRef.current!.passes[2] as EffectPass).effects).toStrictEqual([effectC])
-    expect(composerRef.current!.passes[3]).toBe(passA)
-    // @ts-expect-error
-    expect((composerRef.current!.passes[4] as EffectPass).effects).toStrictEqual([effectB, effectA])
-  })
-
-  it.skip('should split convolution effects', async () => {
-    await act(async () => root.render(null))
-  })
-})
+import * as React from 'react'
+import * as THREE from 'three'
+import { vi, describe, it, expect } from 'vitest'
+import { extend, createRoot, act } from '@react-three/fiber'
+import { EffectComposer } from './EffectComposer'
+import { EffectComposer as EffectComposerImpl, RenderPass, Pass, Effect, EffectPass } from 'postprocessing'
+
+// Let React know that we'll be testing effectful components
+declare global {
+  var IS_REACT_ACT_ENVIRONMENT: boolean
+}
+global.IS_REACT_ACT_ENVIRONMENT = true
+
+// Create virtual R3F root for testing
+extend(THREE as any)
+const root = createRoot({
+  style: {} as CSSStyleDeclaration,
+  addEventListener: (() => {}) as any,
+  removeEventListener: (() => {}) as any,
+  width: 1280,
+  height: 800,
+  clientWidth: 1280,
+  clientHeight: 800,
+  getContext: (() =>
+    new Proxy(
+      {},
+      {
+        get(_target, prop) {
+          switch (prop) {
+            case 'getParameter':
+              return () => 'WebGL 2' // GL_VERSION
+            case 'getExtension':
+              return () => ({}) // EXT_blend_minmax
+            case 'getContextAttributes':
+              return () => ({ alpha: true })
+            case 'getShaderPrecisionFormat':
+              return () => ({ rangeMin: 1, rangeMax: 1, precision: 1 })
+            default:
+              return () => {}
+          }
+        },
+      }
+    )) as any,
+} satisfies Partial<HTMLCanvasElement> as HTMLCanvasElement)
+root.configure({ frameloop: 'never' })
+
+const EFFECT_SHADER = 'mainImage() {}'
+
+describe('EffectComposer', () => {
+  it('should merge effects together', async () => {
+    const composerRef = React.createRef<EffectComposerImpl>()
+
+    const effectA = new Effect('A', EFFECT_SHADER)
+    const effectB = new Effect('B', EFFECT_SHADER)
+    const effectC = new Effect('C', EFFECT_SHADER)
+    const passA = new Pass()
+    const passB = new Pass()
+
+    // Forward order
+    await act(async () =>
+      root.render(
+        <EffectComposer ref={composerRef}>
+          {/* EffectPass(effectA, effectB) */}
+          <primitive object={effectA} />
+          <primitive object={effectB} />
+          {/* PassA */}
+          <primitive object={passA} />
+          {/* EffectPass(effectC) */}
+          <primitive object={effectC} />
+          {/* PassB */}
+          <primitive object={passB} />
+        </EffectComposer>
+      )
+    )
+    expect(composerRef.current!.passes.map((p) => p.constructor)).toStrictEqual([
+      RenderPass,
+      EffectPass,
+      Pass,
+      EffectPass,
+      Pass,
+    ])
+    // @ts-expect-error
+    expect((composerRef.current!.passes[1] as EffectPass).effects).toStrictEqual([effectA, effectB])
+    expect(composerRef.current!.passes[2]).toBe(passA)
+    // @ts-expect-error
+    expect((composerRef.current!.passes[3] as EffectPass).effects).toStrictEqual([effectC])
+    expect(composerRef.current!.passes[4]).toBe(passB)
+
+    // NOTE: instance children ordering is unstable until R3F v9, so we remount from scratch
+    await act(async () => root.render(null))
+
+    // Reverse order
+    await act(async () =>
+      root.render(
+        <EffectComposer ref={composerRef}>
+          {/* PassB */}
+          <primitive object={passB} />
+          {/* EffectPass(effectC) */}
+          <primitive object={effectC} />
+          {/* PassA */}
+          <primitive object={passA} />
+          {/* EffectPass(effectB, effectA) */}
+          <primitive object={effectB} />
+          <primitive object={effectA} />
+        </EffectComposer>
+      )
+    )
+    expect(composerRef.current!.passes.map((p) => p.constructor)).toStrictEqual([
+      RenderPass,
+      Pass,
+      EffectPass,
+      Pass,
+      EffectPass,
+    ])
+    expect(composerRef.current!.passes[1]).toBe(passB)
+    // @ts-expect-error
+    expect((composerRef.current!.passes[2] as EffectPass).effects).toStrictEqual([effectC])
+    expect(composerRef.current!.passes[3]).toBe(passA)
+    // @ts-expect-error
+    expect((composerRef.current!.passes[4] as EffectPass).effects).toStrictEqual([effectB, effectA])
+  })
+
+  it.skip('should split convolution effects', async () => {
+    await act(async () => root.render(null))
+  })
+})