feat: auto-open a tbody when we detect we need it

packages/svelte/src/compiler/phases/1-parse/state/element.js

@@ -151,7 +151,8 @@ export default function element(parser) {
 						svg: false,
 						mathml: false,
 						scoped: false,
-						has_spread: false
+						has_spread: false,
+						auto_opens: null
 					},
 					parent: null
 				}

packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js

@@ -281,6 +281,10 @@ export function RegularElement(node, context) {
 
 	context.state.template.push('>');
 
+	if (node.metadata.auto_opens !== null) {
+		context.state.template.push(node.metadata.auto_opens);
+	}
+
 	/** @type {SourceLocation[]} */
 	const child_locations = [];
 
@@ -347,10 +351,21 @@ export function RegularElement(node, context) {
 			arg = b.member(arg, 'content');
 		}
 
-		process_children(trimmed, () => b.call('$.child', arg), true, {
-			...context,
-			state: child_state
-		});
+		process_children(
+			trimmed, // TODO: this doesn't work when the table is a sibling, as the expression is then not used
+			() => {
+				let call = b.call('$.child', arg);
+				for (let i = (node.metadata.auto_opens?.split('<').length ?? 1) - 1; i > 0; i--) {
+					call = b.call('$.child', call);
+				}
+				return call;
+			},
+			true,
+			{
+				...context,
+				state: child_state
+			}
+		);
 
 		if (needs_reset) {
 			child_state.init.push(b.stmt(b.call('$.reset', context.state.node)));

packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js

@@ -37,6 +37,10 @@ export function RegularElement(node, context) {
 		return;
 	}
 
+	if (node.metadata.auto_opens !== null) {
+		context.state.template.push(b.literal(node.metadata.auto_opens));
+	}
+
 	const { hoisted, trimmed } = clean_nodes(
 		node,
 		node.fragment.nodes,

packages/svelte/src/compiler/types/template.d.ts

@@ -302,7 +302,10 @@ export namespace AST {
 			mathml: boolean;
 			/** `true` if contains a SpreadAttribute */
 			has_spread: boolean;
+			/** `true` if should get a hash on the `class` attribute  */
 			scoped: boolean;
+			/** Contains a string of the tag(s) that are implicitly opened after this element */
+			auto_opens: string | null;
 		};
 	}
 

packages/svelte/tests/runtime-runes/samples/invalid-html-table-autorepair/_config.js

@@ -0,0 +1,57 @@
+import { test } from '../../test';
+
+let console_error = console.error;
+
+/**
+ * @type {any[]}
+ */
+const log = [];
+
+export default test({
+	solo: true,
+	compileOptions: {
+		dev: true // enable validation to ensure it doesn't throw
+	},
+
+	html: `
+		<table>
+			<tbody>
+				<tr>
+					<td>works1</td>
+				</tr>
+			</tbody>
+		</table>
+
+		<table>
+			<tbody>
+				<tr>
+					<td>works2</td>
+				</tr>
+				<tr>
+					<td>works3</td>
+				</tr>
+			</tbody>
+		</table>
+
+		<table>
+			<tbody>
+				<tr>
+					<td>works4</td>
+				</tr>
+			</tbody>
+			<tbody>
+				<tr>
+					<td>works5</td>
+				</tr>
+			</tbody>
+		</table>
+
+		<table>
+			<tbody>
+				<tr>
+					<td>works6</td>
+				</tr>
+			</tbody>
+		</table>
+`
+});

packages/svelte/tests/runtime-runes/samples/invalid-html-table-autorepair/main.svelte

@@ -0,0 +1,28 @@
+<table>
+	<tr>
+		<td>works1</td>
+	</tr>
+</table>
+
+<table>
+	{#each ['works2', 'works3'] as cell}
+		<tr>
+			<td>{cell}</td>
+		</tr>
+	{/each}
+</table>
+
+<table>
+	<tr>
+		<td>works4</td>
+	</tr>
+	<tbody>
+		<tr>
+			<td>works5</td>
+		</tr>
+	</tbody>
+</table>
+
+<table>
+	<td>works6</td>
+</table>