Merge 456969f into 38c4f64

compat/src/index.js

@@ -1,4 +1,4 @@
-import { render as preactRender, cloneElement as preactCloneElement, createRef, h, Component, options, toChildArray, createContext, Fragment, Suspense, lazy } from 'preact';
+import { hydrate, render as preactRender, cloneElement as preactCloneElement, createRef, h, Component, options, toChildArray, createContext, Fragment, Suspense, lazy } from 'preact';
 import * as hooks from 'preact/hooks';
 export * from 'preact/hooks';
 import { assign } from '../../src/util';
@@ -71,9 +71,12 @@ class ContextProvider {
  */
 function Portal(props) {
 	let wrap = h(ContextProvider, { context: this.context }, props.vnode);
-	render(wrap, props.container);
+	let container = props.container;
+	let temp = props.container.appendChild(document.createTextNode(''));
+	hydrate(wrap, container);
 	this.componentWillUnmount = () => {
-		render(null, props.container);
+		container.removeChild(temp);
+		render(null, container);
 	};
 	return null;
 }

compat/test/browser/portals.test.js

@@ -28,6 +28,19 @@ describe('Portal', () => {
 		expect(root.innerHTML).to.equal('foobar');
 	});
 
+	it('should insert the portal', () => {
+		function Foo(props) {
+			return (
+				<div>
+					<p>Hello</p>
+					{createPortal(props.children, scratch)}
+				</div>
+			);
+		}
+		render(<Foo>foobar</Foo>, scratch);
+		expect(scratch.innerHTML).to.equal('foobar<div><p>Hello</p></div>');
+	});
+
 	it('should not render <undefined> for Portal nodes', () => {
 		let root = document.createElement('div');
 		let dialog = document.createElement('div');
@@ -73,7 +86,7 @@ describe('Portal', () => {
 		}
 
 		render(<App />, root);
-		expect(dialog.childNodes.length).to.equal(1);
+		expect(dialog.childNodes.length).to.equal(2);
 		render(null, root);
 		expect(dialog.childNodes.length).to.equal(0);
 	});