From 317d456d5b137e795bb6e7bfa86fb92803c5afd3 Mon Sep 17 00:00:00 2001
From: Danilo Woznica <danilowoz@gmail.com>
Date: Wed, 28 Sep 2022 12:07:15 +0300
Subject: [PATCH] fix(client-navigation): make sure iframe is using the right
 location on refreshing (#587)

---
 .codesandbox/ci.json          |  2 +-
 sandpack-client/src/client.ts | 24 +++++++++++++++++++-----
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
index 2ca350eef..6610e457b 100644
--- a/.codesandbox/ci.json
+++ b/.codesandbox/ci.json
@@ -1,5 +1,5 @@
 {
   "packages": ["sandpack-client", "sandpack-react"],
-  "sandboxes": ["sowx8r", "c3uup0"],
+  "sandboxes": ["sowx8r", "p9l5gn"],
   "node": "14"
 }
diff --git a/sandpack-client/src/client.ts b/sandpack-client/src/client.ts
index 10e7b32db..e279df3dc 100644
--- a/sandpack-client/src/client.ts
+++ b/sandpack-client/src/client.ts
@@ -166,11 +166,7 @@ export class SandpackClient {
       );
     }
 
-    const urlSource = options.startRoute
-      ? new URL(options.startRoute, this.bundlerURL).toString()
-      : this.bundlerURL;
-
-    this.iframe.contentWindow?.location.replace(urlSource);
+    this.setLocationURLIntoIFrame();
 
     this.iframeProtocol = new IFrameProtocol(this.iframe, this.bundlerURL);
 
@@ -230,6 +226,14 @@ export class SandpackClient {
     );
   }
 
+  public setLocationURLIntoIFrame(): void {
+    const urlSource = this.options.startRoute
+      ? new URL(this.options.startRoute, this.bundlerURL).toString()
+      : this.bundlerURL;
+
+    this.iframe.contentWindow?.location.replace(urlSource);
+  }
+
   cleanup(): void {
     this.unsubscribeChannelListener();
     this.unsubscribeGlobalListener();
@@ -318,6 +322,16 @@ export class SandpackClient {
   }
 
   public dispatch(message: SandpackMessage): void {
+    /**
+     * Intercept "refresh" dispatch: this will make sure
+     * that the iframe is still in the location it's supposed to be.
+     * External links inside the iframe will change the location and
+     * prevent the user from navigating back.
+     */
+    if (message.type === "refresh") {
+      this.setLocationURLIntoIFrame();
+    }
+
     this.iframeProtocol.dispatch(message);
   }