@cocreate/element-prototype 1.26.0 → 1.27.0

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+# [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)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/element-prototype",
-  "version": "1.26.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

@@ -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') {
@@ -179,81 +195,87 @@ const getValue = (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);
     }

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 = "";