mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-24 23:41:14 +02:00
Code Issues Releases Wiki Activity

Remove settimeout fallback in iframe preview

Browse Source 
also optimized the refresh logic
This commit is contained in:
Kushagra Gour
2024-05-08 18:17:02 +05:30
parent 38a1e64e4a
commit 334ea944ef
1 changed files with 23 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/components/ContentWrap.jsx
View File

@@ -21,12 +21,15 @@ const minCodeWrapSize = 33;
/* global htmlCodeEl /* global htmlCodeEl
*/ */
const PREVIEW_FRAME_HOST = window.location.href.includes('localhost') const PREVIEW_FRAME_HOST = !window.location.href.includes('localhost')
? 'http://localhost:7888' ? 'http://localhost:7888'
: `https://wbmakr.com`; : `https://wbmakr.com`;
let cachedSandboxAttribute = ''; let cachedSandboxAttribute = '';
// prevents refreshes when iframe is currently being refreshed
let frameRefreshPromise = null;
export default class ContentWrap extends Component { export default class ContentWrap extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
@@ -171,21 +174,24 @@ export default class ContentWrap extends Component {
// 2. we cache and remove the sandbox attribute and refresh again so that it gets served by SW // 2. we cache and remove the sandbox attribute and refresh again so that it gets served by SW
// 3. we add back cached sandbox attr & write the contents to the iframe // 3. we add back cached sandbox attr & write the contents to the iframe
const refreshAndDo = fn => { const refreshAndDo = fn => {
Promise.race([ frameRefreshPromise =
// Just in case onload promise doesn't resolves frameRefreshPromise ||
new Promise(resolve => { // Race earlier had a settimeout too as a fallback. It was removed because onload
setTimeout(() => { // was firing 100% times.
log('resolved with timeout'); // TODO: remove race
resolve(); Promise.race([
}, 1000); new Promise(resolve => {
}), this.frame.onload = () => {
new Promise(resolve => { resolve('onload');
this.frame.onload = () => { };
log('resolved with onload'); })
resolve(); ]);
};
}) frameRefreshPromise.then(resolutionReason => {
]).then(fn); frameRefreshPromise = null;
log('resolved with ', resolutionReason);
fn();
});
// Setting to blank string cause frame to reload // Setting to blank string cause frame to reload
if (window.IS_EXTENSION) { if (window.IS_EXTENSION) {
this.frame.src = ''; this.frame.src = '';
@@ -197,9 +203,7 @@ export default class ContentWrap extends Component {
if (!cachedSandboxAttribute && window.DEBUG) { if (!cachedSandboxAttribute && window.DEBUG) {
// alert('sandbox empty'); // alert('sandbox empty');
} }
// console.log('setting back sandbox attr', sandbox); log('sending PM');
// this.frame.setAttribute('sandbox', cachedSandboxAttribute);
// this.frame.removeAttribute('sweet');
if (window.IS_EXTENSION) { if (window.IS_EXTENSION) {
this.frame.contentDocument.open(); this.frame.contentDocument.open();