fix: check for invalid bindings on window and document (#11676)

Fixes #11673
pull/11663/head
Paolo Ricciuti 1 year ago committed by GitHub
parent b788b72862
commit f48001ac63
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -0,0 +1,5 @@
---
"svelte": patch
---
fix: check for invalid bindings on window and document

@ -393,6 +393,23 @@ const validation = {
);
}
if (property.invalid_elements && property.invalid_elements.includes(parent.name)) {
const valid_bindings = Object.entries(binding_properties)
.filter(([_, binding_property]) => {
return (
binding_property.valid_elements?.includes(parent.name) ||
(!binding_property.valid_elements &&
!binding_property.invalid_elements?.includes(parent.name))
);
})
.map(([property_name]) => property_name);
e.bind_invalid_name(
node,
node.name,
`Possible bindings for <${parent.name}> are ${valid_bindings.join(', ')}`
);
}
if (parent.name === 'input' && node.name !== 'this') {
const type = /** @type {import('#compiler').Attribute | undefined} */ (
parent.attributes.find((a) => a.type === 'Attribute' && a.name === 'type')

@ -5,6 +5,7 @@
* @property {string} [type] Set this to `set` if updates are written to the dom property
* @property {boolean} [omit_in_ssr] Set this to true if the binding should not be included in SSR
* @property {string[]} [valid_elements] If this is set, the binding is only valid on the given elements
* @property {string[]} [invalid_elements] If this is set, the binding is invalid on the given elements
*/
/**
@ -131,28 +132,36 @@ export const binding_properties = {
},
// dimensions
clientWidth: {
omit_in_ssr: true
omit_in_ssr: true,
invalid_elements: ['svelte:window', 'svelte:document']
},
clientHeight: {
omit_in_ssr: true
omit_in_ssr: true,
invalid_elements: ['svelte:window', 'svelte:document']
},
offsetWidth: {
omit_in_ssr: true
omit_in_ssr: true,
invalid_elements: ['svelte:window', 'svelte:document']
},
offsetHeight: {
omit_in_ssr: true
omit_in_ssr: true,
invalid_elements: ['svelte:window', 'svelte:document']
},
contentRect: {
omit_in_ssr: true
omit_in_ssr: true,
invalid_elements: ['svelte:window', 'svelte:document']
},
contentBoxSize: {
omit_in_ssr: true
omit_in_ssr: true,
invalid_elements: ['svelte:window', 'svelte:document']
},
borderBoxSize: {
omit_in_ssr: true
omit_in_ssr: true,
invalid_elements: ['svelte:window', 'svelte:document']
},
devicePixelContentBoxSize: {
omit_in_ssr: true
omit_in_ssr: true,
invalid_elements: ['svelte:window', 'svelte:document']
},
// checkbox/radio
indeterminate: {
@ -171,9 +180,15 @@ export const binding_properties = {
this: {
omit_in_ssr: true
},
innerText: {},
innerHTML: {},
textContent: {},
innerText: {
invalid_elements: ['svelte:window', 'svelte:document']
},
innerHTML: {
invalid_elements: ['svelte:window', 'svelte:document']
},
textContent: {
invalid_elements: ['svelte:window', 'svelte:document']
},
open: {
event: 'toggle',
type: 'set',

@ -0,0 +1,14 @@
[
{
"code": "bind_invalid_name",
"message": "`bind:clientWidth` is not a valid binding. Possible bindings for <svelte:document> are focused, fullscreenElement, visibilityState, this",
"start": {
"line": 5,
"column": 17
},
"end": {
"line": 5,
"column": 39
}
}
]

@ -0,0 +1,5 @@
<script>
let foo;
</script>
<svelte:document bind:clientWidth={foo} />

@ -0,0 +1,14 @@
[
{
"code": "bind_invalid_name",
"message": "`bind:clientWidth` is not a valid binding. Possible bindings for <svelte:window> are focused, innerWidth, innerHeight, outerWidth, outerHeight, scrollX, scrollY, online, devicePixelRatio, this",
"start": {
"line": 5,
"column": 15
},
"end": {
"line": 5,
"column": 37
}
}
]

@ -0,0 +1,5 @@
<script>
let foo;
</script>
<svelte:window bind:clientWidth={foo} />
Loading…
Cancel
Save