From f15475e1b985372c3873d68d8d6f69b7c810bb06 Mon Sep 17 00:00:00 2001
From: CokaKoala <31664583+AdrianGonz97@users.noreply.github.com>
Date: Fri, 3 May 2024 19:22:53 -0400
Subject: [PATCH] fix: Existing `@const` tag declarations in the template are
 now considered (#58)

---
 .changeset/fifty-years-joke.md   |  5 +++
 src/traverse/Block.ts            | 21 ++++++++----
 tests/each_block/index.svelte.ts | 59 ++++++++++++++++++++++++++++++++
 tests/each_block/index.test.ts   | 10 +++++-
 4 files changed, 88 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/fifty-years-joke.md

diff --git a/.changeset/fifty-years-joke.md b/.changeset/fifty-years-joke.md
new file mode 100644
index 0000000..30936e7
--- /dev/null
+++ b/.changeset/fifty-years-joke.md
@@ -0,0 +1,5 @@
+---
+'@melt-ui/pp': patch
+---
+
+fix: Existing `@const` tag declarations in the template are now considered
diff --git a/src/traverse/Block.ts b/src/traverse/Block.ts
index e18adb1..c388c69 100644
--- a/src/traverse/Block.ts
+++ b/src/traverse/Block.ts
@@ -87,10 +87,22 @@ function handleActionNode({ config, actionNode, blockNode }: HandleActionNodeArg
 			firstChild = blockNode.children?.at(1);
 		}
 
+		// checks if there are any existing `{@const}` tags. if there are, we want to
+		// append the injected block at the end
+		let lastConst: TemplateNode | undefined;
+		for (const child of blockNode.children ?? []) {
+			if (child.type === 'ConstTag') lastConst = child;
+		}
+
 		// convert this into a {@const} block
-		const start = firstChild?.start;
+		const pos = lastConst?.end ?? firstChild?.start;
 		const constIdentifier = getMeltBuilderName(config.builderCount++);
-		if (!start) throw Error('This is unreachable');
+		if (!pos) throw Error('This is unreachable');
+
+		// we'll add the indent and new line depending on where we're injecting it
+		const constTag = lastConst
+			? `\n${indent}{@const ${constIdentifier} = ${expressionContent}}`
+			: `{@const ${constIdentifier} = ${expressionContent}}\n${indent}`;
 
 		config.builders.push({
 			identifierName: constIdentifier,
@@ -98,10 +110,7 @@ function handleActionNode({ config, actionNode, blockNode }: HandleActionNodeArg
 			endPos: actionNode.end,
 		});
 
-		config.markup.prependRight(
-			start,
-			`{@const ${constIdentifier} = ${expressionContent}}\n${indent}`
-		);
+		config.markup.prependRight(pos, constTag);
 	} else {
 		// if it's just an identifier, add it to the list of builders so that it can
 		// later be transformed into the correct syntax
diff --git a/tests/each_block/index.svelte.ts b/tests/each_block/index.svelte.ts
index 4c498cd..5a622d2 100644
--- a/tests/each_block/index.svelte.ts
+++ b/tests/each_block/index.svelte.ts
@@ -396,3 +396,62 @@ export const thumbEachExpected = `
 	{/each}
 </span>
 `;
+
+export const existingConst = `
+<script>
+	import { createSlider, melt } from '@melt-ui/svelte';
+
+	const {
+		elements: { root, range, thumb },
+		states: { value },
+	} = createSlider({
+		defaultValue: [20, 80],
+		max: 100,
+	});
+</script>
+
+<span use:melt={$root} class="relative flex h-[20px] w-[200px] items-center">
+	<span class="block h-[3px] w-full bg-black/40">
+		<span use:melt={$range} class="h-[3px] bg-white" />
+	</span>
+
+	{#each $value as { id }, i}
+		{@const itemId = id}
+		{@const itemId2 = id}
+		<span
+			use:melt={$item(itemId)}
+			class="block h-5 w-5 rounded-full bg-white focus:ring-4 focus:ring-black/40"
+		/>
+	{/each}
+</span>
+`;
+
+export const existingConstExpected = `
+<script>
+	import { createSlider, melt } from '@melt-ui/svelte';
+
+	const {
+		elements: { root, range, thumb },
+		states: { value },
+	} = createSlider({
+		defaultValue: [20, 80],
+		max: 100,
+	});
+</script>
+
+<span {...$root} use:$root.action class="relative flex h-[20px] w-[200px] items-center">
+	<span class="block h-[3px] w-full bg-black/40">
+		<span {...$range} use:$range.action class="h-[3px] bg-white" />
+	</span>
+
+	{#each $value as { id }, i}
+		{@const itemId = id}
+		{@const itemId2 = id}
+		{@const __MELTUI_BUILDER_0__ = $item(itemId)}
+		<span
+			{...__MELTUI_BUILDER_0__} use:__MELTUI_BUILDER_0__.action
+			class="block h-5 w-5 rounded-full bg-white focus:ring-4 focus:ring-black/40"
+		/>
+	{/each}
+</span>
+`;
diff --git a/tests/each_block/index.test.ts b/tests/each_block/index.test.ts
index 97b06ff..d093a4f 100644
--- a/tests/each_block/index.test.ts
+++ b/tests/each_block/index.test.ts
@@ -78,11 +78,19 @@ describe('Each Block', () => {
 		expect(processed?.code).toBe(t.nestedEachBothExpected);
 	});
 
-	test('each block with no reference to the context', async () => {
+	test('with no reference to the context', async () => {
 		const processed = await markup({
 			content: t.thumbEach,
 		});
 
 		expect(processed?.code).toBe(t.thumbEachExpected);
 	});
+
+	test('with existing const declaration', async () => {
+		const processed = await markup({
+			content: t.existingConst,
+		});
+
+		expect(processed?.code).toBe(t.existingConstExpected);
+	});
 });