Automatic serialization of object attribute values in Snabbdom attrs

When using Snabbdom attrs to set HTML element attributes, values which are objects are now automatically serialized to JSON. Previously, since HTML attributes are always strings, trying to set a raw object value with setAttribute() resulted in the attribute value [object Object].

For example, in

div(attrs={foo: {hello: 'world'}})

the foo attr will end up in HTML as JSON: "{"hello":"world"}".

This behavior can be controlled with the serializeAttrsObjects option, which defaults to true when using Snabbdom.

Bug fix: Ensure spacing between text nodes

Previously, contiguous piped text blocks were rendered without breaks; for instance:

p
  | Hello
  | world

would result in HTML output of <p>Helloworld</p>, which diverges from the behavior specified at https://pugjs.org/language/plain-text.html. With this fix the above renders as <p>Hello world</p>. NB when mixing piped text with other tags, spaces are deliberately not added between tag texts, as in the example from the linked documentation:

| You put the em
em pha
| sis on the wrong syl
em la
| ble.

This still renders as You put the em<em>pha</em>sis on the wrong syl<em>la</em>ble..

Expose `$mixins` var within template functions

Within code blocks in your template code, you can now access Jade mixin functions via the $mixins variable. In virtual-jade, mixins boil down to functions that take arguments and return a tree of h(name, attrs, children). They are like React stateless components. Accessing them via $mixins is useful for special cases where you want to pass around handles to blocks of Jade code as callback functions, e.g.:

mixin item(x)
  .item
    .more-tree= x + 1

list-virtual-scroll(props={itemRenderer: $mixins.item})

// in list-virtual-scroll.jade
each val in allItems.slice(startIdx, endIdx)
  = props.itemRenderer(val)

Automatic semicolon insertion after top-level code blocks

To match semicolon behavior of other code blocks. Top-level code blocks live outside the root node, for example:

- const x = 1
p Value is #{x}

improved iteration support

Implements the remaining missing features from https://pugjs.org/language/iteration.html:

Iteration over key/value pairs of objects:

each val, key in {foo: 'bar', baz: 'qux'}
  .object-entry Value at #{key} is #{val}

else-block executes when no entries (in array or object) exist:

- var values = [];
ul
  each val in values
    li= val
  else
    li There are no values

misc. fixes and better snabbdom support

• snabbdom mode now defaults to passing through attributes directly, to take advantage of snabbdom-specific modules notations such as objects for props and attrs
• snabbdom mode now supports literal/raw HTML imports
• "falsey" values returned from buffered code are now output, so e.g. span= 0 ultimately becomes <span>0</span>

'each' iterations close over vars

This was unspecified behavior changed in v0.6.0, now restored. Permits code such as the following to work "as expected" (i.e. clicking on the third item in items will call the handler with the third item as its argument):

each item in items
  button(onclick=() => clickedItem(item))= item

Raw mode bypasses attr->prop translations

The rawProps option turns off translation of Jade attributes to HTMLElement properties. In this mode, for instance, the following Jade:

label(for='myEl')

will produce roughly the following JS:

h('label', {for: 'myEl'})

rather than auto-translating the for attr to the htmlFor prop.

This is now the default for the Snabbdom config, allowing direct usage of Snabb's top-level keys for modules such as props, attrs, class, etc:

label.my-class(
  class={'a-second-class': true}
  props={htmlFor: 'myEl'}
)

snabbdom fixes and refactoring

Primarily fixes each functionality for snabbdom, with tests and updates to ensure that child node lists are flat (comprised of single elements without superfluous nesting of arrays, which virtual-dom happily accepts but snabb does not). Most significantly the implementation of visitEach no longer uses Array.map but instead loops through nodes running Array.concat to keep lists flattened.

Internally, continues a longer-term cleanup project with some minor lib code refactoring and lots of test cleanup (expect.js replacing raw node.js asserts for better failure output, docstrings, etc).

Support multiple Virtual DOM libraries

Tests are now run against both virtual-dom and snabbdom, with some new configuration options to make it easier to work with arbitrary Virtual DOM libraries (see README).

virtual-jade-loader will soon be updated to allow setting these config options directly in Webpack config.