Skip to content

Commit 2b070e3

Browse files
phoenixidephoenixide
committed
deploy: cc3f7a7 
1 parent dc01670 commit 2b070e3

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

58 files changed

+547
-579
lines changed

LiveDevelopment/BrowserScripts/ServiceWorkerTransportRemote.js renamed to LiveDevelopment/BrowserScripts/LivePreviewTransportRemote.js

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -33,20 +33,18 @@
3333
}
3434

3535
const clientID = "" + Math.round( Math.random()*1000000000);
36-
const LIVE_PREVIEW_NAVIGATOR_CHANNEL_ID = `${window.PHOENIX_INSTANCE_ID}-nav-live-preview`;
3736

3837
const worker = new Worker(window.LIVE_DEV_REMOTE_WORKER_SCRIPTS_FILE_NAME);
3938
worker.onmessage = (event) => {
4039
const type = event.data.type;
4140
switch (type) {
42-
case 'REDIRECT_CONTENT_FRAME': document.getElementById("contentFrame").src = event.data.URL; break;
4341
case 'REDIRECT_PAGE': location.href = event.data.URL; break;
4442
default: console.error("Live Preview page loader: received unknown message from worker:", event);
4543
}
4644
};
4745
worker.postMessage({
4846
type: "setupBroadcast",
49-
broadcastChannel: LIVE_PREVIEW_NAVIGATOR_CHANNEL_ID,
47+
broadcastChannel: window.LIVE_PREVIEW_BROADCAST_CHANNEL_ID,
5048
clientID});
5149

5250
const WebSocketTransport = {
@@ -75,12 +73,12 @@
7573
},
7674

7775
/**
78-
* Connects to the ServiceWorkerTransport in Brackets at the given WebSocket URL.
76+
* Connects to the LivePreviewTransport in Brackets.
7977
*/
8078
connect: function () {
8179
const self = this;
8280
// message channel to phoenix connect on load itself. The channel id is injected from phoenix
83-
// via ServiceWorkerTransport.js while serving the instrumented html file
81+
// via LivePreviewTransport.js while serving the instrumented html file
8482
self._broadcastMessageChannel = new BroadcastChannel(window.LIVE_PREVIEW_BROADCAST_CHANNEL_ID);
8583
self._broadcastMessageChannel.postMessage({
8684
type: 'BROWSER_CONNECT',
@@ -114,7 +112,6 @@
114112
self._callbacks.close();
115113
}
116114
break;
117-
default: console.error("Unknown event type for event", event);
118115
}
119116
};
120117

