From 7cd143374aad53e29fc24a3275d1a4a86a3872bd Mon Sep 17 00:00:00 2001 From: Andreas Ehrencrona Date: Wed, 30 Sep 2020 15:13:08 +0200 Subject: [PATCH 1/5] Strip out whitespace inside each when it has an animation --- src/compiler/compile/nodes/EachBlock.ts | 7 ++ .../input.svelte | 1 + .../output.json | 94 +++++++++++++++++++ test/parser/samples/ssswell/input.svelte | 5 + 4 files changed, 107 insertions(+) create mode 100644 test/parser/samples/animation-each-with-whitespace/input.svelte create mode 100644 test/parser/samples/animation-each-with-whitespace/output.json create mode 100644 test/parser/samples/ssswell/input.svelte diff --git a/src/compiler/compile/nodes/EachBlock.ts b/src/compiler/compile/nodes/EachBlock.ts index c03128c388a6..e83a862227e1 100644 --- a/src/compiler/compile/nodes/EachBlock.ts +++ b/src/compiler/compile/nodes/EachBlock.ts @@ -9,6 +9,7 @@ import { Node } from 'estree'; import Component from '../Component'; import { TemplateNode } from '../../interfaces'; import compiler_errors from '../compiler_errors'; +import { INode } from './interfaces'; export default class EachBlock extends AbstractBlock { type: 'EachBlock'; @@ -60,6 +61,8 @@ export default class EachBlock extends AbstractBlock { this.children = map_children(component, this, this.scope, info.children); if (this.has_animation) { + this.children = this.children.filter(child => !isEmptyNode(child)); + if (this.children.length !== 1) { const child = this.children.find(child => !!(child as Element).animation); component.error((child as Element).animation, compiler_errors.invalid_animation_sole); @@ -74,3 +77,7 @@ export default class EachBlock extends AbstractBlock { : null; } } + +function isEmptyNode(node: INode) { + return node.type === 'Text' && node.data.trim() === ''; +} \ No newline at end of file diff --git a/test/parser/samples/animation-each-with-whitespace/input.svelte b/test/parser/samples/animation-each-with-whitespace/input.svelte new file mode 100644 index 000000000000..ca12ffa82db4 --- /dev/null +++ b/test/parser/samples/animation-each-with-whitespace/input.svelte @@ -0,0 +1 @@ +
{#each [] as n (n)}
{/each}
\ No newline at end of file diff --git a/test/parser/samples/animation-each-with-whitespace/output.json b/test/parser/samples/animation-each-with-whitespace/output.json new file mode 100644 index 000000000000..da9d7feb9e37 --- /dev/null +++ b/test/parser/samples/animation-each-with-whitespace/output.json @@ -0,0 +1,94 @@ +{ + "html": { + "start": 0, + "end": 59, + "type": "Fragment", + "children": [ + { + "start": 0, + "end": 59, + "type": "Element", + "name": "div", + "attributes": [], + "children": [ + { + "start": 5, + "end": 53, + "type": "EachBlock", + "expression": { + "type": "ArrayExpression", + "start": 12, + "end": 14, + "loc": { + "start": { + "line": 1, + "column": 12 + }, + "end": { + "line": 1, + "column": 14 + } + }, + "elements": [] + }, + "children": [ + { + "start": 24, + "end": 25, + "type": "Text", + "raw": " ", + "data": " " + }, + { + "start": 25, + "end": 45, + "type": "Element", + "name": "div", + "attributes": [ + { + "start": 30, + "end": 42, + "type": "Animation", + "name": "flip", + "modifiers": [], + "expression": null + } + ], + "children": [] + }, + { + "start": 45, + "end": 46, + "type": "Text", + "raw": " ", + "data": " " + } + ], + "context": { + "type": "Identifier", + "name": "n", + "start": 18, + "end": 19 + }, + "key": { + "type": "Identifier", + "start": 21, + "end": 22, + "loc": { + "start": { + "line": 1, + "column": 21 + }, + "end": { + "line": 1, + "column": 22 + } + }, + "name": "n" + } + } + ] + } + ] + } +} \ No newline at end of file diff --git a/test/parser/samples/ssswell/input.svelte b/test/parser/samples/ssswell/input.svelte new file mode 100644 index 000000000000..d24d5b457694 --- /dev/null +++ b/test/parser/samples/ssswell/input.svelte @@ -0,0 +1,5 @@ + + +sssweet \ No newline at end of file From ad7b1fd36d9c0d85ed5d9d10e2d6a9105e8b02c6 Mon Sep 17 00:00:00 2001 From: Andreas Ehrencrona Date: Wed, 30 Sep 2020 15:15:32 +0200 Subject: [PATCH 2/5] remove accidentally committed file --- .../samples/animation-each-with-whitespace/input.svelte | 2 +- test/parser/samples/ssswell/input.svelte | 5 ----- 2 files changed, 1 insertion(+), 6 deletions(-) delete mode 100644 test/parser/samples/ssswell/input.svelte diff --git a/test/parser/samples/animation-each-with-whitespace/input.svelte b/test/parser/samples/animation-each-with-whitespace/input.svelte index ca12ffa82db4..08e4d20f44cd 100644 --- a/test/parser/samples/animation-each-with-whitespace/input.svelte +++ b/test/parser/samples/animation-each-with-whitespace/input.svelte @@ -1 +1 @@ -
{#each [] as n (n)}
{/each}
\ No newline at end of file +
{#each [] as n (n)}
{/each}
diff --git a/test/parser/samples/ssswell/input.svelte b/test/parser/samples/ssswell/input.svelte deleted file mode 100644 index d24d5b457694..000000000000 --- a/test/parser/samples/ssswell/input.svelte +++ /dev/null @@ -1,5 +0,0 @@ - - -sssweet \ No newline at end of file From 47f9dc36fdfc49515b2012b70286c0befd83021b Mon Sep 17 00:00:00 2001 From: Andreas Ehrencrona Date: Fri, 30 Jul 2021 16:50:26 +0300 Subject: [PATCH 3/5] lint --- src/compiler/compile/nodes/EachBlock.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/compiler/compile/nodes/EachBlock.ts b/src/compiler/compile/nodes/EachBlock.ts index e83a862227e1..a2181d54f28d 100644 --- a/src/compiler/compile/nodes/EachBlock.ts +++ b/src/compiler/compile/nodes/EachBlock.ts @@ -80,4 +80,4 @@ export default class EachBlock extends AbstractBlock { function isEmptyNode(node: INode) { return node.type === 'Text' && node.data.trim() === ''; -} \ No newline at end of file +} From 27f799a2de3a30d514b7e97b22b1a605b949a03d Mon Sep 17 00:00:00 2001 From: tanhauhau Date: Thu, 13 Jan 2022 22:52:53 +0800 Subject: [PATCH 4/5] add test to validate no error --- .../input.svelte | 1 - .../output.json | 94 ------------------- .../animation-each-with-const/errors.json | 1 + .../animation-each-with-const/input.svelte | 10 ++ .../errors.json | 1 + .../input.svelte | 7 ++ 6 files changed, 19 insertions(+), 95 deletions(-) delete mode 100644 test/parser/samples/animation-each-with-whitespace/input.svelte delete mode 100644 test/parser/samples/animation-each-with-whitespace/output.json create mode 100644 test/validator/samples/animation-each-with-const/errors.json create mode 100644 test/validator/samples/animation-each-with-const/input.svelte create mode 100644 test/validator/samples/animation-each-with-whitespace/errors.json create mode 100644 test/validator/samples/animation-each-with-whitespace/input.svelte diff --git a/test/parser/samples/animation-each-with-whitespace/input.svelte b/test/parser/samples/animation-each-with-whitespace/input.svelte deleted file mode 100644 index 08e4d20f44cd..000000000000 --- a/test/parser/samples/animation-each-with-whitespace/input.svelte +++ /dev/null @@ -1 +0,0 @@ -
{#each [] as n (n)}
{/each}
diff --git a/test/parser/samples/animation-each-with-whitespace/output.json b/test/parser/samples/animation-each-with-whitespace/output.json deleted file mode 100644 index da9d7feb9e37..000000000000 --- a/test/parser/samples/animation-each-with-whitespace/output.json +++ /dev/null @@ -1,94 +0,0 @@ -{ - "html": { - "start": 0, - "end": 59, - "type": "Fragment", - "children": [ - { - "start": 0, - "end": 59, - "type": "Element", - "name": "div", - "attributes": [], - "children": [ - { - "start": 5, - "end": 53, - "type": "EachBlock", - "expression": { - "type": "ArrayExpression", - "start": 12, - "end": 14, - "loc": { - "start": { - "line": 1, - "column": 12 - }, - "end": { - "line": 1, - "column": 14 - } - }, - "elements": [] - }, - "children": [ - { - "start": 24, - "end": 25, - "type": "Text", - "raw": " ", - "data": " " - }, - { - "start": 25, - "end": 45, - "type": "Element", - "name": "div", - "attributes": [ - { - "start": 30, - "end": 42, - "type": "Animation", - "name": "flip", - "modifiers": [], - "expression": null - } - ], - "children": [] - }, - { - "start": 45, - "end": 46, - "type": "Text", - "raw": " ", - "data": " " - } - ], - "context": { - "type": "Identifier", - "name": "n", - "start": 18, - "end": 19 - }, - "key": { - "type": "Identifier", - "start": 21, - "end": 22, - "loc": { - "start": { - "line": 1, - "column": 21 - }, - "end": { - "line": 1, - "column": 22 - } - }, - "name": "n" - } - } - ] - } - ] - } -} \ No newline at end of file diff --git a/test/validator/samples/animation-each-with-const/errors.json b/test/validator/samples/animation-each-with-const/errors.json new file mode 100644 index 000000000000..0637a088a01e --- /dev/null +++ b/test/validator/samples/animation-each-with-const/errors.json @@ -0,0 +1 @@ +[] \ No newline at end of file diff --git a/test/validator/samples/animation-each-with-const/input.svelte b/test/validator/samples/animation-each-with-const/input.svelte new file mode 100644 index 000000000000..1e236de76f3f --- /dev/null +++ b/test/validator/samples/animation-each-with-const/input.svelte @@ -0,0 +1,10 @@ + + +
+ {#each [] as n (n)} + {@const a = n} +
+ {/each} +
diff --git a/test/validator/samples/animation-each-with-whitespace/errors.json b/test/validator/samples/animation-each-with-whitespace/errors.json new file mode 100644 index 000000000000..0637a088a01e --- /dev/null +++ b/test/validator/samples/animation-each-with-whitespace/errors.json @@ -0,0 +1 @@ +[] \ No newline at end of file diff --git a/test/validator/samples/animation-each-with-whitespace/input.svelte b/test/validator/samples/animation-each-with-whitespace/input.svelte new file mode 100644 index 000000000000..3e063716abef --- /dev/null +++ b/test/validator/samples/animation-each-with-whitespace/input.svelte @@ -0,0 +1,7 @@ + + +
+ {#each [] as n (n)}
{/each} +
From c948ca8bd105439b16a905cc3e3b7a162afd6e25 Mon Sep 17 00:00:00 2001 From: tanhauhau Date: Thu, 13 Jan 2022 22:56:48 +0800 Subject: [PATCH 5/5] update changelog --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 78bed1e11a32..88b8c8a3a8bb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ # Svelte changelog +## Unreleased + +* Ignore whitespace in `{#each}` blocks when containing elements with `animate:` ([#5477](https://github.com/sveltejs/svelte/pull/5477)) + ## 3.46.1 * Handle `style:kebab-case` directives ([#7122](https://github.com/sveltejs/svelte/issues/7122))