@markuplint/alpine-parser 4.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017-2024 Yusuke Hirao
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,28 @@
+# @markuplint/alpine-parser
+
+[![npm version](https://badge.fury.io/js/%40markuplint%2Falpine-parser.svg)](https://www.npmjs.com/package/@markuplint/alpine-parser)
+
+Use **markuplint** with [**Alpine.js**](https://alpinejs.dev).
+
+## Install
+
+```shell
+$ npm install -D @markuplint/alpine-parser
+
+$ yarn add -D @markuplint/alpine-parser
+```
+
+## Usage
+
+Add `parser` and `spec` option to your [configuration](https://markuplint.dev/configuration/#properties/parser).
+
+```json
+{
+  "parser": {
+    "\\.html$": "@markuplint/alpine-parser"
+  },
+  "specs": {
+    "\\.html$": "@markuplint/alpine-parser/spec"
+  }
+}
+```

package/lib/index.d.ts

@@ -0,0 +1 @@
+export { parser } from './parser.js';

package/lib/index.js

@@ -0,0 +1 @@
+export { parser } from './parser.js';

package/lib/parser.d.ts

@@ -0,0 +1,11 @@
+import type { Token } from '@markuplint/parser-utils';
+import { HtmlParser } from '@markuplint/html-parser';
+declare class AlpineParser extends HtmlParser {
+    visitAttr(token: Token, options: Parameters<HtmlParser['visitAttr']>[1]): (import("packages/@markuplint/ml-ast/lib/types.js").MLASTHTMLAttr & {
+        __rightText?: string | undefined;
+    }) | (import("packages/@markuplint/ml-ast/lib/types.js").MLASTSpreadAttr & {
+        __rightText?: string | undefined;
+    });
+}
+export declare const parser: AlpineParser;
+export {};

package/lib/parser.js

@@ -0,0 +1,188 @@
+import { HtmlParser } from '@markuplint/html-parser';
+class AlpineParser extends HtmlParser {
+    visitAttr(token, options) {
+        const attr = super.visitAttr(token, options);
+        if (attr.type === 'spread') {
+            return attr;
+        }
+        const name = attr.name.raw;
+        switch (name) {
+            /**
+             * @see https://alpinejs.dev/directives/data
+             */
+            case 'x-data': {
+                return {
+                    ...attr,
+                    isDirective: true,
+                };
+            }
+            /**
+             * @see https://alpinejs.dev/directives/init
+             */
+            case 'x-init': {
+                return {
+                    ...attr,
+                    isDirective: true,
+                };
+            }
+            /**
+             * @see https://alpinejs.dev/directives/show
+             */
+            case 'x-show': {
+                return {
+                    ...attr,
+                    isDirective: true,
+                };
+            }
+            /**
+             * @see https://alpinejs.dev/directives/text
+             */
+            case 'x-text': {
+                return {
+                    ...attr,
+                    isDirective: true,
+                };
+            }
+            /**
+             * @see https://alpinejs.dev/directives/html
+             */
+            case 'x-html': {
+                return {
+                    ...attr,
+                    isDirective: true,
+                };
+            }
+            /**
+             * {@link ./spec.ts} Treat as a normal attribute and allow only in template elements as defined in `spec`.
+             *
+             * @see https://alpinejs.dev/directives/model
+             */
+            case 'x-model': {
+                return attr;
+            }
+            /**
+             * @see https://alpinejs.dev/directives/modelable
+             */
+            case 'x-modelable': {
+                return {
+                    ...attr,
+                    isDirective: true,
+                };
+            }
+            /**
+             * {@link ./spec.ts} Treat as a normal attribute and allow only in template elements as defined in `spec`.
+             *
+             * @see https://alpinejs.dev/directives/for
+             */
+            case 'x-for': {
+                return attr;
+            }
+            /**
+             * @see https://alpinejs.dev/directives/effect
+             */
+            case 'x-effect': {
+                return {
+                    ...attr,
+                    isDirective: true,
+                };
+            }
+            /**
+             * @see https://alpinejs.dev/directives/ignore
+             */
+            case 'x-ignore': {
+                return {
+                    ...attr,
+                    valueType: 'boolean',
+                    isDirective: true,
+                };
+            }
+            /**
+             * @see https://alpinejs.dev/directives/ref
+             */
+            case 'x-ref': {
+                return {
+                    ...attr,
+                    isDirective: true,
+                };
+            }
+            /**
+             * @see https://alpinejs.dev/directives/cloak
+             */
+            case 'x-cloak': {
+                return {
+                    ...attr,
+                    valueType: 'boolean',
+                    isDirective: true,
+                };
+            }
+            /**
+             * {@link ./spec.ts} Treat as a normal attribute and allow only in template elements as defined in `spec`.
+             *
+             * @see https://alpinejs.dev/directives/teleport
+             */
+            case 'x-teleport': {
+                return attr;
+            }
+            /**
+             * {@link ./spec.ts} Treat as a normal attribute and allow only in template elements as defined in `spec`.
+             *
+             * @see https://alpinejs.dev/directives/if
+             */
+            case 'x-if': {
+                return attr;
+            }
+            /**
+             * @see https://alpinejs.dev/directives/id
+             */
+            case 'x-id': {
+                return {
+                    ...attr,
+                    isDirective: true,
+                };
+            }
+        }
+        /**
+         * @see https://alpinejs.dev/directives/bind
+         */
+        if (name.startsWith('x-bind:') || name.startsWith(':')) {
+            const potentialName = (attr.name.raw.match(/^(x-bind:|:)([^.]+)(?:\.([^.]+))?$/i) ?? [])[2];
+            if (!potentialName) {
+                return attr;
+            }
+            return {
+                ...attr,
+                potentialName,
+                valueType: 'code',
+                isDuplicatable: ['class', 'style'].includes(potentialName),
+                isDynamicValue: true,
+            };
+        }
+        /**
+         * @see https://alpinejs.dev/directives/on
+         */
+        if (name.startsWith('x-on:') || name.startsWith('@')) {
+            const potentialName = (attr.name.raw.match(/^(x-on:|@)([^.]+)(\..+)?$/i) ?? [])[2];
+            if (!potentialName) {
+                return attr;
+            }
+            return {
+                ...attr,
+                potentialName: `on${potentialName.toLowerCase()}`,
+                // TODO: Postpone due to inability to distinguish between custom and native events
+                isDirective: true,
+                isDynamicValue: true,
+            };
+        }
+        /**
+         * @see https://alpinejs.dev/directives/transition
+         */
+        if (/^x-transition(?:$|:|\.)/.test(name)) {
+            return {
+                ...attr,
+                isDirective: true,
+            };
+        }
+        return attr;
+    }
+}
+export const parser = new AlpineParser();

package/lib/spec.d.ts

@@ -0,0 +1,3 @@
+import type { ExtendedSpec } from '@markuplint/ml-spec';
+declare const spec: ExtendedSpec;
+export default spec;

package/lib/spec.js

@@ -0,0 +1,76 @@
+/**
+ * > `x-model` works with the following input elements:
+ * > - `<input type="text">`
+ * > - `<textarea>`
+ * > - `<input type="checkbox">`
+ * > - `<input type="radio">`
+ * > - `<select>`
+ * > - `<input type="range">`
+ *
+ * @see https://alpinejs.dev/directives/model
+ */
+const xModel = {
+    type: 'NoEmptyAny',
+    description: 'The x-model directive is used to bind a variable to a form input.',
+};
+const spec = {
+    specs: [
+        {
+            name: 'template',
+            attributes: {
+                /**
+                 * @see https://alpinejs.dev/directives/for
+                 */
+                'x-for': {
+                    type: 'NoEmptyAny',
+                    description: "Alpine's x-for directive allows you to create DOM elements by iterating through a list. Here's a simple example of using it to create a list of colors based on an array.",
+                },
+                /**
+                 * @see https://alpinejs.dev/directives/for#keys
+                 */
+                key: {
+                    type: 'NoEmptyAny',
+                    description: 'It is important to specify unique keys for each x-for iteration if you are going to be re-ordering items. Without dynamic keys, Alpine may have a hard time keeping track of what re-orders and will cause odd side-effects.',
+                    condition: '[x-for]',
+                },
+                /**
+                 * @see https://alpinejs.dev/directives/teleport
+                 */
+                'x-teleport': {
+                    type: 'NoEmptyAny',
+                    description: 'The x-teleport directive allows you to transport part of your Alpine template to another part of the DOM on the page entirely.',
+                },
+                /**
+                 * @see https://alpinejs.dev/directives/if
+                 */
+                'x-if': {
+                    type: 'NoEmptyAny',
+                    description: 'x-if is used for toggling elements on the page, similarly to x-show, however it completely adds and removes the element it\'s applied to rather than just changing its CSS display property to "none".',
+                },
+            },
+        },
+        {
+            name: 'input',
+            attributes: {
+                'x-model': {
+                    ...xModel,
+                    condition: '[type=text i], [type=checkbox i], [type=radio i], [type=range i]',
+                },
+            },
+        },
+        {
+            name: 'select',
+            attributes: {
+                'x-model': xModel,
+            },
+        },
+        {
+            name: 'textarea',
+            attributes: {
+                'x-model': xModel,
+            },
+        },
+    ],
+};
+// eslint-disable-next-line import/no-default-export
+export default spec;

package/package.json

@@ -0,0 +1,34 @@
+{
+	"name": "@markuplint/alpine-parser",
+	"version": "4.1.0",
+	"description": "Alpine.js parser for markuplint",
+	"repository": "git@github.com:markuplint/markuplint.git",
+	"author": "Yusuke Hirao <yusukehirao@me.com>",
+	"license": "MIT",
+	"private": false,
+	"type": "module",
+	"exports": {
+		".": {
+			"import": "./lib/index.js"
+		},
+		"./spec": {
+			"import": "./lib/spec.js"
+		}
+	},
+	"types": "lib/index.d.ts",
+	"publishConfig": {
+		"access": "public"
+	},
+	"scripts": {
+		"build": "tsc",
+		"clean": "tsc --build --clean"
+	},
+	"dependencies": {
+		"@markuplint/html-parser": "4.1.0"
+	},
+	"devDependencies": {
+		"@markuplint/ml-spec": "4.0.1",
+		"@markuplint/parser-utils": "4.1.0"
+	},
+	"gitHead": "b9817c30c2df71faa866e3b3fe286afa499deede"
+}