Merge pull request #3 from kingkongdevs/issue-variable-replacement

Issue variable replacement

Author: kingkongdevs

index.js

@@ -75,13 +75,36 @@ function viteHTMLIncludes(options = {}) {
                 let loopLocals = { ...locals, [item]: currentItem, [index]: currentIndex };
                 let clonedNode = parse(eachNode.innerHTML);
                 processTemplate(clonedNode, loopLocals);
+                replaceVariables(clonedNode, loopLocals);
                 nodesToReplace.push(...clonedNode.childNodes);
             });
 
             eachNode.replaceWith(...nodesToReplace);
         });
     }
 
+    function replaceVariables(fragment, locals) {
+        const variableRegex = /\{\{\s*(\w+)\s*\}\}/g; // Regex to match {{variableName}}, {{ variableName }}
+        fragment.querySelectorAll('*').forEach(node => {
+            // Replace variables in text content
+            if (node.nodeType === 3 || node.nodeType === 1) { // Node is a text node
+                node.innerHTML = node.innerHTML.replace(variableRegex, (match, variableName) => {
+                    return locals[variableName] !== undefined ? locals[variableName] : match;
+                });
+            } 
+            // Replace variables in element's attributes if node is an element
+            if (node.nodeType === 1) {
+                Object.keys(node.attributes).forEach(attr => {
+                    let attrValue = node.getAttribute(attr);
+                    let replacedAttrValue = attrValue.replace(variableRegex, (match, variableName) => {
+                        return locals[variableName] !== undefined ? locals[variableName] : match;
+                    });
+                    node.setAttribute(attr, replacedAttrValue);
+                });
+            }
+        });
+    }
+
     function ensureClosedIncludeTags(html) {
         // This regex finds <include> tags and ensures they are self-closing or properly closed
         const regex = /<include(.*?)>(?!(<\/include>))/g;
@@ -100,7 +123,6 @@ function viteHTMLIncludes(options = {}) {
         processConditionals(fragment, locals);
         processSwitchCases(fragment, locals);
         processEachLoops(fragment, locals);
-        // Implement other template processing functions here if needed
     }
 
     return {
@@ -126,7 +148,6 @@ function viteHTMLIncludes(options = {}) {
                         console.error(`Error parsing locals JSON: ${localsString}`, e);
                     }
                 }
-
                 if (!src) return;
 
                 const filePath = resolve(config.root + componentsPath + src);
@@ -138,7 +159,11 @@ function viteHTMLIncludes(options = {}) {
                     // Process the entire template
                     processTemplate(fragment, locals);
 
+                    if(Object.keys(locals).length != 0) {
+                        replaceVariables(fragment, locals); //Replace the variables
+                    }
                     node.replaceWith(fragment);
+                    
                 } catch (e) {
                     console.error(`Error including file: ${filePath}`, e);
                 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kingkongdevs/vite-plugin-html-includes",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Plugin for Vite that replaces include tags with corresponding HTML components",
   "main": "index.js",
   "scripts": {