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

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

@@ -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/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/{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,9 @@
+import type { Filter, PrimitiveDatum } from './types.js';
+/**
+ * Get value from an element
+ * @param el A target element
+ * @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, convertType?: boolean, attr?: string, filter?: Filter): [key: string | number, value: PrimitiveDatum, forceArray: boolean][];

package/dist/get-values.js

@@ -0,0 +1,158 @@
+import { fieldNameParser } from './field-name-parser.js';
+import { kebabCase } from './utils.js';
+/**
+ * Get value from an element
+ * @param el A target element
+ * @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, 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) {
+        throw new Error(`data-${attr} attriblute is empty.`);
+    }
+    const fieldList = rawValue.split(/\s*,\s*/);
+    for (const field of fieldList) {
+        let 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 (el instanceof HTMLInputElement ||
+                el instanceof HTMLSelectElement ||
+                el instanceof HTMLTextAreaElement) {
+                const val = el.value;
+                value = convertType ? convert(val) : val;
+            }
+            else {
+                value = el.innerHTML.trim();
+            }
+        }
+        if (filter) {
+            value = filter(value);
+        }
+        if (value === undefined) {
+            continue;
+        }
+        result.push([fieldName, value, forceArray]);
+    }
+    return result;
+}
+/**
+ *
+ * @param el
+ * @param attr
+ * @param keyAttr
+ * @param typeConvert
+ */
+function getAttribute(el, attr, keyAttr, typeConvert) {
+    switch (keyAttr) {
+        case 'contenteditable': {
+            if (el instanceof HTMLElement) {
+                return el.contentEditable === '' || el.contentEditable === 'true';
+            }
+            else {
+                return el.getAttribute(keyAttr) === '' || el.getAttribute(keyAttr) === 'true';
+            }
+        }
+        case 'checked': {
+            return el.checked;
+        }
+        case 'disabled': {
+            return el.disabled;
+        }
+        case 'download': {
+            // An inactive download attribute always returns an empty string.
+            // So to get inactive it is necessary to use the "hasAttribute" method.
+            return el.hasAttribute('download') ? el.getAttribute('download') : null;
+        }
+        case 'href': {
+            // return (el as HTMLAnchorElement).href;
+            return el.getAttribute(keyAttr) ?? ''; // return plain string
+        }
+        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;
+        }
+    }
+}
+/**
+ *
+ * @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;
+        }
+    }
+    return value;
+}
+/**
+ *
+ * @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}` : ''}`;
+    return decodeURI(value.replace(/^url\(["']?([^"']+)["']?\)$/i, '$1').replace(origin, ''));
+}

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,21 @@
+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;
+/**
+ *
+ * @param el
+ * @param datum
+ * @param asHtml
+ */
+export declare function setContent(el: Element, datum: PrimitiveDatum, asHtml?: boolean): void;