From 60148d335286582192808e5721c60fb5c968be57 Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Thu, 8 Aug 2024 15:39:18 +0200
Subject: [PATCH] fix: order of arguments for `push_element` in
 `svelte:element` (#12763)

* fix: order of arguments for `push_element` in `svelte:element`

* chore: move test to runtime

* fix: add line and column to function call
---
 .changeset/six-apes-peel.md                      |  5 +++++
 .../3-transform/server/visitors/SvelteElement.js | 16 ++++++++++++++--
 .../invalid-nested-svelte-element/_config.js     |  7 +++++++
 .../invalid-nested-svelte-element/_expected.html |  1 +
 .../_expected_head.html                          |  1 +
 .../invalid-nested-svelte-element/main.svelte    |  3 +++
 6 files changed, 31 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/six-apes-peel.md
 create mode 100644 packages/svelte/tests/server-side-rendering/samples/invalid-nested-svelte-element/_config.js
 create mode 100644 packages/svelte/tests/server-side-rendering/samples/invalid-nested-svelte-element/_expected.html
 create mode 100644 packages/svelte/tests/server-side-rendering/samples/invalid-nested-svelte-element/_expected_head.html
 create mode 100644 packages/svelte/tests/server-side-rendering/samples/invalid-nested-svelte-element/main.svelte

diff --git a/.changeset/six-apes-peel.md b/.changeset/six-apes-peel.md
new file mode 100644
index 0000000000..e642a1f507
--- /dev/null
+++ b/.changeset/six-apes-peel.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: order of arguments for `push_element` in `svelte:element`
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteElement.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteElement.js
index acd9330698..390fde6811 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteElement.js
@@ -1,7 +1,8 @@
+/** @import { Location } from 'locate-character' */
 /** @import { BlockStatement, Expression } from 'estree' */
 /** @import { SvelteElement } from '#compiler' */
 /** @import { ComponentContext } from '../types.js' */
-import { dev } from '../../../../state.js';
+import { dev, locator } from '../../../../state.js';
 import * as b from '../../../../utils/builders.js';
 import { determine_namespace_for_children } from '../../utils.js';
 import { build_element_attributes } from './shared/element.js';
@@ -36,7 +37,18 @@ export function SvelteElement(node, context) {
 	build_element_attributes(node, { ...context, state });
 
 	if (dev) {
-		context.state.template.push(b.stmt(b.call('$.push_element', tag, b.id('$$payload'))));
+		const location = /** @type {Location} */ (locator(node.start));
+		context.state.template.push(
+			b.stmt(
+				b.call(
+					'$.push_element',
+					b.id('$$payload'),
+					tag,
+					b.literal(location.line),
+					b.literal(location.column)
+				)
+			)
+		);
 	}
 
 	const attributes = b.block([...state.init, ...build_template(state.template)]);
diff --git a/packages/svelte/tests/server-side-rendering/samples/invalid-nested-svelte-element/_config.js b/packages/svelte/tests/server-side-rendering/samples/invalid-nested-svelte-element/_config.js
new file mode 100644
index 0000000000..ed0ead960b
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/invalid-nested-svelte-element/_config.js
@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	}
+});
diff --git a/packages/svelte/tests/server-side-rendering/samples/invalid-nested-svelte-element/_expected.html b/packages/svelte/tests/server-side-rendering/samples/invalid-nested-svelte-element/_expected.html
new file mode 100644
index 0000000000..70b23b87bc
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/invalid-nested-svelte-element/_expected.html
@@ -0,0 +1 @@
+<!--[--><!----><p ><!----><p ><!----></p><!----><!----></p><!----><!--]-->
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/invalid-nested-svelte-element/_expected_head.html b/packages/svelte/tests/server-side-rendering/samples/invalid-nested-svelte-element/_expected_head.html
new file mode 100644
index 0000000000..27c37f693b
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/invalid-nested-svelte-element/_expected_head.html
@@ -0,0 +1 @@
+<script>console.error("node_invalid_placement_ssr: `<p>` (packages/svelte/tests/server-side-rendering/samples/invalid-nested-svelte-element/main.svelte:1:0) cannot contain `<p>` (packages/svelte/tests/server-side-rendering/samples/invalid-nested-svelte-element/main.svelte:2:1)\n\nThis can cause content to shift around as the browser repairs the HTML, and will likely result in a `hydration_mismatch` warning.")</script>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/invalid-nested-svelte-element/main.svelte b/packages/svelte/tests/server-side-rendering/samples/invalid-nested-svelte-element/main.svelte
new file mode 100644
index 0000000000..a152dd2b79
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/invalid-nested-svelte-element/main.svelte
@@ -0,0 +1,3 @@
+<svelte:element this={'p'}>
+	<svelte:element this={'p'}></svelte:element>
+</svelte:element>