fix(paraglide): type and lint errors

.changeset/loud-geese-change.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/sv-utils': patch
+---
+
+fix: `svelte.addFragment` now accept types

.changeset/olive-camels-smoke.md

@@ -0,0 +1,5 @@
+---
+"sv": patch
+---
+
+fix(paraglide): type and lint errors

packages/sv-utils/src/tests/svelte/svelte/common/to-fragment-js-with-script-ts/input.svelte

@@ -0,0 +1,3 @@
+<script lang="ts"></script>
+
+<div><p>This is a Svelte component.</p></div>

packages/sv-utils/src/tests/svelte/svelte/common/to-fragment-js-with-script-ts/output.svelte

@@ -0,0 +1,4 @@
+<script lang="ts"></script>
+
+<div><p>This is a Svelte component.</p></div>
+<span>{1 + 2}</span>

packages/sv-utils/src/tests/svelte/svelte/common/to-fragment-js-with-script-ts/run.ts

@@ -0,0 +1,5 @@
+import { type SvelteAst, svelte } from '../../../../../index.ts';
+
+export function run(ast: SvelteAst.Root): void {
+	svelte.addFragment(ast, '<span>{1 + 2}</span>');
+}

packages/sv-utils/src/tests/svelte/svelte/common/to-fragment-js-with-script/input.svelte

@@ -0,0 +1,3 @@
+<script></script>
+
+<div><p>This is a Svelte component.</p></div>

packages/sv-utils/src/tests/svelte/svelte/common/to-fragment-js-with-script/output.svelte

@@ -0,0 +1,4 @@
+<script></script>
+
+<div><p>This is a Svelte component.</p></div>
+<span>{1 + 2}</span>

packages/sv-utils/src/tests/svelte/svelte/common/to-fragment-js-with-script/run.ts

@@ -0,0 +1,5 @@
+import { type SvelteAst, svelte } from '../../../../../index.ts';
+
+export function run(ast: SvelteAst.Root): void {
+	svelte.addFragment(ast, '<span>{1 + 2}</span>');
+}

packages/sv-utils/src/tests/svelte/svelte/common/to-fragment-ts-with-script-ts/input.svelte

@@ -0,0 +1,3 @@
+<script lang="ts"></script>
+
+<div><p>This is a Svelte component.</p></div>

packages/sv-utils/src/tests/svelte/svelte/common/to-fragment-ts-with-script-ts/output.svelte

@@ -0,0 +1,4 @@
+<script lang="ts"></script>
+
+<div><p>This is a Svelte component.</p></div>
+<span>{1 as number}</span>

packages/sv-utils/src/tests/svelte/svelte/common/to-fragment-ts-with-script-ts/run.ts

@@ -0,0 +1,5 @@
+import { type SvelteAst, svelte } from '../../../../../index.ts';
+
+export function run(ast: SvelteAst.Root): void {
+	svelte.addFragment(ast, '<span>{1 as number}</span>', { language: 'ts' });
+}

packages/sv-utils/src/tests/svelte/svelte/common/to-fragment-ts/input.svelte

@@ -0,0 +1 @@
+<div><p>This is a Svelte component.</p></div>

packages/sv-utils/src/tests/svelte/svelte/common/to-fragment-ts/output.svelte

@@ -0,0 +1,4 @@
+<script lang="ts"></script>
+
+<div><p>This is a Svelte component.</p></div>
+<span>{1 as number}</span>

packages/sv-utils/src/tests/svelte/svelte/common/to-fragment-ts/run.ts

@@ -0,0 +1,5 @@
+import { type SvelteAst, svelte } from '../../../../../index.ts';
+
+export function run(ast: SvelteAst.Root): void {
+	svelte.addFragment(ast, '<span>{1 as number}</span>', { language: 'ts' });
+}

packages/sv-utils/src/tooling/svelte/index.ts

@@ -87,9 +87,13 @@ export function addFragment(
 	content: string,
 	options?: {
 		mode?: 'append' | 'prepend';
+		language?: 'ts' | 'js';
 	}
 ): void {
-	const { ast: fragmentAst } = parseSvelte(content);
+	if (options?.language === 'ts') ensureScript(ast, { language: 'ts' });
+
+	const source = options?.language === 'ts' ? `<script lang="ts"></script>${content}` : content;
+	const { ast: fragmentAst } = parseSvelte(source);
 
 	if (options?.mode === 'prepend') {
 		ast.fragment.nodes.unshift(...fragmentAst.fragment.nodes);

packages/sv/src/addons/paraglide.ts

@@ -1,5 +1,5 @@
 import { log } from '@clack/prompts';
-import { color, type SvelteAst, transforms } from '@sveltejs/sv-utils';
+import { color, createPrinter, dedent, type SvelteAst, transforms } from '@sveltejs/sv-utils';
 import { defineAddon, defineAddonOptions } from '../core/config.ts';
 import { addToDemoPage } from './common.ts';
 
@@ -54,6 +54,7 @@ export default defineAddon({
 		if (!isKit) unsupported('Requires SvelteKit');
 	},
 	run: ({ sv, options, file, language, directory }) => {
+		const [ts] = createPrinter(language === 'ts');
 		const paraglideOutDir = `${directory.lib}/paraglide`;
 
 		sv.devDependency('@inlang/paraglide-js', '^2.10.0');
@@ -196,13 +197,23 @@ export default defineAddon({
 					from: '$lib/paraglide/runtime'
 				});
 				js.imports.addNamed(ast.instance.content, { imports: ['page'], from: '$app/state' });
+				js.imports.addNamed(ast.instance.content, { imports: ['resolve'], from: '$app/paths' });
+				if (language === 'ts') {
+					js.imports.addNamed(ast.instance.content, {
+						imports: ['Pathname'],
+						from: '$app/types',
+						isType: true
+					});
+				}
 				svelte.addFragment(
 					ast,
-					`<div style="display:none">
-	{#each locales as locale}
-		<a href={localizeHref(page.url.pathname, { locale })}>{locale}</a>
-	{/each}
-</div>`
+					dedent`
+						<div style="display:none">
+							{#each locales as locale (locale)}
+								<a href={resolve(localizeHref(page.url.pathname, { locale })${ts(' as Pathname')})}>{locale}</a>
+							{/each}
+						</div>`,
+					{ language }
 				);
 			})
 		);

packages/sv/src/cli/tests/snapshots/create-with-all-addons/src/routes/+layout.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import type { Pathname } from '$app/types';
+	import { resolve } from '$app/paths';
 	import { page } from '$app/state';
 	import { locales, localizeHref } from '$lib/paraglide/runtime';
 	import './layout.css';
@@ -11,7 +13,9 @@
 {@render children()}
 
 <div style="display:none">
-	{#each locales as locale}
-		<a href={localizeHref(page.url.pathname, { locale })}>{locale}</a>
+	{#each locales as locale (locale)}
+		<a
+			href={resolve(localizeHref(page.url.pathname, { locale }) as Pathname)}
+		>{locale}</a>
 	{/each}
 </div>