mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-01-17 12:28:14 +01: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
Show Stats 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
*/
const PREVIEW_FRAME_HOST = window.DEBUG
? 'http://localhost:7888'
: `https://preview.${location.host}`;
export default class ContentWrap extends Component {
constructor(props) {
super(props);
@ -161,9 +165,11 @@ export default class ContentWrap extends Component {
this.detachedWindow.postMessage({ contents }, '*');
} else {
const writeInsideIframe = () => {
this.frame.contentDocument.open();
this.frame.contentDocument.write(contents);
this.frame.contentDocument.close();
// this.frame.contentDocument.open();
console.log('sending postmessage');
this.frame.contentWindow.postMessage({ contents }, '*');
// this.frame.contentDocument.write(contents);
// this.frame.contentDocument.close();
};
Promise.race([
// Just in case onload promise doesn't resolves
@ -175,7 +181,7 @@ export default class ContentWrap extends Component {
})
]).then(writeInsideIframe);
// Setting to blank string cause frame to reload
this.frame.src = '';
// this.frame.src = '';
}
} else {
// 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 (
!isForced &&
currentCode.html === this.codeInPreview.html &&
currentCode.js === this.codeInPreview.js
currentCode.js === this.codeInPreview.js &&
false
) {
computeCss(
cssMode === CssModes.ACSS ? currentCode.html : currentCode.css,
@ -901,10 +908,14 @@ export default class ContentWrap extends Component {
</SplitPane>
<div class="demo-side" id="js-demo-side" style="">
<iframe
src={`${PREVIEW_FRAME_HOST}/preview.html`}
ref={el => (this.frame = el)}
frameborder="0"
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)} />