Merge pull request #166 from posit-dev/message-on-ready

Post message to parent when ready

src/Components/App.tsx

@@ -8,6 +8,7 @@ import {
 } from "../examples";
 import type { PyodideProxyHandle } from "../hooks/usePyodide";
 import { initPyodide, initShiny, usePyodide } from "../hooks/usePyodide";
+import { useRunOnceOnMount } from "../hooks/useRunOnceOnMount";
 import type { WebRProxyHandle } from "../hooks/useWebR";
 import { initRShiny, initWebR, useWebR } from "../hooks/useWebR";
 import type { ProxyType } from "../pyodide-proxy";
@@ -329,6 +330,12 @@ export function App({
     };
   }, [currentFiles, setCurrentFiles, editorMethods]);
 
+  useRunOnceOnMount(() => {
+    if (window.parent === window) return;
+
+    window.parent.postMessage({ type: "shinyliveReady" }, "*");
+  });
+
   const [utilityMethods, setUtilityMethods] = React.useState<UtilityMethods>({
     formatCode: async (code: string) => {
       return code;

src/hooks/useRunOnceOnMount.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+/**
+ * Executes a callback function only once when the component mounts.
+ *
+ * @param {Function} callback - The callback function to be executed on mount.
+ */
+export function useRunOnceOnMount(callback: () => void) {
+  // This is needed to prevent the callback from being run twice -- in React
+  // strict mode, a useEffect will run twice.
+  const hasRun = React.useRef(false);
+
+  React.useEffect(() => {
+    if (!hasRun.current) {
+      callback();
+      hasRun.current = true;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+}