github/sveltejs-ai-tools
1
0
Fork 0
mirror of https://github.com/sveltejs/ai-tools.git synced 2026-07-03 11:12:28 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: add suggestion for snippets declared in script tag (#132)

Browse Source
This commit is contained in:
Paolo Ricciuti
2026-01-04 12:00:33 +01:00
committed by GitHub
parent d8e4b18bff
commit b2f195fb7b
3 changed files with 28 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/cuddly-lemons-sniff.md Normal file
View File

@@ -0,0 +1,5 @@
---
'@sveltejs/mcp': patch
---
fix: add suggestion for snippets declared in script tag

12
packages/mcp-server/src/mcp/handlers/tools/svelte-autofixer.test.ts
View File

@@ -53,6 +53,18 @@ describe('svelte-autofixer tool', () => {
);
});
it('should add suggestions for snippets declared in script tag', async () => {
const content = await autofixer_tool_call(`<script>
{#snippet my_snippet()}
some content
{/snippet}
</script>`);
expect(content.issues.length).toBeGreaterThan(0);
expect(content.suggestions).toContain(
"The code can't be compiled because a Javascript parse error. The error suggests you have a `{#snippet ...}` block inside the `<script>` tag. Snippets are template syntax and should be declared in the markup section of the component, not in the script. Move the snippet outside of the `<script>` tag. Snippets declared in the markup can also be accessed in the script tag in case you need them.",
);
});
it('should error out if async is true with a version less than 5', async () => {
const content = await autofixer_tool_call(
`<script>

15
packages/mcp-server/src/mcp/handlers/tools/svelte-autofixer.ts
View File

@@ -75,14 +75,21 @@ export async function svelte_autofixer_handler({
await add_eslint_issues(content, code, +desired_svelte_version, filename, async);
} catch (e: unknown) {
const error = e as Error & { start?: { line: number; column: number } };
const error = e as Error & { start?: { line: number; column: number }; frame?: string };
content.issues.push(
`${error.message} at line ${error.start?.line}, column ${error.start?.column}`,
);
if (error.message.includes('js_parse_error')) {
content.suggestions.push(
"The code can't be compiled because a Javascript parse error. In case you are using runes like this `$state variable_name = 3;` or `$derived variable_name = 3 * count` that's not how runes are used. You need to use them as function calls without importing them: `const variable_name = $state(3)` and `const variable_name = $derived(3 * count)`.",
);
// Check if the error frame contains template syntax that was incorrectly placed in the script tag
if (error.frame?.includes('{#snippet')) {
content.suggestions.push(
"The code can't be compiled because a Javascript parse error. The error suggests you have a `{#snippet ...}` block inside the `<script>` tag. Snippets are template syntax and should be declared in the markup section of the component, not in the script. Move the snippet outside of the `<script>` tag. Snippets declared in the markup can also be accessed in the script tag in case you need them.",
);
} else {
content.suggestions.push(
"The code can't be compiled because a Javascript parse error. In case you are using runes like this `$state variable_name = 3;` or `$derived variable_name = 3 * count` that's not how runes are used. You need to use them as function calls without importing them: `const variable_name = $state(3)` and `const variable_name = $derived(3 * count)`.",
);
}
} else if (error.message.includes('css_expected_identifier')) {
content.suggestions.push(
"The code can't be compiled because a valid CSS identifier is expected. This sometimes means you are trying to use a variable in CSS like this: `color: {my_color}` but Svelte doesn't support that. You can use inline CSS variables for that `<div style:--color={my_color}></div>` and then use the variable as usual in CSS with `color: var(--color)`.",