From 730e3541172fcffd582080a4ffd1ae8fa871ac31 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Fri, 10 Aug 2018 16:20:08 +0100
Subject: [PATCH] Fixed Web IDE live preview not hot reloading

---
 .../ide/components/preview/clientside.vue     | 31 ++++++++++++++-----
 1 file changed, 23 insertions(+), 8 deletions(-)

diff --git a/app/assets/javascripts/ide/components/preview/clientside.vue b/app/assets/javascripts/ide/components/preview/clientside.vue
index fef36eae7b1..39a1bd1f61b 100644
--- a/app/assets/javascripts/ide/components/preview/clientside.vue
+++ b/app/assets/javascripts/ide/components/preview/clientside.vue
@@ -2,6 +2,7 @@
 import { mapActions, mapGetters, mapState } from 'vuex';
 import _ from 'underscore';
 import { Manager } from 'smooshpack';
+import { listen } from 'codesandbox-api';
 import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
 import Navigator from './navigator.vue';
 import { packageJsonPath } from '../../constants';
@@ -16,6 +17,7 @@ export default {
     return {
       manager: {},
       loading: false,
+      sandpackReady: false,
     };
   },
   computed: {
@@ -81,6 +83,10 @@ export default {
     }
     this.manager = {};
 
+    if (this.listener) {
+      this.listener();
+    }
+
     clearTimeout(this.timeout);
     this.timeout = null;
   },
@@ -96,17 +102,29 @@ export default {
 
       return this.loadFileContent(this.mainEntry)
         .then(() => this.$nextTick())
-        .then(() =>
+        .then(() => {
           this.initManager('#ide-preview', this.sandboxOpts, {
             fileResolver: {
               isFile: p => Promise.resolve(!!this.entries[createPathWithExt(p)]),
               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() {
-      if (this.timeout) return;
+      if (!this.sandpackReady) return;
+
+      clearTimeout(this.timeout);
 
       this.timeout = setTimeout(() => {
         if (_.isEmpty(this.manager)) {
@@ -116,10 +134,7 @@ export default {
         }
 
         this.manager.updatePreview(this.sandboxOpts);
-
-        clearTimeout(this.timeout);
-        this.timeout = null;
-      }, 500);
+      }, 250);
     },
     initManager(el, opts, resolver) {
       this.manager = new Manager(el, opts, resolver);
-- 
GitLab