@burger-editor/frozen-patty 4.0.0-alpha.6 → 4.0.0-alpha.61

package/README.md

@@ -218,7 +218,6 @@ data-field="フィールド名1:属性名1, フィールド名2:属性名2"
 このHTMLから抽出する際に、以下の特別な考慮がされます：
 
 1. 配列データの順序：
-
    - HTML内の`picture`要素では一般的に`source`要素が先に配置され、`img`要素が最後に配置されます
    - 抽出されるデータの配列では逆順になり、img要素のデータが先、source要素のデータが後
 
@@ -311,12 +310,10 @@ const data = {
 適用時には以下の特別処理が行われます：
 
 1. 要素の配置と変換：
-
    - 配列の最初の要素（インデックス0）は`img`要素に変換され、DOMでは最後に配置されます
    - 配列の2番目以降の要素は`source`要素に変換され、配列の逆順にDOMに挿入されます（配列の末尾から先頭方向に）
 
 2. 属性の自動変換：
-
    - `img`要素：`srcset`属性は`src`属性に変換され、`sizes`属性は削除されます
    - `source`要素：`src`属性は`srcset`属性に変換され、`alt`属性と`loading`属性は削除されます
    - `data-field`属性のシンタックスは、それぞれの要素に対応する属性名に再設定されます
@@ -480,7 +477,6 @@ fpUnsafe.merge(data).toHTML();
 以下のセキュリティ対策が実装されています：
 
 1. 危険な要素の削除：
-
    - `script`, `style`, `template`, `object`, `embed`, `iframe`, `frame`, `frameset`, `applet`
 
 2. 危険な属性の削除：

package/dist/get-values.js

@@ -1,4 +1,5 @@
 import { kebabCase } from '@burger-editor/utils';
+import { normalizeIndent } from './normalize-indent.js';
 import { parseFields } from './parse-fields.js';
 /**
  * Get value from an element
@@ -30,7 +31,7 @@ export function getValues(el, convertType = false, attr = 'field', filter) {
                     break;
                 }
                 case 'html': {
-                    value = el.innerHTML.trim();
+                    value = normalizeIndent(el.innerHTML);
                     break;
                 }
                 case 'style': {
@@ -67,7 +68,7 @@ export function getValues(el, convertType = false, attr = 'field', filter) {
                 value = convertType ? convert(val) : val;
             }
             else {
-                value = el.innerHTML.trim();
+                value = normalizeIndent(el.innerHTML);
             }
         }
         if (filter) {
@@ -127,7 +128,8 @@ function getAttribute(el, keyAttr, attr, typeConvert) {
     // For shorthand notation, get value from data-field-* attribute
     const dataAttr = ['data', attr, kebabCase(keyAttr)].join('-');
     if (el.hasAttribute(dataAttr)) {
-        return el.getAttribute(dataAttr) ?? '';
+        const value = el.getAttribute(dataAttr);
+        return typeConvert ? convert(value) : value;
     }
     value = el.getAttribute(keyAttr) ?? null;
     if ((value === '' || value == null) &&

package/dist/normalize-indent.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Normalizes the indentation of a multi-line HTML string by detecting the indentation
+ * of the first line and removing the same amount of leading whitespace (spaces or tabs)
+ * from all lines.
+ *
+ * - The function first removes any leading empty lines (lines containing only line breaks).
+ * - It then detects the leading whitespace (indent) from the first line.
+ * - For each line, if that indent is present at the start of the line, it is removed.
+ * - After normalization, any trailing empty lines (containing only whitespace or line breaks)
+ * are also removed.
+ * - Supports both LF (\n) and CRLF (\r\n) line endings.
+ *
+ * This is useful when copying and pasting or serializing innerHTML that includes
+ * indentation due to template formatting, so the returned HTML has normalized,
+ * consistent indentation and no unwanted leading/trailing blank lines.
+ * @param html - The multi-line HTML string to normalize.
+ * @returns The HTML string with normalized indentation and no leading/trailing empty lines.
+ */
+export declare function normalizeIndent(html: string): string;

package/dist/normalize-indent.js

@@ -0,0 +1,29 @@
+/**
+ * Normalizes the indentation of a multi-line HTML string by detecting the indentation
+ * of the first line and removing the same amount of leading whitespace (spaces or tabs)
+ * from all lines.
+ *
+ * - The function first removes any leading empty lines (lines containing only line breaks).
+ * - It then detects the leading whitespace (indent) from the first line.
+ * - For each line, if that indent is present at the start of the line, it is removed.
+ * - After normalization, any trailing empty lines (containing only whitespace or line breaks)
+ * are also removed.
+ * - Supports both LF (\n) and CRLF (\r\n) line endings.
+ *
+ * This is useful when copying and pasting or serializing innerHTML that includes
+ * indentation due to template formatting, so the returned HTML has normalized,
+ * consistent indentation and no unwanted leading/trailing blank lines.
+ * @param html - The multi-line HTML string to normalize.
+ * @returns The HTML string with normalized indentation and no leading/trailing empty lines.
+ */
+export function normalizeIndent(html) {
+    // Remove leading line breaks
+    const trimmedHtml = html.replace(/^(?:\r?\n)+/, '');
+    const lines = trimmedHtml.split(/(?<=\r\n|\n|$)/);
+    const firstLineIndent = lines[0]?.match(/^\s+/)?.[0] ?? '';
+    if (firstLineIndent.length === 0) {
+        return trimmedHtml.trimEnd();
+    }
+    const normalizedLines = lines.map((line) => line.replace(firstLineIndent, ''));
+    return normalizedLines.join('').trimEnd();
+}

package/dist/set-component.js

@@ -40,6 +40,8 @@ export function setComponent(el, data, attr, filter, xssSanitize = true) {
         while (listRoot.firstChild) {
             listRoot.firstChild.remove();
         }
+        // Track used paths for picture elements to avoid duplicates
+        const usedPaths = new Set();
         for (let i = 0; i < maxLength; i++) {
             let item = listItem.cloneNode(true);
             const itemData = flattenData(data, i);
@@ -47,6 +49,14 @@ export function setComponent(el, data, attr, filter, xssSanitize = true) {
             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))) {
+                        continue;
+                    }
+                    if (pathValue != null) {
+                        usedPaths.add(String(pathValue));
+                    }
                     let fields = getFields(item, attr);
                     if (i === 0) {
                         // Convert first item to img element

package/dist/set-value.js

@@ -121,6 +121,11 @@ function set(el, prefix, name, datum, xssSanitize = true) {
         el.removeAttribute(name);
         return;
     }
+    // Custom elements
+    if (el.localName.includes('-')) {
+        el.setAttribute(name, `${datum}`);
+        return;
+    }
     if (!name.startsWith('data-') && !propInElement(el, name)) {
         const dataAttr = `data-${prefix}-${kebabCase(name)}`;
         if (el.hasAttribute(dataAttr)) {
@@ -702,11 +707,27 @@ export function setContent(el, datum, asHtml = true, xssSanitize = true) {
         el instanceof HTMLOutputElement) {
         if (el instanceof HTMLInputElement &&
             (el.type === 'radio' || el.type === 'checkbox')) {
+            // Boolean values are always set directly regardless of value attribute
             if (typeof datum === 'boolean') {
                 el.checked = datum;
                 return;
             }
-            el.checked = el.value === `${datum}`;
+            // Checkbox/radio with value attribute: traditional value comparison
+            if (el.hasAttribute('value')) {
+                el.checked = el.value === `${datum}`;
+                return;
+            }
+            // Checkbox without value attribute: switch-like behavior (string boolean processing)
+            if (datum === 'true') {
+                el.checked = true;
+                return;
+            }
+            if (datum === 'false') {
+                el.checked = false;
+                return;
+            }
+            // Other values default to false
+            el.checked = false;
             return;
         }
         el.value = `${datum}`;

package/dist/utils.js

@@ -96,22 +96,30 @@ export function sanitizeHtml(html) {
         sanitized = sanitized.replace(regex, '$1');
     }
     // Parse HTML safely using DOM parser for remaining sanitization
-    const doc = new DOMParser().parseFromString(sanitized, 'text/html');
-    const body = doc.body;
+    const fragment = new Range().createContextualFragment(sanitized);
     // Remove event handler attributes from all elements
-    sanitizeElementAndChildren(body);
-    return body.innerHTML;
+    sanitizeElementAndChildren(fragment);
+    const newHtml = [...fragment.childNodes]
+        .map((node) => {
+        if (node instanceof Element) {
+            return node.outerHTML;
+        }
+        return node.textContent ?? node.nodeValue ?? '';
+    })
+        .join('');
+    return newHtml;
 }
 /**
  * Sanitizes an element and all its child elements
- * @param element Target element
+ * @param node Target element
  */
-function sanitizeElementAndChildren(element) {
-    // Remove dangerous attributes from current element
-    sanitizeAttributes(element);
+function sanitizeElementAndChildren(node) {
+    if (node instanceof Element) {
+        // Remove dangerous attributes from current element
+        sanitizeAttributes(node);
+    }
     // Process child elements recursively
-    const children = element.children;
-    for (const child of children) {
+    for (const child of node.childNodes) {
         sanitizeElementAndChildren(child);
     }
 }

package/package.json

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

package/dist/field-name-parser.d.ts

@@ -1,8 +0,0 @@
-/**
- *
- * @param field
- */
-export declare function fieldNameParser(field: string): {
-    fieldName: string;
-    propName: string;
-};

package/dist/field-name-parser.js

@@ -1,18 +0,0 @@
-import { camelCase } from './utils.js';
-/**
- *
- * @param field
- */
-export function fieldNameParser(field) {
-    field = field.trim().toLowerCase();
-    if (!field) {
-        throw new Error('Field name is empty.');
-    }
-    let [fieldName, propName] = field.split(':');
-    propName = propName?.trim() || '';
-    fieldName = fieldName?.trim() || propName || field;
-    return {
-        fieldName: camelCase(fieldName),
-        propName,
-    };
-}

package/dist/field-name-stringifier.d.ts

@@ -1,14 +0,0 @@
-import type { FieldDefinition } from './types.js';
-/**
- * フィールド名と属性名からフィールド定義文字列を生成します
- * @param fieldName フィールド名
- * @param propName 属性名（オプション）
- * @returns フィールド定義文字列
- */
-export declare function fieldNameStringify(fieldName: string, propName?: string): string;
-/**
- * 複数のフィールド定義をカンマ区切りで結合します
- * @param fields フィールド定義の配列
- * @returns カンマ区切りのフィールド定義文字列
- */
-export declare function fieldsStringify(fields: readonly FieldDefinition[]): string;

package/dist/field-name-stringifier.js

@@ -1,26 +0,0 @@
-/**
- * フィールド名と属性名からフィールド定義文字列を生成します
- * @param fieldName フィールド名
- * @param propName 属性名（オプション）
- * @returns フィールド定義文字列
- */
-export function fieldNameStringify(fieldName, propName) {
-    if (!propName) {
-        return fieldName;
-    }
-    // fieldNameとpropNameが同じ場合は省略記法を使用
-    if (fieldName === propName) {
-        return `:${propName}`;
-    }
-    return `${fieldName}:${propName}`;
-}
-/**
- * 複数のフィールド定義をカンマ区切りで結合します
- * @param fields フィールド定義の配列
- * @returns カンマ区切りのフィールド定義文字列
- */
-export function fieldsStringify(fields) {
-    return fields
-        .map((field) => fieldNameStringify(field.fieldName, field.propName))
-        .join(', ');
-}

package/dist/get.d.ts

@@ -1,9 +0,0 @@
-import type { Filter, FrozenPattyData } from './types.js';
-/**
- *
- * @param el
- * @param attr
- * @param typeConvert
- * @param filter
- */
-export default function (el: Element, attr: string, typeConvert: boolean, filter?: Filter): FrozenPattyData;

package/dist/get.js

@@ -1,19 +0,0 @@
-import { getValues } from './get-values.js';
-import { arrayToHash } from './utils.js';
-/**
- *
- * @param el
- * @param attr
- * @param typeConvert
- * @param filter
- */
-export default function (el, attr, typeConvert, filter) {
-    // eslint-disable-next-line unicorn/prefer-spread
-    const filedElements = Array.from(el.querySelectorAll(`[data-${attr}]`));
-    let values = [];
-    for (const _el of filedElements) {
-        values = [...values, ...getValues(_el, typeConvert, attr, filter)];
-    }
-    const result = arrayToHash(values);
-    return result;
-}

package/dist/handle-picture-element.d.ts

@@ -1,6 +0,0 @@
-/**
- * picture要素の特別な処理を行います
- * @param pictureElement picture要素
- * @param attr
- */
-export declare function handlePictureElement(pictureElement: HTMLPictureElement, attr: string): void;

package/dist/handle-picture-element.js

@@ -1,31 +0,0 @@
-import { parseFields } from './parse-fields.js';
-import { setValue } from './set-value.js';
-/**
- * picture要素の特別な処理を行います
- * @param pictureElement picture要素
- * @param attr
- */
-export function handlePictureElement(pictureElement, attr) {
-    const children = [...pictureElement.children];
-    const fieldAttrName = `data-${attr}`;
-    for (const [i, child] of children.entries()) {
-        const fields = parseFields(child.getAttribute(fieldAttrName) ?? '');
-        const newChild = child.cloneNode(false);
-        child.remove();
-        if (i > 0) {
-            setValue(newChild, 'node', 'source', attr);
-        }
-        switch (newChild.localName) {
-            case 'source': {
-                // newChild.removeAttribute('alt');
-                // setValue(newChild, name, attr.value);
-                break;
-            }
-            case 'img': {
-                //
-                break;
-            }
-        }
-        pictureElement.insertBefore(newChild, pictureElement.firstChild);
-    }
-}

package/dist/set-comonent.d.ts

@@ -1,10 +0,0 @@
-import type { Filter, FrozenPattyData } from './types.js';
-/**
- *
- * @param el
- * @param data
- * @param attr
- * @param filter
- * @param xssSanitize Enable XSS protection
- */
-export declare function setComponent(el: Element, data: FrozenPattyData, attr: string, filter?: Filter, xssSanitize?: boolean): Element;

package/dist/set-comonent.js

@@ -1,71 +0,0 @@
-import { setValue } from './set-value.js';
-import { stringifyFields } from './stringify-fields.js';
-import { definedFields, flattenData, getFields, hasField, kebabCase, maxLengthOf, removeProp, replaceNode, replaceProp, } from './utils.js';
-/**
- *
- * @param el
- * @param data
- * @param attr
- * @param filter
- * @param xssSanitize Enable XSS protection
- */
-export function setComponent(el, data, attr, filter, xssSanitize = true) {
-    el = el.cloneNode(true);
-    for (const dataKeyName in data) {
-        const datum = data[dataKeyName];
-        if (Array.isArray(datum)) {
-            continue;
-        }
-        const targetList = [
-            // 自身を含める
-            el,
-            // パフォーマンスのために雑なフィルタリングを行う
-            ...el.querySelectorAll(`[data-${attr}*="${kebabCase(dataKeyName)}"]`),
-        ]
-            // より正確なフィルタリングを行う
-            .filter((el) => hasField(el, attr, dataKeyName));
-        for (const targetEl of targetList) {
-            setValue(targetEl, dataKeyName, datum, attr, filter, xssSanitize);
-        }
-    }
-    for (const listRoot of el.querySelectorAll(`[data-${attr}-list]`)) {
-        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);
-        if (!listItem) {
-            continue;
-        }
-        while (listRoot.firstChild) {
-            listRoot.firstChild.remove();
-        }
-        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;
-                    if (i > 0) {
-                        // 2つ目以降はsource要素に変換
-                        let fields = getFields(item, attr);
-                        item = replaceNode(item, 'source', attr, xssSanitize);
-                        fields = replaceProp(fields, 'src', 'srcset');
-                        fields = removeProp(fields, 'alt');
-                        const fieldQuery = stringifyFields(fields);
-                        item.setAttribute(`data-${attr}`, fieldQuery);
-                    }
-                    break;
-                }
-            }
-            const newEl = setComponent(item, itemData, attr, filter, xssSanitize);
-            if (reverse) {
-                listRoot.prepend(newEl);
-            }
-            else {
-                listRoot.append(newEl);
-            }
-        }
-    }
-    return el;
-}

package/dist/set.d.ts

@@ -1,9 +0,0 @@
-import type { Filter, FrozenPattyData } from './types.js';
-/**
- *
- * @param el
- * @param data
- * @param attr
- * @param filter
- */
-export default function (el: Element, data: FrozenPattyData, attr: string, filter?: Filter): Element;

package/dist/set.js

@@ -1,60 +0,0 @@
-import { setValue } from './set-value.js';
-import { kebabCase } from './utils.js';
-/**
- *
- * @param el
- * @param data
- * @param attr
- * @param filter
- */
-export default function (el, data, attr, filter) {
-    el = el.cloneNode(true);
-    for (const dataKeyName in data) {
-        if (dataKeyName in data) {
-            const datum = data[dataKeyName];
-            const selector = `[data-${attr}*="${kebabCase(dataKeyName)}"]`;
-            // eslint-disable-next-line unicorn/prefer-spread
-            const targetList = Array.from(el.querySelectorAll(selector));
-            if (Array.isArray(datum)) {
-                const targetEl = targetList[0];
-                if (!targetEl) {
-                    continue;
-                }
-                const listRoot = targetEl.closest(`[data-${attr}-list]`);
-                if (!listRoot || (listRoot && listRoot.children.length === 0)) {
-                    continue;
-                }
-                const listItem = listRoot.children[0]?.cloneNode(true);
-                while (listItem && datum.length > listRoot.children.length) {
-                    listRoot.append(listItem.cloneNode(true));
-                }
-                // eslint-disable-next-line unicorn/prefer-spread
-                const newChildren = Array.from(listRoot.querySelectorAll(selector));
-                // eslint-disable-next-line unicorn/prefer-spread
-                const oldChildList = Array.from(listRoot.children);
-                let deleteNodeList = [];
-                for (const [i, child] of [...newChildren].entries()) {
-                    if (datum[i] == null) {
-                        setValue(child, dataKeyName, '', attr, filter);
-                        const oldChild = oldChildList[i];
-                        if (oldChild) {
-                            deleteNodeList.push(oldChild);
-                        }
-                    }
-                    else {
-                        setValue(child, dataKeyName, datum[i], attr, filter);
-                        deleteNodeList = [];
-                    }
-                }
-                for (const node of deleteNodeList)
-                    node.remove();
-            }
-            else {
-                for (const [, targetEl] of [...targetList].entries()) {
-                    setValue(targetEl, dataKeyName, datum, attr, filter);
-                }
-            }
-        }
-    }
-    return el;
-}