Updated: Breaking changes for boolean attributes in HAML 6

Posted . Visible to the public. Auto-destruct in 58 days

Starting with Unpoly 3.8 Show archive.org snapshot , most Unpoly attributes can now be enabled with a value "true" and be disabled with a value "false". This pairs well with the default (unpatched) Haml 6 behavior.

Changes

  • Haml 6 has some [breaking changes](https://github.com/haml/haml/blob/main/CHANGELOG.md#600) regarding [boolean attributes](https://github.com/haml/haml/issues/1091).
  • > Only the following attributes and `aria`/`data` attributes are considered boolean attributes: `allowfullscreen`, `async`, `autobuffer`, `autofocus`, `autoplay`, `checked`, `controls`, `default`, `defer`, `disabled`, `download`, `formnovalidate`, `hidden`, `inert`, `ismap`, `itemscope`, `loop`, `multiple`, `muted`, `novalidate`, `open`, `pubdate`, `readonly`, `required`, `reversed`, `scoped`,
  • `seamless`, `selected`, `sortable`, `truespeed`, `typemustmatch`
  • This requires you to change custom attributes in case you want them to be an attribute without a value e.g. `a(up-test)` has to be changed to `a(up-test='')` in HAML 6.
  • ## Examples
  • | Haml (no breaking changes) | Version 5 | Version 6 |
  • |----------------------------|-----------|-----------|
  • | %button(disabled) | `<button disabled=""></button>` | `<button disabled=""></button>` |
  • | %button(disabled=true) | `<button disabled=""></button>` | `<button disabled=""></button>` |
  • | %button(disabled=false) | `<button></button>` | `<button></button>` |
  • | %button(disabled='true') | `<button disabled="true"></button>` | `<button disabled="true"></button>` |
  • | %button(disabled='false') | `<button disabled="false"></button>` | `<button disabled="false"></button>` |
  • | %button(disabled='') | `<button disabled=""></button>` | `<button disabled=""></button>` |
  • | Haml (no breaking changes) | Version 5 | Version 6 |
  • |----------------------------|-----------|-----------|
  • | %button(data-test) | `<button data-test=""></button>` | `<button data-test=""></button>` |
  • | %button(data-test=true) | `<button data-test=""></button>` | `<button data-test=""></button>` |
  • | %button(data-test=false) | `<button></button>` | `<button></button>` |
  • | %button(data-test='true') | `<button data-test="true"></button>` | `<button data-test="true"></button>` |
  • | %button(data-test='false') | `<button data-test="false"></button>` | `<button data-test="false"></button>` |
  • | %button(data-test='') | `<button data-test=""></button>` | `<button data-test=""></button>` |
  • | Haml (with breaking changes) | Version 5 | Version 6 |
  • |----------------------------|-----------|-----------|
  • | %button(up-test) | `<button up-test=""></button>` | `<button up-test="true"></button>` |
  • | %button(up-test=true) | `<button up-test=""></button>` | `<button up-test="true"></button>` |
  • | %button(up-test=false) | `<button></button>` | `<button up-test="false"></button>` |
  • | %button(up-test='true') | `<button up-test="true"></button>` | `<button up-test="true"></button>` |
  • | %button(up-test='') | `<button up-test=""></button>` | `<button up-test=""></button>` |
  • ## Monkey Patch
  • In case you want to reconfigure the attributes that a recognized as boolean attributes you can use a monkey patch in an initializer. For example, the following would consider all attributes prefixed with `app-` to be boolean attributes:
  • ```ruby
  • ### Haml 6.3 and newer
  • Haml.class_eval do
  • remove_const(:BOOLEAN_ATTRIBUTES).tap do |boolean_attributes|
  • const_set(:BOOLEAN_ATTRIBUTES, [*boolean_attributes, /^app-/].freeze)
  • end
  • end
  • ### Haml 6.0 - 6.2.x
  • Haml::AttributeBuilder.class_eval do
  • remove_const(:BOOLEAN_ATTRIBUTES).tap do |boolean_attributes|
  • const_set(:BOOLEAN_ATTRIBUTES, [*boolean_attributes, /^app-/].freeze)
  • end
  • end
  • ```
  • Note: You might want to consider using `data` attributes for all your custom attributes e.g. `scrollable` => `data-scrollable`. It might still be legit to allow framework prefixes in case they do not support `data` attributes e.g. `ng-` (Angular) or `up-` (Unpoly).
  • -But be very selective about patching `up-` attributes so you can still use expressions like `[up-follow=false]` or `[up-history=false]`.
  • +
  • +## Boolean [Unpoly](https://unpoly.com) attributes
  • +
  • +Be very selective about patching `up-` attributes so you can still use expressions like `[up-follow=false]` or `[up-history=false]`.
  • +
  • +Starting with [Unpoly 3.8](https://github.com/unpoly/unpoly/discussions/646), most Unpoly attributes can now be enabled with a value `"true"` and be disabled with a value `"false"`. This pairs well with the default (unpatched) Haml 6 behavior.
  • +
  • A different approach is to create attributes from a ruby hash:
  • +
  • ```haml
  • %tr{ { 'up-expand': ('' if superuser?) }.compact }
  • ```
  • +
  • This will provide you with `<tr up-expand="">` for a superuser and `<tr>` otherwise.
Henning Koch
License
Source code in this card is licensed under the MIT License.
Posted by Henning Koch to makandra dev (2024-06-21 14:46)