@ -83,7 +83,7 @@ If you're using tools like Rollup or Webpack instead, install their respective S
When using TypeScript, make sure your `tsconfig.json` is setup correctly.
- Use a [`target`](https://www.typescriptlang.org/tsconfig/#target) of at least `ES2022`, or a `target` of at least `ES2015` alongside [`useDefineForClassFields`](https://www.typescriptlang.org/tsconfig/#useDefineForClassFields). This ensures that rune declarations on class fields are not messed with, which would break the Svelte compiler
- Use a [`target`](https://www.typescriptlang.org/tsconfig/#target) of at least `ES2015` so classes are not compiled to functions
- Set [`verbatimModuleSyntax`](https://www.typescriptlang.org/tsconfig/#verbatimModuleSyntax) to `true` so that imports are left as-is
- Set [`isolatedModules`](https://www.typescriptlang.org/tsconfig/#isolatedModules) to `true` so that each file is looked at in isolation. TypeScript has a few features which require cross-file analysis and compilation, which the Svelte compiler and tooling like Vite don't do.
@ -74,6 +74,12 @@ Effect cannot be created inside a `$derived` value that was not itself created i
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
```
### get_abort_signal_outside_reaction
```
`getAbortSignal()` can only be called inside an effect or derived
@ -48,6 +48,10 @@ See the [migration guide](/docs/svelte/v5-migration-guide#Components-are-no-long
> 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
## get_abort_signal_outside_reaction
> `getAbortSignal()` can only be called inside an effect or derived
e(node,'bind_invalid_name',`${explanation?`\`bind:${name}\` is not a valid binding. ${explanation}`:`\`bind:${name}\` is not a valid binding`}\nhttps://svelte.dev/e/bind_invalid_name`);
e(node,'bind_invalid_name',`${explanation
?`\`bind:${name}\` is not a valid binding. ${explanation}`
:`\`bind:${name}\` is not a valid binding`}\nhttps://svelte.dev/e/bind_invalid_name`);
w(node,'a11y_unknown_aria_attribute',`${suggestion?`Unknown aria attribute 'aria-${attribute}'. Did you mean '${suggestion}'?`:`Unknown aria attribute 'aria-${attribute}'`}\nhttps://svelte.dev/e/a11y_unknown_aria_attribute`);
w(node,'a11y_unknown_role',`${suggestion?`Unknown role '${role}'. Did you mean '${suggestion}'?`:`Unknown role '${role}'`}\nhttps://svelte.dev/e/a11y_unknown_role`);
w(node,'a11y_unknown_role',`${suggestion
?`Unknown role '${role}'. Did you mean '${suggestion}'?`
:`Unknown role '${role}'`}\nhttps://svelte.dev/e/a11y_unknown_role`);
}
/**
@ -534,7 +533,9 @@ export function legacy_code(node, code, suggestion) {
*@param{string|undefined|null}[suggestion]
*/
exportfunctionunknown_code(node,code,suggestion){
w(node,'unknown_code',`${suggestion?`\`${code}\` is not a recognised code (did you mean \`${suggestion}\`?)`:`\`${code}\` is not a recognised code`}\nhttps://svelte.dev/e/unknown_code`);
w(node,'unknown_code',`${suggestion
?`\`${code}\` is not a recognised code (did you mean \`${suggestion}\`?)`
:`\`${code}\` is not a recognised code`}\nhttps://svelte.dev/e/unknown_code`);
*Returnsan[`AbortSignal`](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that aborts when the current [derived](https://svelte.dev/docs/svelte/$derived) or [effect](https://svelte.dev/docs/svelte/$effect) re-runs or is destroyed.
@ -11,6 +11,7 @@ export function bind_invalid_checkbox_value() {
consterror=newError(`bind_invalid_checkbox_value\nUsing \`bind:value\` together with a checkbox input is not allowed. Use \`bind:checked\` instead\nhttps://svelte.dev/e/bind_invalid_checkbox_value`);
@ -29,6 +30,7 @@ export function bind_invalid_export(component, key, name) {
consterror=newError(`bind_invalid_export\nComponent ${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}\`)\nhttps://svelte.dev/e/bind_invalid_export`);
@ -47,6 +49,7 @@ export function bind_not_bindable(key, component, name) {
consterror=newError(`bind_not_bindable\nA 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()\`\nhttps://svelte.dev/e/bind_not_bindable`);
@ -64,6 +67,7 @@ export function component_api_changed(method, component) {
consterror=newError(`component_api_changed\nCalling \`${method}\` on a component instance (of ${component}) is no longer valid in Svelte 5\nhttps://svelte.dev/e/component_api_changed`);
@ -81,6 +85,7 @@ export function component_api_invalid_new(component, name) {
consterror=newError(`component_api_invalid_new\nAttempted 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.\nhttps://svelte.dev/e/component_api_invalid_new`);
@ -111,9 +117,12 @@ export function derived_references_self() {
*/
exportfunctioneach_key_duplicate(a,b,value){
if(DEV){
consterror=newError(`each_key_duplicate\n${value?`Keyed each block has duplicate key \`${value}\` at indexes ${a} and ${b}`:`Keyed each block has duplicate key at indexes ${a} and ${b}`}\nhttps://svelte.dev/e/each_key_duplicate`);
consterror=newError(`each_key_duplicate\n${value
?`Keyed each block has duplicate key \`${value}\` at indexes ${a} and ${b}`
:`Keyed each block has duplicate key at indexes ${a} and ${b}`}\nhttps://svelte.dev/e/each_key_duplicate`);
@ -145,6 +155,7 @@ export function effect_in_unowned_derived() {
consterror=newError(`effect_in_unowned_derived\nEffect cannot be created inside a \`$derived\` value that was not itself created inside an effect\nhttps://svelte.dev/e/effect_in_unowned_derived`);
@ -161,6 +172,7 @@ export function effect_orphan(rune) {
consterror=newError(`effect_orphan\n\`${rune}\` can only be used inside an effect (e.g. during component initialisation)\nhttps://svelte.dev/e/effect_orphan`);
@ -176,12 +188,29 @@ export function effect_update_depth_exceeded() {
consterror=newError(`effect_update_depth_exceeded\nMaximum 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\nhttps://svelte.dev/e/effect_update_depth_exceeded`);
consterror=newError(`get_abort_signal_outside_reaction\n\`getAbortSignal()\` can only be called inside an effect or derived\nhttps://svelte.dev/e/get_abort_signal_outside_reaction`);
@ -206,6 +236,7 @@ export function invalid_snippet() {
consterror=newError(`invalid_snippet\nCould not \`{@render}\` snippet due to the expression being \`null\` or \`undefined\`. Consider using optional chaining \`{@render snippet?.()}\`\nhttps://svelte.dev/e/invalid_snippet`);
@ -238,6 +270,7 @@ export function props_invalid_value(key) {
consterror=newError(`props_invalid_value\nCannot do \`bind:${key}={undefined}\` when \`${key}\` has a fallback value\nhttps://svelte.dev/e/props_invalid_value`);
@ -254,6 +287,7 @@ export function props_rest_readonly(property) {
consterror=newError(`props_rest_readonly\nRest element properties of \`$props()\` such as \`${property}\` are readonly\nhttps://svelte.dev/e/props_rest_readonly`);
@ -270,6 +304,7 @@ export function rune_outside_svelte(rune) {
consterror=newError(`rune_outside_svelte\nThe \`${rune}\` rune is only available inside \`.svelte\` and \`.svelte.js/ts\` files\nhttps://svelte.dev/e/rune_outside_svelte`);
@ -285,6 +320,7 @@ export function state_descriptors_fixed() {
consterror=newError(`state_descriptors_fixed\nProperty descriptors defined on \`$state\` objects must contain \`value\` and always be \`enumerable\`, \`configurable\` and \`writable\`.\nhttps://svelte.dev/e/state_descriptors_fixed`);
@ -315,6 +352,7 @@ export function state_unsafe_mutation() {
consterror=newError(`state_unsafe_mutation\nUpdating state inside \`$derived(...)\`, \`$inspect(...)\` or a template expression is forbidden. If the value should not be reactive, declare it without \`$state\`\nhttps://svelte.dev/e/state_unsafe_mutation`);
console.warn(`%c[svelte] binding_property_non_reactive\n%c${location?`\`${binding}\` (${location}) is binding to a non-reactive property`:`\`${binding}\` is binding to a non-reactive property`}\nhttps://svelte.dev/e/binding_property_non_reactive`,bold,normal);
@ -76,7 +82,13 @@ export function hydration_attribute_changed(attribute, html, value) {
*/
exportfunctionhydration_html_changed(location){
if(DEV){
console.warn(`%c[svelte] hydration_html_changed\n%c${location?`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 changed between server and client renders. The client value will be ignored in favour of the server value'}\nhttps://svelte.dev/e/hydration_html_changed`,bold,normal);
console.warn(
`%c[svelte] hydration_html_changed\n%c${location
?`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 changed between server and client renders. The client value will be ignored in favour of the server value'}\nhttps://svelte.dev/e/hydration_html_changed`,
@ -88,7 +100,13 @@ export function hydration_html_changed(location) {
*/
exportfunctionhydration_mismatch(location){
if(DEV){
console.warn(`%c[svelte] hydration_mismatch\n%c${location?`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'}\nhttps://svelte.dev/e/hydration_mismatch`,bold,normal);
console.warn(
`%c[svelte] hydration_mismatch\n%c${location
?`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'}\nhttps://svelte.dev/e/hydration_mismatch`,
/* This file is generated by scripts/process-messages/index.js. Do not edit! */
/**
*`%name%(...)`isnotavailableontheserver
*@param{string}name
@ -9,5 +11,6 @@ export function lifecycle_function_unavailable(name) {
consterror=newError(`lifecycle_function_unavailable\n\`${name}(...)\` is not available on the server\nhttps://svelte.dev/e/lifecycle_function_unavailable`);
@ -11,6 +11,7 @@ export function invalid_default_snippet() {
consterror=newError(`invalid_default_snippet\nCannot use \`{@render children(...)}\` if the parent component uses \`let:\` directives. Consider using a named snippet instead\nhttps://svelte.dev/e/invalid_default_snippet`);
@ -26,6 +27,7 @@ export function invalid_snippet_arguments() {
consterror=newError(`invalid_snippet_arguments\nA snippet function was passed invalid arguments. Snippets should only be instantiated via \`{@render ...}\`\nhttps://svelte.dev/e/invalid_snippet_arguments`);
@ -42,6 +44,7 @@ export function lifecycle_outside_component(name) {
consterror=newError(`lifecycle_outside_component\n\`${name}(...)\` can only be used during component initialisation\nhttps://svelte.dev/e/lifecycle_outside_component`);
@ -57,6 +60,7 @@ export function snippet_without_render_tag() {
consterror=newError(`snippet_without_render_tag\nAttempted to render a snippet without a \`{@render}\` block. This would cause the snippet code to be stringified instead of its content being rendered to the DOM. To fix this, change \`{snippet}\` to \`{@render snippet()}\`.\nhttps://svelte.dev/e/snippet_without_render_tag`);
@ -88,6 +93,7 @@ export function svelte_element_invalid_this_value() {
consterror=newError(`svelte_element_invalid_this_value\nThe \`this\` prop on \`<svelte:element>\` must be a string, if defined\nhttps://svelte.dev/e/svelte_element_invalid_this_value`);
*Returnsan[`AbortSignal`](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that aborts when the current [derived](https://svelte.dev/docs/svelte/$derived) or [effect](https://svelte.dev/docs/svelte/$effect) re-runs or is destroyed.
*
*Mustbecalledwhileaderivedoreffectisrunning.
*
*```svelte
*<script>
*import{getAbortSignal}from'svelte';
*
*let{id}=$props();
*
*asyncfunctiongetData(id){
*constresponse=awaitfetch(`/items/${id}`,{
*signal: getAbortSignal()
*});
*
*returnawaitresponse.json();
*}
*
*constdata=$derived(awaitgetData(id));
*</script>
*```
*/
exportfunctiongetAbortSignal():AbortSignal;
/**
*`onMount`,like[`$effect`](https://svelte.dev/docs/svelte/$effect), schedules a function to run as soon as the component has been mounted to the DOM.
paoloricciuti
2 months ago