Merge pull request #4851 from preactjs/support-alternate-content-doc

Support alternative contentDocument

Author: JoviDeCroock

compat/src/portals.js

@@ -46,6 +46,7 @@ function Portal(props) {
 			parentNode: container,
 			childNodes: [],
 			_children: { _mask: root._mask },
+			ownerDocument: container.ownerDocument,
 			insertBefore(child, before) {
 				this.childNodes.push(child);
 				_this._container.insertBefore(child, before);

src/component.js

@@ -126,22 +126,24 @@ function renderComponent(component) {
 		commitQueue = [],
 		refQueue = [];
 
-	if (component._parentDom) {
+	const parentDom = component._parentDom;
+	if (parentDom) {
 		const newVNode = assign({}, oldVNode);
 		newVNode._original = oldVNode._original + 1;
 		if (options.vnode) options.vnode(newVNode);
 
 		diff(
-			component._parentDom,
+			parentDom,
 			newVNode,
 			oldVNode,
 			component._globalContext,
-			component._parentDom.namespaceURI,
+			parentDom.namespaceURI,
 			oldVNode._flags & MODE_HYDRATE ? [oldDom] : NULL,
 			commitQueue,
 			oldDom == NULL ? getDomSibling(oldVNode) : oldDom,
 			!!(oldVNode._flags & MODE_HYDRATE),
-			refQueue
+			refQueue,
+			parentDom.ownerDocument
 		);
 
 		newVNode._original = oldVNode._original;

src/diff/children.js

@@ -39,6 +39,8 @@ import { getDomSibling } from '../component';
  * siblings. In most cases, it starts out as `oldChildren[0]._dom`.
  * @param {boolean} isHydrating Whether or not we are in hydration
  * @param {any[]} refQueue an array of elements needed to invoke refs
+ * @param {Document} doc The document object to use for creating elements
+ * @returns {PreactElement} The next sibling DOM element to insert new elements
  */
 export function diffChildren(
 	parentDom,
@@ -51,7 +53,8 @@ export function diffChildren(
 	commitQueue,
 	oldDom,
 	isHydrating,
-	refQueue
+	refQueue,
+	doc
 ) {
 	let i,
 		/** @type {VNode} */
@@ -104,7 +107,8 @@ export function diffChildren(
 			commitQueue,
 			oldDom,
 			isHydrating,
-			refQueue
+			refQueue,
+			doc
 		);
 
 		// Adjust DOM nodes

src/diff/index.js

@@ -45,6 +45,7 @@ import options from '../options';
  * siblings. In most cases, it starts out as `oldChildren[0]._dom`.
  * @param {boolean} isHydrating Whether or not we are in hydration
  * @param {any[]} refQueue an array of elements needed to invoke refs
+ * @param {Document} doc The document object to use for creating elements
  */
 export function diff(
 	parentDom,
@@ -56,7 +57,8 @@ export function diff(
 	commitQueue,
 	oldDom,
 	isHydrating,
-	refQueue
+	refQueue,
+	doc
 ) {
 	/** @type {any} */
 	let tmp,
@@ -278,7 +280,8 @@ export function diff(
 				commitQueue,
 				oldDom,
 				isHydrating,
-				refQueue
+				refQueue,
+				doc
 			);
 
 			// We successfully rendered this VNode, unset any stored hydration/bailout state:
@@ -366,7 +369,8 @@ export function diff(
 			excessDomChildren,
 			commitQueue,
 			isHydrating,
-			refQueue
+			refQueue,
+			doc
 		);
 	}
 
@@ -431,6 +435,7 @@ function cloneNode(node) {
  * to invoke in commitRoot
  * @param {boolean} isHydrating Whether or not we are in hydration
  * @param {any[]} refQueue an array of elements needed to invoke refs
+ * @param {Document} doc The document object to use for creating elements
  * @returns {PreactElement}
  */
 function diffElementNodes(
@@ -442,7 +447,8 @@ function diffElementNodes(
 	excessDomChildren,
 	commitQueue,
 	isHydrating,
-	refQueue
+	refQueue,
+	doc
 ) {
 	let oldProps = oldVNode.props;
 	let newProps = newVNode.props;
@@ -485,14 +491,10 @@ function diffElementNodes(
 
 	if (dom == NULL) {
 		if (nodeType == NULL) {
-			return document.createTextNode(newProps);
+			return doc.createTextNode(newProps);
 		}
 
-		dom = document.createElementNS(
-			namespace,
-			nodeType,
-			newProps.is && newProps
-		);
+		dom = doc.createElementNS(namespace, nodeType, newProps.is && newProps);
 
 		// we are creating a new node, so we can assume this is a new subtree (in
 		// case we are hydrating), this deopts the hydrate
@@ -592,7 +594,8 @@ function diffElementNodes(
 					? excessDomChildren[0]
 					: oldVNode._children && getDomSibling(oldVNode, 0),
 				isHydrating,
-				refQueue
+				refQueue,
+				doc
 			);
 
 			// Remove children that are not part of any vnode.

src/internal.d.ts

@@ -105,6 +105,9 @@ export interface PreactElement extends preact.ContainerNode {
 	addEventListener?: Element['addEventListener'];
 	removeEventListener?: Element['removeEventListener'];
 
+	// Used to match DOM nodes to VNodes during hydration
+	readonly ownerDocument: Document;
+
 	// Setting styles
 	readonly style?: CSSStyleDeclaration;
 

src/render.js

@@ -32,6 +32,7 @@ export function render(vnode, parentDom) {
 	// List of effects that need to be called after diffing.
 	let commitQueue = [],
 		refQueue = [];
+
 	diff(
 		parentDom,
 		// Determine the new vnode tree and store it on the DOM element on
@@ -48,7 +49,8 @@ export function render(vnode, parentDom) {
 		commitQueue,
 		oldVNode ? oldVNode._dom : parentDom.firstChild,
 		isHydrating,
-		refQueue
+		refQueue,
+		parentDom.ownerDocument
 	);
 
 	// Flush all queued effects

test/browser/render.test.js

@@ -13,7 +13,7 @@ import {
 } from '../_util/helpers';
 import { clearLog, getLog, logCall } from '../_util/logCall';
 import { useState } from 'preact/hooks';
-import { vi } from 'vitest';
+import { expect, vi } from 'vitest';
 
 /** @jsx createElement */
 
@@ -2012,4 +2012,27 @@ describe('render()', () => {
 		render(<App />, scratch);
 		expect(scratch.innerHTML).to.equal('hello world');
 	});
+
+	describe('Alternative document', () => {
+		it('Renders in an iframe', () => {
+			const iframe = document.createElement('iframe');
+			scratch.appendChild(iframe);
+
+			const rootCreateElementSpy = vi.spyOn(document, 'createElementNS');
+			const iframeCreateElementSpy = vi.spyOn(
+				iframe.contentDocument,
+				'createElementNS'
+			);
+
+			const iframeBody = iframe.contentDocument.getElementsByTagName('body')[0];
+
+			render(<div>Hello world</div>, iframeBody);
+
+			expect(iframe.contentDocument.body.innerHTML).to.equal(
+				'<div>Hello world</div>'
+			);
+			expect(rootCreateElementSpy).not.toBeCalled();
+			expect(iframeCreateElementSpy).toBeCalled();
+		});
+	});
 });