Add mixin folder and writeNested.js file to eliminate duplicate code.

Author: alexlaw528

src/components/nav-buttons/ExportMenu.vue

@@ -23,8 +23,12 @@ import { useExportComponent } from "../composables/useExportComponent.js";
 import { mapState } from "vuex";
 const { fs, ipcRenderer } = window;
 
+import writeNested from "../../mixins/writeNested";
+
+
 export default {
   name: "ExportProjectComponent",
+  mixins: [writeNested],
   methods: {
     useExportComponentBound() {
       useExportComponent.bind(this)();
@@ -43,9 +47,6 @@ export default {
         .catch((err) => console.log(err));
     },
     exportProject: function () {
-      // console.log('this.activeComponentObj: ', this.activeComponentObj); /* *********************** */ //Not sure, it's undefined
-      console.log('this.componentMap: ', this.componentMap); /* *********************** */
-      console.log('this.routes: ', this.routes); /* *********************** */ //array of objects on the cssGrid
 
       this.showExportProjectDialog();
     },
@@ -160,42 +161,7 @@ export default {
         'e-slider':["<el-slider", "</el-slider>"],
         'e-card': ["<el-card", "</el-card>"],
       };
-      // function to loop through nested elements
-      function writeNested(childrenArray, indent) {
-        if (!childrenArray.length) {
-          return "";
-        }
-        let indented = indent + "  ";
-        let nestedString = "";
-
-        childrenArray.forEach((child) => {
-            nestedString += indented;
-            if (!child.text) {
-              nestedString += `<${child}/>\n`;
-            } else {
-              nestedString += htmlElementMap[child.text][0];
-              if (child.class !== "") {
-                nestedString += " " + "class = " + `"${child.class}"`;
-              }
-              if(child.binding !== "") {
-                nestedString += " " + "v-model = " + `"${child.binding}"`;
-              }
-              if (child.text === "img" || child.text === "input" || child.text === "link") {
-                nestedString += "/>";
-              } else { nestedString += ">"; }
 
-              if (child.children.length) {
-                nestedString += "\n";
-                nestedString += writeNested(child.children, indented);
-                nestedString += indented + htmlElementMap[child.text][1];
-                nestedString += "\n";
-              } else {
-                nestedString += htmlElementMap[child.text][1] + "\n";
-              }
-            }
-          });
-        return nestedString;
-      }
       // iterate through component's htmllist
       let htmlArr = this.componentMap[componentName].htmlList;
       let outputStr = ``;
@@ -296,7 +262,6 @@ export default {
         }
       } 
       else {
-        console.log('Test log if route')
         return `<template>\n\t${str}${templateTagStr}${routeStr}</div>\n</template>`
       }
     },

src/components/right-sidebar/CodeSnippet.vue

@@ -27,6 +27,8 @@ import "prismjs/components/prism-clike";
 import "prismjs/components/prism-javascript";
 import "prismjs/themes/prism-tomorrow.css"; // import syntax highlighting styles
 
+import writeNested from "../../mixins/writeNested";
+
 export default {
   data() {
     return {
@@ -43,6 +45,7 @@ export default {
     // needs access to current component aka activeComponent
     ...mapState(["componentMap", "activeComponent", "activeComponentObj", "exportAsTypescript"]),
   },
+  mixins: [writeNested],
   methods: {
     snippetInvoke() {
       if (this.activeComponent !== '') {
@@ -125,48 +128,10 @@ export default {
       childComponents.forEach(child => {
         htmlElementMap[child]=[`<${child}`, ""] //single
       })
-      function writeNested(childrenArray, indent) {
-        if (!childrenArray.length) {
-          return "";
-        }
-        let indented = indent + "  ";
-        let nestedString = "";
-
-        childrenArray.forEach((child) => {
-          nestedString += indented;
-          if (!child.text) {
-            nestedString += `<${child}/>\n`;
-          } else {
-            nestedString += htmlElementMap[child.text][0];
-            if (child.class !== "") {
-              nestedString += " " + "class=" + `"${child.class}"`;
-            }
-            if (child.binding !== "") {
-              if (child.text !== 'img' || child.text !== 'link') {
-                nestedString += ` v-model="${child.binding}"`
-
-              }
-            }
-            if (child.text === "img" || child.text === "input" || child.text === "link" || childComponents.includes(child.text)) {
-              nestedString += "/>";
-            } else { nestedString += ">"; }
-
-            if (child.children.length) {
-              nestedString += "\n";
-              nestedString += writeNested(child.children, indented);
-              nestedString += indented + htmlElementMap[child.text][1];
-              nestedString += "\n"
-            } else {
-              nestedString += htmlElementMap[child.text][1] + "\n";
-            }
-          }
-        });
-        return nestedString;
-      }
 
       // Iterates through active component's HTML elements list and adds to code snippet
       let htmlArr = this.componentMap[componentName].htmlList;
-      let outputStr = ``
+      let outputStr = ``;
       // eslint-disable-next-line no-unused-vars
       for (let el of htmlArr) {
         if (!el.text) {

src/mixins/writeNested.js

@@ -0,0 +1,49 @@
+// Helper function that recursively iterates through the given html element's children and their children's children.
+// also adds proper indentation to code snippet
+
+export default {
+  methods: {
+    writeNested(childrenArray, indent) {
+      if (!childrenArray.length) {
+        return;
+      }
+      let indented = indent + "  ";
+      let nestedString = "";
+    
+      childrenArray.forEach((child) => {
+        nestedString += indented;
+        if (!child.text) {
+          nestedString += `<${child}/>\n`;
+        } 
+        else {
+          nestedString += htmlElementMap[child.text][0];
+          if (child.class !== "") {
+            nestedString += " " + "class=" + `"${child.class}"`;
+          }
+          if (child.binding !== "") {
+            if (child.text !== 'img' || child.text !== 'link') {
+              nestedString += ` v-model="${child.binding}"`
+    
+            }
+          }
+
+          if (child.text === "img" || child.text === "input" || child.text === "link" || childComponents.includes(child.text)) {
+            nestedString += "/>";
+          } 
+          else { nestedString += ">"; }
+    
+          if (child.children.length) {
+            nestedString += "\n";
+            nestedString += writeNested(child.children, indented);
+            nestedString += indented + htmlElementMap[child.text][1];
+            nestedString += "\n"
+          } 
+          else {
+            nestedString += htmlElementMap[child.text][1] + "\n";
+          }
+        }
+      });
+      return nestedString;
+    }
+  }
+}