Use of `$.strict_equals` in dev mode leads to unexpected scripts
### Describe the bug
Relates to https://github.com/sveltejs/svelte/issues/13214.
While creating a script to be used as an injected script to `<svelte:head>`, I noticed strict comparisons to non-reactive variables compiles to `$.strict_equals`, and that wouldn't work for my use case of running scripts within `<head>`.
The script used for my application:
```html
<script module>
const themes = Object.freeze({ auto: 'auto', light: 's-light', dark: 's-dark' })
type ThemeValues = (typeof themes)[keyof typeof themes]
const THEME_STORAGE_KEY = 'theme'
function getThemePreference() {
const THEME_STORAGE_KEY = 'theme'
const themePreference = localStorage.getItem(THEME_STORAGE_KEY) as ThemeValues | null
if (!themePreference) return
if (themePreference === 's-dark' || themePreference === 's-light') {
document.documentElement.classList.add(themePreference)
}
}
</script>
<svelte:head>
{#if instance.current === 1}
{@html `<script>(${getThemePreference.toString()})()</script>`}
{/if}
</svelte:head>
```
Using `@html` I'm inlining my `getThemePreference` function and calling it within `<head>` before `<body>` gets parsed and rendered. But since comparisons like `themePreference === 's-dark'` compiles to `$.strict_equals(themePreference, 's-dark')`, it interferes with local testing since `$` would not be available at the time my script runs.
Since I'm not using Runes, I would expect equivalence expressions (`===`) to not compile to `$.strict_equals`.
My workaround is to avoid strict comparisons:
```diff
<script module>
const themes = Object.freeze({ auto: 'auto', light: 's-light', dark: 's-dark' })
type ThemeValues = (typeof themes)[keyof typeof themes]
const THEME_STORAGE_KEY = 'theme'
function getThemePreference() {
+ const themeValues: (typeof themes)[keyof typeof themes][] = ['auto', 's-light', 's-dark']
const THEME_STORAGE_KEY = 'theme'
const themePreference = localStorage.getItem(THEME_STORAGE_KEY) as ThemeValues | null
if (!themePreference) return
- if (themePreference === 's-dark' || themePreference === 's-light') {
+ if (themeValues.includes(themePreference)) {
document.documentElement.classList.add(themePreference)
}
}
</script>
```
### Reproduction
Minimal reproduction: https://svelte.dev/playground/d568242a39e1462f8c0543d7a3a21c19?version=5.55.8
Toggle dev mode, observe JS output.
### Logs
```shell
```
### System Info
```shell
System:
OS: macOS 15.7.5
CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
Memory: 203.26 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 24.13.0
npm: 11.4.0
pnpm: 10.28.2
Browsers:
Brave Browser: 148.1.90.122
Chrome: 148.0.7778.178
Firefox: 140.0.4
Safari: 26.4
npmPackages:
svelte: ^5.55.5 => 5.55.5
```
### Severity
annoyance
关闭于 2026-05-21 3 条评论