feat(cli): wrap links with resolve() (#754)

* feat(cli): wrap links with `resolve()`

* let's just add a linting step to our create flavors

* adding `resolve()` also to demo pages

* fix typo :)

Author: jycouet

.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/addons/common.ts

@@ -63,18 +63,22 @@ export function addEslintConfigPrettier(content: string): string {
 	return generateCode();
 }
 
-export function addToDemoPage(content: string, path: string): string {
-	const { template, generateCode } = parseSvelte(content);
+export function addToDemoPage(existingContent: string, path: string, typescript: boolean): string {
+	const { script, template, generateCode } = parseSvelte(existingContent, { typescript });
 
 	for (const node of template.ast.childNodes) {
-		if (node.type === 'tag' && node.attribs['href'] === `/demo/${path}`) {
-			return content;
+		// we use includes as it could be "/demo/${path}" or "resolve("demo/${path}")" or "resolve('demo/${path}')"
+		if (node.type === 'tag' && node.attribs['href'].includes(`/demo/${path}`)) {
+			return existingContent;
 		}
 	}
 
-	const newLine = template.source ? '\n' : '';
-	const src = template.source + `${newLine}<a href="/demo/${path}">${path}</a>`;
-	return generateCode({ template: src });
+	imports.addNamed(script.ast, { imports: ['resolve'], from: '$app/paths' });
+
+	return generateCode({
+		script: script.generateCode(),
+		template: `<a href={resolve('/demo/${path}')}>${path}</a>\n${template.source}`
+	});
 }
 
 /**

packages/addons/lucia/index.ts

@@ -396,7 +396,7 @@ export default defineAddon({
 
 		if (options.demo) {
 			sv.file(`${kit?.routesDirectory}/demo/+page.svelte`, (content) => {
-				return addToDemoPage(content, 'lucia');
+				return addToDemoPage(content, 'lucia', typescript);
 			});
 
 			sv.file(`${kit!.routesDirectory}/demo/lucia/login/+page.server.${ext}`, (content) => {

packages/addons/paraglide/index.ts

@@ -178,7 +178,7 @@ export default defineAddon({
 
 		if (options.demo) {
 			sv.file(`${kit.routesDirectory}/demo/+page.svelte`, (content) => {
-				return addToDemoPage(content, 'paraglide');
+				return addToDemoPage(content, 'paraglide', typescript);
 			});
 
 			// add usage example

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, expect, 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
 		);