initial commit

GeneratedComponent.vue

+
+<template>
+  <section id="about" class="section section-about section-about-1 pp-scrollable"><div class="full-screen"><div class="display-center"><div class="section-title-1"><div class="container,about-me-text-container"><div></div>
+<p v-if="user.isAdmin">This paragraph will be rendered if the user is an admin.</p>
+<div v-show="showDetails">This div will be shown if showDetails is true.</div>
+<div v-for="(item, index) in items"><span>{{ item }}</span></div></div></div></div></div></section>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      class: "full-screen",
+      tagName: "section",
+      properties: {"id":"about","class":"section section-about section-about-1 pp-scrollable"},
+      children: [
+
+],
+    };
+  }
+};
+
+</script>
+
+<style scoped>
+
+</style>

MyComponent.vue

+<!-- [
+  {
+    "tagName": "section",
+    "properties": {
+      "id": "about",
+      "class": "section section-about section-about-1 pp-scrollable"
+    },
+    "children": [
+      {
+        "tagName": "div",
+        "properties": {
+          "class": "full-screen"
+        },
+        "children": [
+          {
+            "tagName": "div",
+            "properties": {
+              "class": "display-center"
+            },
+            "children": [
+              {
+                "tagName": "div",
+                "properties": {
+                  "class": "section-title-1"
+                },
+                "children": [
+                  {
+                    "tagName": "div",
+                    "properties": {
+                      "class": "container about-me-text-container"
+                    },
+                    "children": [
+                      {
+                        "comment": "Your content goes here"
+                      },
+                      {
+                        "tagName": "p",
+                        "properties": {
+                          "v-if": "someCondition"
+                        },
+                        "children": ["This paragraph will be rendered if someCondition is true."]
+                      },
+                      {
+                        "tagName": "div",
+                        "properties": {
+                          "v-show": "anotherCondition"
+                        },
+                        "children": ["This div will be shown if anotherCondition is true."]
+                      },
+                      {
+                        "tagName": "div",
+                        "properties": {
+                          "v-for": "(item, index) in items"
+                        },
+                        "children": [
+                          {
+                            "tagName": "span",
+                            "children": ["{{ item }}"]
+                          }
+                        ]
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+] -->

convertingjsontovue.js

+// const fs = require('fs');
+// const path = require('path');
+
+
+// const jsonDataPath = path.join(__dirname, 'data.json');
+// const jsonData = require(jsonDataPath);
+
+
+// const templateContent = generateTemplate(jsonData);
+
+
+// const componentCode = `
+// <template>
+//   ${templateContent}
+// </template>
+
+// <script>
+// export default {
+//   data() {
+//     return {
+      
+//     };
+//   }
+// };
+// </script>
+
+// <style scoped>
+
+// </style>
+// `;
+
+
+// const outputFilePath = path.join(__dirname, 'GeneratedComponent.vue');
+// fs.writeFileSync(outputFilePath, componentCode);
+
+// console.log(`Vue component generated successfully at ${outputFilePath}`);
+
+// function generateTemplate(jsonData) {
+ 
+//   function generateTemplateRecursive(data) {
+//     if (typeof data === 'string') {
+//       return data;
+//     } else if (Array.isArray(data)) {
+//       return data.map(generateTemplateRecursive).join('\n');
+//     } else if (typeof data === 'object') {
+//       const tagName = data.tagName || 'div';
+//       const properties = data.properties
+//         ? ' ' + Object.entries(data.properties)
+//             .map(([key, value]) => `${key}="${value}"`)
+//             .join(' ')
+//         : '';
+
+//       const directives = [];
+//       if (data.vIf && shouldIncludeDirective(data.vIf)) {
+//         directives.push(`v-if="${data.vIf}"`);
+//       }
+//       if (data.vShow && shouldIncludeDirective(data.vShow)) {
+//         directives.push(`v-show="${data.vShow}"`);
+//       }
+//       if (data.vFor && shouldIncludeDirective(data.vFor)) {
+//         directives.push(`v-for="${data.vFor}"`);
+//       }
+
+//       const directiveString = directives.length > 0 ? ` ${directives.join(' ')}` : '';
+//       const children = data.children ? generateTemplateRecursive(data.children) : '';
+
+//       return `<${tagName}${properties}${directiveString}>${children}</${tagName}>`;
+//     } else {
+//       return String(data);
+//     }
+//   }
+
+//   function shouldIncludeDirective(directive) {
+    
+//     return true;
+//   }
+
+//   return `${generateTemplateRecursive(jsonData)}`;
+// }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+const fs = require('fs');
+const path = require('path');
+
+const jsonDataPath = path.join(__dirname, 'data.json');
+const jsonData = require(jsonDataPath);
+
+const { templateContent, scriptContent } = generateTemplate(jsonData);
+
+const componentCode = `
+<template>
+  ${templateContent}
+</template>
+
+<script>
+${scriptContent}
+</script>
+
+<style scoped>
+
+</style>
+`;
+
+const outputFilePath = path.join(__dirname, 'GeneratedComponent.vue');
+fs.writeFileSync(outputFilePath, componentCode);
+
+console.log(`Vue component generated successfully at ${outputFilePath}`);
+
+function generateTemplate(jsonData) {
+ 
+  function generateTemplateRecursive(data) {
+    if (typeof data === 'string') {
+      return data;
+    } else if (Array.isArray(data)) {
+      return data.map(generateTemplateRecursive).join('\n');
+    } else if (typeof data === 'object') {
+      const tagName = data.tagName || 'div';
+      const properties = data.properties
+        ? ' ' + Object.entries(data.properties)
+            .map(([key, value]) => `${key}="${value}"`)
+            .join(' ')
+        : '';
+
+      const directives = [];
+      if (data.vIf && shouldIncludeDirective(data.vIf)) {
+        directives.push(`v-if="${data.vIf}"`);
+      }
+      if (data.vShow && shouldIncludeDirective(data.vShow)) {
+        directives.push(`v-show="${data.vShow}"`);
+      }
+      if (data.vFor && shouldIncludeDirective(data.vFor)) {
+        directives.push(`v-for="${data.vFor}"`);
+      }
+
+      const directiveString = directives.length > 0 ? ` ${directives.join(' ')}` : '';
+      const children = data.children ? generateTemplateRecursive(data.children) : '';
+
+      return `<${tagName}${properties}${directiveString}>${children}</${tagName}>`;
+    } else {
+      return String(data);
+    }
+  }
+
+  function shouldIncludeDirective(directive) {
+    
+    return true;
+  }
+
+  function generateScriptContent(data) {
+    let scriptData = `export default {\n  data() {\n`;
+  
+    function processScriptProperties(data) {
+      if (typeof data === 'object') {
+        scriptData += '    return {\n';
+  
+        if (data.children) {
+          data.children.forEach(child => {
+            if (child.properties && typeof child.properties === 'object') {
+              Object.entries(child.properties).forEach(([key, value]) => {
+                if (!scriptData.includes(`${key}:`)) {
+                  scriptData += `      ${key}: ${JSON.stringify(value)},\n`;
+                }
+              });
+            }
+          });
+        }
+  
+        Object.entries(data).forEach(([key, value]) => {
+          if (key === 'children') {
+            scriptData += `      ${key}: ${generateChildrenScript(value)},\n`;
+          } else {
+            if (!scriptData.includes(`${key}:`)) {
+              scriptData += `      ${key}: ${JSON.stringify(value)},\n`;
+            }
+          }
+        });
+  
+        scriptData += '    };\n';
+      } else {
+        scriptData += `    return ${JSON.stringify(data)};\n`;
+      }
+    }
+  
+    function generateChildrenScript(children) {
+      if (Array.isArray(children)) {
+        const processedChildren = children.map(child => processScriptProperties(child)).join(',\n');
+        return `[\n${processedChildren}\n]`;
+      } else {
+        return '[]';
+      }
+    }
+  
+    processScriptProperties(data);
+  
+    scriptData += '  }\n};\n';
+    return scriptData;
+  }
+  
+  
+  
+  
+
+  return {
+    templateContent: generateTemplateRecursive(jsonData),
+    scriptContent: generateScriptContent(jsonData),
+  };
+}

data.json

+{
+  "tagName": "section",
+  "properties": {
+    "id": "about",
+    "class": "section section-about section-about-1 pp-scrollable"
+  },
+  "children": [
+    {
+      "tagName": "div",
+      "properties": {
+        "class": "full-screen"
+      },
+      "children": [
+        {
+          "tagName": "div",
+          "properties": {
+            "class": "display-center"
+          },
+          "children": [
+            {
+              "tagName": "div",
+              "properties": {
+                "class": "section-title-1"
+              },
+              "children": [
+                {
+                  "tagName": "div",
+                  "properties": {
+                    "class": ["container", "about-me-text-container"]
+                  },
+                  "children": [
+                    {
+                      "comment": "Your content goes here"
+                    },
+                    {
+                      "tagName": "p",
+                      "properties": {
+                        "v-if": "user.isAdmin"
+                      },
+                      "children": ["This paragraph will be rendered if the user is an admin."]
+                    },
+                    {
+                      "tagName": "div",
+                      "properties": {
+                        "v-show": "showDetails"
+                      },
+                      "children": ["This div will be shown if showDetails is true."]
+                    },
+                    {
+                      "tagName": "div",
+                      "properties": {
+                        "v-for": "(item, index) in items"
+                      },
+                      "children": [
+                        {
+                          "tagName": "span",
+                          "children": ["{{ item }}"]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

package.json

+{
+  "name": "json_to_vue",
+  "version": "1.0.0",
+  "main": "convertingjsontovue.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@vitejs/plugin-vue": "^4.4.1",
+    "fs": "^0.0.1-security",
+    "parse5": "^7.1.2",
+    "path": "^0.12.7",
+    "vue-loader": "^17.3.1",
+    "vue-template-compiler": "^2.7.15"
+  },
+  "description": ""
+}