chore: live preview ouside of custom server root will display an error page

abose · abose · commit 1567d25af838 · 2024-04-27T20:25:11.000+03:00
diff --git a/src/assets/default-project/en/Newly_added_features.md b/src/assets/default-project/en/Newly_added_features.md
@@ -20,7 +20,7 @@ new server settings dialog.
 
 `Added on April, 2024`
 
-CSS class hints are now shown within the HTML files class attribute.
+CSS class hints are now shown within the HTML file's class attribute.
 
 ![image](https://github.com/phcode-dev/phoenix/assets/5336369/112ad909-8fd0-4fc4-8042-041ecade9481)
 
diff --git a/src/extensionsIntegrated/Phoenix-live-preview/BrowserStaticServer.js b/src/extensionsIntegrated/Phoenix-live-preview/BrowserStaticServer.js
@@ -36,6 +36,7 @@ define(function (require, exports, module) {
         EventDispatcher = require("utils/EventDispatcher"),
         CommandManager     = require("command/CommandManager"),
         Commands           = require("command/Commands"),
+        StringUtils       = require("utils/StringUtils"),
         EventManager = require("utils/EventManager"),
         LivePreviewSettings  = require("./LivePreviewSettings"),
         ProjectManager = require("project/ProjectManager"),
@@ -112,10 +113,13 @@ define(function (require, exports, module) {
             encodeURIComponent(`${Strings.DESCRIPTION_LIVEDEV_MAIN_SPAN}`);
     }
 
-    function getNoPreviewURL(){
+    function getNoPreviewURL(
+        heading = Strings.DESCRIPTION_LIVEDEV_NO_PREVIEW,
+        message = Strings.DESCRIPTION_LIVEDEV_NO_PREVIEW_DETAILS
+    ){
         return `${window.Phoenix.baseURL}assets/phoenix-splash/no-preview.html?jsonInput=`+
-            encodeURIComponent(`{"heading":"${Strings.DESCRIPTION_LIVEDEV_NO_PREVIEW}",`
-                +`"details":"${Strings.DESCRIPTION_LIVEDEV_NO_PREVIEW_DETAILS}"}`);
+            encodeURIComponent(`{"heading":"${heading}",`
+                +`"details":"${message}"}`);
     }
 
     function _isLivePreviewSupported() {
@@ -153,6 +157,7 @@ define(function (require, exports, module) {
                         httpFilePath = fullPath;
                     }
                     const customServeURL = LivePreviewSettings.getCustomServerConfig(fullPath);
+                    const shouldUseInbuiltPreview = utils.isMarkdownFile(fullPath) || utils.isSVG(fullPath);
                     if(customServeURL){
                         const relativePath = path.relative(projectRoot, fullPath);
                         resolve({
@@ -165,7 +170,17 @@ define(function (require, exports, module) {
                             serverSupportsHotReload: LivePreviewSettings.serverSupportsHotReload()
                         });
                         return;
-                    } else if(utils.isPreviewableFile(fullPath)){
+                    } else if(LivePreviewSettings.isUsingCustomServer() && !customServeURL && !shouldUseInbuiltPreview){
+                        // this is the case where the file is outside of a custom configured server root (E. `www/`)
+                        // like `notServed/Path.html`. For markdown and SVG, we will still use the inbuilt live preview.
+                        resolve({
+                            URL: getNoPreviewURL(Strings.DESCRIPTION_LIVEDEV_EXCLUDED,
+                                StringUtils.format(Strings.DESCRIPTION_LIVEDEV_NO_PREVIEW_EXCLUDED,
+                                    LivePreviewSettings.getCustomServeRoot())),
+                            isNoPreview: true
+                        });
+                        return;
+                    }  else if(utils.isPreviewableFile(fullPath)){
                         const filePath = httpFilePath || path.relative(projectRoot, fullPath);
                         let URL = httpFilePath || `${projectRootUrl}${filePath}`;
                         resolve({
diff --git a/src/extensionsIntegrated/Phoenix-live-preview/LivePreviewSettings.js b/src/extensionsIntegrated/Phoenix-live-preview/LivePreviewSettings.js
@@ -207,6 +207,10 @@ define(function (require, exports, module) {
         };
     }
 
+    function getCustomServeRoot() {
+        return PreferencesManager.get(PREFERENCE_PROJECT_SERVER_PATH) || "/";
+    }
+
     function getCustomServerConfig(fullPath) {
         const customServer = _resolveServer();
         if(!customServer || !ProjectManager.isWithinProject(fullPath)) {
@@ -227,7 +231,8 @@ define(function (require, exports, module) {
             // for docusaurus, we do not have a reliable way to parse the config file and deduce paths, so we always
             // return the root url for now.
             pathRelativeToServeRoot = "";
-        } else if(!isServerRenderedURL){
+        } else if(!isServerRenderedURL || (customServer.pathInProject !== "" &&
+            !relativePath.startsWith(customServer.pathInProject))){ // someNonServePath/design/index.html -> cannot serve this!
             return null;
         }
         // www/design/index.html -> http://localhost:8000/design/index.html
@@ -255,6 +260,7 @@ define(function (require, exports, module) {
 
     exports.showSettingsDialog = showSettingsDialog;
     exports.getCustomServerConfig = getCustomServerConfig;
+    exports.getCustomServeRoot = getCustomServeRoot;
     exports.isUsingCustomServer = isUsingCustomServer;
     exports.getCustomServerFramework = getCustomServerFramework;
     exports.serverSupportsHotReload = serverSupportsHotReload;
diff --git a/src/extensionsIntegrated/Phoenix-live-preview/NodeStaticServer.js b/src/extensionsIntegrated/Phoenix-live-preview/NodeStaticServer.js
@@ -648,6 +648,7 @@ define(function (require, exports, module) {
                 if(fullPath.startsWith("http://") || fullPath.startsWith("https://")){
                     httpFilePath = fullPath;
                 }
+                const shouldUseInbuiltPreview = utils.isMarkdownFile(fullPath) || utils.isSVG(fullPath);
                 const customServeURL = LivePreviewSettings.getCustomServerConfig(fullPath);
                 if(customServeURL){
                     const relativePath = path.relative(projectRoot, fullPath);
@@ -661,6 +662,16 @@ define(function (require, exports, module) {
                         serverSupportsHotReload: LivePreviewSettings.serverSupportsHotReload()
                     });
                     return;
+                } else if(LivePreviewSettings.isUsingCustomServer() && !customServeURL && !shouldUseInbuiltPreview){
+                    // this is the case where the file is outside of a custom configured server root (E. `www/`)
+                    // like `notServed/Path.html`. For markdown and SVG, we will still use the inbuilt live preview.
+                    resolve({
+                        URL: getNoPreviewURL(Strings.DESCRIPTION_LIVEDEV_EXCLUDED,
+                            StringUtils.format(Strings.DESCRIPTION_LIVEDEV_NO_PREVIEW_EXCLUDED,
+                                LivePreviewSettings.getCustomServeRoot())),
+                        isNoPreview: true
+                    });
+                    return;
                 } else if(!_staticServerInstance || !_staticServerInstance.getBaseUrl()){
                     resolve({
                         URL: getNoPreviewURL(),
diff --git a/src/extensionsIntegrated/Phoenix-live-preview/main.js b/src/extensionsIntegrated/Phoenix-live-preview/main.js
@@ -625,14 +625,17 @@ define(function (require, exports, module) {
     }
 
     async function _currentFileChanged(_event, changedFile) {
-        if(changedFile && _shouldShowCustomServerBar(changedFile.fullPath)){
+        const fullPath = changedFile.fullPath;
+        if(changedFile && _shouldShowCustomServerBar(fullPath)){
             _showCustomServerBar();
         }
-        if(urlPinned){
+        const shouldUseInbuiltPreview = utils.isMarkdownFile(fullPath) || utils.isSVG(fullPath);
+        if(urlPinned || (LivePreviewSettings.isUsingCustomServer() &&
+            !LivePreviewSettings.getCustomServerConfig(fullPath) && !shouldUseInbuiltPreview)){
             return;
         }
-        if(changedFile && (utils.isPreviewableFile(changedFile.fullPath) ||
-            utils.isServerRenderedFile(changedFile.fullPath))){
+        if(changedFile && (utils.isPreviewableFile(fullPath) ||
+            utils.isServerRenderedFile(fullPath))){
             if(!panelShownAtStartup){
                 _setPanelVisibility(true);
             }
diff --git a/src/htmlContent/about-dialog.html b/src/htmlContent/about-dialog.html
@@ -13,10 +13,10 @@ <h2>{{APP_NAME_ABOUT_BOX}}</h2>
                   {{/BUILD_TIMESTAMP}}
                 </p>
                 <p class="dialog-message">{{{Strings.ABOUT_RELEASE_CREDITS}}}
-                    <a href="https://github.com/abose" target="_blank">Arun Bose</a><span>,&nbsp;
-                    <a href="https://github.com/charlypa" target="_blank">charly p abraham</a>,&nbsp;
-                    <a href="https://github.com/ayoung5555" target="_blank">Andrew Young</a>,&nbsp;
-                    <a href="https://github.com/faizanbhagat" target="_blank">Faizan Bhagat</a>
+                    <a href="https://github.com/abose" target="_blank" rel="noopener" >Arun Bose</a><span>,&nbsp;
+                    <a href="https://github.com/charlypa" target="_blank" rel="noopener" >charly p abraham</a>,&nbsp;
+                    <a href="https://github.com/ayoung5555" target="_blank" rel="noopener" >Andrew Young</a>,&nbsp;
+                    <a href="https://github.com/faizanbhagat" target="_blank" rel="noopener" >Faizan Bhagat</a>
                 </p>
 
                 <p class="dialog-message"><!-- $NON-NLS$ -->Copyright 2021 - present <a href="https://core.ai">Core.ai</a> and its licensors. All rights reserved.</p>
diff --git a/src/nls/root/strings.js b/src/nls/root/strings.js
@@ -1003,6 +1003,8 @@ define({
     "DESCRIPTION_LIVE_DEV_HIGHLIGHT_SETTINGS": "Live Preview Highlight settings",
     "DESCRIPTION_LIVEDEV_ENABLE_REVERSE_INSPECT": "false to disable live preview reverse inspect",
     "DESCRIPTION_LIVEDEV_NO_PREVIEW": "Nothing to preview!",
+    "DESCRIPTION_LIVEDEV_EXCLUDED": "Custom Server Cannot Serve This file",
+    "DESCRIPTION_LIVEDEV_NO_PREVIEW_EXCLUDED": "Live preview settings is configured to only serve files from folder '{0}'",
     "DESCRIPTION_LIVEDEV_NO_PREVIEW_DETAILS": "Please select an HTML file to preview",
     "DESCRIPTION_LIVEDEV_PREVIEW_RESTRICTED": "Preview Unavailable!",
     "DESCRIPTION_LIVEDEV_PREVIEW_RESTRICTED_DETAILS": "This HTML file is not part of the current project. For security reasons, only project files can be live-previewed. To preview this file, open its containing folder as a separate project.",

Original file line number	Diff line number	Diff line change
`@@ -625,14 +625,17 @@ define(function (require, exports, module) {`
`625`	`625`	`}`
`626`	`626`
`627`	`627`	`async function _currentFileChanged(_event, changedFile) {`
`628`		`- if(changedFile && _shouldShowCustomServerBar(changedFile.fullPath)){`
	`628`	`+ const fullPath = changedFile.fullPath;`
	`629`	`+ if(changedFile && _shouldShowCustomServerBar(fullPath)){`
`629`	`630`	`_showCustomServerBar();`
`630`	`631`	`}`
`631`		`- if(urlPinned){`
	`632`	`+ const shouldUseInbuiltPreview = utils.isMarkdownFile(fullPath) \|\| utils.isSVG(fullPath);`
	`633`	`+ if(urlPinned \|\| (LivePreviewSettings.isUsingCustomServer() &&`
	`634`	`+ !LivePreviewSettings.getCustomServerConfig(fullPath) && !shouldUseInbuiltPreview)){`
`632`	`635`	`return;`
`633`	`636`	`}`
`634`		`- if(changedFile && (utils.isPreviewableFile(changedFile.fullPath) \|\|`
`635`		`- utils.isServerRenderedFile(changedFile.fullPath))){`
	`637`	`+ if(changedFile && (utils.isPreviewableFile(fullPath) \|\|`
	`638`	`+ utils.isServerRenderedFile(fullPath))){`
`636`	`639`	`if(!panelShownAtStartup){`
`637`	`640`	`_setPanelVisibility(true);`
`638`	`641`	`}`