michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Handle false properly in class:list (#3922)

Browse source 
* fix(#3920): properly handle false in `class:list`

* fix: allow 0 in `class:list`

* fix: output empty `class:list` as `''` rather than `class=''`

Co-authored-by: Nate Moore <nate@astro.build>
This commit is contained in:
Nate Moore 2022-07-14 12:01:17 -05:00 committed by GitHub
parent 78e765dc65
commit 7094d6a45f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 23 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/dirty-doors-call.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Properly handle `false` in `class:list`

6
packages/astro/src/runtime/server/index.ts
View file

@ -545,7 +545,11 @@ Make sure to use the static attribute syntax (\`${key}={value}\`) instead of the
// support "class" from an expression passed into an element (#782)
if (key === 'class:list') {
return markHTMLString(` ${key.slice(0, -5)}="${toAttributeString(serializeListValue(value))}"`);
const listValue = toAttributeString(serializeListValue(value));
if (listValue === '') {
return '';
}
return markHTMLString(` ${key.slice(0, -5)}="${listValue}"`);
}
// Boolean values only need the key

2
packages/astro/src/runtime/server/util.ts
View file

@ -23,7 +23,7 @@ export function serializeListValue(value: any) {
// otherwise, push any other values as a string
else {
// get the item as a string
item = item == null ? '' : String(item).trim();
item = item === false || item == null ? '' : String(item).trim();
// add the item if it is filled
if (item) {

4
packages/astro/test/astro-class-list.test.js
View file

@ -20,6 +20,8 @@ describe('Class List', async () => {
expect($('[class="test truthy"]')).to.have.lengthOf(1);
expect($('[class="test set"]')).to.have.lengthOf(1);
expect($('[class="hello goodbye world friend"]')).to.have.lengthOf(1);
expect($('[class="foo baz"]')).to.have.lengthOf(1);
expect($('span:not([class])')).to.have.lengthOf(1);
expect($('.false, .noshow1, .noshow2, .noshow3, .noshow4')).to.have.lengthOf(0);
});
@ -34,5 +36,7 @@ describe('Class List', async () => {
expect($('[class="test truthy"]')).to.have.lengthOf(1);
expect($('[class="test set"]')).to.have.lengthOf(1);
expect($('[class="hello goodbye world friend"]')).to.have.lengthOf(1);
expect($('[class="foo baz"]')).to.have.lengthOf(1);
expect($('span:not([class])')).to.have.lengthOf(1);
});
});

4
packages/astro/test/fixtures/astro-class-list/src/pages/component.astro vendored
View file

@ -16,3 +16,7 @@ import Component from '../components/Span.astro'
<Component class:list={new Set(['test', 'set'])} />
<Component class:list={[ 'hello goodbye', { hello: true, world: true }, new Set([ 'hello', 'friend' ]) ]} />
<Component class:list={['foo', false && 'bar', true && 'baz']} />
<Component class:list={[false && 'empty']} />

4
packages/astro/test/fixtures/astro-class-list/src/pages/index.astro vendored
View file

@ -13,3 +13,7 @@
<span class:list={new Set(['test', 'set'])} />
<span class:list={[ 'hello goodbye', { hello: true, world: true }, new Set([ 'hello', 'friend' ]) ]} />
<span class:list={['foo', false && 'bar', true && 'baz']} />
<span class:list={[false && 'empty']} />