		'use strict';

		var React = require('react');
		var ReactDOM = require('react-dom');
		var assign = require('object-assign');
		Object.defineProperty(exports, "__esModule", {
		value: true
		});

		var hasConsole = typeof window !== 'undefined' && window.console;
		var noop = function noop() {};
		var swallowInvalidHeadWarning = noop;
		var resetWarnings = noop;
		var _Frame = require('./Frame');

		if (hasConsole) {
		var originalError = console.error;
		// Rendering a <head> into a body is technically invalid although it
		// works. We swallow React's validateDOMNesting warning if that is the
		// message to avoid confusion
		swallowInvalidHeadWarning = function swallowInvalidHeadWarning() {
		console.error = function (msg) {
		if (/<head>/.test(msg)) return;
		originalError.call(console, msg);
		};
		};
		resetWarnings = function resetWarnings() {
		console.error = originalError;
		};
		}
		var _Frame2 = _interopRequireDefault(_Frame);

		var Frame = React.createClass({
		displayName: 'Frame',
		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		// React warns when you render directly into the body since browser extensions
		// also inject into the body and can mess up React. For this reason
		// initialContent initialContent is expected to have a div inside of the body
		// element that we render react into.
		propTypes: {
		style: React.PropTypes.object,
		head: React.PropTypes.node,
		initialContent: React.PropTypes.string,
		mountTarget: React.PropTypes.string,
		contentDidMount: React.PropTypes.func,
		contentDidUpdate: React.PropTypes.func
		},
		getDefaultProps: function getDefaultProps() {
		return {
		initialContent: '<!DOCTYPE html><html><head></head><body><div></div></body></html>',
		contentDidMount: function contentDidMount() {},
		contentDidUpdate: function contentDidUpdate() {}
		};
		},
		render: function render() {
		var props = assign({}, this.props);
		delete props.initialContent;
		delete props.contentDidMount;
		delete props.contentDidUpdate;
		// The iframe isn't ready so we drop children from props here. #12, #17
		return React.createElement('iframe', assign({}, props, { children: undefined }));
		},
		componentDidMount: function componentDidMount() {
		this._isMounted = true;
		this.renderFrameContents();
		},
		renderFrameContents: function renderFrameContents() {
		if (!this._isMounted) {
		return;
		}

		var doc = ReactDOM.findDOMNode(this).contentDocument;
		if (doc && doc.readyState === 'complete') {
		var contents = React.createElement('div', undefined, this.props.head, this.props.children);

		var initialRender = !this._setInitialContent;
		if (!this._setInitialContent) {
		doc.open();
		doc.write(this.props.initialContent);
		doc.close();
		this._setInitialContent = true;
		}

		swallowInvalidHeadWarning();

		// unstable_renderSubtreeIntoContainer allows us to pass this component as
		// the parent, which exposes context to any child components.
		var callback = initialRender ? this.props.contentDidMount : this.props.contentDidUpdate;
		var mountTarget;

		if (this.props.mountTarget) {
		mountTarget = doc.querySelector(this.props.mountTarget);
		} else {
		mountTarget = doc.body.children[0];
		}

		ReactDOM.unstable_renderSubtreeIntoContainer(this, contents, mountTarget, callback);

		resetWarnings();
		} else {
		setTimeout(this.renderFrameContents, 0);
		}
		},
		componentDidUpdate: function componentDidUpdate() {
		this.renderFrameContents();
		},
		componentWillUnmount: function componentWillUnmount() {
		this._isMounted = false;

		var doc = ReactDOM.findDOMNode(this).contentDocument;
		if (doc) {
		ReactDOM.unmountComponentAtNode(doc.body);
		}
		}
		});

		module.exports = Frame;
		exports.default = _Frame2.default;

package.json

		{
		"name": "react-frame-component",
		"version": "0.6.6",
		"version": "1.0.0",
		"description": "React component to wrap your application or component in an iFrame for encapsulation purposes",
		"main": "index.js",
		"main": "lib/index.js",
		"scripts": {
		"test": "gulp test"
		"clean": "rimraf lib",
		"test": "npm-run-all --parallel lint karma:once --sequential build",
		"develop": "npm-run-all --parallel karma:dev",
		"karma:once": "karma start --single-run",
		"karma:dev": "karma start --browsers Chrome,Electron",
		"babel": "babel src -d lib",
		"build": "npm-run-all clean babel",
		"lint": "eslint '.js' '{src,test}//.js*'",
		"prepublish": "npm run build"
		},
		@@ -20,2 +28,5 @@ "repository": {
		"author": "Ryan Seddon",
		"contributors": [
		"Chris Trevino <darthtrevino@gmail.com>"
		],
		"license": "MIT",
		@@ -27,18 +38,45 @@ "bugs": {
		"devDependencies": {
		"browserify": "^4.1.11",
		"es5-shim": "^3.3.0",
		"gulp": "^3.6.2",
		"gulp-karma": "0.0.4",
		"karma": "^0.12.16",
		"karma-jasmine": "^0.1.5",
		"karma-phantomjs-launcher": "^0.1.4",
		"babel-cli": "^6.18.0",
		"babel-core": "^6.21.0",
		"babel-eslint": "^7.1.1",
		"babel-loader": "^6.2.10",
		"babel-plugin-transform-class-properties": "^6.19.0",
		"babel-preset-latest": "^6.16.0",
		"babel-preset-react": "^6.16.0",
		"babel-preset-stage-2": "^6.18.0",
		"babel-register": "^6.18.0",
		"chai": "^3.5.0",
		"electron": "^1.4.14",
		"eslint": "^3.13.1",
		"eslint-config-airbnb": "^14.0.0",
		"eslint-plugin-import": "^2.2.0",
		"eslint-plugin-jsx-a11y": "^3.0.2",
		"eslint-plugin-react": "^6.9.0",
		"karma": "^1.4.0",
		"karma-chrome-launcher": "^2.0.0",
		"karma-electron": "^5.1.1",
		"karma-mocha": "^1.3.0",
		"karma-osx-reporter": "^0.2.1",
		"karma-phantomjs-launcher": "^1.0.2",
		"karma-phantomjs2-launcher": "^0.5.0",
		"karma-sourcemap-loader": "^0.3.7",
		"karma-webpack": "^2.0.1",
		"mocha": "^3.2.0",
		"mocha-junit-reporter": "^1.13.0",
		"mocha-multi": "^0.10.0",
		"mocha-osx-reporter": "^0.1.2",
		"npm-run-all": "^4.0.1",
		"react": "^15.0.1",
		"react-addons-test-utils": "^15.0.1",
		"react-dom": "^15.0.1",
		"reactify": "^1.1.0",
		"vinyl-source-stream": "^0.1.1"
		"rimraf": "^2.5.4",
		"sinon": "2.0.0-pre",
		"wallaby-webpack": "^0.0.30",
		"webpack": "^1.14.0"
		},
		"dependencies": {
		"object-assign": "^4.1.0"
		"dependencies": {},
		"peerDependencies": {
		"react": "^15.0.1",
		"react-dom": "^15.0.1"
		}
		}

.travis.yml

gulpfile.js

index.js

karma.conf.js

test/Frame_spec.js

.npmignore

Sorry, the diff of this file is not supported yet

react-frame-component - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics

Dependency changes