mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-13 18:16:19 +02:00
Code Issues Releases Wiki Activity

change preview method to postmessage

Browse Source
This commit is contained in:
Kushagra Gour
2024-03-22 02:57:23 +05:30
parent 4ee7a2a2c0
commit c7e523c374
3 changed files with 59 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
preview/detached-window.js Normal file
View File

@ -0,0 +1,20 @@
window.addEventListener('message', e => {
// Recieving from app window
if (e.data && e.data.contents && e.data.contents.match(/<html/)) {
const frame = document.querySelector('iframe');
frame.src = frame.src;
setTimeout(() => {
frame.contentDocument.open();
frame.contentDocument.write(e.data.contents);
frame.contentDocument.close();
}, 10);
}
if (e.data && e.data.url && e.data.url.match(/index\.html/)) {
document.querySelector('iframe').src = e.data.url;
}
// Recieving from preview iframe
if (e.data && e.data.logs) {
window.opener.postMessage(e.data, '*');
}
});

22
preview/preview.html Normal file
View File

@ -0,0 +1,22 @@
<style>
body {
margin: 0;
}
#demo-frame {
border: 0;
width: 100%;
background: white;
height: 100%;
}
</style>
<body>
<iframe
src="about://blank"
frameborder="0"
id="demo-frame"
allowfullscreen
></iframe>
<script src="detached-window.js"></script>
</body>

23
src/components/ContentWrap.jsx
View File

@ -21,6 +21,10 @@ const minCodeWrapSize = 33;
/* global htmlCodeEl /* global htmlCodeEl
*/ */
const PREVIEW_FRAME_HOST = window.DEBUG
? 'http://localhost:7888'
: `https://preview.${location.host}`;
export default class ContentWrap extends Component { export default class ContentWrap extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
@ -161,9 +165,11 @@ export default class ContentWrap extends Component {
this.detachedWindow.postMessage({ contents }, '*'); this.detachedWindow.postMessage({ contents }, '*');
} else { } else {
const writeInsideIframe = () => { const writeInsideIframe = () => {
this.frame.contentDocument.open(); // this.frame.contentDocument.open();
this.frame.contentDocument.write(contents); console.log('sending postmessage');
this.frame.contentDocument.close(); this.frame.contentWindow.postMessage({ contents }, '*');
// this.frame.contentDocument.write(contents);
// this.frame.contentDocument.close();
}; };
Promise.race([ Promise.race([
// Just in case onload promise doesn't resolves // Just in case onload promise doesn't resolves
@ -175,7 +181,7 @@ export default class ContentWrap extends Component {
}) })
]).then(writeInsideIframe); ]).then(writeInsideIframe);
// Setting to blank string cause frame to reload // Setting to blank string cause frame to reload
this.frame.src = ''; // this.frame.src = '';
} }
} else { } else {
// we need to store user script in external JS file to prevent inline-script // we need to store user script in external JS file to prevent inline-script
@ -242,7 +248,8 @@ export default class ContentWrap extends Component {
if ( if (
!isForced && !isForced &&
currentCode.html === this.codeInPreview.html && currentCode.html === this.codeInPreview.html &&
currentCode.js === this.codeInPreview.js currentCode.js === this.codeInPreview.js &&
false
) { ) {
computeCss( computeCss(
cssMode === CssModes.ACSS ? currentCode.html : currentCode.css, cssMode === CssModes.ACSS ? currentCode.html : currentCode.css,
@ -901,10 +908,14 @@ export default class ContentWrap extends Component {
</SplitPane> </SplitPane>
<div class="demo-side" id="js-demo-side" style=""> <div class="demo-side" id="js-demo-side" style="">
<iframe <iframe
src={`${PREVIEW_FRAME_HOST}/preview.html`}
ref={el => (this.frame = el)} ref={el => (this.frame = el)}
frameborder="0" frameborder="0"
id="demo-frame" id="demo-frame"
allowfullscreen sandbox="allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation"
allow="accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"
allowpaymentrequest="true"
allowfullscreen="true"
/> />
<PreviewDimension ref={comp => (this.previewDimension = comp)} /> <PreviewDimension ref={comp => (this.previewDimension = comp)} />