Merge fbeb20d into 93c626e

compat/src/index.js

@@ -78,7 +78,13 @@ class ContextProvider {
 function Portal(props) {
 	let wrap = h(ContextProvider, { context: this.context }, props.vnode);
 	let container = props.container;
-	hydrate(wrap, container);
+
+	if (props.container !== this.container) {
+		hydrate('', container);
+		this.container = container;
+	}
+
+	render(wrap, container);
 	this.componentWillUnmount = () => {
 		render(null, container);
 	};

compat/test/browser/portals.test.js

@@ -1,4 +1,4 @@
-import { createElement as h, render, createPortal, useState } from '../../src';
+import { createElement as h, render, createPortal, useState, Component } from '../../src';
 import { setupScratch } from '../../../test/_util/helpers';
 import { setupRerender, teardown } from 'preact/test-utils';
 /* eslint-disable react/jsx-boolean-value, react/display-name, prefer-arrow-callback */
@@ -51,6 +51,86 @@ describe('Portal', () => {
 		expect(scratch.innerHTML).to.equal('<div><p>Hello</p></div>');
 	});
 
+	it('should toggle the portal', () => {
+		let toggle;
+
+		function Foo(props) {
+			const [mounted, setMounted] = useState(true);
+			toggle = () => setMounted((s) => !s);
+			return (
+				<div>
+					<p>Hello</p>
+					{mounted && createPortal(props.children, scratch)}
+				</div>
+			);
+		}
+
+		render(<Foo><div>foobar</div></Foo>, scratch);
+		expect(scratch.innerHTML).to.equal('<div>foobar</div><div><p>Hello</p></div>');
+
+		toggle();
+		rerender();
+		expect(scratch.innerHTML).to.equal('<div><p>Hello</p></div>');
+
+		toggle();
+		rerender();
+		expect(scratch.innerHTML).to.equal('<div>foobar</div><div><p>Hello</p></div>');
+	});
+
+	it('should notice prop changes on the portal', () => {
+		let set;
+
+		function Foo(props) {
+			const [additionalProps, setProps] = useState({ style: { background: 'red' } });
+			set = (c) => setProps(c);
+			return (
+				<div>
+					<p>Hello</p>
+					{createPortal(<p {...additionalProps}>Foo</p>, scratch)}
+				</div>
+			);
+		}
+
+		render(<Foo />, scratch);
+		expect(scratch.firstChild.style.background).to.equal('red');
+
+		set({});
+		rerender();
+		expect(scratch.firstChild.style.background).to.equal('');
+	});
+
+	it('should not unmount the portal component', () => {
+		let spy = sinon.spy();
+		let set;
+		class Child extends Component {
+			componentWillUnmount() {
+				spy();
+			}
+
+			render(props) {
+				return props.children;
+			}
+		}
+
+		function Foo(props) {
+			const [additionalProps, setProps] = useState({ style: { background: 'red' } });
+			set = (c) => setProps(c);
+			return (
+				<div>
+					<p>Hello</p>
+					{createPortal(<Child {...additionalProps}>Foo</Child>, scratch)}
+				</div>
+			);
+		}
+
+		render(<Foo />, scratch);
+		expect(spy).not.to.be.called;
+
+		set({});
+		rerender();
+		expect(spy).not.to.be.called;
+	});
+
 	it('should not render <undefined> for Portal nodes', () => {
 		let root = document.createElement('div');
 		let dialog = document.createElement('div');