Enhanced ImageをラップしたImage.svelteを作る

package.json

@@ -25,7 +25,7 @@
 		"@ryoppippi/vite-plugin-cloudflare-redirect": "npm:@jsr/ryoppippi__vite-plugin-cloudflare-redirect@^1.0.2",
 		"@std/collections": "npm:@jsr/std__collections@^1.0.5",
 		"@sveltejs/adapter-static": "^3.0.4",
-		"@sveltejs/enhanced-img": "^0.3.4",
+		"@sveltejs/enhanced-img": "^0.3.8",
 		"@sveltejs/kit": "^2.5.26",
 		"@sveltejs/vite-plugin-svelte": "4.0.0-next.7",
 		"@types/node": "^20.16.5",
@@ -39,11 +39,10 @@
 		"p-retry": "^6.2.0",
 		"renovate": "^38.68.0",
 		"std-env": "^3.7.0",
-		"svelte": "5.0.0-next.223",
+		"svelte": "5.0.0-next.257",
 		"svelte-check": "^4.0.0",
 		"svelte-eslint-parser": "^0.41.0",
 		"svelte-preprocess-budoux": "^1.0.2",
-		"sveltekit-html-minifier": "^1.0.3",
 		"sveltweet": "^0.2.6",
 		"tslib": "^2.7.0",
 		"typescript": "^5.5.4",

src/lib/Image.svelte

@@ -0,0 +1,53 @@
+<script lang='ts'>
+	type EnhancedImg = typeof import('*.png?enhanced').default;
+
+	type Props = {
+		src: string;
+		alt: string;
+	} & { [key: string]: unknown };
+
+	const { src, alt, ...rest }: Props = $props();
+
+	function importImage(src: string): EnhancedImg | undefined {
+		const pictures = import.meta.glob(`/src/**/*.{gif,heif,jpeg,jpg,png,tiff,webp}`, {
+			import: 'default',
+			query: {
+				enhanced: true,
+				w: '2400;2000;1600;1200;800;400',
+			},
+			eager: true,
+		});
+
+		for (const [path, picutureSrc] of Object.entries(pictures)) {
+			if (path.includes(src) || src.includes(path)) {
+				return picutureSrc as EnhancedImg;
+			}
+		}
+		return undefined;
+	}
+</script>
+
+{#snippet img(src: string)}
+	<img
+		{alt}
+		loading='lazy'
+		{src}
+		{...rest}
+	/>
+{/snippet}
+
+{#if src.startsWith('http')}
+	{@render img(src)}
+{:else}
+	{@const enhancedSrc = importImage(src)}
+	{#if enhancedSrc != null}
+		<enhanced:img
+			{alt}
+			loading='lazy'
+			src={enhancedSrc}
+			{...rest}
+		/>
+	{:else}
+		{@render img(src)}
+	{/if}
+{/if}

src/lib/Konami/Konami.svelte.ts

@@ -44,8 +44,7 @@ export class Konami {
 			return;
 		}
 
-		on(window, 'keyup', (_event) => {
-			const { key } = _event as KeyboardEvent;
+		on(window, 'keyup', ({ key }) => {
 			const now = Date.now();
 
 			/** 有効なキーが入力されていない場合はコンボをリセット */

src/lib/Logo/AmazonMusic.svelte

@@ -1,12 +1,11 @@
 <script lang='ts'>
 	import { LINKS } from '../links';
 	import Base from './_Base.svelte';
-	// @ts-ignore
-	import icon from '$/assets/logos/icon-amazon-music.png?enhanced&w=300;600;800';
 
 	const { ...rest } = $props();
 
 	const { label: alt, url: link } = LINKS.AmazonMusic;
+	const icon = '/src/assets/logos/icon-amazon-music.png';
 </script>
 
 <Base {alt} {icon} {link} {...rest} />

src/lib/Logo/ApplePodcast.svelte

@@ -1,12 +1,11 @@
 <script lang='ts'>
 	import { LINKS } from '../links';
 	import Base from './_Base.svelte';
-	// @ts-ignore
-	import icon from '$/assets/logos/icon-apple-podcast.png?enhanced&w=300;600;800';
 
 	const { ...rest } = $props();
 
 	const { label: alt, url: link } = LINKS.ApplePodcast;
+	const icon = '/src/assets/logos/icon-apple-podcast.png';
 </script>
 
 <Base {alt} {icon} {link} {...rest} />

src/lib/Logo/AuDee.svelte

@@ -1,5 +1,5 @@
 <script lang='ts'>
-	import icon from '$/assets/logos/logo-audee.svg';
+	import icon from '$/assets/logos/logo-audee.svg?url';
 	import { LINKS } from '../links';
 	import Base from './_Base.svelte';
 

src/lib/Logo/GitHub.svelte

@@ -1,11 +1,10 @@
 <script lang='ts'>
 	import Base from './_Base.svelte';
-	// @ts-ignore
-	import icon from '$/assets/logos/icon-github.png?enhanced&w=300;600;800';
 
 	const { ...rest } = $props();
 
 	const alt = `github`;
+	const icon = '/src/assets/logos/icon-github.png';
 </script>
 
 <Base {alt} {icon} {...rest} />

src/lib/Logo/Home.svelte

@@ -1,11 +1,10 @@
 <script lang='ts'>
 	import Base from './_Base.svelte';
-	// @ts-ignore
-	import icon from '$/assets/logos/icon-home.png?enhanced&w=300;600;800';
 
 	const { ...rest } = $props();
 
 	const alt = `Home icon`;
+	const icon = '/src/assets/logos/icon-home.png';
 </script>
 
 <Base {alt} {icon} {...rest} />

src/lib/Logo/Spotify.svelte

@@ -1,12 +1,11 @@
 <script lang='ts'>
 	import { LINKS } from '../links';
 	import Base from './_Base.svelte';
-	// @ts-ignore
-	import icon from '$/assets/logos/icon-spotify.png?enhanced&w=300;600;800';
 
 	const { ...rest } = $props();
 
 	const { label: alt, url: link } = LINKS.Spotify;
+	const icon = '/src/assets/logos/icon-spotify.png';
 </script>
 
 <Base {alt} {icon} {link} {...rest} />

src/lib/Logo/Suzuri.svelte

@@ -1,12 +1,11 @@
 <script lang='ts'>
 	import { LINKS } from '../links';
 	import Base from './_Base.svelte';
-	// @ts-ignore
-	import icon from '$/assets/logos/logo-surisurikun.png?enhanced&w=300;600;800';
 
 	const { ...rest } = $props();
 
 	const { label: alt, url: link } = LINKS.Suzuri;
+	const icon = '/src/assets/logos/logo-surisurikun.png';
 </script>
 
 <Base {alt} {icon} {link} {...rest} />

src/lib/Logo/VimJpRadio.svelte

@@ -4,10 +4,8 @@
 	import { LINKS } from '../links';
 	import Base from './_Base.svelte';
 
-	// @ts-ignore
-	import icon from '$/assets/vimjp-radio-cover-art/3000x3000-alpha-fs8.png?enhanced&w=200;400;600;800;1000;1200;1600;2000;2400;3000';
-
 	const { label: alt } = LINKS.VimJpRadio;
+	const icon = '/src/assets/vimjp-radio-cover-art/3000x3000-alpha-fs8.png';
 </script>
 
 <Base {alt} {icon} {...rest} />

src/lib/Logo/X.svelte

@@ -2,14 +2,13 @@
 	import type { ComponentProps } from 'svelte';
 	import { LINKS } from '../links';
 	import Base from './_Base.svelte';
-	// @ts-ignore
-	import icon from '$/assets/logos/logo-x.png?enhanced&w=300;600;800';
 
 	const { ...rest }: Omit<ComponentProps<Base>, 'icon'> = $props();
 
 	const { label: alt, url } = LINKS.X;
 
 	const link = rest.link ?? url;
+	const icon = '/src/assets/logos/logo-x.png';
 </script>
 
 <Base {alt} {icon} {link} {...rest} />

src/lib/Logo/YouTube.svelte

@@ -1,12 +1,11 @@
 <script lang='ts'>
 	import { LINKS } from '../links';
 	import Base from './_Base.svelte';
-	// @ts-ignore
-	import icon from '$/assets/logos/icon-youtube.png?enhanced&w=300;600;800';
 
 	const { ...rest } = $props();
 
 	const { label: alt, url: link } = LINKS.Youtube;
+	const icon = '/src/assets/logos/icon-youtube.png';
 </script>
 
 <Base {alt} {icon} {link} {...rest} />

src/lib/Logo/_Base.svelte

@@ -1,36 +1,22 @@
 <script lang='ts'>
-	import type dummyEnhanced from '*?enhanced';
 	import type { HTMLImgAttributes } from 'svelte/elements';
+	import Image from '../Image.svelte';
 	import { ensureURL } from '../utils/url';
 
-	type Picture = typeof dummyEnhanced;
-
-	const { link, icon, alt, class: className, ...rest }: { link?: string; icon: string | Picture } & Omit<HTMLImgAttributes, 'src'> = $props();
+	const { link, icon, alt, class: className, ...rest }: { link?: string; icon: string } & Omit<HTMLImgAttributes, 'src'> = $props();
 
 	const _defaultClassName = `h-full object-scale-down w-auto`;
 	const _className = className ?? _defaultClassName;
 	const loading: typeof rest.loading = 'loading' in rest ? rest.loading : `lazy`;
-
 </script>
 {#snippet image()}
-{#if typeof icon === 'string' && icon.endsWith('.svg')}
-<!-- svg image -->
-<img
-	class={_className}
-	{alt}
-	{loading}
-	src={icon}
-	{...rest}
-/>
-{:else}
-	<enhanced:img
+	<Image
 		class={_className}
-		{alt}
+		alt={alt as string}
 		{loading}
 		src={icon}
 		{...rest}
 	/>
-  {/if}
 {/snippet}
 
 {#if link != null}

src/lib/utils/runes.svelte.ts

@@ -28,8 +28,7 @@ export class PrefersReducedMotion {
 
 		this.#mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
 		this.#isReduced = this.#mediaQuery.matches;
-		on(this.#mediaQuery, 'change', (_event) => {
-			const event = _event as MediaQueryListEvent;
+		on(this.#mediaQuery, 'change', (event) => {
 			this.#isReduced = event.matches;
 		});
 	}

src/routes/+error.svelte

@@ -2,6 +2,7 @@
 	import { Konami } from '$/lib/Konami';
 	import { dev } from '$app/environment';
 	import { page } from '$app/stores';
+	import Image from '$lib/Image.svelte';
 
 	const konami = new Konami(2000);
 
@@ -19,11 +20,11 @@
 		uno-place='content-center items-center'
 	>
 		<!-- EASTER_EGG🐰🥚: Konamiコマンドが認識されると、`konami.activated`が`true`になり、`animate-spin`が適用されます。 -->
-		<enhanced:img
-			class:animate-spin={konami.activated}
+		<Image
+			class={konami.activated && 'animate-spin'}
 			alt='error logo'
 			loading='lazy'
-			src='$/assets/alisue/beer.png'
+			src='/src/assets/alisue/beer.png'
 		/>
 		<span uno-text>
 			{$page.error.message}

src/routes/Personalities.svelte

@@ -1,7 +1,4 @@
 <script lang='ts'>
-	import lambdalisueImg from '$/assets/avatar/lambdalisue.png?enhanced';
-	import tomoyaImg from '$/assets/avatar/tomoya.jpg?enhanced';
-
 	import { Heading } from '$/lib/Heading';
 	import Personality from './Personality.svelte';
 </script>
@@ -13,7 +10,7 @@
 			name='tomoya'
 			ghLink='https://github.com/tomoya'
 			homeLink='https://blog.tomoya.dev/'
-			imgSrc={tomoyaImg}
+			imgSrc='/src/assets/avatar/tomoya.jpg'
 			xLink='https://x.com/tomoyaton'
 		>
 			<!-- 文字列を渡すだけだとBudouXが処理できない（コードにあるtagをpreprocessしなければならない都合）ので、pタグで囲む -->
@@ -28,7 +25,7 @@
 		<Personality
 			name='ありすえ'
 			ghLink='https://github.com/lambdalisue'
-			imgSrc={lambdalisueImg}
+			imgSrc='/src/assets/avatar/lambdalisue.png'
 			xLink='https://twitter.com/lambdalisue'
 		>
 			<!-- 文字列を渡すだけだとBudouXが処理できない（コードにあるtagをpreprocessしなければならない都合）ので、pタグで囲む -->

src/routes/Personality.svelte

@@ -1,10 +1,8 @@
 <script lang='ts'>
-	import type dummyEnhanced from '*?enhanced';
 	import type { Snippet } from 'svelte';
+	import Image from '$lib/Image.svelte';
 	import * as Logo from '$lib/Logo';
 
-	type Picture = typeof dummyEnhanced;
-
 	const {
 		name,
 		imgSrc,
@@ -14,7 +12,7 @@
 		homeLink,
 	}: {
 		name: string;
-		imgSrc: Picture;
+		imgSrc: string;
 		children: Snippet<[]>;
 		xLink?: string;
 		ghLink?: string;
@@ -59,10 +57,9 @@
 
 	<div>
 		<!-- プロフ画像 -->
-		<enhanced:img
+		<Image
 			class='float-right ml-10px h-auto w-100px'
 			alt={name}
-			loading='lazy'
 			src={imgSrc}
 		/>
 

svelte.config.js

@@ -4,7 +4,6 @@ import adapter from '@sveltejs/adapter-static';
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 import { isDevelopment } from 'std-env';
 import { budouxPreprocess } from 'svelte-preprocess-budoux';
-import htmlMinifierAdaptor from 'sveltekit-html-minifier';
 
 /** @param {...string} args */
 function relativePath(...args) {
@@ -33,11 +32,9 @@ const config = {
 		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
 		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
 		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
-		adapter: htmlMinifierAdaptor(
-			adapter({
-				fallback: '404.html',
-			}),
-		),
+		adapter: adapter({
+			fallback: '404.html',
+		}),
 
 		typescript: {
 			config(config) {

vite.config.ts

@@ -18,6 +18,9 @@ function relativePath(...args: string[]): string {
 const background = theme.colors.LP.backgroud;
 
 export default defineConfig({
+	build: {
+		minify: false,
+	},
 	plugins: [
 		/* favicon と metadata の設定 */
 		faviconsPlugin({