@burger-editor/frozen-patty 0.11.0 → 4.0.0-alpha.10

package/dist/field-name-stringifier.js

@@ -0,0 +1,26 @@
+/**
+ * フィールド名と属性名からフィールド定義文字列を生成します
+ * @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/frozen-patty.d.ts

@@ -15,7 +15,6 @@ export default class FrozenPatty {
 export interface FrozenPattyOptions {
     /**
      * **Data attribute** name for specifying the node that FrozenPatty treats as a _field_
-     *
      * @default `"field"`
      */
     attr?: string;
@@ -28,7 +27,6 @@ export interface FrozenPattyOptions {
      * - `"1"` => `1`
      * - `"1.0"` => `1`
      * - `"0.1"` => `0.1`
-     *
      * @default `false`
      */
     typeConvert?: boolean;
@@ -36,4 +34,11 @@ export interface FrozenPattyOptions {
      * Value filter
      */
     valueFilter?: Filter;
+    /**
+     * Enable XSS protection
+     * - When enabled, removes potentially malicious code that may be contained in HTML
+     * - Prevents script elements, dangerous event handler attributes, javascript protocol, etc.
+     * @default `true`
+     */
+    xssSanitize?: boolean;
 }

package/dist/frozen-patty.js

@@ -1,5 +1,6 @@
-import get from './get.js';
-import set from './set.js';
+import { getComponent } from './get-component.js';
+import { setComponent } from './set-component.js';
+import { sanitizeHtml } from './utils.js';
 export default class FrozenPatty {
     #attr = 'field';
     #dom;
@@ -8,6 +9,10 @@ export default class FrozenPatty {
      */
     #filter;
     #typeConvert = false;
+    /**
+     * Enable XSS protection
+     */
+    #xssSanitize = true;
     /**
      *
      * @param html Original HTML
@@ -15,7 +20,14 @@ export default class FrozenPatty {
      */
     constructor(html, options) {
         this.#dom = document.createElement('fp-placeholer');
-        this.#dom.innerHTML = html;
+        // Sanitize initial HTML if XSS protection is enabled
+        if (options?.xssSanitize === false) {
+            this.#dom.innerHTML = html;
+            this.#xssSanitize = false;
+        }
+        else {
+            this.#dom.innerHTML = sanitizeHtml(html);
+        }
         if (options) {
             if (options.attr) {
                 this.#attr = options.attr;
@@ -27,7 +39,8 @@ export default class FrozenPatty {
     merge(data) {
         const currentData = this.toJSON(false);
         const newData = Object.assign(currentData, data);
-        this.#dom = set(this.#dom, newData, this.#attr, this.#filter);
+        // Pass XSS protection flag to set (default is true if not set)
+        this.#dom = setComponent(this.#dom, newData, this.#attr, this.#filter, this.#xssSanitize);
         return this;
     }
     toDOM() {
@@ -38,6 +51,6 @@ export default class FrozenPatty {
     }
     toJSON(filtering = true) {
         const filter = filtering ? this.#filter : undefined;
-        return get(this.#dom, this.#attr, this.#typeConvert, filter);
+        return getComponent(this.#dom, this.#attr, this.#typeConvert, filter);
     }
 }

package/dist/get-component.d.ts

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

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-value.d.ts

@@ -1,10 +1,10 @@
 import type { Filter, PrimitiveDatum } from './types.js';
 /**
  * Get value from an element
- *
  * @param el A target element
  * @param name A label name
  * @param typeConvert Auto covert type of value
  * @param attr Data attribute name for specifying the node that FrozenPatty treats as a field
+ * @param filter
  */
 export declare function getValue(el: Element, name: string, typeConvert?: boolean, attr?: string, filter?: Filter): PrimitiveDatum | PrimitiveDatum[];

package/dist/get-value.js

@@ -2,11 +2,11 @@ import { getValues } from './get-values.js';
 import { arrayToHash } from './utils.js';
 /**
  * Get value from an element
- *
  * @param el A target element
  * @param name A label name
  * @param typeConvert Auto covert type of value
  * @param attr Data attribute name for specifying the node that FrozenPatty treats as a field
+ * @param filter
  */
 export function getValue(el, name, typeConvert = false, attr = 'field', filter) {
     const value = getValues(el, typeConvert, attr, filter);

package/dist/get-values.d.ts

@@ -1,10 +1,9 @@
 import type { Filter, PrimitiveDatum } from './types.js';
 /**
  * Get value from an element
- *
  * @param el A target element
- * @param name A label name
- * @param typeConvert Auto covert type of value
+ * @param convertType Auto covert type of value
  * @param attr Data attribute name for specifying the node that FrozenPatty treats as a field
+ * @param filter
  */
-export declare function getValues(el: Element, typeConvert?: boolean, attr?: string, filter?: Filter): [string | number, PrimitiveDatum, boolean][];
+export declare function getValues(el: Element, convertType?: boolean, attr?: string, filter?: Filter): [key: string | number, value: PrimitiveDatum, forceArray: boolean][];

package/dist/get-values.js

@@ -1,81 +1,93 @@
+import { kebabCase } from '@burger-editor/utils';
+import { parseFields } from './parse-fields.js';
 /**
  * Get value from an element
- *
  * @param el A target element
- * @param name A label name
- * @param typeConvert Auto covert type of value
+ * @param convertType Auto covert type of value
  * @param attr Data attribute name for specifying the node that FrozenPatty treats as a field
+ * @param filter
  */
-export function getValues(el, typeConvert = false, attr = 'field', filter) {
-    /**
-     * [key, value, forceArray]
-     */
+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*/);
-    // console.log({fieldList, el: el.innerHTML});
-    for (let fieldName of fieldList) {
-        let splitKey;
-        let keyAttr = '';
+    const listRoot = el.closest(`[data-${attr}-list]`);
+    const forceArray = !!listRoot;
+    const fields = parseFields(query);
+    for (const field of fields) {
         let value;
-        fieldName = fieldName.trim();
-        if (/^[_a-z-][\w-]*:[_a-z-][\w-]*(?:\([a-z-]+\))?/i.test(fieldName)) {
-            splitKey = fieldName.split(':');
-            fieldName = splitKey[0]?.trim() ?? '';
-            keyAttr = splitKey[1]?.trim() ?? '';
-        }
-        // console.log({fieldName, keyAttr, el: el.innerHTML});
-        if (keyAttr === 'text') {
-            value = el.innerHTML;
-        }
-        else if (/^style\([a-z-]+\)$/i.test(keyAttr)) {
-            const css = keyAttr.replace(/^style\(([a-z-]+)\)$/i, '$1');
-            let style;
-            if (el instanceof HTMLElement) {
-                style = el.style;
-            }
-            else {
-                style = window.getComputedStyle(el);
-            }
-            value = style.getPropertyValue(css);
-            if (css === 'background-image') {
-                value = getBackgroundImagePath(value);
+        const { fieldName, propName } = field;
+        if (propName) {
+            switch (propName) {
+                case 'node': {
+                    value = el.localName ?? el.nodeName.toLowerCase();
+                    break;
+                }
+                case 'text': {
+                    value = el.textContent?.trim() ?? '';
+                    break;
+                }
+                case 'html': {
+                    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');
+                        let style;
+                        if (el instanceof HTMLElement) {
+                            style = el.style;
+                        }
+                        else {
+                            style = window.getComputedStyle(el);
+                        }
+                        value = style.getPropertyValue(css);
+                        if (css === 'background-image') {
+                            value = getBackgroundImagePath(value);
+                        }
+                        break;
+                    }
+                    value = getAttribute(el, propName, attr, convertType);
+                }
             }
         }
-        else if (keyAttr) {
-            value = getAttribute(el, keyAttr, typeConvert);
-        }
         else {
             if (el instanceof HTMLInputElement ||
                 el instanceof HTMLSelectElement ||
                 el instanceof HTMLTextAreaElement) {
                 const val = el.value;
-                if (Array.isArray(val)) {
-                    value = cast(val[0]);
-                }
-                else {
-                    value = cast(val);
-                }
+                value = convertType ? convert(val) : val;
             }
             else {
-                value = el.innerHTML;
+                value = el.innerHTML.trim();
             }
         }
-        // console.log({fieldName, value});
         if (filter) {
             value = filter(value);
         }
+        if (value === undefined) {
+            continue;
+        }
         result.push([fieldName, value, forceArray]);
     }
-    // console.log({result});
     return result;
 }
-function getAttribute(el, keyAttr, typeConvert) {
+/**
+ *
+ * @param el
+ * @param keyAttr
+ * @param attr
+ * @param typeConvert
+ */
+function getAttribute(el, keyAttr, attr, typeConvert) {
     switch (keyAttr) {
         case 'contenteditable': {
             if (el instanceof HTMLElement) {
@@ -96,43 +108,68 @@ function getAttribute(el, 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: {
-            if (keyAttr.startsWith('data-')) {
-                const value = el.getAttribute(keyAttr) || '';
-                if (typeConvert) {
-                    return cast(value);
-                }
-                return value;
-            }
-            return el.getAttribute(keyAttr) || '';
+    }
+    let value = 
+    // @ts-ignore
+    el[keyAttr];
+    if (value !== undefined) {
+        if (typeConvert) {
+            value = convert(value);
         }
+        return value;
     }
-}
-function cast(value) {
-    if (value == null || 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 '';
     }
-    switch (value) {
-        case 'true': {
-            return true;
-        }
-        case 'false': {
-            return false;
-        }
+    if (typeConvert) {
+        value = convert(value);
     }
-    const numeric = Number(value);
-    if (Number.isFinite(numeric)) {
-        return numeric;
+    return value;
+}
+/**
+ *
+ * @param value
+ */
+function convert(value) {
+    value = parse(value);
+    const str = `${value}`;
+    if (URL.canParse(str)) {
+        const url = new URL(str, location.href);
+        if (url.origin === location.origin) {
+            return url.pathname;
+        }
     }
     return value;
 }
 /**
- * Get path from value of "background-image"
  *
+ * @param value
+ */
+function parse(value) {
+    try {
+        return JSON.parse(`${value}`);
+    }
+    catch {
+        return value;
+    }
+}
+/**
+ * Get path from value of "background-image"
+ * @param value
  */
 function getBackgroundImagePath(value) {
     const origin = `${location.protocol}//${location.hostname}${location.port ? `:${location.port}` : ''}`;

package/dist/get.d.ts

@@ -1,2 +1,9 @@
 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,5 +1,12 @@
 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}]`));

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

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

package/dist/handle-picture-element.js

@@ -0,0 +1,31 @@
+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/index.d.ts

@@ -2,8 +2,12 @@ import type { FrozenPattyOptions } from './frozen-patty.js';
 import FrozenPatty from './frozen-patty.js';
 /**
  * Pure HTML to JSON converter that not use template engine.
- *
  * @param html Original HTML
  * @param options Options
  */
+/**
+ *
+ * @param html
+ * @param options
+ */
 export default function frozenPatty(html: string, options?: FrozenPattyOptions): FrozenPatty;

package/dist/index.js

@@ -1,10 +1,14 @@
 import FrozenPatty from './frozen-patty.js';
 /**
  * Pure HTML to JSON converter that not use template engine.
- *
  * @param html Original HTML
  * @param options Options
  */
+/**
+ *
+ * @param html
+ * @param options
+ */
 export default function frozenPatty(html, options) {
     return new FrozenPatty(html, options);
 }

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-comonent.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-comonent.js

@@ -0,0 +1,71 @@
+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-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;