Server to generate dynamic Vue components from JSON

dynamic-components-poc/.gitignore

+node_modules
+/components/*.vue
\ No newline at end of file

dynamic-components-poc/ftl/common-icons-svg.ftl

+<#--
+    svg icons
+-->
+<#assign paths = {
+    "favorites": "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"
+}/>
+
+<#--
+    build an svgdefs elemement for common icons
+-->
+<#macro svgDefs>
+    <@wsgc.accumulatorMacro accumulator='body/top'>
+        <svg class="svg-defs hidden" viewBox="0 0 0 0">
+            <defs>
+            <#list paths?keys as icon>
+                <path role="presentation" id="icons-svg-${icon}" d="${paths[icon]}"/>
+            </#list>
+            </defs>
+        </svg>
+    </@wsgc.accumulatorMacro>
+</#macro>
+
+<#assign favorites>
+    <svg class="favorites-icon" viewBox="0 0 490 490">
+        <title>Favorite</title>
+        <use role="presentation" xlink:href="#icons-svg-favorites"/>
+    </svg>
+</#assign>
+
+<#assign favoritesButton>
+    <span class="favorite-text">
+        <svg width="14px" height="14px" viewBox="0 0 14 14" class="favorites-icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+            <!-- Generator: Sketch 59.1 (86144) - https://sketch.com -->
+            <title>d_pip-fave_heart-stroke</title>
+            <desc>Created with Sketch.</desc>
+            <g id="d_pip-fave_heart-stroke" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                <g id="heart-stroke" transform="translate(1.000000, 1.000000)" stroke="#555" stroke-width="1.5">
+                    <path d="M6,11.7285437 L6.12125143,11.6016 C8.95690286,8.63292086 10.5891686,6.810216 11.0580343,6.09051771 C11.58246,5.28553629 11.74398,4.74768857 11.8009886,3.716982 C11.8024286,3.69110743 11.8024286,3.69110743 11.80332,3.67551171 C11.8033543,3.67496229 11.8033543,3.67496229 11.8033886,3.67441371 C11.8042714,3.659268 11.8042714,3.659268 11.8057371,3.63473571 C11.9210829,1.75743086 10.5585514,0.0982937143 8.97734571,0.191285143 C7.91188286,0.253945714 6.84310286,1.04037429 6.16488857,2.29304486 L6,2.59758857 L5.83511143,2.29304486 C5.15689714,1.04037429 4.08811714,0.253945714 3.02265429,0.191285143 C1.44144857,0.0982937143 0.0789171429,1.75743086 0.19428,3.63504171 C0.195728571,3.659268 0.195728571,3.659268 0.196611429,3.67441371 C0.196645714,3.67496229 0.196645714,3.67496229 0.19668,3.67551171 C0.197571429,3.69110657 0.197571429,3.69110657 0.199011429,3.71706086 C0.25602,4.74768857 0.41754,5.28553629 0.941965714,6.09051771 C1.41083143,6.810216 3.04309714,8.63292086 5.87874857,11.6016 L6,11.7285437 Z" id="Path-Copy"></path>
+                </g>
+            </g>
+        </svg>
+    </span>
+</#assign>
\ No newline at end of file

dynamic-components-poc/index.js

+import fs from "fs";
+import JSONFile from "./json/test-data.json" assert { type: "json" };
+
+// Function to generate Vue component files
+function generateComponentFiles() {
+  JSONFile.forEach(obj => {
+    const componentContent = generateComponentContent(obj);
+    const filePath = `components/${obj.type.toLowerCase().replace(/ /g, "-")}.vue`;
+
+    fs.writeFileSync(filePath, componentContent);
+
+    console.log(`Generated ${filePath}\n`);
+  });
+}
+
+// Function to generate Vue component content
+function generateComponentContent(obj) {
+  return `
+  <template>
+    <div>
+      <h2>${obj.heading}</h2>
+      ${obj.link ? `<a href="${obj.link}">${obj.link}</a>` : ""}
+      ${obj.list ? `<ul><li v-for="item in list">{{item}}</li></ul>` : ""}
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    name: "Template",
+    data() {
+      return {
+        list: [${obj.list}]
+      }
+    }
+  };
+  </script>
+  `;
+}
+
+generateComponentFiles();
\ No newline at end of file

dynamic-components-poc/json/test-data.json

+[
+  {
+    "type": "template",
+    "heading": "Title 01",
+    "link": "https://www.google.com",
+    "list": [1,2,3],
+    "children": [
+      {
+        "type": "assignment",
+        "variable": "name",
+        "value": "John"
+      },
+      {
+        "type": "conditional",
+        "condition": "age > 18",
+        "trueBranch": [
+          {
+            "type": "text",
+            "content": "Welcome, "
+          },
+          {
+            "type": "variable",
+            "name": "name"
+          },
+          {
+            "type": "text",
+            "content": "!"
+          }
+        ],
+        "falseBranch": [
+          {
+            "type": "text",
+            "content": "You are too young, "
+          },
+          {
+            "type": "variable",
+            "name": "name"
+          },
+          {
+            "type": "text",
+            "content": "!"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "type": "template-2",
+    "heading": "Title 02"
+  },
+  {
+    "type": "header template",
+    "heading": "Title 03"
+  },
+  {
+    "type": "footer template",
+    "heading": "Title 04"
+  }
+]

dynamic-components-poc/package.json

+{
+  "name": "dynamic-components-poc",
+  "version": "1.0.0",
+  "description": "",
+  "type": "module",
+  "main": "index.js",
+  "scripts": {
+    "start": "nodemon index.js"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "express": "^4.18.2"
+  },
+  "devDependencies": {
+    "nodemon": "^3.0.1"
+  }
+}