@burger-editor/frozen-patty 4.0.0-alpha.2 → 4.0.0-alpha.22

package/dist/get-component.js

@@ -0,0 +1,29 @@
+import { getValues } from './get-values.js';
+import { arrayToHash } from './utils.js';
+const reverseListElementSelectors = ['picture'];
+/**
+ *
+ * @param el
+ * @param attr
+ * @param typeConvert
+ * @param filter
+ */
+export function getComponent(el, attr, typeConvert, filter) {
+    el = el.cloneNode(true);
+    const reverseListElements = el.querySelectorAll(`:is(${reverseListElementSelectors.join(',')})[data-${attr}-list]`);
+    for (const reverseListElement of reverseListElements) {
+        const children = [];
+        while (reverseListElement.lastElementChild) {
+            children.push(reverseListElement.lastElementChild);
+            reverseListElement.lastElementChild.remove();
+        }
+        reverseListElement.append(...children);
+    }
+    const filedElements = 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/get-values.js

@@ -1,5 +1,5 @@
-import { fieldNameParser } from './field-name-parser.js';
-import { kebabCase } from './utils.js';
+import { kebabCase } from '@burger-editor/utils';
+import { parseFields } from './parse-fields.js';
 /**
  * Get value from an element
  * @param el A target element
@@ -9,16 +9,16 @@ import { kebabCase } from './utils.js';
  */
 export function getValues(el, convertType = false, attr = 'field', filter) {
     const result = [];
-    const rawValue = el.getAttribute(`data-${attr}`);
-    const listRoot = el.closest(`[data-${attr}-list]`);
-    const forceArray = !!listRoot;
-    if (rawValue == null) {
+    const query = el.getAttribute(`data-${attr}`);
+    if (query == null) {
         throw new Error(`data-${attr} attriblute is empty.`);
     }
-    const fieldList = rawValue.split(/\s*,\s*/);
-    for (const field of fieldList) {
+    const listRoot = el.closest(`[data-${attr}-list]`);
+    const forceArray = !!listRoot;
+    const fields = parseFields(query);
+    for (const field of fields) {
         let value;
-        const { fieldName, propName } = fieldNameParser(field);
+        const { fieldName, propName } = field;
         if (propName) {
             switch (propName) {
                 case 'node': {
@@ -33,6 +33,12 @@ export function getValues(el, convertType = false, attr = 'field', filter) {
                     value = el.innerHTML.trim();
                     break;
                 }
+                case 'style': {
+                    if (el instanceof HTMLElement) {
+                        value = el.style.cssText;
+                    }
+                    break;
+                }
                 default: {
                     if (/^style\([a-z-]+\)$/i.test(propName)) {
                         const css = propName.replace(/^style\(([a-z-]+)\)$/i, '$1');
@@ -49,7 +55,7 @@ export function getValues(el, convertType = false, attr = 'field', filter) {
                         }
                         break;
                     }
-                    value = getAttribute(el, attr, propName, convertType);
+                    value = getAttribute(el, propName, attr, convertType);
                 }
             }
         }
@@ -77,11 +83,11 @@ export function getValues(el, convertType = false, attr = 'field', filter) {
 /**
  *
  * @param el
- * @param attr
  * @param keyAttr
+ * @param attr
  * @param typeConvert
  */
-function getAttribute(el, attr, keyAttr, typeConvert) {
+function getAttribute(el, keyAttr, attr, typeConvert) {
     switch (keyAttr) {
         case 'contenteditable': {
             if (el instanceof HTMLElement) {
@@ -102,25 +108,37 @@ function getAttribute(el, attr, keyAttr, typeConvert) {
             // So to get inactive it is necessary to use the "hasAttribute" method.
             return el.hasAttribute('download') ? el.getAttribute('download') : null;
         }
-        case 'href': {
-            // return (el as HTMLAnchorElement).href;
-            return el.getAttribute(keyAttr) ?? ''; // return plain string
+        case 'href':
+        case 'src': {
+            // Example: (el as HTMLAnchorElement).href;
+            // Expected: return defined value of plain string
+            return el.getAttribute(keyAttr) ?? '';
         }
-        default: {
-            let value;
-            const dataAttr = ['data', attr, kebabCase(keyAttr)].join('-');
-            if (el.hasAttribute(dataAttr)) {
-                value = el.getAttribute(dataAttr) || '';
-            }
-            else {
-                value = el.getAttribute(keyAttr) || '';
-            }
-            if (typeConvert) {
-                value = convert(value);
-            }
-            return value;
+    }
+    let value = 
+    // @ts-ignore
+    el[keyAttr];
+    if (value !== undefined) {
+        if (typeConvert) {
+            value = convert(value);
         }
+        return value;
     }
+    // For shorthand notation, get value from data-field-* attribute
+    const dataAttr = ['data', attr, kebabCase(keyAttr)].join('-');
+    if (el.hasAttribute(dataAttr)) {
+        return el.getAttribute(dataAttr) ?? '';
+    }
+    value = el.getAttribute(keyAttr) ?? null;
+    if ((value === '' || value == null) &&
+        typeof keyAttr === 'string' &&
+        keyAttr.startsWith('data-')) {
+        return '';
+    }
+    if (typeConvert) {
+        value = convert(value);
+    }
+    return value;
 }
 /**
  *
@@ -128,8 +146,9 @@ function getAttribute(el, attr, keyAttr, typeConvert) {
  */
 function convert(value) {
     value = parse(value);
-    if (URL.canParse(value)) {
-        const url = new URL(value, location.href);
+    const str = `${value}`;
+    if (URL.canParse(str)) {
+        const url = new URL(str, location.href);
         if (url.origin === location.origin) {
             return url.pathname;
         }
@@ -142,7 +161,7 @@ function convert(value) {
  */
 function parse(value) {
     try {
-        return JSON.parse(value);
+        return JSON.parse(`${value}`);
     }
     catch {
         return value;

package/dist/parse-fields.d.ts

@@ -0,0 +1,6 @@
+import type { FieldDefinition } from './types.js';
+/**
+ *
+ * @param query
+ */
+export declare function parseFields(query: string): readonly FieldDefinition[];

package/dist/parse-fields.js

@@ -0,0 +1,38 @@
+import { camelCase } from '@burger-editor/utils';
+const cache = new Map();
+/**
+ *
+ * @param query
+ */
+export function parseFields(query) {
+    const cached = cache.get(query);
+    if (cached) {
+        return cached;
+    }
+    const fields = query.split(',');
+    const result = fields.map(parseField);
+    cache.set(query, result);
+    return result;
+}
+/**
+ *
+ * @param field
+ */
+function parseField(field) {
+    field = field.trim().toLowerCase();
+    if (!field) {
+        throw new Error('Field name is empty.');
+    }
+    let [fieldName, propName, 
+    // eslint-disable-next-line prefer-const
+    ...rest] = field.split(':');
+    if (rest.length > 0) {
+        throw new Error('Invalid field format.');
+    }
+    propName = propName?.trim() || '';
+    fieldName = fieldName?.trim() || propName || field;
+    return {
+        fieldName: camelCase(fieldName),
+        propName,
+    };
+}

package/dist/set-component.d.ts

@@ -0,0 +1,10 @@
+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-component.js

@@ -0,0 +1,91 @@
+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';
+/**
+ *
+ * @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 = [
+            // Include self
+            el,
+            // Perform rough filtering for performance
+            ...el.querySelectorAll(`[data-${attr}*="${kebabCase(dataKeyName)}"]`),
+        ]
+            // Perform more accurate filtering
+            .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();
+        }
+        // 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);
+            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))) {
+                        continue;
+                    }
+                    if (pathValue != null) {
+                        usedPaths.add(String(pathValue));
+                    }
+                    let fields = getFields(item, attr);
+                    if (i === 0) {
+                        // Convert first item to img element
+                        item = replaceNode(item, 'img', attr, xssSanitize);
+                        fields = replaceProp(fields, 'srcset', 'src');
+                        fields = removeProp(fields, 'sizes');
+                        const fieldQuery = stringifyFields(fields);
+                        item.setAttribute(`data-${attr}`, fieldQuery);
+                    }
+                    else {
+                        // Convert subsequent items to source elements
+                        item = replaceNode(item, 'source', attr, xssSanitize);
+                        fields = replaceProp(fields, 'src', 'srcset');
+                        fields = removeProp(fields, 'alt');
+                        fields = removeProp(fields, 'loading');
+                        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-value.d.ts

@@ -10,12 +10,14 @@ import type { Filter, PrimitiveDatum } from './types.js';
  * @param datum A datum of value
  * @param attr Data attribute name for specifying the node that FrozenPatty treats as a field
  * @param filter
+ * @param xssSanitize Enable XSS protection
  */
-export declare function setValue(el: Element, name: string, datum: PrimitiveDatum, attr?: string, filter?: Filter): void;
+export declare function setValue(el: Element, name: string, datum: PrimitiveDatum, attr?: string, filter?: Filter, xssSanitize?: boolean): void;
 /**
  *
  * @param el
  * @param datum
  * @param asHtml
+ * @param xssSanitize
  */
-export declare function setContent(el: Element, datum: PrimitiveDatum, asHtml?: boolean): void;
+export declare function setContent(el: Element, datum: PrimitiveDatum, asHtml?: boolean, xssSanitize?: boolean): void;

package/dist/set-value.js

@@ -1,5 +1,6 @@
-import { fieldNameParser } from './field-name-parser.js';
-import { kebabCase } from './utils.js';
+import { kebabCase } from '@burger-editor/utils';
+import { parseFields } from './parse-fields.js';
+import { propInElement, replaceNode, sanitizeAttributeValue, sanitizeHtml, } from './utils.js';
 /**
  * Set value to an element
  *
@@ -11,58 +12,67 @@ import { kebabCase } from './utils.js';
  * @param datum A datum of value
  * @param attr Data attribute name for specifying the node that FrozenPatty treats as a field
  * @param filter
+ * @param xssSanitize Enable XSS protection
  */
-export function setValue(el, name, datum, attr = 'field', filter) {
+export function setValue(el, name, datum, attr = 'field', filter, xssSanitize = true) {
     const rawValue = el.getAttribute(`data-${attr}`);
-    const fieldList = rawValue?.split(/\s*,\s*/) ?? [];
-    for (const field of fieldList) {
-        const { fieldName, propName } = fieldNameParser(field);
-        if (name !== fieldName) {
-            continue;
-        }
-        if (filter) {
-            datum = filter(datum);
-        }
-        // console.log({ name, field, fieldName, propName, datum, el: el.innerHTML });
-        if (propName) {
-            if (/^style\([a-z-]+\)$/i.test(propName)) {
-                const cssPropertyName = propName.replace(/^style\(([a-z-]+)\)$/i, '$1');
-                let cssValue;
-                switch (cssPropertyName) {
-                    case 'background-image': {
-                        //
-                        // NGパターン
-                        // $changeDom.css(cssPropertyName, 'url("' + value + '")');
-                        //
-                        // cssメソッドを経由すると styleAPIを使用するので URLがホストを含めた絶対パスになる
-                        // デモサーバーから本番サーバーへの移行ができなくなってしまうので避ける
-                        // 単純な文字列を流し込む（setAttributeを利用）
-                        // urlはマルチバイト文字や空白記号を含まないはずであるがエスケープする
-                        const url = encodeURI(`${datum}`);
-                        cssValue = `url(${url})`;
-                        break;
-                    }
-                    //
-                    // TODO: 他にもvalueに単位が必要なケースなどに対応したい
-                    //
-                    default: {
-                        cssValue = `${datum}`;
-                    }
-                }
-                el.setAttribute('style', `${cssPropertyName}: ${cssValue}`);
-            }
-            else if (el instanceof HTMLElement) {
-                // HTMLElement
-                set(el, attr, propName, datum);
+    const fields = parseFields(rawValue ?? '');
+    const field = fields.find((field) => field.fieldName === name);
+    if (!field) {
+        return;
+    }
+    const { propName } = field;
+    if (filter) {
+        datum = filter(datum);
+    }
+    // console.log({ name, field, fieldName, propName, datum, el: el.innerHTML });
+    if (!propName) {
+        setContent(el, datum, undefined, xssSanitize);
+        return;
+    }
+    if (propName === 'style' && el instanceof HTMLElement) {
+        el.style.cssText = `${datum}`;
+        return;
+    }
+    if (/^style\([a-z-]+\)$/i.test(propName)) {
+        const cssPropertyName = propName.replace(/^style\(([a-z-]+)\)$/i, '$1');
+        let cssValue;
+        switch (cssPropertyName) {
+            case 'background-image': {
+                // Using CSS method would create absolute URLs with host
+                // This would prevent migration from demo to production server
+                // Using simple string insertion (setAttribute) instead
+                // URL may not contain multibyte or whitespace characters, but escape anyway
+                const url = encodeURI(`${datum}`);
+                cssValue = `url(${url})`;
+                break;
             }
-            else {
-                // SVGElement or more
-                el.setAttribute(propName, `${datum}`);
+            //
+            // TODO: Handle other cases where values need units
+            //
+            default: {
+                cssValue = `${datum}`;
             }
-            return;
         }
-        setContent(el, datum);
+        el.setAttribute('style', `${cssPropertyName}: ${cssValue}`);
+        return;
+    }
+    if (el instanceof HTMLElement) {
+        // HTMLElement
+        set(el, attr, propName, datum, xssSanitize);
+        return;
+    }
+    // SVGElement or more
+    // ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
+    // Check attribute value if XSS protection is enabled
+    if (xssSanitize) {
+        const safeValue = sanitizeAttributeValue(propName, `${datum}`);
+        if (safeValue !== null) {
+            el.setAttribute(propName, safeValue);
+        }
+        return;
     }
+    el.setAttribute(propName, `${datum}`);
 }
 /**
  *
@@ -70,41 +80,48 @@ export function setValue(el, name, datum, attr = 'field', filter) {
  * @param prefix
  * @param name
  * @param datum
+ * @param xssSanitize
  */
-function set(el, prefix, name, datum) {
+function set(el, prefix, name, datum, xssSanitize = true) {
     if (datum == null) {
         el.removeAttribute(name);
         return;
     }
     switch (name) {
         case 'text': {
-            setContent(el, datum, false);
+            setContent(el, datum, false, xssSanitize);
             return;
         }
         case 'html': {
-            setContent(el, datum, true);
+            setContent(el, datum, true, xssSanitize);
             return;
         }
         case 'node': {
             if (typeof datum !== 'string') {
                 return;
             }
-            const nodeName = el.localName ?? el.nodeName.toLowerCase();
-            if (nodeName === datum.toLowerCase()) {
-                return;
-            }
-            const node = (el.ownerDocument ?? document).createElement(`${datum}`);
-            for (const child of el.childNodes) {
-                node.append(child.cloneNode(true));
-            }
-            for (const { name, value } of el.attributes) {
-                node.setAttribute(name, value);
-            }
-            el.replaceWith(node);
+            replaceNode(el, datum, prefix, xssSanitize);
             return;
         }
     }
-    if (!name.startsWith('data-') && !(name in el)) {
+    // If XSS protection is enabled
+    if (xssSanitize) {
+        // Don't set event handler attributes (starting with 'on')
+        if (name.toLowerCase().startsWith('on')) {
+            return;
+        }
+        const beforeSanitize = datum;
+        datum = sanitizeAttributeValue(name, datum);
+        // If sanitization results in null value (except when original value was null), don't change the value
+        if (datum === null && beforeSanitize !== null) {
+            return;
+        }
+    }
+    if (datum == null) {
+        el.removeAttribute(name);
+        return;
+    }
+    if (!name.startsWith('data-') && !propInElement(el, name)) {
         const dataAttr = `data-${prefix}-${kebabCase(name)}`;
         if (el.hasAttribute(dataAttr)) {
             el.setAttribute(dataAttr, `${datum}`);
@@ -676,28 +693,54 @@ function set(el, prefix, name, datum) {
  * @param el
  * @param datum
  * @param asHtml
+ * @param xssSanitize
  */
-export function setContent(el, datum, asHtml = true) {
+export function setContent(el, datum, asHtml = true, xssSanitize = true) {
     if (el instanceof HTMLInputElement ||
         el instanceof HTMLSelectElement ||
         el instanceof HTMLTextAreaElement ||
         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}`;
         return;
     }
     if (asHtml) {
-        el.innerHTML = datum == null ? '' : `${datum}`;
+        // Sanitize HTML if XSS protection is enabled
+        const htmlStr = datum == null ? '' : `${datum}`;
+        if (xssSanitize && typeof htmlStr === 'string') {
+            // sanitizeHtml will now replace dangerous elements instead of removing them
+            el.innerHTML = sanitizeHtml(htmlStr);
+        }
+        else {
+            el.innerHTML = htmlStr;
+        }
         return;
     }
+    // No need to sanitize textContent (automatically escaped)
     el.textContent = datum == null ? '' : `${datum}`;
 }
 /**

package/dist/stringify-fields.d.ts

@@ -0,0 +1,14 @@
+import type { FieldDefinition } from './types.js';
+/**
+ * Combines multiple field definitions with comma separation
+ * @param fields Array of field definitions
+ * @returns Comma-separated field definition string
+ */
+export declare function stringifyFields(fields: readonly FieldDefinition[]): string;
+/**
+ * Generates a field definition string from field name and attribute name
+ * @param fieldName Field name
+ * @param propName Attribute name (optional)
+ * @returns Field definition string
+ */
+export declare function stringifyField(fieldName: string, propName?: string): string;

package/dist/stringify-fields.js

@@ -0,0 +1,26 @@
+/**
+ * Combines multiple field definitions with comma separation
+ * @param fields Array of field definitions
+ * @returns Comma-separated field definition string
+ */
+export function stringifyFields(fields) {
+    return fields
+        .map((field) => stringifyField(field.fieldName, field.propName))
+        .join(', ');
+}
+/**
+ * Generates a field definition string from field name and attribute name
+ * @param fieldName Field name
+ * @param propName Attribute name (optional)
+ * @returns Field definition string
+ */
+export function stringifyField(fieldName, propName) {
+    if (!propName) {
+        return fieldName;
+    }
+    // Use shorthand notation when fieldName and propName are the same
+    if (fieldName === propName) {
+        return `:${propName}`;
+    }
+    return `${fieldName}:${propName}`;
+}

package/dist/types.d.ts

@@ -1,6 +1,13 @@
 export interface FrozenPattyData {
     [filed: string]: PrimitiveData;
 }
+export interface FrozenPattyFlattenData {
+    [field: string]: PrimitiveDatum;
+}
+export interface FieldDefinition {
+    fieldName: string;
+    propName?: string;
+}
 export type PrimitiveDatum = string | number | boolean | null | undefined;
 export type PrimitiveData = PrimitiveDatum | PrimitiveDatum[];
 export type Filter = <T>(value: T) => T;