feature branch 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>
+  <section id="about" class="section section-about section-about-1 pp-scrollable"><assign name="user anme"></assign>
+<assign htmlstring="user anme"></assign>
+<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>
@@ -8,18 +10,13 @@
 
 <script>
 export default {
+  
   data() {
-    return {
-      class: "full-screen",
-      tagName: "section",
-      properties: {"id":"about","class":"section section-about section-about-1 pp-scrollable"},
-      children: [
+    return {data: {showDetails: false, user: {isAdmin: false}, items: []}}
+  },
+  // Add other Vue component options here
   
-],
-    };
-  }
 };
-
 </script>
 
 <style scoped>

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 templateContent = generateTemplate(jsonData);
 
 const componentCode = `
 <template>
@@ -109,7 +13,9 @@ const componentCode = `
 </template>
 
 <script>
-${scriptContent}
+export default {
+  ${generateScriptContent(jsonData.script)}
+};
 </script>
 
 <style scoped>
@@ -122,8 +28,7 @@ fs.writeFileSync(outputFilePath, componentCode);
 
 console.log(`Vue component generated successfully at ${outputFilePath}`);
 
-function generateTemplate(jsonData) {
- 
+function generateTemplate(data) {
   function generateTemplateRecursive(data) {
     if (typeof data === 'string') {
       return data;
@@ -137,16 +42,9 @@ function generateTemplate(jsonData) {
             .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 directives = Object.entries(data)
+        .filter(([key]) => key.startsWith('v-'))
+        .map(([key, value]) => `${key}="${value}"`);
 
       const directiveString = directives.length > 0 ? ` ${directives.join(' ')}` : '';
       const children = data.children ? generateTemplateRecursive(data.children) : '';
@@ -157,67 +55,33 @@ function generateTemplate(jsonData) {
     }
   }
 
-  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';
+  return `${generateTemplateRecursive(data.template)}`;
+}
 
-        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`;
-                }
-              });
-            }
-          });
-        }
+function generateScriptContent(scriptData) {
+  console.log('scriptData:', scriptData); 
+  // const scriptProperties = generateDataProperties(scriptData.exportDefault);
+  const scriptProperties = scriptData.exportDefault ? generateDataProperties(scriptData.exportDefault) : '{}';
 
-        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`;
-      }
-    }
+  return `
+  data() {
+    return ${scriptProperties}
+  },
+  // Add other Vue component options here
+  `;
+}
 
-    function generateChildrenScript(children) {
-      if (Array.isArray(children)) {
-        const processedChildren = children.map(child => processScriptProperties(child)).join(',\n');
-        return `[\n${processedChildren}\n]`;
+function generateDataProperties(data) {
+  const properties = Object.entries(data)
+    .map(([key, value]) => {
+      if (typeof value === 'object' && !Array.isArray(value)) {
+        return `${key}: ${generateDataProperties(value)}`;
       } else {
-        return '[]';
+        return `${key}: ${JSON.stringify(value)}`;
       }
-    }
-  
-    processScriptProperties(data);
-  
-    scriptData += '  }\n};\n';
-    return scriptData;
-  }
-  
-  
-  
-  
+    })
+    .join(', ');
 
-  return {
-    templateContent: generateTemplateRecursive(jsonData),
-    scriptContent: generateScriptContent(jsonData),
-  };
+  return `{${properties}}`;
 }
\ No newline at end of file

data.json

 {
+  "template": {
     "tagName": "section",
     "properties": {
       "id": "about",
       "class": "section section-about section-about-1 pp-scrollable"
     },
     "children": [
+      {
+        "tagName": "assign",
+        "properties": {
+          "name": "user anme"
+        }
+      },
+      {
+        "tagName": "assign",
+        "properties": {
+          "htmlstring": "user anme"
+        }
+      },
       {
         "tagName": "div",
         "properties": {
@@ -67,4 +80,17 @@
         ]
       }
     ]
+  },
+  "script": {
+    "exportDefault": {
+      "data": {
+        "showDetails": false,
+        "user": {
+          "isAdmin": false
+        },
+        "items": []
+      }
+    }
+  }
 }
+

sample.ftl

+<section id="about" class="section section-about section-about-1 pp-scrollable">
+  <#assign userName = "user anme">
+  <#assign htmlString = "user anme">
+  <div class="full-screen">
+    <div class="display-center">
+      <div class="section-title-1">
+        <div class="container about-me-text-container">
+          <div></div>
+          <#if user.isAdmin>
+            <p>This paragraph will be rendered if the user is an admin.</p>
+          </#if>
+          <#if showDetails>
+            <div>This div will be shown if showDetails is true.</div>
+          </#if>
+          <#list items as item>
+            <div><span>${item}</span></div>
+          </#list>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

sample.json

+{
+    "type": "object",
+    "properties": [
+      {
+        "type": "string",
+        "name": "paths",
+        "value": {
+          "type": "object",
+          "properties": [
+            {
+              "type": "string",
+              "name": "favorites",
+              "value": "M140,20C 73,20 20,74 20,140 20,275 156,310 248,443 336,311 477,270 477,140 477,74 423,20 357,20 309,20 267,48 248,89 229,48 188,20 140,20Z"
+            }
+          ]
+        }
+      },
+      {
+        "type": "string",
+        "name": "favorites",
+        "value": "<svg class=\"favorites-icon\" viewBox=\"0 0 490 490\">\n<title>Favorite</title>\n<use role=\"presentation\" xlink:href=\"#icons-svg-favorites\"/>\n</svg>"
+      },
+      {
+        "type": "function",
+        "name": "svgDefs",
+        "params": [],
+        "body": "<svg class=\"svg-defs hidden\" viewBox=\"0 0 0 0\">\n<defs>\n<#list paths?keys as icon>\n<path role=\"presentation\" id=\"icons-svg-${icon}\" d=\"${paths[icon]}"/>\n</#list>\n</defs>\n</svg>"
+      }
+    ]
+  }
+  
\ No newline at end of file