@burger-editor/frozen-patty 0.9.0 → 0.11.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2017 Yusuke Hirao
+Copyright (c) 2017-2024 D-ZERO Co., Ltd.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -27,10 +27,9 @@ FrozenPatty('<div data-bge="text">value</div>', { attr: 'bge' }).toJSON(); // =>
 ### Data merge
 
 ```js
-FrozenPatty('<div data-field="text">value</div>').merge({ text: 'merged' }).toHTML() // => "<div data-field="text">merged</div>";
+FrozenPatty('<div data-field="text">value</div>').merge({ text: 'merged' }).toHTML(); // => "<div data-field="text">merged</div>";
 ```
 
-
 ## API
 
 ### FrozenPatty (html[, options])
@@ -39,24 +38,24 @@ Extraction data from HTML.
 
 #### arguments
 
-args|type|required|descriptions
----|---|---|---
-html|`string`|required|Original HTML
-options|`Object`|optional|†
+| args    | type     | required | descriptions  |
+| ------- | -------- | -------- | ------------- |
+| html    | `string` | required | Original HTML |
+| options | `Object` | optional | †             |
 
 #### options†
 
-options|type|default|descriptions
----|---|---|---
-attr|string|`"field"`|**Data attribute** name for specifying the node that FrozenPatty treats as a _field_
+| options | type   | default   | descriptions                                                                         |
+| ------- | ------ | --------- | ------------------------------------------------------------------------------------ |
+| attr    | string | `"field"` | **Data attribute** name for specifying the node that FrozenPatty treats as a _field_ |
 
 ### merge (data)
 
 Data merge
 
-args|type|required|descriptions
----|---|---|---
-data|`Object`|required|New data
+| args | type     | required | descriptions |
+| ---- | -------- | -------- | ------------ |
+| data | `Object` | required | New data     |
 
 ### toJSON
 

package/{lib → dist}/frozen-patty.d.ts

@@ -1,11 +1,6 @@
+import type { Filter, FrozenPattyData } from './types.js';
 export default class FrozenPatty {
-    private _dom;
-    private _attr;
-    private _typeConvert;
-    /**
-     * Value filter
-     */
-    private _filter?;
+    #private;
     /**
      *
      * @param html Original HTML
@@ -13,9 +8,9 @@ export default class FrozenPatty {
      */
     constructor(html: string, options?: FrozenPattyOptions);
     merge(data: FrozenPattyData): this;
-    toJSON(filtering?: boolean): FrozenPattyData;
-    toHTML(): string;
     toDOM(): Element;
+    toHTML(): string;
+    toJSON(filtering?: boolean): FrozenPattyData;
 }
 export interface FrozenPattyOptions {
     /**
@@ -42,10 +37,3 @@ export interface FrozenPattyOptions {
      */
     valueFilter?: Filter;
 }
-export interface FrozenPattyData {
-    [filed: string]: PrimitiveData;
-}
-export declare type PrimitiveDatum = string | number | boolean | null | undefined;
-export declare type PrimitiveData = PrimitiveDatum | PrimitiveDatum[];
-export declare type Filter = <T>(value: T) => T;
-//# sourceMappingURL=frozen-patty.d.ts.map

package/dist/frozen-patty.js

