handles nested components

Author: LOLDragoon

src/components/CodeSnippet.vue

@@ -53,15 +53,16 @@ export default {
     createTemplate(componentName, children) {
       let output = ``;
       output += ` <div>\n`;
-      children.forEach(name => {
-        output += `    <${name}>\n    </${name}>\n`;
-      });
+      // children.forEach(name => {
+      //   output += `    <${name}>\n    </${name}>\n`;
+      // });
       let templateTagStr = this.writeTemplateTag(componentName);
       return `<template>\n ${output}${templateTagStr}  </div>\n</template>`;
     },
 
     // We need a helper function to recursively iterate through the given html element's children and their children's children.
 
+
     writeTemplateTag(componentName) {
       // console.log('writeTemplateTag invoked!')
       // create reference object
@@ -78,14 +79,48 @@ export default {
         input: ['<input />', ''],
         navbar: ['<nav>', '</nav>'],
       };
+
+       function writeNested(childrenArray, indent){
+      if(!childrenArray.length){
+        return ''
+      }
+      let indented = indent + '  '
+      let nestedString = indented
+
+      childrenArray.forEach(child => {
+        console.log(child)
+        if(!child.text){
+          nestedString += `<${child}/>\n`
+        }
+        else{
+        nestedString += htmlElementMap[child.text][0]
+        nestedString += '\n';
+        nestedString += writeNested(child.children,indented)
+        nestedString += indented + htmlElementMap[child.text][1]
+        nestedString += '\n'
+        }
+      })
+      return nestedString
+    }
+
+
       // loop to iterate through compName arr
       let htmlArr = this.componentMap[componentName].htmlList;
       let outputStr = ``;
       for (let el of htmlArr) {
+        console.log(el)
+        if(!el.text){
+          outputStr += `    <${el}/>\n`
+        }
+        else{
         outputStr += `    `;
         outputStr += htmlElementMap[el.text][0];
+        outputStr += '\n'
+        outputStr += writeNested(el.children,`    `)
+        outputStr += `    `
         outputStr += htmlElementMap[el.text][1];
         outputStr += `  \n`;
+        }
       }
       // console.log(`outputStr from writeTemplateTag: ${outputStr}`)
       return outputStr;

src/components/ComponentDisplay.vue

@@ -119,7 +119,7 @@ export default {
     ]),
     // used in VueDraggableResizeable component
     activeRouteArray() {
-      console.log("active route array method", this.routes[this.activeRoute]);
+      // console.log("active route array method", this.routes[this.activeRoute]);
       return this.routes[this.activeRoute];
     },
     // used to delete components
@@ -140,11 +140,11 @@ export default {
         if (!Object.keys(component.parent).length) return lineage;
         for(var parents in component.parent) {
           //for each parent in our component
-          console.log('parents', parents)
+          // console.log('parents', parents)
           lineage.push(parents); //push the parent into lineage
-          console.log('lineage pre push', component, lineage)
+          // console.log('lineage pre push', component, lineage)
           checkParents(component.parent[parents], lineage);
-          console.log('lineage post recursive call', lineage)
+          // console.log('lineage post recursive call', lineage)
         }
         // lineage.push(component.parent[component.componentName]);
         // return checkParents(component.parent, lineage);
@@ -159,7 +159,7 @@ export default {
         // console.log(this.componentMap[this.activeComponent].children)
         this.testModel = this.componentMap[this.activeComponent].children;
         lineage = checkParents(this.componentMap[this.activeComponent]);
-        console.log('Lineage', lineage);
+        //console.log('Lineage', lineage);
       }
       const routes = Object.keys(this.routes);
       const exceptions = new Set(["App", ...lineage, ...routes, ...this.testModel]);

src/store/state/index.js

@@ -11,7 +11,10 @@ let hardA = {
   h: 200,
   htmlList: [{
     children:[{
-      children:[],
+      children:[{
+        text: 'button',
+        children:[]
+      }],
       text:'form'
     }],
     text: "div"