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

breaking: warn on self-closing non-void HTML tags (#11114)

Browse Source 
* warn on self-closing non-void HTML tags

* fix tests

* changeset

* account for foreign namespace
pull/11223/head
Rich Harris 1 year ago committed by GitHub
parent 56654986a6
commit 42ce8d74e1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
137 changed files with 1475 additions and 1116 deletions
Show Stats Download Patch File Download Diff File

5
.changeset/nine-cooks-join.md
Unescape View File

@ -0,0 +1,5 @@
---
'svelte': patch
---
breaking: warn on self-closing non-void HTML tags

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

@ -15,7 +15,12 @@ import {
import { warn } from '../../warnings.js';
import fuzzymatch from '../1-parse/utils/fuzzymatch.js';
import { binding_properties } from '../bindings.js';
import { ContentEditableBindings, EventModifiers, SVGElements } from '../constants.js';
import {
ContentEditableBindings,
EventModifiers,
SVGElements,
VoidElements
} from '../constants.js';
import { is_custom_element_node } from '../nodes.js';
import {
regex_illegal_attribute_character,
@ -572,6 +577,21 @@ const validation = {
}
}
if (
context.state.analysis.source[node.end - 2] === '/' &&
context.state.options.namespace !== 'foreign' &&
!VoidElements.includes(node.name) &&
!SVGElements.includes(node.name)
) {
warn(
context.state.analysis.warnings,
node,
context.path,
'invalid-self-closing-tag',
node.name
);
}
context.next({
...context.state,
parent_element: node.name

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

@ -250,6 +250,12 @@ const options = {
"The 'customElement' option is used when generating a custom element. Did you forget the 'customElement: true' compile option?"
};
const misc = {
/** @param {string} name */
'invalid-self-closing-tag': (name) =>
`Self-closing HTML tags for non-void elements are ambiguous — use <${name} ...></${name}> rather than <${name} ... />`
};
/** @satisfies {Warnings} */
const warnings = {
...css,
@ -261,7 +267,8 @@ const warnings = {
...components,
...legacy,
...block,
...options
...options,
...misc
};
/** @typedef {typeof warnings} AllWarnings */

2
packages/svelte/tests/compiler-errors/samples/component-slot-nested-error-2/main.svelte
Unescape View File

@ -5,7 +5,7 @@
<Nested>
<div slot="slot1">
<div>
<div slot="slot2" />
<div slot="slot2"></div>
</div>
</div>
</Nested>

2
packages/svelte/tests/compiler-errors/samples/component-slot-nested-error-3/main.svelte
Unescape View File

@ -5,7 +5,7 @@
<Nested>
<div>
<div>
<div slot="slot2" />
<div slot="slot2"></div>
</div>
</div>
</Nested>

2
packages/svelte/tests/compiler-errors/samples/component-slot-nested-error/main.svelte
Unescape View File

@ -4,6 +4,6 @@
<Nested>
<div slot="slot1">
<div slot="slot2" />
<div slot="slot2"></div>
</div>
</Nested>

16
packages/svelte/tests/css/samples/general-siblings-combinator-await-not-exhaustive/input.svelte
Unescape View File

@ -18,24 +18,24 @@
.c ~ .g { color: green; }
</style>
<div class="a" />
<div class="a"></div>
{#await promise then value}
<div class="b" />
<div class="b"></div>
{:catch error}
<div class="c" />
<div class="c"></div>
{/await}
{#await promise}
<div class="d" />
<div class="d"></div>
{:catch error}
<div class="e" />
<div class="e"></div>
{/await}
{#await promise}
<div class="f" />
<div class="f"></div>
{:then error}
<div class="g" />
<div class="g"></div>
{/await}
<div class="h" />
<div class="h"></div>

10
packages/svelte/tests/css/samples/general-siblings-combinator-await/input.svelte
Unescape View File

@ -17,14 +17,14 @@
.b ~ .d { color: green; }
</style>
<div class="a" />
<div class="a"></div>
{#await promise}
<div class="b" />
<div class="b"></div>
{:then value}
<div class="c" />
<div class="c"></div>
{:catch error}
<div class="d" />
<div class="d"></div>
{/await}
<div class="e" />
<div class="e"></div>

8
packages/svelte/tests/css/samples/general-siblings-combinator-each-2/input.svelte
Unescape View File

@ -27,11 +27,11 @@
}
</style>
<div class="a" />
<div class="a"></div>
{#each array as item}
<div class="b" />
<div class="c" />
<div class="b"></div>
<div class="c"></div>
{/each}
<div class="d" />
<div class="d"></div>

28
packages/svelte/tests/css/samples/general-siblings-combinator-each-else-nested/input.svelte
Unescape View File

@ -35,43 +35,43 @@
.e ~ .f { color: green; }
</style>
<div class="a" />
<div class="a"></div>
{#each array as a}
<div class="b" />
<div class="b"></div>
{#each array as b}
<div class="c" />
<div class="c"></div>
{:else}
<div class="d" />
<div class="d"></div>
{/each}
{/each}
{#each array as c}
{#each array as d}
<div class="e" />
<div class="e"></div>
{/each}
{:else}
<div class="f" />
<div class="f"></div>
{/each}
{#each array as x}
<div class="g" />
<div class="g"></div>
{#each array as y}
{#each array as z}
<div class="h" />
<div class="h"></div>
{/each}
{:else}
<div class="i" />
<div class="i"></div>
{/each}
<div class="j" />
<div class="j"></div>
{/each}
<div class="k" />
<div class="k"></div>
{#each array as item}
{#each array as item}
<div class="l" />
<div class="l"></div>
{:else}
<div class="m" />
<div class="m"></div>
{/each}
{/each}
{/each}

8
packages/svelte/tests/css/samples/general-siblings-combinator-each-else/input.svelte
Unescape View File

@ -13,12 +13,12 @@
.b ~ .c { color: green; }
</style>
<div class="a" />
<div class="a"></div>
{#each array as item}
<div class="b" />
<div class="b"></div>
{:else}
<div class="c" />
<div class="c"></div>
{/each}
<div class="d" />
<div class="d"></div>

32
packages/svelte/tests/css/samples/general-siblings-combinator-each-nested/input.svelte
Unescape View File

@ -65,39 +65,39 @@
.g ~ .i { color: green; }
</style>
<div class="a" />
<div class="a"></div>
{#each array as item}
<div class="b" />
<div class="c" />
<div class="b"></div>
<div class="c"></div>
{/each}
{#each array as item}
{#each array as item}
{#each array as item}
<div class="d" />
<div class="d"></div>
{/each}
<div class="e" />
<div class="e"></div>
{/each}
<div class="f" />
<div class="f"></div>
{/each}
{#each array as item}
<div class="g" />
<div class="g"></div>
{#each array as item}
<div class="h" />
<div class="h"></div>
{#each array as item}
<div class="i" />
<div class="i"></div>
{/each}
{/each}
{/each}
{#each array as item}
<div class="j" />
<div class="j"></div>
{#each array as item}
<div class="k" />
<div class="k"></div>
{#each array as item}
<div class="l" />
<div class="l"></div>
{/each}
{/each}
{/each}
@ -105,9 +105,9 @@
{#each array as item}
{#each array as item}
{#each array as item}
<div class="m" />
<div class="m"></div>
{/each}
<div class="n" />
<div class="n"></div>
{/each}
<div class="o" />
{/each}
<div class="o"></div>
{/each}

12
packages/svelte/tests/css/samples/general-siblings-combinator-each/input.svelte
Unescape View File

@ -8,13 +8,13 @@
}
</style>
<div />
<div></div>
{#each array as item}
<span class="each" />
<div class="each" />
<span class="each" />
<div class="each" />
<span class="each"></span>
<div class="each"></div>
<span class="each"></span>
<div class="each"></div>
{/each}
<span />
<span></span>

8
packages/svelte/tests/css/samples/general-siblings-combinator-if-not-exhaustive-with-each/input.svelte
Unescape View File

@ -18,14 +18,14 @@
.b ~ .c { color: green; }
</style>
<div class="a" />
<div class="a"></div>
{#if foo}
<div class="b" />
<div class="b"></div>
{:else}
{#each array as item}
<div class="c" />
<div class="c"></div>
{/each}
{/if}
<div class="d" />
<div class="d"></div>

8
packages/svelte/tests/css/samples/general-siblings-combinator-if-not-exhaustive/input.svelte
Unescape View File

@ -14,12 +14,12 @@
.b ~ .c { color: green; }
</style>
<div class="a" />
<div class="a"></div>
{#if foo}
<div class="b" />
<div class="b"></div>
{:else if bar}
<div class="c" />
<div class="c"></div>
{/if}
<div class="d" />
<div class="d"></div>

10
packages/svelte/tests/css/samples/general-siblings-combinator-if/input.svelte
Unescape View File

@ -18,14 +18,14 @@
.c ~ .d { color: green; }
</style>
<div class="a" />
<div class="a"></div>
{#if foo}
<div class="b" />
<div class="b"></div>
{:else if bar}
<div class="c" />
<div class="c"></div>
{:else}
<div class="d" />
<div class="d"></div>
{/if}
<div class="e" />
<div class="e"></div>

12
packages/svelte/tests/css/samples/general-siblings-combinator-slot/input.svelte
Unescape View File

@ -15,16 +15,16 @@
.b ~ .g { color: green; }
</style>
<div class="a" />
<div class="a"></div>
<App>
<div class="b" slot="a" />
<div class="b" slot="a"></div>
<div class="c" slot="b">
<div class="d" />
<div class="e" />
<div class="d"></div>
<div class="e"></div>
</div>
<div class="f" slot="c" />
<div class="f" slot="c"></div>
</App>
<div class="g" />
<div class="g"></div>

8
packages/svelte/tests/css/samples/general-siblings-combinator-star/input.svelte
Unescape View File

@ -8,10 +8,10 @@
</style>
<div class="not-match">
<div />
<div></div>
</div>
<div class="match">
<div />
<div />
</div>
<div></div>
<div></div>
</div>

6
packages/svelte/tests/css/samples/general-siblings-combinator/input.svelte
Unescape View File

@ -16,9 +16,9 @@
</style>
<div class="a">
<span />
<b />
<span></span>
<b></b>
</div>
<article class="b"></article>
<p class="c"></p>
<details class="d"></details>
<details class="d"></details>

4
packages/svelte/tests/css/samples/global-with-child-combinator-2/input.svelte
Unescape View File

@ -5,5 +5,5 @@
</style>
<div>
<div />
</div>
<div></div>
</div>

4
packages/svelte/tests/css/samples/global-with-child-combinator/input.svelte
Unescape View File

@ -5,5 +5,5 @@
</style>
<div>
<div />
</div>
<div></div>
</div>

2
packages/svelte/tests/css/samples/quote-mark-inside-string/input.svelte
Unescape View File

@ -1,4 +1,4 @@
<div />
<div></div>
<style>
div {

16
packages/svelte/tests/css/samples/siblings-combinator-await-not-exhaustive/input.svelte
Unescape View File

@ -18,24 +18,24 @@
.c + .g { color: green; }
</style>
<div class="a" />
<div class="a"></div>
{#await promise then value}
<div class="b" />
<div class="b"></div>
{:catch error}
<div class="c" />
<div class="c"></div>
{/await}
{#await promise}
<div class="d" />
<div class="d"></div>
{:catch error}
<div class="e" />
<div class="e"></div>
{/await}
{#await promise}
<div class="f" />
<div class="f"></div>
{:then error}
<div class="g" />
<div class="g"></div>
{/await}
<div class="h" />
<div class="h"></div>

10
packages/svelte/tests/css/samples/siblings-combinator-await/input.svelte
Unescape View File

@ -17,14 +17,14 @@
.b + .d { color: green; }
</style>
<div class="a" />
<div class="a"></div>
{#await promise}
<div class="b" />
<div class="b"></div>
{:then value}
<div class="c" />
<div class="c"></div>
{:catch error}
<div class="d" />
<div class="d"></div>
{/await}
<div class="e" />
<div class="e"></div>

8
packages/svelte/tests/css/samples/siblings-combinator-each-2/input.svelte
Unescape View File

@ -28,11 +28,11 @@
}
</style>
<div class="a" />
<div class="a"></div>
{#each array as item}
<div class="b" />
<div class="c" />
<div class="b"></div>
<div class="c"></div>
{/each}
<div class="d" />
<div class="d"></div>

26
packages/svelte/tests/css/samples/siblings-combinator-each-else-nested/input.svelte
Unescape View File

@ -32,43 +32,43 @@
.g + .h + .i + .j { color: green; }
</style>
<div class="a" />
<div class="a"></div>
{#each array as a}
<div class="b" />
<div class="b"></div>
{#each array as b}
<div class="c" />
<div class="c"></div>
{:else}
<div class="d" />
<div class="d"></div>
{/each}
{/each}
{#each array as c}
{#each array as d}
<div class="e" />
<div class="e"></div>
{/each}
{:else}
<div class="f" />
<div class="f"></div>
{/each}
{#each array as item}
<div class="g" />
<div class="g"></div>
{#each array as item}
{#each array as item}
<div class="h" />
<div class="h"></div>
{/each}
{:else}
<div class="i" />
<div class="i"></div>
{/each}
<div class="j" />
<div class="j"></div>
{/each}
<div class="k" />
<div class="k"></div>
{#each array as item}
{#each array as item}
<div class="l" />
<div class="l"></div>
{:else}
<div class="m" />
<div class="m"></div>
{/each}
{/each}

8
packages/svelte/tests/css/samples/siblings-combinator-each-else/input.svelte
Unescape View File

@ -13,12 +13,12 @@
.b + .c { color: green; }
</style>
<div class="a" />
<div class="a"></div>
{#each array as item}
<div class="b" />
<div class="b"></div>
{:else}
<div class="c" />
<div class="c"></div>
{/each}
<div class="d" />
<div class="d"></div>

32
packages/svelte/tests/css/samples/siblings-combinator-each-nested/input.svelte
Unescape View File

@ -65,39 +65,39 @@
.g + .i { color: green; }
</style>
<div class="a" />
<div class="a"></div>
{#each array as item}
<div class="b" />
<div class="c" />
<div class="b"></div>
<div class="c"></div>
{/each}
{#each array as item}
{#each array as item}
{#each array as item}
<div class="d" />
<div class="d"></div>
{/each}
<div class="e" />
<div class="e"></div>
{/each}
<div class="f" />
<div class="f"></div>
{/each}
{#each array as item}
<div class="g" />
<div class="g"></div>
{#each array as item}
<div class="h" />
<div class="h"></div>
{#each array as item}
<div class="i" />
<div class="i"></div>
{/each}
{/each}
{/each}
{#each array as item}
<div class="j" />
<div class="j"></div>
{#each array as item}
<div class="k" />
<div class="k"></div>
{#each array as item}
<div class="l" />
<div class="l"></div>
{/each}
{/each}
{/each}
@ -105,9 +105,9 @@
{#each array as item}
{#each array as item}
{#each array as item}
<div class="m" />
<div class="m"></div>
{/each}
<div class="n" />
<div class="n"></div>
{/each}
<div class="o" />
{/each}
<div class="o"></div>
{/each}

12
packages/svelte/tests/css/samples/siblings-combinator-each/input.svelte
Unescape View File

@ -8,13 +8,13 @@
}
</style>
<div />
<div></div>
{#each array as item}
<span class="each" />
<div class="each" />
<span class="each" />
<div class="each" />
<span class="each"></span>
<div class="each"></div>
<span class="each"></span>
<div class="each"></div>
{/each}
<span />
<span></span>

4
packages/svelte/tests/css/samples/siblings-combinator-global/input.svelte
Unescape View File

@ -17,5 +17,5 @@
</div>
{#each [] as _}
<p />
{/each}
<p></p>
{/each}

8
packages/svelte/tests/css/samples/siblings-combinator-if-not-exhaustive-with-each/input.svelte
Unescape View File

@ -18,14 +18,14 @@
.b + .c { color: green; }
</style>
<div class="a" />
<div class="a"></div>
{#if foo}
<div class="b" />
<div class="b"></div>
{:else}
{#each array as item}
<div class="c" />
<div class="c"></div>
{/each}
{/if}
<div class="d" />
<div class="d"></div>

8
packages/svelte/tests/css/samples/siblings-combinator-if-not-exhaustive/input.svelte
Unescape View File

@ -14,12 +14,12 @@
.b + .c { color: green; }
</style>
<div class="a" />
<div class="a"></div>
{#if foo}
<div class="b" />
<div class="b"></div>
{:else if bar}
<div class="c" />
<div class="c"></div>
{/if}
<div class="d" />
<div class="d"></div>

10
packages/svelte/tests/css/samples/siblings-combinator-if/input.svelte
Unescape View File

@ -18,14 +18,14 @@
.c + .d { color: green; }
</style>
<div class="a" />
<div class="a"></div>
{#if foo}
<div class="b" />
<div class="b"></div>
{:else if bar}
<div class="c" />
<div class="c"></div>
{:else}
<div class="d" />
<div class="d"></div>
{/if}
<div class="e" />
<div class="e"></div>

10
packages/svelte/tests/css/samples/siblings-combinator-slot/input.svelte
Unescape View File

@ -11,14 +11,14 @@
.c + .f { color: green; }
</style>
<div class="a" />
<div class="a"></div>
<App>
<div class="b" slot="a" />
<div class="b" slot="a"></div>
<div class="c" slot="b">
<div class="d" />
<div class="e" />
<div class="d"></div>
<div class="e"></div>
</div>
</App>
<div class="f" />
<div class="f"></div>

8
packages/svelte/tests/css/samples/siblings-combinator-star/input.svelte
Unescape View File

@ -8,10 +8,10 @@
</style>
<div class="not-match">
<div />
<div></div>
</div>
<div class="match">
<div />
<div />
</div>
<div></div>
<div></div>
</div>

6
packages/svelte/tests/css/samples/siblings-combinator/input.svelte
Unescape View File

@ -29,7 +29,7 @@
</style>
<div class="a">
<span />
<b />
<span></span>
<b></b>
</div>
<article class="b"></article>
<article class="b"></article>

2
packages/svelte/tests/parser-legacy/samples/attribute-shorthand/input.svelte
Unescape View File

@ -1 +1 @@
<div {id}/>
<div {id}></div>

4
packages/svelte/tests/parser-legacy/samples/attribute-shorthand/output.json
Unescape View File

@ -2,12 +2,12 @@
"html": {
"type": "Fragment",
"start": 0,
"end": 11,
"end": 16,
"children": [
{
"type": "Element",
"start": 0,
"end": 11,
"end": 16,
"name": "div",
"attributes": [
{

2
packages/svelte/tests/runtime-browser/custom-elements-samples/escaped-css/main.svelte
Unescape View File

@ -1,6 +1,6 @@
<svelte:options customElement="custom-element" />
<span class="icon" />
<span class="icon"></span>
<style>
.icon::before {

2
packages/svelte/tests/runtime-browser/custom-elements-samples/ondestroy/main.svelte
Unescape View File

@ -19,4 +19,4 @@
});
</script>
<div bind:this={el} />
<div bind:this={el}></div>

2
packages/svelte/tests/runtime-browser/custom-elements-samples/props/main.svelte
Unescape View File

@ -7,4 +7,4 @@
export let flagged = false;
</script>
<my-widget class="foo" {items} flag1={flagged} flag2 />
<my-widget class="foo" {items} flag1={flagged} flag2></my-widget>

2
packages/svelte/tests/runtime-browser/custom-elements-samples/reflect-attributes/main.svelte
Unescape View File

@ -14,7 +14,7 @@
<div>hi</div>
<p>hi</p>
<button on:click={() => (red = false)}>off</button>
<my-widget {red} white />
<my-widget {red} white></my-widget>
<style>
:host([red]) div {

2
packages/svelte/tests/runtime-browser/samples/dynamic-element-custom-element/main.svelte
Unescape View File

@ -29,4 +29,4 @@
</script>
<svelte:element this="{tag}" {name} id="a" />
<my-custom-element {name} id="b" />
<my-custom-element {name} id="b"></my-custom-element>

2
packages/svelte/tests/runtime-browser/samples/head-script/main.svelte
Unescape View File

@ -7,4 +7,4 @@
});
</script>
</svelte:head>
<button />
<button></button>

2
packages/svelte/tests/runtime-browser/samples/inline-style-directive-precedence/main.svelte
Unescape View File

@ -12,4 +12,4 @@
style="{foo}"
style:background-color="{bg}en"
style:border-color={borderColor}
/>
></p>

2
packages/svelte/tests/runtime-browser/samples/inline-style-directive-update-with-spread/main.svelte
Unescape View File

@ -2,4 +2,4 @@
export let backgroundColor = 255;
</script>
<div style:background-color="rgb({backgroundColor}, 0, 0)" {...$$restProps} />
<div style:background-color="rgb({backgroundColor}, 0, 0)" {...$$restProps}></div>

4
packages/svelte/tests/runtime-legacy/samples/action-body/main.svelte
Unescape View File

@ -18,7 +18,7 @@
node.addEventListener('mouseenter', onMouseEnter);
node.addEventListener('mouseleave', onMouseLeave);
return {
destroy() {
node.removeEventListener('mouseenter', onMouseEnter);
@ -29,4 +29,4 @@
</script>
<svelte:body use:tooltip="{'Perform an Action'}" />
<div bind:this={container} />
<div bind:this={container}></div>

2
packages/svelte/tests/runtime-legacy/samples/action-document/main.svelte
Unescape View File

@ -21,4 +21,4 @@
</script>
<svelte:document use:tooltip="{'Perform an Action'}" />
<div bind:this={container} />
<div bind:this={container}></div>

4
packages/svelte/tests/runtime-legacy/samples/attribute-boolean-hidden/_config.js
Unescape View File

@ -4,9 +4,9 @@ export default test({
get props() {
return { hidden: true };
},
html: '<div hidden />',
html: '<div hidden></div>',
test({ assert, component, target }) {
component.hidden = false;
assert.htmlEqual(target.innerHTML, '<div />');
assert.htmlEqual(target.innerHTML, '<div></div>');
}
});

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

@ -2,4 +2,4 @@
export let hidden = false;
</script>
<div {hidden} />
<div {hidden}></div>

2
packages/svelte/tests/runtime-legacy/samples/attribute-casing-foreign-namespace-compiler-option/main.svelte
Unescape View File

@ -1,4 +1,4 @@
<page horizontalAlignment="center">
<button textWrap="true" text="button" />
<button textWrap="true" text="button"></button>
<text wordWrap="true" />
</page>

2
packages/svelte/tests/runtime-legacy/samples/attribute-microdata/main.svelte
Unescape View File

@ -16,7 +16,7 @@
<span itemprop="ratingValue">4.6</span> (
<span itemprop="ratingCount">8864</span> ratings )
</div>
<div itemref="offers" />
<div itemref="offers"></div>
</div>
<div

2
packages/svelte/tests/runtime-legacy/samples/binding-input-range-change-with-max/main.svelte
Unescape View File

@ -8,6 +8,6 @@
}
</script>
<button on:click={change} />
<button on:click={change}></button>
<input type="range" min="0" {max} bind:value />
<p>{value} of {max}</p>

4
packages/svelte/tests/runtime-legacy/samples/binding-this-each-block-property-2/main.svelte
Unescape View File

@ -13,5 +13,5 @@
</script>
{#each refs as xxx}
<div bind:this={xxx.ref} />
{/each}
<div bind:this={xxx.ref}></div>
{/each}

2
packages/svelte/tests/runtime-legacy/samples/binding-this-member-expression-update/main.svelte
Unescape View File

@ -6,4 +6,4 @@
$: paths && logs.push('paths updated');
</script>
<div bind:this={container[paths[0]]} />
<div bind:this={container[paths[0]]}></div>

2
packages/svelte/tests/runtime-legacy/samples/component-binding-onMount/main.svelte
Unescape View File

@ -8,4 +8,4 @@
});
</script>
<div id="target" />
<div id="target"></div>

2
packages/svelte/tests/runtime-legacy/samples/component-events-nullish/Widget.svelte
Unescape View File

@ -11,4 +11,4 @@
}
}
</script>
<button on:click={click} />
<button on:click={click}></button>

2
packages/svelte/tests/runtime-legacy/samples/component-events-this/Inner.svelte
Unescape View File

@ -5,4 +5,4 @@
export const exists = true;
</script>
<button on:click={() => dispatch('bar')} />
<button on:click={() => dispatch('bar')}></button>

2
packages/svelte/tests/runtime-legacy/samples/component-slot-let-in-slot-2/main.svelte
Unescape View File

@ -7,5 +7,5 @@
</script>
<Outer {prop} let:value>
<Inner><button on:click={() => { log(value); }} /></Inner>
<Inner><button on:click={() => { log(value); }}></button></Inner>
</Outer>

2
packages/svelte/tests/runtime-legacy/samples/constructor-prefer-passed-context/main.svelte
Unescape View File

@ -12,4 +12,4 @@
}
</script>
<div use:render />
<div use:render></div>

4
packages/svelte/tests/runtime-legacy/samples/deconflict-contextual-action/main.svelte
Unescape View File

@ -8,10 +8,10 @@
const array = [each_action];
</script>
<div use:action={collect} />
<div use:action={collect}></div>
<ul>
{#each array as action}
<div use:action={collect} />
<div use:action={collect}></div>
{/each}
</ul>

2
packages/svelte/tests/runtime-legacy/samples/document-binding-fullscreen/main.svelte
Unescape View File

@ -4,4 +4,4 @@
<svelte:document bind:fullscreenElement={fullscreen}/>
<div />
<div></div>

2
packages/svelte/tests/runtime-legacy/samples/each-block-keyed-component-action/Component.svelte
Unescape View File

@ -2,4 +2,4 @@
export let action;
</script>
<div use:action />
<div use:action></div>

2
packages/svelte/tests/runtime-legacy/samples/html-non-entities-inside-elements/_config.js
Unescape View File

@ -2,6 +2,6 @@ import { test } from '../../test';
export default test({
html: `
<div>'foo'<span/></div>
<div>'foo'<span></span></div>
`
});

2
packages/svelte/tests/runtime-legacy/samples/html-non-entities-inside-elements/main.svelte
Unescape View File

@ -1 +1 @@
<div>'foo'<span/></div>
<div>'foo'<span></span></div>

2
packages/svelte/tests/runtime-legacy/samples/inline-style-directive-and-style-attr-merged/main.svelte
Unescape View File

@ -2,4 +2,4 @@
export let color = 'red';
</script>
<p style="height: 40px; color: blue;" style:color={color} />
<p style="height: 40px; color: blue;" style:color={color}></p>

2
packages/svelte/tests/runtime-legacy/samples/inline-style-directive-and-style-attr/main.svelte
Unescape View File

@ -2,4 +2,4 @@
export let color = 'red';
</script>
<p style="height: 40px;" style:color={color} />
<p style="height: 40px;" style:color={color}></p>

2
packages/svelte/tests/runtime-legacy/samples/inline-style-directive-css-vars/main.svelte
Unescape View File

@ -2,4 +2,4 @@
export let myColor = "red";
</script>
<p style:--border-color={myColor} />
<p style:--border-color={myColor}></p>

2
packages/svelte/tests/runtime-legacy/samples/inline-style-directive-dynamic/main.svelte
Unescape View File

@ -2,4 +2,4 @@
export let myColor = "red";
</script>
<p style:color={myColor} />
<p style:color={myColor}></p>

2
packages/svelte/tests/runtime-legacy/samples/inline-style-directive-escape/main.svelte
Unescape View File

@ -2,4 +2,4 @@
export let attack = '" onload="alert(\'uhoh\')" data-nothing="not important';
</script>
<div style:--css-variable={attack} />
<div style:--css-variable={attack}></div>

4
packages/svelte/tests/runtime-legacy/samples/inline-style-directive-shorthand/main.svelte
Unescape View File

@ -2,8 +2,8 @@
export let color = "red";
</script>
<p style:color />
<p style:color></p>
{#each [1] as _}
<p style:color />
<p style:color></p>
{/each}

2
packages/svelte/tests/runtime-legacy/samples/inline-style-directive-spread-dynamic/main.svelte
Unescape View File

@ -2,4 +2,4 @@
export let color = 'blue';
export let obj = { id: 'my-id', style: 'width: 65px' };
</script>
<p {...obj} style:color={color} />
<p {...obj} style:color={color}></p>

2
packages/svelte/tests/runtime-legacy/samples/inline-style-directive-spread/main.svelte
Unescape View File

@ -1 +1 @@
<p {...{ id: "my-id", style: "width: 65px" }} style:color="blue" />
<p {...{ id: "my-id", style: "width: 65px" }} style:color="blue"></p>

2
packages/svelte/tests/runtime-legacy/samples/inline-style-directive-string-variable/main.svelte
Unescape View File

@ -4,4 +4,4 @@
export let border_color;
</script>
<p style:color={"green"} style:transform="translateX({translate_x})" style:border="{border_width}px solid {border_color || 'pink'}" />
<p style:color={"green"} style:transform="translateX({translate_x})" style:border="{border_width}px solid {border_color || 'pink'}"></p>

2
packages/svelte/tests/runtime-legacy/samples/inline-style-directive-string/main.svelte
Unescape View File

@ -1 +1 @@
<p style:color="red" />
<p style:color="red"></p>

2
packages/svelte/tests/runtime-legacy/samples/inline-style-directive-update-object-property/main.svelte
Unescape View File

@ -9,4 +9,4 @@
}
</script>
<p style:font-size="{settings.fontSize}px" style="background-color: {settings.bg}" />
<p style:font-size="{settings.fontSize}px" style="background-color: {settings.bg}"></p>

2
packages/svelte/tests/runtime-legacy/samples/inline-style-directive/main.svelte
Unescape View File

@ -3,5 +3,5 @@
</script>
<div>
<p style:color={myColor} />
<p style:color={myColor}></p>
</div>

4
packages/svelte/tests/runtime-legacy/samples/key-block-3/main.svelte
Unescape View File

@ -3,5 +3,5 @@
</script>
{#key value}
<div />
{/key}
<div></div>
{/key}

2
packages/svelte/tests/runtime-legacy/samples/rest-props-without-props/App.svelte
Unescape View File

@ -9,4 +9,4 @@
<div>Length: {length}</div>
<div>Values: {values.join(',')}</div>
<div {...$$restProps} />
<div {...$$restProps}></div>

4
packages/svelte/tests/runtime-legacy/samples/rest-props/App.svelte
Unescape View File

@ -9,5 +9,5 @@
<div>Length: {length}</div>
<div>Values: {values.join(',')}</div>
<div {...$$restProps} />
<div {...$$props} />
<div {...$$restProps}></div>
<div {...$$props}></div>

2
packages/svelte/tests/runtime-legacy/samples/store-assignment-updates-property/main.svelte
Unescape View File

@ -21,4 +21,4 @@
$b = { foo: $b.foo + 1, baz: 0 };
}} />
<button on:click={update} />
<button on:click={update}></button>

2
packages/svelte/tests/runtime-legacy/samples/target-dom/main.svelte
Unescape View File

@ -15,4 +15,4 @@
});
</script>
<div bind:this={div} />
<div bind:this={div}></div>

2
packages/svelte/tests/runtime-legacy/samples/target-shadow-dom/main.svelte
Unescape View File

@ -16,4 +16,4 @@
});
</script>
<div bind:this={div} />
<div bind:this={div}></div>

4
packages/svelte/tests/runtime-legacy/samples/this-in-function-expressions/main.svelte
Unescape View File

@ -1,2 +1,2 @@
<button on:click="{() => { this.x = 1; }}" />
<button on:click="{function () { this.x = 1; }}" />
<button on:click="{() => { this.x = 1; }}"></button>
<button on:click="{function () { this.x = 1; }}"></button>

8
packages/svelte/tests/runtime-legacy/samples/transition-js-deferred-option-direction/main.svelte
Unescape View File

@ -15,11 +15,11 @@
</script>
{#if visible}
<div id="both-in" transition:foo />
<div id="in" in:foo />
<div id="both-in" transition:foo></div>
<div id="in" in:foo></div>
{/if}
{#if !visible}
<div id="out" out:foo />
<div id="both-out" transition:foo={{ duration: 500 }} />
<div id="out" out:foo></div>
<div id="both-out" transition:foo={{ duration: 500 }}></div>
{/if}

6
packages/svelte/tests/runtime-legacy/samples/transition-js-if-outro-unrelated-component-binding-update/Component.svelte
Unescape View File

@ -11,8 +11,8 @@
let bool = true;
</script>
<button on:click={() => (condition = false)} />
<button on:click={() => (bool = !bool)} />
<button on:click={() => (condition = false)}></button>
<button on:click={() => (bool = !bool)}></button>
{#if bool}
<div out:foo />
<div out:foo></div>
{/if}

4
packages/svelte/tests/runtime-legacy/samples/transition-js-if-outro-unrelated-component-store-update/Component.svelte
Unescape View File

@ -12,7 +12,7 @@
let bool = true;
</script>
<button on:click={() => (bool = !bool)} />
<button on:click={() => (bool = !bool)}></button>
{#if bool}
<div out:foo />
<div out:foo></div>
{/if}

2
packages/svelte/tests/runtime-legacy/samples/transition-js-if-outro-unrelated-component-store-update/main.svelte
Unescape View File

@ -5,6 +5,6 @@
</script>
{#if $condition}
<button on:click={() => ($condition = false)} id="1" />
<button on:click={() => ($condition = false)} id="1"></button>
<Component {condition} />
{/if}

2
packages/svelte/tests/runtime-runes/samples/attribute-parts/main.svelte
Unescape View File

@ -4,6 +4,6 @@
let c = 3;
</script>
<div class="{a}{b}{c}" />
<div class="{a}{b}{c}"></div>
<img src="{a}{b} hello, world {a}{c}" />

10
packages/svelte/tests/runtime-runes/samples/directives-with-member-access/main.svelte
Unescape View File

@ -12,10 +12,10 @@
<!-- these will yield TypeScript errors, because it looks like e.g. `nested.with - string`,
in other words a number. Relatedly, people should not do this. It is stupid. -->
<div use:directive.b.c-d />
<div transition:directive.b.c-d />
<div use:directive.b.c-d></div>
<div transition:directive.b.c-d></div>
{#each [] as i (i)}
<div animate:directive.b.c-d />
<div animate:directive.b.c-d></div>
{/each}
<div in:directive.b.c-d />
<div out:directive.b.c-d />
<div in:directive.b.c-d></div>
<div out:directive.b.c-d></div>

2
packages/svelte/tests/server-side-rendering/samples/attribute-spread-with-null/main.svelte
Unescape View File

@ -2,4 +2,4 @@
export let id = null;
</script>
<div {id} {...$$restProps} />
<div {id} {...$$restProps}></div>

8
packages/svelte/tests/validator/samples/a11y-aria-activedescendant/input.svelte
Unescape View File

@ -8,9 +8,9 @@
<input aria-activedescendant="some-id" tabindex={-1} />
<input aria-activedescendant="some-id" tabindex="-1" />
<svelte:element this={Math.random() ? 'input' : 'button'} aria-activedescendant="some-id" />
<div />
<div aria-activedescendant="some-id" role="tablist" tabindex={-1} />
<div aria-activedescendant="some-id" role="tablist" tabindex="-1" />
<div></div>
<div aria-activedescendant="some-id" role="tablist" tabindex={-1}></div>
<div aria-activedescendant="some-id" role="tablist" tabindex="-1"></div>
<!-- INVALID -->
<div aria-activedescendant="some-id" />
<div aria-activedescendant="some-id"></div>

8
packages/svelte/tests/validator/samples/a11y-aria-proptypes-boolean/input.svelte
Unescape View File

@ -2,7 +2,7 @@
const abc = 'abc';
</script>
<button aria-disabled="yes"/>
<button aria-disabled="no"/>
<button aria-disabled={1234}/>
<button aria-disabled={`${abc}`}/>
<button aria-disabled="yes"></button>
<button aria-disabled="no"></button>
<button aria-disabled={1234}></button>
<button aria-disabled={`${abc}`}></button>

14
packages/svelte/tests/validator/samples/a11y-aria-proptypes-integer/input.svelte
Unescape View File

@ -1,7 +1,7 @@
<div aria-level="yes" />
<div aria-level="no" />
<div aria-level={`abc`} />
<div aria-level={true} />
<div aria-level />
<div aria-level={"false"} />
<div aria-level={!"false"} />
<div aria-level="yes"></div>
<div aria-level="no"></div>
<div aria-level={`abc`}></div>
<div aria-level={true}></div>
<div aria-level></div>
<div aria-level={"false"}></div>
<div aria-level={!"false"}></div>

14
packages/svelte/tests/validator/samples/a11y-aria-proptypes-number/input.svelte
Unescape View File

@ -1,7 +1,7 @@
<div aria-valuemax="yes" />
<div aria-valuemax="no" />
<div aria-valuemax={`abc`} />
<div aria-valuemax={true} />
<div aria-valuemax />
<div aria-valuemax={'false'} />
<div aria-valuemax={!'false'} />
<div aria-valuemax="yes"></div>
<div aria-valuemax="no"></div>
<div aria-valuemax={`abc`}></div>
<div aria-valuemax={true}></div>
<div aria-valuemax></div>
<div aria-valuemax={'false'}></div>
<div aria-valuemax={!'false'}></div>

10
packages/svelte/tests/validator/samples/a11y-aria-proptypes-string/input.svelte
Unescape View File

@ -1,5 +1,5 @@
<div aria-label />
<div aria-label={true} />
<div aria-label={false} />
<div aria-label={1234} />
<div aria-label={!true} />
<div aria-label></div>
<div aria-label={true}></div>
<div aria-label={false}></div>
<div aria-label={1234}></div>
<div aria-label={!true}></div>

12
packages/svelte/tests/validator/samples/a11y-aria-proptypes-token/input.svelte
Unescape View File

@ -1,6 +1,6 @@
<div aria-sort="" />
<div aria-sort="incorrect" />
<div aria-sort />
<div aria-sort={true} />
<div aria-sort={"false"} />
<div aria-sort="ascending descending" />
<div aria-sort=""></div>
<div aria-sort="incorrect"></div>
<div aria-sort></div>
<div aria-sort={true}></div>
<div aria-sort={"false"}></div>
<div aria-sort="ascending descending"></div>

14
packages/svelte/tests/validator/samples/a11y-aria-proptypes-tokenlist/input.svelte
Unescape View File

@ -1,7 +1,7 @@
<div aria-relevant="" />
<div aria-relevant="foobar" />
<div aria-relevant />
<div aria-relevant={true} />
<div aria-relevant={"false"} />
<div aria-relevant="additions removals_" />
<div aria-relevant="additions removals_ " />
<div aria-relevant=""></div>
<div aria-relevant="foobar"></div>
<div aria-relevant></div>
<div aria-relevant={true}></div>
<div aria-relevant={"false"}></div>
<div aria-relevant="additions removals_"></div>
<div aria-relevant="additions removals_ "></div>

8
packages/svelte/tests/validator/samples/a11y-aria-proptypes-tristate/input.svelte
Unescape View File

@ -2,7 +2,7 @@
const abc = 'abc';
</script>
<div aria-checked="yes" />
<div aria-checked="no" />
<div aria-checked={1234} />
<div aria-checked={`${abc}`} />
<div aria-checked="yes"></div>
<div aria-checked="no"></div>
<div aria-checked={1234}></div>
<div aria-checked={`${abc}`}></div>

54
packages/svelte/tests/validator/samples/a11y-click-events-have-key-events/input.svelte
Unescape View File

@ -10,65 +10,65 @@
<!-- should warn -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div on:click={noop} />
<div on:click={noop}></div>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div on:click={noop} aria-hidden="false" />
<div on:click={noop} aria-hidden="false"></div>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<section on:click={noop} />
<section on:click={noop}></section>
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<main on:click={noop} />
<main on:click={noop}></main>
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<article on:click={noop} />
<article on:click={noop}></article>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<header on:click={noop} />
<header on:click={noop}></header>
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<footer on:click={noop} />
<footer on:click={noop}></footer>
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<footer onclick={noop} />
<footer onclick={noop}></footer>
<!-- should not warn -->
<div class="foo" />
<div class="foo"></div>
<a href="http://x.y.z" on:click={noop}>foo</a>
<button on:click={noop} />
<select on:click={noop} />
<button on:click={noop}></button>
<select on:click={noop}></select>
<input type="button" on:click={noop} />
<input type={dynamicTypeValue} on:click={noop} />
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div on:click={noop} {...props} />
<div on:click={noop} {...props}></div>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div on:click={noop} on:keydown={noop} />
<div on:click={noop} on:keydown={noop}></div>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div on:click={noop} on:keyup={noop} />
<div on:click={noop} on:keyup={noop}></div>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div on:click={noop} on:keypress={noop} />
<div on:click={noop} on:keypress={noop}></div>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div on:click={noop} on:keydown={noop} on:keyup={noop} />
<div on:click={noop} on:keydown={noop} on:keyup={noop}></div>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div on:click={noop} on:keyup={noop} on:keypress={noop} />
<div on:click={noop} on:keyup={noop} on:keypress={noop}></div>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div on:click={noop} on:keypress={noop} on:keydown={noop} />
<div on:click={noop} on:keypress={noop} on:keydown={noop}></div>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div on:click={noop} on:keydown={noop} on:keyup={noop} on:keypress={noop} />
<div on:click={noop} on:keydown={noop} on:keyup={noop} on:keypress={noop}></div>
<input on:click={noop} type="hidden" />
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div on:click={noop} aria-hidden />
<div on:click={noop} aria-hidden></div>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div on:click={noop} aria-hidden="true" />
<div on:click={noop} aria-hidden="true"></div>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div on:click={noop} aria-hidden="false" on:keydown={noop} />
<div on:click={noop} aria-hidden="false" on:keydown={noop}></div>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div on:click={noop} aria-hidden={dynamicAriaHiddenValue} />
<div on:click={noop} aria-hidden={dynamicAriaHiddenValue}></div>
<div on:click={noop} role="presentation" />
<div on:click={noop} role="none" />
<div on:click={noop} role={dynamicRole} />
<div onclick={noop} role={dynamicRole} />
<div on:click={noop} role="presentation"></div>
<div on:click={noop} role="none"></div>
<div on:click={noop} role={dynamicRole}></div>
<div onclick={noop} role={dynamicRole}></div>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<svelte:element this={Math.random() ? 'button' : 'div'} on:click={noop} />

Some files were not shown because too many files have changed in this diff Show More

Write Preview
Loading…
Cancel
Save