slice-machine-ui 1.26.1-alpha.aa-playground-script.1 → 1.26.1-beta.1

package/components/Simulator/components/IframeRenderer/index.tsx

@@ -4,7 +4,6 @@ import { Flex } from "theme-ui";
 
 import { SimulatorClient } from "@prismicio/simulator";
 import { useElementSize } from "@src/hooks/useElementSize";
-import useSliceMachineActions from "@src/modules/useSliceMachineActions";
 import { ScreenDimensions } from "@lib/models/common/Screenshots";
 
 function useSimulatorClient(): readonly [
@@ -52,6 +51,7 @@ type IframeRendererProps = {
   simulatorUrl: string | undefined;
   dryRun?: boolean;
   isScreenshot?: boolean;
+  handleSimulatorConnectionResult: (result: "successful" | "failed") => void;
 };
 
 const IframeRenderer: React.FunctionComponent<IframeRendererProps> = ({
@@ -60,16 +60,14 @@ const IframeRenderer: React.FunctionComponent<IframeRendererProps> = ({
   simulatorUrl,
   dryRun = false,
   isScreenshot = false,
+  handleSimulatorConnectionResult,
 }) => {
   const [client, iframeRef] = useSimulatorClient();
 
-  const { connectToSimulatorSuccess, connectToSimulatorFailure } =
-    useSliceMachineActions();
-
   useEffect((): void => {
     // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
     if (!simulatorUrl) {
-      connectToSimulatorFailure();
+      handleSimulatorConnectionResult("failed");
       return;
     }
     if (client === undefined) {
@@ -77,7 +75,7 @@ const IframeRenderer: React.FunctionComponent<IframeRendererProps> = ({
     }
 
     if (!client.connected) {
-      connectToSimulatorFailure();
+      handleSimulatorConnectionResult("failed");
       console.warn("Trying to use a disconnected simulator client.");
       return;
     }
@@ -89,10 +87,10 @@ const IframeRenderer: React.FunctionComponent<IframeRendererProps> = ({
 
     updateSliceZone()
       .then(() => {
-        connectToSimulatorSuccess();
+        handleSimulatorConnectionResult("successful");
       })
       .catch(() => {
-        connectToSimulatorFailure();
+        handleSimulatorConnectionResult("failed");
       });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [client, apiContent, simulatorUrl]);

package/components/Simulator/index.tsx

@@ -36,10 +36,6 @@ import useThrottle from "@src/hooks/useThrottle";
 import useSliceMachineActions from "@src/modules/useSliceMachineActions";
 
 import IframeRenderer from "./components/IframeRenderer";
-import {
-  selectIframeStatus,
-  selectIsWaitingForIFrameCheck,
-} from "@src/modules/simulator";
 import { ErrorBoundary } from "@src/ErrorBoundary";
 
 import FullPage from "./components/FullPage";
@@ -47,27 +43,21 @@ import FailedConnect from "./components/FailedConnect";
 import { Slices, VariationSM } from "@lib/models/common/Slice";
 import { ComponentUI } from "@lib/models/common/ComponentUI";
 
-export enum UiState {
-  LOADING_IFRAME = "LOADING_IFRAME",
-  FAILED_CONNECT = "FAILED_CONNECT",
-  SUCCESS = "SUCCESS",
-}
-
 type SimulatorProps = {
   slice: ComponentUI;
   variation: VariationSM;
 };
 
+const IFRAME_CONNECTION_TIMEOUT = 20000;
+
 const Simulator: FC<SimulatorProps> = ({ slice, variation }) => {
-  const { connectToSimulatorIframe, updateSliceMockSuccess } =
-    useSliceMachineActions();
-  const { simulatorUrl, iframeStatus, isWaitingForIFrameCheck, endpoints } =
-    useSelector((state: SliceMachineStoreType) => ({
+  const { updateSliceMockSuccess } = useSliceMachineActions();
+  const { simulatorUrl, endpoints } = useSelector(
+    (state: SliceMachineStoreType) => ({
       simulatorUrl: selectSimulatorUrl(state),
-      iframeStatus: selectIframeStatus(state),
-      isWaitingForIFrameCheck: selectIsWaitingForIFrameCheck(state),
       endpoints: selectEndpoints(state),
-    }));
+    }),
+  );
 
   const editorConfig: EditorConfig = useMemo(
     () => ({
@@ -95,36 +85,36 @@ const Simulator: FC<SimulatorProps> = ({ slice, variation }) => {
     void telemetry.track({ event: "editor:widget-used", sliceId });
   };
 
-  const currentState: UiState = (() => {
-    // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
-    if (isWaitingForIFrameCheck || !iframeStatus) {
-      return UiState.LOADING_IFRAME;
-    }
-    if (iframeStatus !== "ok") {
-      return UiState.FAILED_CONNECT;
-    }
-    return UiState.SUCCESS;
-  })();
+  const [iframeConnectionStatus, setIframeConnectionStatus] = useState<
+    "waiting" | "successful" | "failed"
+  >("waiting");
 
   useEffect(() => {
-    connectToSimulatorIframe();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+    if (iframeConnectionStatus === "waiting") {
+      const timer = setTimeout(() => {
+        setIframeConnectionStatus("failed");
+      }, IFRAME_CONNECTION_TIMEOUT);
 
-  useEffect(() => {
-    if (currentState === UiState.FAILED_CONNECT) {
-      void telemetry.track({ event: "slice-simulator:is-not-running" });
+      return () => clearTimeout(timer);
     }
-  }, [currentState]);
+  }, [iframeConnectionStatus]);
 
-  useEffect(() => {
-    if (currentState === UiState.SUCCESS) {
+  const handleSimulatorConnectionResult = (result: "successful" | "failed") => {
+    if (iframeConnectionStatus !== "waiting") {
+      return;
+    }
+
+    if (result === "failed") {
+      void telemetry.track({ event: "slice-simulator:is-not-running" });
+    } else {
       toggleIsDisplayEditor(true);
     }
-  }, [currentState]);
+
+    setIframeConnectionStatus(result);
+  };
 
   const onRetrigger = () => {
-    connectToSimulatorIframe();
+    setIframeConnectionStatus("waiting");
   };
 
   const [screenDimensions, setScreenDimensions] = useState<ScreenDimensions>(
@@ -220,7 +210,7 @@ const Simulator: FC<SimulatorProps> = ({ slice, variation }) => {
         slice={slice}
         variation={variation}
         isDisplayEditor={isDisplayEditor}
-        actionsDisabled={currentState !== UiState.SUCCESS}
+        actionsDisabled={iframeConnectionStatus !== "successful"}
         toggleIsDisplayEditor={() => toggleIsDisplayEditor(!isDisplayEditor)}
         onSaveMock={() => void saveMock()}
         isSavingMock={isSavingMock}
@@ -256,20 +246,23 @@ const Simulator: FC<SimulatorProps> = ({ slice, variation }) => {
             <Toolbar
               handleScreenSizeChange={setScreenDimensions}
               screenDimensions={screenDimensions}
-              actionsDisabled={currentState !== UiState.SUCCESS}
+              actionsDisabled={iframeConnectionStatus !== "successful"}
             />
-            {currentState === UiState.FAILED_CONNECT ? (
+            {iframeConnectionStatus === "failed" ? (
               <FailedConnect onRetrigger={onRetrigger} />
             ) : null}
-            {currentState === UiState.SUCCESS ? (
+            {iframeConnectionStatus === "successful" ? (
               <IframeRenderer
                 apiContent={apiContent}
                 screenDimensions={screenDimensions}
                 simulatorUrl={simulatorUrl}
+                handleSimulatorConnectionResult={
+                  handleSimulatorConnectionResult
+                }
               />
             ) : (
               <>
-                {currentState === UiState.LOADING_IFRAME ? (
+                {iframeConnectionStatus === "waiting" ? (
                   <FullPage>
                     <Spinner variant="styles.spinner" />
                     <IframeRenderer
@@ -277,13 +270,16 @@ const Simulator: FC<SimulatorProps> = ({ slice, variation }) => {
                       screenDimensions={screenDimensions}
                       simulatorUrl={simulatorUrl}
                       dryRun
+                      handleSimulatorConnectionResult={
+                        handleSimulatorConnectionResult
+                      }
                     />
                   </FullPage>
                 ) : null}
               </>
             )}
           </BaseStyles>
-          {currentState === UiState.SUCCESS && isDisplayEditor ? (
+          {iframeConnectionStatus === "successful" && isDisplayEditor ? (
             <Flex
               className="editor"
               sx={{

package/out/404.html

@@ -1 +1 @@
-<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preload" href="/_next/static/css/21654235130d0806.css" as="style"/><link rel="stylesheet" href="/_next/static/css/21654235130d0806.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-2f903acb0cccbf9e.js" defer=""></script><script src="/_next/static/chunks/framework-cdccea7a52cc6e81.js" defer=""></script><script src="/_next/static/chunks/main-5e6780279ca21cb9.js" defer=""></script><script src="/_next/static/chunks/pages/_app-b57b205722703789.js" defer=""></script><script src="/_next/static/chunks/pages/_error-69b4f498bafdd188.js" defer=""></script><script src="/_next/static/Xw1akSboLhT-BhSrQS3lZ/_buildManifest.js" defer=""></script><script src="/_next/static/Xw1akSboLhT-BhSrQS3lZ/_ssgManifest.js" defer=""></script></head><body><div id="__next"></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"statusCode":404}},"page":"/_error","query":{},"buildId":"Xw1akSboLhT-BhSrQS3lZ","runtimeConfig":{"sentryEnvironment":"alpha"},"nextExport":true,"isFallback":false,"gip":true,"scriptLoader":[]}</script></body></html>
+<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preload" href="/_next/static/css/21654235130d0806.css" as="style"/><link rel="stylesheet" href="/_next/static/css/21654235130d0806.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-2f903acb0cccbf9e.js" defer=""></script><script src="/_next/static/chunks/framework-cdccea7a52cc6e81.js" defer=""></script><script src="/_next/static/chunks/main-5e6780279ca21cb9.js" defer=""></script><script src="/_next/static/chunks/pages/_app-756c037ed6c707e9.js" defer=""></script><script src="/_next/static/chunks/pages/_error-69b4f498bafdd188.js" defer=""></script><script src="/_next/static/dLmvq3LL0BsWu15laiKoK/_buildManifest.js" defer=""></script><script src="/_next/static/dLmvq3LL0BsWu15laiKoK/_ssgManifest.js" defer=""></script></head><body><div id="__next"></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"statusCode":404}},"page":"/_error","query":{},"buildId":"dLmvq3LL0BsWu15laiKoK","runtimeConfig":{"sentryEnvironment":"beta"},"nextExport":true,"isFallback":false,"gip":true,"scriptLoader":[]}</script></body></html>