1
0
mirror of https://github.com/chinchang/web-maker.git synced 2025-06-12 12:40:53 +02:00

files mode detached mode working, separate domain and logging refactor

This commit is contained in:
Kushagra Gour
2019-02-28 16:51:08 +05:30
parent 53533bf09a
commit 1d88db8e10
4 changed files with 90 additions and 17 deletions

View File

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

View File

@ -22,6 +22,7 @@ import { commandPaletteService } from '../commandPaletteService';
import { PreviewDimension } from './PreviewDimension'; import { PreviewDimension } from './PreviewDimension';
const minCodeWrapSize = 33; const minCodeWrapSize = 33;
const PREVIEW_FRAME_HOST = window.DEBUG ? 'http://localhost:7888' : ' ';
/* global htmlCodeEl /* global htmlCodeEl
*/ */
@ -114,6 +115,11 @@ export default class ContentWrapFiles extends Component {
} }
componentDidMount() { componentDidMount() {
this.props.onRef(this); this.props.onRef(this);
window.addEventListener('message', e => {
if (e.data && e.data.logs) {
this.onMessageFromConsole(...e.data.logs);
}
});
this.commandPaletteSubscriptions = []; this.commandPaletteSubscriptions = [];
this.commandPaletteSubscriptions.push( this.commandPaletteSubscriptions.push(
commandPaletteService.subscribe(SWITCH_FILE_EVENT, file => { commandPaletteService.subscribe(SWITCH_FILE_EVENT, file => {
@ -250,10 +256,13 @@ export default class ContentWrapFiles extends Component {
if (this.detachedWindow) { if (this.detachedWindow) {
log('✉️ Sending message to detached window'); log('✉️ Sending message to detached window');
this.detachedWindow.postMessage({ contents: '/user/index.html' }, '*'); this.detachedWindow.postMessage(
{ url: `${PREVIEW_FRAME_HOST}/index.html` },
'*'
);
} else { } else {
setTimeout(() => { setTimeout(() => {
this.frame.src = 'https://preview.webmaker.com:8083/index.html'; this.frame.src = `${PREVIEW_FRAME_HOST}/index.html`;
}, 10); }, 10);
} }
} }
@ -519,6 +528,38 @@ export default class ContentWrapFiles extends Component {
this.editor.focus(); 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() { onMessageFromConsole() {
const logs = [...arguments].map(arg => { const logs = [...arguments].map(arg => {
if ( if (
@ -653,15 +694,12 @@ export default class ContentWrapFiles extends Component {
<div class="demo-side" id="js-demo-side" style=""> <div class="demo-side" id="js-demo-side" style="">
<iframe <iframe
ref={el => (this.frame = el)} ref={el => (this.frame = el)}
src="https://preview.webmaker.com:8083/index.html" src={`${PREVIEW_FRAME_HOST}/index.html`}
frameborder="0" frameborder="0"
id="demo-frame" id="demo-frame"
allowfullscreen allowfullscreen
/> />
<iframe <iframe src={`${PREVIEW_FRAME_HOST}/talk.html`} id="talkFrame" />
src="https://preview.webmaker.com:8083/talk.html"
id="talkFrame"
/>
<PreviewDimension ref={comp => (this.previewDimension = comp)} /> <PreviewDimension ref={comp => (this.previewDimension = comp)} />
<Console <Console
logs={this.state.logs} logs={this.state.logs}
@ -676,3 +714,4 @@ export default class ContentWrapFiles extends Component {
); );
} }
} }
2;

View File

@ -1,4 +1,5 @@
window.addEventListener('message', e => { window.addEventListener('message', e => {
// Recieving from app window
if (e.data && e.data.contents) { if (e.data && e.data.contents) {
const frame = document.querySelector('iframe'); const frame = document.querySelector('iframe');
frame.src = frame.src; frame.src = frame.src;
@ -7,7 +8,13 @@ window.addEventListener('message', e => {
frame.contentDocument.write(e.data.contents); frame.contentDocument.write(e.data.contents);
frame.contentDocument.close(); frame.contentDocument.close();
}, 10); }, 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, '*');
} }
}); });

View File

@ -1,6 +1,28 @@
var mainWindow = window.parent.onMessageFromConsole let mainWindow = window.parent;
? window.parent
: window.parent.opener; 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() { (function() {
var logEl, var logEl,
isInitialized = false, isInitialized = false,
@ -191,16 +213,16 @@ var mainWindow = window.parent.onMessageFromConsole
})(); })();
screenLog.init({ screenLog.init({
noUi: true, noUi: true,
proxyCallback: function() { proxyCallback: function(...args) {
mainWindow.onMessageFromConsole.apply(null, arguments); sendLog(...args);
} }
}); });
window._wmEvaluate = function _wmEvaluate(expr) { window._wmEvaluate = function _wmEvaluate(expr) {
try { try {
var result = eval(expr); var result = eval(expr);
} catch (e) { } catch (e) {
mainWindow.onMessageFromConsole.call(null, e); sendLog(e);
return; return;
} }
mainWindow.onMessageFromConsole.call(null, result); sendLog(result)
}; };