@burger-editor/frozen-patty 4.0.0-alpha.72 → 4.0.0-alpha.74

package/README.md

@@ -94,7 +94,7 @@ frozenPatty(html)
 
 - 抽出: 同一 `data-field` 値の要素群を配列としてシリアライズ
 - 適用: 配列長に合わせて DOM 要素数を自動増減
-  - データが多い場合: **最初の要素をテンプレート**として複製追加
+  - データが多い場合: **最初の要素をテンプレート**として複製追加（`picture` など DOM 順と配列順が逆になる要素では**末尾の要素**を雛形にする。後述）
   - データが少ない場合: 余分な要素を削除
 
 ### `picture` 要素の特別処理
@@ -139,6 +139,8 @@ frozenPatty(html)
 
 `data-field` 構文も生成要素に合わせて再設定される（`img`: `path:src, …` / `source`: `path:srcset, …`）。配列要素に該当属性が存在しないスロット（例: `img` の `media`）は `null` で埋める。
 
+適用時の雛形（複製元の要素）は、DOM 末尾の要素（＝配列 index 0、この場合 `img`）から取る。`source` を雛形にすると `alt` / `loading` のバインドを持たない状態で `img` に変換されてしまい、一度保存された HTML を再度テンプレートとして `merge` した際（`Item.import` の2回目以降の呼び出し等）に `img` から `alt` / `loading` が失われる。抽出時の「DOM 末尾 = 配列 index 0」という読み取り規則と対称にすることで、この劣化を防いでいる。
+
 ## Options
 
 `frozenPatty(html, options)` の第 2 引数。

package/dist/get-component.js

@@ -1,6 +1,5 @@
 import { getValues } from './get-values.js';
-import { arrayToHash } from './utils.js';
-const reverseListElementSelectors = ['picture'];
+import { arrayToHash, REVERSE_LIST_ELEMENTS } from './utils.js';
 /**
  *
  * @param el
@@ -10,7 +9,7 @@ const reverseListElementSelectors = ['picture'];
  */
 export function getComponent(el, attr, typeConvert, filter) {
     el = el.cloneNode(true);
-    const reverseListElements = el.querySelectorAll(`:is(${reverseListElementSelectors.join(',')})[data-${attr}-list]`);
+    const reverseListElements = el.querySelectorAll(`:is(${REVERSE_LIST_ELEMENTS.join(',')})[data-${attr}-list]`);
     for (const reverseListElement of reverseListElements) {
         const children = [];
         while (reverseListElement.lastElementChild) {

package/dist/set-component.js

@@ -1,7 +1,7 @@
 import { kebabCase } from '@burger-editor/utils';
 import { setValue } from './set-value.js';
 import { stringifyFields } from './stringify-fields.js';
-import { definedFields, flattenData, getFields, hasField, maxLengthOf, removeProp, replaceNode, replaceProp, } from './utils.js';
+import { definedFields, flattenData, getFields, hasField, isReverseListElement, maxLengthOf, removeProp, replaceNode, replaceProp, } from './utils.js';
 /**
  *
  * @param el
@@ -30,10 +30,19 @@ export function setComponent(el, data, attr, filter, xssSanitize = true) {
         }
     }
     for (const listRoot of el.querySelectorAll(`[data-${attr}-list]`)) {
+        const reverse = isReverseListElement(listRoot);
         const decendants = listRoot.querySelectorAll('*');
         const definedFieldsOfDecendants = new Set([...decendants].flatMap((el) => definedFields(el, attr)));
         const maxLength = maxLengthOf(data, [...definedFieldsOfDecendants]);
-        const listItem = listRoot.children[0]?.cloneNode(true);
+        // 逆順リスト（picture）では DOM 末尾の要素（img）が配列 index 0 に
+        // 対応する。先頭要素（source）を雛形にすると、source は alt /
+        // loading のバインドを持たない（下の removeProp 参照）ため、一度
+        // 保存された HTML を再度テンプレートとして merge した際に img から
+        // alt / loading が失われる（Item.import が現在の innerHTML を
+        // テンプレートとして再利用するため、2回目以降の保存で発生する）。
+        // getComponent 側の「末尾 = index 0」という読み取り規則と対称にする
+        const templateEl = reverse ? listRoot.lastElementChild : listRoot.firstElementChild;
+        const listItem = templateEl?.cloneNode(true);
         if (!listItem) {
             continue;
         }
@@ -45,10 +54,8 @@ export function setComponent(el, data, attr, filter, xssSanitize = true) {
         for (let i = 0; i < maxLength; i++) {
             let item = listItem.cloneNode(true);
             const itemData = flattenData(data, i);
-            let reverse = false;
             switch (listRoot.localName) {
                 case 'picture': {
-                    reverse = true;
                     // Check for duplicate paths and skip if found
                     const pathValue = itemData.path;
                     if (pathValue != null && usedPaths.has(String(pathValue))) {

package/dist/utils.d.ts

@@ -3,6 +3,18 @@ import type { FieldDefinition, FrozenPattyData, FrozenPattyFlattenData, Primitiv
  * List of dangerous HTML elements to block for XSS protection
  */
 export declare const DANGEROUS_ELEMENTS: string[];
+/**
+ * `data-*-list` の子要素で、DOM 順と配列データの index が逆になる要素。
+ * `picture` は HTML 仕様上 `source` が先・`img` が最後だが、配列データでは
+ * `img` が index 0（元画像）に対応する。抽出（getComponent）と適用
+ * （setComponent）の両方でこの対応関係を共有する
+ */
+export declare const REVERSE_LIST_ELEMENTS: readonly string[];
+/**
+ * 要素が逆順リスト（{@link REVERSE_LIST_ELEMENTS}）かどうかを判定する
+ * @param el
+ */
+export declare function isReverseListElement(el: Element): boolean;
 /**
  *
  * @param kvs

package/dist/utils.js

@@ -13,6 +13,20 @@ export const DANGEROUS_ELEMENTS = [
     'frameset',
     'applet',
 ];
+/**
+ * `data-*-list` の子要素で、DOM 順と配列データの index が逆になる要素。
+ * `picture` は HTML 仕様上 `source` が先・`img` が最後だが、配列データでは
+ * `img` が index 0（元画像）に対応する。抽出（getComponent）と適用
+ * （setComponent）の両方でこの対応関係を共有する
+ */
+export const REVERSE_LIST_ELEMENTS = ['picture'];
+/**
+ * 要素が逆順リスト（{@link REVERSE_LIST_ELEMENTS}）かどうかを判定する
+ * @param el
+ */
+export function isReverseListElement(el) {
+    return REVERSE_LIST_ELEMENTS.includes(el.localName);
+}
 /**
  *
  * @param kvs

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@burger-editor/frozen-patty",
-	"version": "4.0.0-alpha.72",
+	"version": "4.0.0-alpha.74",
 	"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.72"
+		"@burger-editor/utils": "4.0.0-alpha.74"
 	},
-	"gitHead": "091b61b028704219fc058374f4b0004ce8e2c091"
+	"gitHead": "348dfe93cb5aca7fce0628d37d25e9046684845e"
 }