react-frame-component 5.2.2 → 5.2.3-alpha.0

package/index.d.ts

@@ -1,31 +1 @@
-declare module 'react-frame-component' {
-  import * as React from 'react';
-
-  export interface FrameComponentProps
-    extends React.IframeHTMLAttributes<HTMLIFrameElement> {
-    head?: React.ReactNode | undefined;
-    mountTarget?: string | undefined;
-    initialContent?: string | undefined;
-    contentDidMount?: (() => void) | undefined;
-    contentDidUpdate?: (() => void) | undefined;
-    children: React.ReactNode;
-    ref?: React.Ref<FrameComponent>;
-  }
-
-  export default class FrameComponent extends React.Component<
-    FrameComponentProps
-  > {}
-
-  export interface FrameContextProps {
-    document?: HTMLDocument;
-    window?: Window;
-  }
-
-  export const FrameContext: React.Context<FrameContextProps>;
-
-  export const FrameContextProvider: React.Provider<FrameContextProps>;
-
-  export const FrameContextConsumer: React.Consumer<FrameContextProps>;
-
-  export function useFrame(): FrameContextProps;
-}
+declare module 'react-frame-component';

package/lib/Frame.js

@@ -60,9 +60,17 @@ var Frame = exports.Frame = function (_Component) {
     };
 
     _this.handleLoad = function () {
-      _this.setState({ iframeLoaded: true });
+      clearInterval(_this.loadCheck);
+      // Bail update as some browsers will trigger on both DOMContentLoaded & onLoad ala firefox
+      if (!_this.state.iframeLoaded) {
+        _this.setState({ iframeLoaded: true });
+      }
     };
 
+    _this.loadCheck = setInterval(function loadCheckCallback() {
+      this.handleLoad();
+    }, 500);
+
     _this._isMounted = false;
     _this.nodeRef = _react2.default.createRef();
     _this.state = { iframeLoaded: false };
@@ -75,10 +83,9 @@ var Frame = exports.Frame = function (_Component) {
       this._isMounted = true;
 
       var doc = this.getDoc();
-      if (doc && doc.readyState === 'complete') {
-        this.forceUpdate();
-      } else {
-        this.nodeRef.current.addEventListener('load', this.handleLoad);
+
+      if (doc) {
+        this.nodeRef.current.contentWindow.addEventListener('DOMContentLoaded', this.handleLoad);
       }
     }
   }, {
@@ -86,7 +93,7 @@ var Frame = exports.Frame = function (_Component) {
     value: function componentWillUnmount() {
       this._isMounted = false;
 
-      this.nodeRef.current.removeEventListener('load', this.handleLoad);
+      this.nodeRef.current.removeEventListener('DOMContentLoaded', this.handleLoad);
     }
   }, {
     key: 'getDoc',
@@ -102,6 +109,10 @@ var Frame = exports.Frame = function (_Component) {
       }
       return doc.body.children[0];
     }
+
+    // In certain situations on a cold cache DOMContentLoaded never gets called
+    // fallback to an interval to check if that's the case
+
   }, {
     key: 'renderFrameContents',
     value: function renderFrameContents() {
@@ -153,6 +164,7 @@ var Frame = exports.Frame = function (_Component) {
       delete props.contentDidMount;
       delete props.contentDidUpdate;
       delete props.forwardedRef;
+
       return _react2.default.createElement(
         'iframe',
         _extends({}, props, { ref: this.setRef, onLoad: this.handleLoad }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-frame-component",
-  "version": "5.2.2",
+  "version": "5.2.3-alpha.0",
   "description": "React component to wrap your application or component in an iFrame for encapsulation purposes",
   "main": "lib/index.js",
   "files": [