Adds the class directive

[jacwright]

Allows <div class:active="user.active"> to simplify templates littered with ternary statements.

Addresses #890

[Rich-Harris]

Do we need the Boolean here? In Chrome at least it coerce the value for us

[Rich-Harris]

Update: tested in Chrome, Firefox and Safari. I reckon we can do without — I'll delete it

[Rich-Harris]

Thank you!

[jacwright]

@Rich-Harris the Boolean is necessary. The toggle method takes an optional second parameter to force the class to be toggled on or off, depending if that value is truthy or falsey, otherwise it will just toggle the class. If the value is undefined then the default behavior is run. E.g.

node.classList.toggle('foo', true); // class="foo"
node.classList.toggle('foo', undefined); // class=""
node.classList.toggle('foo', false); // class=""
node.classList.toggle('foo', undefined); // class="foo"

The Boolean ensures that undefined is treated falsey instead of as an empty parameter.

[lukeed]

^ Yup! It bugs me that undefined is not treated as falsey in this case 😠

We can do !!toggle to save bytes over Boolean.

[jacwright]

Oh yeah, of course. !! is better.

[tivac]

Disagree on !! being better than Boolean(), any minifier worth its salt should do that for you and Boolean() is much more clear for anyone reading the code.

Since it's generated code it probably isn't very important but I'll always advocate for code clarity over tricks, even well-known ones.

[Rich-Harris]

Whoops. Good catch. Fixed in 2.13.1 — I went with !!, since Uglify/Terser don't rewrite Boolean(...) (though Closure does)