react-frame-component - npm Package Compare versions

Comparing version 0.5.1 to 0.5.2

index.js

		@@ -35,6 +35,10 @@ var React = require('react');
		initialContent: React.PropTypes.string,
		contentDidMount: React.PropTypes.func,
		contentDidUpdate: React.PropTypes.func
		},
		getDefaultProps: function() {
		return {
		initialContent: '<!DOCTYPE html><html><head></head><body><div></div></body></html>'
		initialContent: '<!DOCTYPE html><html><head></head><body><div></div></body></html>',
		contentDidMount: function() {},
		contentDidUpdate: function() {}
		};
		@@ -63,2 +67,3 @@ },

		var initialRender = !this._setInitialContent;
		if (!this._setInitialContent) {
		@@ -73,5 +78,8 @@ doc.clear();
		swallowInvalidHeadWarning();

		// unstable_renderSubtreeIntoContainer allows us to pass this component as
		// the parent, which exposes context to any child components.
		ReactDOM.unstable_renderSubtreeIntoContainer(this, contents, doc.body.children[0]);
		var callback = initialRender ? this.props.contentDidMount : this.props.contentDidUpdate;
		ReactDOM.unstable_renderSubtreeIntoContainer(this, contents, doc.body.children[0], callback);

		resetWarnings();
		@@ -78,0 +86,0 @@ } else {

package.json

		{
		"name": "react-frame-component",
		"version": "0.5.1",
		"version": "0.5.2",
		"description": "React component to wrap your application or component in an iFrame for encapsulation purposes",
		@@ -5,0 +5,0 @@ "main": "index.js",

README.md

		@@ -54,6 +54,17 @@ # React <Frame /> component

		Defaults to `'<html><head></head><body><div></div></body></html>'`
		Defaults to `'<!DOCTYPE html><html><head></head><body><div></div></body></html>'`

		The `initialContent` props is the initial html injected into frame. It is only injected once, but allows you to insert any html into the frame (e.g. a head tag, script tags, etc). Note that it does not update if you change the prop. Also at least one div is required in the body of the html, which we use to render the react dom into.

		######contentDidMount and contentDidUpdate
		`contentDidMount: React.PropTypes.func`
		`contentDidUpdate: React.PropTypes.func`

		`contentDidMount` and `contentDidUpdate` are conceptually equivalent to
		`componentDidMount` and `componentDidUpdate`, respecitvely. The reason these are
		needed is because internally we call `ReactDOM.render` which starts a new set of
		lifecycle calls. This set of lifecycle calls are sometimes triggered after the
		lifecycle of the parent component, so these callbacks provide a hook to know
		when the frame contents are mounted and updated.

		## More info
		@@ -60,0 +71,0 @@

test/Frame_spec.js

		@@ -34,3 +34,5 @@ "use strict";
		className: 'foo',
		initialContent : '<!DOCTYPE html><html><head></head><body><div></div></body></html>'
		initialContent: '<!DOCTYPE html><html><head></head><body><div></div></body></html>',
		contentDidMount: jasmine.any(Function),
		contentDidUpdate: jasmine.any(Function)
		});
		@@ -205,2 +207,41 @@ expect(frame.props.children).toBeDefined();
		});

		it("should call contentDidMount on initial render", function () {
		div = document.body.appendChild(document.createElement('div'));

		var didMount = jasmine.createSpy('didMount');
		var didUpdate = jasmine.createSpy('didUpdate');
		var frame = ReactDOM.render(
		<Frame contentDidMount={didMount} contentDidUpdate={didUpdate}/>
		, div);

		expect(didMount.calls.length).toEqual(1);
		expect(didUpdate).not.toHaveBeenCalled();
		});

		it("should call contentDidUpdate on subsequent updates", function () {
		div = document.body.appendChild(document.createElement('div'));

		var didMount = jasmine.createSpy('didMount');
		var didUpdate = jasmine.createSpy('didUpdate');
		var frame = ReactDOM.render(
		<Frame contentDidMount={didMount} contentDidUpdate={didUpdate}/>
		, div);

		var flag = false;
		runs(function() {
		frame.setState({foo: 'bar'}, function(){
		flag = true;
		});
		});

		waitsFor(function() {
		return flag;
		}, 'setState should complete', 200);

		runs(function() {
		expect(didMount.calls.length).toEqual(1);
		expect(didUpdate.calls.length).toEqual(1);
		});
		});
		});

Improved metrics