msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

generate codes using [!NOTE], remove any backticks and escape `<` characters

Browse Source
pull/13557/head
Simon Holthausen 11 months ago
parent 0613ed961c
commit b893e63287
5 changed files with 297 additions and 854 deletions
Show Stats Download Patch File Download Diff File

625
documentation/docs/98-reference/30-compiler-errors.md
View File

File diff suppressed because it is too large Load Diff

331
documentation/docs/98-reference/30-compiler-warnings.md
Unescape View File

@ -5,351 +5,235 @@ generated: 'generated by process-messages/index.js'
## `a11y_accesskey` ## `a11y_accesskey`
``` > [!NOTE] Avoid using accesskey
Avoid using accesskey
```
## `a11y_aria_activedescendant_has_tabindex` ## `a11y_aria_activedescendant_has_tabindex`
``` > [!NOTE] An element with an aria-activedescendant attribute should have a tabindex value
An element with an aria-activedescendant attribute should have a tabindex value
```
## `a11y_aria_attributes` ## `a11y_aria_attributes`
``` > [!NOTE] '\<%name%>' should not have aria-* attributes
`<%name%>` should not have aria-* attributes
```
## `a11y_autocomplete_valid` ## `a11y_autocomplete_valid`
``` > [!NOTE] '%value%' is an invalid value for 'autocomplete' on '\<input type="%type%">'
'%value%' is an invalid value for 'autocomplete' on `<input type="%type%">`
```
## `a11y_autofocus` ## `a11y_autofocus`
``` > [!NOTE] Avoid using autofocus
Avoid using autofocus
```
## `a11y_click_events_have_key_events` ## `a11y_click_events_have_key_events`
``` > [!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
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` ## `a11y_consider_explicit_label`
``` > [!NOTE] Buttons and links should either contain text or have an 'aria-label' or 'aria-labelledby' attribute
Buttons and links should either contain text or have an `aria-label` or `aria-labelledby` attribute
```
## `a11y_distracting_elements` ## `a11y_distracting_elements`
``` > [!NOTE] Avoid '\<%name%>' elements
Avoid `<%name%>` elements
```
## `a11y_figcaption_index` ## `a11y_figcaption_index`
``` > [!NOTE] '\<figcaption>' must be first or last child of '\<figure>'
`<figcaption>` must be first or last child of `<figure>`
```
## `a11y_figcaption_parent` ## `a11y_figcaption_parent`
``` > [!NOTE] '\<figcaption>' must be an immediate child of '\<figure>'
`<figcaption>` must be an immediate child of `<figure>`
```
## `a11y_hidden` ## `a11y_hidden`
``` > [!NOTE] '\<%name%>' element should not be hidden
`<%name%>` element should not be hidden
```
## `a11y_img_redundant_alt` ## `a11y_img_redundant_alt`
``` > [!NOTE] Screenreaders already announce '\<img>' elements as an image
Screenreaders already announce `<img>` elements as an image
```
## `a11y_incorrect_aria_attribute_type` ## `a11y_incorrect_aria_attribute_type`
``` > [!NOTE] The value of '%attribute%' must be a %type%
The value of '%attribute%' must be a %type%
```
## `a11y_incorrect_aria_attribute_type_boolean` ## `a11y_incorrect_aria_attribute_type_boolean`
``` > [!NOTE] The value of '%attribute%' must be either 'true' or 'false'. It cannot be empty
The value of '%attribute%' must be either 'true' or 'false'. It cannot be empty
```
## `a11y_incorrect_aria_attribute_type_id` ## `a11y_incorrect_aria_attribute_type_id`
``` > [!NOTE] The value of '%attribute%' must be a string that represents a DOM element ID
The value of '%attribute%' must be a string that represents a DOM element ID
```
## `a11y_incorrect_aria_attribute_type_idlist` ## `a11y_incorrect_aria_attribute_type_idlist`
``` > [!NOTE] The value of '%attribute%' must be a space-separated list of strings that represent DOM element IDs
The value of '%attribute%' must be a space-separated list of strings that represent DOM element IDs
```
## `a11y_incorrect_aria_attribute_type_integer` ## `a11y_incorrect_aria_attribute_type_integer`
``` > [!NOTE] The value of '%attribute%' must be an integer
The value of '%attribute%' must be an integer
```
## `a11y_incorrect_aria_attribute_type_token` ## `a11y_incorrect_aria_attribute_type_token`
``` > [!NOTE] The value of '%attribute%' must be exactly one of %values%
The value of '%attribute%' must be exactly one of %values%
```
## `a11y_incorrect_aria_attribute_type_tokenlist` ## `a11y_incorrect_aria_attribute_type_tokenlist`
``` > [!NOTE] The value of '%attribute%' must be a space-separated list of one or more of %values%
The value of '%attribute%' must be a space-separated list of one or more of %values%
```
## `a11y_incorrect_aria_attribute_type_tristate` ## `a11y_incorrect_aria_attribute_type_tristate`
``` > [!NOTE] The value of '%attribute%' must be exactly one of true, false, or mixed
The value of '%attribute%' must be exactly one of true, false, or mixed
```
## `a11y_interactive_supports_focus` ## `a11y_interactive_supports_focus`
``` > [!NOTE] Elements with the '%role%' interactive role must have a tabindex value
Elements with the '%role%' interactive role must have a tabindex value
```
## `a11y_invalid_attribute` ## `a11y_invalid_attribute`
``` > [!NOTE] '%href_value%' is not a valid %href_attribute% attribute
'%href_value%' is not a valid %href_attribute% attribute
```
## `a11y_label_has_associated_control` ## `a11y_label_has_associated_control`
``` > [!NOTE] A form label must be associated with a control
A form label must be associated with a control
```
## `a11y_media_has_caption` ## `a11y_media_has_caption`
``` > [!NOTE] '\<video>' elements must have a '\<track kind="captions">'
`<video>` elements must have a `<track kind="captions">`
```
## `a11y_misplaced_role` ## `a11y_misplaced_role`
``` > [!NOTE] '\<%name%>' should not have role attribute
`<%name%>` should not have role attribute
```
## `a11y_misplaced_scope` ## `a11y_misplaced_scope`
``` > [!NOTE] The scope attribute should only be used with '\<th>' elements
The scope attribute should only be used with `<th>` elements
```
## `a11y_missing_attribute` ## `a11y_missing_attribute`
``` > [!NOTE] '\<%name%>' element should have %article% %sequence% attribute
`<%name%>` element should have %article% %sequence% attribute
```
## `a11y_missing_content` ## `a11y_missing_content`
``` > [!NOTE] '\<%name%>' element should contain text
`<%name%>` element should contain text
```
## `a11y_mouse_events_have_key_events` ## `a11y_mouse_events_have_key_events`
``` > [!NOTE] '%event%' event must be accompanied by '%accompanied_by%' event
'%event%' event must be accompanied by '%accompanied_by%' event
```
## `a11y_no_abstract_role` ## `a11y_no_abstract_role`
``` > [!NOTE] Abstract role '%role%' is forbidden
Abstract role '%role%' is forbidden
```
## `a11y_no_interactive_element_to_noninteractive_role` ## `a11y_no_interactive_element_to_noninteractive_role`
``` > [!NOTE] '\<%element%>' cannot have role '%role%'
`<%element%>` cannot have role '%role%'
```
## `a11y_no_noninteractive_element_interactions` ## `a11y_no_noninteractive_element_interactions`
``` > [!NOTE] Non-interactive element '\<%element%>' should not be assigned mouse or keyboard event listeners
Non-interactive element `<%element%>` should not be assigned mouse or keyboard event listeners
```
## `a11y_no_noninteractive_element_to_interactive_role` ## `a11y_no_noninteractive_element_to_interactive_role`
``` > [!NOTE] Non-interactive element '\<%element%>' cannot have interactive role '%role%'
Non-interactive element `<%element%>` cannot have interactive role '%role%'
```
## `a11y_no_noninteractive_tabindex` ## `a11y_no_noninteractive_tabindex`
``` > [!NOTE] noninteractive element cannot have nonnegative tabIndex value
noninteractive element cannot have nonnegative tabIndex value
```
## `a11y_no_redundant_roles` ## `a11y_no_redundant_roles`
``` > [!NOTE] Redundant role '%role%'
Redundant role '%role%'
```
## `a11y_no_static_element_interactions` ## `a11y_no_static_element_interactions`
``` > [!NOTE] '\<%element%>' with a %handler% handler must have an ARIA role
`<%element%>` with a %handler% handler must have an ARIA role
```
## `a11y_positive_tabindex` ## `a11y_positive_tabindex`
``` > [!NOTE] Avoid tabindex values above zero
Avoid tabindex values above zero
```
## `a11y_role_has_required_aria_props` ## `a11y_role_has_required_aria_props`
``` > [!NOTE] Elements with the ARIA role "%role%" must have the following attributes defined: %props%
Elements with the ARIA role "%role%" must have the following attributes defined: %props%
```
## `a11y_role_supports_aria_props` ## `a11y_role_supports_aria_props`
``` > [!NOTE] The attribute '%attribute%' is not supported by the role '%role%'
The attribute '%attribute%' is not supported by the role '%role%'
```
## `a11y_role_supports_aria_props_implicit` ## `a11y_role_supports_aria_props_implicit`
``` > [!NOTE] The attribute '%attribute%' is not supported by the role '%role%'. This role is implicit on the element '\<%name%>'
The attribute '%attribute%' is not supported by the role '%role%'. This role is implicit on the element `<%name%>`
```
## `a11y_unknown_aria_attribute` ## `a11y_unknown_aria_attribute`
``` > [!NOTE] Unknown aria attribute 'aria-%attribute%'
Unknown aria attribute 'aria-%attribute%'
``` > [!NOTE] Unknown aria attribute 'aria-%attribute%'. Did you mean '%suggestion%'?
```
Unknown aria attribute 'aria-%attribute%'. Did you mean '%suggestion%'?
```
## `a11y_unknown_role` ## `a11y_unknown_role`
``` > [!NOTE] Unknown role '%role%'
Unknown role '%role%'
``` > [!NOTE] Unknown role '%role%'. Did you mean '%suggestion%'?
```
Unknown role '%role%'. Did you mean '%suggestion%'?
```
## `attribute_avoid_is` ## `attribute_avoid_is`
``` > [!NOTE] The "is" attribute is not supported cross-browser and should be avoided
The "is" attribute is not supported cross-browser and should be avoided
```
## `attribute_global_event_reference` ## `attribute_global_event_reference`
``` > [!NOTE] You are referencing 'globalThis.%name%'. Did you forget to declare a variable with that name?
You are referencing `globalThis.%name%`. Did you forget to declare a variable with that name?
```
## `attribute_illegal_colon` ## `attribute_illegal_colon`
``` > [!NOTE] Attributes should not contain ':' characters to prevent ambiguity with Svelte directives
Attributes should not contain ':' characters to prevent ambiguity with Svelte directives
```
## `attribute_invalid_property_name` ## `attribute_invalid_property_name`
``` > [!NOTE] '%wrong%' is not a valid HTML attribute. Did you mean '%right%'?
'%wrong%' is not a valid HTML attribute. Did you mean '%right%'?
```
## `attribute_quoted` ## `attribute_quoted`
``` > [!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
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` ## `bind_invalid_each_rest`
``` > [!NOTE] The rest operator (...) will create a new object and binding '%name%' with the original object will not work
The rest operator (...) will create a new object and binding '%name%' with the original object will not work
```
## `block_empty` ## `block_empty`
``` > [!NOTE] Empty block
Empty block
```
## `component_name_lowercase` ## `component_name_lowercase`
``` > [!NOTE] '\<%name%>' will be treated as an HTML element unless it begins with a capital letter
`<%name%>` will be treated as an HTML element unless it begins with a capital letter
```
## `css_unused_selector` ## `css_unused_selector`
``` > [!NOTE] Unused CSS selector "%name%"
Unused CSS selector "%name%"
```
## `element_invalid_self_closing_tag` ## `element_invalid_self_closing_tag`
``` > [!NOTE] Self-closing HTML tags for non-void elements are ambiguous — use '\<%name% ...>\</%name%>' rather than '\<%name% ... />'
Self-closing HTML tags for non-void elements are ambiguous — use `<%name% ...></%name%>` rather than `<%name% ... />`
```
## `event_directive_deprecated` ## `event_directive_deprecated`
``` > [!NOTE] Using 'on:%name%' to listen to the %name% event is deprecated. Use the event attribute 'on%name%' instead
Using `on:%name%` to listen to the %name% event is deprecated. Use the event attribute `on%name%` instead
```
## `export_let_unused` ## `export_let_unused`
``` > [!NOTE] Component has unused export property '%name%'. If it is for external reference only, please consider using 'export const %name%'
Component has unused export property '%name%'. If it is for external reference only, please consider using `export const %name%`
```
## `legacy_code` ## `legacy_code`
``` > [!NOTE] '%code%' is no longer valid — please use '%suggestion%' instead
`%code%` is no longer valid — please use `%suggestion%` instead
```
## `legacy_component_creation` ## `legacy_component_creation`
``` > [!NOTE] Svelte 5 components are no longer classes. Instantiate them using 'mount' or 'hydrate' (imported from 'svelte') instead.
Svelte 5 components are no longer classes. Instantiate them using `mount` or `hydrate` (imported from 'svelte') instead.
```
## `node_invalid_placement_ssr` ## `node_invalid_placement_ssr`
``` > [!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
%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: 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` ## `non_reactive_update`
``` > [!NOTE] '%name%' is updated, but is not declared with '$state(...)'. Changing its value will not correctly trigger updates
`%name%` is updated, but is not declared with `$state(...)`. Changing its value will not correctly trigger updates
```
## `options_deprecated_accessors` ## `options_deprecated_accessors`
``` > [!NOTE] The 'accessors' option has been deprecated. It will have no effect in runes mode
The `accessors` option has been deprecated. It will have no effect in runes mode
```
## `options_deprecated_immutable` ## `options_deprecated_immutable`
``` > [!NOTE] The 'immutable' option has been deprecated. It will have no effect in runes mode
The `immutable` option has been deprecated. It will have no effect in runes mode
```
## `options_missing_custom_element` ## `options_missing_custom_element`
``` > [!NOTE] The 'customElement' option is used when generating a custom element. Did you forget the 'customElement: true' compile option?
The `customElement` option is used when generating a custom element. Did you forget the `customElement: true` compile option?
```
## `options_removed_enable_sourcemap` ## `options_removed_enable_sourcemap`
``` > [!NOTE] The 'enableSourcemap' option has been removed. Source maps are always generated now, and tooling can choose to ignore them
The `enableSourcemap` option has been removed. Source maps are always generated now, and tooling can choose to ignore them
```
## `options_removed_hydratable` ## `options_removed_hydratable`
``` > [!NOTE] The 'hydratable' option has been removed. Svelte components are always hydratable now
The `hydratable` option has been removed. Svelte components are always hydratable now
```
## `options_removed_loop_guard_timeout` ## `options_removed_loop_guard_timeout`
``` > [!NOTE] The 'loopGuardTimeout' option has been removed
The `loopGuardTimeout` option has been removed
```
## `options_renamed_ssr_dom` ## `options_renamed_ssr_dom`
``` > [!NOTE] 'generate: "dom"' and 'generate: "ssr"' options have been renamed to "client" and "server" respectively
`generate: "dom"` and `generate: "ssr"` options have been renamed to "client" and "server" respectively
```
## `perf_avoid_inline_class` ## `perf_avoid_inline_class`
``` > [!NOTE] Avoid 'new class' — instead, declare the class at the top level scope
Avoid 'new class' — instead, declare the class at the top level scope
```
## `perf_avoid_nested_class` ## `perf_avoid_nested_class`
``` > [!NOTE] Avoid declaring classes below the top level scope
Avoid declaring classes below the top level scope
```
## `reactive_declaration_invalid_placement` ## `reactive_declaration_invalid_placement`
``` > [!NOTE] Reactive declarations only exist at the top level of the instance script
Reactive declarations only exist at the top level of the instance script
```
## `reactive_declaration_module_script_dependency` ## `reactive_declaration_module_script_dependency`
``` > [!NOTE] Reassignments of module-level declarations will not cause reactive statements to update
Reassignments of module-level declarations will not cause reactive statements to update
```
## `reactive_declaration_non_reactive_property` ## `reactive_declaration_non_reactive_property`
``` > [!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
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` ## `script_context_deprecated`
``` > [!NOTE] 'context="module"' is deprecated, use the 'module' attribute instead
`context="module"` is deprecated, use the `module` attribute instead
```
## `script_unknown_attribute` ## `script_unknown_attribute`
``` > [!NOTE] Unrecognized attribute — should be one of 'generics', 'lang' or 'module'. If this exists for a preprocessor, ensure that the preprocessor removes it
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` ## `slot_element_deprecated`
``` > [!NOTE] Using '\<slot>' to render parent content is deprecated. Use '{@render ...}' tags instead
Using `<slot>` to render parent content is deprecated. Use `{@render ...}` tags instead
```
## `state_referenced_locally` ## `state_referenced_locally`
``` > [!NOTE] State referenced in its own scope will never update. Did you mean to reference it inside a closure?
State referenced in its own scope will never update. Did you mean to reference it inside a closure?
```
## `store_rune_conflict` ## `store_rune_conflict`
``` > [!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
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_deprecated`
``` > [!NOTE] '\<svelte:component>' is deprecated in runes mode — components are dynamic by default
`<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. 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` ## `svelte_element_invalid_this`
``` > [!NOTE] 'this' should be an '{expression}'. Using a string attribute value will cause an error in future versions of Svelte
`this` should be an `{expression}`. Using a string attribute value will cause an error in future versions of Svelte
```
## `svelte_self_deprecated` ## `svelte_self_deprecated`
``` > [!NOTE] '\<svelte:self>' is deprecated — use self-imports (e.g. 'import %name% from './%basename%'') instead
`<svelte:self>` is deprecated — use self-imports (e.g. `import %name% from './%basename%'`) instead
```
## `unknown_code` ## `unknown_code`
``` > [!NOTE] '%code%' is not a recognised code
`%code%` is not a recognised code
``` > [!NOTE] '%code%' is not a recognised code (did you mean '%suggestion%'?)
```
`%code%` is not a recognised code (did you mean `%suggestion%`?)
```

109
documentation/docs/98-reference/30-runtime-errors.md
Unescape View File

@ -5,159 +5,106 @@ generated: 'generated by process-messages/index.js'
## `bind_invalid_checkbox_value` ## `bind_invalid_checkbox_value`
``` > [!NOTE] Using 'bind:value' together with a checkbox input is not allowed. Use 'bind:checked' instead
Using `bind:value` together with a checkbox input is not allowed. Use `bind:checked` instead
```
## `bind_invalid_export` ## `bind_invalid_export`
``` > [!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%')
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` ## `bind_not_bindable`
``` > [!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()'
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` ## `component_api_changed`
``` > [!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
%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` ## `component_api_invalid_new`
``` > [!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
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` ## `derived_references_self`
``` > [!NOTE] A derived value cannot reference itself recursively
A derived value cannot reference itself recursively
```
## `each_key_duplicate` ## `each_key_duplicate`
``` > [!NOTE] Keyed each block has duplicate key at indexes %a% and %b%
Keyed each block has duplicate key at indexes %a% and %b%
``` > [!NOTE] Keyed each block has duplicate key '%value%' at indexes %a% and %b%
```
Keyed each block has duplicate key `%value%` at indexes %a% and %b%
```
## `effect_in_teardown` ## `effect_in_teardown`
``` > [!NOTE] '%rune%' cannot be used inside an effect cleanup function
`%rune%` cannot be used inside an effect cleanup function
```
## `effect_in_unowned_derived` ## `effect_in_unowned_derived`
``` > [!NOTE] Effect cannot be created inside a '$derived' value that was not itself created inside an effect
Effect cannot be created inside a `$derived` value that was not itself created inside an effect
```
## `effect_orphan` ## `effect_orphan`
``` > [!NOTE] '%rune%' can only be used inside an effect (e.g. during component initialisation)
`%rune%` can only be used inside an effect (e.g. during component initialisation)
```
## `effect_update_depth_exceeded` ## `effect_update_depth_exceeded`
``` > [!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
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` ## `hydration_failed`
``` > [!NOTE] Failed to hydrate the application
Failed to hydrate the application
```
## `invalid_default_snippet` ## `invalid_default_snippet`
``` > [!NOTE] Cannot use '{@render children(...)}' if the parent component uses 'let:' directives. Consider using a named snippet instead
Cannot use `{@render children(...)}` if the parent component uses `let:` directives. Consider using a named snippet instead
```
## `invalid_snippet` ## `invalid_snippet`
``` > [!NOTE] Could not '{@render}' snippet due to the expression being 'null' or 'undefined'. Consider using optional chaining '{@render snippet?.()}'
Could not `{@render}` snippet due to the expression being `null` or `undefined`. Consider using optional chaining `{@render snippet?.()}`
```
## `lifecycle_function_unavailable` ## `lifecycle_function_unavailable`
``` > [!NOTE] '%name%(...)' is not available on the server
`%name%(...)` is not available on the server
```
## `lifecycle_legacy_only` ## `lifecycle_legacy_only`
``` > [!NOTE] '%name%(...)' cannot be used in runes mode
`%name%(...)` cannot be used in runes mode
```
## `lifecycle_outside_component` ## `lifecycle_outside_component`
``` > [!NOTE] '%name%(...)' can only be used during component initialisation
`%name%(...)` can only be used during component initialisation
```
## `props_invalid_value` ## `props_invalid_value`
``` > [!NOTE] Cannot do 'bind:%key%={undefined}' when '%key%' has a fallback value
Cannot do `bind:%key%={undefined}` when `%key%` has a fallback value
```
## `props_rest_readonly` ## `props_rest_readonly`
``` > [!NOTE] Rest element properties of '$props()' such as '%property%' are readonly
Rest element properties of `$props()` such as `%property%` are readonly
```
## `rune_outside_svelte` ## `rune_outside_svelte`
``` > [!NOTE] The '%rune%' rune is only available inside '.svelte' and '.svelte.js/ts' files
The `%rune%` rune is only available inside `.svelte` and `.svelte.js/ts` files
```
## `state_descriptors_fixed` ## `state_descriptors_fixed`
``` > [!NOTE] Property descriptors defined on '$state' objects must contain 'value' and always be 'enumerable', 'configurable' and 'writable'.
Property descriptors defined on `$state` objects must contain `value` and always be `enumerable`, `configurable` and `writable`.
```
## `state_prototype_fixed` ## `state_prototype_fixed`
``` > [!NOTE] Cannot set prototype of '$state' object
Cannot set prototype of `$state` object
```
## `state_unsafe_local_read` ## `state_unsafe_local_read`
``` > [!NOTE] Reading state that was created inside the same derived is forbidden. Consider using 'untrack' to read locally created state
Reading state that was created inside the same derived is forbidden. Consider using `untrack` to read locally created state
```
## `state_unsafe_mutation` ## `state_unsafe_mutation`
``` > [!NOTE] Updating state inside a derived is forbidden. If the value should not be reactive, declare it without '$state'
Updating state inside a derived is forbidden. If the value should not be reactive, declare it without `$state`
```
## `store_invalid_shape` ## `store_invalid_shape`
``` > [!NOTE] '%name%' is not a store with a 'subscribe' method
`%name%` is not a store with a `subscribe` method
```
## `svelte_element_invalid_this_value` ## `svelte_element_invalid_this_value`
``` > [!NOTE] The 'this' prop on '\<svelte:element>' must be a string, if defined
The `this` prop on `<svelte:element>` must be a string, if defined
```

77
documentation/docs/98-reference/30-runtime-warnings.md
Unescape View File

@ -5,18 +5,13 @@ generated: 'generated by process-messages/index.js'
## `binding_property_non_reactive` ## `binding_property_non_reactive`
``` > [!NOTE] '%binding%' is binding to a non-reactive property
`%binding%` is binding to a non-reactive property
``` > [!NOTE] '%binding%' (%location%) is binding to a non-reactive property
```
`%binding%` (%location%) is binding to a non-reactive property
```
## `console_log_state` ## `console_log_state`
``` > [!NOTE] Your 'console.%method%' contained '$state' proxies. Consider using '$inspect(...)' or '$state.snapshot(...)' instead
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. 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` ## `dynamic_void_element_content`
``` > [!NOTE] '\<svelte:element this="%tag%">' is a void element — it cannot have content
`<svelte:element this="%tag%">` is a void element — it cannot have content
```
## `event_handler_invalid` ## `event_handler_invalid`
``` > [!NOTE] %handler% should be a function. Did you mean to %suggestion%?
%handler% should be a function. Did you mean to %suggestion%?
```
## `hydration_attribute_changed` ## `hydration_attribute_changed`
``` > [!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
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` ## `hydration_html_changed`
``` > [!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
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
```
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_mismatch`
``` > [!NOTE] 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
``` > [!NOTE] Hydration failed because the initial UI does not match what was rendered on the server. The error occurred near %location%
```
Hydration failed because the initial UI does not match what was rendered on the server. The error occurred near %location%
```
## `invalid_raw_snippet_render` ## `invalid_raw_snippet_render`
``` > [!NOTE] The 'render' function passed to 'createRawSnippet' should return HTML for a single element
The `render` function passed to `createRawSnippet` should return HTML for a single element
```
## `lifecycle_double_unmount` ## `lifecycle_double_unmount`
``` > [!NOTE] Tried to unmount a component that was not mounted
Tried to unmount a component that was not mounted
```
## `ownership_invalid_binding` ## `ownership_invalid_binding`
``` > [!NOTE] %parent% passed a value to %child% with 'bind:', but the value is owned by %owner%. Consider creating a binding between %owner% and %parent%
%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` ## `ownership_invalid_mutation`
``` > [!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
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
```
%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` ## `state_proxy_equality_mismatch`
``` > [!NOTE] Reactive '$state(...)' proxies and the values they proxy have different identities. Because of this, comparisons with '%operator%' will produce unexpected results
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`: `$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` ## `state_snapshot_uncloneable`
``` > [!NOTE] Value cannot be cloned with '$state.snapshot' — the original value was returned
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:
```
The following properties cannot be cloned with `$state.snapshot` — the return value contains the originals:
%properties% %properties%
```

9
packages/svelte/scripts/process-messages/index.js
Unescape View File

@ -102,14 +102,13 @@ for (const [category, codes] of Object.entries(consolidated_messages)) {
for (const [code, { messages, details }] of sorted_codes) { for (const [code, { messages, details }] of sorted_codes) {
lines.push(`## \`${code}\`\n`); lines.push(`## \`${code}\`\n`);
for (const message of messages) { for (const message of messages) {
lines.push('```'); // Replace backticks with single quotes to avoid markdown formatting it to code blocks
lines.push(message); // Also make sure to escape < to avoid markdown interpreting it as an HTML tag
lines.push('```'); lines.push('> [!NOTE] ' + message.replaceAll('`', "'").replace(/(?<!\\)</g, '\\<') + '\n');
} }
if (details) { if (details) {
lines.push('\n' + details); lines.push(details + '\n');
} }
lines.push('');
} }
fs.writeFileSync( fs.writeFileSync(

Write Preview
Loading…
Cancel
Save