diff --git a/package-lock.json b/package-lock.json index bbbba35..a379204 100644 --- a/package-lock.json +++ b/package-lock.json @@ -401,9 +401,9 @@ "integrity": "sha512-s3jaWicZd0pkP0jf5ysyHUI/RE7MHos6qlToFcGWXVp+ykHOy77OUMrfbgJ9it2C5bow7OIQwYYaHjk9XlBQ2A==" }, "node_modules/@clotur/player": { - "version": "0.1.8", - "resolved": "https://registry.npmjs.org/@clotur/player/-/player-0.1.8.tgz", - "integrity": "sha512-7hJOR36G9IjmPPJBXhKT1dr+fu1uONz9x+ReKoLvTdWmj0HQBjtbIFrKzy6qWLQxJ7PJhki5HRaiY4U79zd9yg==", + "version": "0.1.10", + "resolved": "https://registry.npmjs.org/@clotur/player/-/player-0.1.10.tgz", + "integrity": "sha512-T/TgryDE0E7qpSYyg7nmaBEvU4FcmPXzcn2Egg5MVYbsCxv7pbmCh3VLcs4CtDpbaonBalTsuQuZBGY1uGv6Wg==", "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0" @@ -13132,10 +13132,10 @@ }, "packages/react-shader-fiber": { "name": "@react-shader/fiber", - "version": "1.2.11", + "version": "1.2.13", "license": "MIT", "dependencies": { - "@clotur/player": "^0.1.8", + "@clotur/player": "^0.1.10", "@react-shader/renderer": "^1.1.4", "@react-shader/stdlib": "^1.1.10", "react": "^18.2.0", @@ -13162,22 +13162,9 @@ "vitest": "^1.1.0" } }, - "packages/react-shader-fiber/node_modules/@react-shader/renderer": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/@react-shader/renderer/-/renderer-1.1.4.tgz", - "integrity": "sha512-ZJCtDiLsX4U8bIWBMoErFUSGY7R59Acif3qDlHd6CPp4+k1lCHl4vZNn8W/ElS1+xglRIjuZrd3tERvQOPAAeA==", - "dependencies": { - "@thi.ng/shader-ast": "^0.12.88", - "react-reconciler": "^0.29.0", - "vitest": "^1.1.0" - }, - "engines": { - "node": ">=18" - } - }, "packages/renderer": { "name": "@react-shader/renderer", - "version": "1.1.3", + "version": "1.1.4", "license": "MIT", "dependencies": { "@thi.ng/shader-ast": "^0.12.88", @@ -13193,7 +13180,7 @@ }, "packages/stdlib": { "name": "@react-shader/stdlib", - "version": "1.1.10", + "version": "1.1.11", "dependencies": { "@react-shader/renderer": "^1.1.4", "@thi.ng/shader-ast": "^0.12.88", @@ -13217,19 +13204,6 @@ "engines": { "node": ">=18" } - }, - "packages/stdlib/node_modules/@react-shader/renderer": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/@react-shader/renderer/-/renderer-1.1.4.tgz", - "integrity": "sha512-ZJCtDiLsX4U8bIWBMoErFUSGY7R59Acif3qDlHd6CPp4+k1lCHl4vZNn8W/ElS1+xglRIjuZrd3tERvQOPAAeA==", - "dependencies": { - "@thi.ng/shader-ast": "^0.12.88", - "react-reconciler": "^0.29.0", - "vitest": "^1.1.0" - }, - "engines": { - "node": ">=18" - } } } } diff --git a/packages/react-shader-fiber/package.json b/packages/react-shader-fiber/package.json index ba7585c..185499d 100644 --- a/packages/react-shader-fiber/package.json +++ b/packages/react-shader-fiber/package.json @@ -19,7 +19,7 @@ "license": "MIT", "author": "Philip Pavo", "dependencies": { - "@clotur/player": "^0.1.8", + "@clotur/player": "^0.1.10", "@react-shader/renderer": "^1.1.4", "@react-shader/stdlib": "^1.1.10", "react": "^18.2.0", diff --git a/packages/react-shader-fiber/src/components/Player.tsx b/packages/react-shader-fiber/src/components/Player.tsx index 3a311ef..a513cd5 100644 --- a/packages/react-shader-fiber/src/components/Player.tsx +++ b/packages/react-shader-fiber/src/components/Player.tsx @@ -5,6 +5,7 @@ import { ReactElement, useEffect, useMemo, + useRef, useState, } from "react"; import useRenderShader from "../hooks/useRenderShader.tsx"; @@ -56,6 +57,7 @@ const Player: FC< debug = false, children, }) => { + const updRef = useRef(() => {}); const [prelude, setPrelude] = useState( normalizePrelude(children?.props.prelude), ); @@ -66,6 +68,7 @@ const Player: FC< prelude, })} , + updRef, ); const preludeStr = useMemo(() => { @@ -100,11 +103,15 @@ const Player: FC< }; }, [debug, fs]); - const player = useCloturPlayer(params); + const { ref, updateFragmentShader } = useCloturPlayer(params); + + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-expect-error + updRef.current = (tree) => updateFragmentShader(toGLSL(preludeStr)(tree)); return (
{ - const [tree, setTree] = useState(null); - return tree || render(el, setTree); +const useRenderShader = ( + el: ReactNode, + onUpdateRef: { current: (tree: object) => void }, +) => { + return render(el, (tree: object) => { + onUpdateRef.current(tree); + }); }; export default useRenderShader; diff --git a/packages/react-shader-fiber/src/test/TestComponent.tsx b/packages/react-shader-fiber/src/test/TestComponent.tsx index 134f777..ad00227 100644 --- a/packages/react-shader-fiber/src/test/TestComponent.tsx +++ b/packages/react-shader-fiber/src/test/TestComponent.tsx @@ -1,7 +1,14 @@ import { Color } from "../components"; +import { useEffect, useState } from "react"; const TestComponent = () => { - return ; + const [state, setState] = useState("#ff0000"); + useEffect(() => { + setTimeout(() => { + setState("#af00f0"); + }, 1000); + }, []); + return ; }; export default TestComponent;