fix: Existing @const tag declarations in the template are now consi…

…dered (#58)

.changeset/fifty-years-joke.md

@@ -0,0 +1,5 @@
+---
+'@melt-ui/pp': patch
+---
+
+fix: Existing `@const` tag declarations in the template are now considered

src/traverse/Block.ts

@@ -87,21 +87,30 @@ 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,
 			startPos: actionNode.start,
 			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

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>
+`;

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);
+	});
 });