Svelte 5: False positive ownership_invalid_mutation on bind used with state declared in .svelte.ts

[someone2080]

Describe the bug

Can't bind state declared in classes like this:

// MyController.svelte.ts
class MyControllerClass {
    form_state = $state<{fullname: string}>({fullname: ''});
}

Svelte throws ownership_invalid_mutation warning.

It seems to be related to this issue.
No warning is shown if I use a function instead of a class:

// MyController.svelte.ts
function MyControllerClass() {
 	let form_state = $state<{fullname: string}>({fullname: ''});

 	return {
 		form_state
 	}
 }

Reproduction

Full reproduction can be found here: REPL

Logs

No response

System Info

"svelte": "^5.0.0-next.208",

Severity

annoyance

[paoloricciuti]

I can't seem to get a warning in the repl. Can you help me reproduce?

[someone2080]

Sorry, my bad.

REPL doesn't show this warning. You'll have to reproduce it on your local.

This is what I get in my console:

Child.svelte:8 [svelte] ownership_invalid_mutation
src/Child.svelte mutated a value owned by src/App.svelte. This is strongly discouraged. Consider passing values to child components with `bind:`, or use a callback instead

This error doesn't show up if I use a function instead of a class.

REPL should have everything included to reproduce it on your local.

Please let me know if you need anything else, or if I'm doing something wrong.

package.json

{
  "name": "playground",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "check": "svelte-check --tsconfig ./tsconfig.json && tsc -p tsconfig.node.json"
  },
  "devDependencies": {
    "@sveltejs/vite-plugin-svelte": "^3.1.1",
    "@tsconfig/svelte": "^5.0.4",
    "svelte": "^5.0.0-next.208",
    "svelte-check": "^3.8.4",
    "tslib": "^2.6.3",
    "typescript": "^5.2.2",
    "vite": "^5.3.4"
  }
}

Thanks!

[paoloricciuti]

Sorry, my bad.

REPL doesn't show this warning. You'll have to reproduce it on your local.

This is what I get in my console:

Child.svelte:8 [svelte] ownership_invalid_mutation
src/Child.svelte mutated a value owned by src/App.svelte. This is strongly discouraged. Consider passing values to child components with `bind:`, or use a callback instead

This error doesn't show up if I use a function instead of a class.

REPL should have everything included to reproduce it on your local.

Please let me know if you need anything else, or if I'm doing something wrong.

package.json

{
  "name": "playground",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "check": "svelte-check --tsconfig ./tsconfig.json && tsc -p tsconfig.node.json"
  },
  "devDependencies": {
    "@sveltejs/vite-plugin-svelte": "^3.1.1",
    "@tsconfig/svelte": "^5.0.4",
    "svelte": "^5.0.0-next.208",
    "svelte-check": "^3.8.4",
    "tslib": "^2.6.3",
    "typescript": "^5.2.2",
    "vite": "^5.3.4"
  }
}

Thanks!

MMM it's weird that it doesn't reproduce in repl, the related issue talks about hmr...maybe it only happens if you modify one of the files to cause hmr?

[someone2080]

Sorry, my bad.
REPL doesn't show this warning. You'll have to reproduce it on your local.
This is what I get in my console:

Child.svelte:8 [svelte] ownership_invalid_mutation
src/Child.svelte mutated a value owned by src/App.svelte. This is strongly discouraged. Consider passing values to child components with `bind:`, or use a callback instead

This error doesn't show up if I use a function instead of a class.
REPL should have everything included to reproduce it on your local.
Please let me know if you need anything else, or if I'm doing something wrong.
package.json

{
  "name": "playground",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "check": "svelte-check --tsconfig ./tsconfig.json && tsc -p tsconfig.node.json"
  },
  "devDependencies": {
    "@sveltejs/vite-plugin-svelte": "^3.1.1",
    "@tsconfig/svelte": "^5.0.4",
    "svelte": "^5.0.0-next.208",
    "svelte-check": "^3.8.4",
    "tslib": "^2.6.3",
    "typescript": "^5.2.2",
    "vite": "^5.3.4"
  }
}

Thanks!

MMM it's weird that it doesn't reproduce in repl, the related issue talks about hmr...maybe it only happens if you modify one of the files to cause hmr?

This one might be a bit different since I get the same warning with hmr disabled.