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

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

@@ -1,4 +1,4 @@
-import { fieldNameParser } from './field-name-parser.js';
+import { parseFields } from './parse-fields.js';
 import { kebabCase } from './utils.js';
 /**
  * Get value from an 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) {
@@ -103,24 +109,35 @@ function getAttribute(el, attr, keyAttr, typeConvert) {
             return el.hasAttribute('download') ? el.getAttribute('download') : null;
         }
         case 'href': {
-            // return (el as HTMLAnchorElement).href;
-            return el.getAttribute(keyAttr) ?? ''; // return plain string
+            // 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 +145,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 +160,7 @@ function convert(value) {
  */
 function parse(value) {
     try {
-        return JSON.parse(value);
+        return JSON.parse(`${value}`);
     }
     catch {
         return value;

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/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 './utils.js';
+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;

package/dist/set-component.js

@@ -0,0 +1,80 @@
+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 = [
+            // 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();
+        }
+        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;
+                    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;