@ -42,25 +42,34 @@ Numeric input values are coerced; even though `input.value` is a string as far a
<inputtype="range"bind:value={num}/>
```
On `<input>` elements with `type="file"`, you can use `bind:files` to get the [`FileList` of selected files](https://developer.mozilla.org/en-US/docs/Web/API/FileList). It is readonly.
On `<input>` elements with `type="file"`, you can use `bind:files` to get the [`FileList` of selected files](https://developer.mozilla.org/en-US/docs/Web/API/FileList). When you want to update the files programmatically, you always need to use a `FileList` object. Currently `FileList` objects cannot be constructed directly, so you need to create a new [`DataTransfer`](https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer) object and get `files` from there.
```svelte
<script>
let files = $state();
function clear() {
files = new DataTransfer().files; // null or undefined does not work
If you're using `bind:` directives together with `on:` directives, the order that they're defined in affects the value of the bound variable when the event handler is called.
`FileList` objects also cannot be modified, so if you want to e.g. delete a single file from the list, you need to create a new `DataTransfer` object and add the files you want to keep.
> `DataTransfer` may not be available in server-side JS runtimes. Leaving the state that is bound to `files` uninitialized prevents potential errors if components are server-side rendered.
If you're using `bind:` directives together with `on` event attributes, the binding will always fire before the event attribute.
Svelte tries its best to infer the correct namespace from the element's surroundings, but it's not always possible. You can make it explicit with an `xmlns` attribute:
@ -73,7 +72,7 @@ Svelte tries its best to infer the correct namespace from the element's surround
## `<svelte:window>`
```svelte
<svelte:windowon:event={handler}/>
<svelte:windowonevent={handler}/>
```
```svelte
@ -86,13 +85,12 @@ Unlike `<svelte:self>`, this element may only appear at the top level of your co
```svelte
<script>
/** @param {KeyboardEvent} event */
function handleKeydown(event) {
alert(`pressed the ${event.key} key`);
}
</script>
<svelte:windowon:keydown={handleKeydown}/>
<svelte:windowonkeydown={handleKeydown}/>
```
You can also bind to the following properties:
@ -117,7 +115,7 @@ All except `scrollX` and `scrollY` are readonly.
## `<svelte:document>`
```svelte
<svelte:documenton:event={handler}/>
<svelte:documentonevent={handler}/>
```
```svelte
@ -129,7 +127,7 @@ Similarly to `<svelte:window>`, this element allows you to add listeners to even
As with `<svelte:window>`, this element may only appear the top level of your component and must never be inside a block or element.
Similarly to `<svelte:window>`, this element allows you to add listeners to events on `document.body`, such as `mouseenter` and `mouseleave`, which don't fire on `window`. It also lets you use [actions](/docs/element-directives#use-action) on the `<body>` element.
@ -152,7 +150,7 @@ Similarly to `<svelte:window>`, this element allows you to add listeners to even
As with `<svelte:window>` and `<svelte:document>`, this element may only appear the top level of your component and must never be inside a block or element.
> `%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
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.
The easiest way to log a value as it changes over time is to use the [`$inspect`](https://svelte-5-preview.vercel.app/docs/runes#$inspect) rune. Alternatively, to log things on a one-off basis (for example, inside an event handler) you can use [`$state.snapshot`](https://svelte-5-preview.vercel.app/docs/runes#$state-snapshot) to take a snapshot of the current value.
## event_handler_invalid
> %handler% should be a function. Did you mean to %suggestion%?
> Cannot reference store value outside a `.svelte` file
Using a `$` prefix to refer to the value of a store is only possible inside `.svelte` files, where Svelte can automatically create subscriptions when a component is mounted and unsubscribe when the component is unmounted. Consider migrating to runes instead.
## typescript_invalid_feature
> TypeScript language features like %feature% are not natively supported, and their use is generally discouraged. Outside of `<script>` tags, these features are not supported. For use within `<script>` tags, you will need to use a preprocessor to convert it to JavaScript before it gets passed to the Svelte compiler. If you are using `vitePreprocess`, make sure to specifically enable preprocessing script tags (`vitePreprocess({ script: true })`)
e(node,"typescript_invalid_feature",`TypeScript language features like ${feature} are not natively supported, and their use is generally discouraged. Outside of \`<script>\` tags, these features are not supported. For use within \`<script>\` tags, you will need to use a preprocessor to convert it to JavaScript before it gets passed to the Svelte compiler. If you are using \`vitePreprocess\`, make sure to specifically enable preprocessing script tags (\`vitePreprocess({ script: true })\`)`);
}
/**
*Declarationcannotbeempty
*@param{null|number|NodeLike}node
@ -526,12 +536,12 @@ export function css_global_invalid_selector_list(node) {
e(node,"css_nesting_selector_invalid_placement","Nesting selectors can only be used inside a rule");
e(node,"css_nesting_selector_invalid_placement","Nesting selectors can only be used inside a rule or as the first selector inside a lone `:global(...)`");
}
/**
@ -786,15 +796,6 @@ export function component_invalid_directive(node) {
e(node,"component_invalid_directive","This type of directive is not valid on components");
e(node,"component_invalid_name","Component name must be a valid variable name or dot notation expression");
}
/**
*Cyclicaldependencydetected:%cycle%
*@param{null|number|NodeLike}node
@ -872,15 +873,6 @@ export function element_invalid_closing_tag_autoclosed(node, name, reason) {
e(node,"element_invalid_closing_tag_autoclosed",`\`</${name}>\` attempted to close element that was already automatically closed by \`<${reason}>\` (cannot nest \`<${reason}>\` inside \`<${name}>\`)`);
}
/**
*Expectedvalidtagname
*@param{null|number|NodeLike}node
*@returns{never}
*/
exportfunctionelement_invalid_tag_name(node){
e(node,"element_invalid_tag_name","Expected valid tag name");
}
/**
*`<%name%>`wasleftopen
*@param{null|number|NodeLike}node
@ -1201,6 +1193,15 @@ export function style_duplicate(node) {
e(node,"style_duplicate","A component can have a single top-level `<style>` element");
e(node,"svelte_options_reserved_tagname","Tag name is reserved");
}
/**
@ -1378,6 +1388,15 @@ export function svelte_self_invalid_placement(node) {
e(node,"svelte_self_invalid_placement","`<svelte:self>` components can only exist inside `{#if}` blocks, `{#each}` blocks, `{#snippet}` blocks or slots passed to components");
Rich Harris
2 years ago