chore: better live preview file selection when a css/non html file seelcted

abose · abose · commit 2e7c605548ab · 2026-01-08T14:44:29.000+05:30
If a non previewable file is selected (Eg: css/js) then we show the last previewed
 html/md/priviewable file. this is more predicatable and will lead to an active preview
 most of teh time than showing the no preview screen.
diff --git a/src/LiveDevelopment/LiveDevMultiBrowser.js b/src/LiveDevelopment/LiveDevMultiBrowser.js
@@ -88,6 +88,7 @@ define(function (require, exports, module) {
         LiveDevProtocol      = require("LiveDevelopment/MultiBrowserImpl/protocol/LiveDevProtocol"),
         Metrics              = require("utils/Metrics"),
         WorkspaceManager    = require("view/WorkspaceManager"),
+        FileSystem          = require("filesystem/FileSystem"),
         PageLoaderWorkerScript = require("text!LiveDevelopment/BrowserScripts/pageLoaderWorker.js");
 
     // Documents
@@ -538,15 +539,34 @@ define(function (require, exports, module) {
         }
     }
 
+    let _lastPreviewedHTMLFilePath;
+    async function _resolveLivePreviewDocument() {
+        let activeDocument = DocumentManager.getCurrentDocument();
+        if(livePreviewUrlPinned){
+            return jsPromise(DocumentManager.getDocumentForPath(currentPreviewFilePath));
+        }
+        if (activeDocument && activeDocument.getLanguage().getId() === "html") {
+            _lastPreviewedHTMLFilePath = activeDocument.file.fullPath;
+            return activeDocument;
+        }
+        // if a css/js/non html file is active, we fall back to the last previewed HTML file
+        let fileExists = await FileSystem.existsAsync(_lastPreviewedHTMLFilePath);
+        if(!fileExists){
+            // the last previewed file may have been deleted
+            return activeDocument; // can be null
+        }
+        return jsPromise(DocumentManager.getDocumentForPath(_lastPreviewedHTMLFilePath));
+    }
+
+    ProjectManager.on(ProjectManager.EVENT_PROJECT_OPEN, ()=>{
+        _lastPreviewedHTMLFilePath = null;
+    });
 
     /**
      * Open a live preview on the current docuemnt.
      */
     async function open() {
-        let doc = DocumentManager.getCurrentDocument();
-        if(livePreviewUrlPinned){
-            doc = await jsPromise(DocumentManager.getDocumentForPath(currentPreviewFilePath));
-        }
+        let doc = await _resolveLivePreviewDocument();
 
         // wait for server (StaticServer, Base URL or file:)
         _prepareServer(doc)
diff --git a/src/extensionsIntegrated/Phoenix-live-preview/BrowserStaticServer.js b/src/extensionsIntegrated/Phoenix-live-preview/BrowserStaticServer.js
@@ -128,6 +128,8 @@ define(function (require, exports, module) {
         return Phoenix.isNativeApp || !(Phoenix.browser.desktop.isSafari || Phoenix.browser.mobile.isIos);
     }
 
+    let _lastPreviewedFilePath;
+
     /**
      * Finds out a {URL,filePath} to live preview from the project. Will return and empty object if the current
      * file is not previewable.
@@ -179,33 +181,24 @@ define(function (require, exports, module) {
                         });
                         return;
                     }  else if(utils.isPreviewableFile(fullPath)){
-                        const filePath = httpFilePath || path.relative(projectRoot, fullPath);
+                        // this is the case where the user has html/svg/any previewable file as the active document
+                        _lastPreviewedFilePath = fullPath;
+                    }
+                    let fileExists = await FileSystem.existsAsync(_lastPreviewedFilePath);
+                    if(_lastPreviewedFilePath && fileExists){
+                        // user either has active document as a previewable file or this is the case where
+                        // user switched to a css/js/other file that is not previewable, but we have on old previewable
+                        // file we will just take the _lastPreviewedFilePath as active
+                        const filePath = httpFilePath || path.relative(projectRoot, _lastPreviewedFilePath);
                         let URL = httpFilePath || `${projectRootUrl}${filePath}`;
                         resolve({
                             URL,
                             filePath: filePath,
-                            fullPath: fullPath,
-                            isMarkdownFile: utils.isMarkdownFile(fullPath),
-                            isHTMLFile: utils.isHTMLFile(fullPath)
+                            fullPath: _lastPreviewedFilePath,
+                            isMarkdownFile: utils.isMarkdownFile(_lastPreviewedFilePath),
+                            isHTMLFile: utils.isHTMLFile(_lastPreviewedFilePath)
                         });
                         return;
-                    } else {
-                        const currentLivePreviewDetails = LiveDevelopment.getLivePreviewDetails();
-                        if(currentLivePreviewDetails && currentLivePreviewDetails.liveDocument
-                            && currentLivePreviewDetails.liveDocument.isRelated
-                            && currentLivePreviewDetails.liveDocument.isRelated(fullPath)){
-                            fullPath = currentLivePreviewDetails.liveDocument.doc.file.fullPath;
-                            const filePath = path.relative(projectRoot, fullPath);
-                            let URL = `${projectRootUrl}${filePath}`;
-                            resolve({
-                                URL,
-                                filePath: filePath,
-                                fullPath: fullPath,
-                                isMarkdownFile: utils.isMarkdownFile(fullPath),
-                                isHTMLFile: utils.isHTMLFile(fullPath)
-                            });
-                            return;
-                        }
                     }
                 }
                 resolve({
@@ -588,14 +581,16 @@ define(function (require, exports, module) {
         if(!url.startsWith(_staticServerInstance.getBaseUrl())) {
             return Promise.reject("Not serving content as url belongs to another phcode instance: " + url);
         }
-        if(utils.isMarkdownFile(path) && currentFile && currentFile.fullPath === path){
+        const shouldServeRendered = ((path === _lastPreviewedFilePath)
+            || (currentFile && currentFile.fullPath === path));
+        if(utils.isMarkdownFile(path) && shouldServeRendered){
             return _getMarkdown(path);
         }
         if(_staticServerInstance){
             return _staticServerInstance._getInstrumentedContent(path, url);
         }
         return Promise.reject("Cannot get content");
-    };
+    }
 
     /**
      * See BaseServer#start. Starts listenting to StaticServerDomain events.
@@ -712,6 +707,7 @@ define(function (require, exports, module) {
     }
 
     function _projectOpened(_evt, projectRoot) {
+        _lastPreviewedFilePath = null;
         navigatorChannel.postMessage({
             type: 'PROJECT_SWITCH',
             projectRoot: projectRoot.fullPath
diff --git a/src/extensionsIntegrated/Phoenix-live-preview/NodeStaticServer.js b/src/extensionsIntegrated/Phoenix-live-preview/NodeStaticServer.js
@@ -431,7 +431,9 @@ define(function (require, exports, module) {
             return Promise.reject("Not serving content as url invalid: " + url);
         }
         const filePath = _staticServerInstance.urlToPath(url);
-        if(utils.isMarkdownFile(filePath) && currentFile && currentFile.fullPath === filePath){
+        const shouldServeRendered = ((filePath === _lastPreviewedFilePath)
+            || (currentFile && currentFile.fullPath === path));
+        if(utils.isMarkdownFile(filePath) && shouldServeRendered){
             return _getMarkdown(filePath);
         }
         if(_staticServerInstance){
@@ -580,6 +582,7 @@ define(function (require, exports, module) {
     }
 
     function _projectOpened(_evt, projectRoot) {
+        _lastPreviewedFilePath = null;
         liveServerConnector.execPeer('navMessageProjectOpened', {
             type: 'PROJECT_SWITCH',
             projectRoot: projectRoot.fullPath
@@ -635,6 +638,8 @@ define(function (require, exports, module) {
         return livePreviewTabs.size > 0;
     }
 
+    let _lastPreviewedFilePath;
+
     /**
      * Finds out a {URL,filePath} to live preview from the project. Will return and empty object if the current
      * file is not previewable.
@@ -703,33 +708,24 @@ define(function (require, exports, module) {
                     });
                     return;
                 } else if(utils.isPreviewableFile(fullPath)){
-                    const relativeFilePath = httpFilePath || path.relative(projectRoot, fullPath);
-                    let URL = httpFilePath || decodeURI(_staticServerInstance.pathToUrl(fullPath));
+                    // this is the case where the user has html/svg/any previewable file as the active document
+                    _lastPreviewedFilePath = fullPath;
+                }
+                let fileExists = await FileSystem.existsAsync(_lastPreviewedFilePath);
+                if(_lastPreviewedFilePath && fileExists){
+                    // user either has active document as a previewable file or this is the case where
+                    // user switched to a css/js/other file that is not previewable, but we have on old previewable
+                    // file we will just take the _lastPreviewedFilePath as active
+                    const relativeFilePath = httpFilePath || path.relative(projectRoot, _lastPreviewedFilePath);
+                    let URL = httpFilePath || decodeURI(_staticServerInstance.pathToUrl(_lastPreviewedFilePath));
                     resolve({
                         URL,
                         filePath: relativeFilePath,
-                        fullPath: fullPath,
-                        isMarkdownFile: utils.isMarkdownFile(fullPath),
-                        isHTMLFile: utils.isHTMLFile(fullPath)
+                        fullPath: _lastPreviewedFilePath,
+                        isMarkdownFile: utils.isMarkdownFile(_lastPreviewedFilePath),
+                        isHTMLFile: utils.isHTMLFile(_lastPreviewedFilePath)
                     });
                     return;
-                } else {
-                    const currentLivePreviewDetails = LiveDevelopment.getLivePreviewDetails();
-                    if(currentLivePreviewDetails && currentLivePreviewDetails.liveDocument
-                        && currentLivePreviewDetails.liveDocument.isRelated
-                        && currentLivePreviewDetails.liveDocument.isRelated(fullPath)){
-                        fullPath = currentLivePreviewDetails.liveDocument.doc.file.fullPath;
-                        const relativeFilePath = httpFilePath || path.relative(projectRoot, fullPath);
-                        let URL = httpFilePath || decodeURI(_staticServerInstance.pathToUrl(fullPath));
-                        resolve({
-                            URL,
-                            filePath: relativeFilePath,
-                            fullPath: fullPath,
-                            isMarkdownFile: utils.isMarkdownFile(fullPath),
-                            isHTMLFile: utils.isHTMLFile(fullPath)
-                        });
-                        return;
-                    }
                 }
                 resolve({
                     URL: getNoPreviewURL(),
diff --git a/src/extensionsIntegrated/Phoenix-live-preview/main.js b/src/extensionsIntegrated/Phoenix-live-preview/main.js
@@ -823,13 +823,7 @@ define(function (require, exports, module) {
             currentLivePreviewURL = newSrc;
             currentPreviewFile = previewDetails.fullPath;
         }
-        const existingPreviewFile = $iframe && $iframe.attr('data-original-path');
-        const existingPreviewURL = $iframe && $iframe.attr('data-original-src');
-        if(isReload && previewDetails.isNoPreview && existingPreviewURL &&
-            existingPreviewFile && ProjectManager.isWithinProject(existingPreviewFile)) {
-            currentLivePreviewURL = existingPreviewURL;
-            currentPreviewFile = existingPreviewFile;
-        } else if(isReload){
+        if(isReload && previewDetails.isHTMLFile){
             LiveDevelopment.openLivePreview();
         }
         let relativeOrFullPath= ProjectManager.makeProjectRelativeIfPossible(currentPreviewFile);
@@ -852,10 +846,6 @@ define(function (require, exports, module) {
             $iframe = newIframe;
             if(_isProjectPreviewTrusted()){
                 $iframe.attr('src', currentLivePreviewURL);
-                // we have to save src as the iframe src attribute may have redirected, and we cannot read it as its
-                // a third party domain once its redirected.
-                $iframe.attr('data-original-src', currentLivePreviewURL);
-                $iframe.attr('data-original-path', currentPreviewFile);
                 if(Phoenix.isTestWindow) {
                     window._livePreviewIntegTest.currentLivePreviewURL = currentLivePreviewURL;
                     window._livePreviewIntegTest.urlLoadCount++;
diff --git a/src/filesystem/FileSystem.js b/src/filesystem/FileSystem.js
@@ -755,6 +755,9 @@ define(function (require, exports, module) {
      * @param {function(?string, boolean)} callback
      */
     FileSystem.prototype.existsAsync = function (path) {
+        if(!path) {
+            return Promise.resolve(false);
+        }
         return this._impl.existsAsync(path);
     };
 