@@ -0,0 +1,43 @@
+import get from './get.js';
+import set from './set.js';
+export default class FrozenPatty {
+    #attr = 'field';
+    #dom;
+    /**
+     * Value filter
+     */
+    #filter;
+    #typeConvert = false;
+    /**
+     *
+     * @param html Original HTML
+     * @param options Options
+     */
+    constructor(html, options) {
+        this.#dom = document.createElement('fp-placeholer');
+        this.#dom.innerHTML = html;
+        if (options) {
+            if (options.attr) {
+                this.#attr = options.attr;
+            }
+            this.#typeConvert = !!options.typeConvert;
+            this.#filter = options.valueFilter;
+        }
+    }
+    merge(data) {
+        const currentData = this.toJSON(false);
+        const newData = Object.assign(currentData, data);
+        this.#dom = set(this.#dom, newData, this.#attr, this.#filter);
+        return this;
+    }
+    toDOM() {
+        return this.#dom;
+    }
+    toHTML() {
+        return this.#dom.innerHTML;
+    }
+    toJSON(filtering = true) {
+        const filter = filtering ? this.#filter : undefined;
+        return get(this.#dom, this.#attr, this.#typeConvert, filter);
+    }
+}

package/dist/get-value.d.ts

@@ -0,0 +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
+ */
+export declare function getValue(el: Element, name: string, typeConvert?: boolean, attr?: string, filter?: Filter): PrimitiveDatum | PrimitiveDatum[];

package/dist/get-value.js

@@ -0,0 +1,15 @@
+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
+ */
+export function getValue(el, name, typeConvert = false, attr = 'field', filter) {
+    const value = getValues(el, typeConvert, attr, filter);
+    const data = arrayToHash(value);
+    return data[name];
+}

package/dist/get-values.d.ts

@@ -0,0 +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
+ */
+export declare function getValues(el: Element, typeConvert?: boolean, attr?: string, filter?: Filter): [string | number, PrimitiveDatum, boolean][];

package/{lib/getValue.js → dist/get-values.js}

@@ -1,43 +1,41 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
 /**
  * Get value from an element
  *
- * @param el HTMLElement
- * @param attr Data attribute name for specifying the node that FrozenPatty treats as a field
+ * @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
  */
-function default_1(el, attr, typeConvert, filter) {
+export function getValues(el, typeConvert = false, attr = 'field', filter) {
     /**
      * [key, value, forceArray]
      */
-    var result = [];
-    var rawValue = el.getAttribute("data-" + attr);
-    var listRoot = el.closest("[data-" + attr + "-list]");
-    var forceArray = !!listRoot;
+    const result = [];
+    const rawValue = el.getAttribute(`data-${attr}`);
+    const listRoot = el.closest(`[data-${attr}-list]`);
+    const forceArray = !!listRoot;
     if (rawValue == null) {
-        throw new Error("data-" + attr + " attriblute is empty.");
+        throw new Error(`data-${attr} attriblute is empty.`);
     }
-    var fieldList = ("" + rawValue).split(/\s*,\s*/);
+    const fieldList = `${rawValue}`.split(/\s*,\s*/);
     // console.log({fieldList, el: el.innerHTML});
-    for (var _i = 0, fieldList_1 = fieldList; _i < fieldList_1.length; _i++) {
-        var fieldName = fieldList_1[_i];
-        var splitKey = void 0;
-        var keyAttr = '';
-        var value = void 0;
+    for (let fieldName of fieldList) {
+        let splitKey;
+        let keyAttr = '';
+        let value;
         fieldName = fieldName.trim();
-        if (/^[a-z_-](?:[a-z0-9_-])*:[a-z_-](?:[a-z0-9_-])*(?:\([a-z-]+\))?/i.test(fieldName)) {
+        if (/^[_a-z-][\w-]*:[_a-z-][\w-]*(?:\([a-z-]+\))?/i.test(fieldName)) {
             splitKey = fieldName.split(':');
-            fieldName = splitKey[0].trim();
-            keyAttr = splitKey[1].trim();
+            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)) {
-            var css = keyAttr.replace(/^style\(([a-z-]+)\)$/i, '$1');
-            var style = void 0;
+            const css = keyAttr.replace(/^style\(([a-z-]+)\)$/i, '$1');
+            let style;
             if (el instanceof HTMLElement) {
                 style = el.style;
             }
@@ -56,12 +54,12 @@ function default_1(el, attr, typeConvert, filter) {
             if (el instanceof HTMLInputElement ||
                 el instanceof HTMLSelectElement ||
                 el instanceof HTMLTextAreaElement) {
-                var val = el.value;
+                const val = el.value;
                 if (Array.isArray(val)) {
-                    value = val[0];
+                    value = cast(val[0]);
                 }
                 else {
-                    value = val || '';
+                    value = cast(val);
                 }
             }
             else {
@@ -77,7 +75,6 @@ function default_1(el, attr, typeConvert, filter) {
     // console.log({result});
     return result;
 }
-exports.default = default_1;
 function getAttribute(el, keyAttr, typeConvert) {
     switch (keyAttr) {
         case 'contenteditable': {
@@ -85,7 +82,7 @@ function getAttribute(el, keyAttr, typeConvert) {
                 return el.contentEditable === '' || el.contentEditable === 'true';
             }
             else {
-                return (el.getAttribute(keyAttr) === '' || el.getAttribute(keyAttr) === 'true');
+                return el.getAttribute(keyAttr) === '' || el.getAttribute(keyAttr) === 'true';
             }
         }
         case 'checked': {
@@ -104,39 +101,40 @@ function getAttribute(el, keyAttr, typeConvert) {
             return el.getAttribute(keyAttr) || ''; // return plain string
         }
         default: {
-            if (/^data-/.test(keyAttr)) {
-                var value = el.getAttribute(keyAttr) || '';
+            if (keyAttr.startsWith('data-')) {
+                const value = el.getAttribute(keyAttr) || '';
                 if (typeConvert) {
-                    switch (value) {
-                        case 'true':
-                            return true;
-                        case 'false':
-                            return false;
-                    }
-                    var numeric = parseFloat(value);
-                    if (isFinite(numeric)) {
-                        return numeric;
-                    }
-                    else {
-                        return value;
-                    }
-                }
-                else {
-                    return value;
+                    return cast(value);
                 }
+                return value;
             }
-            else {
-                return el.getAttribute(keyAttr) || '';
-            }
+            return el.getAttribute(keyAttr) || '';
         }
     }
 }
+function cast(value) {
+    if (value == null || value === '') {
+        return '';
+    }
+    switch (value) {
+        case 'true': {
+            return true;
+        }
+        case 'false': {
+            return false;
+        }
+    }
+    const numeric = Number(value);
+    if (Number.isFinite(numeric)) {
+        return numeric;
+    }
+    return value;
+}
 /**
  * Get path from value of "background-image"
  *
  */
 function getBackgroundImagePath(value) {
-    var origin = location.protocol + "//" + location.hostname + (location.port ? ":" + location.port : '');
+    const origin = `${location.protocol}//${location.hostname}${location.port ? `:${location.port}` : ''}`;
     return decodeURI(value.replace(/^url\(["']?([^"']+)["']?\)$/i, '$1').replace(origin, ''));
 }
-//# sourceMappingURL=getValue.js.map

package/dist/get.d.ts

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

package/dist/get.js

@@ -0,0 +1,12 @@
+import { getValues } from './get-values.js';
+import { arrayToHash } from './utils.js';
+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/index.d.ts

@@ -0,0 +1,9 @@
+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
+ */
+export default function frozenPatty(html: string, options?: FrozenPattyOptions): FrozenPatty;

package/dist/index.js

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

package/dist/set-value.d.ts

@@ -0,0 +1,14 @@
+import type { Filter, PrimitiveDatum } from './types.js';
+/**
+ * Set value to an element
+ *
+ * ```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
+ */
+export declare function setValue(el: Element, name: string, datum: PrimitiveDatum, attr?: string, filter?: Filter): void;