@markuplint/html-spec 4.16.0 → 4.17.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.
@@ -0,0 +1,359 @@
1
+ # メンテナンスガイド
2
+
3
+ `@markuplint/html-spec` パッケージの日常的なメンテナンス作業に関するガイドです。仕様ファイルの追加・変更、ビルド、テスト、トラブルシューティングの手順を解説します。
4
+
5
+ ## コマンド
6
+
7
+ | コマンド | 説明 |
8
+ | ------------------------------------------------------- | --------------------------------------------- |
9
+ | `yarn workspace @markuplint/html-spec run gen` | フル生成: ビルド + Prettierフォーマット |
10
+ | `yarn workspace @markuplint/html-spec run gen:build` | `node build.mjs` を実行して index.json を生成 |
11
+ | `yarn workspace @markuplint/html-spec run gen:prettier` | Prettier で index.json をフォーマット |
12
+ | `yarn up:gen` | リポジトリルートから全specパッケージを再生成 |
13
+
14
+ ## よくあるレシピ
15
+
16
+ ### 1. 新しいHTML要素の追加
17
+
18
+ 1. `src/spec.<element>.json` を作成(例: `src/spec.dialog.json`)
19
+ 2. 最低限以下を定義:
20
+ - `contentModel` と `contents`
21
+ - `globalAttrs`(通常 `#HTMLGlobalAttrs`, `#GlobalEventAttrs`, `#ARIAAttrs` を `true` に設定)
22
+ - `attributes`(要素固有属性、空 `{}` でも可)
23
+ - `aria` と `implicitRole`, `permittedRoles`
24
+ 3. ファイル先頭に関連仕様URLのコメントを追加(`//` 形式、`strip-json-comments` で処理される)
25
+ 4. 要素がいずれかのコンテンツカテゴリ(flow、phrasing 等)に属する場合、
26
+ `src/spec-common.contents.json` の該当カテゴリに追加する。追加しないと
27
+ `@markuplint/rules` の `permitted-contents` ルールがそのカテゴリを許可する
28
+ 親要素の中で不正な子要素として検出してしまう
29
+ 5. `yarn workspace @markuplint/html-spec run gen` を実行
30
+ 6. `index.json` に要素が正しく表示されることを確認
31
+ 7. `yarn workspace @markuplint/html-spec run test` でスキーマ検証が通ることを確認
32
+
33
+ 最小限のテンプレート:
34
+
35
+ ```jsonc
36
+ // https://html.spec.whatwg.org/multipage/...
37
+ {
38
+ "contentModel": {
39
+ "contents": [{ "oneOrMore": ":model(phrasing)" }],
40
+ },
41
+ "globalAttrs": {
42
+ "#HTMLGlobalAttrs": true,
43
+ "#GlobalEventAttrs": true,
44
+ "#ARIAAttrs": true,
45
+ },
46
+ "attributes": {},
47
+ "aria": {
48
+ "implicitRole": false,
49
+ "permittedRoles": true,
50
+ },
51
+ }
52
+ ```
53
+
54
+ ### 2. 既存要素の属性変更
55
+
56
+ 1. 該当する `src/spec.<element>.json` を開く
57
+ 2. `attributes` オブジェクトにエントリを追加・変更
58
+ 3. 条件付き属性の場合、CSSセレクタで `condition` フィールドを追加
59
+ 4. `yarn workspace @markuplint/html-spec run gen` を実行
60
+ 5. `index.json` で属性が正しいメタデータとともに表示されることを確認
61
+
62
+ ### 3. SVG要素の追加
63
+
64
+ 1. `src/spec.svg_<localname>.json` を作成(例: `src/spec.svg_circle.json`)
65
+ 2. ファイル名の `svg_` プレフィックスから、要素名は `svg:<localname>` として自動推論される
66
+ 3. SVG固有のグローバル属性カテゴリ(`#SVGCoreAttrs`, `#SVGPresentationAttrs` 等)を使用
67
+ 4. ARIAの `permittedRoles` にはAAM参照オブジェクト(`{ "core-aam": true, "graphics-aam": true }`)を使用
68
+ 5. SVG属性には `animatable` フラグと SVG/CSS 型(`<svg-length>`, `<percentage>` 等)を指定
69
+ 6. `yarn workspace @markuplint/html-spec run gen` を実行
70
+
71
+ ### 4. グローバル属性カテゴリの変更
72
+
73
+ 1. `src/spec-common.attributes.json` を編集
74
+ 2. 各トップレベルキーがカテゴリ(例: `#HTMLGlobalAttrs`, `#SVGCoreAttrs`)
75
+ 3. カテゴリ内の属性定義を追加・削除・変更
76
+ 4. `yarn workspace @markuplint/html-spec run gen` を実行
77
+ 5. そのカテゴリを参照する全要素に変更が反映される
78
+
79
+ ### 5. コンテンツモデルカテゴリの追加・更新
80
+
81
+ 1. `src/spec-common.contents.json` を編集
82
+ 2. `models` オブジェクトに新しいエントリを追加、または既存カテゴリに要素を追加
83
+ 3. SVG要素には `svg|<name>` プレフィックスを使用
84
+ 4. 要素仕様で `:model(newCategory)` として参照
85
+ 5. `yarn workspace @markuplint/html-spec run gen` を実行
86
+
87
+ **重要:** コンテンツモデルカテゴリは下流パッケージの動作に直接影響する:
88
+
89
+ - `@markuplint/ml-spec` が `contentModelCategoryToTagNames()` でカテゴリ名を
90
+ 要素リストに解決する。カテゴリに要素が未登録だと、そのカテゴリを許可する
91
+ 親要素内で有効なコンテンツとして認識されない
92
+ - `@markuplint/rules` の `permitted-contents` ルールがこのパターンに基づいて
93
+ 子要素を検証する。新要素がカテゴリに未追加だと不正な子要素として検出される
94
+ - `#palpable` カテゴリは `no-empty-palpable-content` ルールで使用される
95
+ - 新しいカテゴリ名は `@markuplint/ml-spec/schemas/content-models.schema.json`
96
+ の `Category` 列挙型にも適合する必要がある
97
+
98
+ ### 6. ARIAマッピングの更新
99
+
100
+ 1. 該当する `src/spec.<element>.json` を開く
101
+ 2. `aria` オブジェクトを変更:
102
+ - `implicitRole` でデフォルトロールを変更
103
+ - `permittedRoles` 配列を更新
104
+ - コンテキスト依存ARIAの `conditions` を追加・変更
105
+ - `"1.1"` や `"1.2"` キーでバージョン固有オーバーライドを追加
106
+ 3. 参照仕様(WAI-ARIA、HTML-ARIA)を確認
107
+ 4. `yarn workspace @markuplint/html-spec run gen` を実行
108
+
109
+ **ARIA バージョンについて:** WAI-ARIA 1.1 と 1.2 は勧告として確定済みであり、
110
+ ロール・プロパティの定義は変更されない。手動仕様ファイル内のバージョン固有
111
+ オーバーライド(例: `"1.1": { "permittedRoles": [...] }`)は、これらの確定した
112
+ バージョンの動作を保持するために存在する。WAI-ARIA 1.3 はまだ草案段階であり、
113
+ `yarn up:gen` による ARIA 変更の主な発生源である
114
+
115
+ ### 7. 定期的な仕様更新
116
+
117
+ 本パッケージの仕様データは、`index.json` を再生成することで最新の MDN・W3C データを
118
+ 取り込む。これがウェブ標準の変更を反映するための標準的なワークフローである。
119
+
120
+ **ステップ 1: 再生成して差分を確認**
121
+
122
+ ```bash
123
+ yarn up:gen
124
+ git diff packages/@markuplint/html-spec/index.json
125
+ ```
126
+
127
+ `index.json` に最新の MDN スクレイピング結果が反映される。差分をレビューして
128
+ 何が変更されたか把握する。典型的な変更内容:
129
+
130
+ - **description の些細な表現変更** -- MDN は要素・属性・ロールの説明文を頻繁に
131
+ 修正する。これらは表面的な変更であり、そのままコミットしてよい
132
+ - **新しい属性の追加** -- 新たに標準化された、または experimental な属性が MDN
133
+ から取得される(例: `interestfor`, `switch`)。MDN スクレイピング由来のため、
134
+ 手動仕様ファイルの変更は不要
135
+ - **フラグの変更** -- 標準化の進行に伴い、属性が `experimental`、`deprecated`、
136
+ `nonStandard` 間で遷移することがある
137
+ - **仕様の実質的な変更** -- 例えば、ARIA プロパティが `required` から `inherited`
138
+ に変更される、コンテンツモデルが再構成されるなど
139
+ - **ARIA の変更** -- `index.json` の ARIA ロール・プロパティ定義は W3C 仕様から
140
+ スクレイピングされる。WAI-ARIA 1.1 と 1.2 は勧告(Recommendation)として
141
+ 確定済みであり、変更されることはない。一方、WAI-ARIA 1.3 はまだ草案
142
+ (Working Draft)段階であるため、`yarn up:gen` を実行するたびに新しいロール定義、
143
+ プロパティ要件、description の更新が取り込まれる可能性がある
144
+
145
+ **ステップ 2: 些細な変更の処理**
146
+
147
+ description の表現変更などの表面的な変更は、更新された `index.json` をそのまま
148
+ コミットすればよい。これらは上流の改善を反映したものであり、そのまま受け入れる。
149
+
150
+ > **注意 -- ARIA バージョンの重複:** `index.json` には WAI-ARIA 1.1、1.2、1.3 の
151
+ > ロール定義が含まれるため、多くの文字列が 3 回出現する。description やプロパティ
152
+ > を編集する際、**`replace_all` を使用しないこと** -- 3 つのバージョンすべてが
153
+ > 同時に変更されてしまう。変更対象のバージョンブロックを個別に指定すること。
154
+
155
+ **ステップ 3: 仕様の実質的な変更の処理**
156
+
157
+ 差分に要素の動作、ARIA マッピング、コンテンツモデルに関する実質的な変更が含まれる
158
+ 場合、手動仕様ファイルの更新が必要になることがある:
159
+
160
+ 1. 影響を受ける要素を特定する
161
+ 2. 該当する `src/spec.*.json` または `src/spec-common.*.json` を新しい仕様に合わせて
162
+ 更新する。まれに `@markuplint/ml-spec` のスキーマや型定義の更新が必要になる
163
+ こともある
164
+ 3. 手動仕様の変更を反映するために再生成する:
165
+ ```bash
166
+ yarn up:gen
167
+ ```
168
+ 4. **冪等性の検証** -- 仕様ファイルの変更が安定した出力を生成することをコミット前に確認する:
169
+ ```bash
170
+ # 仕様ファイルと index.json をステージ
171
+ git add packages/@markuplint/html-spec/src/spec.*.json packages/@markuplint/html-spec/index.json
172
+ # 再生成
173
+ yarn up:gen
174
+ # 変更した属性が diff に出ないことを確認(= 安定した出力)
175
+ git diff packages/@markuplint/html-spec/index.json | grep '"your-attr"'
176
+ # 安定していれば再生成ファイルを破棄し、ステージ済みの版を使う
177
+ git checkout packages/@markuplint/html-spec/index.json
178
+ ```
179
+ diff に予期しない変更が出る場合、仕様ファイルとジェネレータの出力が一致していない
180
+ ことを意味する -- コミット前に原因を調査すること。
181
+
182
+ **ステップ 4: コミットと PR**
183
+
184
+ `index.json`(および変更した `src/` ファイルがあればそれも)をステージしてコミットする。
185
+
186
+ 変更の性質に応じた conventional commit プレフィックスを使用する:
187
+
188
+ | 変更種別 | プレフィックス | 例 |
189
+ | -------------------- | -------------- | ------------------------------------------------- |
190
+ | description 更新のみ | `chore` | `chore(html-spec): update role descriptions` |
191
+ | 属性追加・仕様変更 | `feat` | `feat(html-spec): add input switch attribute` |
192
+ | spec データ修正 | `fix` | `fix(html-spec): correct ARIA mapping for button` |
193
+
194
+ **PR の分離:** 仕様変更(新属性の追加、ARIA マッピング修正など)はそれぞれ個別の
195
+ ブランチ・PR で作成する。description のみの更新は 1 つの PR にまとめてよい。
196
+
197
+ このプロセスは多少複雑だが、差分をレビューすることでウェブ標準の変更内容を把握でき、
198
+ 仕様データの正確性を維持するために重要である。
199
+
200
+ ### 8. 要素を非推奨としてマーク
201
+
202
+ 要素を非推奨にする方法は2つある:
203
+
204
+ - **ハードコードリスト経由**: `packages/@markuplint/spec-generator/src/html-elements.ts` の `obsoleteList` 配列に要素名を追加
205
+ - **手動仕様経由**: 要素の仕様ファイルに `"obsolete": true` を設定
206
+
207
+ 非推奨要素には自動的に以下が設定される:
208
+
209
+ - HTML仕様の非準拠機能セクションを指す `cite`
210
+ - `contents: true`(任意のコンテンツ許可)
211
+ - `permittedRoles: true`, `implicitRole: false`
212
+
213
+ ## ファイル分類
214
+
215
+ ### 編集可能なファイル(これらを変更)
216
+
217
+ | ファイル | 説明 |
218
+ | --------------------------------- | -------------------------------------------------- |
219
+ | `src/spec.*.json` | 要素ごとの仕様(177ファイル) |
220
+ | `src/spec-common.attributes.json` | グローバル属性カテゴリ定義(19カテゴリ) |
221
+ | `src/spec-common.contents.json` | コンテンツモデルカテゴリマクロ(HTML 10 + SVG 19) |
222
+ | `build.mjs` | ビルドスクリプト設定 |
223
+
224
+ ### 生成ファイル(編集不可)
225
+
226
+ | ファイル | 説明 |
227
+ | ------------ | ------------------------- |
228
+ | `index.json` | 統合仕様出力(48K行以上) |
229
+
230
+ このファイルは `yarn workspace @markuplint/html-spec run gen` によって再生成される。手動で編集した内容は次回の生成時にすべて上書きされる。
231
+
232
+ ### 静的ファイル
233
+
234
+ | ファイル | 説明 |
235
+ | ------------ | ------------------------- |
236
+ | `index.js` | CommonJS エントリポイント |
237
+ | `index.d.ts` | TypeScript 型宣言 |
238
+
239
+ ## テスト
240
+
241
+ ### スキーマ検証テスト
242
+
243
+ テストファイル `test/structure.spec.mjs` は以下を検証する:
244
+
245
+ 1. **構造テスト**: 全要素が `resolveNamespace()` と `getAttrSpecsByNames()` で解決可能であること
246
+ 2. **スキーマテスト**: ソースJSONファイルが `@markuplint/ml-spec` のJSONスキーマに対して有効であること
247
+
248
+ テスト実行:
249
+
250
+ ```bash
251
+ yarn workspace @markuplint/html-spec run test
252
+ ```
253
+
254
+ スキーマテストでは以下のスキーマが使用される:
255
+
256
+ | スキーマ | 対象 |
257
+ | ------------------------------- | --------------------------------- |
258
+ | `element.schema.json` | `src/spec.*.json` ファイル |
259
+ | `global-attributes.schema.json` | `src/spec-common.attributes.json` |
260
+ | `attributes.schema.json` | 属性定義の部分スキーマ |
261
+ | `types.schema.json` | 型定義の部分スキーマ |
262
+ | `aria.schema.json` | ARIA定義の部分スキーマ |
263
+ | `content-models.schema.json` | コンテンツモデルの部分スキーマ |
264
+
265
+ ## 依存関係管理
266
+
267
+ ### 本番依存
268
+
269
+ - **`@markuplint/ml-spec`**: 型定義とJSONスキーマを提供。`ExtendedSpec` 型が `index.json` の構造を規定する
270
+
271
+ ### 開発依存
272
+
273
+ - **`@markuplint/spec-generator`**: ビルドツール。外部データのスクレイピングとマージを担当
274
+ - **`@markuplint/test-tools`**: テストユーティリティ。`glob` 関数などを提供
275
+
276
+ ### 依存関係更新時の注意
277
+
278
+ 1. `@markuplint/spec-generator` 更新後は必ず再生成を実行
279
+ 2. `index.json` の差分を注意深くレビュー(外部データソースの変更により予期しない差分が出る場合がある)
280
+ 3. テストを実行してスキーマ検証が通ることを確認
281
+ 4. `@markuplint/ml-spec` のスキーマが変更された場合、ソースJSONファイルの更新が必要になることがある
282
+
283
+ ## トラブルシューティング
284
+
285
+ ### ビルド失敗: 生成中のネットワークエラー
286
+
287
+ **症状**: `gen:build` がフェッチエラーで失敗する
288
+
289
+ **原因**: MDNまたはW3Cサーバーに到達できない、またはページ構造が変更された
290
+
291
+ **解決策**: ネットワーク接続を確認する。失敗したフェッチは空文字列としてキャッシュされるため、一部のデータが欠損した状態で生成が完了する場合がある。安定したネットワーク環境で再実行すること。
292
+
293
+ ### スキーマ検証エラー
294
+
295
+ **症状**: テストが "X is invalid" エラーで失敗する
296
+
297
+ **原因**: 仕様ファイルがJSONスキーマに準拠していない
298
+
299
+ **解決策**: エラーメッセージに含まれるファイル名を特定し、`@markuplint/ml-spec` の対応するスキーマに対してファイルの内容を検証する。一般的な原因には、未知のフィールド名、不正な型、必須フィールドの欠落がある。
300
+
301
+ ### index.json の予期しない変更
302
+
303
+ **症状**: 再生成後に予期しない追加・削除がある
304
+
305
+ **原因**: 外部データソース(MDN, W3C)が更新された。MDNのページ構造変更やARIA仕様の改訂により、スクレイピング結果が変わることがある。
306
+
307
+ **解決策**: 変更を注意深くレビューする。不正な変更は手動仕様ファイルでオーバーライドできる。手動仕様のデータはMDNスクレイピングデータよりも常に優先される。
308
+
309
+ ### 再生成後に要素が消失
310
+
311
+ **症状**: `index.json` から要素が消える
312
+
313
+ **原因**: ソース仕様ファイルが削除されたか、命名規則に違反している
314
+
315
+ **解決策**: `src/spec.<element>.json` ファイルの存在と命名を確認する。HTML要素は `spec.<tag>.json`、SVG要素は `spec.svg_<localname>.json` の命名規則に従う必要がある。
316
+
317
+ ### ビルド時間が長い
318
+
319
+ **症状**: `gen:build` の完了に数分以上かかる
320
+
321
+ **原因**: 200以上のHTTPリクエストがMDNおよびW3Cに送信される。ネットワーク速度に依存する。
322
+
323
+ **解決策**: キャッシュは実行ごとにリセットされるため、ビルド間の永続キャッシュは存在しない。安定した高速ネットワーク環境での実行を推奨する。
324
+
325
+ ## データの優先順位
326
+
327
+ 仕様生成時に手動仕様とスクレイピングデータが重複する場合、以下の優先順位が適用される:
328
+
329
+ | データ | ソース | 優先度 |
330
+ | -------------- | --------------- | -------------------------- |
331
+ | `contentModel` | 手動仕様のみ | 最高(スクレイピングなし) |
332
+ | `aria` | 手動仕様のみ | 最高(スクレイピングなし) |
333
+ | `globalAttrs` | 手動仕様のみ | 最高(スクレイピングなし) |
334
+ | `attributes` | 手動仕様 + MDN | 手動が優先、MDNが補完 |
335
+ | `description` | MDN | MDNのみ |
336
+ | `categories` | MDN | MDNのみ |
337
+ | `cite` | 手動仕様 or MDN | 手動仕様があれば優先 |
338
+ | 互換性フラグ | 手動仕様 + MDN | 手動が優先、MDNが補完 |
339
+
340
+ 手動仕様で定義された属性は、同名のMDN由来属性よりも常に優先される。MDNから取得された属性は、手動仕様に存在しない属性の補完にのみ使用される。
341
+
342
+ ## 関連ドキュメント
343
+
344
+ | ドキュメント | 内容 |
345
+ | -------------------------------------------------------- | ---------------------------------------------------------------- |
346
+ | [build-pipeline.md](./build-pipeline.md) | ビルドパイプラインの詳細なアーキテクチャと外部データソースの解説 |
347
+ | [element-spec-format.md](./element-spec-format.md) | 要素仕様JSONファイルのフォーマットリファレンス(英語) |
348
+ | [element-spec-format.ja.md](./element-spec-format.ja.md) | 要素仕様JSONファイルのフォーマットリファレンス(日本語) |
349
+
350
+ ## チェックリスト
351
+
352
+ 仕様ファイルの変更をコミットする前に、以下を確認すること:
353
+
354
+ - [ ] ソースJSONファイルの構文が正しい(JSONコメントは `//` 形式のみ対応)
355
+ - [ ] `yarn workspace @markuplint/html-spec run gen` が正常に完了する
356
+ - [ ] `yarn workspace @markuplint/html-spec run test` が全テストをパスする
357
+ - [ ] `index.json` の差分が意図した変更のみを含む
358
+ - [ ] 新規要素の場合、ファイル命名規則に従っている
359
+ - [ ] ARIA マッピングが最新の WAI-ARIA 仕様と整合している