@burger-editor/frozen-patty 0.11.0 → 4.0.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,52 +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_ |
 
-### merge (data)
+### `merge(data)`
 
-Data merge
+Merge 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/dist/field-name-parser.d.ts

@@ -0,0 +1,8 @@
+/**
+ *
+ * @param field
+ */
+export declare function fieldNameParser(field: string): {
+    fieldName: string;
+    propName: string;
+};

package/dist/field-name-parser.js

@@ -0,0 +1,18 @@
+import { camelCase } from './utils.js';
+/**
+ *
+ * @param field
+ */
+export function fieldNameParser(field) {
+    field = field.trim().toLowerCase();
+    if (!field) {
+        throw new Error('Field name is empty.');
+    }
+    let [fieldName, propName] = field.split(':');
+    propName = propName?.trim() || '';
+    fieldName = fieldName?.trim() || propName || field;
+    return {
+        fieldName: camelCase(fieldName),
+        propName,
+    };
+}

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;

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,15 +1,13 @@
+import { fieldNameParser } from './field-name-parser.js';
+import { kebabCase } 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 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]`);
@@ -17,65 +15,73 @@ export function getValues(el, typeConvert = false, attr = 'field', filter) {
     if (rawValue == 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 fieldList = rawValue.split(/\s*,\s*/);
+    for (const field of fieldList) {
         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 } = fieldNameParser(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;
+                }
+                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, attr, propName, 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 attr
+ * @param keyAttr
+ * @param typeConvert
+ */
+function getAttribute(el, attr, keyAttr, typeConvert) {
     switch (keyAttr) {
         case 'contenteditable': {
             if (el instanceof HTMLElement) {
@@ -98,41 +104,53 @@ function getAttribute(el, keyAttr, typeConvert) {
         }
         case 'href': {
             // return (el as HTMLAnchorElement).href;
-            return el.getAttribute(keyAttr) || ''; // return plain string
+            return el.getAttribute(keyAttr) ?? ''; // return plain string
         }
         default: {
-            if (keyAttr.startsWith('data-')) {
-                const value = el.getAttribute(keyAttr) || '';
-                if (typeConvert) {
-                    return cast(value);
-                }
-                return value;
+            let value;
+            const dataAttr = ['data', attr, kebabCase(keyAttr)].join('-');
+            if (el.hasAttribute(dataAttr)) {
+                value = el.getAttribute(dataAttr) || '';
+            }
+            else {
+                value = el.getAttribute(keyAttr) || '';
             }
-            return el.getAttribute(keyAttr) || '';
+            if (typeConvert) {
+                value = convert(value);
+            }
+            return value;
         }
     }
 }
-function cast(value) {
-    if (value == null || value === '') {
-        return '';
-    }
-    switch (value) {
-        case 'true': {
-            return true;
-        }
-        case 'false': {
-            return false;
+/**
+ *
+ * @param value
+ */
+function convert(value) {
+    value = parse(value);
+    if (URL.canParse(value)) {
+        const url = new URL(value, location.href);
+        if (url.origin === location.origin) {
+            return url.pathname;
         }
     }
-    const numeric = Number(value);
-    if (Number.isFinite(numeric)) {
-        return numeric;
-    }
     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/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/set-value.d.ts

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