Merge branch 'main' into test-out-comment-markers

debug/src/debug.js

@@ -370,7 +370,7 @@ export function initDebug() {
 			// `preact-render-to-string`. There we'd otherwise flood the terminal
 			// with false positives, which we'd like to avoid.
 			let domParentName = getClosestDomNodeParentName(parent);
-			if (domParentName !== '') {
+			if (domParentName !== '' && isTableElement(type)) {
 				if (
 					type === 'table' &&
 					// Tables can be nested inside each other if it's inside a cell.

debug/test/browser/debug.test.js

@@ -662,6 +662,19 @@ describe('debug', () => {
 			expect(console.error).to.be.calledOnce;
 		});
 
+		it('should warn for nesting illegal dom-nodes under a paragraph with a parent', () => {
+			const Paragraph = () => (
+				<div>
+					<p>
+						<div>Hello world</div>
+					</p>
+				</div>
+			);
+
+			render(<Paragraph />, scratch);
+			expect(console.error).to.be.calledOnce;
+		});
+
 		it('should warn for nesting illegal dom-nodes under a paragraph as func', () => {
 			const Title = ({ children }) => <h1>{children}</h1>;
 			const Paragraph = () => (

src/diff/children.js

@@ -116,14 +116,6 @@ export function diffChildren(
 			childVNode._flags & INSERT_VNODE ||
 			oldVNode._children === childVNode._children
 		) {
-			if (
-				oldDom &&
-				typeof childVNode.type == 'string' &&
-				// @ts-expect-error olDom should be present on a DOM node
-				!parentDom.contains(oldDom)
-			) {
-				oldDom = getDomSibling(oldVNode);
-			}
 			oldDom = insert(childVNode, oldDom, parentDom);
 		} else if (
 			typeof childVNode.type == 'function' &&
@@ -381,6 +373,14 @@ function insert(parentVNode, oldDom, parentDom) {
 
 		return oldDom;
 	} else if (parentVNode._dom != oldDom) {
+		if (
+			oldDom &&
+			parentVNode.type &&
+			// @ts-expect-error olDom should be present on a DOM node
+			!parentDom.contains(oldDom)
+		) {
+			oldDom = getDomSibling(parentVNode);
+		}
 		parentDom.insertBefore(parentVNode._dom, oldDom || null);
 		oldDom = parentVNode._dom;
 	}

test/browser/render.test.js

@@ -1689,4 +1689,58 @@ describe('render()', () => {
 		]);
 		clearLog();
 	});
+
+	it('should shift keyed lists with wrapping fragment-like children', () => {
+		const ItemA = ({ text }) => <div>A: {text}</div>;
+		const ItemB = ({ text }) => <div>B: {text}</div>;
+
+		const Item = ({ text, type }) => {
+			return type === 'B' ? <ItemB text={text} /> : <ItemA text={text} />;
+		};
+
+		let set;
+		class App extends Component {
+			constructor(props) {
+				super(props);
+				this.state = { items: a, mapping: mappingA };
+				set = (items, mapping) => {
+					this.setState({ items, mapping });
+				};
+			}
+
+			render() {
+				return (
+					<ul>
+						{this.state.items.map((key, i) => (
+							<Item key={key} type={this.state.mapping[i]} text={key} />
+						))}
+					</ul>
+				);
+			}
+		}
+
+		const a = ['4', '1', '2', '3'];
+		const mappingA = ['A', 'A', 'B', 'B'];
+		const b = ['1', '2', '4', '3'];
+		const mappingB = ['B', 'A', 'A', 'A'];
+		const c = ['4', '2', '1', '3'];
+		const mappingC = ['A', 'B', 'B', 'A'];
+
+		render(<App items={a} mapping={mappingA} />, scratch);
+		expect(scratch.innerHTML).to.equal(
+			'<ul><div>A: 4</div><div>A: 1</div><div>B: 2</div><div>B: 3</div></ul>'
+		);
+
+		set(b, mappingB);
+		rerender();
+		expect(scratch.innerHTML).to.equal(
+			'<ul><div>B: 1</div><div>A: 2</div><div>A: 4</div><div>A: 3</div></ul>'
+		);
+
+		set(c, mappingC);
+		rerender();
+		expect(scratch.innerHTML).to.equal(
+			'<ul><div>A: 4</div><div>B: 2</div><div>B: 1</div><div>A: 3</div></ul>'
+		);
+	});
 });