‎LiveDevelopment/BrowserScripts/pageLoaderWorker.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,10 +33,8 @@ function _setupBroadcastChannel(broadcastChannel, clientID) {
3333
_livePreviewNavigationChannel.onmessage = (event) => {
3434
const type = event.data.type;
3535
switch (type) {
36-
case 'REDIRECT_CONTENT_FRAME': postMessage({type, URL: event.data.URL}); break;
3736
case 'REDIRECT_PAGE': postMessage({type, URL: event.data.URL}); break;
3837
case 'TAB_ONLINE': break; // do nothing. This is a loopback message from another live preview tab
39-
default: console.error("Live Preview page loader: received unknown message from Browser preview:", event);
4038
}
4139
};
4240
function _sendOnlineHeartbeat() {

‎LiveDevelopment/LiveDevMultiBrowser.js‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ define(function (require, exports, module) {
8585
_ = require("thirdparty/lodash"),
8686
LiveDevelopmentUtils = require("LiveDevelopment/LiveDevelopmentUtils"),
8787
LiveDevServerManager = require("LiveDevelopment/LiveDevServerManager"),
88-
ServiceWorkerTransport = require("LiveDevelopment/MultiBrowserImpl/transports/ServiceWorkerTransport"),
88+
LivePreviewTransport = require("LiveDevelopment/MultiBrowserImpl/transports/LivePreviewTransport"),
8989
LiveDevProtocol = require("LiveDevelopment/MultiBrowserImpl/protocol/LiveDevProtocol"),
9090
Metrics = require("utils/Metrics"),
9191
PageLoaderWorkerScript = require("text!LiveDevelopment/BrowserScripts/pageLoaderWorker.js");
@@ -798,7 +798,7 @@ define(function (require, exports, module) {
798798
.on("beforeProjectClose beforeAppClose", close);
799799

800800
// Default transport for live connection messages - can be changed
801-
setTransport(ServiceWorkerTransport);
801+
setTransport(LivePreviewTransport);
802802

803803
// Initialize exports.status
804804
_setStatus(STATUS_INACTIVE);
@@ -905,6 +905,10 @@ define(function (require, exports, module) {
905905
};
906906
}
907907

908+
function getLivePreviewBaseURL() {
909+
return LiveDevServerManager.getStaticServerBaseURLs().projectBaseURL;
910+
}
911+
908912
EventDispatcher.makeEventDispatcher(exports);
909913

910914
// For unit testing
@@ -932,6 +936,7 @@ define(function (require, exports, module) {
932936
exports.getServerBaseUrl = getServerBaseUrl;
933937
exports.getCurrentLiveDoc = getCurrentLiveDoc;
934938
exports.getLivePreviewDetails = getLivePreviewDetails;
939+
exports.getLivePreviewBaseURL = getLivePreviewBaseURL;
935940
exports.getCurrentProjectServerConfig = getCurrentProjectServerConfig;
936941
exports.getConnectionIds = getConnectionIds;
937942
exports.setTransport = setTransport;

‎LiveDevelopment/LiveDevServerManager.js‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@
1919
*
2020
*/
2121

22+
/*global Phoenix*/
23+
2224
/**
2325
* LiveDevServerManager Overview:
2426
*
@@ -40,7 +42,7 @@
4042
define(function (require, exports, module) {
4143

4244

43-
var _serverProviders = [];
45+
let _serverProviders = [];
4446

4547
/**
4648
* @private
@@ -117,6 +119,20 @@ define(function (require, exports, module) {
117119
}
118120
}
119121

122+
const LIVE_PREVIEW_STATIC_SERVER_BASE_URL = "http://localhost:8001/",
123+
LIVE_PREVIEW_STATIC_SERVER_ORIGIN = "http://localhost:8001";
124+
// #LIVE_PREVIEW_STATIC_SERVER_BASE_URL_OVERRIDE uncomment below line if you are developing live preview server.
125+
// const LIVE_PREVIEW_STATIC_SERVER_BASE_URL = "http://localhost:8001/";
126+
// const LIVE_PREVIEW_STATIC_SERVER_ORIGIN = "http://localhost:8001";
127+
function getStaticServerBaseURLs() {
128+
return {
129+
baseURL: LIVE_PREVIEW_STATIC_SERVER_BASE_URL,
130+
origin: LIVE_PREVIEW_STATIC_SERVER_ORIGIN,
131+
projectBaseURL:
132+
`${LIVE_PREVIEW_STATIC_SERVER_BASE_URL}vfs/PHOENIX_LIVE_PREVIEW_${Phoenix.PHOENIX_INSTANCE_ID}`
133+
};
134+
}
135+
120136
// Backwards compatibility
121137
exports.getProvider = getServer;
122138
exports.registerProvider = registerServer;
@@ -125,4 +141,5 @@ define(function (require, exports, module) {
125141
exports.getServer = getServer;
126142
exports.registerServer = registerServer;
127143
exports.removeServer = removeServer;
144+
exports.getStaticServerBaseURLs = getStaticServerBaseURLs;
128145
});

‎LiveDevelopment/MultiBrowserImpl/README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,9 +48,9 @@ Here's a short summary of what happens when the user clicks on the Live Preview
4848
2. LiveDevelopment tells StaticServer that this path has a live document. StaticServer is in charge of actually serving the page and associated assets to the browser. (Note: eventually I think we should get rid of this step - StaticServer shouldn't know anything about live documents directly; it should just have a way of request instrumented text for HTML URLs.)
4949
3. LiveDevelopment tells the launcher to open the page via the StaticServer URL, then it opens the page in the default browser.
5050
4. The browser requests the page from StaticServer. StaticServer notes that there is a live document for this page, and requests an instrumented version of the page from LiveHTMLDocument. (The current "requestFilterPaths" mechanism for this could be simplified, I think.)
51-
5. LiveHTMLDocument instruments the page for live editing using the existing HTMLInstrumentation mechanism, and additionally includes remote scripts provided by the protocol (LiveDevProtocolRemote), transport (ServiceWorkerTransportRemote), remote functions (RemoteFunctions) and document observation (DocumentObserver) which tracks related documents. The transport script includes the URL for the WebSocket server created when the transport is started after being set to the protocol layer.
51+
5. LiveHTMLDocument instruments the page for live editing using the existing HTMLInstrumentation mechanism, and additionally includes remote scripts provided by the protocol (LiveDevProtocolRemote), transport (LivePreviewTransportRemote), remote functions (RemoteFunctions) and document observation (DocumentObserver) which tracks related documents. The transport script includes the URL for the WebSocket server created when the transport is started after being set to the protocol layer.
5252
6. The instrumented page is sent back to StaticServer, which responds to the browser with the instrumented version. Other files requested by the browser are simply returned directly by StaticServer.
53-
7. As the browser loads the page, it encounters the injected scripts. The transport script connects back to the Service WorkerTransport's WebSocket server created in step 3 and sends it a "connect" message to tell it what URL has been loaded in the browser. The ServiceWorkerTransport assigns the socket a client id so it can keep track of which socket is associated with which page instance, then raises a "connect" event.
53+
7. As the browser loads the page, it encounters the injected scripts. The transport script connects back to the Service WorkerTransport's WebSocket server created in step 3 and sends it a "connect" message to tell it what URL has been loaded in the browser. The LivePreviewTransport assigns the socket a client id so it can keep track of which socket is associated with which page instance, then raises a "connect" event.
5454
8. LivDevProtocol receives the "connect" event and makes a note of the associated client ID updating the current active connections. LiveDevelopment also receives the "connect" event, it checks that the URL that comes on the message matches the current live doc instance and updates session status to STATUS_ACTIVE in case this is the first client connected.
5555
After the live document is loaded in the browser, DocumentObserver scan related stylesheets and Javascript files and send a message 'DocumentRelated' which contains their URLs. LiveDevelopment receives the message, extract stylesshes and creates a LiveCSSDocument instance per each of them. LiveHTMLDocument listen to the same message and further notifications (added/removed) to keep info about its related docs which is needed by LiveDocument (eg. when saving changes of a JS file).
5656
9. As the user makes live edits or changes selection, LiveHTMLDocument calls the protocol handler's "evaluate" function to call functions from the injected RemoteFunctions.

LiveDevelopment/MultiBrowserImpl/transports/ServiceWorkerTransport.js renamed to LiveDevelopment/MultiBrowserImpl/transports/LivePreviewTransport.js

Lines changed: 44 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -57,11 +57,11 @@ define(function (require, exports, module) {
5757
}, METRIC_SEND_INTERVAL_MS);
5858

5959
// The script that will be injected into the previewed HTML to handle the other side of the socket connection.
60-
const ServiceWorkerTransportRemote = require("text!LiveDevelopment/BrowserScripts/ServiceWorkerTransportRemote.js");
60+
const LivePreviewTransportRemote = require("text!LiveDevelopment/BrowserScripts/LivePreviewTransportRemote.js");
6161

6262
// Events - setup the service worker communication channel.
63-
const BROADCAST_CHANNEL_ID = `${Math.round( Math.random()*1000000000000)}_livePreview`;
64-
let _broadcastChannel = new BroadcastChannel(BROADCAST_CHANNEL_ID);
63+
const BROADCAST_CHANNEL_ID = `${Phoenix.PHOENIX_INSTANCE_ID}_livePreview`;
64+
let _transportBridge;
6565

6666
/**
6767
* Returns the script that should be injected into the browser to handle the other end of the transport.
@@ -73,7 +73,7 @@ define(function (require, exports, module) {
7373
`window.LIVE_PREVIEW_BROADCAST_CHANNEL_ID = "${BROADCAST_CHANNEL_ID}";\n` +
7474
`window.LIVE_DEV_REMOTE_WORKER_SCRIPTS_FILE_NAME = "${LiveDevProtocol.LIVE_DEV_REMOTE_WORKER_SCRIPTS_FILE_NAME}";\n` +
7575
`window.LIVE_PREVIEW_DEBUG_ENABLED = ${logger.loggingOptions.logLivePreview};\n` +
76-
ServiceWorkerTransportRemote +
76+
LivePreviewTransportRemote +
7777
"\n";
7878
}
7979

@@ -87,26 +87,10 @@ define(function (require, exports, module) {
8787
// attach to browser tab/window closing event so that we send a cleanup request
8888
// to the service worker for the comm ports
8989
addEventListener( 'beforeunload', function() {
90-
_broadcastChannel.postMessage({
90+
_transportBridge && _transportBridge.messageToLivePreviewTabs({
9191
type: 'PHOENIX_CLOSE'
9292
});
9393
});
94-
_broadcastChannel.onmessage = (event) => {
95-
window.logger.livePreview.log(
96-
"Live Preview: Phoenix received event from Browser preview tab/iframe: ", event.data);
97-
const type = event.data.type;
98-
switch (type) {
99-
case 'BROWSER_CONNECT': exports.trigger('connect', [event.data.clientID, event.data.url]); break;
100-
case 'BROWSER_MESSAGE':
101-
const message = event.data.message || "";
102-
exports.trigger('message', [event.data.clientID, message]);
103-
transportMessagesRecvSizeB = transportMessagesRecvSizeB + message.length;
104-
break;
105-
case 'BROWSER_CLOSE': exports.trigger('close', [event.data.clientID]); break;
106-
default: console.error("ServiceWorkerTransport received unknown message from Browser preview:", event);
107-
}
108-
transportMessagesRecvCount++;
109-
};
11094
};
11195

11296
exports.close = function () {
@@ -115,7 +99,7 @@ define(function (require, exports, module) {
11599

116100
exports.send = function (clientIDs, message) {
117101
message = message || "";
118-
_broadcastChannel.postMessage({
102+
_transportBridge && _transportBridge.messageToLivePreviewTabs({
119103
type: 'MESSAGE_FROM_PHOENIX',
120104
clientIDs,
121105
message
@@ -124,4 +108,42 @@ define(function (require, exports, module) {
124108
transportMessagesSendSizeB = transportMessagesSendSizeB + message.length;
125109
};
126110

111+
function _browserConnect(_ev, event) {
112+
window.logger.livePreview.log(
113+
"Live Preview: Phoenix received event from Browser preview tab/iframe: ", event.data);
114+
exports.trigger('connect', [event.data.message.clientID, event.data.message.url]);
115+
transportMessagesRecvCount++;
116+
}
117+
118+
function _browserClose(_ev, event) {
119+
window.logger.livePreview.log(
120+
"Live Preview: Phoenix received event from Browser preview tab/iframe: ", event.data);
121+
exports.trigger('close', [event.data.message.clientID]);
122+
transportMessagesRecvCount++;
123+
}
124+
125+
function _browserMessage(_ev, event) {
126+
window.logger.livePreview.log(
127+
"Live Preview: Phoenix received event from Browser preview tab/iframe: ", event.data);
128+
const message = event.data.message.message || "";
129+
exports.trigger('message', [event.data.message.clientID, message]);
130+
transportMessagesRecvSizeB = transportMessagesRecvSizeB + message.length;
131+
transportMessagesRecvCount++;
132+
}
133+
134+
function setLivePreviewTransportBridge(transportBridge) {
135+
_transportBridge = transportBridge;
136+
transportBridge.off('BROWSER_CONNECT.transport');
137+
transportBridge.on('BROWSER_CONNECT.transport', _browserConnect);
138+
139+
transportBridge.off('BROWSER_CLOSE.transport');
140+
transportBridge.on('BROWSER_CLOSE.transport', _browserClose);
141+
142+
transportBridge.off('BROWSER_MESSAGE.transport');
143+
transportBridge.on('BROWSER_MESSAGE.transport', _browserMessage);
144+
}
145+
146+
exports.setLivePreviewTransportBridge = setLivePreviewTransportBridge;
147+
exports.BROADCAST_CHANNEL_ID = BROADCAST_CHANNEL_ID;
148+
127149
});

‎LiveDevelopment/main.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ define(function main(require, exports, module) {
3535
const Commands = require("command/Commands"),
3636
AppInit = require("utils/AppInit"),
3737
MultiBrowserLiveDev = require("LiveDevelopment/LiveDevMultiBrowser"),
38+
LivePreviewTransport = require("LiveDevelopment/MultiBrowserImpl/transports/LivePreviewTransport"),
3839
CommandManager = require("command/CommandManager"),
3940
PreferencesManager = require("preferences/PreferencesManager"),
4041
UrlParams = require("utils/UrlParams").UrlParams,
@@ -150,6 +151,10 @@ define(function main(require, exports, module) {
150151
MultiBrowserLiveDev.setLivePreviewPinned(urlPinned);
151152
}
152153

154+
function setLivePreviewTransportBridge(transportBridge) {
155+
LivePreviewTransport.setLivePreviewTransportBridge(transportBridge);
156+
}
157+
153158
/** Called on status change */
154159
function _showStatusChangeReason(reason) {
155160
// Destroy the previous twipsy (options are not updated otherwise)
@@ -319,6 +324,8 @@ define(function main(require, exports, module) {
319324
exports.isInactive = isInactive;
320325
exports.isActive = isActive;
321326
exports.setLivePreviewPinned = setLivePreviewPinned;
327+
exports.setLivePreviewTransportBridge = setLivePreviewTransportBridge;
322328
exports.getConnectionIds = MultiBrowserLiveDev.getConnectionIds;
323329
exports.getLivePreviewDetails = MultiBrowserLiveDev.getLivePreviewDetails;
330+
exports.getLivePreviewBaseURL = MultiBrowserLiveDev.getLivePreviewBaseURL;
324331
});

‎LiveDevelopment/pageLoader.html‎

Lines changed: 0 additions & 79 deletions
This file was deleted.

0 commit comments

Comments
 (0)