From cfc80bfbe92945bb2ba16a9a75d08d1eee225a9f Mon Sep 17 00:00:00 2001
From: Ryan Christian <rchristian@ryanchristian.dev>
Date: Wed, 8 May 2024 14:54:31 -0500
Subject: [PATCH 1/4] fix: Disallow <tr> as a child of <table>

---
 debug/src/debug.js               |  5 ++-
 debug/test/browser/debug.test.js | 52 ++++++++++++++++++--------------
 2 files changed, 31 insertions(+), 26 deletions(-)

diff --git a/debug/src/debug.js b/debug/src/debug.js
index 45cc67c3e5..73c9c3dcef 100644
--- a/debug/src/debug.js
+++ b/debug/src/debug.js
@@ -387,11 +387,10 @@ export function initDebug() {
 					type === 'tr' &&
 					domParentName !== 'thead' &&
 					domParentName !== 'tfoot' &&
-					domParentName !== 'tbody' &&
-					domParentName !== 'table'
+					domParentName !== 'tbody'
 				) {
 					console.error(
-						'Improper nesting of table. Your <tr> should have a <thead/tbody/tfoot/table> parent.' +
+						'Improper nesting of table. Your <tr> should have a <thead/tbody/tfoot> parent.' +
 							serializeVNode(vnode) +
 							`\n\n${getOwnerStack(vnode)}`
 					);
diff --git a/debug/test/browser/debug.test.js b/debug/test/browser/debug.test.js
index cd4b4d9bd8..b88bd8cb2c 100644
--- a/debug/test/browser/debug.test.js
+++ b/debug/test/browser/debug.test.js
@@ -543,12 +543,14 @@ describe('debug', () => {
 		it('Accepts minimal well formed table', () => {
 			const Table = () => (
 				<table>
-					<tr>
-						<th>Head</th>
-					</tr>
-					<tr>
-						<td>Body</td>
-					</tr>
+					<tbody>
+						<tr>
+							<th>Head</th>
+						</tr>
+						<tr>
+							<td>Body</td>
+						</tr>
+					</tbody>
 				</table>
 			);
 			render(<Table />, scratch);
@@ -586,23 +588,27 @@ describe('debug', () => {
 		it('accepts valid nested tables', () => {
 			const Table = () => (
 				<table>
-					<tr>
-						<th>foo</th>
-					</tr>
-					<tr>
-						<td id="nested">
-							<table>
-								<tr>
-									<td>cell1</td>
-									<td>cell2</td>
-									<td>cell3</td>
-								</tr>
-							</table>
-						</td>
-					</tr>
-					<tr>
-						<td>bar</td>
-					</tr>
+					<tbody>
+						<tr>
+							<th>foo</th>
+						</tr>
+						<tr>
+							<td id="nested">
+								<table>
+									<tbody>
+										<tr>
+											<td>cell1</td>
+											<td>cell2</td>
+											<td>cell3</td>
+										</tr>
+									</tbody>
+								</table>
+							</td>
+						</tr>
+						<tr>
+							<td>bar</td>
+						</tr>
+					</tbody>
 				</table>
 			);
 

From 32a60dbcaad2afd48eca4612e098c7b4c1eb3f5b Mon Sep 17 00:00:00 2001
From: Ryan Christian <rchristian@ryanchristian.dev>
Date: Wed, 8 May 2024 19:41:42 -0500
Subject: [PATCH 2/4] feat: Provide error log for nesting of <button> and <a>

---
 debug/src/debug.js               | 21 +++++++-
 debug/test/browser/debug.test.js | 88 ++++++++++++++++++++++++++++++++
 2 files changed, 108 insertions(+), 1 deletion(-)

diff --git a/debug/src/debug.js b/debug/src/debug.js
index 45cc67c3e5..d0f6e35c29 100644
--- a/debug/src/debug.js
+++ b/debug/src/debug.js
@@ -353,7 +353,13 @@ export function initDebug() {
 			});
 		}
 
-		if (typeof type === 'string' && (isTableElement(type) || type === 'p')) {
+		if (
+			typeof type === 'string' &&
+			(isTableElement(type) ||
+				type === 'p' ||
+				type === 'a' ||
+				type === 'button')
+		) {
 			// Avoid false positives when Preact only partially rendered the
 			// HTML tree. Whilst we attempt to include the outer DOM in our
 			// validation, this wouldn't work on the server for
@@ -421,6 +427,19 @@ export function initDebug() {
 							`\n\n${getOwnerStack(vnode)}`
 					);
 				}
+			} else if (type === 'a' || type === 'button') {
+				if (getDomChildren(vnode).find(childType => childType === type)) {
+					console.error(
+						'Improper nesting of interactive content. Your <' +
+							type +
+							'> should not have ' +
+							'other ' +
+							(type === 'a' ? 'anchor' : 'button') +
+							' tags as child-elements.' +
+							serializeVNode(vnode) +
+							`\n\n${getOwnerStack(vnode)}`
+					);
+				}
 			}
 		}
 
diff --git a/debug/test/browser/debug.test.js b/debug/test/browser/debug.test.js
index cd4b4d9bd8..b991d5edda 100644
--- a/debug/test/browser/debug.test.js
+++ b/debug/test/browser/debug.test.js
@@ -661,6 +661,94 @@ describe('debug', () => {
 		});
 	});
 
+	describe('button nesting', () => {
+		it('should not warn on a regular button', () => {
+			const Button = () => <button>Hello world</button>;
+
+			render(<Button />, scratch);
+			expect(console.error).to.not.be.called;
+		});
+
+		it('should warn for nesting illegal dom-nodes under a button', () => {
+			const Button = () => (
+				<button>
+					<button>Hello world</button>
+				</button>
+			);
+
+			render(<Button />, scratch);
+			expect(console.error).to.be.calledOnce;
+		});
+
+		it('should warn for nesting illegal dom-nodes under a button as func', () => {
+			const ButtonChild = ({ children }) => <button>{children}</button>;
+			const Button = () => (
+				<button>
+					<ButtonChild>Hello world</ButtonChild>
+				</button>
+			);
+
+			render(<Button />, scratch);
+			expect(console.error).to.be.calledOnce;
+		});
+
+		it('should not warn for nesting non-interactive content under a button', () => {
+			const Button = () => (
+				<button>
+					<span>Hello </span>
+					<a>World</a>
+				</button>
+			);
+
+			render(<Button />, scratch);
+			expect(console.error).to.not.be.called;
+		});
+	});
+
+	describe('anchor nesting', () => {
+		it('should not warn a regular anchor', () => {
+			const Anchor = () => <a>Hello world</a>;
+
+			render(<Anchor />, scratch);
+			expect(console.error).to.not.be.called;
+		});
+
+		it('should warn for nesting illegal dom-nodes under an anchor', () => {
+			const Anchor = () => (
+				<a>
+					<a>Hello world</a>
+				</a>
+			);
+
+			render(<Anchor />, scratch);
+			expect(console.error).to.be.calledOnce;
+		});
+
+		it('should warn for nesting illegal dom-nodes under an anchor as func', () => {
+			const AnchorChild = ({ children }) => <a>{children}</a>;
+			const Anchor = () => (
+				<a>
+					<AnchorChild>Hello world</AnchorChild>
+				</a>
+			);
+
+			render(<Anchor />, scratch);
+			expect(console.error).to.be.calledOnce;
+		});
+
+		it('should not warn for nesting non-interactive content under an anchor', () => {
+			const Anchor = () => (
+				<a>
+					<span>Hello </span>
+					<button>World</button>
+				</a>
+			);
+
+			render(<Anchor />, scratch);
+			expect(console.error).to.not.be.called;
+		});
+	});
+
 	describe('PropTypes', () => {
 		beforeEach(() => {
 			resetPropWarnings();

From 8a45c302c1b71408bb2b570a7ab526b7d943e1ac Mon Sep 17 00:00:00 2001
From: Ryan Christian <rchristian@ryanchristian.dev>
Date: Wed, 8 May 2024 19:44:49 -0500
Subject: [PATCH 3/4] chore: Better formatting

---
 debug/src/debug.js | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/debug/src/debug.js b/debug/src/debug.js
index d0f6e35c29..b69c916e53 100644
--- a/debug/src/debug.js
+++ b/debug/src/debug.js
@@ -430,11 +430,8 @@ export function initDebug() {
 			} else if (type === 'a' || type === 'button') {
 				if (getDomChildren(vnode).find(childType => childType === type)) {
 					console.error(
-						'Improper nesting of interactive content. Your <' +
-							type +
-							'> should not have ' +
-							'other ' +
-							(type === 'a' ? 'anchor' : 'button') +
+						`Improper nesting of interactive content. Your <${type}>` +
+							` should not have other ${type === 'a' ? 'anchor' : 'button'}` +
 							' tags as child-elements.' +
 							serializeVNode(vnode) +
 							`\n\n${getOwnerStack(vnode)}`

From a51c8e24ef836345c5525d6ab0c1a5949162f46e Mon Sep 17 00:00:00 2001
From: Ryan Christian <rchristian@ryanchristian.dev>
Date: Wed, 8 May 2024 19:49:00 -0500
Subject: [PATCH 4/4] refactor: Swap `.find()` for `.indexOf()`

---
 debug/src/debug.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/debug/src/debug.js b/debug/src/debug.js
index b69c916e53..1e47631ed9 100644
--- a/debug/src/debug.js
+++ b/debug/src/debug.js
@@ -428,7 +428,7 @@ export function initDebug() {
 					);
 				}
 			} else if (type === 'a' || type === 'button') {
-				if (getDomChildren(vnode).find(childType => childType === type)) {
+				if (getDomChildren(vnode).indexOf(type) !== -1) {
 					console.error(
 						`Improper nesting of interactive content. Your <${type}>` +
 							` should not have other ${type === 'a' ? 'anchor' : 'button'}` +