@ -5,351 +5,235 @@ generated: 'generated by process-messages/index.js'
## `a11y_accesskey`
```
Avoid using accesskey
```
> [!NOTE] Avoid using accesskey
## `a11y_aria_activedescendant_has_tabindex`
```
An element with an aria-activedescendant attribute should have a tabindex value
```
> [!NOTE] An element with an aria-activedescendant attribute should have a tabindex value
## `a11y_aria_attributes`
```
`<%name%>` should not have aria-* attributes
```
> [!NOTE] '\<%name%>' should not have aria-* attributes
## `a11y_autocomplete_valid`
```
'%value%' is an invalid value for 'autocomplete' on `<input type="%type%">`
```
> [!NOTE] '%value%' is an invalid value for 'autocomplete' on '\<input type="%type%">'
## `a11y_autofocus`
```
Avoid using autofocus
```
> [!NOTE] Avoid using autofocus
## `a11y_click_events_have_key_events`
```
Visible, non-interactive elements with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as `<button type="button">` or `<a>` might be more appropriate. See https://svelte.dev/docs/accessibility-warnings#a11y-click-events-have-key-events for more details
```
> [!NOTE] Visible, non-interactive elements with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as '\<button type="button">' or '\<a>' might be more appropriate. See https://svelte.dev/docs/accessibility-warnings#a11y-click-events-have-key-events for more details
## `a11y_consider_explicit_label`
```
Buttons and links should either contain text or have an `aria-label` or `aria-labelledby` attribute
```
> [!NOTE] Buttons and links should either contain text or have an 'aria-label' or 'aria-labelledby' attribute
## `a11y_distracting_elements`
```
Avoid `<%name%>` elements
```
> [!NOTE] Avoid '\<%name%>' elements
## `a11y_figcaption_index`
```
`<figcaption>` must be first or last child of `<figure>`
```
> [!NOTE] '\<figcaption>' must be first or last child of '\<figure>'
## `a11y_figcaption_parent`
```
`<figcaption>` must be an immediate child of `<figure>`
```
> [!NOTE] '\<figcaption>' must be an immediate child of '\<figure>'
## `a11y_hidden`
```
`<%name%>` element should not be hidden
```
> [!NOTE] '\<%name%>' element should not be hidden
## `a11y_img_redundant_alt`
```
Screenreaders already announce `<img>` elements as an image
```
> [!NOTE] Screenreaders already announce '\<img>' elements as an image
## `a11y_incorrect_aria_attribute_type`
```
The value of '%attribute%' must be a %type%
```
> [!NOTE] The value of '%attribute%' must be a %type%
## `a11y_incorrect_aria_attribute_type_boolean`
```
The value of '%attribute%' must be either 'true' or 'false'. It cannot be empty
```
> [!NOTE] The value of '%attribute%' must be either 'true' or 'false'. It cannot be empty
## `a11y_incorrect_aria_attribute_type_id`
```
The value of '%attribute%' must be a string that represents a DOM element ID
```
> [!NOTE] The value of '%attribute%' must be a string that represents a DOM element ID
## `a11y_incorrect_aria_attribute_type_idlist`
```
The value of '%attribute%' must be a space-separated list of strings that represent DOM element IDs
```
> [!NOTE] The value of '%attribute%' must be a space-separated list of strings that represent DOM element IDs
## `a11y_incorrect_aria_attribute_type_integer`
```
The value of '%attribute%' must be an integer
```
> [!NOTE] The value of '%attribute%' must be an integer
## `a11y_incorrect_aria_attribute_type_token`
```
The value of '%attribute%' must be exactly one of %values%
```
> [!NOTE] The value of '%attribute%' must be exactly one of %values%
## `a11y_incorrect_aria_attribute_type_tokenlist`
```
The value of '%attribute%' must be a space-separated list of one or more of %values%
```
> [!NOTE] The value of '%attribute%' must be a space-separated list of one or more of %values%
## `a11y_incorrect_aria_attribute_type_tristate`
```
The value of '%attribute%' must be exactly one of true, false, or mixed
```
> [!NOTE] The value of '%attribute%' must be exactly one of true, false, or mixed
## `a11y_interactive_supports_focus`
```
Elements with the '%role%' interactive role must have a tabindex value
```
> [!NOTE] Elements with the '%role%' interactive role must have a tabindex value
## `a11y_invalid_attribute`
```
'%href_value%' is not a valid %href_attribute% attribute
```
> [!NOTE] '%href_value%' is not a valid %href_attribute% attribute
## `a11y_label_has_associated_control`
```
A form label must be associated with a control
```
> [!NOTE] A form label must be associated with a control
## `a11y_media_has_caption`
```
`<video>` elements must have a `<track kind="captions">`
```
> [!NOTE] '\<video>' elements must have a '\<track kind="captions">'
## `a11y_misplaced_role`
```
`<%name%>` should not have role attribute
```
> [!NOTE] '\<%name%>' should not have role attribute
## `a11y_misplaced_scope`
```
The scope attribute should only be used with `<th>` elements
```
> [!NOTE] The scope attribute should only be used with '\<th>' elements
## `a11y_missing_attribute`
```
`<%name%>` element should have %article% %sequence% attribute
```
> [!NOTE] '\<%name%>' element should have %article% %sequence% attribute
## `a11y_missing_content`
```
`<%name%>` element should contain text
```
> [!NOTE] '\<%name%>' element should contain text
## `a11y_mouse_events_have_key_events`
```
'%event%' event must be accompanied by '%accompanied_by%' event
```
> [!NOTE] '%event%' event must be accompanied by '%accompanied_by%' event
> [!NOTE] Unknown aria attribute 'aria-%attribute%'. Did you mean '%suggestion%'?
## `a11y_unknown_role`
```
Unknown role '%role%'
```
```
Unknown role '%role%'. Did you mean '%suggestion%'?
```
> [!NOTE] Unknown role '%role%'
> [!NOTE] Unknown role '%role%'. Did you mean '%suggestion%'?
## `attribute_avoid_is`
```
The "is" attribute is not supported cross-browser and should be avoided
```
> [!NOTE] The "is" attribute is not supported cross-browser and should be avoided
## `attribute_global_event_reference`
```
You are referencing `globalThis.%name%`. Did you forget to declare a variable with that name?
```
> [!NOTE] You are referencing 'globalThis.%name%'. Did you forget to declare a variable with that name?
## `attribute_illegal_colon`
```
Attributes should not contain ':' characters to prevent ambiguity with Svelte directives
```
> [!NOTE] Attributes should not contain ':' characters to prevent ambiguity with Svelte directives
## `attribute_invalid_property_name`
```
'%wrong%' is not a valid HTML attribute. Did you mean '%right%'?
```
> [!NOTE] '%wrong%' is not a valid HTML attribute. Did you mean '%right%'?
## `attribute_quoted`
```
Quoted attributes on components and custom elements will be stringified in a future version of Svelte. If this isn't what you want, remove the quotes
```
> [!NOTE] Quoted attributes on components and custom elements will be stringified in a future version of Svelte. If this isn't what you want, remove the quotes
## `bind_invalid_each_rest`
```
The rest operator (...) will create a new object and binding '%name%' with the original object will not work
```
> [!NOTE] The rest operator (...) will create a new object and binding '%name%' with the original object will not work
## `block_empty`
```
Empty block
```
> [!NOTE] Empty block
## `component_name_lowercase`
```
`<%name%>` will be treated as an HTML element unless it begins with a capital letter
```
> [!NOTE] '\<%name%>' will be treated as an HTML element unless it begins with a capital letter
## `css_unused_selector`
```
Unused CSS selector "%name%"
```
> [!NOTE] Unused CSS selector "%name%"
## `element_invalid_self_closing_tag`
```
Self-closing HTML tags for non-void elements are ambiguous — use `<%name% ...></%name%>` rather than `<%name% ... />`
```
> [!NOTE] Self-closing HTML tags for non-void elements are ambiguous — use '\<%name% ...>\</%name%>' rather than '\<%name% ... />'
## `event_directive_deprecated`
```
Using `on:%name%` to listen to the %name% event is deprecated. Use the event attribute `on%name%` instead
```
> [!NOTE] Using 'on:%name%' to listen to the %name% event is deprecated. Use the event attribute 'on%name%' instead
## `export_let_unused`
```
Component has unused export property '%name%'. If it is for external reference only, please consider using `export const %name%`
```
> [!NOTE] Component has unused export property '%name%'. If it is for external reference only, please consider using 'export const %name%'
## `legacy_code`
```
`%code%` is no longer valid — please use `%suggestion%` instead
```
> [!NOTE] '%code%' is no longer valid — please use '%suggestion%' instead
## `legacy_component_creation`
```
Svelte 5 components are no longer classes. Instantiate them using `mount` or `hydrate` (imported from 'svelte') instead.
```
> [!NOTE] Svelte 5 components are no longer classes. Instantiate them using 'mount' or 'hydrate' (imported from 'svelte') instead.
## `node_invalid_placement_ssr`
```
%thing% is invalid inside `<%parent%>`. When rendering this component on the server, the resulting HTML will be modified by the browser, likely resulting in a `hydration_mismatch` warning
```
> [!NOTE] %thing% is invalid inside '\<%parent%>'. When rendering this component on the server, the resulting HTML will be modified by the browser, likely resulting in a 'hydration_mismatch' warning
HTML restricts where certain elements can appear. In case of a violation the browser will 'repair' the HTML in a way that breaks Svelte's assumptions about the structure of your components. Some examples:
@ -361,117 +245,79 @@ This code will work when the component is rendered on the client (which is why t
## `non_reactive_update`
```
`%name%` is updated, but is not declared with `$state(...)`. Changing its value will not correctly trigger updates
```
> [!NOTE] '%name%' is updated, but is not declared with '$state(...)'. Changing its value will not correctly trigger updates
## `options_deprecated_accessors`
```
The `accessors` option has been deprecated. It will have no effect in runes mode
```
> [!NOTE] The 'accessors' option has been deprecated. It will have no effect in runes mode
## `options_deprecated_immutable`
```
The `immutable` option has been deprecated. It will have no effect in runes mode
```
> [!NOTE] The 'immutable' option has been deprecated. It will have no effect in runes mode
## `options_missing_custom_element`
```
The `customElement` option is used when generating a custom element. Did you forget the `customElement: true` compile option?
```
> [!NOTE] The 'customElement' option is used when generating a custom element. Did you forget the 'customElement: true' compile option?
## `options_removed_enable_sourcemap`
```
The `enableSourcemap` option has been removed. Source maps are always generated now, and tooling can choose to ignore them
```
> [!NOTE] The 'enableSourcemap' option has been removed. Source maps are always generated now, and tooling can choose to ignore them
## `options_removed_hydratable`
```
The `hydratable` option has been removed. Svelte components are always hydratable now
```
> [!NOTE] The 'hydratable' option has been removed. Svelte components are always hydratable now
## `options_removed_loop_guard_timeout`
```
The `loopGuardTimeout` option has been removed
```
> [!NOTE] The 'loopGuardTimeout' option has been removed
## `options_renamed_ssr_dom`
```
`generate: "dom"` and `generate: "ssr"` options have been renamed to "client" and "server" respectively
```
> [!NOTE] 'generate: "dom"' and 'generate: "ssr"' options have been renamed to "client" and "server" respectively
## `perf_avoid_inline_class`
```
Avoid 'new class' — instead, declare the class at the top level scope
```
> [!NOTE] Avoid 'new class' — instead, declare the class at the top level scope
## `perf_avoid_nested_class`
```
Avoid declaring classes below the top level scope
```
> [!NOTE] Avoid declaring classes below the top level scope
## `reactive_declaration_invalid_placement`
```
Reactive declarations only exist at the top level of the instance script
```
> [!NOTE] Reactive declarations only exist at the top level of the instance script
Reassignments of module-level declarations will not cause reactive statements to update
```
> [!NOTE] Reassignments of module-level declarations will not cause reactive statements to update
## `reactive_declaration_non_reactive_property`
```
Properties of objects and arrays are not reactive unless in runes mode. Changes to this property will not cause the reactive statement to update
```
> [!NOTE] Properties of objects and arrays are not reactive unless in runes mode. Changes to this property will not cause the reactive statement to update
## `script_context_deprecated`
```
`context="module"` is deprecated, use the `module` attribute instead
```
> [!NOTE] 'context="module"' is deprecated, use the 'module' attribute instead
## `script_unknown_attribute`
```
Unrecognized attribute — should be one of `generics`, `lang` or `module`. If this exists for a preprocessor, ensure that the preprocessor removes it
```
> [!NOTE] Unrecognized attribute — should be one of 'generics', 'lang' or 'module'. If this exists for a preprocessor, ensure that the preprocessor removes it
## `slot_element_deprecated`
```
Using `<slot>` to render parent content is deprecated. Use `{@render ...}` tags instead
```
> [!NOTE] Using '\<slot>' to render parent content is deprecated. Use '{@render ...}' tags instead
## `state_referenced_locally`
```
State referenced in its own scope will never update. Did you mean to reference it inside a closure?
```
> [!NOTE] State referenced in its own scope will never update. Did you mean to reference it inside a closure?
## `store_rune_conflict`
```
It looks like you're using the `$%name%` rune, but there is a local binding called `%name%`. Referencing a local variable with a `$` prefix will create a store subscription. Please rename `%name%` to avoid the ambiguity
```
> [!NOTE] It looks like you're using the '$%name%' rune, but there is a local binding called '%name%'. Referencing a local variable with a '$' prefix will create a store subscription. Please rename '%name%' to avoid the ambiguity
## `svelte_component_deprecated`
```
`<svelte:component>` is deprecated in runes mode — components are dynamic by default
```
> [!NOTE] '\<svelte:component>' is deprecated in runes mode — components are dynamic by default
In previous versions of Svelte, the component constructor was fixed when the component was rendered. In other words, if you wanted `<X>` to re-render when `X` changed, you would either have to use `<svelte:component this={X}>` or put the component inside a `{#key X}...{/key}` block.
@ -503,21 +349,14 @@ A derived value may be used in other contexts:
## `svelte_element_invalid_this`
```
`this` should be an `{expression}`. Using a string attribute value will cause an error in future versions of Svelte
```
> [!NOTE] 'this' should be an '{expression}'. Using a string attribute value will cause an error in future versions of Svelte
## `svelte_self_deprecated`
```
`<svelte:self>` is deprecated — use self-imports (e.g. `import %name% from './%basename%'`) instead
```
> [!NOTE] '\<svelte:self>' is deprecated — use self-imports (e.g. 'import %name% from './%basename%'') instead
## `unknown_code`
```
`%code%` is not a recognised code
```
```
`%code%` is not a recognised code (did you mean `%suggestion%`?)
```
> [!NOTE] '%code%' is not a recognised code
> [!NOTE] '%code%' is not a recognised code (did you mean '%suggestion%'?)
@ -5,159 +5,106 @@ generated: 'generated by process-messages/index.js'
## `bind_invalid_checkbox_value`
```
Using `bind:value` together with a checkbox input is not allowed. Use `bind:checked` instead
```
> [!NOTE] Using 'bind:value' together with a checkbox input is not allowed. Use 'bind:checked' instead
## `bind_invalid_export`
```
Component %component% has an export named `%key%` that a consumer component is trying to access using `bind:%key%`, which is disallowed. Instead, use `bind:this` (e.g. `<%name% bind:this={component} />`) and then access the property on the bound component instance (e.g. `component.%key%`)
```
> [!NOTE] Component %component% has an export named '%key%' that a consumer component is trying to access using 'bind:%key%', which is disallowed. Instead, use 'bind:this' (e.g. '\<%name% bind:this={component} />') and then access the property on the bound component instance (e.g. 'component.%key%')
## `bind_not_bindable`
```
A component is attempting to bind to a non-bindable property `%key%` belonging to %component% (i.e. `<%name% bind:%key%={...}>`). To mark a property as bindable: `let { %key% = $bindable() } = $props()`
```
> [!NOTE] A component is attempting to bind to a non-bindable property '%key%' belonging to %component% (i.e. '\<%name% bind:%key%={...}>'). To mark a property as bindable: 'let { %key% = $bindable() } = $props()'
## `component_api_changed`
```
%parent% called `%method%` on an instance of %component%, which is no longer valid in Svelte 5. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes for more information
```
> [!NOTE] %parent% called '%method%' on an instance of %component%, which is no longer valid in Svelte 5. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes for more information
## `component_api_invalid_new`
```
Attempted to instantiate %component% with `new %name%`, which is no longer valid in Svelte 5. If this component is not under your control, set the `compatibility.componentApi` compiler option to `4` to keep it working. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes for more information
```
> [!NOTE] Attempted to instantiate %component% with 'new %name%', which is no longer valid in Svelte 5. If this component is not under your control, set the 'compatibility.componentApi' compiler option to '4' to keep it working. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes for more information
## `derived_references_self`
```
A derived value cannot reference itself recursively
```
> [!NOTE] A derived value cannot reference itself recursively
## `each_key_duplicate`
```
Keyed each block has duplicate key at indexes %a% and %b%
```
```
Keyed each block has duplicate key `%value%` at indexes %a% and %b%
```
> [!NOTE] Keyed each block has duplicate key at indexes %a% and %b%
> [!NOTE] Keyed each block has duplicate key '%value%' at indexes %a% and %b%
## `effect_in_teardown`
```
`%rune%` cannot be used inside an effect cleanup function
```
> [!NOTE] '%rune%' cannot be used inside an effect cleanup function
## `effect_in_unowned_derived`
```
Effect cannot be created inside a `$derived` value that was not itself created inside an effect
```
> [!NOTE] Effect cannot be created inside a '$derived' value that was not itself created inside an effect
## `effect_orphan`
```
`%rune%` can only be used inside an effect (e.g. during component initialisation)
```
> [!NOTE] '%rune%' can only be used inside an effect (e.g. during component initialisation)
## `effect_update_depth_exceeded`
```
Maximum update depth exceeded. This can happen when a reactive block or effect repeatedly sets a new value. Svelte limits the number of nested updates to prevent infinite loops
```
> [!NOTE] Maximum update depth exceeded. This can happen when a reactive block or effect repeatedly sets a new value. Svelte limits the number of nested updates to prevent infinite loops
## `hydration_failed`
```
Failed to hydrate the application
```
> [!NOTE] Failed to hydrate the application
## `invalid_default_snippet`
```
Cannot use `{@render children(...)}` if the parent component uses `let:` directives. Consider using a named snippet instead
```
> [!NOTE] Cannot use '{@render children(...)}' if the parent component uses 'let:' directives. Consider using a named snippet instead
## `invalid_snippet`
```
Could not `{@render}` snippet due to the expression being `null` or `undefined`. Consider using optional chaining `{@render snippet?.()}`
```
> [!NOTE] Could not '{@render}' snippet due to the expression being 'null' or 'undefined'. Consider using optional chaining '{@render snippet?.()}'
## `lifecycle_function_unavailable`
```
`%name%(...)` is not available on the server
```
> [!NOTE] '%name%(...)' is not available on the server
## `lifecycle_legacy_only`
```
`%name%(...)` cannot be used in runes mode
```
> [!NOTE] '%name%(...)' cannot be used in runes mode
## `lifecycle_outside_component`
```
`%name%(...)` can only be used during component initialisation
```
> [!NOTE] '%name%(...)' can only be used during component initialisation
## `props_invalid_value`
```
Cannot do `bind:%key%={undefined}` when `%key%` has a fallback value
```
> [!NOTE] Cannot do 'bind:%key%={undefined}' when '%key%' has a fallback value
## `props_rest_readonly`
```
Rest element properties of `$props()` such as `%property%` are readonly
```
> [!NOTE] Rest element properties of '$props()' such as '%property%' are readonly
## `rune_outside_svelte`
```
The `%rune%` rune is only available inside `.svelte` and `.svelte.js/ts` files
```
> [!NOTE] The '%rune%' rune is only available inside '.svelte' and '.svelte.js/ts' files
## `state_descriptors_fixed`
```
Property descriptors defined on `$state` objects must contain `value` and always be `enumerable`, `configurable` and `writable`.
```
> [!NOTE] Property descriptors defined on '$state' objects must contain 'value' and always be 'enumerable', 'configurable' and 'writable'.
## `state_prototype_fixed`
```
Cannot set prototype of `$state` object
```
> [!NOTE] Cannot set prototype of '$state' object
## `state_unsafe_local_read`
```
Reading state that was created inside the same derived is forbidden. Consider using `untrack` to read locally created state
```
> [!NOTE] Reading state that was created inside the same derived is forbidden. Consider using 'untrack' to read locally created state
## `state_unsafe_mutation`
```
Updating state inside a derived is forbidden. If the value should not be reactive, declare it without `$state`
```
> [!NOTE] Updating state inside a derived is forbidden. If the value should not be reactive, declare it without '$state'
## `store_invalid_shape`
```
`%name%` is not a store with a `subscribe` method
```
> [!NOTE] '%name%' is not a store with a 'subscribe' method
## `svelte_element_invalid_this_value`
```
The `this` prop on `<svelte:element>` must be a string, if defined
```
> [!NOTE] The 'this' prop on '\<svelte:element>' must be a string, if defined
@ -5,18 +5,13 @@ generated: 'generated by process-messages/index.js'
## `binding_property_non_reactive`
```
`%binding%` is binding to a non-reactive property
```
```
`%binding%` (%location%) is binding to a non-reactive property
```
> [!NOTE] '%binding%' is binding to a non-reactive property
> [!NOTE] '%binding%' (%location%) is binding to a non-reactive property
## `console_log_state`
```
Your `console.%method%` contained `$state` proxies. Consider using `$inspect(...)` or `$state.snapshot(...)` instead
```
> [!NOTE] Your 'console.%method%' contained '$state' proxies. Consider using '$inspect(...)' or '$state.snapshot(...)' instead
When logging a [proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy), browser devtools will log the proxy itself rather than the value it represents. In the case of Svelte, the 'target' of a `$state` proxy might not resemble its current value, which can be confusing.
@ -24,72 +19,49 @@ The easiest way to log a value as it changes over time is to use the [`$inspect`
## `dynamic_void_element_content`
```
`<svelte:element this="%tag%">` is a void element — it cannot have content
```
> [!NOTE] '\<svelte:element this="%tag%">' is a void element — it cannot have content
## `event_handler_invalid`
```
%handler% should be a function. Did you mean to %suggestion%?
```
> [!NOTE] %handler% should be a function. Did you mean to %suggestion%?
## `hydration_attribute_changed`
```
The `%attribute%` attribute on `%html%` changed its value between server and client renders. The client value, `%value%`, will be ignored in favour of the server value
```
> [!NOTE] The '%attribute%' attribute on '%html%' changed its value between server and client renders. The client value, '%value%', will be ignored in favour of the server value
## `hydration_html_changed`
```
The value of an `{@html ...}` block changed between server and client renders. The client value will be ignored in favour of the server value
```
```
The value of an `{@html ...}` block %location% changed between server and client renders. The client value will be ignored in favour of the server value
```
> [!NOTE] The value of an '{@html ...}' block changed between server and client renders. The client value will be ignored in favour of the server value
> [!NOTE] The value of an '{@html ...}' block %location% changed between server and client renders. The client value will be ignored in favour of the server value
## `hydration_mismatch`
```
Hydration failed because the initial UI does not match what was rendered on the server
```
```
Hydration failed because the initial UI does not match what was rendered on the server. The error occurred near %location%
```
> [!NOTE] Hydration failed because the initial UI does not match what was rendered on the server
> [!NOTE] Hydration failed because the initial UI does not match what was rendered on the server. The error occurred near %location%
## `invalid_raw_snippet_render`
```
The `render` function passed to `createRawSnippet` should return HTML for a single element
```
> [!NOTE] The 'render' function passed to 'createRawSnippet' should return HTML for a single element
## `lifecycle_double_unmount`
```
Tried to unmount a component that was not mounted
```
> [!NOTE] Tried to unmount a component that was not mounted
## `ownership_invalid_binding`
```
%parent% passed a value to %child% with `bind:`, but the value is owned by %owner%. Consider creating a binding between %owner% and %parent%
```
> [!NOTE] %parent% passed a value to %child% with 'bind:', but the value is owned by %owner%. Consider creating a binding between %owner% and %parent%
## `ownership_invalid_mutation`
```
Mutating a value outside the component that created it is strongly discouraged. Consider passing values to child components with `bind:`, or use a callback instead
```
```
%component% mutated a value owned by %owner%. This is strongly discouraged. Consider passing values to child components with `bind:`, or use a callback instead
```
> [!NOTE] Mutating a value outside the component that created it is strongly discouraged. Consider passing values to child components with 'bind:', or use a callback instead
> [!NOTE] %component% mutated a value owned by %owner%. This is strongly discouraged. Consider passing values to child components with 'bind:', or use a callback instead
## `state_proxy_equality_mismatch`
```
Reactive `$state(...)` proxies and the values they proxy have different identities. Because of this, comparisons with `%operator%` will produce unexpected results
```
> [!NOTE] Reactive '$state(...)' proxies and the values they proxy have different identities. Because of this, comparisons with '%operator%' will produce unexpected results
`$state(...)` creates a [proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) of the value it is passed. The proxy and the value have different identities, meaning equality checks will always return `false`:
@ -106,10 +78,7 @@ To resolve this, ensure you're comparing values where both values were created w
## `state_snapshot_uncloneable`
```
Value cannot be cloned with `$state.snapshot` — the original value was returned
```
```
The following properties cannot be cloned with `$state.snapshot` — the return value contains the originals:
> [!NOTE] Value cannot be cloned with '$state.snapshot' — the original value was returned
> [!NOTE] The following properties cannot be cloned with '$state.snapshot' — the return value contains the originals:
Simon Holthausen
11 months ago