Fix/refresh iframe (#6787)

Fix/refresh iframe
storybookjs · May 15, 2019 · 43e378f · 43e378f
2 parents d79a030 + 3584591
commit 43e378f
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 12 deletions.
diff --git a/lib/channel-postmessage/src/index.ts b/lib/channel-postmessage/src/index.ts
@@ -29,20 +29,29 @@ export class PostmsgTransport {
 
   private handler: ChannelHandler;
 
+  private connected: boolean;
+
   // eslint-disable-next-line @typescript-eslint/no-parameter-properties
   constructor(private readonly config: Config) {
     this.buffer = [];
     this.handler = null;
     window.addEventListener('message', this.handleEvent.bind(this), false);
-    document.addEventListener('DOMContentLoaded', () => this.flush());
+
     // Check whether the config.page parameter has a valid value
     if (config.page !== 'manager' && config.page !== 'preview') {
       throw new Error(`postmsg-channel: "config.page" cannot be "${config.page}"`);
     }
   }
 
   setHandler(handler: ChannelHandler): void {
-    this.handler = handler;
+    this.handler = (...args) => {
+      handler.apply(this, args);
+
+      if (!this.connected && this.getWindow()) {
+        this.flush();
+        this.connected = true;
+      }
+    };
   }
 
   /**

diff --git a/lib/ui/src/components/preview/iframe.js b/lib/ui/src/components/preview/iframe.js
@@ -2,7 +2,6 @@ import window from 'global';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
-// this component renders an iframe, which gets updates via post-messages
 export class IFrame extends Component {
   iframe = null;
 
@@ -12,20 +11,20 @@ export class IFrame extends Component {
   }
 
   shouldComponentUpdate(nextProps) {
-    const { scale, src } = this.props;
-    return scale !== nextProps.scale || src !== nextProps.src;
-  }
-
-  componentDidUpdate(prevProps) {
     const { scale } = this.props;
-    if (scale !== prevProps.scale) {
+
+    if (scale !== nextProps.scale) {
       this.setIframeBodyStyle({
-        width: `${scale * 100}%`,
-        height: `${scale * 100}%`,
-        transform: `scale(${1 / scale})`,
+        width: `${nextProps.scale * 100}%`,
+        height: `${nextProps.scale * 100}%`,
+        transform: `scale(${1 / nextProps.scale})`,
         transformOrigin: 'top left',
       });
     }
+
+    // this component renders an iframe, which gets updates via post-messages
+    // never update this component, it will cause the iframe to refresh
+    return false;
   }
 
   setIframeBodyStyle(style) {