feat: Manual refresh for preview. (#237)

Allows users to manually refresh the preview.

fixes #133

src/ts/editor/events.ts

@@ -58,11 +58,14 @@ export const EVENT_ONBOARDING_UPDATE = 'live.onboarding.update';
 
 /**
  * Custom event name for when the editor wants to refresh the file.
- *
- * Can be used to clear specific caches when a refresh occurs.
  */
 export const EVENT_REFRESH_FILE = 'live.refresh.file';
 
+/**
+ * Custom event name for when the editor wants to refresh the preview.
+ */
+export const EVENT_REFRESH_PREVIEW = 'live.refresh.preview';
+
 /**
  * Custom event name for triggering a render.
  */

src/ts/editor/ui/parts/preview/frame.ts

@@ -1,9 +1,9 @@
 import {BasePart, UiPartComponent, UiPartConfig} from '..';
+import {EVENT_FILE_SAVE_COMPLETE, EVENT_REFRESH_PREVIEW} from '../../../events';
 import {TemplateResult, classMap, html, styleMap} from '@blinkk/selective-edit';
 
 import {DataStorage} from '../../../../utility/dataStorage';
 import {DeviceData} from '../../../api';
-import {EVENT_FILE_SAVE_COMPLETE} from '../../../events';
 import {EditorState} from '../../../state';
 
 /**
@@ -44,14 +44,12 @@ export class PreviewFramePart extends BasePart implements UiPartComponent {
 
     // Watch for a save file event and reload the iframe.
     document.addEventListener(EVENT_FILE_SAVE_COMPLETE, () => {
-      // Find and reload the iframe if it is visible.
-      const iframe = document.querySelector('.le__part__preview__frame iframe');
-      if (iframe) {
-        // Needs to be manually set in JS since the html src does not change the
-        // value and will not trigger a refresh like it will in JS.
-        (iframe as HTMLIFrameElement).src =
-          this.config.state.file?.url || (iframe as HTMLIFrameElement).src;
-      }
+      this.refresh();
+    });
+
+    // Watch for preview refresh event and reload the iframe.
+    document.addEventListener(EVENT_REFRESH_PREVIEW, () => {
+      this.refresh();
     });
   }
 
@@ -138,6 +136,17 @@ export class PreviewFramePart extends BasePart implements UiPartComponent {
     };
   }
 
+  refresh() {
+    // Find and reload the iframe if it is visible.
+    const iframe = document.querySelector('.le__part__preview__frame iframe');
+    if (iframe) {
+      // Needs to be manually set in JS since the html src does not change the
+      // value and will not trigger a refresh like it will in JS.
+      (iframe as HTMLIFrameElement).src =
+        this.config.state.file?.url || (iframe as HTMLIFrameElement).src;
+    }
+  }
+
   template(device?: DeviceData, isRotated?: boolean): TemplateResult {
     const sizing = this.getIframeSize(device, isRotated);
 

src/ts/editor/ui/parts/preview/toolbar.ts

@@ -4,6 +4,7 @@ import {TemplateResult, classMap, html, repeat} from '@blinkk/selective-edit';
 import {DataStorage} from '../../../../utility/dataStorage';
 import {DeviceData} from '../../../api';
 import {EditorState} from '../../../state';
+import {EVENT_REFRESH_PREVIEW} from '../../../events';
 
 const STORAGE_DEVICE_KEY = 'live.preview.device';
 const STORAGE_DEVICE_MODE_KEY = 'live.preview.isDeviceMode';
@@ -123,8 +124,8 @@ export class PreviewToolbarPart extends BasePart implements UiPartComponent {
           </div>`
         : html`<div class="le__part__preview__toolbar__label">Preview</div>`}
       <div class="le__part__preview__toolbar__icons">
-        ${this.templateIconDeviceRotate()} ${this.templateIconDeviceMode()}
-        ${this.templateIconBreakout()}
+        ${this.templateIconRefresh()} ${this.templateIconDeviceRotate()}
+        ${this.templateIconDeviceMode()} ${this.templateIconBreakout()}
       </div>
     </div>`;
   }
@@ -225,4 +226,23 @@ export class PreviewToolbarPart extends BasePart implements UiPartComponent {
       <span class="material-icons">screen_rotation</span>
     </div>`;
   }
+
+  templateIconRefresh(): TemplateResult {
+    if (!this.config.state.file?.url) {
+      return html``;
+    }
+
+    return html`<div
+      class="le__clickable le__tooltip--top"
+      data-tip="Refresh preview"
+      @click=${() => {
+        // Notify that the preview refresh is happening.
+        document.dispatchEvent(new CustomEvent(EVENT_REFRESH_PREVIEW));
+
+        this.render();
+      }}
+    >
+      <span class="material-icons">refresh</span>
+    </div>`;
+  }
 }