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>
<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
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 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;
}
return `${generateTemplateRecursive(data.template)}`;
}
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]`;
function generateScriptContent(scriptData) {
console.log('scriptData:', scriptData);
// const scriptProperties = generateDataProperties(scriptData.exportDefault);
const scriptProperties = scriptData.exportDefault ? generateDataProperties(scriptData.exportDefault) : '{}';
return `
data() {
return ${scriptProperties}
},
// Add other Vue component options here
`;
}
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;
}
return {
templateContent: generateTemplateRecursive(jsonData),
scriptContent: generateScriptContent(jsonData),
};
}
})
.join(', ');
return `{${properties}}`;
}
\ No newline at end of file
data.json
View file @ 291358d5
{
"tagName": "section",
"properties": {
"id": "about",
"class": "section section-about section-about-1 pp-scrollable"
},
"children": [
{
"tagName": "div",
"properties": {
"class": "full-screen"
"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"
}
},
"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": "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"]
},
{
"tagName": "p",
"properties": {
"v-if": "user.isAdmin"
"children": [
{
"comment": "Your content goes here"
},
"children": ["This paragraph will be rendered if the user is an admin."]
},
{
"tagName": "div",
"properties": {
"v-show": "showDetails"
{
"tagName": "p",
"properties": {
"v-if": "user.isAdmin"
},
"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": {
"v-for": "(item, index) in items"
{
"tagName": "div",
"properties": {
"v-show": "showDetails"
},
"children": ["This div will be shown if showDetails is true."]
},
"children": [
{
"tagName": "span",
"children": ["{{ item }}"]
}
]
}
]
}
]
}
]
}
]
{
"tagName": "div",
"properties": {
"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