feat(cli): wrap links with resolve()

.changeset/free-bats-march.md

@@ -0,0 +1,5 @@
+---
+'sv': patch
+---
+
+feat(cli): wrap links with `resolve()` function to follow [best practices](https://svelte.dev/docs/kit/$app-paths#resolve)

packages/create/templates/demo/src/routes/Header.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { resolve } from '$app/paths';
 	import { page } from '$app/state';
 	import logo from '$lib/images/svelte-logo.svg';
 	import github from '$lib/images/github.svg';
@@ -17,13 +18,13 @@
 		</svg>
 		<ul>
 			<li aria-current={page.url.pathname === '/' ? 'page' : undefined}>
-				<a href="/">Home</a>
+				<a href={resolve('/')}>Home</a>
 			</li>
 			<li aria-current={page.url.pathname === '/about' ? 'page' : undefined}>
-				<a href="/about">About</a>
+				<a href={resolve('/about')}>About</a>
 			</li>
 			<li aria-current={page.url.pathname.startsWith('/sverdle') ? 'page' : undefined}>
-				<a href="/sverdle">Sverdle</a>
+				<a href={resolve('/sverdle')}>Sverdle</a>
 			</li>
 		</ul>
 		<svg viewBox="0 0 2 3" aria-hidden="true">

packages/create/templates/demo/src/routes/about/+page.svelte

@@ -1,3 +1,7 @@
+<script lang="ts">
+	import { resolve } from '$app/paths';
+</script>
+
 <svelte:head>
 	<title>About</title>
 	<meta name="description" content="About this app" />
@@ -20,7 +24,7 @@
 	</p>
 
 	<p>
-		The <a href="/sverdle">Sverdle</a> page illustrates SvelteKit's data loading and form handling. Try
-		using it with JavaScript disabled!
+		The <a href={resolve('/sverdle')}>Sverdle</a> page illustrates SvelteKit's data loading and form
+		handling. Try using it with JavaScript disabled!
 	</p>
 </div>

packages/create/templates/demo/src/routes/sverdle/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { enhance } from '$app/forms';
+	import { resolve } from '$app/paths';
 	import { confetti } from '@neoconfetti/svelte';
 	import type { ActionData, PageData } from './$types';
 	import { MediaQuery } from 'svelte/reactivity';
@@ -117,7 +118,7 @@
 		};
 	}}
 >
-	<a class="how-to-play" href="/sverdle/how-to-play">How to play</a>
+	<a class="how-to-play" href={resolve('/sverdle/how-to-play')}>How to play</a>
 
 	<div class="grid" class:playing={!won} class:bad-guess={form?.badGuess}>
 		{#each Array.from(Array(6).keys()) as row (row)}

packages/create/test/check.ts

@@ -5,6 +5,7 @@ import { fileURLToPath } from 'node:url';
 import { exec, type PromiseWithChild } from 'node:child_process';
 import { beforeAll, describe, test } from 'vitest';
 import { create, type LanguageType, type TemplateType } from '../index.ts';
+import { installAddon, officialAddons } from '../../cli/lib/index.ts';
 
 // Resolve the given path relative to the current file
 const resolve_path = (path: string) => fileURLToPath(new URL(path, import.meta.url));
@@ -42,13 +43,13 @@ for (const template of templates) {
 		fs.rmSync(cwd, { recursive: true, force: true });
 
 		create(cwd, { name: `create-svelte-test-${template}-${types}`, template, types });
+		await installAddon({ cwd, addons: { eslint: officialAddons.eslint }, options: { eslint: {} } });
 
 		const pkg = JSON.parse(fs.readFileSync(path.join(cwd, 'package.json'), 'utf-8'));
 
 		// run provided scripts that are non-blocking. All of them should exit with 0
 		// package script requires lib dir
-		// TODO: lint should run before format
-		const scripts_to_test = ['format', 'lint', 'check', 'build', 'package'].filter(
+		const scripts_to_test = ['lint', 'format', 'check', 'build', 'package'].filter(
 			(s) => s in pkg.scripts
 		);