@cocreate/element-prototype 1.25.0 → 1.27.0

package/CHANGELOG.md

@@ -1,3 +1,32 @@
+# [1.27.0](https://github.com/CoCreate-app/CoCreate-element-prototype/compare/v1.26.0...v1.27.0) (2024-11-04)
+
+
+### Bug Fixes
+
+* pretier.config.js and file formating ([1428fd9](https://github.com/CoCreate-app/CoCreate-element-prototype/commit/1428fd96719f9411d97af5f067a4f95e99a94eed))
+* removed exec returning null ([240543b](https://github.com/CoCreate-app/CoCreate-element-prototype/commit/240543b19eafe8cd2714ee7f81f9edf0c20774bf))
+
+
+### Features
+
+* add prettier.config.js and format files ([0acda3c](https://github.com/CoCreate-app/CoCreate-element-prototype/commit/0acda3c61bd6f832a3544d202a7e59a87ee464d3))
+* loop through regex improved value handling ([3ac5f8d](https://github.com/CoCreate-app/CoCreate-element-prototype/commit/3ac5f8dfc978cfc25322b5ef927b8df995c0ab50))
+* value-dispatch attribute to dispatch event even if value is null or undefined ([7f2ca4b](https://github.com/CoCreate-app/CoCreate-element-prototype/commit/7f2ca4b18ec668f77895b3d369b379d4420aa046))
+
+# [1.26.0](https://github.com/CoCreate-app/CoCreate-element-prototype/compare/v1.25.0...v1.26.0) (2024-09-21)
+
+
+### Bug Fixes
+
+* removed commented code ([67b9cb4](https://github.com/CoCreate-app/CoCreate-element-prototype/commit/67b9cb43a399b0c856ac8c285b4aa13d3ea93859))
+* valueType default empty string to support startsWith ([4515bc2](https://github.com/CoCreate-app/CoCreate-element-prototype/commit/4515bc2b6a1466eca1d210692002977fa6113540))
+
+
+### Features
+
+* if value-type object and parse fails snitizze to remove any string outside of object and attempt parse again ([9344106](https://github.com/CoCreate-app/CoCreate-element-prototype/commit/93441066dc255bb5becc85594bc5c3d11c1766d5))
+* value-type array.$keys array.$value and array.$entries will return an array from object ([25df40d](https://github.com/CoCreate-app/CoCreate-element-prototype/commit/25df40d1adbbff43f06029b9a22e29f9ec4371c4))
+
 # [1.25.0](https://github.com/CoCreate-app/CoCreate-element-prototype/compare/v1.24.1...v1.25.0) (2024-08-24)
 
 

package/package.json

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

package/prettier.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+        tabWidth: 4,
+        semi: true,
+        trailingComma: "none",
+        bracketSameLine: true,
+        useTabs: true,
+        overrides: [
+            {
+                files: ["*.json", "*.yml", "*.yaml"],
+                options: {
+                    tabWidth: 2,
+                    useTabs: false
+                },
+            }
+        ],  
+    };

package/src/getValue.js

@@ -26,7 +26,7 @@ const getValue = (element) => {
 
     let prefix = element.getAttribute('value-prefix') || "";
     let suffix = element.getAttribute('value-suffix') || "";
-    let valueType = element.getAttribute('value-type');
+    let valueType = element.getAttribute('value-type') || "";
 
     if (element.type === "checkbox") {
         let inputs = [element]
@@ -128,10 +128,26 @@ const getValue = (element) => {
         value = element.srcdoc;
     } else if (element.hasAttribute('value')) {
         value = element.getAttribute('value');
-    } else if (valueType === 'text') {
-        value = element.innerText;
     } else {
-        value = element.innerHTML;
+        let targetElement = element;
+
+        // If value-exclude-selector exists, clone the element and remove the specified selectors
+        const excludeSelector = element.getAttribute('value-remove-selector');
+        if (excludeSelector) {
+            targetElement = element.cloneNode(true);
+
+            // Remove matching elements from the cloned element
+            targetElement.querySelectorAll(excludeSelector).forEach(el => el.remove());
+        }
+
+        // Determine whether to use outerHTML, innerHTML, or innerText based on valueType
+        if (valueType === 'text') {
+            value = targetElement.innerText;
+        } else if (valueType === 'outerHTML') {
+            value = targetElement.outerHTML;
+        } else {
+            value = targetElement.innerHTML;
+        }
     }
 
     if (valueType === 'boolean') {
@@ -178,109 +194,88 @@ const getValue = (element) => {
         }
     }
 
-    // try {
-    //     let replace = element.getAttribute('value-replace');
-    //     let replaceAll = element.getAttribute('value-replaceall');
-
-    //     if (replace || replaceAll) {
-    //         let { regex, replacement } = regexParser(replace || replaceAll)
-    //         if (regex) {
-    //             if (replace)
-    //                 replace = regex
-    //             else if (replaceAll)
-    //                 replaceAll = regex
-    //         }
-
-
-    //         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)
-                    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;
-            }
+
+        const attributes = element.attributes; // Get all attributes of the element
+        const regexAttribute = [
+            'value-replace',
+            'value-replaceall',
+            'value-test',
+            'value-match',
+            'value-split',
+            'value-lastindex',
+            'value-search',
+            'value-exec'
+        ];
+        // Process each attribute in order
+        for (let i = 0; i < attributes.length; i++) {
+            if (value === null || value === undefined)
+                break
+
+            if (!regexAttribute.includes(attributes[i].name))
+                continue
+
+            let regexAttributeValue = attributes[i].value
+
+            if (!regexAttributeValue)
+                continue
+
+            let { regex, replacement } = regexParser(regexAttributeValue);
+
+            if (regex)
+                regexAttributeValue = 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);
-                }
-            }
+            switch (attributes[i].name) {
+                case 'value-replace':
+                    value = value.replace(regexAttributeValue, replacement);
+                    break;
 
-            if (test) {
-                value = regex.test(value);
-            }
+                case 'value-replaceall':
+                    value = value.replaceAll(regexAttributeValue, replacement);
+                    break;
 
-            if (match) {
-                const matches = value.match(match);
-                if (matches) {
-                    value = matches[1] || matches[0]; // prioritize capturing group match if available
-                }
-            }
+                case 'value-test':
+                    value = regex.test(value);
+                    break;
 
-            if (split) {
-                value = value.split(split);
-            }
+                case 'value-match':
+                    const matches = value.match(regexAttributeValue);
+                    if (matches) {
+                        value = matches[1] || matches[0]; // Prioritize capturing group if available
+                    }
+                    break;
 
-            if (lastIndex) {
-                regex.lastIndex = 0; // Ensure starting index is 0
-                regex.test(value);
-                value = regex.lastIndex;
-            }
+                case 'value-split':
+                    value = value.split(regexAttributeValue);
+                    break;
 
-            if (search) {
-                value = value.search(search);
-            }
+                case 'value-lastindex':
+                    regex.lastIndex = 0; // Ensure starting index is 0
+                    regex.test(value);
+                    value = regex.lastIndex;
+                    break;
 
-            if (exec) {
-                const execResult = regex.exec(value);
-                if (execResult) {
-                    value = execResult[1] || execResult[0]; // prioritize capturing group match if available
-                } else {
-                    value = null;
-                }
+                case 'value-search':
+                    value = value.search(regexAttributeValue);
+                    break;
+
+                case 'value-exec':
+                    const execResult = regex.exec(value);
+                    if (execResult) {
+                        value = execResult[1] || execResult[2] || execResult[0]; // Prioritize capturing group if available
+                    } else {
+                        // value = null;
+                    }
+                    break;
+
+                default:
+                    // Ignore other attributes
+                    break;
             }
         }
+
     } catch (error) {
         console.error('getValue() error:', error, element);
     }
@@ -301,19 +296,52 @@ const getValue = (element) => {
     if (uppercase || uppercase === '')
         value = value.toUpperCase()
 
-    if (!Array.isArray(value)) {
-        if (prefix || suffix)
+    // Apply prefix and suffix first, before JSON parsing
+    if (typeof value === 'string' || typeof value === 'number') {
+        if (prefix || suffix) {
             value = prefix + value + suffix;
-
-        if (valueType == 'array')
-            value = [value];
+        }
     }
 
-    if (value && (valueType == 'object' || valueType == 'json')) {
+    // Handle JSON parsing for objects, arrays, or when valueType starts with 'array'
+    if (value && (valueType === 'object' || valueType === 'json' || valueType.startsWith('array'))) {
         try {
-            value = JSON.parse(value)
+            value = JSON.parse(value);
         } catch (error) {
-            value = value
+            const jsonRegex = /(\{[\s\S]*\}|\[[\s\S]*\])/;
+            const match = value.match(jsonRegex);
+
+            if (match) {
+                try {
+                    value = JSON.parse(match[0]);
+                } catch (e) {
+                    console.error('Failed to parse JSON after regex extraction:', e);
+                }
+            } else {
+                console.error('No valid JSON structure found in the string.');
+            }
+        }
+    }
+
+    // Now handle array-specific logic if valueType starts with 'array'
+    if (valueType.startsWith('array')) {
+        if (!Array.isArray(value)) {
+            // If the parsed value is an object, apply array conversion based on operators
+            if (typeof value === 'object') {
+                if (valueType === 'array.$keys') {
+                    value = Object.keys(value);
+                } else if (valueType === 'array.$values') {
+                    value = Object.values(value);
+                } else if (valueType === 'array.$entries') {
+                    value = Object.entries(value);
+                } else {
+                    // Default behavior: wrap the object in an array
+                    value = [value];
+                }
+            } else {
+                // If it's not an object (i.e., a primitive), wrap the value in an array
+                value = [value];
+            }
         }
     }
 

package/src/setValue.js

@@ -14,7 +14,8 @@ HTMLHeadingElement.prototype.setValue = function (value, dispatch) {
 
 // TODO: check if using a a switch case will provide better performance
 const setValue = (el, value, dispatch) => {
-    if (value === '$false') {
+    let valueDispatch = el.getAttribute('value-dispatch')
+    if ((valueDispatch || valueDispatch === '') && (value === '$false' || value === undefined || value === null)) {
         return dispatchEvents(el, dispatch)
     };
 
@@ -72,7 +73,7 @@ const setValue = (el, value, dispatch) => {
         } else if (el.tagName == "SELECT" && el.hasAttribute('multiple') && Array.isArray(value)) {
             let options = el.options;
             for (let i = 0; i < options.length; i++) {
-                if (value.includes(options[i].value)) {
+                if (value.includes && value.includes(options[i].value)) {
                     options[i].selected = "selected";
                 } else {
                     options[i].selected = "";