Releases

Accordions, safer bindings and Domma Reactive 1.2

A fix for accordions that opened to an empty panel, and a reactive core that now fails safe when a binding is handed the wrong thing. Domma JS 0.50.1, Domma Reactive 1.2.0 and Domma CMS 0.101.5.

By Darryl Waterhouse · · 3 min read

Three releases went out together today: Domma Reactive 1.2.0, Domma JS 0.50.1 built on it, and Domma CMS 0.101.5 built on that. Every site we host is already running them.

Accordions open again

If you had an FAQ or any other accordion on a Domma CMS site, you may have noticed it opening to an empty space. It was a real fault, and it was ours.

An accordion is a list of headers, each paired with a panel. Domma CMS draws each panel as a body with the content inside it. A change in Domma 0.48 widened the rule that finds panels, so it matched both the body and the content inside it - two panels per question. Every header after the first was then paired with the wrong panel, and an open question showed a panel of zero height.

The fix keeps only the outermost panel for each header. It affected every [accordion] and every collection shown as an accordion, on every site running Domma 0.48 or later, and it is fixed on all of them now. There is a test for it, so it stays fixed.

Bindings that fail safe

Domma Reactive is the layer that keeps a page in step with its data. The most common mistake with it is binding an observable instead of its value - data-if="show" rather than data-if="show.value". An observable is an object, objects are truthy, and so the content used to show when it should not.

From 1.2 that mistake is caught. The binding warns once in the console - "show" is an observable, not its value - use "show.value" - and treats it as empty:

  • data-if and {{#if}} hide their content
  • hidden, disabled and checked bindings stay off
  • text and attributes render empty, instead of [object Object]
  • a negation such as !show cannot flip the content open

A second, rarer case is handled the same way: a virtual if block nested inside a virtual list is now left out of the rows, rather than showing in every one, and the warning points at the supported alternative.

Before releasing, we scanned the Domma CMS admin and every Tool for bindings that relied on the old behaviour, and found none.

Object and array literals

Binding expressions can now build objects and arrays: {active: isOn.value, 'is-large': big.value} or [first, second]. Keys that could reach into JavaScript's internals, such as __proto__, are refused, and so are computed keys and spreads - with the position of the problem in the warning. As before, all of it is parsed by hand, with no eval; Why Domma never uses eval explains why that matters.

Also in 0.101.5

The component editor's live preview, and the page editor's component inserter, were blank on sites installed or updated from npm, because a file was missing from the package. It is back, and a test now checks that every admin file loaded by address is in the package.

Keep reading