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

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

@@ -5,10 +5,19 @@ import type { Filter, PrimitiveDatum } from './types.js';
  * ```html
  * <div [target-attribute] data-[attr]="[name]:[target-attribute]"></div>
  * ```
- *
  * @param el A target element
  * @param name A label name
  * @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, xssSanitize?: boolean): void;
+/**
+ *
+ * @param el
+ * @param datum
+ * @param asHtml
+ * @param xssSanitize
  */
-export declare function setValue(el: Element, name: string, datum: PrimitiveDatum, attr?: string, filter?: Filter): void;
+export declare function setContent(el: Element, datum: PrimitiveDatum, asHtml?: boolean, xssSanitize?: boolean): void;