fix: clear build warnings across svelte components
Resolves 16 vite-plugin-svelte warnings: state_referenced_locally (wrap prop reads in untrack), two a11y issues (ConfirmDialog tabindex + key handler, meal entry role/list), and nine unused CSS selectors. Bump to 1.40.2.
This commit is contained in:
+1
-1
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "homepage",
|
||||
"version": "1.40.1",
|
||||
"version": "1.40.2",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
|
||||
@@ -14,7 +14,14 @@
|
||||
|
||||
{#if dialog.open}
|
||||
<div class="confirm-backdrop" onclick={() => dialog.respond(false)} role="presentation">
|
||||
<div class="confirm-dialog" onclick={(e) => e.stopPropagation()} role="alertdialog" aria-modal="true">
|
||||
<div
|
||||
class="confirm-dialog"
|
||||
onclick={(e) => e.stopPropagation()}
|
||||
onkeydown={(e) => e.stopPropagation()}
|
||||
role="alertdialog"
|
||||
aria-modal="true"
|
||||
tabindex="-1"
|
||||
>
|
||||
{#if dialog.title}
|
||||
<h3 class="confirm-title">{dialog.title}</h3>
|
||||
{/if}
|
||||
|
||||
@@ -337,7 +337,7 @@
|
||||
}
|
||||
|
||||
// Recreate chart when lang changes
|
||||
let prevLang = lang;
|
||||
let prevLang = untrack(() => lang);
|
||||
$effect(() => {
|
||||
const currentLang = lang;
|
||||
if (currentLang !== prevLang) {
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<script>
|
||||
import { page } from '$app/stores';
|
||||
import { browser } from '$app/environment';
|
||||
import { untrack } from 'svelte';
|
||||
import { Heart, ExternalLink, ScanBarcode, X } from '@lucide/svelte';
|
||||
import { detectFitnessLang, fitnessSlugs, t } from '$lib/js/fitnessI18n';
|
||||
import MacroBreakdown from './MacroBreakdown.svelte';
|
||||
@@ -35,7 +36,7 @@
|
||||
|
||||
// --- Search state ---
|
||||
let query = $state('');
|
||||
let results = $state(initialResults ?? []);
|
||||
let results = $state(untrack(() => initialResults ?? []));
|
||||
let loading = $state(false);
|
||||
let timeout = $state(null);
|
||||
const isPrefilledMode = $derived(initialResults != null);
|
||||
|
||||
@@ -1372,14 +1372,6 @@
|
||||
font-weight: 600;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
.add-row input {
|
||||
padding: 0.4rem 0.5rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
background: var(--color-bg-tertiary);
|
||||
color: var(--color-text-primary);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.add-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
|
||||
@@ -441,6 +441,7 @@
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.hero-ing-grams {
|
||||
|
||||
@@ -12,6 +12,7 @@ import { confirm } from '$lib/js/confirmDialog.svelte'
|
||||
import { do_on_key } from '$lib/components/recipes/do_on_key.js'
|
||||
import { portions } from '$lib/js/portions_store.js'
|
||||
import BaseRecipeSelector from '$lib/components/recipes/BaseRecipeSelector.svelte'
|
||||
import { untrack } from 'svelte'
|
||||
|
||||
let {
|
||||
lang = 'de' as 'de' | 'en',
|
||||
@@ -25,9 +26,9 @@ let {
|
||||
useStore?: boolean,
|
||||
}>();
|
||||
|
||||
let portions_local = $state<string | undefined>(portionsProp)
|
||||
let portions_local = $state<string | undefined>(untrack(() => portionsProp))
|
||||
|
||||
if (useStore) {
|
||||
if (untrack(() => useStore)) {
|
||||
portions.subscribe((p: any) => {
|
||||
portions_local = p
|
||||
});
|
||||
|
||||
@@ -672,8 +672,7 @@ ol li::marker{
|
||||
.info-value:focus{
|
||||
border-bottom-color: var(--color-border);
|
||||
}
|
||||
.info-value:empty::before,
|
||||
.info-value span:empty::before{
|
||||
.info-value:empty::before{
|
||||
content: attr(data-placeholder);
|
||||
color: var(--color-text-tertiary);
|
||||
font-style: italic;
|
||||
|
||||
@@ -423,7 +423,6 @@
|
||||
color: var(--color-text-secondary, #666);
|
||||
}
|
||||
.field input[type="text"],
|
||||
.field input[type="date"],
|
||||
.field input[type="number"],
|
||||
.field textarea,
|
||||
.field select {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script>
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
import { onMount, onDestroy, untrack } from 'svelte';
|
||||
import { getShoppingSync } from '$lib/js/shoppingSync.svelte';
|
||||
import { SHOPPING_CATEGORIES } from '$lib/data/shoppingCategoryItems';
|
||||
import { Plus, ListX, Apple, Beef, Milk, Croissant, Wheat, FlameKindling, GlassWater, Candy, Snowflake, SprayCan, Sparkles, Package, Search, Store } from '@lucide/svelte';
|
||||
@@ -21,9 +21,11 @@
|
||||
const sync = getShoppingSync();
|
||||
|
||||
// Seed sync state immediately so SSR can render the list
|
||||
if (data.initialList) {
|
||||
sync.seed(data.initialList, data.shareToken);
|
||||
}
|
||||
untrack(() => {
|
||||
if (data.initialList) {
|
||||
sync.seed(data.initialList, data.shareToken);
|
||||
}
|
||||
});
|
||||
|
||||
const lang = $derived(detectCospendLang($page.url.pathname));
|
||||
const loc = $derived(locale(lang));
|
||||
|
||||
@@ -789,9 +789,6 @@
|
||||
.section-toggle:hover {
|
||||
background: var(--color-surface-hover, var(--color-bg-elevated));
|
||||
}
|
||||
.section-toggle + .section-toggle {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.section-toggle-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -1156,9 +1153,4 @@
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.stat-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
-4
@@ -350,10 +350,6 @@
|
||||
.stat-delta.down { color: var(--green); }
|
||||
.stat-delta.flat { color: var(--color-text-tertiary); }
|
||||
|
||||
.chart-wrap {
|
||||
/* FitnessChart has its own card styling */
|
||||
}
|
||||
|
||||
.empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@@ -1771,7 +1771,7 @@
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="meal-entries">
|
||||
<div class="meal-entries" role="list">
|
||||
{#each mealEntries as entry}
|
||||
{@const imgUrl = entry.source === 'recipe' && entry.sourceId ? recipeImages[entry.sourceId] : null}
|
||||
<div
|
||||
@@ -1779,6 +1779,7 @@
|
||||
class:has-image={!!imgUrl}
|
||||
class:dragging={draggingEntryId === entry._id}
|
||||
draggable={editingEntryId !== entry._id}
|
||||
role="listitem"
|
||||
ondragstart={(ev) => onEntryDragStart(ev, entry._id)}
|
||||
ondragend={onEntryDragEnd}
|
||||
>
|
||||
@@ -2308,11 +2309,6 @@
|
||||
text-transform: uppercase;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
.macro-bar-goal {
|
||||
font-weight: 400;
|
||||
opacity: 0.7;
|
||||
text-transform: none;
|
||||
}
|
||||
.macro-bar-track {
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
@@ -2409,15 +2405,6 @@
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
/* Macro rings (custom meal detail + food detail) */
|
||||
.ring-text {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
fill: currentColor;
|
||||
text-anchor: middle;
|
||||
dominant-baseline: central;
|
||||
}
|
||||
|
||||
/* ── Micro Details ── */
|
||||
.micro-inline {
|
||||
margin-top: 0.75rem;
|
||||
@@ -3669,14 +3656,6 @@
|
||||
font-size: 0.72rem;
|
||||
color: var(--color-text-tertiary);
|
||||
}
|
||||
.custom-meal-info[role="button"] {
|
||||
cursor: pointer;
|
||||
border-radius: 6px;
|
||||
transition: background 0.12s;
|
||||
}
|
||||
.custom-meal-info[role="button"]:hover {
|
||||
background: var(--color-bg-elevated);
|
||||
}
|
||||
/* Custom meal detail screen */
|
||||
.cm-detail {
|
||||
padding: 0.75rem;
|
||||
@@ -3780,10 +3759,6 @@
|
||||
.cm-detail-btn-confirm:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
.btn-sm {
|
||||
padding: 0.3rem 0.65rem;
|
||||
font-size: 0.72rem;
|
||||
}
|
||||
.manage-meals-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
Reference in New Issue
Block a user