fix: components mounted via mount() during onMount() that not properly update when using signals provided as input of the mount() function.

[raythurnvoid]

Fixes #15870.

Fix: First {#if} block fails to update in programmatically mounted components

Issue Description

Bug: When components are mounted programmatically using the mount() API with context-passed state, the first conditional block ({#if}) in the mounted component fails to update when the state changes. Subsequent conditional blocks work correctly.

According to my analysis this commit introduced the issue: d2e7932

Reproduction:

<!-- This component when mounted via mount() API exhibits the bug -->
{#if stateFromContext.value === true}
  <span>First block - shows even when it shouldn't</span>
{/if}
{#if stateFromContext.value === true}  
  <span>Second block - works correctly</span>
{/if}

Root Cause Analysis

The issue stems from a dependency registration failure in the reactivity system. Here's what happens:

1. Mount Context: When using mount() API, components are rendered within a mount effect context
2. Proxy Property Access: First {#if} block accesses stateFromContext.value, triggering proxy property creation
3. Signal Creation Issue: Before the fix, signals (sources) in proxy.js where created using state() instead of source()
4. Side Effect: state() calls push_reaction_value(), adding the signal to the reaction_sources array
5. Registration Failure: Later, when the get() function checks !reaction_sources?.includes(signal), it returns false
6. Missing Effect: The first {#if} block effect never gets registered in the signal's reactions array
7. Broken Reactivity: State changes don't notify the first conditional block

Key insight: This only affects the first conditional because subsequent ones hit different code paths in the reactivity system.

The Fix

Location: svelte/src/internal/client/proxy.js

The issue was traced to how proxy objects create signals for their properties. Originally, the code was importing state but aliasing it as source, which created confusion:

Before:

import { state as source, set } from './reactivity/sources.js';

// In the proxy get trap:
s = with_parent(() => source(proxy(exists ? target[prop] : UNINITIALIZED), stack));
// This was actually calling state() due to the import alias!

After:

import { source, state, set } from './reactivity/sources.js';

// In the proxy get trap:
s = with_parent(() => source(proxy(exists ? target[prop] : UNINITIALIZED), stack));
// Now this calls the actual source() function, avoiding push_reaction_value()

I made a minimal change to fix the reported issue by switching to use source() only in the proxy's get trap where the problematic dependency registration was occurring, while keeping state() everywhere else in the proxy code. This represents the minimal change needed to resolve the issue, though it may not be the optimal long-term solution since I lack deep understanding of Svelte's reactivity system internals.

The key difference is that source() creates a signal without side effects, while state() creates a signal and calls push_reaction_value() which adds it to the reaction_sources array. This fix ensures that when proxy properties are first accessed, they don't get inappropriately added to the reaction_sources array, allowing normal dependency registration to proceed and making programmatic mounting behave consistently with template rendering.

Before submitting the PR, please make sure you do the following

• It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
• Prefix your PR title with feat:, fix:, chore:, or docs:.
• This message body should clearly illustrate what problems it solves.
• Ideally, include a test that fails without this PR but passes with it.
• If this PR changes code within packages/svelte/src, add a changeset (npx changeset).

Tests and linting

• Run the tests with pnpm test and lint the project with pnpm lint

[svelte-docs-bot]

Preview: https://svelte-dev-git-preview-svelte-16066-svelte.vercel.app/

[github-actions]

Playground

pnpm add https://pkg.pr.new/svelte@16066