Commit 730e3541 authored by Phil Hughes's avatar Phil Hughes

Fixed Web IDE live preview not hot reloading

parent 9964b678
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
import { mapActions, mapGetters, mapState } from 'vuex'; import { mapActions, mapGetters, mapState } from 'vuex';
import _ from 'underscore'; import _ from 'underscore';
import { Manager } from 'smooshpack'; import { Manager } from 'smooshpack';
import { listen } from 'codesandbox-api';
import LoadingIcon from '~/vue_shared/components/loading_icon.vue'; import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
import Navigator from './navigator.vue'; import Navigator from './navigator.vue';
import { packageJsonPath } from '../../constants'; import { packageJsonPath } from '../../constants';
...@@ -16,6 +17,7 @@ export default { ...@@ -16,6 +17,7 @@ export default {
return { return {
manager: {}, manager: {},
loading: false, loading: false,
sandpackReady: false,
}; };
}, },
computed: { computed: {
...@@ -81,6 +83,10 @@ export default { ...@@ -81,6 +83,10 @@ export default {
} }
this.manager = {}; this.manager = {};
if (this.listener) {
this.listener();
}
clearTimeout(this.timeout); clearTimeout(this.timeout);
this.timeout = null; this.timeout = null;
}, },
...@@ -96,17 +102,29 @@ export default { ...@@ -96,17 +102,29 @@ export default {
return this.loadFileContent(this.mainEntry) return this.loadFileContent(this.mainEntry)
.then(() => this.$nextTick()) .then(() => this.$nextTick())
.then(() => .then(() => {
this.initManager('#ide-preview', this.sandboxOpts, { this.initManager('#ide-preview', this.sandboxOpts, {
fileResolver: { fileResolver: {
isFile: p => Promise.resolve(!!this.entries[createPathWithExt(p)]), isFile: p => Promise.resolve(!!this.entries[createPathWithExt(p)]),
readFile: p => this.loadFileContent(createPathWithExt(p)).then(content => content), readFile: p => this.loadFileContent(createPathWithExt(p)).then(content => content),
}, },
}), });
);
this.listener = listen(e => {
switch (e.type) {
case 'done':
this.sandpackReady = true;
break;
default:
break;
}
});
});
}, },
update() { update() {
if (this.timeout) return; if (!this.sandpackReady) return;
clearTimeout(this.timeout);
this.timeout = setTimeout(() => { this.timeout = setTimeout(() => {
if (_.isEmpty(this.manager)) { if (_.isEmpty(this.manager)) {
...@@ -116,10 +134,7 @@ export default { ...@@ -116,10 +134,7 @@ export default {
} }
this.manager.updatePreview(this.sandboxOpts); this.manager.updatePreview(this.sandboxOpts);
}, 250);
clearTimeout(this.timeout);
this.timeout = null;
}, 500);
}, },
initManager(el, opts, resolver) { initManager(el, opts, resolver) {
this.manager = new Manager(el, opts, resolver); this.manager = new Manager(el, opts, resolver);
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment