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

Svelte5: Potential Ownership False Positive 'mutated a value owned...This is strongly discouraged...' #10649

Closed
Mali-2 opened this issue Feb 26, 2024 · 5 comments · Fixed by #10673
Assignees
Milestone

Comments

@Mali-2
Copy link

Mali-2 commented Feb 26, 2024

Describe the bug

Hello : )
I believe the below generates a false positive in terms of state ownership and mutation. This occurs in svelte next.68 - it did Not occur in next.61 - When creating an external state 'creator' like this:
~ createMyState.svelte.ts

type MyState = {
     a: number;
};
export type MyStateReturn = {
     myState: MyState;
     inc: () => void;
};

export function createMyState(): MyStateReturn {
     const myState = $state<MyState>({
          a: 0
     });

     function inc() {
          myState.a++;
     }

     return {
          myState,
          inc
     };
}

And using it like this with setContext():
~ +page.svelte (Parent):

<script lang="ts">
	import Child from '$lib/components/Child.svelte';
	import { setContext } from 'svelte';
	import { createMyState, type MyStateReturn } from '$lib/components/createMyState.svelte';

	const myState: MyStateReturn = createMyState();
	setContext('my_state_context', myState);
</script>

<Child />

~Child:

<script lang="ts">
	import { getContext } from 'svelte';
	import type { MyStateReturn } from './createMyState.svelte';

	const { myState, inc }: MyStateReturn = getContext('my_state_context');
</script>

{myState.a}
<button onclick={() => inc()}>Inc MyState</button>

You get the following console error:

.../lib/components/Child.svelte mutated a value owned by .../src/routes/+page.svelte. This is strongly discouraged. Consider passing values to child components with `bind:`, or use a callback instead.

However, if the createMyState() function is written within the +page.svelte (Parent) directly - Not external - it works fine with no errors.

Reproduction

https://github.com/Mali-2/state

Logs

createMyState.svelte.ts:15 .../lib/components/Child.svelte mutated a value owned by .../src/routes/+page.svelte. This is strongly discouraged. Consider passing values to child components with `bind:`, or use a callback instead.
warn	@	client.js?v=01b869fb:2587
check_ownership	@	chunk-NEQIOBHS.js?v=01b869fb:159
set	@	chunk-NEQIOBHS.js?v=01b869fb:404
(anonymous)	@	createMyState.svelte.ts:15
inc	@	createMyState.svelte.ts:15
on_click	@	Child.svelte:9
handle_event_propagation	@	chunk-VJRI4WPI.js?v=01b869fb:3198
Show less
createMyState.svelte.ts:15 console.trace
check_ownership	@	chunk-NEQIOBHS.js?v=01b869fb:162
set	@	chunk-NEQIOBHS.js?v=01b869fb:404
(anonymous)	@	createMyState.svelte.ts:15
inc	@	createMyState.svelte.ts:15
on_click	@	Child.svelte:9
handle_event_propagation	@	chunk-VJRI4WPI.js?v=01b869fb:3198
Show less

System Info

pnpm -v: 8.7.6
devDependencies:
@sveltejs/adapter-auto 3.1.1            @typescript-eslint/eslint-plugin 7.0.2  eslint-plugin-svelte 2.36.0-next.6      svelte-check 3.6.4                      
@sveltejs/kit 2.5.1                     @typescript-eslint/parser 7.0.2         prettier 3.2.5                          tslib 2.6.2                             
@sveltejs/vite-plugin-svelte 3.0.2      eslint 8.57.0                           prettier-plugin-svelte 3.2.1            typescript 5.3.3                        
@types/eslint 8.56.3                    eslint-config-prettier 9.1.0            svelte 5.0.0-next.68                    vite 5.1.4     
MacOs Sonoma: Version 14.2.1, Macbook Pro M1 
Browser: Chrome Version 121.0.6167.184 (Official Build) (arm64)

Severity

blocking an upgrade

@dummdidumm dummdidumm added this to the 5.0 milestone Feb 27, 2024
@dummdidumm
Copy link
Member

There are two false positives here:

  • retrieving something with getContext should mean you're allowed to mutate the thing in the component
  • you're changing state through a function, this should always be allowed (in fact that's what the warning wants you to guide towards)

@kuechlerm
Copy link

kuechlerm commented Feb 28, 2024

I am not sure what to make out of this. I think, I have the same problem and have a simpler example:
REPL - see comment in Field.svelte

@dummdidumm do you mean that this error message is a bug or that I should find another way of solving this setup?

@svelte-kit-so-good
Copy link

svelte-kit-so-good commented Feb 28, 2024

@kuechlerm yea I think he means it is a bug since he's agreeing that they're false positives. Curiously with your example if you move list in Form.svelte like so:

<script context="module">
+	let list = $state([]);
</script>
<script>
	import { setContext } from 'svelte';
	let { children } = $props();
-	let list = $state([]); 
	setContext('list', list);
	
</script>

{@render children()}

... then the error message disappears.

@dummdidumm dummdidumm self-assigned this Feb 29, 2024
dummdidumm added a commit that referenced this issue Feb 29, 2024
…a module, hinting at a mutation encapsulated in a .svelte.js file; part of #10649
dummdidumm added a commit that referenced this issue Mar 1, 2024
- widen ownership when getContext is called, part of #10649
- widen ownership when assigning one proxy to another
- skip first 4 stack trace entries and bail if first after that is not a module, hinting at a mutation encapsulated in a .svelte.js file; part of #10649
@pzerelles
Copy link

pzerelles commented Jun 25, 2024

@dummdidumm The problem comes back currently with HMR, when code is changed on a running page.
I use getContext to get reactive state and there is no warning until HMR reloads a file.

@dummdidumm
Copy link
Member

Please open a new issue with a minimum reproducible

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.

5 participants