wineater-bot 4.16.0 → 4.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wineater-bot",
-  "version": "4.16.0",
+  "version": "4.19.0",
   "description": "",
   "main": "dist/wineater-chatbot.mjs",
   "module": "src/index.js",
@@ -22,15 +22,13 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@openreplay/tracker": "^14.0.4",
-    "flagsmith": "^7.0.2",
-    "vite": "^5.2.9",
     "svelte": "^5.0.0"
   },
   "devDependencies": {
     "@eslint/compat": "^1.4.0",
     "@eslint/js": "^9.36.0",
     "@playwright/test": "^1.55.1",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
     "@types/node": "^22",
     "@vitest/browser": "^3.2.4",
     "eslint": "^9.36.0",
@@ -42,9 +40,9 @@
     "prettier-plugin-svelte": "^3.4.0",
     "rollup-plugin-postcss": "^4.0.2",
     "typescript-eslint": "^8.44.1",
+    "vite": "^5.2.9",
     "vite-plugin-devtools-json": "^1.0.0",
     "vitest": "^3.2.4",
-    "vitest-browser-svelte": "^1.1.0",
-    "@sveltejs/vite-plugin-svelte": "^4.0.0"
+    "vitest-browser-svelte": "^1.1.0"
   }
 }

package/src/App.svelte

@@ -1,19 +1,19 @@
 <script lang="ts">
 	import { setCookie, setUniqueUserCookie, trackWidgetEvent } from './services/analytics/analytics';
-	import Tracker from '@openreplay/tracker';
 	import type { RecommendedWine, Wine, WineId } from './services/api/api';
-	import { wineaterApi, apiVersion } from './services/api/api';
+	import { wineaterApi, apiVersion, cacheScope } from './services/api/api';
+	import { readCache, writeCache } from './services/cache';
 	import { onMount } from 'svelte';
 	import { WIDGET_EVENTS } from './services/analytics/constants';
 	import Header from './components/Header.svelte';
 	import Footer from './components/Footer.svelte';
 	import Search from './components/Search.svelte';
-	import Loader from './components/Loader.svelte';
+	import SkeletonTiles from './components/SkeletonTiles.svelte';
 	import WineTile from './components/WineTile.svelte';
 	import Action from './components/ui/Action.svelte';
 	import { appStore } from './services/store/app-store.svelte';
 	import { getTranslation, translateTexts } from './services/i18n/i18n';
-	import { generateInlineStyle } from './services/ui-config/utils';
+	import { generateInlineStyle, preconnectFontHosts } from './services/ui-config/utils';
 
 	function initCookies() {
 		setCookie('chatbotToken', window.wineaterData?.CLIENT_TOKEN || DEMO_TOKEN, 365);
@@ -21,15 +21,20 @@
 	}
 
 	const DEMO_TOKEN = 'HeUw6IXuhvz6tRuXdPEGEbj3SGQ3Q2YtEc1Z8jd41Kg9LtyPb4Epu0to31SYIadG';
-	const tracker = new Tracker({ projectKey: 'PA8j9fAi49i6g2QnvpNs', __DISABLE_SECURE_MODE: true });
-	tracker.start();
 	initCookies();
+	preconnectFontHosts();
+
+	const INSTANT_CACHE_MAX_AGE_MS = 6 * 60 * 60 * 1000;
+	const instantCacheKey = `${cacheScope}:instant`;
 
 	const widgetType = window?.wineaterData?.WIDGET_TYPE || 'store';
 	const countryCode = window?.wineaterData?.COUNTRY_CODE || null;
 	const widgetWrapper = window?.wineaterData?.WIDGET_WRAPPER || 'wineater-widget-conteiner';
 
 	let initialized = $state(false);
+	let configFailed = $state(false);
+	// Set once the user searches/clicks, so a late instant response never overwrites their results
+	let userActed = false;
 	let isLoading = $state(false);
 	let isLoadingMore = $state(false);
 	let results = $state<RecommendedWine[] | Wine[]>([]);
@@ -103,15 +108,30 @@
 		return translatedResults;
 	}
 
-	async function loadInstantRecommendations() {
-		isLoading = true;
+	// Stale-while-revalidate: cached wines are painted immediately and the fresh
+	// response only refreshes the cache for the next visit, so the grid the
+	// visitor is already looking at never swaps under their cursor.
+	async function loadInstantRecommendations(configReady: Promise<void>) {
+		const cached = readCache<Wine[]>(instantCacheKey, INSTANT_CACHE_MAX_AGE_MS);
+		const hasCached = !!cached?.length;
+		if (hasCached) {
+			results = cached;
+		} else {
+			isLoading = true;
+		}
 		try {
-			results = await wineaterApi.getInstantRecommendations();
+			const fresh = await wineaterApi.getInstantRecommendations();
+			if (fresh.length > 0) writeCache(instantCacheKey, fresh);
+			if (!hasCached && !userActed) results = fresh;
 		} catch (error) {
 			console.error('[wineater] instant recommendations error:', error);
-			setSearchError();
+			if (!hasCached && !userActed) {
+				// the message is translated, which needs the store language
+				await configReady;
+				setSearchError();
+			}
 		} finally {
-			isLoading = false;
+			if (!userActed) isLoading = false;
 		}
 	}
 
@@ -128,12 +148,27 @@
 
 	async function handleSearch(event) {
 		event.preventDefault();
+		userActed = true;
 
 		let query = '';
 		try {
 			isLoading = true;
 			clearError();
 
+			query = searchQuery.trim() + ';';
+			lastSearchedQuery = query;
+			try {
+				trackWidgetEvent(WIDGET_EVENTS.SEARCH_PERFORMED, storeId, { query });
+			} catch (error) {
+				console.error('Error tracking search event:', error);
+			}
+
+			// Запрос уходит сразу, карточки уезжают вверх, пока он в полёте.
+			// Пустой catch нужен, чтобы отказ запроса во время анимации не стал
+			// unhandled rejection: ошибку обработает await ниже.
+			const request = wineaterApi.getWineRecommendationsSearch(query);
+			request.catch(() => {});
+
 			// шаг 1: плавно поднять карточки
 			await animateClearAll(220);
 
@@ -143,15 +178,7 @@
 			hasMore = false;
 			seenIds = [];
 
-			query = searchQuery.trim() + ';';
-			lastSearchedQuery = query;
-			try {
-				trackWidgetEvent(WIDGET_EVENTS.SEARCH_PERFORMED, storeId, { query });
-			} catch (error) {
-				console.error('Error tracking search event:', error);
-			}
-
-			const searchResults = await wineaterApi.getWineRecommendationsSearch(query);
+			const searchResults = await request;
 
 			if (!searchResults || searchResults.length === 0) {
 				results = [];
@@ -186,6 +213,7 @@
 
 	async function handleShowMore() {
 		if (isLoadingMore || !hasMore) return;
+		userActed = true;
 		// Выдача заменяется целиком, поэтому держим предыдущую под рукой: если
 		// новых вин не нашлось или запрос упал, покупатель не должен остаться
 		// перед пустой сеткой.
@@ -198,15 +226,15 @@
 			// показанное за сессию — иначе следующий клик вернёт те же вина.
 			seenIds = [...new Set([...seenIds, ...results.map((w) => w.id)])];
 
-			// Тот же жест, что и при поиске: карточки уезжают вверх, дальше лоадер
+			// Тот же жест, что и при поиске: запрос уходит сразу, карточки уезжают
+			// вверх, дальше скелетон
+			const request = wineaterApi.getMoreWineRecommendations(lastSearchedQuery, seenIds);
+			request.catch(() => {});
 			await animateClearAll(220);
 			results = [];
 			isAnimating = false;
 
-			const { recommendations, hasMore: more } = await wineaterApi.getMoreWineRecommendations(
-				lastSearchedQuery,
-				seenIds
-			);
+			const { recommendations, hasMore: more } = await request;
 			trackWidgetEvent(WIDGET_EVENTS.SHOW_MORE_CLICKED, storeId, {
 				query: lastSearchedQuery,
 				results_count: recommendations.length
@@ -224,6 +252,7 @@
 	}
 
 	async function handleSimilarClick(wine: Wine | RecommendedWine) {
+		userActed = true;
 		try {
 			isLoading = true;
 			clearError();
@@ -232,13 +261,15 @@
 				wine_title: wine.title
 			});
 
+			const request = wineaterApi.getSimilarWines(wine.id);
+			request.catch(() => {});
 			await animateClearAll(220);
 			results = [];
 			isAnimating = false;
 			hasMore = false;
 			selectedWineId = null;
 
-			const similarWines = await wineaterApi.getSimilarWines(wine.id);
+			const similarWines = await request;
 			searchQuery = wine.title;
 			lastSearchedQuery = '';
 
@@ -358,22 +389,29 @@
 		}
 	});
 
-	onMount(async () => {
-		// initialize store first
-		await appStore.initializeStore();
-		if (!isStoreInitialized) return;
+	onMount(() => {
+		// Close popups on outside click
+		document.addEventListener('click', handleClickOutside);
 
-		uiConfig = appStore.getUiConfig();
-		if (uiConfig.customCss) {
-			generateInlineStyle(uiConfig.customCss);
-		}
+		(async () => {
+			// Config and the first wines do not depend on each other (the token is
+			// known up front), so both requests start together.
+			const configReady = appStore.initializeStore();
+			loadInstantRecommendations(configReady);
 
-		await loadInstantRecommendations();
-		trackWidgetEvent(WIDGET_EVENTS.WIDGET_INITIALIZED, storeId);
-		initialized = true;
+			await configReady;
+			if (!isStoreInitialized) {
+				configFailed = true;
+				return;
+			}
 
-		// Add global click listener for closing popups
-		document.addEventListener('click', handleClickOutside);
+			if (uiConfig.customCss) {
+				generateInlineStyle(uiConfig.customCss);
+			}
+
+			initialized = true;
+			trackWidgetEvent(WIDGET_EVENTS.WIDGET_INITIALIZED, storeId);
+		})();
 
 		return () => {
 			document.removeEventListener('click', handleClickOutside);
@@ -394,10 +432,6 @@
 
 		<Search bind:searchQuery onSubmit={handleSearch} {initialized} />
 
-		{#if isLoading}
-			<Loader />
-		{/if}
-
 		<div class="wr-App-content">
 			{#if errorMessage}
 				<div class="wr-App-error">
@@ -430,11 +464,19 @@
 						</Action>
 					</div>
 				{/if}
+			{:else if isLoading}
+				<SkeletonTiles />
 			{/if}
 		</div>
 
 		<Footer {countryCode} />
 	</div>
+{:else if !configFailed}
+	<!-- Shell with the same footprint as the widget while the store config loads -->
+	<div class="wr-App wr-App--loading" aria-busy="true">
+		<div class="wr-App-loadingTop"></div>
+		<SkeletonTiles />
+	</div>
 {/if}
 
 <style>
@@ -474,6 +516,11 @@
 		position: relative;
 	}
 
+	.wr-App-loadingTop {
+		/* roughly the height of Header + Search, so tiles do not jump once they render */
+		height: 150px;
+	}
+
 	.wr-App-picture {
 		display: flex;
 		justify-content: center;

package/src/components/Footer.svelte

@@ -37,6 +37,8 @@
 					? 'https://czvgkhagwvmknscoerfy.supabase.co/storage/v1/object/public/static-media/divino_logo.svg?x=5'
 					: 'https://czvgkhagwvmknscoerfy.supabase.co/storage/v1/object/public/static-media/logo_medium_gray.svg'}
 				alt="Wineater Logo"
+				loading="lazy"
+				decoding="async"
 			/>
 			<span class="wr-Footer-text wr-Footer-text--sommelier">
 				{getTranslation({ key: 'ai_sommelier', lang: appLanguage })}

package/src/components/Search.svelte

@@ -138,7 +138,7 @@
 		width: 24px;
 		height: 24px;
 		flex: 0 0 auto;
-		background-image: url('https://czvgkhagwvmknscoerfy.supabase.co/storage/v1/object/public/static-media//search.svg?x=1');
+		background-image: url("data:image/svg+xml,%3Csvg%20width=%2224%22%20height=%2225%22%20viewBox=%220%200%2024%2025%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d=%22M11%2019.3884C15.4183%2019.3884%2019%2015.8067%2019%2011.3884C19%206.97015%2015.4183%203.38843%2011%203.38843C6.58172%203.38843%203%206.97015%203%2011.3884C3%2015.8067%206.58172%2019.3884%2011%2019.3884Z%22%20stroke=%22%238250D2%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3Cpath%20d=%22M21%2021.3884L16.7%2017.0884%22%20stroke=%22%238250D2%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3C/svg%3E");
 		background-repeat: no-repeat;
 		background-size: contain;
 		z-index: 2;

package/src/components/SkeletonTiles.svelte

@@ -0,0 +1,94 @@
+<!-- Placeholder cards that match the WineTile layout so the grid does not jump when real data arrives -->
+<div class="wr-Skeleton" aria-hidden="true">
+	{#each [0, 1, 2, 3] as n (n)}
+		<div class="wr-Skeleton-tile">
+			<div class="wr-Skeleton-block wr-Skeleton-image"></div>
+			<div class="wr-Skeleton-block wr-Skeleton-price"></div>
+			<div class="wr-Skeleton-block wr-Skeleton-title"></div>
+			<div class="wr-Skeleton-block wr-Skeleton-title wr-Skeleton-title--short"></div>
+			<div class="wr-Skeleton-block wr-Skeleton-button"></div>
+		</div>
+	{/each}
+</div>
+
+<style>
+	.wr-Skeleton {
+		display: grid;
+		grid-template-columns: repeat(4, 1fr);
+	}
+
+	.wr-Skeleton-tile {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 10px;
+		padding: 16px 8px;
+		border-right: 2px solid #f6f7fd;
+	}
+
+	.wr-Skeleton-tile:last-child {
+		border-right: none;
+	}
+
+	.wr-Skeleton-block {
+		border-radius: 6px;
+		background: linear-gradient(90deg, #f1f2f8 25%, #f8f9fc 50%, #f1f2f8 75%);
+		background-size: 200% 100%;
+		animation: wr-shimmer 1.2s linear infinite;
+	}
+
+	.wr-Skeleton-image {
+		width: 60%;
+		height: 200px;
+		margin-bottom: 6px;
+	}
+
+	.wr-Skeleton-price {
+		width: 40px;
+		height: 16px;
+	}
+
+	.wr-Skeleton-title {
+		width: 80%;
+		height: 14px;
+	}
+
+	.wr-Skeleton-title--short {
+		width: 55%;
+	}
+
+	.wr-Skeleton-button {
+		width: 96px;
+		height: 36px;
+		margin-top: 14px;
+		border-radius: 10px;
+	}
+
+	@keyframes wr-shimmer {
+		from {
+			background-position: 200% 0;
+		}
+		to {
+			background-position: -200% 0;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.wr-Skeleton-block {
+			animation: none;
+		}
+	}
+
+	@media screen and (max-width: 768px) {
+		.wr-Skeleton {
+			display: flex;
+			gap: 8px;
+			overflow: hidden;
+			padding: 8px 0;
+		}
+
+		.wr-Skeleton-tile {
+			flex: 0 0 240px;
+		}
+	}
+</style>

package/src/components/WineTile.svelte

@@ -6,6 +6,9 @@
 	import { appStore } from '../services/store/app-store.svelte';
 	import Action from './ui/Action.svelte';
 
+	// Desktop grid has 4 columns: the first row is above the fold
+	const FIRST_ROW_SIZE = 4;
+
 	let lang = $derived(appStore.getAppLanguage());
 
 	let {
@@ -95,7 +98,14 @@
 >
 	<header class="wr-WineTile-header">
 		{#if wine.image}
-			<img src={wine.image} alt={wine.title} class="wr-WineTile-image" />
+			<img
+					src={wine.image}
+					alt={wine.title}
+					class="wr-WineTile-image"
+					loading={index < FIRST_ROW_SIZE ? 'eager' : 'lazy'}
+					fetchpriority={index < FIRST_ROW_SIZE ? 'high' : 'auto'}
+					decoding="async"
+				/>
 		{/if}
 		{#if wine.total}
 			<div class="wr-WineTile-price">
@@ -109,7 +119,7 @@
 			</div>
 		{/if}
 
-		<h3 class="wr-WineTile-title">{wine.producer ? wine.producer : ''} {wine.title}</h3>
+		<h3 class="wr-WineTile-title">{wine.title}</h3>
 	</header>
 
 	{#if joinParams(wine, ['type', 'country', 'region', 'grape'])}

package/src/services/api/api.ts

@@ -166,4 +166,14 @@ class WineaterApi {
 const DEMO_TOKEN = 'HeUw6IXuhvz6tRuXdPEGEbj3SGQ3Q2YtEc1Z8jd41Kg9LtyPb4Epu0to31SYIadG';
 const token = window?.wineaterData?.CLIENT_TOKEN || DEMO_TOKEN;
 export const apiVersion = String(window?.wineaterData?.apiVersion || '1');
-export const wineaterApi = new WineaterApi(token, apiVersion)
+export const wineaterApi = new WineaterApi(token, apiVersion)
+
+// Namespaces cached responses per client token and API version, so two widgets
+// on one origin (or a token switch) never see each other's data. Not a secret:
+// only a short non-reversible hash of the token ends up in the storage key.
+function hashString(input: string): string {
+    let h = 5381;
+    for (let i = 0; i < input.length; i++) h = ((h << 5) + h + input.charCodeAt(i)) | 0;
+    return (h >>> 0).toString(36);
+}
+export const cacheScope = `${hashString(token)}:${apiVersion}`;

package/src/services/cache.ts

@@ -0,0 +1,28 @@
+// Tiny stale-while-revalidate cache backed by localStorage.
+// Storage can throw or be unavailable (private mode, blocked cookies, embeds),
+// so every access is wrapped and the widget works the same without it.
+
+const PREFIX = 'wineater:v1:';
+
+type Entry<T> = { savedAt: number; value: T };
+
+export function readCache<T>(key: string, maxAgeMs: number): T | null {
+    try {
+        const raw = window.localStorage.getItem(PREFIX + key);
+        if (!raw) return null;
+        const entry = JSON.parse(raw) as Entry<T>;
+        if (Date.now() - entry.savedAt > maxAgeMs) return null;
+        return entry.value;
+    } catch {
+        return null;
+    }
+}
+
+export function writeCache<T>(key: string, value: T): void {
+    try {
+        const entry: Entry<T> = { savedAt: Date.now(), value };
+        window.localStorage.setItem(PREFIX + key, JSON.stringify(entry));
+    } catch {
+        // quota exceeded or storage disabled: caching is best-effort
+    }
+}

package/src/services/store/app-store.svelte.ts

@@ -1,4 +1,5 @@
-import { wineaterApi } from "../api/api";
+import { wineaterApi, cacheScope } from "../api/api";
+import { readCache, writeCache } from "../cache";
 import type { CurrencyCode, LanguageCode } from "../i18n/i18n";
 import type { StoreConfig } from "./types";
 import { deserializeStoreConfig } from "./deserialize";
@@ -12,6 +13,8 @@ export type AppState = {
     uiConfig: ProjectUiConfig;
 };
 
+const STORE_CONFIG_MAX_AGE_MS = 24 * 60 * 60 * 1000;
+
 let state = $state<AppState>({
     storeConfig: null,
     currentLanguage: 'en',
@@ -56,21 +59,41 @@ export const appStore = {
     getCurrency(): CurrencyCode {
         return state.storeConfig?.currency ?? 'USD';
     },
+    applyStoreConfig(config: unknown) {
+        state.storeConfig = deserializeStoreConfig(config as Parameters<typeof deserializeStoreConfig>[0]);
+        state.currentLanguage = state.storeConfig.lang as LanguageCode;
+        const urlLang = this.getLanguageFromURL();
+        if (urlLang && state.storeConfig.available_languages.includes(urlLang)) {
+            this.setStoreLanguage(urlLang);
+        } else {
+            // fallback to store default language
+            this.setStoreLanguage(state.storeConfig.lang as LanguageCode);
+        }
+        this.setUiConfig(getProjectUiConfig(state.storeConfig.id));
+        state.isConfigLoaded = true;
+    },
+    // Stale-while-revalidate: a cached config is applied synchronously (first
+    // paint without waiting for the network) and refreshed in the background
+    // for the next visit. Without a cache we wait for the network as before.
     async initializeStore() {
-        try {
+        const cacheKey = `${cacheScope}:store-config`;
+        const fetchAndCache = async () => {
             const config = await wineaterApi.getStoreConfig();
-            state.storeConfig = deserializeStoreConfig(config);
-            state.currentLanguage = state.storeConfig.lang as LanguageCode;
-            const urlLang = this.getLanguageFromURL();
-            if (urlLang && state.storeConfig.available_languages.includes(urlLang)) {
-                this.setStoreLanguage(urlLang);
-            } else {
-                // fallback to store default language
-                this.setStoreLanguage(state.storeConfig.lang as LanguageCode);
+            writeCache(cacheKey, config);
+            return config;
+        };
+        try {
+            const cached = readCache<unknown>(cacheKey, STORE_CONFIG_MAX_AGE_MS);
+            if (cached) {
+                try {
+                    this.applyStoreConfig(cached);
+                    fetchAndCache().catch(() => {});
+                    return;
+                } catch (error) {
+                    console.warn('Ignoring invalid cached store config:', error);
+                }
             }
-            this.setUiConfig(getProjectUiConfig(state.storeConfig.id));
-
-            state.isConfigLoaded = true;
+            this.applyStoreConfig(await fetchAndCache());
         } catch (error) {
             console.error('Failed to initialize store:', error);
             state.isConfigLoaded = false;

package/src/services/ui-config/utils.ts

@@ -1,12 +1,40 @@
+const IMPORT_RE = /@import\s+url\(\s*['"]?([^'")]+)['"]?\s*\)\s*;?/g;
+
+function addLink(rel: string, href: string, crossOrigin = false) {
+    const link = document.createElement('link');
+    link.rel = rel;
+    link.href = href;
+    if (crossOrigin) link.crossOrigin = 'anonymous';
+    document.head.appendChild(link);
+}
+
+// Opens the connections to the font hosts before the config tells us which
+// font the project uses, so the stylesheet and font file start downloading
+// without a fresh DNS/TLS handshake.
+export function preconnectFontHosts() {
+    if (document.querySelector('link[rel="preconnect"][href="https://fonts.googleapis.com"]')) return;
+    addLink('preconnect', 'https://fonts.googleapis.com');
+    addLink('preconnect', 'https://fonts.gstatic.com', true);
+}
+
 export function generateInlineStyle(cssString: string | null): string {
     if (!cssString) {
         return '';
     }
     const styleId = "custom-ui-config-style";
     if (document.getElementById(styleId)) return;
+
+    // `@import` inside <style> is only discovered after that stylesheet is
+    // parsed, which chains the font download behind it. A <link> is fetched in
+    // parallel with the rest of the page.
+    const css = cssString.replace(IMPORT_RE, (_match, href: string) => {
+        addLink('stylesheet', href);
+        return '';
+    });
+
     const style = document.createElement('style');
     style.id = styleId;
-    style.innerHTML = cssString;
+    style.innerHTML = css;
     document.head.appendChild(style);
     return styleId;
-}
+}

package/vite.config.js

@@ -1,7 +1,26 @@
 import devtoolsJson from 'vite-plugin-devtools-json';
 import { defineConfig } from 'vitest/config';
+import { transformWithEsbuild } from 'vite';
 import { svelte } from '@sveltejs/vite-plugin-svelte';
 
+// Vite skips whitespace minification for `es` library output (to keep tree-shaking
+// annotations for downstream bundlers). The widget is a final artifact loaded by a
+// <script> tag, so minify it ourselves: the unminified ESM bundle was ~40% larger.
+const minifyEsmBundle = {
+	name: 'minify-esm-bundle',
+	apply: 'build',
+	// generateBundle runs after every renderChunk, including Vite's own esbuild
+	// step that re-prints the code with indentation for `es` library builds
+	async generateBundle(options, bundle) {
+		if (options.format !== 'es') return;
+		for (const chunk of Object.values(bundle)) {
+			if (chunk.type !== 'chunk') continue;
+			const result = await transformWithEsbuild(chunk.code, chunk.fileName, { minify: true, target: 'es2020' });
+			chunk.code = result.code;
+		}
+	}
+};
+
 export default defineConfig({
 	server: {
 		port: 3001 // Customize the port if necessary
@@ -57,8 +76,8 @@ export default defineConfig({
 	},
 	plugins: [
 		devtoolsJson(),
+		minifyEsmBundle,
 		svelte({
-			compilerOptions: { hydratable: true },
 			emitCss: false
 		})
 	]