feat: browser multi tab live preview working

phcode-dev · Jan 4, 2024 · 420adb5 · 420adb5
1 parent 6749637
commit 420adb5
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 18 deletions.
diff --git a/src/extensions/default/Phoenix-live-preview/StaticServer.js b/src/extensions/default/Phoenix-live-preview/StaticServer.js
@@ -314,7 +314,7 @@ define(function (require, exports, module) {
         // strip this query param as the redirection will be done by the page loader and not the content iframe.
         url.searchParams.delete(PHCODE_LIVE_PREVIEW_QUERY_PARAM);
         let templateVars = {
-            redirectURL: utils.getPageLoaderURL(url.href)
+            redirectURL: url.href
         };
         return Mustache.render(redirectionHTMLTemplate, templateVars);
     }

diff --git a/src/extensions/default/Phoenix-live-preview/main.js b/src/extensions/default/Phoenix-live-preview/main.js
@@ -70,6 +70,9 @@ define(function (require, exports, module) {
     </iframe>
     `;
 
+    const LOADER_BROADCAST_ID = `live-preview-loader-${Phoenix.PHOENIX_INSTANCE_ID}`;
+    const navigatorChannel = new BroadcastChannel(LOADER_BROADCAST_ID);
+
     ExtensionInterface.registerExtensionInterface(
         ExtensionInterface._DEFAULT_EXTENSIONS_INTERFACE_NAMES.PHOENIX_LIVE_PREVIEW, exports);
 
@@ -171,23 +174,17 @@ define(function (require, exports, module) {
     }
 
     function _getTabNavigationURL(url) {
-        let details = LiveDevelopment.getLivePreviewDetails(),
-            openURL = new URL(url);
+        let openURL = new URL(url);
         // we tag all externally opened urls with query string parameter phcodeLivePreview="true" to address
         // #LIVE_PREVIEW_TAB_NAVIGATION_RACE_FIX
         openURL.searchParams.set(StaticServer.PHCODE_LIVE_PREVIEW_QUERY_PARAM, "true");
-        openURL = openURL.href;
-        if(details.URL !== url) {
-            openURL = utils.getPageLoaderURL(url);
-        }
-        return openURL;
+        return  utils.getPageLoaderURL(openURL.href);
     }
 
     function _redirectAllTabs(newURL) {
-        const openURL = _getTabNavigationURL(newURL);
-        StaticServer.messageToLivePreviewTabs({
-            type: NAVIGATOR_REDIRECT_PAGE,
-            URL: openURL
+        navigatorChannel.postMessage({
+            type: 'REDIRECT_PAGE',
+            url: newURL
         });
     }
 
@@ -284,8 +281,7 @@ define(function (require, exports, module) {
             newIframe.insertAfter($iframe);
             $iframe.remove();
             $iframe = newIframe;
-            const iframeURL = utils.isImage(previewDetails.fullPath) ? _getTabNavigationURL(newSrc) : newSrc;
-            $iframe.attr('src', iframeURL);
+            $iframe.attr('src', newSrc);
         }
         Metrics.countEvent(Metrics.EVENT_TYPE.LIVE_PREVIEW, "render",
             utils.getExtension(previewDetails.fullPath));

diff --git a/src/extensions/default/Phoenix-live-preview/utils.js b/src/extensions/default/Phoenix-live-preview/utils.js
@@ -88,8 +88,9 @@ define(function (require, exports, module) {
     }
 
     function getPageLoaderURL(url) {
-        return `${LiveDevServerManager.getStaticServerBaseURLs().baseURL}pageLoader.html?`
-            +`broadcastChannel=${LivePreviewTransport.BROADCAST_CHANNEL_ID}&URL=${encodeURIComponent(url)}`;
+        return `${Phoenix.baseURL}live-preview-loader.html?`
+            +`virtualServerURL=${encodeURIComponent(LiveDevServerManager.getStaticServerBaseURLs().baseURL)}`+
+            `&phoenixInstanceID=${Phoenix.PHOENIX_INSTANCE_ID}&initialURL=${encodeURIComponent(url)}`;
     }
 
     function _isLivePreviewSupported() {

diff --git a/src/live-preview.html → src/live-preview-loader.html b/src/live-preview.html → src/live-preview-loader.html
@@ -137,9 +137,9 @@
                 return;
             }
             let livepreviewServerIframe = document.getElementById("live-preview-server-iframe");
-            let url = `${virtualServerURL}?parentOrigin=${location.origin}`;
+            let url = `${decodeURIComponent(virtualServerURL)}?parentOrigin=${location.origin}`;
             livepreviewServerIframe.addEventListener('load', function() {
-                document.getElementById('previewFrame').src = initialURL;
+                document.getElementById('previewFrame').src = decodeURIComponent(initialURL);
                 setupNavigationWatcher(phoenixInstanceID);
             });
             livepreviewServerIframe.setAttribute("src", url);