refactor: make Svelte prop lifetimes explicit

package.json

@@ -12,7 +12,7 @@
         "buildDev": "node esbuild.config.mjs dev",
         "lint": "eslint --cache --concurrency auto src",
         "lint:community": "eslint --config eslint.community.config.mjs --concurrency auto src",
-        "svelte-check": "svelte-check --tsconfig ./tsconfig.json",
+        "svelte-check": "svelte-check --tsconfig ./tsconfig.json --fail-on-warnings",
         "tsc-check": "tsc --noEmit",
         "tsc-check:apps": "tsc --noEmit -p src/apps/browser/tsconfig.json && tsc --noEmit -p src/apps/cli/tsconfig.json && tsc --noEmit -p src/apps/webapp/tsconfig.json && tsc --noEmit -p src/apps/webpeer/tsconfig.app.json && tsc --noEmit -p src/apps/webpeer/tsconfig.node.json",
         "pretty:importpath": "cd utilsdeno && deno run -A ./normalise-imports.ts",

src/features/P2PSync/P2PReplicator/P2POpenReplicationPane.svelte

@@ -27,7 +27,7 @@
     let serverInfo = $state<P2PServerInfo | undefined>(undefined);
     let syncingPeerId = $state<string | null>(null);
 
-    const logLevel = showResult ? LOG_LEVEL_NOTICE : LOG_LEVEL_INFO;
+    const logLevel = $derived(showResult ? LOG_LEVEL_NOTICE : LOG_LEVEL_INFO);
     async function requestServerStatus() {
         await liveSyncReplicator.requestStatus();
         eventHub.emitEvent(EVENT_REQUEST_STATUS);

src/features/P2PSync/P2PReplicator/P2PServerStatusCard.svelte

@@ -23,8 +23,11 @@
     let { liveSyncReplicator, showBroadcastToggle = true, core }: Props = $props();
     let serverInfo = $state<P2PServerInfo | undefined>(undefined);
     let replicatorStatus = $state<P2PReplicatorStatus | undefined>(undefined);
-    let roomSuffix = $state<string>(extractP2PRoomSuffix(core?.services.setting.currentSettings()?.P2P_roomID ?? ""));
-    let useDiagRTC = $state<boolean>(core?.services.setting.currentSettings()?.P2P_useDiagRTC ?? false);
+    // Later setting changes arrive through EVENT_SETTING_SAVED; these values only seed local state at mount time.
+    const readCurrentSettings = () => core?.services.setting.currentSettings();
+    const initialSettings = readCurrentSettings();
+    let roomSuffix = $state<string>(extractP2PRoomSuffix(initialSettings?.P2P_roomID ?? ""));
+    let useDiagRTC = $state<boolean>(initialSettings?.P2P_useDiagRTC ?? false);
 
     async function requestServerStatus() {
         await Promise.resolve(liveSyncReplicator.requestStatus());
@@ -307,4 +310,4 @@
         font-size: 0.85rem;
         gap: 0.5rem;
     }
-</style>
+</style>

src/features/P2PSync/P2PReplicator/P2PServerStatusPane.svelte

@@ -33,16 +33,17 @@
     let replicatingPeerId = $state<string | null>(null);
     let communicatingUntil = $state<Record<string, number>>({});
     const COMMUNICATION_HOLD_MS = 2500;
-    let syncOnReplicationSetting = $state(core.services.setting.currentSettings()?.P2P_SyncOnReplication ?? "");
+    // Later setting changes arrive through EVENT_SETTING_SAVED; these values only seed local state at mount time.
+    const readCurrentSettings = () => core.services.setting.currentSettings();
+    const initialSettings = readCurrentSettings();
+    let syncOnReplicationSetting = $state(initialSettings?.P2P_SyncOnReplication ?? "");
     type P2PRemoteOption = {
         id: string;
         name: string;
         roomSuffix: string;
     };
     let p2pRemoteOptions = $state<P2PRemoteOption[]>([]);
-    let selectedP2PRemoteConfigurationId = $state(
-        core.services.setting.currentSettings()?.P2P_ActiveRemoteConfigurationId ?? ""
-    );
+    let selectedP2PRemoteConfigurationId = $state(initialSettings?.P2P_ActiveRemoteConfigurationId ?? "");
     let selectingP2PRemote = $state(false);
 
     function addToList(item: string, list: string): string {

src/modules/services/LiveSyncUI/DialogHost.svelte

@@ -12,33 +12,33 @@
     //      */
     //     onSetupContext?(props: DialogSvelteComponentBaseProps): void;
     // };
-    const { setTitle, closeDialog, setResult, mountComponent, getInitialData, onSetupContext }: DialogHostProps =
-        $props();
+    const props: DialogHostProps = $props();
     const contextProps = {
-        setTitle,
-        closeDialog,
-        setResult,
-        getInitialData,
-    } satisfies DialogSvelteComponentBaseProps<any,any>
+        setTitle: (title: string) => props.setTitle(title),
+        closeDialog: () => props.closeDialog(),
+        setResult: (result: any) => props.setResult(result),
+        getInitialData: () => props.getInitialData?.(),
+    } satisfies DialogSvelteComponentBaseProps<any, any>;
 
-    // Call the onSetupContext function to setup the dialog context
-    onSetupContext?.(contextProps);
+    // Context must be established during component initialisation. The callbacks retain live access to the host props.
+    const setupContext = () => props.onSetupContext?.(contextProps);
+    setupContext();
 
     /**
      * Wrapper around setResult to also close the dialog
      * @param result
      */
     const setResultWrapper = (result: any) => {
-        setResult(result);
-        closeDialog();
+        props.setResult(result);
+        props.closeDialog();
     };
 
-    const Component = mountComponent;
+    const Component = $derived(props.mountComponent);
     let thisElement: HTMLElement;
 </script>
 
 <div class="dialog-host" bind:this={thisElement}>
-    <Component setResult={setResultWrapper} {getInitialData}></Component>
+    <Component setResult={setResultWrapper} getInitialData={props.getInitialData}></Component>
 </div>
 
 <style>

src/modules/services/LiveSyncUI/components/Option.svelte

@@ -22,7 +22,7 @@
         group,
         children,
     }: Props = $props();
-    const actualGroup = group ?? definedGroupContext;
+    const actualGroup = $derived(group ?? definedGroupContext);
     const translatedTitle = $derived.by(() => translate(title));
 </script>