files mode detached mode working, separate domain and logging refactor

src/components/ContentWrap.jsx

@@ -69,6 +69,11 @@ export default class ContentWrap extends Component {
 	}
 	componentDidMount() {
 		this.props.onRef(this);
+		window.addEventListener('message', e => {
+			if (e.data && e.data.logs) {
+				this.onMessageFromConsole(...e.data.logs);
+			}
+		});
 	}
 
 	onHtmlCodeChange(editor, change) {
@@ -160,7 +165,7 @@ export default class ContentWrap extends Component {
 						: `${location.origin}`;
 					var src = `filesystem:${origin}/temporary/preview.html`;
 					if (this.detachedWindow) {
-						this.detachedWindow.postMessage(src, '*');
+						this.detachedWindow.postMessage({ url: src }, '*');
 					} else {
 						this.frame.src = src;
 					}

src/components/ContentWrapFiles.jsx

@@ -22,6 +22,7 @@ import { commandPaletteService } from '../commandPaletteService';
 import { PreviewDimension } from './PreviewDimension';
 
 const minCodeWrapSize = 33;
+const PREVIEW_FRAME_HOST = window.DEBUG ? 'http://localhost:7888' : ' ';
 
 /* global htmlCodeEl
  */
@@ -114,6 +115,11 @@ export default class ContentWrapFiles extends Component {
 	}
 	componentDidMount() {
 		this.props.onRef(this);
+		window.addEventListener('message', e => {
+			if (e.data && e.data.logs) {
+				this.onMessageFromConsole(...e.data.logs);
+			}
+		});
 		this.commandPaletteSubscriptions = [];
 		this.commandPaletteSubscriptions.push(
 			commandPaletteService.subscribe(SWITCH_FILE_EVENT, file => {
@@ -250,10 +256,13 @@ export default class ContentWrapFiles extends Component {
 
 		if (this.detachedWindow) {
 			log('✉️ Sending message to detached window');
-			this.detachedWindow.postMessage({ contents: '/user/index.html' }, '*');
+			this.detachedWindow.postMessage(
+				{ url: `${PREVIEW_FRAME_HOST}/index.html` },
+				'*'
+			);
 		} else {
 			setTimeout(() => {
-				this.frame.src = 'https://preview.webmaker.com:8083/index.html';
+				this.frame.src = `${PREVIEW_FRAME_HOST}/index.html`;
 			}, 10);
 		}
 	}
@@ -519,6 +528,38 @@ export default class ContentWrapFiles extends Component {
 		this.editor.focus();
 	}
 
+	detachPreview() {
+		if (this.detachedWindow) {
+			this.detachedWindow.focus();
+			return;
+		}
+		const iframeBounds = this.frame.getBoundingClientRect();
+		const iframeWidth = iframeBounds.width;
+		const iframeHeight = iframeBounds.height;
+		document.body.classList.add('is-detached-mode');
+
+		this.detachedWindow = window.open(
+			'./preview.html',
+			'Web Maker',
+			`width=${iframeWidth},height=${iframeHeight},resizable,scrollbars=yes,status=1`
+		);
+		// Trigger initial render in detached window
+		setTimeout(() => {
+			this.setPreviewContent(true);
+		}, 1500);
+
+		var intervalID = window.setInterval(checkWindow => {
+			if (this.detachedWindow && this.detachedWindow.closed) {
+				clearInterval(intervalID);
+				document.body.classList.remove('is-detached-mode');
+				this.detachedWindow = null;
+				// Update main frame preview to get latest changes (which were not
+				// getting reflected while detached window was open)
+				this.setPreviewContent(true);
+			}
+		}, 500);
+	}
+
 	onMessageFromConsole() {
 		const logs = [...arguments].map(arg => {
 			if (
@@ -653,15 +694,12 @@ export default class ContentWrapFiles extends Component {
 				<div class="demo-side" id="js-demo-side" style="">
 					<iframe
 						ref={el => (this.frame = el)}
-						src="https://preview.webmaker.com:8083/index.html"
+						src={`${PREVIEW_FRAME_HOST}/index.html`}
 						frameborder="0"
 						id="demo-frame"
 						allowfullscreen
 					/>
-					<iframe
-						src="https://preview.webmaker.com:8083/talk.html"
-						id="talkFrame"
-					/>
+					<iframe src={`${PREVIEW_FRAME_HOST}/talk.html`} id="talkFrame" />
 					<PreviewDimension ref={comp => (this.previewDimension = comp)} />
 					<Console
 						logs={this.state.logs}
@@ -676,3 +714,4 @@ export default class ContentWrapFiles extends Component {
 		);
 	}
 }
+2;

src/detached-window.js

@@ -1,4 +1,5 @@
 window.addEventListener('message', e => {
+	// Recieving from app window
 	if (e.data && e.data.contents) {
 		const frame = document.querySelector('iframe');
 		frame.src = frame.src;
@@ -7,7 +8,13 @@ window.addEventListener('message', e => {
 			frame.contentDocument.write(e.data.contents);
 			frame.contentDocument.close();
 		}, 10);
-	} else {
-		document.querySelector('iframe').src = e.data;
+	}
+	if (e.data && e.data.url) {
+		document.querySelector('iframe').src = e.data.url;
+	}
+
+	// Recieving from preview iframe
+	if (e.data && e.data.logs) {
+		window.opener.postMessage(e.data, '*');
 	}
 });

src/lib/screenlog.js

@@ -1,6 +1,28 @@
-var mainWindow = window.parent.onMessageFromConsole
-	? window.parent
-	: window.parent.opener;
+let mainWindow = window.parent;
+
+function sanitizeDomNode(node) {
+	const fakeNode = {
+		nodeName: node.nodeName,
+		nodeType: node.nodeType,
+		tagName: node.tagName,
+		childNodes: [...node.childNodes].map(child => sanitizeDomNode(child)),
+		textContent: node.textContent
+	}
+	if(node.attributes) {
+		fakeNode.attributes = [...node.attributes].map(attribute => ({name:attribute.name, value:attribute.value}))
+	}
+	return fakeNode;
+}
+function sendLog(...args) {
+	const sanitizedArgs = [...args].map(arg => {
+		if(arg && arg instanceof HTMLElement) {
+			return sanitizeDomNode(arg)
+		}
+		return arg;
+	})
+	mainWindow.postMessage({ logs: sanitizedArgs },"*");
+}
+	
 (function() {
 	var logEl,
 		isInitialized = false,
@@ -191,16 +213,16 @@ var mainWindow = window.parent.onMessageFromConsole
 })();
 screenLog.init({
 	noUi: true,
-	proxyCallback: function() {
-		mainWindow.onMessageFromConsole.apply(null, arguments);
+	proxyCallback: function(...args) {
+		sendLog(...args);
 	}
 });
 window._wmEvaluate = function _wmEvaluate(expr) {
 	try {
 		var result = eval(expr);
 	} catch (e) {
-		mainWindow.onMessageFromConsole.call(null, e);
+		sendLog(e);
 		return;
 	}
-	mainWindow.onMessageFromConsole.call(null, result);
+	sendLog(result)
 };