@markuplint/htmx-spec 5.0.0-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/ARCHITECTURE.md +129 -0
- package/CHANGELOG.md +11 -0
- package/LICENSE +21 -0
- package/README.md +26 -0
- package/SKILL.md +64 -0
- package/docs/maintenance.ja.md +76 -0
- package/docs/maintenance.md +76 -0
- package/lib/index.d.ts +22 -0
- package/lib/index.js +266 -0
- package/package.json +30 -0
package/ARCHITECTURE.md
ADDED
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
# @markuplint/htmx-spec
|
|
2
|
+
|
|
3
|
+
## Overview
|
|
4
|
+
|
|
5
|
+
`@markuplint/htmx-spec` is a spec extension package that provides htmx-specific attribute definitions for markuplint. It exports a single `ExtendedSpec` object that registers global htmx attributes (such as `hx-get`, `hx-post`, `hx-trigger`, `hx-target`, `hx-swap`, and many more) available on every HTML element.
|
|
6
|
+
|
|
7
|
+
This package contains no parsing logic -- it is purely a data definition consumed by `@markuplint/ml-spec` to extend the base HTML specification with htmx-specific attributes.
|
|
8
|
+
|
|
9
|
+
## ExtendedSpec Content
|
|
10
|
+
|
|
11
|
+
### Global Attributes
|
|
12
|
+
|
|
13
|
+
Global attributes are defined under `def['#globalAttrs']['#extends']` and are available on every HTML element:
|
|
14
|
+
|
|
15
|
+
#### HTTP Request Attributes
|
|
16
|
+
|
|
17
|
+
| Attribute | Type | Description |
|
|
18
|
+
| ----------- | ----- | ---------------------------------------- |
|
|
19
|
+
| `hx-get` | `Any` | Issues a GET request to the given URL |
|
|
20
|
+
| `hx-post` | `Any` | Issues a POST request to the given URL |
|
|
21
|
+
| `hx-put` | `Any` | Issues a PUT request to the given URL |
|
|
22
|
+
| `hx-patch` | `Any` | Issues a PATCH request to the given URL |
|
|
23
|
+
| `hx-delete` | `Any` | Issues a DELETE request to the given URL |
|
|
24
|
+
|
|
25
|
+
#### Core Behavior Attributes
|
|
26
|
+
|
|
27
|
+
| Attribute | Type | Description |
|
|
28
|
+
| --------------- | --------- | ------------------------------------------------------ |
|
|
29
|
+
| `hx-trigger` | `Any` | Specifies what triggers the AJAX request |
|
|
30
|
+
| `hx-target` | `Any` | Specifies the target element for content swapping |
|
|
31
|
+
| `hx-swap` | `Any` | Controls how the response content is swapped in |
|
|
32
|
+
| `hx-swap-oob` | `Any` | Marks content for out-of-band swap |
|
|
33
|
+
| `hx-select` | `Any` | Selects a subset of the response HTML |
|
|
34
|
+
| `hx-select-oob` | `Any` | Selects content from the response for out-of-band swap |
|
|
35
|
+
| `hx-boost` | `Boolean` | Progressively enhances anchors and forms to use AJAX |
|
|
36
|
+
|
|
37
|
+
#### Request Configuration Attributes
|
|
38
|
+
|
|
39
|
+
| Attribute | Type | Description |
|
|
40
|
+
| ---------------- | ----- | ------------------------------------------------- |
|
|
41
|
+
| `hx-push-url` | `Any` | Pushes the request URL into the browser location |
|
|
42
|
+
| `hx-replace-url` | `Any` | Replaces the current URL in the browser location |
|
|
43
|
+
| `hx-include` | `Any` | Includes additional element values in the request |
|
|
44
|
+
| `hx-params` | `Any` | Filters which parameters are submitted |
|
|
45
|
+
| `hx-vals` | `Any` | Adds additional values to request parameters |
|
|
46
|
+
| `hx-headers` | `Any` | Adds custom headers to the AJAX request |
|
|
47
|
+
| `hx-encoding` | `Any` | Changes the request encoding type |
|
|
48
|
+
| `hx-request` | `Any` | Configures various aspects of the AJAX request |
|
|
49
|
+
|
|
50
|
+
#### UI Feedback Attributes
|
|
51
|
+
|
|
52
|
+
| Attribute | Type | Description |
|
|
53
|
+
| ----------------- | ----- | ------------------------------------------------- |
|
|
54
|
+
| `hx-indicator` | `Any` | Specifies the loading indicator element |
|
|
55
|
+
| `hx-disabled-elt` | `Any` | Specifies elements to disable during the request |
|
|
56
|
+
| `hx-confirm` | `Any` | Shows a confirm dialog before issuing the request |
|
|
57
|
+
| `hx-prompt` | `Any` | Shows a prompt dialog before issuing the request |
|
|
58
|
+
|
|
59
|
+
#### Inheritance & Processing Attributes
|
|
60
|
+
|
|
61
|
+
| Attribute | Type | Description |
|
|
62
|
+
| --------------- | --------- | ------------------------------------------------------- |
|
|
63
|
+
| `hx-disinherit` | `Any` | Disables attribute inheritance for specified attributes |
|
|
64
|
+
| `hx-inherit` | `Any` | Explicitly enables attribute inheritance |
|
|
65
|
+
| `hx-ext` | `Any` | Enables htmx extensions |
|
|
66
|
+
| `hx-disable` | `Boolean` | Disables htmx processing for the element |
|
|
67
|
+
|
|
68
|
+
#### History & Preservation Attributes
|
|
69
|
+
|
|
70
|
+
| Attribute | Type | Description |
|
|
71
|
+
| ---------------- | --------- | ----------------------------------------------------- |
|
|
72
|
+
| `hx-history` | `Any` | Prevents sensitive data from being saved to history |
|
|
73
|
+
| `hx-history-elt` | `Boolean` | Designates the element as the history snapshot target |
|
|
74
|
+
| `hx-preserve` | `Boolean` | Preserves an element unchanged across requests |
|
|
75
|
+
|
|
76
|
+
#### Synchronization & Validation Attributes
|
|
77
|
+
|
|
78
|
+
| Attribute | Type | Description |
|
|
79
|
+
| ------------- | --------- | ---------------------------------------------------- |
|
|
80
|
+
| `hx-sync` | `Any` | Synchronizes AJAX requests between multiple elements |
|
|
81
|
+
| `hx-validate` | `Boolean` | Forces elements to validate before a request is made |
|
|
82
|
+
|
|
83
|
+
## Directory Structure
|
|
84
|
+
|
|
85
|
+
```
|
|
86
|
+
src/
|
|
87
|
+
└── index.ts — Exports the ExtendedSpec object with htmx-specific attributes
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
## Key Source Files
|
|
91
|
+
|
|
92
|
+
| File | Purpose |
|
|
93
|
+
| ---------- | ------------------------------------------------------------------- |
|
|
94
|
+
| `index.ts` | Defines and exports the `ExtendedSpec` object as the default export |
|
|
95
|
+
|
|
96
|
+
## Integration Points
|
|
97
|
+
|
|
98
|
+
```mermaid
|
|
99
|
+
flowchart LR
|
|
100
|
+
subgraph upstream ["Upstream"]
|
|
101
|
+
htmlSpec["@markuplint/html-spec\n(Base HTML spec)"]
|
|
102
|
+
end
|
|
103
|
+
|
|
104
|
+
subgraph pkg ["@markuplint/htmx-spec"]
|
|
105
|
+
spec["ExtendedSpec\n(htmx attributes)"]
|
|
106
|
+
end
|
|
107
|
+
|
|
108
|
+
subgraph downstream ["Downstream"]
|
|
109
|
+
mlSpec["@markuplint/ml-spec\n(Spec resolution)"]
|
|
110
|
+
mlCore["@markuplint/ml-core\n(Linting engine)"]
|
|
111
|
+
end
|
|
112
|
+
|
|
113
|
+
htmlSpec -->|"Base spec"| mlSpec
|
|
114
|
+
spec -->|"Extends"| mlSpec
|
|
115
|
+
mlSpec -->|"Resolved spec"| mlCore
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
### Upstream
|
|
119
|
+
|
|
120
|
+
- **`@markuplint/ml-spec`** -- Provides the `ExtendedSpec` type that this package implements
|
|
121
|
+
|
|
122
|
+
### Downstream
|
|
123
|
+
|
|
124
|
+
- **`@markuplint/ml-spec`** -- Consumes the `ExtendedSpec` object to merge htmx-specific attributes into the resolved specification
|
|
125
|
+
- **`@markuplint/ml-core`** -- Uses the resolved spec (including htmx extensions) during linting
|
|
126
|
+
|
|
127
|
+
## Documentation Map
|
|
128
|
+
|
|
129
|
+
- [Maintenance Guide](docs/maintenance.md) -- Commands, recipes, and ExtendedSpec type reference
|
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
# Change Log
|
|
2
|
+
|
|
3
|
+
All notable changes to this project will be documented in this file.
|
|
4
|
+
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
|
+
|
|
6
|
+
# [5.0.0-alpha.0](https://github.com/markuplint/markuplint/compare/v4.14.1...v5.0.0-alpha.0) (2026-02-20)
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
- add @markuplint/htmx-spec and @markuplint/alpine-spec packages ([75f5cd6](https://github.com/markuplint/markuplint/commit/75f5cd68e33ef3a53483254c2956f8c07ec235b6))
|
|
11
|
+
- **ml-spec:** add declarative directivePatterns for parser-less framework support ([ceb9aa6](https://github.com/markuplint/markuplint/commit/ceb9aa67048e3a058b40a9e4d91eb903c8ff1861))
|
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2017-2024 Yusuke Hirao
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
# @markuplint/htmx-spec
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/@markuplint/htmx-spec)
|
|
4
|
+
|
|
5
|
+
Use **markuplint** with [**htmx**](https://htmx.org/).
|
|
6
|
+
Add htmx specific attributes to the schema.
|
|
7
|
+
|
|
8
|
+
## Install
|
|
9
|
+
|
|
10
|
+
```shell
|
|
11
|
+
$ npm install -D @markuplint/htmx-spec
|
|
12
|
+
|
|
13
|
+
$ yarn add -D @markuplint/htmx-spec
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
## Usage
|
|
17
|
+
|
|
18
|
+
Add `specs` option to your [configuration](https://markuplint.dev/configuration/#properties/specs).
|
|
19
|
+
|
|
20
|
+
```json
|
|
21
|
+
{
|
|
22
|
+
"specs": {
|
|
23
|
+
"\\.html$": "@markuplint/htmx-spec"
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
```
|
package/SKILL.md
ADDED
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: Maintenance tasks for @markuplint/htmx-spec
|
|
3
|
+
globs:
|
|
4
|
+
- packages/@markuplint/htmx-spec/src/**/*.ts
|
|
5
|
+
alwaysApply: false
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
# htmx-spec-maintenance
|
|
9
|
+
|
|
10
|
+
Perform maintenance tasks for `@markuplint/htmx-spec`: add global attributes
|
|
11
|
+
and modify the ExtendedSpec object.
|
|
12
|
+
|
|
13
|
+
## Input
|
|
14
|
+
|
|
15
|
+
`$ARGUMENTS` specifies the task. Supported tasks:
|
|
16
|
+
|
|
17
|
+
| Task | Description |
|
|
18
|
+
| ---------------------- | ---------------------------------------------- |
|
|
19
|
+
| `add-global-attribute` | Add a new global attribute to the ExtendedSpec |
|
|
20
|
+
|
|
21
|
+
If omitted, defaults to `add-global-attribute`.
|
|
22
|
+
|
|
23
|
+
## Reference
|
|
24
|
+
|
|
25
|
+
Before executing any task, read `docs/maintenance.md` (or `docs/maintenance.ja.md`)
|
|
26
|
+
for the full guide. The recipes there are the source of truth for procedures.
|
|
27
|
+
|
|
28
|
+
Also read:
|
|
29
|
+
|
|
30
|
+
- `ARCHITECTURE.md` -- Package overview, ExtendedSpec content, and integration points
|
|
31
|
+
- `src/index.ts` -- ExtendedSpec object definition (source of truth)
|
|
32
|
+
|
|
33
|
+
## Task: add-global-attribute
|
|
34
|
+
|
|
35
|
+
Add a new global htmx attribute available on every HTML element. Follow recipe #1 in `docs/maintenance.md`.
|
|
36
|
+
|
|
37
|
+
### Step 1: Identify the attribute
|
|
38
|
+
|
|
39
|
+
1. Determine the attribute name, type (`Any`, `Boolean`, or a specific type), and description
|
|
40
|
+
2. Check the htmx documentation to confirm the attribute is valid
|
|
41
|
+
|
|
42
|
+
### Step 2: Add the attribute
|
|
43
|
+
|
|
44
|
+
1. Read `src/index.ts`
|
|
45
|
+
2. Add a new entry under `def['#globalAttrs']['#extends']`:
|
|
46
|
+
```ts
|
|
47
|
+
'hx-attributeName': {
|
|
48
|
+
type: 'Any', // or 'Boolean'
|
|
49
|
+
},
|
|
50
|
+
```
|
|
51
|
+
3. Add a JSDoc comment above the entry describing its purpose
|
|
52
|
+
|
|
53
|
+
### Step 3: Verify
|
|
54
|
+
|
|
55
|
+
1. Build: `yarn build --scope @markuplint/htmx-spec`
|
|
56
|
+
2. Confirm the attribute appears in the exported spec object
|
|
57
|
+
|
|
58
|
+
## Rules
|
|
59
|
+
|
|
60
|
+
1. **Only export an ExtendedSpec object** -- this package contains no parsing logic.
|
|
61
|
+
2. **All htmx attributes are global** -- they go under `def['#globalAttrs']['#extends']`.
|
|
62
|
+
3. **htmx attributes are prefixed with `hx-`** -- follow this naming convention.
|
|
63
|
+
4. **Each attribute needs at minimum a `type` field** -- valid types include `Any`, `Boolean`, and specific type strings.
|
|
64
|
+
5. **Add JSDoc comments** to all new attribute entries describing their purpose.
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
# メンテナンスガイド
|
|
2
|
+
|
|
3
|
+
## コマンド
|
|
4
|
+
|
|
5
|
+
| コマンド | 説明 |
|
|
6
|
+
| ------------------------------------------ | ---------------------- |
|
|
7
|
+
| `yarn build --scope @markuplint/htmx-spec` | このパッケージをビルド |
|
|
8
|
+
| `yarn dev --scope @markuplint/htmx-spec` | ウォッチモードでビルド |
|
|
9
|
+
| `yarn clean --scope @markuplint/htmx-spec` | ビルド成果物を削除 |
|
|
10
|
+
|
|
11
|
+
## テスト
|
|
12
|
+
|
|
13
|
+
このパッケージには専用のテストスイートはありません。`ExtendedSpec` オブジェクトは、`@markuplint/ml-spec` の `ExtendedSpec` 型に対する TypeScript 型チェックにより、ビルド時に検証されます。エクスポートされたオブジェクトが型に適合しない場合、ビルドが失敗します。
|
|
14
|
+
|
|
15
|
+
統合テストは下流で行われます:
|
|
16
|
+
|
|
17
|
+
- `@markuplint/ml-spec` が拡張仕様を解決し、基本 HTML 仕様とマージ
|
|
18
|
+
- `@markuplint/ml-core` がリント時に解決済み仕様を使用し、属性定義を実行
|
|
19
|
+
|
|
20
|
+
変更を検証するには、パッケージをビルドして下流のテストを実行します:
|
|
21
|
+
|
|
22
|
+
```shell
|
|
23
|
+
yarn build --scope @markuplint/htmx-spec
|
|
24
|
+
yarn test --scope @markuplint/ml-spec --scope @markuplint/ml-core
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
## レシピ
|
|
28
|
+
|
|
29
|
+
### 1. グローバル属性の追加
|
|
30
|
+
|
|
31
|
+
htmx の属性はすべてグローバルです -- すべての HTML 要素で利用可能です。
|
|
32
|
+
|
|
33
|
+
1. `src/index.ts` を開く
|
|
34
|
+
2. `def['#globalAttrs']['#extends']` の下に新しいエントリを追加:
|
|
35
|
+
```ts
|
|
36
|
+
/** 属性の説明 */
|
|
37
|
+
'hx-attributeName': {
|
|
38
|
+
type: 'Any', // または 'Boolean'
|
|
39
|
+
},
|
|
40
|
+
```
|
|
41
|
+
3. 適切な型を選択:
|
|
42
|
+
- `'Any'` -- 任意の値を受け付ける(文字列、式など)
|
|
43
|
+
- `'Boolean'` -- ブール属性(存在が `true` を意味する)
|
|
44
|
+
4. ビルド: `yarn build --scope @markuplint/htmx-spec`
|
|
45
|
+
|
|
46
|
+
## ExtendedSpec 型リファレンス
|
|
47
|
+
|
|
48
|
+
`ExtendedSpec` 型(`@markuplint/ml-spec` から)は、このパッケージに関連する以下の構造を持ちます:
|
|
49
|
+
|
|
50
|
+
```ts
|
|
51
|
+
interface ExtendedSpec {
|
|
52
|
+
cites?: string[];
|
|
53
|
+
def?: {
|
|
54
|
+
'#globalAttrs'?: {
|
|
55
|
+
'#extends': Record<string, AttributeSpec>;
|
|
56
|
+
};
|
|
57
|
+
};
|
|
58
|
+
specs?: Array<{
|
|
59
|
+
name: string;
|
|
60
|
+
attributes: Record<string, AttributeSpec>;
|
|
61
|
+
}>;
|
|
62
|
+
}
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
### AttributeSpec のフィールド
|
|
66
|
+
|
|
67
|
+
| フィールド | 型 | 必須 | 説明 |
|
|
68
|
+
| --------------- | ---------- | ------ | --------------------------------------- |
|
|
69
|
+
| `type` | `string` | はい | 属性値の型(`'Any'`、`'Boolean'` など) |
|
|
70
|
+
| `caseSensitive` | `boolean` | いいえ | 属性名の大文字小文字を区別するかどうか |
|
|
71
|
+
| `condition` | `string[]` | いいえ | 属性が適用される CSS セレクタ条件 |
|
|
72
|
+
|
|
73
|
+
### 型の値
|
|
74
|
+
|
|
75
|
+
- `'Any'` -- 属性は任意の値を受け付ける
|
|
76
|
+
- `'Boolean'` -- 属性はブール値(存在が `true` を示す)
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
# Maintenance Guide
|
|
2
|
+
|
|
3
|
+
## Commands
|
|
4
|
+
|
|
5
|
+
| Command | Description |
|
|
6
|
+
| ------------------------------------------ | ---------------------- |
|
|
7
|
+
| `yarn build --scope @markuplint/htmx-spec` | Build this package |
|
|
8
|
+
| `yarn dev --scope @markuplint/htmx-spec` | Watch mode build |
|
|
9
|
+
| `yarn clean --scope @markuplint/htmx-spec` | Remove build artifacts |
|
|
10
|
+
|
|
11
|
+
## Testing
|
|
12
|
+
|
|
13
|
+
This package has no dedicated test suite. The `ExtendedSpec` object is validated at build time through TypeScript type checking against the `ExtendedSpec` type from `@markuplint/ml-spec`. If the exported object does not conform to the type, the build will fail.
|
|
14
|
+
|
|
15
|
+
Integration testing occurs downstream:
|
|
16
|
+
|
|
17
|
+
- `@markuplint/ml-spec` resolves the extended spec and merges it with the base HTML spec
|
|
18
|
+
- `@markuplint/ml-core` uses the resolved spec during linting, which exercises the attribute definitions
|
|
19
|
+
|
|
20
|
+
To verify changes, build the package and run downstream tests:
|
|
21
|
+
|
|
22
|
+
```shell
|
|
23
|
+
yarn build --scope @markuplint/htmx-spec
|
|
24
|
+
yarn test --scope @markuplint/ml-spec --scope @markuplint/ml-core
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
## Recipes
|
|
28
|
+
|
|
29
|
+
### 1. Adding a Global Attribute
|
|
30
|
+
|
|
31
|
+
All htmx attributes are global -- they are available on every HTML element.
|
|
32
|
+
|
|
33
|
+
1. Open `src/index.ts`
|
|
34
|
+
2. Add a new entry under `def['#globalAttrs']['#extends']`:
|
|
35
|
+
```ts
|
|
36
|
+
/** Description of the attribute */
|
|
37
|
+
'hx-attributeName': {
|
|
38
|
+
type: 'Any', // or 'Boolean'
|
|
39
|
+
},
|
|
40
|
+
```
|
|
41
|
+
3. Choose the appropriate type:
|
|
42
|
+
- `'Any'` -- accepts any value (strings, expressions, etc.)
|
|
43
|
+
- `'Boolean'` -- boolean attribute (presence indicates `true`)
|
|
44
|
+
4. Build: `yarn build --scope @markuplint/htmx-spec`
|
|
45
|
+
|
|
46
|
+
## ExtendedSpec Type Reference
|
|
47
|
+
|
|
48
|
+
The `ExtendedSpec` type (from `@markuplint/ml-spec`) has the following structure relevant to this package:
|
|
49
|
+
|
|
50
|
+
```ts
|
|
51
|
+
interface ExtendedSpec {
|
|
52
|
+
cites?: string[];
|
|
53
|
+
def?: {
|
|
54
|
+
'#globalAttrs'?: {
|
|
55
|
+
'#extends': Record<string, AttributeSpec>;
|
|
56
|
+
};
|
|
57
|
+
};
|
|
58
|
+
specs?: Array<{
|
|
59
|
+
name: string;
|
|
60
|
+
attributes: Record<string, AttributeSpec>;
|
|
61
|
+
}>;
|
|
62
|
+
}
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
### AttributeSpec Fields
|
|
66
|
+
|
|
67
|
+
| Field | Type | Required | Description |
|
|
68
|
+
| --------------- | ---------- | -------- | ------------------------------------------------------ |
|
|
69
|
+
| `type` | `string` | Yes | The attribute value type (`'Any'`, `'Boolean'`, etc.) |
|
|
70
|
+
| `caseSensitive` | `boolean` | No | Whether the attribute name is case-sensitive |
|
|
71
|
+
| `condition` | `string[]` | No | CSS selector conditions for when the attribute applies |
|
|
72
|
+
|
|
73
|
+
### Type Values
|
|
74
|
+
|
|
75
|
+
- `'Any'` -- The attribute accepts any value
|
|
76
|
+
- `'Boolean'` -- The attribute is a boolean (presence indicates `true`)
|
package/lib/index.d.ts
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @module @markuplint/htmx-spec
|
|
3
|
+
*
|
|
4
|
+
* Provides htmx-specific extended specifications for markuplint.
|
|
5
|
+
* Defines htmx's global attributes (`hx-get`, `hx-post`, `hx-trigger`,
|
|
6
|
+
* `hx-target`, `hx-swap`, etc.) that are available on any HTML element.
|
|
7
|
+
*
|
|
8
|
+
* htmx is a library that allows access to modern browser features
|
|
9
|
+
* directly from HTML, using attributes to configure AJAX requests,
|
|
10
|
+
* CSS transitions, WebSockets, and Server-Sent Events.
|
|
11
|
+
*
|
|
12
|
+
* @see https://htmx.org/reference/
|
|
13
|
+
*/
|
|
14
|
+
import type { ExtendedSpec } from '@markuplint/ml-spec';
|
|
15
|
+
/**
|
|
16
|
+
* The htmx framework extended specification.
|
|
17
|
+
*
|
|
18
|
+
* Registers global htmx attributes available on every HTML element.
|
|
19
|
+
* htmx attributes are all global and prefixed with `hx-`.
|
|
20
|
+
*/
|
|
21
|
+
declare const spec: ExtendedSpec;
|
|
22
|
+
export default spec;
|
package/lib/index.js
ADDED
|
@@ -0,0 +1,266 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @module @markuplint/htmx-spec
|
|
3
|
+
*
|
|
4
|
+
* Provides htmx-specific extended specifications for markuplint.
|
|
5
|
+
* Defines htmx's global attributes (`hx-get`, `hx-post`, `hx-trigger`,
|
|
6
|
+
* `hx-target`, `hx-swap`, etc.) that are available on any HTML element.
|
|
7
|
+
*
|
|
8
|
+
* htmx is a library that allows access to modern browser features
|
|
9
|
+
* directly from HTML, using attributes to configure AJAX requests,
|
|
10
|
+
* CSS transitions, WebSockets, and Server-Sent Events.
|
|
11
|
+
*
|
|
12
|
+
* @see https://htmx.org/reference/
|
|
13
|
+
*/
|
|
14
|
+
/**
|
|
15
|
+
* The htmx framework extended specification.
|
|
16
|
+
*
|
|
17
|
+
* Registers global htmx attributes available on every HTML element.
|
|
18
|
+
* htmx attributes are all global and prefixed with `hx-`.
|
|
19
|
+
*/
|
|
20
|
+
const spec = {
|
|
21
|
+
cites: ['https://htmx.org/reference/'],
|
|
22
|
+
directivePatterns: [
|
|
23
|
+
/**
|
|
24
|
+
* htmx event with explicit prefix: hx-on:htmx:event or hx-on-htmx-event
|
|
25
|
+
* @see https://htmx.org/attributes/hx-on/
|
|
26
|
+
*/
|
|
27
|
+
{
|
|
28
|
+
pattern: '^hx-on([:-])htmx\\1(.+)$',
|
|
29
|
+
potentialName: 'hx-on:htmx:$2',
|
|
30
|
+
isDirective: true,
|
|
31
|
+
isDynamicValue: true,
|
|
32
|
+
},
|
|
33
|
+
/**
|
|
34
|
+
* htmx event with shorthand double separator: hx-on::event
|
|
35
|
+
* @see https://htmx.org/attributes/hx-on/
|
|
36
|
+
*/
|
|
37
|
+
{
|
|
38
|
+
pattern: '^hx-on[:-]{2}(.+)$',
|
|
39
|
+
potentialName: 'hx-on:htmx:$1',
|
|
40
|
+
isDirective: true,
|
|
41
|
+
isDynamicValue: true,
|
|
42
|
+
},
|
|
43
|
+
/**
|
|
44
|
+
* Native DOM event: hx-on:click, hx-on-click
|
|
45
|
+
* @see https://htmx.org/attributes/hx-on/
|
|
46
|
+
*/
|
|
47
|
+
{
|
|
48
|
+
pattern: '^hx-on[:-]([a-z]+)$',
|
|
49
|
+
potentialName: 'on$1',
|
|
50
|
+
isDirective: true,
|
|
51
|
+
isDynamicValue: true,
|
|
52
|
+
},
|
|
53
|
+
],
|
|
54
|
+
def: {
|
|
55
|
+
'#globalAttrs': {
|
|
56
|
+
'#extends': {
|
|
57
|
+
/**
|
|
58
|
+
* Issues a GET request to the given URL
|
|
59
|
+
*/
|
|
60
|
+
'hx-get': {
|
|
61
|
+
type: 'Any',
|
|
62
|
+
},
|
|
63
|
+
/**
|
|
64
|
+
* Issues a POST request to the given URL
|
|
65
|
+
*/
|
|
66
|
+
'hx-post': {
|
|
67
|
+
type: 'Any',
|
|
68
|
+
},
|
|
69
|
+
/**
|
|
70
|
+
* Issues a PUT request to the given URL
|
|
71
|
+
*/
|
|
72
|
+
'hx-put': {
|
|
73
|
+
type: 'Any',
|
|
74
|
+
},
|
|
75
|
+
/**
|
|
76
|
+
* Issues a PATCH request to the given URL
|
|
77
|
+
*/
|
|
78
|
+
'hx-patch': {
|
|
79
|
+
type: 'Any',
|
|
80
|
+
},
|
|
81
|
+
/**
|
|
82
|
+
* Issues a DELETE request to the given URL
|
|
83
|
+
*/
|
|
84
|
+
'hx-delete': {
|
|
85
|
+
type: 'Any',
|
|
86
|
+
},
|
|
87
|
+
/**
|
|
88
|
+
* Specifies the event that triggers the request.
|
|
89
|
+
* Accepts standard DOM events, special events (load, revealed, intersect),
|
|
90
|
+
* polling syntax (every Ns), event filters, and modifiers.
|
|
91
|
+
*/
|
|
92
|
+
'hx-trigger': {
|
|
93
|
+
type: 'Any',
|
|
94
|
+
},
|
|
95
|
+
/**
|
|
96
|
+
* Specifies the target element for the response content swap.
|
|
97
|
+
* Accepts CSS selectors, `this`, `closest <selector>`,
|
|
98
|
+
* `find <selector>`, `next`, `previous`.
|
|
99
|
+
*/
|
|
100
|
+
'hx-target': {
|
|
101
|
+
type: 'Any',
|
|
102
|
+
},
|
|
103
|
+
/**
|
|
104
|
+
* Controls how the response content is swapped into the DOM.
|
|
105
|
+
* Values: innerHTML, outerHTML, textContent, beforebegin,
|
|
106
|
+
* afterbegin, beforeend, afterend, delete, none.
|
|
107
|
+
*/
|
|
108
|
+
'hx-swap': {
|
|
109
|
+
type: 'Any',
|
|
110
|
+
},
|
|
111
|
+
/**
|
|
112
|
+
* Marks content in the response for out-of-band swap
|
|
113
|
+
*/
|
|
114
|
+
'hx-swap-oob': {
|
|
115
|
+
type: 'Any',
|
|
116
|
+
},
|
|
117
|
+
/**
|
|
118
|
+
* Selects a subset of the response HTML to swap in
|
|
119
|
+
*/
|
|
120
|
+
'hx-select': {
|
|
121
|
+
type: 'Any',
|
|
122
|
+
},
|
|
123
|
+
/**
|
|
124
|
+
* Selects content from the response to be swapped out-of-band
|
|
125
|
+
*/
|
|
126
|
+
'hx-select-oob': {
|
|
127
|
+
type: 'Any',
|
|
128
|
+
},
|
|
129
|
+
/**
|
|
130
|
+
* Progressively enhances anchor tags and forms to use AJAX
|
|
131
|
+
*/
|
|
132
|
+
'hx-boost': {
|
|
133
|
+
type: 'Boolean',
|
|
134
|
+
},
|
|
135
|
+
/**
|
|
136
|
+
* Pushes the request URL into the browser location bar, creating a history entry
|
|
137
|
+
*/
|
|
138
|
+
'hx-push-url': {
|
|
139
|
+
type: 'Any',
|
|
140
|
+
},
|
|
141
|
+
/**
|
|
142
|
+
* Replaces the current URL in the browser location bar without adding to history
|
|
143
|
+
*/
|
|
144
|
+
'hx-replace-url': {
|
|
145
|
+
type: 'Any',
|
|
146
|
+
},
|
|
147
|
+
/**
|
|
148
|
+
* Includes additional element values in the request
|
|
149
|
+
*/
|
|
150
|
+
'hx-include': {
|
|
151
|
+
type: 'Any',
|
|
152
|
+
},
|
|
153
|
+
/**
|
|
154
|
+
* Filters which parameters are submitted with the request
|
|
155
|
+
*/
|
|
156
|
+
'hx-params': {
|
|
157
|
+
type: 'Any',
|
|
158
|
+
},
|
|
159
|
+
/**
|
|
160
|
+
* Adds additional values to the request parameters (JSON or js: prefix)
|
|
161
|
+
*/
|
|
162
|
+
'hx-vals': {
|
|
163
|
+
type: 'Any',
|
|
164
|
+
},
|
|
165
|
+
/**
|
|
166
|
+
* Adds custom headers to the AJAX request (JSON format)
|
|
167
|
+
*/
|
|
168
|
+
'hx-headers': {
|
|
169
|
+
type: 'Any',
|
|
170
|
+
},
|
|
171
|
+
/**
|
|
172
|
+
* Changes the request encoding type (e.g., multipart/form-data)
|
|
173
|
+
*/
|
|
174
|
+
'hx-encoding': {
|
|
175
|
+
type: 'Any',
|
|
176
|
+
},
|
|
177
|
+
/**
|
|
178
|
+
* Configures various aspects of the AJAX request
|
|
179
|
+
*/
|
|
180
|
+
'hx-request': {
|
|
181
|
+
type: 'Any',
|
|
182
|
+
},
|
|
183
|
+
/**
|
|
184
|
+
* Specifies the element that receives the `htmx-request` class during the request
|
|
185
|
+
*/
|
|
186
|
+
'hx-indicator': {
|
|
187
|
+
type: 'Any',
|
|
188
|
+
},
|
|
189
|
+
/**
|
|
190
|
+
* Specifies elements that get the `disabled` attribute during the request
|
|
191
|
+
*/
|
|
192
|
+
'hx-disabled-elt': {
|
|
193
|
+
type: 'Any',
|
|
194
|
+
},
|
|
195
|
+
/**
|
|
196
|
+
* Shows a confirm() dialog before issuing the request
|
|
197
|
+
*/
|
|
198
|
+
'hx-confirm': {
|
|
199
|
+
type: 'Any',
|
|
200
|
+
},
|
|
201
|
+
/**
|
|
202
|
+
* Shows a prompt() dialog; the user's input is included
|
|
203
|
+
* in the request as the HX-Prompt header
|
|
204
|
+
*/
|
|
205
|
+
'hx-prompt': {
|
|
206
|
+
type: 'Any',
|
|
207
|
+
},
|
|
208
|
+
/**
|
|
209
|
+
* Disables attribute inheritance for specified htmx attributes on child elements
|
|
210
|
+
*/
|
|
211
|
+
'hx-disinherit': {
|
|
212
|
+
type: 'Any',
|
|
213
|
+
},
|
|
214
|
+
/**
|
|
215
|
+
* Explicitly enables attribute inheritance for specified attributes
|
|
216
|
+
*/
|
|
217
|
+
'hx-inherit': {
|
|
218
|
+
type: 'Any',
|
|
219
|
+
},
|
|
220
|
+
/**
|
|
221
|
+
* Enables htmx extensions for the element and its children
|
|
222
|
+
*/
|
|
223
|
+
'hx-ext': {
|
|
224
|
+
type: 'Any',
|
|
225
|
+
},
|
|
226
|
+
/**
|
|
227
|
+
* Disables htmx processing for the element and all its children
|
|
228
|
+
*/
|
|
229
|
+
'hx-disable': {
|
|
230
|
+
type: 'Boolean',
|
|
231
|
+
},
|
|
232
|
+
/**
|
|
233
|
+
* Prevents sensitive data from being saved to the history cache
|
|
234
|
+
*/
|
|
235
|
+
'hx-history': {
|
|
236
|
+
type: 'Any',
|
|
237
|
+
},
|
|
238
|
+
/**
|
|
239
|
+
* Designates the element as the snapshot/restore target during history navigation
|
|
240
|
+
*/
|
|
241
|
+
'hx-history-elt': {
|
|
242
|
+
type: 'Boolean',
|
|
243
|
+
},
|
|
244
|
+
/**
|
|
245
|
+
* Preserves an element unchanged across requests (requires an id)
|
|
246
|
+
*/
|
|
247
|
+
'hx-preserve': {
|
|
248
|
+
type: 'Boolean',
|
|
249
|
+
},
|
|
250
|
+
/**
|
|
251
|
+
* Synchronizes AJAX requests between multiple elements to prevent race conditions
|
|
252
|
+
*/
|
|
253
|
+
'hx-sync': {
|
|
254
|
+
type: 'Any',
|
|
255
|
+
},
|
|
256
|
+
/**
|
|
257
|
+
* Forces elements to validate themselves before a request is made
|
|
258
|
+
*/
|
|
259
|
+
'hx-validate': {
|
|
260
|
+
type: 'Boolean',
|
|
261
|
+
},
|
|
262
|
+
},
|
|
263
|
+
},
|
|
264
|
+
},
|
|
265
|
+
};
|
|
266
|
+
export default spec;
|
package/package.json
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@markuplint/htmx-spec",
|
|
3
|
+
"version": "5.0.0-alpha.0",
|
|
4
|
+
"description": "Extended specification for tags and attributes in htmx",
|
|
5
|
+
"repository": "git@github.com:markuplint/markuplint.git",
|
|
6
|
+
"author": "Yusuke Hirao <yusukehirao@me.com>",
|
|
7
|
+
"license": "MIT",
|
|
8
|
+
"engines": {
|
|
9
|
+
"node": ">=22"
|
|
10
|
+
},
|
|
11
|
+
"type": "module",
|
|
12
|
+
"exports": {
|
|
13
|
+
".": {
|
|
14
|
+
"import": "./lib/index.js",
|
|
15
|
+
"types": "./lib/index.d.ts"
|
|
16
|
+
}
|
|
17
|
+
},
|
|
18
|
+
"publishConfig": {
|
|
19
|
+
"access": "public"
|
|
20
|
+
},
|
|
21
|
+
"scripts": {
|
|
22
|
+
"build": "tsc --project tsconfig.build.json",
|
|
23
|
+
"dev": "tsc --watch --project tsconfig.build.json",
|
|
24
|
+
"clean": "tsc --build --clean tsconfig.build.json"
|
|
25
|
+
},
|
|
26
|
+
"dependencies": {
|
|
27
|
+
"@markuplint/ml-spec": "5.0.0-alpha.0"
|
|
28
|
+
},
|
|
29
|
+
"gitHead": "13dcfc84ec83d87360c720e253383b60767e1b56"
|
|
30
|
+
}
|