From 1b2a70091d2e91fbcca83986451f327124813c02 Mon Sep 17 00:00:00 2001
From: "kai.westerkamp" <kai.westerkamp@iosb.fraunhofer.de>
Date: Fri, 29 Nov 2024 15:13:26 +0100
Subject: [PATCH] fix: update of provided context if readonly Prop changes

---
 src/core/component.test.tsx | 24 +++++++++++++++++++-----
 src/core/hooks.ts           | 17 +++++++++++++----
 2 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/src/core/component.test.tsx b/src/core/component.test.tsx
index 3ce12c35..abcf5b53 100644
--- a/src/core/component.test.tsx
+++ b/src/core/component.test.tsx
@@ -244,10 +244,11 @@ describe("core/component", () => {
     const create1 = vi.fn(() => "test");
     const create2 = vi.fn(() => "test");
 
-    const Component1 = createCesiumComponent<string, { children?: ReactNode }>({
+    const Component1 = createCesiumComponent<string, { children?: ReactNode, readOnlyProp: boolean }>({
       name: "test",
       create: create1,
-      provide: (): any => ({ context: "b" }),
+      provide: (element, ctx, props): any => ({ context: "b", readOnlyProp: props?.readOnlyProp }),
+      cesiumReadonlyProps: ["readOnlyProp"]
     });
 
     const Component2 = createCesiumComponent<string, {}>({
@@ -255,9 +256,22 @@ describe("core/component", () => {
       create: create2,
     });
 
-    render(
+    const { rerender } = render(
+      <Provider value={{ context: "a", context2: "foo" } as any}>
+        <Component1 readOnlyProp={false}>
+          <Component2 />
+        </Component1>
+      </Provider>,
+    );
+
+    await waitFor(() => {
+      expect(create1).toBeCalledWith({ context: "a", context2: "foo" }, expect.anything(), null);
+      expect(create2).toBeCalledWith({ context: "b", context2: "foo", readOnlyProp: false }, expect.anything(), null);
+    });
+
+    rerender(
       <Provider value={{ context: "a", context2: "foo" } as any}>
-        <Component1>
+        <Component1 readOnlyProp={true}>
           <Component2 />
         </Component1>
       </Provider>,
@@ -265,7 +279,7 @@ describe("core/component", () => {
 
     await waitFor(() => {
       expect(create1).toBeCalledWith({ context: "a", context2: "foo" }, expect.anything(), null);
-      expect(create2).toBeCalledWith({ context: "b", context2: "foo" }, expect.anything(), null);
+      expect(create2).toBeCalledWith({ context: "b", context2: "foo", readOnlyProp: true }, expect.anything(), null);
     });
   });
 
diff --git a/src/core/hooks.ts b/src/core/hooks.ts
index 99456704..36b06a1a 100644
--- a/src/core/hooks.ts
+++ b/src/core/hooks.ts
@@ -52,6 +52,11 @@ export type Options<Element, Props extends RootComponentInternalProps, State = a
   useRootEvent?: boolean;
 };
 
+function useForceRedraw(){
+  const [, setRedraw] = useState<boolean>(false)
+  return useCallback(() => setRedraw(a => !a),[])
+}
+
 export const useCesiumComponent = <Element, Props extends RootComponentInternalProps, State = any>(
   {
     name,
@@ -84,6 +89,7 @@ export const useCesiumComponent = <Element, Props extends RootComponentInternalP
   const eventManager = ctx?.[eventManagerContextKey];
   const mountReadyRef = useRef<Promise<void>>();
   const unmountReadyRef = useRef<Promise<void>>();
+  const forceRedraw = useForceRedraw()
 
   // Update properties
   const updateProperties = useCallback(
@@ -160,7 +166,7 @@ export const useCesiumComponent = <Element, Props extends RootComponentInternalP
         mountReadyRef.current = mount();
       }
     },
-    [], // eslint-disable-line react-hooks/exhaustive-deps
+    [ctx], // eslint-disable-line react-hooks/exhaustive-deps
   );
 
   const mount = useCallback(async () => {
@@ -210,6 +216,9 @@ export const useCesiumComponent = <Element, Props extends RootComponentInternalP
         ...ctx,
         ...provide(element.current, ctx, props, stateRef.current),
       };
+      //force rerender because chaging a ref does not update the context
+      //changing provided to a useState will result in a rendering loop because of the useLayoutEffect below 
+      forceRedraw()
     }
 
     const em = useRootEvent
@@ -222,7 +231,7 @@ export const useCesiumComponent = <Element, Props extends RootComponentInternalP
     if (!unmountReadyRef.current) {
       setMounted(true);
     }
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [ctx]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const beforeUnmount = useCallback(() => {
     setMounted(false);
@@ -264,7 +273,7 @@ export const useCesiumComponent = <Element, Props extends RootComponentInternalP
     provided.current = undefined;
     stateRef.current = undefined;
     element.current = undefined;
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [ctx]); // eslint-disable-line react-hooks/exhaustive-deps
 
   // To prevent re-execution by hot loader, execute only once
   useLayoutEffect(() => {
@@ -305,7 +314,7 @@ export const useCesiumComponent = <Element, Props extends RootComponentInternalP
       }
     };
     update();
-  }, [ctx.__$internal, mounted, props, updateProperties]);
+  }, [ctx, mounted, props, updateProperties]);
 
   // Expose cesium element
   useImperativeHandle(