diff --git a/packages/svelte2tsx/src/htmlxtojsx/nodes/debug.ts b/packages/svelte2tsx/src/htmlxtojsx/nodes/debug.ts
index caa73682a..f59a12b37 100644
--- a/packages/svelte2tsx/src/htmlxtojsx/nodes/debug.ts
+++ b/packages/svelte2tsx/src/htmlxtojsx/nodes/debug.ts
@@ -1,10 +1,18 @@
-import MagicString from 'magic-string';
import { Node } from 'estree-walker';
+import MagicString from 'magic-string';
/**
- * {@debug ...} ---> {...}
+ * {@debug a} ---> {a}
+ * {@debug a, b} ---> {a}{b}
+ * tsx won't accept commas, must split
*/
-export function handleDebug(htmlx: string, str: MagicString, debugBlock: Node): void {
- const tokenStart = htmlx.indexOf('@debug', debugBlock.start);
- str.remove(tokenStart, tokenStart + '@debug'.length);
+export function handleDebug(_htmlx: string, str: MagicString, debugBlock: Node): void {
+ let cursor = debugBlock.start;
+ for (const identifier of debugBlock.identifiers as Node[]) {
+ str.remove(cursor, identifier.start);
+ str.prependLeft(identifier.start, '{');
+ str.prependLeft(identifier.end, '}');
+ cursor = identifier.end;
+ }
+ str.remove(cursor, debugBlock.end);
}
diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/debug-block/expected.jsx b/packages/svelte2tsx/test/htmlx2jsx/samples/debug-block/expected.jsx
index 5fd54c6bc..617f85c90 100644
--- a/packages/svelte2tsx/test/htmlx2jsx/samples/debug-block/expected.jsx
+++ b/packages/svelte2tsx/test/htmlx2jsx/samples/debug-block/expected.jsx
@@ -1 +1,3 @@
-<>{ myfile, someOtherFile }>
\ No newline at end of file
+<>{myfile}
+{myfile}{someOtherFile}
+{myfile}{someOtherFile}{someThirdFile}>
\ No newline at end of file
diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/debug-block/input.svelte b/packages/svelte2tsx/test/htmlx2jsx/samples/debug-block/input.svelte
index ea327e6be..30d95f413 100644
--- a/packages/svelte2tsx/test/htmlx2jsx/samples/debug-block/input.svelte
+++ b/packages/svelte2tsx/test/htmlx2jsx/samples/debug-block/input.svelte
@@ -1 +1,3 @@
-{@debug myfile, someOtherFile }
\ No newline at end of file
+{@debug myfile}
+{@debug myfile , someOtherFile }
+{@debug myfile, someOtherFile, someThirdFile }
\ No newline at end of file
diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/debug-block/expected.tsx b/packages/svelte2tsx/test/svelte2tsx/samples/debug-block/expected.tsx
new file mode 100644
index 000000000..5fafc4ed0
--- /dev/null
+++ b/packages/svelte2tsx/test/svelte2tsx/samples/debug-block/expected.tsx
@@ -0,0 +1,9 @@
+///
+<>>;function render() {
+<>{myfile}
+{__sveltets_store_get(myfile)}{someOtherFile}
+{myfile}{__sveltets_store_get(someOtherFile)}{someThirdFile}>
+return { props: {}, slots: {}, getters: {}, events: {} }}
+
+export default class Input__SvelteComponent_ extends createSvelte2TsxComponent(__sveltets_partial(__sveltets_with_any_event(render))) {
+}
\ No newline at end of file
diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/debug-block/input.svelte b/packages/svelte2tsx/test/svelte2tsx/samples/debug-block/input.svelte
new file mode 100644
index 000000000..b37bfc30b
--- /dev/null
+++ b/packages/svelte2tsx/test/svelte2tsx/samples/debug-block/input.svelte
@@ -0,0 +1,3 @@
+{@debug myfile}
+{@debug $myfile , someOtherFile }
+{@debug myfile, $someOtherFile, someThirdFile }
\ No newline at end of file