@cocreate/element-prototype 1.24.0 → 1.25.0

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# [1.25.0](https://github.com/CoCreate-app/CoCreate-element-prototype/compare/v1.24.1...v1.25.0) (2024-08-24)
+
+
+### Bug Fixes
+
+* init getAttribute before getValue and setValue ([e0cc56a](https://github.com/CoCreate-app/CoCreate-element-prototype/commit/e0cc56a2a1dffc69d3916c7653d94269d429309c))
+* removed element.value as already exist ([280b1c6](https://github.com/CoCreate-app/CoCreate-element-prototype/commit/280b1c6b8798d0bd45f4f9665539bdf4b18a0ff6))
+* use hasOwnProperty to avoid prototype ([b7736db](https://github.com/CoCreate-app/CoCreate-element-prototype/commit/b7736db4102d9b5f88c2ff9aa508a847a8a7b6eb))
+
+
+### Features
+
+* Add support for various regex operations in getValue function ([b87b1a2](https://github.com/CoCreate-app/CoCreate-element-prototype/commit/b87b1a2e82677cd3f6eb149712ffb68e95f0f2be))
+* encode and decode value ([4550990](https://github.com/CoCreate-app/CoCreate-element-prototype/commit/455099035eebc934fdfb28ac5660db719d82dcd6))
+* support toLocaleString and locale atttribute ([8ebfbd6](https://github.com/CoCreate-app/CoCreate-element-prototype/commit/8ebfbd6f61e7f1efdf661cbdaddfa0b0905c5aa0))
+* supports regex parsing of value ([b2e1a81](https://github.com/CoCreate-app/CoCreate-element-prototype/commit/b2e1a817799dbfb7b541543eb24a00c5f1cc88b1))
+
+## [1.24.1](https://github.com/CoCreate-app/CoCreate-element-prototype/compare/v1.24.0...v1.24.1) (2024-06-19)
+
+
+### Bug Fixes
+
+* type file uses storage ([6b0a434](https://github.com/CoCreate-app/CoCreate-element-prototype/commit/6b0a43406a26312c1d500dc2fd17a097c33f74db))
+
 # [1.24.0](https://github.com/CoCreate-app/CoCreate-element-prototype/compare/v1.23.0...v1.24.0) (2024-06-12)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/element-prototype",
-  "version": "1.24.0",
+  "version": "1.25.0",
   "description": "A simple element-prototype component in vanilla javascript. Easily configured using HTML5 data-attributes and/or JavaScript API.",
   "keywords": [
     "element-prototype",

package/src/getAttribute.js

@@ -28,7 +28,7 @@ Element.prototype.getAttribute = function (name) {
         '$session_id': 'session_id'
     };
 
-    if (localKeys[value]) {
+    if (localKeys.hasOwnProperty(value)) {
         let newValue = localStorage.getItem(localKeys[value]);
 
         if (!attributes.has(localKeys[value])) {

package/src/getValue.js

@@ -18,7 +18,7 @@ HTMLHeadingElement.prototype.getValue = function () {
 // TODO: check if using a a switch case will provide better performance
 const getValue = (element) => {
     let value = element.value || element.getAttribute('value') || "";
-    if (element.hasAttribute('component') || element.hasAttribute('plugin')) {
+    if (element.hasAttribute('component') || element.hasAttribute('plugin') || element.type === 'file' || element.getAttribute('type') === 'file') {
         value = storage.get(element)
         storage.delete(element)
         return value
@@ -105,6 +105,10 @@ const getValue = (element) => {
                 case 'toUnixTimestamp':
                     value = Math.floor(value.getTime() / 1000);
                     break;
+                case 'toLocaleString':
+                    let locale = element.getAttribute('locale') || 'en-US'
+                    value = value[valueType](locale);
+                    break;
                 default:
                     if (typeof value[valueType] === 'function') {
                         value = value[valueType]();
@@ -130,22 +134,6 @@ const getValue = (element) => {
         value = element.innerHTML;
     }
 
-    if (!Array.isArray(value)) {
-        if (prefix || suffix)
-            value = prefix + value + suffix;
-
-        if (valueType == 'array')
-            value = [value];
-    }
-
-    if (value && (valueType == 'object' || valueType == 'json')) {
-        try {
-            value = JSON.parse(value)
-        } catch (error) {
-            value = value
-        }
-    }
-
     if (valueType === 'boolean') {
         if (!value || value === 'fasle')
             return false
@@ -190,30 +178,122 @@ const getValue = (element) => {
         }
     }
 
-    let replace = element.getAttribute('value-replace');
-    let replaceAll = element.getAttribute('value-replaceall');
+    // try {
+    //     let replace = element.getAttribute('value-replace');
+    //     let replaceAll = element.getAttribute('value-replaceall');
 
-    if (replace || replaceAll) {
-        let replaceWith = element.getAttribute('value-replace-with') || "";
-        let replaceRegex = element.getAttribute('value-replace-regex');
+    //     if (replace || replaceAll) {
+    //         let { regex, replacement } = regexParser(replace || replaceAll)
+    //         if (regex) {
+    //             if (replace)
+    //                 replace = regex
+    //             else if (replaceAll)
+    //                 replaceAll = regex
+    //         }
 
-        if (replaceRegex) {
-            try {
+
+    //         replacement = replacement || element.getAttribute('value-replacement') || "";
+
+    //         if (replacement !== undefined) {
+    //             if (replace)
+    //                 value = value.replace(replace, replacement);
+    //             else
+    //                 value = value.replaceAll(replaceAll, replacement);
+    //         }
+    //     }
+    // } catch (error) {
+    //     console.error('getValue() replace error:', error, element);
+    // }
+
+    try {
+        let replace = element.getAttribute('value-replace');
+        let replaceAll = element.getAttribute('value-replaceall');
+        let test = element.getAttribute('value-test');
+        let match = element.getAttribute('value-match');
+        let split = element.getAttribute('value-split');
+        let lastIndex = element.getAttribute('value-lastindex');
+        let search = element.getAttribute('value-search');
+        let exec = element.getAttribute('value-exec');
+
+        if (replace || replaceAll || test || match || split || lastIndex || search || exec) {
+            let { regex, replacement } = regexParser(replace || replaceAll || test || match || split || lastIndex || search || exec);
+
+            if (regex) {
                 if (replace)
-                    value = value.replace(replaceRegex, replaceWith);
-                else
-                    value = value.replaceAll(replaceRegex, replaceWith);
-            } catch (error) {
-                console.error('getValue() Regex error:', error, element);
+                    replace = regex;
+                else if (replaceAll)
+                    replaceAll = regex;
+                else if (test)
+                    test = regex;
+                else if (match)
+                    match = regex;
+                else if (split)
+                    split = regex;
+                else if (lastIndex)
+                    lastIndex = regex;
+                else if (search)
+                    search = regex;
+                else if (exec)
+                    exec = regex;
+            }
+
+            replacement = replacement || element.getAttribute('value-replacement') || "";
+
+            if (replacement !== undefined) {
+                if (replace) {
+                    value = value.replace(replace, replacement);
+                } else if (replaceAll) {
+                    value = value.replaceAll(replaceAll, replacement);
+                }
+            }
+
+            if (test) {
+                value = regex.test(value);
+            }
+
+            if (match) {
+                const matches = value.match(match);
+                if (matches) {
+                    value = matches[1] || matches[0]; // prioritize capturing group match if available
+                }
+            }
+
+            if (split) {
+                value = value.split(split);
+            }
+
+            if (lastIndex) {
+                regex.lastIndex = 0; // Ensure starting index is 0
+                regex.test(value);
+                value = regex.lastIndex;
+            }
+
+            if (search) {
+                value = value.search(search);
+            }
+
+            if (exec) {
+                const execResult = regex.exec(value);
+                if (execResult) {
+                    value = execResult[1] || execResult[0]; // prioritize capturing group match if available
+                } else {
+                    value = null;
+                }
             }
-        } else {
-            if (replace)
-                value = value.replace(replace, replaceWith);
-            else
-                value = value.replaceAll(replaceAll, replaceWith);
         }
+    } catch (error) {
+        console.error('getValue() error:', error, element);
     }
 
+    // TODO: encode and decode needs a method to prevent multiple encode of an already encoded value
+    let encode = element.getAttribute('value-encode')
+    if (encode)
+        value = encodeValue(value, encode)
+
+    let decode = element.getAttribute('value-decode')
+    if (decode)
+        value = decodeValue(value, decode)
+
     let lowercase = element.getAttribute('value-lowercase')
     if (lowercase || lowercase === '')
         value = value.toLowerCase()
@@ -221,8 +301,90 @@ const getValue = (element) => {
     if (uppercase || uppercase === '')
         value = value.toUpperCase()
 
+    if (!Array.isArray(value)) {
+        if (prefix || suffix)
+            value = prefix + value + suffix;
+
+        if (valueType == 'array')
+            value = [value];
+    }
+
+    if (value && (valueType == 'object' || valueType == 'json')) {
+        try {
+            value = JSON.parse(value)
+        } catch (error) {
+            value = value
+        }
+    }
+
     return value;
 
 };
 
+function regexParser(string) {
+    let regex, replacement;
+    let regexMatch = string.match(/\/(.+)\/([gimuy]*)/);
+    if (regexMatch) {
+        regex = new RegExp(regexMatch[1], regexMatch[2]);
+        const splitReplace = string.split(', ');
+        replacement = splitReplace.length > 1 ? splitReplace[1].slice(1, -1) : "";
+    }
+
+    return { regex, replacement }
+}
+
+function encodeValue(value, encodingType) {
+    switch (encodingType.toLowerCase()) {
+        case 'url':
+        case 'uri':
+            return encodeURI(value.replace(/ /g, "%20"));
+        case 'uri-component':
+            return encodeURIComponent(value.replace(/ /g, "%20"));
+        case 'base64':
+        case 'atob':
+            const encoder = new TextEncoder();
+            const uint8Array = encoder.encode(value);
+            return btoa(String.fromCharCode(...uint8Array));
+        case 'html-entities':
+            return value.replace(/[\u00A0-\u9999<>\&]/g, (i) => {
+                return `&#${i.charCodeAt(0)};`;
+            });
+        case 'json':
+            return JSON.stringify(value);
+        default:
+            throw new Error(`Unsupported encoding type: ${encodingType}`);
+    }
+}
+
+function decodeValue(value, decodingType) {
+    switch (decodingType.toLowerCase()) {
+        case 'url':
+        case 'uri':
+            return decodeURI(value);
+        case 'uri-component':
+            return decodeURIComponent(value);
+        case 'base64':
+        case 'btoa': // New case for Base64 decoding (alias for 'base64')
+            try {
+                const decodedArray = Uint8Array.from(atob(value), (c) => c.charCodeAt(0));
+                const decoder = new TextDecoder();
+                return decoder.decode(decodedArray);
+            } catch (error) {
+                throw new Error(`Invalid Base64 string: ${error.message}`);
+            }
+        case 'html-entities':
+            const tempElement = document.createElement('div');
+            tempElement.innerHTML = value;
+            return tempElement.textContent;
+        case 'json':
+            try {
+                return JSON.parse(value);
+            } catch (error) {
+                throw new Error(`Invalid JSON string: ${error.message}`);
+            }
+        default:
+            throw new Error(`Unsupported decoding type: ${decodingType}`);
+    }
+}
+
 export { getValue, storage };

package/src/index.js

@@ -20,8 +20,8 @@
 // you must obtain a commercial license from CoCreate LLC.
 // For details, visit <https://cocreate.app/licenses/> or contact us at sales@cocreate.app.
 
+import { getAttribute } from './getAttribute';
 import { setValue } from './setValue';
 import { getValue } from './getValue';
-import { getAttribute } from './getAttribute';
 
-export default { getValue, setValue, getAttribute }
+export default { getAttribute, getValue, setValue }