8000 update message · sveltejs/svelte@b29da13 · GitHub
[go: up one dir, main page]
Skip to content

Commit b29da13

Browse files
Rich-HarrisRich-Harris
committed
update message
1 parent b4d5b39 commit b29da13

File tree

6 files changed

+43
-12
lines changed

6 files changed

+43
-12
lines changed

‎documentation/docs/98-reference/.generated/compile-warnings.md

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -635,9 +635,22 @@ In some situations a selector may target an element that is not 'visible' to the
635635
### element_implicitly_closed
636636

637637
```
638-
The tag `<%name%>` was implicitly closed by the parent or a next element. This may cause DOM structure being other than expected one.
638+
This element is implicitly closed by the following `%tag%`, which can cause an unexpected DOM structure. Add an explicit `%closing%` to avoid surprises.
639639
```
640640

641+
In HTML, some elements are implicitly closed by another element. For example, you cannot nest a `<p>` inside another `<p>`:
642+
643+
```html
644+
<!-- this HTML... -->
645+
<p><p>hello</p>
646+
647+
<!-- results in this DOM structure -->
648+
<p></p>
649+
<p>hello</p>
650+
```
651+
652+
Similarly, a parent element's closing tag will implicitly close all child elements, even if the `</` was a typo and you meant to create a _new_ element. To avoid ambiguity, it's always a good idea to have an explicit closing tag.
653+
641654
### element_invalid_self_closing_tag
642655

643656
```

‎packages/svelte/messages/compile-warnings/template.md

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,20 @@
3232
3333
## element_implicitly_closed
3434

35-
> The tag `<%name%>` was implicitly closed by the parent or a next element. This may cause DOM structure being other than expected one.
35+
> This element is implicitly closed by the following `%tag%`, which can cause an unexpected DOM structure. Add an explicit `%closing%` to avoid surprises.
36+
37+
In HTML, some elements are implicitly closed by another element. For example, you cannot nest a `<p>` inside another `<p>`:
38+
39+
```html
40+
<!-- this HTML... -->
41+
<p><p>hello</p>
42+
43+
<!-- results in this DOM structure -->
44+
<p></p>
45+
<p>hello</p>
46+
```
47+
48+
Similarly, a parent element's closing tag will implicitly close all child elements, even if the `</` was a typo and you meant to create a _new_ element. To avoid ambiguity, it's always a good idea to have an explicit closing tag.
3649

3750
## element_invalid_self_closing_tag
3851

‎packages/svelte/src/compiler/phases/1-parse/state/element.js

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,11 @@ export default function element(parser) {
9696
if (parent.type === 'RegularElement') {
9797
if (!parser.last_auto_closed_tag || parser.last_auto_closed_tag.tag !== name) {
9898
const end = parent.fragment.nodes[0]?.start ?? start;
99-
w.element_implicitly_closed({ start: parent.start, end }, parent.name);
99+
w.element_implicitly_closed(
100+
{ start: parent.start, end },
101+
`</${name}>`,
102+
`</${parent.name}>`
103+
);
100104
}
101105
} else if (!parser.loose) {
102106
if (parser.last_auto_closed_tag && parser.last_auto_closed_tag.tag === name) {
@@ -192,7 +196,7 @@ export default function element(parser) {
192196

193197
if (parent.type === 'RegularElement' && closing_tag_omitted(parent.name, name)) {
194198
const end = parent.fragment.nodes[0]?.start ?? start;
195-
w.element_implicitly_closed({ start: parent.start, end }, parent.name);
199+
w.element_implicitly_closed({ start: parent.start, end }, `<${name}>`, `</${parent.name}>`);
196200
parent.end = start;
197201
parser.pop();
198202
parser.last_auto_closed_tag = {

‎packages/svelte/src/compiler/warnings.js

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -748,12 +748,13 @@ export function component_name_lowercase(node, name) {
748748
}
749749

750750
/**
751-
* The tag `<%name%>` was implicitly closed by the parent or a next element. This may cause DOM structure being other than expected one.
751+
* This element is implicitly closed by the following `%tag%`, which can cause an unexpected DOM structure. Add an explicit `%closing%` to avoid surprises.
752752
* @param {null | NodeLike} node
753-
* @param {string} name
753+
* @param {string} tag
754+
* @param {string} closing
754755
*/
755-
export function element_implicitly_closed(node, name) {
756-
w(node, 'element_implicitly_closed', `The tag \`<${name}>\` was implicitly closed by the parent or a next element. This may cause DOM structure being other than expected one.\nhttps://svelte.dev/e/element_implicitly_closed`);
756+
export function element_implicitly_closed(node, tag, closing) {
757+
w(node, 'element_implicitly_closed', `This element is implicitly closed by the following \`${tag}\`, which can cause an unexpected DOM structure. Add an explicit \`${closing}\` to avoid surprises.\nhttps://svelte.dev/e/element_implicitly_closed`);
757758
}
758759

759760
/**

‎packages/svelte/tests/validator/samples/implicitly-closed-by-parent/warnings.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
[
22
{
33
"code": "element_implicitly_closed",
4-
"message": "The tag `<div>` was implicitly closed by the parent or a next element. This may cause DOM structure being other than expected one.",
4+
"message": "This element is implicitly closed by the following `</main>`, which can cause an unexpected DOM structure. Add an explicit `</div>` to avoid surprises.",
55
"start": {
66
"line": 1,
77
"column": 6
@@ -13,7 +13,7 @@
1313
},
1414
{
1515
"code": "element_implicitly_closed",
16-
"message": "The tag `<div>` was implicitly closed by the parent or a next element. This may cause DOM structure being other than expected one.",
16+
"message": "This element is implicitly closed by the following `</main>`, which can cause an unexpected DOM structure. Add an explicit `</div>` to avoid surprises.",
1717
"start": {
1818
"line": 4,
1919
"column": 1

‎packages/svelte/tests/validator/samples/implicitly-closed-by-sibling/warnings.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
[
22
{
33
"code": "element_implicitly_closed",
4-
"message": "The tag `<p>` was implicitly closed by the parent or a next element. This may cause DOM structure being other than expected one.",
4+
"message": "This element is implicitly closed by the following `<p>`, which can cause an unexpected DOM structure. Add an explicit `</p>` to avoid surprises.",
55
"start": {
66
"line": 2,
77
"column": 1
@@ -13,7 +13,7 @@
1313
},
1414
{
1515
"code": "element_implicitly_closed",
16-
"message": "The tag `<p>` was implicitly closed by the parent or a next element. This may cause DOM structure being other than expected one.",
16+
"message": "This element is implicitly closed by the following `<p>`, which can cause an unexpected DOM structure. Add an explicit `</p>` to avoid surprises.",
1717
"start": {
1818
"line": 8,
1919
"column": 1

0 commit comments

Comments
 (0)
0