fix: issue state_proxy_unmount warning when unmounting a state proxy

Author: Rich-Harris

.changeset/fuzzy-pillows-tell.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: issue `state_proxy_unmount` warning when unmounting a state proxy

documentation/docs/98-reference/.generated/client-warnings.md

@@ -312,6 +312,27 @@ Reactive `$state(...)` proxies and the values they proxy have different identiti
 
 To resolve this, ensure you're comparing values where both values were created with `$state(...)`, or neither were. Note that `$state.raw(...)` will _not_ create a state proxy.
 
+### state_proxy_unmount
+
+```
+Tried to unmount a state proxy, rather than a component
+```
+
+`unmount` was called with a state proxy:
+
+```js
+import { mount, unmount } from 'svelte';
+import Component from './Component.svelte';
+let target = document.body;
+// ---cut---
+let component = $state(mount(Component, { target }));
+
+// later...
+unmount(component);
+```
+
+Avoid using `$state` here. If `component` _does_ need to be reactive for some reason, use `$state.raw` instead.
+
 ### svelte_boundary_reset_noop
 
 ```

packages/svelte/messages/client-warnings/warnings.md

@@ -272,6 +272,25 @@ To silence the warning, ensure that `value`:
 
 To resolve this, ensure you're comparing values where both values were created with `$state(...)`, or neither were. Note that `$state.raw(...)` will _not_ create a state proxy.
 
+## state_proxy_unmount
+
+> Tried to unmount a state proxy, rather than a component
+
+`unmount` was called with a state proxy:
+
+```js
+import { mount, unmount } from 'svelte';
+import Component from './Component.svelte';
+let target = document.body;
+// ---cut---
+let component = $state(mount(Component, { target }));
+
+// later...
+unmount(component);
+```
+
+Avoid using `$state` here. If `component` _does_ need to be reactive for some reason, use `$state.raw` instead.
+
 ## svelte_boundary_reset_noop
 
 > A `<svelte:boundary>` `reset` function only resets the boundary the first time it is called

packages/svelte/src/internal/client/render.js

@@ -30,7 +30,7 @@ import * as w from './warnings.js';
 import * as e from './errors.js';
 import { assign_nodes } from './dom/template.js';
 import { is_passive_event } from '../../utils.js';
-import { COMMENT_NODE } from './constants.js';
+import { COMMENT_NODE, STATE_SYMBOL } from './constants.js';
 
 /**
  * This is normally true — block effects should run their intro transitions —
@@ -309,7 +309,11 @@ export function unmount(component, options) {
 	}
 
 	if (DEV) {
-		w.lifecycle_double_unmount();
+		if (STATE_SYMBOL in component) {
+			w.state_proxy_unmount();
+		} else {
+			w.lifecycle_double_unmount();
+		}
 	}
 
 	return Promise.resolve();

packages/svelte/src/internal/client/warnings.js

@@ -171,6 +171,17 @@ export function lifecycle_double_unmount() {
 	}
 }
 
+/**
+ * Tried to unmount a state proxy, rather than a component
+ */
+export function state_proxy_unmount() {
+	if (DEV) {
+		console.warn(`%c[svelte] state_proxy_unmount\n%cTried to unmount a state proxy, rather than a component\nhttps://svelte.dev/e/state_proxy_unmount`, bold, normal);
+	} else {
+		console.warn(`https://svelte.dev/e/state_proxy_unmount`);
+	}
+}
+
 /**
  * %parent% passed property `%prop%` to %child% with `bind:`, but its parent component %owner% did not declare `%prop%` as a binding. Consider creating a binding between %owner% and %parent% (e.g. `bind:%prop%={...}` instead of `%prop%={...}`)
  * @param {string} parent