fix: live previewed pages bloated with live preview scripts

Author: abose

src/LiveDevelopment/LiveDevMultiBrowser.js

@@ -498,6 +498,9 @@ define(function (require, exports, module) {
         doc._ensureMasterEditor();
         _liveDocument = _createLiveDocument(doc, doc._masterEditor);
         _server.add(_liveDocument);
+        _server.addVirtualContentAtPath(
+            `${_liveDocument.doc.file.parentPath}${LiveDevProtocol.LIVE_DEV_REMOTE_SCRIPTS_FILE_NAME}`,
+            _protocol.getRemoteScriptContents());
     }
 
 

src/LiveDevelopment/MultiBrowserImpl/protocol/LiveDevProtocol.js

@@ -39,17 +39,19 @@
 define(function (require, exports, module) {
 
 
-    var EventDispatcher = require("utils/EventDispatcher");
+    const EventDispatcher = require("utils/EventDispatcher");
 
     // Text of the script we'll inject into the browser that handles protocol requests.
-    var LiveDevProtocolRemote = require("text!LiveDevelopment/BrowserScripts/LiveDevProtocolRemote.js"),
+    const LiveDevProtocolRemote = require("text!LiveDevelopment/BrowserScripts/LiveDevProtocolRemote.js"),
         DocumentObserver      = require("text!LiveDevelopment/BrowserScripts/DocumentObserver.js"),
         RemoteFunctions       = require("text!LiveDevelopment/BrowserScripts/RemoteFunctions.js"),
         EditorManager         = require("editor/EditorManager"),
         LiveDevMultiBrowser   = require("LiveDevelopment/LiveDevMultiBrowser"),
         HTMLInstrumentation   = require("LiveDevelopment/MultiBrowserImpl/language/HTMLInstrumentation"),
         FileViewController    = require("project/FileViewController");
 
+    const LIVE_DEV_REMOTE_SCRIPTS_FILE_NAME = "phoenix_live_preview_scripts_instrumented_345Tt96G4.js";
+
     /**
      * @private
      * Active connections.
@@ -232,13 +234,13 @@ define(function (require, exports, module) {
      * Includes the <script> tags.
      * @return {string}
      */
-    function getRemoteFunctionsScript() {
-        var script = "";
+    function _getRemoteFunctionsScript() {
+        let script = "";
         // Inject DocumentObserver into the browser (tracks related documents)
         script += DocumentObserver;
         // Inject remote functions into the browser.
-        script += "window._LD=(" + RemoteFunctions + "(" + JSON.stringify(LiveDevMultiBrowser.config) + "))";
-        return "<script>\n" + script + "</script>\n";
+        script += "\nwindow._LD=(" + RemoteFunctions + "(" + JSON.stringify(LiveDevMultiBrowser.config) + "))";
+        return "\n" + script + "\n";
     }
 
     /**
@@ -247,14 +249,25 @@ define(function (require, exports, module) {
      * This script will also include the script required by the transport, if any.
      * @return {string}
      */
-    function getRemoteScript() {
-        var transportScript = _transport.getRemoteScript() || "";
-        var remoteFunctionsScript = getRemoteFunctionsScript() || "";
+    function getRemoteScriptContents() {
+        const transportScript = _transport.getRemoteScript() || "";
+        const remoteFunctionsScript = _getRemoteFunctionsScript() || "";
         return transportScript +
-            "<script>\n" + LiveDevProtocolRemote + "</script>\n" +
+            "\n" + LiveDevProtocolRemote + "\n" +
             remoteFunctionsScript;
     }
 
+    /**
+     * Returns a script that should be injected into the HTML that's launched in the
+     * browser in order to handle protocol requests. Includes the <script> tags.
+     * This script will also include the script required by the transport, if any.
+     * @return {string}
+     */
+    function getRemoteScript() {
+        // give a wrong random file name that wont have a possibility of an actual file name
+        return `\n\t\t<script src="${LIVE_DEV_REMOTE_SCRIPTS_FILE_NAME}"></script>`;
+    }
+
     /**
      * Protocol method. Evaluates the given script in the browser (in global context), and returns a promise
      * that will be fulfilled with the result of the script, if any.
@@ -374,6 +387,7 @@ define(function (require, exports, module) {
     // public API
     exports.setTransport = setTransport;
     exports.getRemoteScript = getRemoteScript;
+    exports.getRemoteScriptContents = getRemoteScriptContents;
     exports.evaluate = evaluate;
     exports.setStylesheetText = setStylesheetText;
     exports.getStylesheetText = getStylesheetText;
@@ -382,4 +396,5 @@ define(function (require, exports, module) {
     exports.close = close;
     exports.getConnectionIds = getConnectionIds;
     exports.closeAllConnections = closeAllConnections;
+    exports.LIVE_DEV_REMOTE_SCRIPTS_FILE_NAME = LIVE_DEV_REMOTE_SCRIPTS_FILE_NAME;
 });

src/LiveDevelopment/MultiBrowserImpl/transports/ServiceWorkerTransport.js

@@ -67,11 +67,11 @@ define(function (require, exports, module) {
      * @return {string}
      */
     function getRemoteScript() {
-        return "<script>\n" +
+        return "\n" +
             `window.LIVE_PREVIEW_BROADCAST_CHANNEL_ID = "${BROADCAST_CHANNEL_ID}";\n` +
             `window.LIVE_PREVIEW_DEBIG_ENABLED = ${window.loggingOptions.logLivePreview};\n` +
             ServiceWorkerTransportRemote +
-            "</script>\n";
+            "\n";
     }
 
     EventDispatcher.makeEventDispatcher(exports);

src/LiveDevelopment/Servers/BaseServer.js

@@ -40,6 +40,7 @@ define(function (require, exports, module) {
         this._root          = config.root;          // ProjectManager.getProjectRoot().fullPath
         this._pathResolver  = config.pathResolver;  // ProjectManager.makeProjectRelativeIfPossible(doc.file.fullPath)
         this._liveDocuments = {};
+        this._virtualServingDocuments = {};
     }
 
     /**
@@ -176,6 +177,15 @@ define(function (require, exports, module) {
         this._liveDocuments[key] = liveDocument;
     };
 
+    /**
+     * This will add the given text to be served when the path is hit in server. You can use this to either
+     * serve a file that doesn't exist in project, or to override a given path to the contents you give.
+     */
+    BaseServer.prototype.addVirtualContentAtPath = function (fullPath, docText) {
+        let key = this._documentKey(fullPath);
+        this._virtualServingDocuments[key] = docText;
+    };
+
     /**
      * Removes a live document from the server
      * @param {Object} liveDocument
@@ -192,6 +202,16 @@ define(function (require, exports, module) {
         }
     };
 
+    /**
+     * removes path added by addVirtualContentAtPath()
+     */
+    BaseServer.prototype.removeVirtualContentAtPath = function (fullPath) {
+        let key = this._documentKey(fullPath);
+        if(this._virtualServingDocuments[key]) {
+            delete this._virtualServingDocuments[key];
+        }
+    };
+
     /**
      * Lookup a live document using it's full path key
      * @param {string} path Absolute path to covert to a URL
@@ -207,6 +227,7 @@ define(function (require, exports, module) {
      */
     BaseServer.prototype.clear = function () {
         this._liveDocuments = {};
+        this._virtualServingDocuments = {};
     };
 
     /**

src/extensions/default/StaticServer/StaticServer.js

@@ -140,7 +140,8 @@ define(function (require, exports, module) {
      * @return {jQuery.Promise} Resolved by the StaticServer domain when the message is acknowledged.
      */
     StaticServer.prototype._updateInstrumentedURLSInWorker = function () {
-        let paths = Object.keys(this._liveDocuments);
+        let paths = Object.keys(this._liveDocuments)
+            .concat(Object.keys(this._virtualServingDocuments));
         console.log(`Static server _updateInstrumentedURLSInWorker: `, this._root, paths);
 
         window.messageSW({
@@ -166,6 +167,17 @@ define(function (require, exports, module) {
         return $.Deferred().resolve().promise(); // virtual server is always assumed present in phoenix
     };
 
+    /**
+     * This will add the given text to be served when the path is hit in server. use this to either serve a file
+     * that doesn't exist in project, or to override a given path to the contents you give.
+     */
+    StaticServer.prototype.addVirtualContentAtPath = function (path, docText) {
+        BaseServer.prototype.addVirtualContentAtPath.call(this, path, docText);
+
+        // update the paths to watch
+        this._updateInstrumentedURLSInWorker();
+    };
+
     /**
      * See BaseServer#add. StaticServer ignores documents that do not have
      * a setInstrumentationEnabled method. Updates request filters.
@@ -191,6 +203,16 @@ define(function (require, exports, module) {
         this._updateInstrumentedURLSInWorker();
     };
 
+    /**
+     * removes path added by addVirtualContentAtPath()
+     */
+    StaticServer.prototype.removeVirtualContentAtPath = function (path) {
+        BaseServer.prototype.removeVirtualContentAtPath.call(this, path);
+
+        // update the paths to watch
+        this._updateInstrumentedURLSInWorker();
+    };
+
     /**
      * See BaseServer#clear. Updates request filters.
      */
@@ -258,17 +280,27 @@ define(function (require, exports, module) {
         }
         let path = this._documentKey(data.path),
             requestID = data.requestID,
-            liveDocument = this._liveDocuments[path];
-        let response = {};
-        if (liveDocument && liveDocument.getResponseData) {
+            liveDocument = this._liveDocuments[path],
+            virtualDocument = this._virtualServingDocuments[path];
+        let response = {
+            body: "instrumented document not found at static server"
+        };
+
+        if (virtualDocument) {
+            // virtual document overrides takes precedence over live preview docs
+            response = {
+                body: virtualDocument
+            };
+        } else if (liveDocument && liveDocument.getResponseData) {
             response = liveDocument.getResponseData();
-            _serverBroadcastChannel.postMessage({
-                type: 'REQUEST_RESPONSE',
-                requestID, //pass along the requestID so that the appropriate callback will be hit at the service worker
-                path,
-                contents: response.body
-            });
         }
+
+        _serverBroadcastChannel.postMessage({
+            type: 'REQUEST_RESPONSE',
+            requestID, //pass along the requestID so that the appropriate callback will be hit at the service worker
+            path,
+            contents: response.body
+        });
     };
 
     _serverBroadcastChannel.onmessage = (event) => {