@burger-editor/frozen-patty 0.10.0 → 3.5.0-alpha.1

package/README.md

@@ -1,6 +1,6 @@
 # frozen-patty
 
-[![npm version](https://badge.fury.io/js/%burger-editor%2Ffrozen-patty.svg)](https://badge.fury.io/js/%burger-editor%2Ffrozen-patty) [![Build Status](https://travis-ci.org/YusukeHirao/frozen-patty.svg?branch=master)](https://travis-ci.org/YusukeHirao/frozen-patty) [![Coverage Status](https://coveralls.io/repos/github/YusukeHirao/frozen-patty/badge.svg?branch=master)](https://coveralls.io/github/YusukeHirao/frozen-patty?branch=master)
+[![npm version](https://badge.fury.io/js/@burger-editor%2Ffrozen-patty.svg)](https://badge.fury.io/js/@burger-editor%2Ffrozen-patty)
 
 Pure HTML to JSON converter that not use template engine.
 
@@ -15,53 +15,52 @@ $ npm install -D @burger-editor/frozen-patty
 ### Extraction
 
 ```js
-import FrozenPatty from 'frozen-patty';
+import frozenPatty from '@burger-editor/frozen-patty';
 
-FrozenPatty('<div data-field="text">value</div>').toJSON(); // => { text: 'value' }
-FrozenPatty('<div data-field="field-name">value</div>').toJSON(); // => { 'field-name': 'value' }
-FrozenPatty('<a href="http://localhost" data-field="href:href">link</a>').toJSON(); // => { 'href': 'http://localhost' }
+frozenPatty('<div data-field="text">value</div>').toJSON(); // => { text: 'value' }
+frozenPatty('<div data-field="field-name">value</div>').toJSON(); // => { 'field-name': 'value' }
+frozenPatty('<a href="http://localhost" data-field="href:href">link</a>').toJSON(); // => { 'href': 'http://localhost' }
 
-FrozenPatty('<div data-bge="text">value</div>', { attr: 'bge' }).toJSON(); // => { text: 'value' }
+frozenPatty('<div data-bge="text">value</div>', { attr: 'bge' }).toJSON(); // => { text: 'value' }
 ```
 
 ### 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])
+### `frozenPatty(html[, options])`
 
 Extraction data from HTML.
 
-#### arguments
+#### Parameters
 
-args|type|required|descriptions
----|---|---|---
-html|`string`|required|Original HTML
-options|`Object`|optional|†
+| parameter | type     | required | descriptions  |
+| --------- | -------- | -------- | ------------- |
+| html      | `string` | required | Original HTML |
+| options   | `Object` | optional | †             |
 
-#### options†
+#### 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)
+### `merge(data)`
 
-Data merge
+Merge data.
 
-args|type|required|descriptions
----|---|---|---
-data|`Object`|required|New data
+| args | type     | required | descriptions |
+| ---- | -------- | -------- | ------------ |
+| data | `Object` | required | New data     |
 
-### toJSON
+### `toJSON`
 
-Data to plain Object.
+Convert to JSON.
 
-### toHTML
+### `toHTML`
 
-Render to HTML as string.
+Convert to HTML string.

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,14 +8,13 @@ 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 {
     /**
      * **Data attribute** name for specifying the node that FrozenPatty treats as a _field_
-     *
      * @default `"field"`
      */
     attr?: string;
@@ -33,7 +27,6 @@ export interface FrozenPattyOptions {
      * - `"1"` => `1`
      * - `"1.0"` => `1`
      * - `"0.1"` => `0.1`
-     *
      * @default `false`
      */
     typeConvert?: boolean;
@@ -42,10 +35,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
+ * @param filter
+ */
+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
+ * @param filter
+ */
+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
+ * @param filter
+ */
+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
+ * @param filter
  */
-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-".concat(attr));
-    var listRoot = el.closest("[data-".concat(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-".concat(attr, " attriblute is empty."));
+        throw new Error(`data-${attr} attriblute is empty.`);
     }
-    var fieldList = "".concat(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,7 +54,7 @@ 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 = cast(val[0]);
                 }
@@ -77,7 +75,12 @@ function default_1(el, attr, typeConvert, filter) {
     // console.log({result});
     return result;
 }
-exports.default = default_1;
+/**
+ *
+ * @param el
+ * @param keyAttr
+ * @param typeConvert
+ */
 function getAttribute(el, keyAttr, typeConvert) {
     switch (keyAttr) {
         case 'contenteditable': {
@@ -85,7 +88,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,8 +107,8 @@ 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) {
                     return cast(value);
                 }
@@ -115,28 +118,33 @@ function getAttribute(el, keyAttr, typeConvert) {
         }
     }
 }
+/**
+ *
+ * @param value
+ */
 function cast(value) {
     if (value == null || value === '') {
         return '';
     }
     switch (value) {
-        case 'true':
+        case 'true': {
             return true;
-        case 'false':
+        }
+        case 'false': {
             return false;
+        }
     }
-    var numeric = Number(value);
-    if (isFinite(numeric)) {
+    const numeric = Number(value);
+    if (Number.isFinite(numeric)) {
         return numeric;
     }
     return value;
 }
 /**
  * Get path from value of "background-image"
- *
+ * @param value
  */
 function getBackgroundImagePath(value) {
-    var origin = "".concat(location.protocol, "//").concat(location.hostname).concat(location.port ? ":".concat(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,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

@@ -0,0 +1,19 @@
+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}]`));
+    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,13 @@
+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

@@ -0,0 +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/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
+ * @param filter
+ */
+export declare function setValue(el: Element, name: string, datum: PrimitiveDatum, attr?: string, filter?: Filter): void;