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

package/index.d.ts

@@ -1 +1,30 @@
-declare module 'react-frame-component';
+declare module 'react-frame-component' {
+  import * as React from 'react';
+
+  export interface FrameComponentProps
+    extends React.IframeHTMLAttributes<HTMLIFrameElement>,
+      React.RefAttributes<HTMLIFrameElement> {
+    head?: React.ReactNode | undefined;
+    mountTarget?: string | undefined;
+    initialContent?: string | undefined;
+    contentDidMount?: (() => void) | undefined;
+    contentDidUpdate?: (() => void) | undefined;
+    children: React.ReactNode;
+  }
+
+  const FrameComponent: React.ForwardRefExoticComponent<FrameComponentProps>;
+  export default FrameComponent;
+
+  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;
+}

package/lib/Frame.js

@@ -60,17 +60,9 @@ var Frame = exports.Frame = function (_Component) {
     };
 
     _this.handleLoad = function () {
-      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.setState({ iframeLoaded: true });
     };
 
-    _this.loadCheck = setInterval(function loadCheckCallback() {
-      this.handleLoad();
-    }, 500);
-
     _this._isMounted = false;
     _this.nodeRef = _react2.default.createRef();
     _this.state = { iframeLoaded: false };
@@ -83,9 +75,10 @@ var Frame = exports.Frame = function (_Component) {
       this._isMounted = true;
 
       var doc = this.getDoc();
-
-      if (doc) {
-        this.nodeRef.current.contentWindow.addEventListener('DOMContentLoaded', this.handleLoad);
+      if (doc && doc.readyState === 'complete') {
+        this.forceUpdate();
+      } else {
+        this.nodeRef.current.addEventListener('load', this.handleLoad);
       }
     }
   }, {
@@ -93,7 +86,7 @@ var Frame = exports.Frame = function (_Component) {
     value: function componentWillUnmount() {
       this._isMounted = false;
 
-      this.nodeRef.current.removeEventListener('DOMContentLoaded', this.handleLoad);
+      this.nodeRef.current.removeEventListener('load', this.handleLoad);
     }
   }, {
     key: 'getDoc',
@@ -109,10 +102,6 @@ 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() {
@@ -164,7 +153,6 @@ 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.3-alpha.0",
+  "version": "5.2.4",
   "description": "React component to wrap your application or component in an iFrame for encapsulation purposes",
   "main": "lib/index.js",
   "files": [
@@ -62,7 +62,7 @@
     "gh-pages": "^1.1.0",
     "html-webpack-plugin": "^2.28.0",
     "husky": "^0.14.3",
-    "karma": "^1.4.0",
+    "karma": "^6.3.16",
     "karma-chrome-launcher": "^2.0.0",
     "karma-mocha": "^1.3.0",
     "karma-osx-reporter": "^0.2.1",
@@ -80,7 +80,7 @@
     "react-dom": "^17.0.1",
     "rimraf": "^2.5.4",
     "sinon": "2.0.0-pre",
-    "wallaby-webpack": "^0.0.30",
+    "wallaby-webpack": "^3.9.16",
     "webpack": "1.x",
     "webpack-dev-server": "^1.16.3"
   },