Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: stabilize root layout reactivity and badge template form

Browse Source 
- Fix infinite loops in '+layout.svelte' by using 'untrack' for store synchronization effects.
- Correctly define 'ae_acct' as a derived rune to resolve ReferenceErrors and ensure site styles hydrate properly.
- Modernize 'ae_comp__badge_template_form.svelte' with Svelte 5 Runes and callback props (onsuccess, onerror, oncancel).
- Fix illegal async  in badge form by moving logic to a dedicated load function untracked by the effect.
- Add Presentation Management Reports to TODO list for tracking.
This commit is contained in:
Scott Idem
2026-01-28 15:46:29 -05:00
parent 55773a332d
commit b25d13297e
4 changed files with 3306 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
src/routes/+layout.svelte
View File

@@ -48,19 +48,14 @@
// import { api } from '$lib/api';
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/stores/ae_stores';
import { events_loc, events_slct } from '$lib/stores/ae_events_stores';
// import type { key_val } from '$lib/ae_stores';
import type { LayoutData } from './$types';
import MyClipboard from '$lib/app_components/e_app_clipboard.svelte';
import E_app_debug_menu from '$lib/app_components/e_app_debug_menu.svelte';
import E_app_sys_menu from '$lib/app_components/e_app_sys_menu.svelte';
// import Element_access_type from '$lib/element_access_type.svelte';
// import Element_app_cfg from '$lib/element_app_cfg.svelte';
// import Element_sign_in_out from '$lib/element_sign_in_out.svelte';
// import Element_data_store from '$lib/element_data_store_v2.svelte';
interface Props {
data: any;
data: LayoutData;
children?: import('svelte').Snippet;
}
@@ -70,51 +65,36 @@
console.log(`ae_root +layout.svelte data:`, data);
}
// Quickly save the data passed from the parent(s) to the Svelte stores, localStorage, and other. This should catch anything that is a child of this layout.svelte file.
$slct.account_id = data.account_id;
if (log_lvl) {
console.log(`*ae_root +layout.svelte* $slct.account_id = ${$slct.account_id}`);
}
let ae_acct = data[$slct.account_id];
// Define ae_acct as a derived rune so it's reactive and available globally in the component
let ae_acct = $derived(data.account_id ? (data as any)[data.account_id] : null);
if (ae_acct) {
$ae_api = {
...$ae_api,
...(ae_acct.api || {})
};
if (log_lvl > 1) {
console.log(`$ae_api = `, $ae_api);
}
// Use an effect to sync data to stores whenever it changes
import { untrack } from 'svelte';
$effect(() => {
const account_id = data.account_id;
const acct_data = ae_acct;
// FORCE UPDATE: If the incoming data is a valid site (not a fallback ghost),
// we must ensure the ae_loc store is updated regardless of what's in localStorage.
if (ae_acct.loc?.account_id && ae_acct.loc.account_id !== 'ghost') {
$ae_loc = {
...$ae_loc,
...(ae_acct.loc || {})
};
} else {
// If it IS a ghost, we still update it to show the correct fallback message
$ae_loc = {
...$ae_loc,
...(ae_acct.loc || {})
};
if (account_id) {
untrack(() => {
if ($slct.account_id !== account_id) {
$slct.account_id = account_id;
}
if (acct_data) {
// Merging stores with untracked reads to prevent loops
if (acct_data.api) {
$ae_api = { ...untrack(() => $ae_api), ...acct_data.api };
}
if (acct_data.loc) {
$ae_loc = { ...untrack(() => $ae_loc), ...acct_data.loc };
}
if (acct_data.slct) {
$slct = { ...untrack(() => $slct), ...acct_data.slct };
}
}
});
}
if (log_lvl > 1) {
console.log(`$ae_loc = `, $ae_loc);
}
$slct = {
...$slct,
...(ae_acct.slct || {})
};
if (log_lvl > 1) {
console.log(`$slct = `, $slct);
}
} else {
console.warn('ae_root +layout.svelte: ae_acct not found for account_id:', $slct.account_id);
}
});
let flag_clear_idb: boolean = $state(false);
let flag_clear_local: boolean = $state(false);
@@ -709,13 +689,16 @@
// Sync JWT from local storage to API config for V3 endpoints
$effect(() => {
if ($ae_api.jwt !== $ae_loc.jwt) {
if (log_lvl) console.log('ROOT: Syncing JWT to API config');
$ae_api = {
...$ae_api,
jwt: $ae_loc.jwt
};
}
const loc_jwt = $ae_loc.jwt;
untrack(() => {
if ($ae_api.jwt !== loc_jwt) {
if (log_lvl) console.log('ROOT: Syncing JWT to API config');
$ae_api = {
...$ae_api,
jwt: loc_jwt
};
}
});
});
let is_hydrating = $state(true);
@@ -980,7 +963,7 @@
title="Reload and clear the page cache"
onclick={() => {
clear_idb();
window.location.reload(true);
window.location.reload();
}}
>
<!-- <span class="fas fa-sync mx-1"></span> -->