@markuplint/alpine-spec 5.4.0 → 5.5.0

package/CHANGELOG.md

@@ -3,6 +3,13 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.5.0](https://github.com/markuplint/markuplint/compare/v5.4.0...v5.5.0) (2026-11-10)
+
+### Features
+
+* **alpine-spec:** declare how Alpine.js renders a literal in a binding ([5f05825](https://github.com/markuplint/markuplint/commit/5f05825989a9caacbd4dd890a2fa6d871a3aa69e))
+
+
 # [5.4.0](https://github.com/markuplint/markuplint/compare/v5.3.0...v5.4.0) (2026-10-29)
 
 **Note:** Version bump only for package @markuplint/alpine-spec

package/lib/index.js

@@ -26,6 +26,47 @@
  */
 const spec = {
     cites: ['https://alpinejs.dev/'],
+    /**
+     * How Alpine.js renders a literal in `:attr="…"` (`bindAttribute` of `alpinejs/src/utils/bind.js`),
+     * where it differs from the default of `@markuplint/ml-core`. Names are in lower case.
+     *
+     * - `null`, `undefined` and `false` remove the attribute, except on `aria-pressed`, `aria-checked`,
+     *   `aria-expanded` and `aria-selected`, which keep them as the strings `"null"`, `"undefined"` and `"false"`
+     * - A boolean attribute (its list is in `bind.js`) is present with its name as the value for anything but
+     *   those three, `0` and the empty string included
+     * - `class` adds to the classes that the element has, and what is added is none for these literals
+     * - `hidden` is not in the list of boolean attributes, so `true` is `hidden="true"`
+     *
+     * What it does not tell, which does not affect a rule:
+     *
+     * - A boolean attribute has its name as the value (`disabled="disabled"`), not `""`
+     * - `:value` sets the property of an `input`, not the attribute (`option` is the one that sets the attribute)
+     * - `x-bind="{…}"`, the object syntax, has no attribute name and is not read
+     *
+     * @see https://alpinejs.dev/directives/bind#special-behavior
+     * @see https://github.com/alpinejs/alpine/blob/main/packages/alpinejs/src/utils/bind.js#bindAttribute
+     */
+    literalValues: {
+        booleanAttrs: { '""': '', '0': '' },
+        ariaAttrs: { false: null },
+        dataAttrs: { false: null },
+        otherAttrs: { false: null },
+        attrs: {
+            'aria-pressed': { false: 'false', null: 'null', undefined: 'undefined' },
+            'aria-checked': { false: 'false', null: 'null', undefined: 'undefined' },
+            'aria-expanded': { false: 'false', null: 'null', undefined: 'undefined' },
+            'aria-selected': { false: 'false', null: 'null', undefined: 'undefined' },
+            style: { false: 'false', null: 'null', undefined: 'undefined' },
+            class: { true: null, false: null, null: null, undefined: null, '0': null, '""': null },
+            hidden: { true: 'true', '0': '0' },
+            // Boolean attributes of the spec that Alpine does not know as boolean
+            alpha: { true: 'true', '0': '0', '""': '' },
+            focusgroupstart: { true: 'true', '0': '0', '""': '' },
+            headingreset: { true: 'true', '0': '0', '""': '' },
+            shadowrootcustomelementregistry: { true: 'true', '0': '0', '""': '' },
+            switch: { true: 'true', '0': '0', '""': '' },
+        },
+    },
     directivePatterns: [
         /**
          * Static directives: x-data, x-init, x-show, x-text, x-html,
@@ -52,16 +93,31 @@ const spec = {
             isDirective: true,
             isDynamicValue: true,
         },
+        /**
+         * x-bind:attr.modifier or :attr.modifier => potentialName = attr. A modifier (`.camel`) changes
+         * the name that is bound, so the value is not read as the value of `attr`.
+         * @see https://alpinejs.dev/directives/bind
+         */
+        {
+            pattern: '^(?:x-bind:|:)([^.]+)\\.[^.]+$',
+            potentialName: '$1',
+            isDynamicValue: true,
+            valueType: 'code',
+            isDuplicatable: ['class', 'style'],
+        },
         /**
          * x-bind:attr or :attr shorthand => potentialName = attr
          * @see https://alpinejs.dev/directives/bind
          */
         {
-            pattern: '^(?:x-bind:|:)([^.]+)(?:\\.[^.]+)?$',
+            pattern: '^(?:x-bind:|:)([^.]+)$',
             potentialName: '$1',
             isDynamicValue: true,
             valueType: 'code',
             isDuplicatable: ['class', 'style'],
+            // The value is a JavaScript expression that is bound to the attribute, so a literal in it is
+            // rendered as Alpine renders it (`literalValues` below)
+            expressionLanguage: 'javascript',
         },
         /**
          * x-on:event or @event shorthand => potentialName = onevent

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@markuplint/alpine-spec",
-	"version": "5.4.0",
+	"version": "5.5.0",
 	"description": "Extended specification for tags and attributes in Alpine.js",
 	"repository": {
 		"type": "git",
@@ -28,7 +28,7 @@
 		"clean": "tsc --build --clean tsconfig.build.json"
 	},
 	"dependencies": {
-		"@markuplint/ml-spec": "5.4.0"
+		"@markuplint/ml-spec": "5.5.0"
 	},
-	"gitHead": "ab56aa8e12b67fbf793ddf1267aaba9fda90269d"
+	"gitHead": "fedebcfd56eaec4642e68643b2f9e10750d810e1"
 }