Handle whitespace inside #each with animation (#5477)

* Strip out whitespace inside each when it has an animation

* remove accidentally committed file

* lint

* add test to validate no error

* update changelog

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
Co-authored-by: tanhauhau <lhtan93@gmail.com>
Co-authored-by: Tan Li Hau <tanhauhau@users.noreply.github.com>
pull/7146/head
Andreas Ehrencrona 3 years ago committed by GitHub
parent e4a3a875f3
commit a4e4027f79
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -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.2
* Export `FlipParams` interface from `svelte/animate` ([#7103](https://github.com/sveltejs/svelte/issues/7103))

@ -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';
import get_const_tags from './shared/get_const_tags';
export default class EachBlock extends AbstractBlock {
@ -62,6 +63,8 @@ export default class EachBlock extends AbstractBlock {
([this.const_tags, this.children] = get_const_tags(info.children, component, this, this));
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);
@ -76,3 +79,7 @@ export default class EachBlock extends AbstractBlock {
: null;
}
}
function isEmptyNode(node: INode) {
return node.type === 'Text' && node.data.trim() === '';
}

@ -0,0 +1,10 @@
<script>
function flip(){}
</script>
<div>
{#each [] as n (n)}
{@const a = n}
<div animate:flip={a} />
{/each}
</div>

@ -0,0 +1,7 @@
<script>
function flip() {}
</script>
<div>
{#each [] as n (n)} <div animate:flip /> {/each}
</div>
Loading…
Cancel
Save