@markuplint/vue-spec 4.5.22 → 4.5.23
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.ja.md +83 -0
- package/ARCHITECTURE.md +83 -0
- package/CHANGELOG.md +3 -3
- package/SKILL.md +82 -0
- package/docs/maintenance.ja.md +89 -0
- package/docs/maintenance.md +89 -0
- package/lib/index.d.ts +17 -0
- package/lib/index.js +17 -0
- package/package.json +3 -3
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
# @markuplint/vue-spec
|
|
2
|
+
|
|
3
|
+
## 概要
|
|
4
|
+
|
|
5
|
+
`@markuplint/vue-spec` は、markuplint に Vue 固有の属性定義を提供するスペック拡張パッケージです。Vue の特別なグローバル属性（リストレンダリング用の `key` とテンプレート参照用の `ref`）および要素レベルのオーバーライド（`<slot>` での動的プロパティの許可など）を登録する単一の `ExtendedSpec` オブジェクトをエクスポートします。このパッケージにはパースロジックは含まれず、スペック解決パイプラインで使用されるデータ定義のみです。
|
|
6
|
+
|
|
7
|
+
## ExtendedSpec の内容
|
|
8
|
+
|
|
9
|
+
### グローバル属性
|
|
10
|
+
|
|
11
|
+
以下のグローバル属性が `def['#globalAttrs']['#extends']` 配下に登録されています:
|
|
12
|
+
|
|
13
|
+
| 属性 | 型 | 条件 | 説明 |
|
|
14
|
+
| ----- | ------------ | --------- | ---------------------------------------------------------------------- |
|
|
15
|
+
| `key` | `NoEmptyAny` | `[v-for]` | リストレンダリング用の特別な属性。`v-for` を持つ要素でのみ利用可能 |
|
|
16
|
+
| `ref` | `NoEmptyAny` | _(なし)_ | 子コンポーネントインスタンスおよび子要素にアクセスするための特別な属性 |
|
|
17
|
+
|
|
18
|
+
`condition` フィールドは CSS セレクタ（`[v-for]`）を使用し、`key` を `v-for` ディレクティブも持つ要素に制限します。
|
|
19
|
+
|
|
20
|
+
### 要素固有のオーバーライド
|
|
21
|
+
|
|
22
|
+
`specs` 配列には要素ごとのオーバーライドが含まれます:
|
|
23
|
+
|
|
24
|
+
| 要素 | オーバーライド | 用途 |
|
|
25
|
+
| ------ | ------------------------------- | --------------------------------------------------------------- |
|
|
26
|
+
| `slot` | `possibleToAddProperties: true` | スコープドスロット API 向けに `<slot>` での動的プロパティを許可 |
|
|
27
|
+
|
|
28
|
+
## ディレクトリ構成
|
|
29
|
+
|
|
30
|
+
```
|
|
31
|
+
src/
|
|
32
|
+
└── index.ts — ExtendedSpec オブジェクトの定義とエクスポート
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
## 主要ソースファイル
|
|
36
|
+
|
|
37
|
+
| ファイル | 用途 |
|
|
38
|
+
| -------------- | --------------------------------------------------------------------- |
|
|
39
|
+
| `src/index.ts` | グローバル属性と要素オーバーライドを含む Vue の `ExtendedSpec` を定義 |
|
|
40
|
+
|
|
41
|
+
## 統合ポイント
|
|
42
|
+
|
|
43
|
+
```mermaid
|
|
44
|
+
flowchart TD
|
|
45
|
+
subgraph upstream ["上流"]
|
|
46
|
+
htmlSpec["@markuplint/html-spec\n(ベース HTML スペック)"]
|
|
47
|
+
mlSpec["@markuplint/ml-spec\n(ExtendedSpec 型)"]
|
|
48
|
+
end
|
|
49
|
+
|
|
50
|
+
subgraph pkg ["@markuplint/vue-spec"]
|
|
51
|
+
vueSpec["ExtendedSpec\n(Vue 属性 & オーバーライド)"]
|
|
52
|
+
end
|
|
53
|
+
|
|
54
|
+
subgraph downstream ["下流"]
|
|
55
|
+
mlCore["@markuplint/ml-core\n(スペック解決)"]
|
|
56
|
+
end
|
|
57
|
+
|
|
58
|
+
subgraph paired ["対になるパーサー"]
|
|
59
|
+
vueParser["@markuplint/vue-parser\n(Vue SFC パーサー)"]
|
|
60
|
+
end
|
|
61
|
+
|
|
62
|
+
mlSpec -->|"ExtendedSpec 型"| vueSpec
|
|
63
|
+
htmlSpec -->|"ベーススペックとマージ"| mlCore
|
|
64
|
+
vueSpec -->|"Vue 拡張"| mlCore
|
|
65
|
+
vueParser -->|"Vue テンプレートをパース"| mlCore
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
### 上流
|
|
69
|
+
|
|
70
|
+
- **`@markuplint/ml-spec`** -- このパッケージが実装する `ExtendedSpec` 型を提供
|
|
71
|
+
- **`@markuplint/html-spec`** -- Vue 拡張がマージされるベース HTML 仕様
|
|
72
|
+
|
|
73
|
+
### 下流
|
|
74
|
+
|
|
75
|
+
- **`@markuplint/ml-core`** -- スペック解決時に `ExtendedSpec` オブジェクトを利用し、Vue 固有の属性をベース HTML スペックにマージ
|
|
76
|
+
|
|
77
|
+
### 対になるパーサー
|
|
78
|
+
|
|
79
|
+
- **`@markuplint/vue-parser`** -- このスペックパッケージと連携する Vue SFC パーサー。パーサーがテンプレート構文を処理し、このパッケージが属性仕様を定義する。
|
|
80
|
+
|
|
81
|
+
## ドキュメントマップ
|
|
82
|
+
|
|
83
|
+
- [メンテナンスガイド](docs/maintenance.ja.md) -- コマンド、レシピ、ExtendedSpec リファレンス
|
package/ARCHITECTURE.md
ADDED
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
# @markuplint/vue-spec
|
|
2
|
+
|
|
3
|
+
## Overview
|
|
4
|
+
|
|
5
|
+
`@markuplint/vue-spec` is a spec extension package that provides Vue-specific attribute definitions for markuplint. It exports a single `ExtendedSpec` object that registers Vue's special global attributes (`key` for list rendering and `ref` for template refs) and element-level overrides (such as allowing dynamic properties on `<slot>`). This package contains no parsing logic -- it is purely a data definition consumed by the spec resolution pipeline.
|
|
6
|
+
|
|
7
|
+
## ExtendedSpec Content
|
|
8
|
+
|
|
9
|
+
### Global Attributes
|
|
10
|
+
|
|
11
|
+
The following global attributes are registered under `def['#globalAttrs']['#extends']`:
|
|
12
|
+
|
|
13
|
+
| Attribute | Type | Condition | Description |
|
|
14
|
+
| --------- | ------------ | --------- | ------------------------------------------------------------------------------ |
|
|
15
|
+
| `key` | `NoEmptyAny` | `[v-for]` | A special attribute for list rendering; only available on `v-for` elements |
|
|
16
|
+
| `ref` | `NoEmptyAny` | _(none)_ | A special attribute for accessing child component instances and child elements |
|
|
17
|
+
|
|
18
|
+
The `condition` field uses a CSS selector (`[v-for]`) to restrict `key` to elements that also have the `v-for` directive.
|
|
19
|
+
|
|
20
|
+
### Element-Specific Overrides
|
|
21
|
+
|
|
22
|
+
The `specs` array contains per-element overrides:
|
|
23
|
+
|
|
24
|
+
| Element | Override | Purpose |
|
|
25
|
+
| ------- | ------------------------------- | ---------------------------------------------------------- |
|
|
26
|
+
| `slot` | `possibleToAddProperties: true` | Allows dynamic properties on `<slot>` for scoped slot APIs |
|
|
27
|
+
|
|
28
|
+
## Directory Structure
|
|
29
|
+
|
|
30
|
+
```
|
|
31
|
+
src/
|
|
32
|
+
└── index.ts — Defines and exports the ExtendedSpec object
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
## Key Source Files
|
|
36
|
+
|
|
37
|
+
| File | Purpose |
|
|
38
|
+
| -------------- | ---------------------------------------------------------------------- |
|
|
39
|
+
| `src/index.ts` | Defines the Vue `ExtendedSpec` with global attrs and element overrides |
|
|
40
|
+
|
|
41
|
+
## Integration Points
|
|
42
|
+
|
|
43
|
+
```mermaid
|
|
44
|
+
flowchart TD
|
|
45
|
+
subgraph upstream ["Upstream"]
|
|
46
|
+
htmlSpec["@markuplint/html-spec\n(Base HTML spec)"]
|
|
47
|
+
mlSpec["@markuplint/ml-spec\n(ExtendedSpec type)"]
|
|
48
|
+
end
|
|
49
|
+
|
|
50
|
+
subgraph pkg ["@markuplint/vue-spec"]
|
|
51
|
+
vueSpec["ExtendedSpec\n(Vue attributes & overrides)"]
|
|
52
|
+
end
|
|
53
|
+
|
|
54
|
+
subgraph downstream ["Downstream"]
|
|
55
|
+
mlCore["@markuplint/ml-core\n(Spec resolution)"]
|
|
56
|
+
end
|
|
57
|
+
|
|
58
|
+
subgraph paired ["Paired Parser"]
|
|
59
|
+
vueParser["@markuplint/vue-parser\n(Vue SFC parser)"]
|
|
60
|
+
end
|
|
61
|
+
|
|
62
|
+
mlSpec -->|"ExtendedSpec type"| vueSpec
|
|
63
|
+
htmlSpec -->|"Base spec merged with"| mlCore
|
|
64
|
+
vueSpec -->|"Vue extensions"| mlCore
|
|
65
|
+
vueParser -->|"Parses Vue templates"| mlCore
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
### Upstream
|
|
69
|
+
|
|
70
|
+
- **`@markuplint/ml-spec`** -- Provides the `ExtendedSpec` type that this package implements
|
|
71
|
+
- **`@markuplint/html-spec`** -- The base HTML specification that Vue extensions are merged into
|
|
72
|
+
|
|
73
|
+
### Downstream
|
|
74
|
+
|
|
75
|
+
- **`@markuplint/ml-core`** -- Consumes the `ExtendedSpec` object during spec resolution, merging Vue-specific attributes into the base HTML spec
|
|
76
|
+
|
|
77
|
+
### Paired Parser
|
|
78
|
+
|
|
79
|
+
- **`@markuplint/vue-parser`** -- The Vue SFC parser that works alongside this spec package. The parser handles template syntax while this package defines attribute specifications.
|
|
80
|
+
|
|
81
|
+
## Documentation Map
|
|
82
|
+
|
|
83
|
+
- [Maintenance Guide](docs/maintenance.md) -- Commands, recipes, and ExtendedSpec reference
|
package/CHANGELOG.md
CHANGED
|
@@ -3,13 +3,13 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
-
## [4.5.
|
|
6
|
+
## [4.5.23](https://github.com/markuplint/markuplint/compare/@markuplint/vue-spec@4.5.22...@markuplint/vue-spec@4.5.23) (2026-02-10)
|
|
7
7
|
|
|
8
8
|
**Note:** Version bump only for package @markuplint/vue-spec
|
|
9
9
|
|
|
10
|
+
## [4.5.22](https://github.com/markuplint/markuplint/compare/@markuplint/vue-spec@4.5.21...@markuplint/vue-spec@4.5.22) (2025-11-05)
|
|
10
11
|
|
|
11
|
-
|
|
12
|
-
|
|
12
|
+
**Note:** Version bump only for package @markuplint/vue-spec
|
|
13
13
|
|
|
14
14
|
## [4.5.21](https://github.com/markuplint/markuplint/compare/@markuplint/vue-spec@4.5.20...@markuplint/vue-spec@4.5.21) (2025-08-24)
|
|
15
15
|
|
package/SKILL.md
ADDED
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: Maintenance tasks for @markuplint/vue-spec
|
|
3
|
+
globs:
|
|
4
|
+
- packages/@markuplint/vue-spec/src/**/*.ts
|
|
5
|
+
alwaysApply: false
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
# vue-spec-maintenance
|
|
9
|
+
|
|
10
|
+
Perform maintenance tasks for `@markuplint/vue-spec`: add global attributes,
|
|
11
|
+
add element-specific overrides, and update Vue extended specifications.
|
|
12
|
+
|
|
13
|
+
## Input
|
|
14
|
+
|
|
15
|
+
`$ARGUMENTS` specifies the task. Supported tasks:
|
|
16
|
+
|
|
17
|
+
| Task | Description |
|
|
18
|
+
| ---------------------- | ------------------------------------------ |
|
|
19
|
+
| `add-global-attribute` | Add a new Vue global attribute |
|
|
20
|
+
| `add-element-override` | Add an element-specific attribute override |
|
|
21
|
+
|
|
22
|
+
If omitted, defaults to `add-global-attribute`.
|
|
23
|
+
|
|
24
|
+
## Reference
|
|
25
|
+
|
|
26
|
+
Before executing any task, read `docs/maintenance.md` (or `docs/maintenance.ja.md`)
|
|
27
|
+
for the full guide. The recipes there are the source of truth for procedures.
|
|
28
|
+
|
|
29
|
+
Also read:
|
|
30
|
+
|
|
31
|
+
- `ARCHITECTURE.md` -- Package overview, ExtendedSpec structure, and integration points
|
|
32
|
+
- `src/index.ts` -- The ExtendedSpec definition (source of truth)
|
|
33
|
+
|
|
34
|
+
## Task: add-global-attribute
|
|
35
|
+
|
|
36
|
+
Add a new Vue global attribute. Follow recipe #1 in `docs/maintenance.md`.
|
|
37
|
+
|
|
38
|
+
### Step 1: Identify the attribute
|
|
39
|
+
|
|
40
|
+
1. Determine the attribute name, type, and description
|
|
41
|
+
2. Determine if the attribute is conditional (requires a CSS selector condition)
|
|
42
|
+
|
|
43
|
+
### Step 2: Add the attribute
|
|
44
|
+
|
|
45
|
+
1. Read `src/index.ts`
|
|
46
|
+
2. Add a new entry under `def['#globalAttrs']['#extends']`
|
|
47
|
+
3. Set the `type` field (e.g., `'NoEmptyAny'`)
|
|
48
|
+
4. Set the `description` field
|
|
49
|
+
5. If conditional, add a `condition` field with a CSS selector (e.g., `'[v-for]'`)
|
|
50
|
+
|
|
51
|
+
### Step 3: Verify
|
|
52
|
+
|
|
53
|
+
1. Build: `yarn build --scope @markuplint/vue-spec`
|
|
54
|
+
2. Test: `yarn test --scope @markuplint/vue-spec`
|
|
55
|
+
|
|
56
|
+
## Task: add-element-override
|
|
57
|
+
|
|
58
|
+
Add an element-specific attribute override. Follow recipe #2 in `docs/maintenance.md`.
|
|
59
|
+
|
|
60
|
+
### Step 1: Identify the element
|
|
61
|
+
|
|
62
|
+
1. Determine the element name and the override properties
|
|
63
|
+
2. Check the `ExtendedSpec` type in `@markuplint/ml-spec` for available override fields
|
|
64
|
+
|
|
65
|
+
### Step 2: Add the override
|
|
66
|
+
|
|
67
|
+
1. Read `src/index.ts`
|
|
68
|
+
2. Add a new entry to the `specs` array with the element `name` and override properties
|
|
69
|
+
3. Example: `{ name: 'component', possibleToAddProperties: true }`
|
|
70
|
+
|
|
71
|
+
### Step 3: Verify
|
|
72
|
+
|
|
73
|
+
1. Build: `yarn build --scope @markuplint/vue-spec`
|
|
74
|
+
2. Test: `yarn test --scope @markuplint/vue-spec`
|
|
75
|
+
|
|
76
|
+
## Rules
|
|
77
|
+
|
|
78
|
+
1. **Only export an ExtendedSpec object** — no parsing logic belongs in this package.
|
|
79
|
+
2. **Global attributes go under `def['#globalAttrs']['#extends']`** — this is the standard location for framework-specific global attributes.
|
|
80
|
+
3. **Element overrides go under the `specs[]` array** — each entry must have a `name` field identifying the target element.
|
|
81
|
+
4. **Use the `condition` field with CSS selectors for conditional attributes** — e.g., `'[v-for]'` restricts an attribute to elements with the `v-for` directive.
|
|
82
|
+
5. **Add JSDoc comments** to document the purpose of new attributes or overrides.
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
# メンテナンスガイド
|
|
2
|
+
|
|
3
|
+
## コマンド
|
|
4
|
+
|
|
5
|
+
| コマンド | 説明 |
|
|
6
|
+
| ----------------------------------------- | ---------------------- |
|
|
7
|
+
| `yarn build --scope @markuplint/vue-spec` | このパッケージをビルド |
|
|
8
|
+
| `yarn dev --scope @markuplint/vue-spec` | ウォッチモードでビルド |
|
|
9
|
+
| `yarn clean --scope @markuplint/vue-spec` | ビルド成果物を削除 |
|
|
10
|
+
| `yarn test --scope @markuplint/vue-spec` | テストを実行 |
|
|
11
|
+
|
|
12
|
+
## テスト
|
|
13
|
+
|
|
14
|
+
このパッケージは静的データオブジェクトのみをエクスポートするため、専用のテストファイルはありません。検証は以下の方法で行います:
|
|
15
|
+
|
|
16
|
+
1. **型チェック** -- `yarn build --scope @markuplint/vue-spec` でビルドし、`ExtendedSpec` 型が満たされていることを確認
|
|
17
|
+
2. **統合テスト** -- `yarn test --scope @markuplint/vue-parser` を実行し、スペックが Vue パーサーと正しく動作することを確認
|
|
18
|
+
|
|
19
|
+
## レシピ
|
|
20
|
+
|
|
21
|
+
### 1. グローバル属性の追加
|
|
22
|
+
|
|
23
|
+
1. `src/index.ts` を開く
|
|
24
|
+
2. `def['#globalAttrs']['#extends']` 配下に新しいエントリを追加:
|
|
25
|
+
|
|
26
|
+
```ts
|
|
27
|
+
attributeName: {
|
|
28
|
+
type: 'NoEmptyAny',
|
|
29
|
+
description: '属性の説明',
|
|
30
|
+
},
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
3. ビルド: `yarn build --scope @markuplint/vue-spec`
|
|
34
|
+
4. 統合テスト: `yarn test --scope @markuplint/vue-parser`
|
|
35
|
+
|
|
36
|
+
### 2. 要素固有のオーバーライドの追加
|
|
37
|
+
|
|
38
|
+
1. `src/index.ts` を開く
|
|
39
|
+
2. `specs` 配列に新しいエントリを追加:
|
|
40
|
+
|
|
41
|
+
```ts
|
|
42
|
+
{
|
|
43
|
+
name: 'element-name',
|
|
44
|
+
possibleToAddProperties: true,
|
|
45
|
+
},
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
3. `@markuplint/ml-spec` の `ExtendedSpec` 型で利用可能なオーバーライドフィールドを確認
|
|
49
|
+
4. ビルド: `yarn build --scope @markuplint/vue-spec`
|
|
50
|
+
5. 統合テスト: `yarn test --scope @markuplint/vue-parser`
|
|
51
|
+
|
|
52
|
+
### 3. 条件付き属性の追加（CSS セレクタ条件付き）
|
|
53
|
+
|
|
54
|
+
一部の Vue 属性は、特定の条件を満たす要素にのみ適用されます。`condition` フィールドに CSS セレクタを指定して、属性が利用可能な場面を制限します。
|
|
55
|
+
|
|
56
|
+
1. `src/index.ts` を開く
|
|
57
|
+
2. `def['#globalAttrs']['#extends']` 配下に `condition` 付きの新しいエントリを追加:
|
|
58
|
+
|
|
59
|
+
```ts
|
|
60
|
+
attributeName: {
|
|
61
|
+
type: 'NoEmptyAny',
|
|
62
|
+
description: '条件付き属性の説明',
|
|
63
|
+
condition: '[v-directive]',
|
|
64
|
+
},
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
3. `condition` の値は CSS 属性セレクタです。例:
|
|
68
|
+
- `'[v-for]'` -- `v-for` ディレクティブを持つ要素のみ
|
|
69
|
+
- `'[v-model]'` -- `v-model` ディレクティブを持つ要素のみ
|
|
70
|
+
4. ビルド: `yarn build --scope @markuplint/vue-spec`
|
|
71
|
+
5. 統合テスト: `yarn test --scope @markuplint/vue-parser`
|
|
72
|
+
|
|
73
|
+
## ExtendedSpec 型リファレンス
|
|
74
|
+
|
|
75
|
+
`ExtendedSpec` 型（`@markuplint/ml-spec` から提供）は、スペック拡張オブジェクトの構造を定義します:
|
|
76
|
+
|
|
77
|
+
```
|
|
78
|
+
ExtendedSpec
|
|
79
|
+
├── def
|
|
80
|
+
│ └── #globalAttrs
|
|
81
|
+
│ └── #extends
|
|
82
|
+
│ └── [attributeName]
|
|
83
|
+
│ ├── type — 属性値の型（例: 'NoEmptyAny'）
|
|
84
|
+
│ ├── description — 人間が読める説明
|
|
85
|
+
│ └── condition? — 属性が適用される場面を制限する CSS セレクタ
|
|
86
|
+
└── specs[]
|
|
87
|
+
├── name — 対象の要素名
|
|
88
|
+
└── possibleToAddProperties? — 要素への動的プロパティの追加を許可
|
|
89
|
+
```
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
# Maintenance Guide
|
|
2
|
+
|
|
3
|
+
## Commands
|
|
4
|
+
|
|
5
|
+
| Command | Description |
|
|
6
|
+
| ----------------------------------------- | ---------------------- |
|
|
7
|
+
| `yarn build --scope @markuplint/vue-spec` | Build this package |
|
|
8
|
+
| `yarn dev --scope @markuplint/vue-spec` | Watch mode build |
|
|
9
|
+
| `yarn clean --scope @markuplint/vue-spec` | Remove build artifacts |
|
|
10
|
+
| `yarn test --scope @markuplint/vue-spec` | Run tests |
|
|
11
|
+
|
|
12
|
+
## Testing
|
|
13
|
+
|
|
14
|
+
This package has no dedicated test files because it only exports a static data object. Verification is done through:
|
|
15
|
+
|
|
16
|
+
1. **Type checking** -- Build with `yarn build --scope @markuplint/vue-spec` to verify the `ExtendedSpec` type is satisfied
|
|
17
|
+
2. **Integration testing** -- Run `yarn test --scope @markuplint/vue-parser` to verify the spec works correctly with the Vue parser
|
|
18
|
+
|
|
19
|
+
## Recipes
|
|
20
|
+
|
|
21
|
+
### 1. Adding a Global Attribute
|
|
22
|
+
|
|
23
|
+
1. Open `src/index.ts`
|
|
24
|
+
2. Add a new entry under `def['#globalAttrs']['#extends']`:
|
|
25
|
+
|
|
26
|
+
```ts
|
|
27
|
+
attributeName: {
|
|
28
|
+
type: 'NoEmptyAny',
|
|
29
|
+
description: 'Description of the attribute',
|
|
30
|
+
},
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
3. Build: `yarn build --scope @markuplint/vue-spec`
|
|
34
|
+
4. Test integration: `yarn test --scope @markuplint/vue-parser`
|
|
35
|
+
|
|
36
|
+
### 2. Adding an Element-Specific Override
|
|
37
|
+
|
|
38
|
+
1. Open `src/index.ts`
|
|
39
|
+
2. Add a new entry to the `specs` array:
|
|
40
|
+
|
|
41
|
+
```ts
|
|
42
|
+
{
|
|
43
|
+
name: 'element-name',
|
|
44
|
+
possibleToAddProperties: true,
|
|
45
|
+
},
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
3. Check the `ExtendedSpec` type in `@markuplint/ml-spec` for available override fields
|
|
49
|
+
4. Build: `yarn build --scope @markuplint/vue-spec`
|
|
50
|
+
5. Test integration: `yarn test --scope @markuplint/vue-parser`
|
|
51
|
+
|
|
52
|
+
### 3. Adding a Conditional Attribute (with CSS Selector Condition)
|
|
53
|
+
|
|
54
|
+
Some Vue attributes only apply to elements that meet a certain condition. Use the `condition` field with a CSS selector to restrict when the attribute is available.
|
|
55
|
+
|
|
56
|
+
1. Open `src/index.ts`
|
|
57
|
+
2. Add a new entry under `def['#globalAttrs']['#extends']` with a `condition`:
|
|
58
|
+
|
|
59
|
+
```ts
|
|
60
|
+
attributeName: {
|
|
61
|
+
type: 'NoEmptyAny',
|
|
62
|
+
description: 'Description of the conditional attribute',
|
|
63
|
+
condition: '[v-directive]',
|
|
64
|
+
},
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
3. The `condition` value is a CSS attribute selector. For example:
|
|
68
|
+
- `'[v-for]'` -- only on elements with the `v-for` directive
|
|
69
|
+
- `'[v-model]'` -- only on elements with the `v-model` directive
|
|
70
|
+
4. Build: `yarn build --scope @markuplint/vue-spec`
|
|
71
|
+
5. Test integration: `yarn test --scope @markuplint/vue-parser`
|
|
72
|
+
|
|
73
|
+
## ExtendedSpec Type Reference
|
|
74
|
+
|
|
75
|
+
The `ExtendedSpec` type (from `@markuplint/ml-spec`) defines the structure of spec extension objects:
|
|
76
|
+
|
|
77
|
+
```
|
|
78
|
+
ExtendedSpec
|
|
79
|
+
├── def
|
|
80
|
+
│ └── #globalAttrs
|
|
81
|
+
│ └── #extends
|
|
82
|
+
│ └── [attributeName]
|
|
83
|
+
│ ├── type — Attribute value type (e.g., 'NoEmptyAny')
|
|
84
|
+
│ ├── description — Human-readable description
|
|
85
|
+
│ └── condition? — CSS selector restricting where the attr applies
|
|
86
|
+
└── specs[]
|
|
87
|
+
├── name — Target element name
|
|
88
|
+
└── possibleToAddProperties? — Allow dynamic properties on the element
|
|
89
|
+
```
|
package/lib/index.d.ts
CHANGED
|
@@ -1,3 +1,20 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @module @markuplint/vue-spec
|
|
3
|
+
*
|
|
4
|
+
* Provides Vue-specific extended specifications for markuplint.
|
|
5
|
+
* Defines Vue's special global attributes (`key` for list rendering
|
|
6
|
+
* and `ref` for template refs) and element-level overrides such as
|
|
7
|
+
* allowing dynamic properties on the `<slot>` element.
|
|
8
|
+
*/
|
|
1
9
|
import type { ExtendedSpec } from '@markuplint/ml-spec';
|
|
10
|
+
/**
|
|
11
|
+
* The Vue framework extended specification.
|
|
12
|
+
*
|
|
13
|
+
* Registers Vue-specific global attributes and element specs.
|
|
14
|
+
* The `key` attribute is conditionally available on elements that
|
|
15
|
+
* use the `v-for` directive, while `ref` is universally available
|
|
16
|
+
* for accessing component instances and DOM elements. The `<slot>`
|
|
17
|
+
* element is marked as allowing additional dynamic properties.
|
|
18
|
+
*/
|
|
2
19
|
declare const spec: ExtendedSpec;
|
|
3
20
|
export default spec;
|
package/lib/index.js
CHANGED
|
@@ -1,3 +1,20 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @module @markuplint/vue-spec
|
|
3
|
+
*
|
|
4
|
+
* Provides Vue-specific extended specifications for markuplint.
|
|
5
|
+
* Defines Vue's special global attributes (`key` for list rendering
|
|
6
|
+
* and `ref` for template refs) and element-level overrides such as
|
|
7
|
+
* allowing dynamic properties on the `<slot>` element.
|
|
8
|
+
*/
|
|
9
|
+
/**
|
|
10
|
+
* The Vue framework extended specification.
|
|
11
|
+
*
|
|
12
|
+
* Registers Vue-specific global attributes and element specs.
|
|
13
|
+
* The `key` attribute is conditionally available on elements that
|
|
14
|
+
* use the `v-for` directive, while `ref` is universally available
|
|
15
|
+
* for accessing component instances and DOM elements. The `<slot>`
|
|
16
|
+
* element is marked as allowing additional dynamic properties.
|
|
17
|
+
*/
|
|
1
18
|
const spec = {
|
|
2
19
|
def: {
|
|
3
20
|
'#globalAttrs': {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@markuplint/vue-spec",
|
|
3
|
-
"version": "4.5.
|
|
3
|
+
"version": "4.5.23",
|
|
4
4
|
"description": "Extended specification for tags and attributes in Vue",
|
|
5
5
|
"repository": "git@github.com:markuplint/markuplint.git",
|
|
6
6
|
"author": "Yusuke Hirao <yusukehirao@me.com>",
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"clean": "tsc --build --clean tsconfig.build.json"
|
|
22
22
|
},
|
|
23
23
|
"dependencies": {
|
|
24
|
-
"@markuplint/ml-spec": "4.10.
|
|
24
|
+
"@markuplint/ml-spec": "4.10.2"
|
|
25
25
|
},
|
|
26
|
-
"gitHead": "
|
|
26
|
+
"gitHead": "193ee7c1262bbed95424e38efdf1a8e56ff049f4"
|
|
27
27
|
}
|