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

breaking: disallow string literal values in `<svelte:element this="...">` (#11454)

Browse Source 
* breaking: disallow string literal values in `<svelte:element this="...">`

* note breaking change

* Update sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md

Co-authored-by: Jeremiasz Major <jrh.mjr@gmail.com>

* prettier

* make invalid `<svelte:element this>` a warning instead of an error (#11641)

* make it a warning instead of an error

* format

---------

Co-authored-by: Jeremiasz Major <jrh.mjr@gmail.com>
pull/11659/head
Rich Harris 8 months ago committed by GitHub
parent ade6b6e480
commit d288735fa8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
26 changed files with 90 additions and 93 deletions
Show Stats Download Patch File Download Diff File

5
.changeset/dull-worms-relax.md
Unescape View File

@ -0,0 +1,5 @@
---
'svelte': patch
---
breaking: disallow string literal values in `<svelte:element this="...">`

6
packages/svelte/messages/compile-errors/template.md
Unescape View File

@ -260,13 +260,9 @@
> `<svelte:component>` must have a 'this' attribute > `<svelte:component>` must have a 'this' attribute
## svelte_element_invalid_this
> Invalid element definition — must be an `{expression}`
## svelte_element_missing_this ## svelte_element_missing_this
> `<svelte:element>` must have a 'this' attribute > `<svelte:element>` must have a 'this' attribute with a value
## svelte_fragment_invalid_attribute ## svelte_fragment_invalid_attribute

4
packages/svelte/messages/compile-warnings/template.md
Unescape View File

@ -37,3 +37,7 @@
## slot_element_deprecated ## slot_element_deprecated
> Using `<slot>` to render parent content is deprecated. Use `{@render ...}` tags instead > Using `<slot>` to render parent content is deprecated. Use `{@render ...}` tags instead
## svelte_element_invalid_this
> `this` should be an `{expression}`. Using a string attribute value will cause an error in future versions of Svelte

13
packages/svelte/src/compiler/errors.js
Unescape View File

@ -1138,21 +1138,12 @@ export function svelte_component_missing_this(node) {
} }
/** /**
* Invalid element definition — must be an `{expression}` * `<svelte:element>` must have a 'this' attribute with a value
* @param {null | number | NodeLike} node
* @returns {never}
*/
export function svelte_element_invalid_this(node) {
e(node, "svelte_element_invalid_this", "Invalid element definition — must be an `{expression}`");
}
/**
* `<svelte:element>` must have a 'this' attribute
* @param {null | number | NodeLike} node * @param {null | number | NodeLike} node
* @returns {never} * @returns {never}
*/ */
export function svelte_element_missing_this(node) { export function svelte_element_missing_this(node) {
e(node, "svelte_element_missing_this", "`<svelte:element>` must have a 'this' attribute"); e(node, "svelte_element_missing_this", "`<svelte:element>` must have a 'this' attribute with a value");
} }
/** /**

19
packages/svelte/src/compiler/phases/1-parse/state/element.js
Unescape View File

@ -4,6 +4,7 @@ import { read_script } from '../read/script.js';
import read_style from '../read/style.js'; import read_style from '../read/style.js';
import { closing_tag_omitted, decode_character_references } from '../utils/html.js'; import { closing_tag_omitted, decode_character_references } from '../utils/html.js';
import * as e from '../../../errors.js'; import * as e from '../../../errors.js';
import * as w from '../../../warnings.js';
import { create_fragment } from '../utils/create.js'; import { create_fragment } from '../utils/create.js';
import { create_attribute } from '../../nodes.js'; import { create_attribute } from '../../nodes.js';
@ -262,14 +263,28 @@ export default function tag(parser) {
const definition = /** @type {import('#compiler').Attribute} */ ( const definition = /** @type {import('#compiler').Attribute} */ (
element.attributes.splice(index, 1)[0] element.attributes.splice(index, 1)[0]
); );
if (definition.value === true || definition.value.length !== 1) {
e.svelte_element_invalid_this(definition.start); if (definition.value === true) {
e.svelte_element_missing_this(definition);
} }
const chunk = definition.value[0]; const chunk = definition.value[0];
if (definition.value.length !== 1 || chunk.type !== 'ExpressionTag') {
chunk.type;
w.svelte_element_invalid_this(definition);
// note that this is wrong, in the case of e.g. `this="h{n}"` — it will result in `<h>`.
// it would be much better to just error here, but we are preserving the existing buggy
// Svelte 4 behaviour out of an overabundance of caution regarding breaking changes.
// TODO in 6.0, error
element.tag = element.tag =
chunk.type === 'Text' chunk.type === 'Text'
? { type: 'Literal', value: chunk.data, raw: `'${chunk.raw}'` } ? { type: 'Literal', value: chunk.data, raw: `'${chunk.raw}'` }
: chunk.expression; : chunk.expression;
} else {
element.tag = chunk.expression;
}
} }
if (is_top_level_script_or_style) { if (is_top_level_script_or_style) {

18
packages/svelte/src/compiler/phases/2-analyze/index.js
Unescape View File

@ -1449,24 +1449,6 @@ const common_visitors = {
SvelteElement(node, context) { SvelteElement(node, context) {
context.state.analysis.elements.push(node); context.state.analysis.elements.push(node);
// TODO why are we handling the `<svelte:element this="x" />` case? there is no
// reason for someone to use a static value with `<svelte:element>`
if (
context.state.options.namespace !== 'foreign' &&
node.tag.type === 'Literal' &&
typeof node.tag.value === 'string'
) {
if (SVGElements.includes(node.tag.value)) {
node.metadata.svg = true;
return;
}
if (MathMLElements.includes(node.tag.value)) {
node.metadata.mathml = true;
return;
}
}
for (const attribute of node.attributes) { for (const attribute of node.attributes) {
if (attribute.type === 'Attribute') { if (attribute.type === 'Attribute') {
if (attribute.name === 'xmlns' && is_text_attribute(attribute)) { if (attribute.name === 'xmlns' && is_text_attribute(attribute)) {

16
packages/svelte/src/compiler/phases/2-analyze/validation.js
Unescape View File

@ -586,22 +586,6 @@ const validation = {
) { ) {
e.render_tag_invalid_call_expression(node); e.render_tag_invalid_call_expression(node);
} }
const is_inside_textarea = context.path.find((n) => {
return (
n.type === 'SvelteElement' &&
n.name === 'svelte:element' &&
n.tag.type === 'Literal' &&
n.tag.value === 'textarea'
);
});
if (is_inside_textarea) {
e.tag_invalid_placement(
node,
'inside <textarea> or <svelte:element this="textarea">',
'render'
);
}
}, },
IfBlock(node, context) { IfBlock(node, context) {
validate_block_not_empty(node.consequent, context); validate_block_not_empty(node.consequent, context);

11
packages/svelte/src/compiler/warnings.js
Unescape View File

@ -90,7 +90,8 @@ export const codes = [
"component_name_lowercase", "component_name_lowercase",
"element_invalid_self_closing_tag", "element_invalid_self_closing_tag",
"event_directive_deprecated", "event_directive_deprecated",
"slot_element_deprecated" "slot_element_deprecated",
"svelte_element_invalid_this"
]; ];
/** /**
@ -713,3 +714,11 @@ export function event_directive_deprecated(node, name) {
export function slot_element_deprecated(node) { export function slot_element_deprecated(node) {
w(node, "slot_element_deprecated", "Using `<slot>` to render parent content is deprecated. Use `{@render ...}` tags instead"); w(node, "slot_element_deprecated", "Using `<slot>` to render parent content is deprecated. Use `{@render ...}` tags instead");
} }
/**
* `this` should be an `{expression}`. Using a string attribute value will cause an error in future versions of Svelte
* @param {null | NodeLike} node
*/
export function svelte_element_invalid_this(node) {
w(node, "svelte_element_invalid_this", "`this` should be an `{expression}`. Using a string attribute value will cause an error in future versions of Svelte");
}

4
packages/svelte/tests/css/samples/dynamic-element/_config.js
Unescape View File

@ -6,12 +6,12 @@ export default test({
code: 'css_unused_selector', code: 'css_unused_selector',
message: 'Unused CSS selector ".unused"', message: 'Unused CSS selector ".unused"',
start: { start: {
character: 79, character: 81,
column: 1, column: 1,
line: 7 line: 7
}, },
end: { end: {
character: 86, character: 88,
column: 8, column: 8,
line: 7 line: 7
} }

2
packages/svelte/tests/css/samples/dynamic-element/input.svelte
Unescape View File

@ -1,4 +1,4 @@
<svelte:element this="div" class="used" /> <svelte:element this={"div"} class="used" />
<style> <style>
.used { .used {

4
packages/svelte/tests/parser-legacy/samples/dynamic-element-string/input.svelte
Unescape View File

@ -1,2 +1,2 @@
<svelte:element this="div"></svelte:element> <svelte:element this={"div"}></svelte:element>
<svelte:element this="div" class="foo"></svelte:element> <svelte:element this={"div"} class="foo"></svelte:element>

20
packages/svelte/tests/parser-legacy/samples/dynamic-element-string/output.json
Unescape View File

@ -2,40 +2,40 @@
"html": { "html": {
"type": "Fragment", "type": "Fragment",
"start": 0, "start": 0,
"end": 101, "end": 105,
"children": [ "children": [
{ {
"type": "Element", "type": "Element",
"name": "svelte:element", "name": "svelte:element",
"start": 0, "start": 0,
"end": 44, "end": 46,
"tag": "div", "tag": "div",
"attributes": [], "attributes": [],
"children": [] "children": []
}, },
{ {
"type": "Text", "type": "Text",
"start": 44, "start": 46,
"end": 45, "end": 47,
"raw": "\n", "raw": "\n",
"data": "\n" "data": "\n"
}, },
{ {
"type": "Element", "type": "Element",
"name": "svelte:element", "name": "svelte:element",
"start": 45, "start": 47,
"end": 101, "end": 105,
"tag": "div", "tag": "div",
"attributes": [ "attributes": [
{ {
"type": "Attribute", "type": "Attribute",
"start": 72, "start": 76,
"end": 83, "end": 87,
"name": "class", "name": "class",
"value": [ "value": [
{ {
"start": 79, "start": 83,
"end": 82, "end": 86,
"type": "Text", "type": "Text",
"raw": "foo", "raw": "foo",
"data": "foo" "data": "foo"

2
packages/svelte/tests/runtime-legacy/samples/dynamic-element-attribute-boolean/main.svelte
Unescape View File

@ -2,4 +2,4 @@
export let disabled = false; export let disabled = false;
</script> </script>
<svelte:element {disabled} this="button">Click me</svelte:element> <svelte:element {disabled} this={"button"}>Click me</svelte:element>

2
packages/svelte/tests/runtime-legacy/samples/dynamic-element-attribute-spread/main.svelte
Unescape View File

@ -6,4 +6,4 @@
}; };
</script> </script>
<svelte:element this="button" {...props}>Click me</svelte:element> <svelte:element this={"button"} {...props}>Click me</svelte:element>

2
packages/svelte/tests/runtime-legacy/samples/dynamic-element-class-directive/Link.svelte
Unescape View File

@ -2,7 +2,7 @@
export let item; export let item;
</script> </script>
<svelte:element this="div" class:active={true}> <svelte:element this={"div"} class:active={true}>
{item.text} {item.text}
</svelte:element> </svelte:element>

2
packages/svelte/tests/runtime-legacy/samples/dynamic-element-string/main.svelte
Unescape View File

@ -1 +1 @@
<svelte:element this="div">Foo</svelte:element> <svelte:element this={"div"}>Foo</svelte:element>

6
packages/svelte/tests/runtime-legacy/samples/dynamic-element-svg-inherit-namespace/main.svelte
Unescape View File

@ -9,13 +9,13 @@
</svg> </svg>
<svg> <svg>
<svelte:element this="path"> <svelte:element this={"path"}>
<foreignObject> <foreignObject>
<svelte:element this="span">ok</svelte:element> <svelte:element this={"span"}>ok</svelte:element>
</foreignObject> </foreignObject>
<foreignObject> <foreignObject>
{#if true} {#if true}
<svelte:element this="span">ok</svelte:element> <svelte:element this={"span"}>ok</svelte:element>
{/if} {/if}
</foreignObject> </foreignObject>
</svelte:element> </svelte:element>

4
packages/svelte/tests/runtime-legacy/samples/dynamic-element-svg/main.svelte
Unescape View File

@ -1,3 +1,3 @@
<svelte:element this="svg" xmlns="http://www.w3.org/2000/svg"> <svelte:element this={"svg"} xmlns="http://www.w3.org/2000/svg">
<svelte:element this="path" xmlns="http://www.w3.org/2000/svg"></svelte:element> <svelte:element this={"path"} xmlns="http://www.w3.org/2000/svg"></svelte:element>
</svelte:element> </svelte:element>

2
packages/svelte/tests/runtime-legacy/samples/dynamic-element-textarea/main.svelte
Unescape View File

@ -1 +1 @@
<svelte:element this="textarea"></svelte:element> <svelte:element this={"textarea"}></svelte:element>

2
packages/svelte/tests/runtime-legacy/samples/dynamic-element-void-tag/main.svelte
Unescape View File

@ -6,7 +6,7 @@
<h1></h1> <h1></h1>
<svelte:element this="{'foo'}"></svelte:element> <svelte:element this="{'foo'}"></svelte:element>
<svelte:element this="img"></svelte:element> <svelte:element this={"img"}></svelte:element>
<svelte:element this="{propTag}"></svelte:element> <svelte:element this="{propTag}"></svelte:element>
<svelte:element this="{static_tag}"></svelte:element> <svelte:element this="{static_tag}"></svelte:element>
<svelte:element this="{func_tag()}"></svelte:element> <svelte:element this="{func_tag()}"></svelte:element>

2
packages/svelte/tests/runtime-legacy/samples/static-svelte-element/main.svelte
Unescape View File

@ -1,3 +1,3 @@
<div> <div>
<svelte:element this="p" /> <svelte:element this={"p"} />
</div> </div>

2
packages/svelte/tests/server-side-rendering/samples/dynamic-element-string/main.svelte
Unescape View File

@ -1 +1 @@
<svelte:element this="div">Foo</svelte:element> <svelte:element this={"div"}>Foo</svelte:element>

6
packages/svelte/tests/server-side-rendering/samples/head-svelte-components-raw-content/main.svelte
Unescape View File

@ -1,3 +1,3 @@
<svelte:element this="title">lorem</svelte:element> <svelte:element this={"title"}>lorem</svelte:element>
<svelte:element this="style">{'.ipsum { display: block; }'}</svelte:element> <svelte:element this={"style"}>{'.ipsum { display: block; }'}</svelte:element>
<svelte:element this="script">{'console.log(true);'}</svelte:element> <svelte:element this={"script"}>{'console.log(true);'}</svelte:element>

6
packages/svelte/tests/validator/samples/dynamic-element-invalid-tag/errors.json
Unescape View File

@ -1,14 +1,14 @@
[ [
{ {
"code": "svelte_element_invalid_this", "code": "svelte_element_missing_this",
"message": "Invalid element definition — must be an `{expression}`", "message": "`<svelte:element>` must have a 'this' attribute with a value",
"start": { "start": {
"line": 2, "line": 2,
"column": 17 "column": 17
}, },
"end": { "end": {
"line": 2, "line": 2,
"column": 17 "column": 21
} }
} }
] ]

2
packages/svelte/tests/validator/samples/dynamic-element-missing-tag/errors.json
Unescape View File

@ -1,7 +1,7 @@
[ [
{ {
"code": "svelte_element_missing_this", "code": "svelte_element_missing_this",
"message": "`<svelte:element>` must have a 'this' attribute", "message": "`<svelte:element>` must have a 'this' attribute with a value",
"start": { "start": {
"line": 2, "line": 2,
"column": 1 "column": 1

11
sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md
Unescape View File

@ -230,3 +230,14 @@ In Svelte 4 you could have content inside a `<svelte:options />` tag. It was ign
### `<slot>` elements in declarative shadow roots are preserved ### `<slot>` elements in declarative shadow roots are preserved
Svelte 4 replaced the `<slot />` tag in all places with its own version of slots. Svelte 5 preserves them in the case they are a child of a `<template shadowrootmode="...">` element. Svelte 4 replaced the `<slot />` tag in all places with its own version of slots. Svelte 5 preserves them in the case they are a child of a `<template shadowrootmode="...">` element.
### `<svelte:element>` tag must be an expression
In Svelte 4, `<svelte:element this="div">` is valid code. This makes little sense — you should just do `<div>`. In the vanishingly rare case that you _do_ need to use a literal value for some reason, you can do this:
```diff
- <svelte:element this="div">
+ <svelte:element this={"div"}>
```
Note that whereas Svelte 4 would treat `<svelte:element this="input">` (for example) identically to `<input>` for the purposes of determining which `bind:` directives could be applied, Svelte 5 does not.

Write Preview
Loading…
Cancel
Save