Svelte reactivity warnings when using Link action.

[jchand99]

Hello, thank you for the great routing package!

There seems to be some svelte warnings when using the Link action.

Svelte warning documentation link: https://svelte.dev/e/state_referenced_locally

Based on the warnings below, it appears that svelte is complaining that the _options, navigate and router variables are reactive, but are then passed to a function that is not reactive so it only gets the first copy of the reactive variable.

I believe the solution here would be to wrap the getNavigateHandler and getResolvedHandler functions with the $derived rune, similar to the way the getNavigateFunction and getResolveFunction are. If there is a specific reason these functions are not surrounded by reactivity then there might have to be another solution to avoid these warnings.

Warnings:

warn    Build warnings:
File: ./node_modules/@dvcol/svelte-simple-router/dist/action/links.action.svelte.js:1:1
  ⚠ Module Warning (from /Users/user/Programming/svelte-host/node_modules/svelte-loader/index.js??ruleSet[1].rules[14].use[0]):
  │ state_referenced_locally: This reference only captures the initial value of `_options`. Did you mean to reference it inside a closure instead?
  │ https://svelte.dev/e/state_referenced_locally
  │ node_modules/@dvcol/svelte-simple-router/dist/action/links.action.svelte.js:44:47
  │ 42:     });
  │ 43:     const navigate = $derived(getNavigateFunction(router, _options.navigate));
  │ 44:     const navigateHandler = getNavigateHandler(_options, navigate);
  │                                                            ^
  │ 45:     const resolve = $derived(getResolveFunction(navigate, _options.navigate));
  │ 46:     const resolveHandler = getResolveHandler(_options, resolve);
Import traces (entry → error):
  ./src/index.ts
  ./src/App.svelte
  ./node_modules/@dvcol/svelte-simple-router/dist/index.js
  ./node_modules/@dvcol/svelte-simple-router/dist/action/index.js
  ./node_modules/@dvcol/svelte-simple-router/dist/action/links.action.svelte.js ×

File: ./node_modules/@dvcol/svelte-simple-router/dist/action/links.action.svelte.js:1:1
  ⚠ Module Warning (from /Users/user/Programming/svelte-host/node_modules/svelte-loader/index.js??ruleSet[1].rules[14].use[0]):
  │ state_referenced_locally: This reference only captures the initial value of `navigate`. Did you mean to reference it inside a closure instead?
  │ https://svelte.dev/e/state_referenced_locally
  │ node_modules/@dvcol/svelte-simple-router/dist/action/links.action.svelte.js:44:57
  │ 42:     });
  │ 43:     const navigate = $derived(getNavigateFunction(router, _options.navigate));
  │ 44:     const navigateHandler = getNavigateHandler(_options, navigate);
  │                                                                      ^
  │ 45:     const resolve = $derived(getResolveFunction(navigate, _options.navigate));
  │ 46:     const resolveHandler = getResolveHandler(_options, resolve);
Import traces (entry → error):
  ./src/index.ts
  ./src/App.svelte
  ./node_modules/@dvcol/svelte-simple-router/dist/index.js
  ./node_modules/@dvcol/svelte-simple-router/dist/action/index.js
  ./node_modules/@dvcol/svelte-simple-router/dist/action/links.action.svelte.js ×

File: ./node_modules/@dvcol/svelte-simple-router/dist/action/links.action.svelte.js:1:1
  ⚠ Module Warning (from /Users/user/Programming/svelte-host/node_modules/svelte-loader/index.js??ruleSet[1].rules[14].use[0]):
  │ state_referenced_locally: This reference only captures the initial value of `_options`. Did you mean to reference it inside a closure instead?
  │ https://svelte.dev/e/state_referenced_locally
  │ node_modules/@dvcol/svelte-simple-router/dist/action/links.action.svelte.js:46:45
  │ 44:     const navigateHandler = getNavigateHandler(_options, navigate);
  │ 45:     const resolve = $derived(getResolveFunction(navigate, _options.navigate));
  │ 46:     const resolveHandler = getResolveHandler(_options, resolve);
  │                                                          ^
  │ 47:     node.addEventListener('click', navigateHandler);
  │ 48:     node.addEventListener('keydown', navigateHandler);
Import traces (entry → error):
  ./src/index.ts
  ./src/App.svelte
  ./node_modules/@dvcol/svelte-simple-router/dist/index.js
  ./node_modules/@dvcol/svelte-simple-router/dist/action/index.js
  ./node_modules/@dvcol/svelte-simple-router/dist/action/links.action.svelte.js ×

File: ./node_modules/@dvcol/svelte-simple-router/dist/action/links.action.svelte.js:1:1
  ⚠ Module Warning (from /Users/user/Programming/svelte-host/node_modules/svelte-loader/index.js??ruleSet[1].rules[14].use[0]):
  │ state_referenced_locally: This reference only captures the initial value of `resolve`. Did you mean to reference it inside a closure instead?
  │ https://svelte.dev/e/state_referenced_locally
  │ node_modules/@dvcol/svelte-simple-router/dist/action/links.action.svelte.js:46:55
  │ 44:     const navigateHandler = getNavigateHandler(_options, navigate);
  │ 45:     const resolve = $derived(getResolveFunction(navigate, _options.navigate));
  │ 46:     const resolveHandler = getResolveHandler(_options, resolve);
  │                                                                   ^
  │ 47:     node.addEventListener('click', navigateHandler);
  │ 48:     node.addEventListener('keydown', navigateHandler);
Import traces (entry → error):
  ./src/index.ts
  ./src/App.svelte
  ./node_modules/@dvcol/svelte-simple-router/dist/index.js
  ./node_modules/@dvcol/svelte-simple-router/dist/action/index.js
  ./node_modules/@dvcol/svelte-simple-router/dist/action/links.action.svelte.js ×

package.json versions:

{
    "dependencies": [
        "@dvcol/svelte-simple-router": "^2.7.2",
        "svelte": "^5.43.14"
    ]
}

Code snippet throwing warnings:

<script lang="ts">
    import { link } from "@dvcol/svelte-simple-router";
</script>

<div>
  <a href="/home" use:link>Home</a>
  <a href="/documents" use:link>Documents</a>
</div>