Skip to content

J
jsontoVueBuilder
Commit 291358d5 authored by Amulya Nagesh Jilla's avatar Amulya Nagesh Jilla
Browse files
Options

feature branch initial commit

parent a9217ba7
Hide whitespace changes
Inline Side-by-side
Showing with 184 additions and 244 deletions
GeneratedComponent.vue
View file @ 291358d5
<template> <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> <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-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> <div v-for="(item, index) in items"><span>{{ item }}</span></div></div></div></div></div></section>
...@@ -8,18 +10,13 @@ ...@@ -8,18 +10,13 @@
<script> <script>
export default { export default {
data() { data() {
return { return {data: {showDetails: false, user: {isAdmin: false}, items: []}}
class: "full-screen", },
tagName: "section", // Add other Vue component options here
properties: {"id":"about","class":"section section-about section-about-1 pp-scrollable"},
children: [
],
};
}
}; };
</script> </script>
<style scoped> <style scoped>
......
convertingjsontovue.js
View file @ 291358d5
// 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 fs = require('fs');
const path = require('path'); const path = require('path');
const jsonDataPath = path.join(__dirname, 'data.json'); const jsonDataPath = path.join(__dirname, 'data.json');
const jsonData = require(jsonDataPath); const jsonData = require(jsonDataPath);
const { templateContent, scriptContent } = generateTemplate(jsonData); const templateContent = generateTemplate(jsonData);
const componentCode = ` const componentCode = `
<template> <template>
...@@ -109,7 +13,9 @@ const componentCode = ` ...@@ -109,7 +13,9 @@ const componentCode = `
</template> </template>
<script> <script>
${scriptContent} export default {
${generateScriptContent(jsonData.script)}
};
</script> </script>
<style scoped> <style scoped>
...@@ -122,8 +28,7 @@ fs.writeFileSync(outputFilePath, componentCode); ...@@ -122,8 +28,7 @@ fs.writeFileSync(outputFilePath, componentCode);
console.log(`Vue component generated successfully at ${outputFilePath}`); console.log(`Vue component generated successfully at ${outputFilePath}`);
function generateTemplate(jsonData) { function generateTemplate(data) {
function generateTemplateRecursive(data) { function generateTemplateRecursive(data) {
if (typeof data === 'string') { if (typeof data === 'string') {
return data; return data;
...@@ -137,16 +42,9 @@ function generateTemplate(jsonData) { ...@@ -137,16 +42,9 @@ function generateTemplate(jsonData) {
.join(' ') .join(' ')
: ''; : '';
const directives = []; const directives = Object.entries(data)
if (data.vIf && shouldIncludeDirective(data.vIf)) { .filter(([key]) => key.startsWith('v-'))
directives.push(`v-if="${data.vIf}"`); .map(([key, value]) => `${key}="${value}"`);
}
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 directiveString = directives.length > 0 ? ` ${directives.join(' ')}` : '';
const children = data.children ? generateTemplateRecursive(data.children) : ''; const children = data.children ? generateTemplateRecursive(data.children) : '';
...@@ -157,67 +55,33 @@ function generateTemplate(jsonData) { ...@@ -157,67 +55,33 @@ function generateTemplate(jsonData) {
} }
} }
function shouldIncludeDirective(directive) { return `${generateTemplateRecursive(data.template)}`;
}
return true;
}
function generateScriptContent(data) { function generateScriptContent(scriptData) {
let scriptData = `export default {\n data() {\n`; console.log('scriptData:', scriptData);
// const scriptProperties = generateDataProperties(scriptData.exportDefault);
function processScriptProperties(data) { const scriptProperties = scriptData.exportDefault ? generateDataProperties(scriptData.exportDefault) : '{}';
if (typeof data === 'object') {
scriptData += ' return {\n';
return `
if (data.children) { data() {
data.children.forEach(child => { return ${scriptProperties}
if (child.properties && typeof child.properties === 'object') { },
Object.entries(child.properties).forEach(([key, value]) => { // Add other Vue component options here
if (!scriptData.includes(`${key}:`)) { `;
scriptData += ` ${key}: ${JSON.stringify(value)},\n`; }
}
}); function generateDataProperties(data) {
} const properties = Object.entries(data)
}); .map(([key, value]) => {
} if (typeof value === 'object' && !Array.isArray(value)) {
return `${key}: ${generateDataProperties(value)}`;
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 { } else {
return '[]'; return `${key}: ${JSON.stringify(value)}`;
} }
} })
.join(', ');
processScriptProperties(data);
return `{${properties}}`;
scriptData += ' }\n};\n'; }
return scriptData; \ No newline at end of file
}
return {
templateContent: generateTemplateRecursive(jsonData),
scriptContent: generateScriptContent(jsonData),
};
}
data.json
View file @ 291358d5
{ {
"tagName": "section", "template": {
"properties": { "tagName": "section",
"id": "about", "properties": {
"class": "section section-about section-about-1 pp-scrollable" "id": "about",
}, "class": "section section-about section-about-1 pp-scrollable"
"children": [ },
{ "children": [
"tagName": "div", {
"properties": { "tagName": "assign",
"class": "full-screen" "properties": {
"name": "user anme"
}
},
{
"tagName": "assign",
"properties": {
"htmlstring": "user anme"
}
}, },
"children": [ {
{ "tagName": "div",
"tagName": "div", "properties": {
"properties": { "class": "full-screen"
"class": "display-center" },
}, "children": [
"children": [ {
{ "tagName": "div",
"tagName": "div", "properties": {
"properties": { "class": "display-center"
"class": "section-title-1" },
}, "children": [
"children": [ {
{ "tagName": "div",
"tagName": "div", "properties": {
"properties": { "class": "section-title-1"
"class": ["container", "about-me-text-container"] },
}, "children": [
"children": [ {
{ "tagName": "div",
"comment": "Your content goes here" "properties": {
"class": ["container", "about-me-text-container"]
}, },
{ "children": [
"tagName": "p", {
"properties": { "comment": "Your content goes here"
"v-if": "user.isAdmin"
}, },
"children": ["This paragraph will be rendered if the user is an admin."] {
}, "tagName": "p",
{ "properties": {
"tagName": "div", "v-if": "user.isAdmin"
"properties": { },
"v-show": "showDetails" "children": ["This paragraph will be rendered if the user is an admin."]
}, },
"children": ["This div will be shown if showDetails is true."] {
}, "tagName": "div",
{ "properties": {
"tagName": "div", "v-show": "showDetails"
"properties": { },
"v-for": "(item, index) in items" "children": ["This div will be shown if showDetails is true."]
}, },
"children": [ {
{ "tagName": "div",
"tagName": "span", "properties": {
"children": ["{{ item }}"] "v-for": "(item, index) in items"
} },
] "children": [
} {
] "tagName": "span",
} "children": ["{{ item }}"]
] }
} ]
] }
} ]
] }
]
}
]
}
]
}
]
},
"script": {
"exportDefault": {
"data": {
"showDetails": false,
"user": {
"isAdmin": false
},
"items": []
}
} }
] }
} }
sample.ftl 0 → 100644
View file @ 291358d5
<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 0 → 100644
View file @ 291358d5
{
"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
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment