@burger-editor/frozen-patty 4.0.0-alpha.75 → 4.0.0-alpha.77

package/README.md

@@ -132,13 +132,15 @@ frozenPatty(html)
 
 適用時の自動変換ルール:
 
-| 配列インデックス | 生成要素 | DOM 位置                       | 属性変換                                 |
-| ---------------- | -------- | ------------------------------ | ---------------------------------------- |
-| `0`              | `img`    | DOM 末尾                       | `srcset` → `src`、`sizes` 削除           |
-| `1..n`           | `source` | DOM 先頭側（配列の逆順で挿入） | `src` → `srcset`、`alt` / `loading` 削除 |
+| 配列インデックス | 生成要素 | DOM 位置                       | 属性変換                                                                                                                   |
+| ---------------- | -------- | ------------------------------ | -------------------------------------------------------------------------------------------------------------------------- |
+| `0`              | `img`    | DOM 末尾                       | `srcset` → `src`、`sizes` のバインド削除、静的な `media` / `type` 削除                                                     |
+| `1..n`           | `source` | DOM 先頭側（配列の逆順で挿入） | `src` → `srcset`、`alt` / `loading` のバインド削除、静的な `img` 専用属性（`alt` / `src` / `loading` / `decoding` 等）削除 |
 
 `data-field` 構文も生成要素に合わせて再設定される（`img`: `path:src, …` / `source`: `path:srcset, …`）。配列要素に該当属性が存在しないスロット（例: `img` の `media`）は `null` で埋める。
 
+雛形にバインドされていない静的属性は、生成要素にそのまま引き継がれる。ただし生成要素で HTML 仕様上無効になる属性は落とす（雛形 `img` の静的な `alt` が `source` に付く、など）。既に無効な属性を持つ保存済み HTML も、再度 `merge` すれば取り除かれる。
+
 適用時の雛形（複製元の要素）は、DOM 末尾の要素（＝配列 index 0、この場合 `img`）から取る。`source` を雛形にすると `alt` / `loading` のバインドを持たない状態で `img` に変換されてしまい、一度保存された HTML を再度テンプレートとして `merge` した際（`Item.import` の2回目以降の呼び出し等）に `img` から `alt` / `loading` が失われる。抽出時の「DOM 末尾 = 配列 index 0」という読み取り規則と対称にすることで、この劣化を防いでいる。
 
 ## Options

package/dist/set-component.js

@@ -2,6 +2,54 @@ import { kebabCase } from '@burger-editor/utils';
 import { setValue } from './set-value.js';
 import { stringifyFields } from './stringify-fields.js';
 import { definedFields, flattenData, getFields, hasField, isReverseListElement, maxLengthOf, removeProp, replaceNode, replaceProp, } from './utils.js';
+/**
+ * `picture` 内の `source` で無効な、`img` 専用の属性。
+ * `source` で有効な属性の allowlist にしないのは、グローバル属性・`data-*`・
+ * `aria-*` を列挙しきれず、取りこぼすと正しい属性まで落としてしまうため
+ */
+const PICTURE_SOURCE_INVALID_ATTRS = [
+    'alt',
+    'src',
+    'loading',
+    'decoding',
+    'fetchpriority',
+    'crossorigin',
+    'referrerpolicy',
+    'usemap',
+    'ismap',
+    'elementtiming',
+    'attributionsrc',
+    // Obsolete img attributes
+    'align',
+    'border',
+    'hspace',
+    'vspace',
+    'longdesc',
+    'name',
+    'lowsrc',
+];
+/**
+ * `picture` 内の `img` で無効な、`source` 専用の属性
+ */
+const PICTURE_IMG_INVALID_ATTRS = ['media', 'type'];
+/**
+ * 要素から指定した属性を取り除く
+ *
+ * replaceNode は未バインドの静的属性を要素の種類に関係なく引き継ぎ、
+ * 変換元と変換先の要素が同じ場合は何もしない。そのため、雛形 img の静的な
+ * alt が source に付いたり、過去の出力で img に付いた media が残ったりする。
+ * 変換の有無にかかわらず、ここで必ず落とす。
+ * バインドされたフィールドは落とさない。要素のプロパティに無い属性は
+ * setValue が書き込まないため（propInElement）、データの index 対応を
+ * 崩してまで data-* 宣言から外す必要がない
+ * @param el
+ * @param names
+ */
+function removeAttrs(el, names) {
+    for (const name of names) {
+        el.removeAttribute(name);
+    }
+}
 /**
  *
  * @param el
@@ -68,6 +116,7 @@ export function setComponent(el, data, attr, filter, xssSanitize = true) {
                     if (i === 0) {
                         // Convert first item to img element
                         item = replaceNode(item, 'img', attr, xssSanitize);
+                        removeAttrs(item, PICTURE_IMG_INVALID_ATTRS);
                         fields = replaceProp(fields, 'srcset', 'src');
                         fields = removeProp(fields, 'sizes');
                         const fieldQuery = stringifyFields(fields);
@@ -76,6 +125,7 @@ export function setComponent(el, data, attr, filter, xssSanitize = true) {
                     else {
                         // Convert subsequent items to source elements
                         item = replaceNode(item, 'source', attr, xssSanitize);
+                        removeAttrs(item, PICTURE_SOURCE_INVALID_ATTRS);
                         fields = replaceProp(fields, 'src', 'srcset');
                         fields = removeProp(fields, 'alt');
                         fields = removeProp(fields, 'loading');

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@burger-editor/frozen-patty",
-	"version": "4.0.0-alpha.75",
+	"version": "4.0.0-alpha.77",
 	"description": "Pure HTML to JSON converter that does not use a template engine.",
 	"author": "D-ZERO",
 	"license": "(MIT OR Apache-2.0)",
@@ -47,7 +47,7 @@
 		"clean": "tsc --build --clean"
 	},
 	"dependencies": {
-		"@burger-editor/utils": "4.0.0-alpha.75"
+		"@burger-editor/utils": "4.0.0-alpha.77"
 	},
-	"gitHead": "dcbf606dcf50d0d4e43b1b04aec3ee140f6d887a"
+	"gitHead": "196ad02ea9b1a05e9658a8cf42b564033a0fe3ec"
 }