Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Derived private property calculated after constructor #15288

Open
shadow-identity opened this issue Feb 13, 2025 · 1 comment · May be fixed by #15300
Open

Derived private property calculated after constructor #15288

shadow-identity opened this issue Feb 13, 2025 · 1 comment · May be fixed by #15300

Comments

@shadow-identity
Copy link

shadow-identity commented Feb 13, 2025

Describe the bug

I was trying to instantiate private properties in my class, and to use some of them in the constructor. But unfortunately, the derived properties were null, even though they had all the necessary data to be valid.

This happens only with private derived properties. Non-private derived properties are initialized before the constructor and works fine. $state private properties are also working fine.

Reproduction

https://svelte.dev/playground/61fd75bbaa534daf8fbcef02580dbe9a?version=5.19.10

In this example, you will have console.log output from the constructor before one from derived.by

class Foo {
	#state = $state('state')
	#derived = $derived('derived from ' + this.#state); // no matter what is inside, it will be null in constructor
	#derivedBy = $derived.by(() => {
		console.log('derivedBy'); 
		return 'derived from ' + this.#derived  // no matter what it returns, it will be null in constructor
	});
	
	initial
	
	constructor() {
		this.initial = [this.#state, this.#derived, this.#derivedBy]
		console.log(this.initial) // ['state', null, null]
	}
	
	get derived() {return this.#derived}
	get derivedBy() {return this.#derivedBy}
	get state() {return this.#state}		
}

const foo = new Foo()

System Info

Just svelte 5.19.10, see repl.
Reproducible on Firefox 136 and Chrome 133, Safari 18.3

Severity

annoyance

@paoloricciuti
Copy link
Member

Yeah i think we should fix this...in the meantime if you want as a workaround you can pull that logic in a separate method from the constructor to make it work

class Foo {
		#state = $state('state')
		#derived = $derived('derived from ' + this.#state);
	  #derivedBy = $derived.by(() => {
			console.log('derivedBy'); 
			return 'derived from ' + this.#derived 
		});
		
		initial
		
		constructor() {
			this.log();
		}

		log(){
			this.initial = [this.#state, this.#derived, this.#derivedBy]
			console.log(this.initial)
		}
		
		get derived() {return this.#derived}
		get derivedBy() {return this.#derivedBy}
		get state() {return this.#state}		
	}

@paoloricciuti paoloricciuti linked a pull request Feb 14, 2025 that will close this issue
6 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants