feat: capture parent origin when possible

Author: tsck

src/ui/hooks/useRenderData.ts

@@ -13,6 +13,8 @@ interface UseRenderDataResult<T> {
     data: T | null;
     isLoading: boolean;
     error: string | null;
+    /** The origin of the parent window, captured from the first valid message */
+    parentOrigin: string | null;
 }
 
 /**
@@ -24,6 +26,7 @@ interface UseRenderDataResult<T> {
  *   - data: The received render data (or null if not yet received)
  *   - isLoading: Whether data is still being loaded
  *   - error: Error message if message validation failed
+ *   - parentOrigin: The origin of the parent window (for secure postMessage calls)
  *
  * @example
  * ```tsx
@@ -32,15 +35,17 @@ interface UseRenderDataResult<T> {
  * }
  *
  * function MyComponent() {
- *   const { data, isLoading, error } = useRenderData<MyData>();
- *   // ...
+ *   const { data, isLoading, error, parentOrigin } = useRenderData<MyData>();
+ *   const { intent } = useUIActions({ targetOrigin: parentOrigin ?? undefined });
+ *   return <button onClick={() => intent("my-action")}>Click</button>;
  * }
  * ```
  */
 export function useRenderData<T = unknown>(): UseRenderDataResult<T> {
     const [data, setData] = useState<T | null>(null);
     const [isLoading, setIsLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);
+    const [parentOrigin, setParentOrigin] = useState<string | null>(null);
 
     useEffect(() => {
         const handleMessage = (event: MessageEvent<RenderDataMessage>): void => {
@@ -49,6 +54,8 @@ export function useRenderData<T = unknown>(): UseRenderDataResult<T> {
                 return;
             }
 
+            setParentOrigin((current) => current ?? event.origin);
+
             if (!event.data.payload || typeof event.data.payload !== "object") {
                 const errorMsg = "Invalid payload structure received";
                 setError(errorMsg);
@@ -88,5 +95,6 @@ export function useRenderData<T = unknown>(): UseRenderDataResult<T> {
         data,
         isLoading,
         error,
+        parentOrigin,
     };
 }

tests/unit/ui/useRenderData.test.ts

@@ -0,0 +1,87 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+import { createElement, type FunctionComponent } from "react";
+import { renderToString } from "react-dom/server";
+import { useRenderData } from "../../../src/ui/hooks/useRenderData.js";
+
+type UseRenderDataResult<T> = ReturnType<typeof useRenderData<T>>;
+
+interface TestData {
+    items: string[];
+}
+
+/**
+ * Simple hook testing utility that renders a component using the hook
+ * and captures the result for assertions.
+ */
+function testHook<T = unknown>(): UseRenderDataResult<T> {
+    let hookResult: UseRenderDataResult<T> | undefined;
+
+    const TestComponent: FunctionComponent = () => {
+        hookResult = useRenderData<T>();
+        return null;
+    };
+
+    renderToString(createElement(TestComponent));
+
+    if (!hookResult) {
+        throw new Error("Hook did not return a result");
+    }
+
+    return hookResult;
+}
+
+describe("useRenderData", () => {
+    let postMessageMock: ReturnType<typeof vi.fn>;
+    let originalWindow: typeof globalThis.window;
+
+    beforeEach(() => {
+        originalWindow = globalThis.window;
+        postMessageMock = vi.fn();
+
+        globalThis.window = {
+            parent: {
+                postMessage: postMessageMock,
+            },
+            addEventListener: vi.fn(),
+            removeEventListener: vi.fn(),
+        } as unknown as typeof globalThis.window;
+    });
+
+    afterEach(() => {
+        globalThis.window = originalWindow;
+        vi.restoreAllMocks();
+    });
+
+    it("returns initial state with isLoading true", () => {
+        const result = testHook<TestData>();
+
+        expect(result.data).toBeNull();
+        expect(result.isLoading).toBe(true);
+        expect(result.error).toBeNull();
+    });
+
+    it("returns parentOrigin as null initially", () => {
+        const result = testHook<TestData>();
+
+        expect(result.parentOrigin).toBeNull();
+    });
+
+    it("includes parentOrigin in return type", () => {
+        const result = testHook<TestData>();
+
+        // Verify the hook returns the expected shape with parentOrigin
+        expect(result).toHaveProperty("data");
+        expect(result).toHaveProperty("isLoading");
+        expect(result).toHaveProperty("error");
+        expect(result).toHaveProperty("parentOrigin");
+    });
+
+    it("returns a stable object shape for destructuring", () => {
+        const { data, isLoading, error, parentOrigin } = testHook<TestData>();
+
+        expect(data).toBeNull();
+        expect(isLoading).toBe(true);
+        expect(error).toBeNull();
+        expect(parentOrigin).toBeNull();
+    });
+});