feat(cli): Add @sveltejs/enhanced-img addon

.changeset/swift-camels-crash.md

@@ -0,0 +1,5 @@
+---
+"sv": patch
+---
+
+feat(cli): Add `@sveltejs/enhanced-img` as a new official addon

packages/sv/api-surface-testing.md

@@ -9,6 +9,7 @@ type OfficialAddons = {
 	vitest: Addon<any>;
 	playwright: Addon<any>;
 	tailwindcss: Addon<any>;
+	enhancedImg: Addon<any>;
 	sveltekitAdapter: Addon<any>;
 	drizzle: Addon<any>;
 	betterAuth: Addon<any>;

packages/sv/api-surface.md

@@ -20,6 +20,7 @@ type OfficialAddons = {
 	vitest: Addon<any>;
 	playwright: Addon<any>;
 	tailwindcss: Addon<any>;
+	enhancedImg: Addon<any>;
 	sveltekitAdapter: Addon<any>;
 	drizzle: Addon<any>;
 	betterAuth: Addon<any>;

packages/sv/src/addons/enhanced-img.ts

@@ -0,0 +1,28 @@
+import { color, pnpm, transforms } from '@sveltejs/sv-utils';
+import { defineAddon } from '../core/config.ts';
+
+export default defineAddon({
+	id: 'enhanced-img',
+	shortDescription: 'image optimization',
+	homepage: 'https://svelte.dev/docs/kit/images',
+	options: {},
+	run: ({ sv, file }) => {
+		sv.devDependency('@sveltejs/enhanced-img', '^0.11.0');
+		pnpm.allowBuilds('sharp');
+
+		sv.file(
+			file.viteConfig,
+			transforms.script(({ ast, js }) => {
+				js.imports.addNamed(ast, {
+					imports: ['enhancedImages'],
+					from: '@sveltejs/enhanced-img'
+				});
+				js.vite.addPlugin(ast, { code: 'enhancedImages()', mode: 'prepend' });
+			})
+		);
+	},
+	nextSteps: () => [
+		`Replace ${color.command('`<image ...>`')} with ${color.command('`<enhanced:img ...>`')} for optimized images`,
+		`Docs: ${color.website('https://svelte.dev/docs/kit/images')}`
+	]
+});

packages/sv/src/addons/index.ts

@@ -2,6 +2,7 @@ import type { Addon, AddonDefinition } from '../core/config.ts';
 import aiTools from './ai-tools.ts';
 import betterAuth from './better-auth.ts';
 import drizzle from './drizzle.ts';
+import enhancedImg from './enhanced-img.ts';
 import eslint from './eslint.ts';
 import experimental from './experimental.ts';
 import mdsvex from './mdsvex.ts';
@@ -19,6 +20,7 @@ type OfficialAddons = {
 	vitest: Addon<any>;
 	playwright: Addon<any>;
 	tailwindcss: Addon<any>;
+	enhancedImg: Addon<any>;
 	sveltekitAdapter: Addon<any>;
 	drizzle: Addon<any>;
 	betterAuth: Addon<any>;
@@ -37,6 +39,7 @@ export const officialAddons: OfficialAddons = {
 	vitest,
 	playwright,
 	tailwindcss,
+	enhancedImg,
 	sveltekitAdapter,
 	drizzle,
 	betterAuth,

packages/sv/src/cli/create.ts

@@ -5,8 +5,14 @@ import * as p from '@clack/prompts';
 import { color, loadPackageJson, resolveCommandArray } from '@sveltejs/sv-utils';
 import { Command, Option } from 'commander';
 import * as v from 'valibot';
+import { getAddonDetails } from '../addons/index.ts';
 import * as common from '../core/common.ts';
-import type { LoadedAddon, OptionValues, SetupResult } from '../core/config.ts';
+import {
+	createLoadedAddon,
+	type LoadedAddon,
+	type OptionValues,
+	type SetupResult
+} from '../core/config.ts';
 import { formatFiles } from '../core/formatFiles.ts';
 import {
 	AGENT_NAMES,
@@ -329,6 +335,12 @@ export async function createProject(cwd: ProjectPath, options: Options) {
 		answers = result.answers;
 	}
 
+	if (template === 'demo' && !loadedAddons.some((a) => a.addon.id === 'enhanced-img')) {
+		const addon = getAddonDetails('enhanced-img');
+		loadedAddons.push(createLoadedAddon(addon));
+		answers['enhanced-img'] = {};
+	}
+
 	createKit({
 		cwd: projectPath,
 		name: projectName,

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

@@ -1,6 +1,4 @@
 <script lang="ts">
-	import welcomeFallback from '#lib/images/svelte-welcome.png';
-	import welcome from '#lib/images/svelte-welcome.webp';
 	import Counter from './Counter.svelte';
 </script>
 
@@ -12,10 +10,7 @@
 <section>
 	<h1>
 		<span class="welcome">
-			<picture>
-				<source srcset={welcome} type="image/webp" />
-				<img src={welcomeFallback} alt="Welcome" />
-			</picture>
+			<enhanced:img src="#lib/images/svelte-welcome.png" alt="Welcome" />
 		</span>
 
 		to your new<br />SvelteKit app
@@ -49,7 +44,7 @@
 		padding: 0 0 calc(100% * 495 / 2048) 0;
 	}
 
-	.welcome img {
+	.welcome enhanced\:img {
 		position: absolute;
 		width: 100%;
 		height: 100%;

packages/sv/src/create/tests/check.ts

@@ -3,9 +3,8 @@ import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { exec, type Result } from 'tinyexec';
 import { beforeAll, describe, expect, test } from 'vitest';
-import { add, officialAddons } from '../../../../sv/src/index.ts';
 import { createProject } from '../../cli/create.ts';
-import { type LanguageType, type TemplateType, create } from '../index.ts';
+import { type LanguageType, type TemplateType } from '../index.ts';
 
 // Resolve the given path relative to the current file
 const resolve_path = (path: string) => fileURLToPath(new URL(path, import.meta.url));
@@ -67,8 +66,16 @@ for (const template of templates.filter((t) => t !== 'addon')) {
 				});
 			});
 		} else {
-			create({ cwd, name: `create-svelte-test-${template}-${types}`, template, types });
-			await add({ cwd, addons: { eslint: officialAddons.eslint }, options: { eslint: {} } });
+			await createProject(cwd, {
+				types,
+				addOns: true,
+				add: ['eslint'],
+				install: false,
+				template,
+				fromPlayground: undefined,
+				dirCheck: false,
+				downloadCheck: false
+			});
 		}
 
 		const pkg = JSON.parse(fs.readFileSync(path.join(cwd, 'package.json'), 'utf-8'));