fix: handle updates from children components

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",

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<string[]>(
     normalizePrelude(children?.props.prelude),
   );
@@ -66,6 +68,7 @@ const Player: FC<
         prelude,
       })}
     </PreludeProvider>,
+    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 (
     <div
-      {...player}
+      ref={ref}
       style={{
         width,
         height,

packages/react-shader-fiber/src/hooks/useRenderShader.tsx

@@ -1,9 +1,13 @@
-import { ReactNode, useState } from "react";
+import { ReactNode } from "react";
 import { render } from "@react-shader/renderer";
 
-const useRenderShader = (el?: ReactNode) => {
-  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;

packages/react-shader-fiber/src/test/TestComponent.tsx

@@ -1,7 +1,14 @@
 import { Color } from "../components";
+import { useEffect, useState } from "react";
 
 const TestComponent = () => {
-  return <Color hex={"#ff00ff"} />;
+  const [state, setState] = useState("#ff0000");
+  useEffect(() => {
+    setTimeout(() => {
+      setState("#af00f0");
+    }, 1000);
+  }, []);
+  return <Color hex={state} />;
 };
 
 export default TestComponent;