Merge pull request #8 from billneff79/force-update-fix

Fix bug where portal is added to dom twice if parent does forceUpdate during initial render

package.json

@@ -51,7 +51,7 @@
     "babel-preset-es2015-minimal-rollup": "^2.0.0",
     "babel-preset-react": "^6.5.0",
     "babel-preset-stage-0": "^6.5.0",
-    "chai": "^3.5.0",
+    "chai": "^4.1.2",
     "eslint": "^3.4.0",
     "gzip-size-cli": "^1.0.0",
     "karma": "^1.2.0",
@@ -63,16 +63,16 @@
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^1.7.0",
     "mkdirp": "^0.5.1",
-    "mocha": "^3.0.2",
+    "mocha": "^5.0.0",
     "npm-run-all": "^3.0.0",
     "phantomjs-prebuilt": "^2.1.4",
-    "preact": "^5.7.0",
+    "preact": "^8.2.7",
     "pretty-bytes-cli": "^1.0.0",
     "rollup": "^0.34.11",
     "rollup-plugin-babel": "^2.4.0",
     "rollup-plugin-commonjs": "^3.3.1",
     "rollup-plugin-node-resolve": "^2.0.0",
-    "sinon": "^1.17.2",
+    "sinon": "^4.2.2",
     "sinon-chai": "^2.8.0",
     "uglify-js": "^2.6.2",
     "webpack": "^1.12.14"

src/preact-portal.js

@@ -10,17 +10,20 @@ export default class Portal extends Component {
 	componentDidUpdate(props) {
 		for (let i in props) {
 			if (props[i]!==this.props[i]) {
-				return this.renderLayer();
+				return setTimeout(this.renderLayer);
 			}
 		}
 	}
 
 	componentDidMount() {
+		this.isMounted=true;
+		this.renderLayer = this.renderLayer.bind(this);
 		this.renderLayer();
 	}
 
 	componentWillUnmount() {
 		this.renderLayer(false);
+		this.isMounted=false;
 		if (this.remote) this.remote.parentNode.removeChild(this.remote);
 	}
 
@@ -29,6 +32,8 @@ export default class Portal extends Component {
 	}
 
 	renderLayer(show=true) {
+		if (!this.isMounted) return;
+
 		// clean up old node if moving bases:
 		if (this.props.into!==this.intoPointer) {
 			this.intoPointer = this.props.into;

test/preact-portal.js

@@ -67,6 +67,34 @@ describe('preact-portal', () => {
 
 		expect(Child)
 			.to.have.been.calledOnce
-			.and.calledWith({}, ctx);
+			.and.calledWith({children: []}, ctx);
+	});
+
+	it('should only create one instance when forced to rerender by parent during first render', () => {
+
+		let foo = document.createElement('div');
+		foo.setAttribute('id', 'foo');
+		scratch.appendChild(foo);
+
+		let base = document.createElement('div');
+		scratch.appendChild(base);
+
+		class ParentForceUpdateOnMount extends Component {
+
+			componentDidMount() {
+				this.forceUpdate();
+			}
+
+			render() {
+				return (
+					<Portal into="#foo"><div>hello</div></Portal>
+				);
+			}
+		}
+
+		render(<ParentForceUpdateOnMount/>, base);
+
+		expect(foo).to.have.property('innerHTML', '<div>hello</div>');
+
 	});
 });