Skip to content

Incorrect server code generation for derived via alternative this reference #16889

@dangodai

Description

@dangodai

Describe the bug

When referring to a derived property through an alternative reference to this, the server side code generation will fail to call the derived function when attempting to access the derived value.

Reproduction

Reproduction in playground: https://svelte.dev/playground/8e9e3d06e5a54c599c6480121bd77231?version=5.39.8

Same code as linked but explained: If we have the following class that has a derived property which we access via both this and an alternative reference, self

class Foo {
	#derived = $derived(1);
	
	constructor(value) {
		self = this;

		// Correctly calls #derived()
		console.log(this.#derived)

		// Incorrect, does not call #derived
		console.log(self.#derived)
	}
}

Then the server generated code will look like this

class Foo {
	#derived = $.derived(() => 1);

	constructor(value) {
		self = this;

		// Correctly calls #derived()
		console.log(this.#derived());

		// Incorrect, does not call #derived
		console.log(self.#derived);
	}
}

The error is that the line console.log(self.#derived); should instead be console.log(self.#derived());.

This also applies to $derived.by

Logs

System Info

System:
    OS: Linux 6.15 Arch Linux
    CPU: (12) x64 AMD Ryzen 5 2600 Six-Core Processor
    Memory: 7.08 GB / 15.54 GB
    Container: Yes
    Shell: 5.3.3 - /bin/bash
  Binaries:
    Node: 22.17.0 - ~/.nvm/versions/node/v22.17.0/bin/node
    Yarn: 1.22.22 - /usr/bin/yarn
    npm: 10.9.2 - ~/.nvm/versions/node/v22.17.0/bin/npm
    pnpm: 10.13.1 - ~/.local/share/pnpm/pnpm
  Browsers:
    Chromium: 139.0.7258.66
  npmPackages:
    svelte: ^5.39.8 => 5.39.8

Severity

blocking a particular use case

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions