Merge branch 'ide-preview-hotreloading-fix' into 'master'

Fixed Web IDE live preview not hot reloading

Closes #50231

See merge request gitlab-org/gitlab-ce!21141

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);

spec/javascripts/ide/components/preview/clientside_spec.js

@@ -292,6 +292,8 @@ describe('IDE clientside preview', () => {
     describe('update', () => {
       beforeEach(() => {
         jasmine.clock().install();
+
+        vm.sandpackReady = true;
         vm.manager.updatePreview = jasmine.createSpy('updatePreview');
         vm.manager.listener = jasmine.createSpy('updatePreview');
       });
@@ -306,7 +308,7 @@ describe('IDE clientside preview', () => {
 
         vm.update();
 
-        jasmine.clock().tick(500);
+        jasmine.clock().tick(250);
 
         expect(vm.initPreview).toHaveBeenCalled();
       });
@@ -314,7 +316,7 @@ describe('IDE clientside preview', () => {
       it('calls updatePreview', () => {
         vm.update();
 
-        jasmine.clock().tick(500);
+        jasmine.clock().tick(250);
 
         expect(vm.manager.updatePreview).toHaveBeenCalledWith(vm.sandboxOpts);
       });