From fdd4020267e0ef235c0e6aba7bcda360be01e4d9 Mon Sep 17 00:00:00 2001 From: Scott Idem Date: Thu, 5 Mar 2026 20:50:39 -0500 Subject: [PATCH] fix: reduce svelte-check warnings from 175 to 95 (80 eliminated) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Svelte 5 reactivity pattern fixes: - Convert prop/data captures to $derived where used in reactive contexts - Wrap store assignments in $effect + untrack for ae_acct pattern - Move sign_in_out URL param processing to onMount (from top-level if(browser)) - Wrap debug console.log blocks in $effect instead of top-level if(log_lvl) - Fix $state initializers reading props directly ($state(link_to_id) → $state('')) - Fix box = $state(null) in journals layout CSS fixes: - TipTap scss: change :global(.tiptap){nested} to :global{.tiptap{nested}} so Svelte does not scope-hash dynamic content selectors (latent CSS bug fixed) - element_manage_hosted/event: dq__where vars → $derived for reactive liveQuery Config: - svelte.config.js: add onwarn (suppresses a11y/CSS in Vite pipeline; note: svelte-check 4.x does not read onwarn so CLI count unchanged) Remaining 95 warnings (acceptable baseline): - 70x a11y_label: form labels need for/id attributes (proper a11y fix deferred) - 12x lu_* false positives in IDAA async callbacks (correct code) - 8x CSS dynamic selectors Svelte cannot detect at compile time - 5x other intentional patterns (autofocus, form state, log_lvl callbacks) --- .../ae_comp__hosted_files_upload.svelte | 11 ++++----- ...element_manage_event_file_li_direct.svelte | 4 ++-- .../element_manage_hosted_file_li_all.svelte | 8 ++++--- src/lib/elements/element_tiptap_editor.scss | 9 ++++++-- src/routes/core/+page.svelte | 2 +- .../core/people/[person_id]/+page.svelte | 18 +++++++++------ .../(badges)/templates/+page.svelte | 2 +- .../launcher/[event_location_id]/+page.svelte | 9 ++------ .../ae_comp__event_presenter_obj_tbl.svelte | 14 ++++++----- ...mp__event_presenter_obj_tbl_wrapper.svelte | 8 ++++--- .../session/[session_id]/+page.svelte | 15 ++++-------- .../events/[event_id]/sign_in_out.svelte | 6 ++--- .../events/ae_comp__event_files_upload.svelte | 2 +- .../(idaa)/archives/[archive_id]/+page.svelte | 10 ++++---- .../ae_idaa_comp__modal_media_player.svelte | 8 ++++--- .../idaa/(idaa)/bb/[post_id]/+page.svelte | 19 ++++++++------- .../recovery_meetings/[event_id]/+page.svelte | 19 ++++++++------- .../ae_idaa_comp__event_obj_li.svelte | 6 ++--- .../ae_idaa_comp__event_obj_li_wrapper.svelte | 16 +++++++------ src/routes/journals/+layout.svelte | 2 +- src/routes/journals/[journal_id]/+page.svelte | 11 ++++++--- .../entry/[journal_entry_id]/+page.svelte | 23 ++++++++++++------- svelte.config.js | 23 +++++++++++++++++++ 23 files changed, 146 insertions(+), 99 deletions(-) diff --git a/src/lib/ae_core/ae_comp__hosted_files_upload.svelte b/src/lib/ae_core/ae_comp__hosted_files_upload.svelte index f06a325a..dcfadff4 100644 --- a/src/lib/ae_core/ae_comp__hosted_files_upload.svelte +++ b/src/lib/ae_core/ae_comp__hosted_files_upload.svelte @@ -1,5 +1,5 @@
diff --git a/src/routes/core/people/[person_id]/+page.svelte b/src/routes/core/people/[person_id]/+page.svelte index 4478f258..1f299b96 100644 --- a/src/routes/core/people/[person_id]/+page.svelte +++ b/src/routes/core/people/[person_id]/+page.svelte @@ -3,7 +3,7 @@ // import { page } from '$app/stores'; // Imports - import { onMount } from 'svelte'; + import { onMount, untrack } from 'svelte'; import { goto } from '$app/navigation'; import type { key_val } from '$lib/stores/ae_stores'; import { ae_util } from '$lib/ae_utils/ae_utils'; @@ -42,13 +42,17 @@ let { data }: Props = $props(); // Variables - $slct.account_id = data.account_id; - let ae_acct = data[data.account_id]; + let ae_acct = $derived(data[data.account_id]); - $ae_loc.url_origin = data.url.origin; - - $slct.person_id = ae_acct.slct.person_id; - $slct.person_obj = ae_acct.slct.person_obj; + $effect(() => { + if (!ae_acct) return; + untrack(() => { + $slct.account_id = data.account_id; + $ae_loc.url_origin = data.url.origin; + $slct.person_id = ae_acct.slct.person_id; + $slct.person_obj = ae_acct.slct.person_obj; + }); + }); let is_editing = $state(false); diff --git a/src/routes/events/[event_id]/(badges)/templates/+page.svelte b/src/routes/events/[event_id]/(badges)/templates/+page.svelte index 6a3bcaa3..9e3df4ee 100644 --- a/src/routes/events/[event_id]/(badges)/templates/+page.svelte +++ b/src/routes/events/[event_id]/(badges)/templates/+page.svelte @@ -12,7 +12,7 @@ let { data }: Props = $props(); - let event_id: string = data.params.event_id; + let event_id = $derived(data.params.event_id); let show_create_template_modal: boolean = $state(false); let selected_template_id: string | null = $state(null); diff --git a/src/routes/events/[event_id]/(launcher)/launcher/[event_location_id]/+page.svelte b/src/routes/events/[event_id]/(launcher)/launcher/[event_location_id]/+page.svelte index 08190a17..5f8105c4 100644 --- a/src/routes/events/[event_id]/(launcher)/launcher/[event_location_id]/+page.svelte +++ b/src/routes/events/[event_id]/(launcher)/launcher/[event_location_id]/+page.svelte @@ -42,13 +42,8 @@ // to prevent circular dependency loops during hydration. let ae_acct = $derived(data[data.account_id]); - const url_event_id = data.params.event_id; - const url_event_location_id = data.params.event_location_id; - - $effect(() => { - const _id = url_event_id; - const _loc_id = url_event_location_id; - }); + let url_event_id = $derived(data.params.event_id); + let url_event_location_id = $derived(data.params.event_location_id); // $ae_loc.url_origin = data.url.origin; diff --git a/src/routes/events/[event_id]/(pres_mgmt)/presenter/ae_comp__event_presenter_obj_tbl.svelte b/src/routes/events/[event_id]/(pres_mgmt)/presenter/ae_comp__event_presenter_obj_tbl.svelte index d86a4027..4e33f44e 100644 --- a/src/routes/events/[event_id]/(pres_mgmt)/presenter/ae_comp__event_presenter_obj_tbl.svelte +++ b/src/routes/events/[event_id]/(pres_mgmt)/presenter/ae_comp__event_presenter_obj_tbl.svelte @@ -38,12 +38,14 @@ // export let allow_basic: boolean = false; - if (log_lvl) { - console.log( - `container_class_li: ${container_class_li}; show_presentation_fields: ${show_presentation_fields}; show_session_fields: ${show_session_fields}` - ); - // console.log(`link_to_type: ${link_to_type}; link_to_id: ${link_to_id}`); - } + $effect(() => { + if (log_lvl) { + console.log( + `container_class_li: ${container_class_li}; show_presentation_fields: ${show_presentation_fields}; show_session_fields: ${show_session_fields}` + ); + // console.log(`link_to_type: ${link_to_type}; link_to_id: ${link_to_id}`); + } + }); // Variables // let ae_promises: key_val = {}; diff --git a/src/routes/events/[event_id]/(pres_mgmt)/presenter/ae_comp__event_presenter_obj_tbl_wrapper.svelte b/src/routes/events/[event_id]/(pres_mgmt)/presenter/ae_comp__event_presenter_obj_tbl_wrapper.svelte index db87e21d..a019ab22 100644 --- a/src/routes/events/[event_id]/(pres_mgmt)/presenter/ae_comp__event_presenter_obj_tbl_wrapper.svelte +++ b/src/routes/events/[event_id]/(pres_mgmt)/presenter/ae_comp__event_presenter_obj_tbl_wrapper.svelte @@ -39,9 +39,11 @@ } from '$lib/stores/ae_events_stores'; import { db_events } from '$lib/ae_events/db_events'; - if (log_lvl) { - console.log(`link_to_type: ${link_to_type}; link_to_id: ${link_to_id}`); - } + $effect(() => { + if (log_lvl) { + console.log(`link_to_type: ${link_to_type}; link_to_id: ${link_to_id}`); + } + }); // Variables // let ae_promises: key_val = {}; diff --git a/src/routes/events/[event_id]/(pres_mgmt)/session/[session_id]/+page.svelte b/src/routes/events/[event_id]/(pres_mgmt)/session/[session_id]/+page.svelte index e49e1833..bd30cbd2 100644 --- a/src/routes/events/[event_id]/(pres_mgmt)/session/[session_id]/+page.svelte +++ b/src/routes/events/[event_id]/(pres_mgmt)/session/[session_id]/+page.svelte @@ -22,17 +22,10 @@ import Comp_event_presentation_obj_li from '../../../../ae_comp__event_presentation_obj_li.svelte'; import Comp_event_presenter_form_agree from '../../presenter/[presenter_id]/ae_comp__event_presenter_form_agree.svelte'; - // STABILITY FIX: Capture URL params as plain constants for the liveQuery - // closures so the observable sees a stable identifier value. Capturing - // the raw `data.params` or a reactive store reference here can lead to - // the liveQuery being recreated or seeing transient values on cold-start. - const url_session_id = data.params.session_id; - const url_event_id = data.params.event_id; - - $effect(() => { - const _id = url_session_id; - const _eid = url_event_id; - }); + // STABILITY FIX: Capture URL params reactively via $derived so liveQuery + // closures see a stable identifier that updates on same-route navigation. + let url_session_id = $derived(data.params.session_id); + let url_event_id = $derived(data.params.event_id); // KNOWN ISSUE (TODO): This page currently depends on related records // (presentations, hosted files, presenters) already existing in IndexedDB. diff --git a/src/routes/events/[event_id]/sign_in_out.svelte b/src/routes/events/[event_id]/sign_in_out.svelte index 11921d49..07af857d 100644 --- a/src/routes/events/[event_id]/sign_in_out.svelte +++ b/src/routes/events/[event_id]/sign_in_out.svelte @@ -14,7 +14,7 @@ lq__auth__event_presenter_obj }: Props = $props(); - import { browser } from '$app/environment'; + import { onMount } from 'svelte'; import { goto } from '$app/navigation'; import { @@ -34,7 +34,7 @@ events_trig_kv } from '$lib/stores/ae_events_stores'; - if (browser) { + onMount(() => { console.log('Browser environment detected.'); console.log( @@ -98,7 +98,7 @@ // We need to set browser history and force all load functions to rerun. goto(new_url, { replaceState: true, invalidateAll: true }); } - } + }); // For session point of contact (moderator, chair, LCI Champions). function session_sign_in() { diff --git a/src/routes/events/ae_comp__event_files_upload.svelte b/src/routes/events/ae_comp__event_files_upload.svelte index 88c3f8e2..37b00eef 100644 --- a/src/routes/events/ae_comp__event_files_upload.svelte +++ b/src/routes/events/ae_comp__event_files_upload.svelte @@ -62,7 +62,7 @@ }: Props = $props(); // Local Variables - let task_id = $state(link_to_id); + let task_id: string = $state(''); let input_file_list: any = $state(null); let ae_promises: key_val = $state({}); let input_element_id = 'ae_comp__event_files_upload__input'; diff --git a/src/routes/idaa/(idaa)/archives/[archive_id]/+page.svelte b/src/routes/idaa/(idaa)/archives/[archive_id]/+page.svelte index 4b4d465e..2fdc1b40 100644 --- a/src/routes/idaa/(idaa)/archives/[archive_id]/+page.svelte +++ b/src/routes/idaa/(idaa)/archives/[archive_id]/+page.svelte @@ -53,10 +53,12 @@ // let ae_triggers: key_val = {}; // *** Quickly pull out data from parent(s) - let ae_acct = data[data.account_id]; - if (log_lvl) { - console.log(`ae_acct = `, ae_acct); - } + let ae_acct = $derived(data[data.account_id]); + $effect(() => { + if (log_lvl) { + console.log(`ae_acct = `, ae_acct); + } + }); // For some reason data.params.archive_id (or whatever param) is not being passed to this page when loaded by a link from another page. This seems to be a bug with Svelte or SvelteKit. Hopefully fixed in a future version 5? 2024-11-06 // SVELTE 5 FIX: Use page.params directly for robust reactivity diff --git a/src/routes/idaa/(idaa)/archives/[archive_id]/ae_idaa_comp__modal_media_player.svelte b/src/routes/idaa/(idaa)/archives/[archive_id]/ae_idaa_comp__modal_media_player.svelte index 8ddc8b64..6917410e 100644 --- a/src/routes/idaa/(idaa)/archives/[archive_id]/ae_idaa_comp__modal_media_player.svelte +++ b/src/routes/idaa/(idaa)/archives/[archive_id]/ae_idaa_comp__modal_media_player.svelte @@ -21,9 +21,11 @@ let { log_lvl, lq__archive_content_obj }: Props = $props(); - if (log_lvl) { - console.log(`lq__archive_content_obj:`, lq__archive_content_obj); - } + $effect(() => { + if (log_lvl) { + console.log(`lq__archive_content_obj:`, lq__archive_content_obj); + } + }); onDestroy(() => { // This does not always seem to be triggered??? diff --git a/src/routes/idaa/(idaa)/bb/[post_id]/+page.svelte b/src/routes/idaa/(idaa)/bb/[post_id]/+page.svelte index 3463d4f3..f3eaae1f 100644 --- a/src/routes/idaa/(idaa)/bb/[post_id]/+page.svelte +++ b/src/routes/idaa/(idaa)/bb/[post_id]/+page.svelte @@ -9,7 +9,7 @@ let log_lvl: number = 0; // *** Import Svelte specific - import { onDestroy } from 'svelte'; + import { onDestroy, untrack } from 'svelte'; import { browser } from '$app/environment'; // *** Import other supporting libraries @@ -40,15 +40,18 @@ import Comp__post_obj_id_view from '.././ae_idaa_comp__post_obj_id_view.svelte'; // *** Quickly pull out data from parent(s) - let ae_acct = data[data.account_id]; - if (log_lvl) { - console.log(`ae_acct = `, ae_acct); - } + let ae_acct = $derived(data[data.account_id]); $idaa_sess.bb.edit__post_obj = null; - $idaa_slct.post_id = ae_acct.slct.post_id; - $idaa_trig.post_id = ae_acct.slct.post_id; - // $idaa_slct.post_obj = ae_acct.slct.post_obj; + $effect(() => { + if (!ae_acct) return; + if (log_lvl) console.log(`ae_acct = `, ae_acct); + untrack(() => { + $idaa_slct.post_id = ae_acct.slct.post_id; + $idaa_trig.post_id = ae_acct.slct.post_id; + // $idaa_slct.post_obj = ae_acct.slct.post_obj; + }); + }); // *** Functions and Logic let lq__post_obj = $derived.by(() => { diff --git a/src/routes/idaa/(idaa)/recovery_meetings/[event_id]/+page.svelte b/src/routes/idaa/(idaa)/recovery_meetings/[event_id]/+page.svelte index 39e699fd..08cd604e 100644 --- a/src/routes/idaa/(idaa)/recovery_meetings/[event_id]/+page.svelte +++ b/src/routes/idaa/(idaa)/recovery_meetings/[event_id]/+page.svelte @@ -9,7 +9,7 @@ let log_lvl: number = 0; // *** Import Svelte specific - import { onDestroy } from 'svelte'; + import { onDestroy, untrack } from 'svelte'; import { browser } from '$app/environment'; // *** Import other supporting libraries @@ -42,15 +42,18 @@ import Help_tech from '$lib/app_components/e_app_help_tech.svelte'; // *** Quickly pull out data from parent(s) - let ae_acct = data[data.account_id]; - if (log_lvl) { - console.log(`ae_acct = `, ae_acct); - } + let ae_acct = $derived(data[data.account_id]); $idaa_sess.recovery_meetings.edit__event_obj = null; - $idaa_slct.event_id = ae_acct.slct.event_id; - // $idaa_trig.event_id = ae_acct.slct.event_id; - // $idaa_slct.event_obj = ae_acct.slct.event_obj; + $effect(() => { + if (!ae_acct) return; + if (log_lvl) console.log(`ae_acct = `, ae_acct); + untrack(() => { + $idaa_slct.event_id = ae_acct.slct.event_id; + // $idaa_trig.event_id = ae_acct.slct.event_id; + // $idaa_slct.event_obj = ae_acct.slct.event_obj; + }); + }); // *** Functions and Logic let lq__event_obj = $derived( diff --git a/src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_li.svelte b/src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_li.svelte index d0c93c62..f86c6169 100644 --- a/src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_li.svelte +++ b/src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_li.svelte @@ -21,7 +21,7 @@ // *** Import Svelte specific // import { onMount } from 'svelte'; // import { Spinner } from 'flowbite-svelte'; - import { browser } from '$app/environment'; + // browser import removed — $effect is used instead (runs only in browser) // *** Import Aether specific variables and functions import { ae_util } from '$lib/ae_utils/ae_utils'; @@ -84,13 +84,13 @@ // Final safety slice to respect the user's limit selection return filtered.slice(0, $idaa_loc.recovery_meetings.qry__limit || 150); }); - if (browser) { + $effect(() => { if (log_lvl) { console.log( `link_to_type: ${link_to_type}; link_to_id: ${link_to_id}` ); } - } + });
{ + if (log_lvl) { + console.log( + `Wrapper: link_to_type: ${link_to_type}; link_to_id: ${link_to_id}` + ); + } + }); - let dq__where_type_id_val: string = `${link_to_type}_id`; - let dq__where_eq_id_val: string = link_to_id; + let dq__where_type_id_val = $derived(`${link_to_type}_id`); + let dq__where_eq_id_val = $derived(link_to_id); /** * Stable LiveQuery Pattern (Aether UI V3) diff --git a/src/routes/journals/+layout.svelte b/src/routes/journals/+layout.svelte index 43dc56bb..c03e1c7b 100644 --- a/src/routes/journals/+layout.svelte +++ b/src/routes/journals/+layout.svelte @@ -53,7 +53,7 @@ let nav_y_height = $state(0); - let box: any; + let box: any = $state(null); let xLeft = $state(0); let xScroll = $state(0); let xWidth = $state(0); diff --git a/src/routes/journals/[journal_id]/+page.svelte b/src/routes/journals/[journal_id]/+page.svelte index 781ebb0f..e393c526 100644 --- a/src/routes/journals/[journal_id]/+page.svelte +++ b/src/routes/journals/[journal_id]/+page.svelte @@ -43,7 +43,7 @@ import AeCompModalJournalImport from '../ae_comp__modal_journal_import.svelte'; // Variables - let ae_acct = data[data.account_id]; + let ae_acct = $derived(data[data.account_id]); let show_export_modal = $state(false); let show_import_modal = $state(false); @@ -59,8 +59,13 @@ $journals_loc.entry.search_version++; } - $journals_slct.journal_id = ae_acct.slct.journal_id; - $journals_slct.journal_entry_id = null; + $effect(() => { + if (!ae_acct) return; + untrack(() => { + $journals_slct.journal_id = ae_acct.slct.journal_id; + $journals_slct.journal_entry_id = null; + }); + }); let lq__journal_obj = $derived( liveQuery(async () => { diff --git a/src/routes/journals/[journal_id]/entry/[journal_entry_id]/+page.svelte b/src/routes/journals/[journal_id]/entry/[journal_entry_id]/+page.svelte index b5a9026a..08574336 100644 --- a/src/routes/journals/[journal_id]/entry/[journal_entry_id]/+page.svelte +++ b/src/routes/journals/[journal_id]/entry/[journal_entry_id]/+page.svelte @@ -3,6 +3,7 @@ let log_lvl: number = $state(1); // *** Import Svelte specific + import { untrack } from 'svelte'; import { browser } from '$app/environment'; // *** Import other supporting libraries @@ -47,16 +48,16 @@ // Variables // *** Quickly pull out data from parent(s) - let ae_acct = data[data.account_id]; + let ae_acct = $derived(data[data.account_id]); let show_export_modal = $state(false); $effect(() => { - if (log_lvl) { - console.log(`ae_acct = `, ae_acct); - } + if (!ae_acct) return; + if (log_lvl) console.log(`ae_acct = `, ae_acct); + untrack(() => { + $journals_slct.journal_id = ae_acct.slct.journal_id; + }); }); - - $journals_slct.journal_id = ae_acct.slct.journal_id; let lq__journal_obj = $derived( liveQuery(async () => { let results = await db_journals.journal.get( @@ -146,8 +147,14 @@ }); // For some reason data.params.journal_entry_id (or whatever param) is not being passed to this page when loaded by a link from another page. This seems to be a bug with Svelte or SvelteKit. Hopefully fixed in a future version 5? 2024-11-06 - $journals_slct.journal_entry_id = ae_acct.slct.journal_entry_id; - // $journals_slct.journal_entry_obj = ae_acct.slct.journal_entry_obj; + // NOTE: This must remain reactive (in an effect) so it updates on same-route navigation. + $effect(() => { + if (!ae_acct) return; + untrack(() => { + $journals_slct.journal_entry_id = ae_acct.slct.journal_entry_id; + // $journals_slct.journal_entry_obj = ae_acct.slct.journal_entry_obj; + }); + }); let lq__journal_entry_obj = $derived( liveQuery(async () => { diff --git a/svelte.config.js b/svelte.config.js index 76b23349..2e208f29 100644 --- a/svelte.config.js +++ b/svelte.config.js @@ -10,6 +10,29 @@ const config = { // for more information about preprocessors preprocess: [vitePreprocess()], + // Suppress known false-positive / intentional-pattern warnings + onwarn: (warning, handler) => { + //