cyber-elx 1.0.7 → 1.1.0

package/src/files.js

@@ -19,7 +19,12 @@ function ensureDirectories(cwd = process.cwd()) {
     path.join(cwd, 'layouts'),
     path.join(cwd, 'defaults', 'sections'),
     path.join(cwd, 'defaults', 'templates'),
-    path.join(cwd, 'defaults', 'layouts')
+    path.join(cwd, 'defaults', 'layouts'),
+    // SPA folders
+    path.join(cwd, 'SPA_general_pages'),
+    path.join(cwd, 'SPA_teacher_dashboard'),
+    path.join(cwd, 'SPA_student_dashboard'),
+    path.join(cwd, 'SPA_student_dashboard', 'pages')
   ];
   for (const dir of dirs) {
     if (!fs.existsSync(dir)) {
@@ -119,6 +124,145 @@ function getLocalPages(cwd = process.cwd()) {
   return pages;
 }
 
+// SPA folder configurations
+const SPA_CONFIGS = {
+  general_pages: {
+    folder: 'SPA_general_pages',
+    files: [
+      { name: 'login.js', type: 'vue-component' },
+      { name: 'register.js', type: 'vue-component' },
+      { name: 'payment.js', type: 'vue-component' }
+    ]
+  },
+  teacher_dashboard: {
+    folder: 'SPA_teacher_dashboard',
+    files: [
+      { name: 'teacher_custom_css.css', type: 'css' }
+    ]
+  },
+  student_dashboard: {
+    folder: 'SPA_student_dashboard',
+    files: [
+      { name: 'student_custom_css.css', type: 'css' },
+      { name: 'startup.js', type: 'js' },
+      { name: 'pages/my_courses.js', type: 'vue-component' },
+      { name: 'pages/course_player.js', type: 'vue-component' },
+      { name: 'pages/courses_list.js', type: 'vue-component' },
+      { name: 'pages/course_detail.js', type: 'vue-component' },
+      { name: 'pages/sessions.js', type: 'vue-component' },
+      { name: 'pages/profile.js', type: 'vue-component' }
+    ]
+  }
+};
+
+const EMPTY_FILE_MARKERS = {
+  'vue-component': '/* EMPTY FILE */',
+  'js': '/* EMPTY FILE */',
+  'css': '/* EMPTY FILE */'
+};
+
+function getSpaFilePath(spaKey, fileName, cwd = process.cwd()) {
+  const config = SPA_CONFIGS[spaKey];
+  if (!config) return null;
+  return path.join(cwd, config.folder, fileName);
+}
+
+function readSpaFile(spaKey, fileName, cwd = process.cwd()) {
+  const filePath = getSpaFilePath(spaKey, fileName, cwd);
+  if (!filePath || !fs.existsSync(filePath)) {
+    return null;
+  }
+  const content = fs.readFileSync(filePath, 'utf-8');
+  if (content === '/* EMPTY FILE */') {
+    return '';
+  }
+  return content;
+}
+
+function writeSpaFile(spaKey, fileName, content, cwd = process.cwd()) {
+  const filePath = getSpaFilePath(spaKey, fileName, cwd);
+  if (!filePath) return;
+  
+  const dir = path.dirname(filePath);
+  if (!fs.existsSync(dir)) {
+    fs.mkdirSync(dir, { recursive: true });
+  }
+  
+  // Determine file type for empty marker
+  const ext = path.extname(fileName).slice(1).toLowerCase();
+  const isVueComponent = fileName.startsWith('pages/') || 
+    (spaKey === 'general_pages' && ext === 'js');
+  const fileType = isVueComponent ? 'vue-component' : ext;
+  
+  if (!content || content.trim() === '') {
+    fs.writeFileSync(filePath, EMPTY_FILE_MARKERS[fileType] || '/* EMPTY FILE */', 'utf-8');
+  } else {
+    fs.writeFileSync(filePath, content, 'utf-8');
+  }
+}
+
+function spaFileExists(spaKey, fileName, cwd = process.cwd()) {
+  const filePath = getSpaFilePath(spaKey, fileName, cwd);
+  return filePath && fs.existsSync(filePath);
+}
+
+function getLocalSpaFiles(spaKey, cwd = process.cwd()) {
+  const config = SPA_CONFIGS[spaKey];
+  if (!config) return [];
+  
+  const items = [];
+  const folderPath = path.join(cwd, config.folder);
+  
+  if (!fs.existsSync(folderPath)) return [];
+  
+  // Read all expected files
+  for (const fileConfig of config.files) {
+    const filePath = path.join(folderPath, fileConfig.name);
+    if (fs.existsSync(filePath)) {
+      let content = fs.readFileSync(filePath, 'utf-8');
+      if (content === '/* EMPTY FILE */') {
+        content = '';
+      }
+      items.push({
+        name: fileConfig.name,
+        type: fileConfig.type,
+        content
+      });
+    }
+  }
+  
+  return items;
+}
+
+async function updateDevDoc() {
+  const devDocDir = path.join(process.cwd(), 'DEV_DOC');
+  const configFileExists = fs.existsSync(path.join(process.cwd(), 'cyber-elx.jsonc'));
+
+  if (configFileExists) {
+    if (!fs.existsSync(devDocDir)) {
+      fs.mkdirSync(devDocDir, { recursive: true });
+    }
+
+    const files = ['ThemeDev.md', 'README.md', 'LoginRegisterPagesDev.md', 'PaymentPageDev.md'];
+    
+    for (const file of files) {
+      const sourceContent = fs.readFileSync(path.join(__dirname, '..', 'DEV_DOC', file), 'utf-8');
+      const localPath = path.join(devDocDir, file);
+      let localContent = '';
+      
+      try {
+        localContent = fs.readFileSync(localPath, 'utf-8');
+      } catch (err) {
+      }
+      
+      if (sourceContent !== localContent) {
+        fs.writeFileSync(localPath, sourceContent);
+        console.log(chalk.green(`DEV_DOC/${file} was updated`));
+      }
+    }
+  }
+}
+
 module.exports = {
   DEFAULT_TEMPLATE_KEYS,
   ensureDirectories,
@@ -127,5 +271,14 @@ module.exports = {
   readPageFile,
   writePageFile,
   fileExists,
-  getLocalPages
+  getLocalPages,
+  updateDevDoc,
+  // SPA exports
+  SPA_CONFIGS,
+  EMPTY_FILE_MARKERS,
+  getSpaFilePath,
+  readSpaFile,
+  writeSpaFile,
+  spaFileExists,
+  getLocalSpaFiles
 };

package/src/index.js

@@ -3,21 +3,21 @@ const chalk = require('chalk');
 const fs = require('fs');
 const path = require('path');
 const { readConfig, writeConfig, validateConfig, configExists } = require('./config');
-const { readCache, writeCache, getPageTimestamp, setPageTimestamp } = require('./cache');
+const { readCache, writeCache, getPageTimestamp, setPageTimestamp, getSpaTimestamp, setSpaTimestamp } = require('./cache');
 const { createApiClient } = require('./api');
-const { ensureDirectories, writePageFile, getLocalPages, DEFAULT_TEMPLATE_KEYS, fileExists, readPageFile, getFilePath, getFolder } = require('./files');
+const { ensureDirectories, writePageFile, getLocalPages, DEFAULT_TEMPLATE_KEYS, fileExists, readPageFile, getFilePath, getFolder, updateDevDoc, SPA_CONFIGS, writeSpaFile, getLocalSpaFiles } = require('./files');
 const { promptInitConfig, confirmOverwrite, confirmUpload } = require('./prompts');
+const { compileComponentTemplates, componentObjectToJsCode, parseComponentJsCode } = require('./vue-utils');
 
 program
   .name('cyber-elx')
   .description('CLI tool to upload/download ELX custom pages')
-  .version('1.0.7');
+  .version('1.1.0');
 
 program
   .command('init')
   .description('Initialize configuration and download pages')
   .action(async () => {
-    await updateDevDoc();
     try {
       const cwd = process.cwd();
       
@@ -33,6 +33,8 @@ program
       console.log(chalk.blue('Testing connection...'));
       const api = createApiClient(config);
       
+      await updateDevDoc();
+      
       try {
         await api.getPages();
         console.log(chalk.green('✓ Connection successful!'));
@@ -229,6 +231,78 @@ async function downloadPages(cwd, config, force = false) {
   writeCache(cache, cwd);
   
   console.log(chalk.blue(`\nDownload complete: ${downloadedCount} downloaded, ${skippedCount} skipped`));
+  
+  // Download SPA folders
+  await downloadSpaFolders(cwd, api, cache, force);
+  
+  writeCache(cache, cwd);
+}
+
+async function downloadSpaFolders(cwd, api, cache, force = false) {
+  console.log(chalk.blue('\n--- SPA Folders ---'));
+  
+  const spaEndpoints = {
+    general_pages: { get: () => api.getGeneralPages(), name: 'SPA_general_pages' },
+    teacher_dashboard: { get: () => api.getTeacherDashboard(), name: 'SPA_teacher_dashboard' },
+    student_dashboard: { get: () => api.getStudentDashboard(), name: 'SPA_student_dashboard' }
+  };
+  
+  for (const [spaKey, endpoint] of Object.entries(spaEndpoints)) {
+    console.log(chalk.blue(`\nDownloading ${endpoint.name}...`));
+    
+    try {
+      const response = await endpoint.get();
+      const remoteItems = response.items || [];
+      const remoteUpdatedAt = response.updated_at || null;
+      const cachedTimestamp = getSpaTimestamp(cache, spaKey);
+      
+      // Check for conflicts
+      if (remoteUpdatedAt && cachedTimestamp && remoteUpdatedAt > cachedTimestamp && !force) {
+        const shouldOverwrite = await confirmOverwrite(endpoint.name, 'has been modified on server');
+        if (!shouldOverwrite) {
+          console.log(chalk.yellow(`  ⊘ ${endpoint.name} (skipped)`));
+          continue;
+        }
+      }
+      
+      // Get expected files from config
+      const config = SPA_CONFIGS[spaKey];
+      const expectedFiles = config.files.map(f => f.name);
+      
+      // Create a map of remote items by name
+      const remoteItemsMap = new Map();
+      for (const item of remoteItems) {
+        remoteItemsMap.set(item.name, item);
+      }
+      
+      // Download/create each expected file
+      for (const fileConfig of config.files) {
+        const remoteItem = remoteItemsMap.get(fileConfig.name);
+        let content = '';
+        
+        if (remoteItem && remoteItem.data) {
+          if (fileConfig.type === 'vue-component') {
+            // Convert component object back to JS code
+            content = componentObjectToJsCode(remoteItem.data);
+          } else {
+            // CSS or JS - raw content
+            content = remoteItem.data;
+          }
+        }
+        
+        writeSpaFile(spaKey, fileConfig.name, content, cwd);
+        console.log(chalk.green(`  ✓ ${endpoint.name}/${fileConfig.name}`));
+      }
+      
+      // Update cache timestamp
+      if (remoteUpdatedAt) {
+        setSpaTimestamp(cache, spaKey, remoteUpdatedAt);
+      }
+      
+    } catch (err) {
+      console.log(chalk.yellow(`  ⚠ Could not download ${endpoint.name}: ${err.message}`));
+    }
+  }
 }
 
 async function uploadPages(cwd, config, force = false) {
@@ -312,37 +386,112 @@ async function uploadPages(cwd, config, force = false) {
   if(response.debug) {
     console.log(chalk.gray('Debug info:'), response.debug);
   }
+  
+  // Upload SPA folders
+  await uploadSpaFolders(cwd, api, cache, force);
+  
+  writeCache(cache, cwd);
 }
 
-async function updateDevDoc() {
-  const devDocDir = path.join(process.cwd(), 'DEV_DOC');
-  const configFileExists = fs.existsSync(path.join(process.cwd(), 'cyber-elx.jsonc'));
-
-  if (configFileExists) {
-    if (!fs.existsSync(devDocDir)) {
-      fs.mkdirSync(devDocDir, { recursive: true });
+async function uploadSpaFolders(cwd, api, cache, force = false) {
+  console.log(chalk.blue('\n--- SPA Folders ---'));
+  
+  const spaEndpoints = {
+    general_pages: { 
+      get: () => api.getGeneralPages(), 
+      set: (items) => api.setGeneralPages(items), 
+      name: 'SPA_general_pages' 
+    },
+    teacher_dashboard: { 
+      get: () => api.getTeacherDashboard(), 
+      set: (items) => api.setTeacherDashboard(items), 
+      name: 'SPA_teacher_dashboard' 
+    },
+    student_dashboard: { 
+      get: () => api.getStudentDashboard(), 
+      set: (items) => api.setStudentDashboard(items), 
+      name: 'SPA_student_dashboard' 
     }
-
-    const files = ['ThemeDev.md', 'README.md'];
+  };
+  
+  for (const [spaKey, endpoint] of Object.entries(spaEndpoints)) {
+    console.log(chalk.blue(`\nUploading ${endpoint.name}...`));
     
-    for (const file of files) {
-      const sourceContent = fs.readFileSync(path.join(__dirname, '..', 'DEV_DOC', file), 'utf-8');
-      const localPath = path.join(devDocDir, file);
-      let localContent = '';
+    try {
+      // Get local files
+      const localFiles = getLocalSpaFiles(spaKey, cwd);
       
-      try {
-        localContent = fs.readFileSync(localPath, 'utf-8');
-      } catch (err) {
+      if (localFiles.length === 0) {
+        console.log(chalk.yellow(`  No files found in ${endpoint.name}`));
+        continue;
+      }
+      
+      // Check for server conflicts
+      const remoteResponse = await endpoint.get();
+      const remoteUpdatedAt = remoteResponse.updated_at || null;
+      const cachedTimestamp = getSpaTimestamp(cache, spaKey);
+      
+      if (remoteUpdatedAt && cachedTimestamp && remoteUpdatedAt > cachedTimestamp && !force) {
+        const shouldUpload = await confirmUpload(endpoint.name, 'has been modified on server since last download');
+        if (!shouldUpload) {
+          console.log(chalk.yellow(`  ⊘ ${endpoint.name} (skipped)`));
+          continue;
+        }
+      }
+      
+      // Prepare items for upload
+      const itemsToUpload = [];
+      let hasError = false;
+      
+      for (const file of localFiles) {
+        const item = {
+          name: file.name,
+          type: file.type,
+          data: null
+        };
+        
+        if (file.type === 'vue-component') {
+          // Parse and compile Vue component
+          if (!file.content || file.content.trim() === '') {
+            item.data = null;
+          } else {
+            try {
+              const componentObj = parseComponentJsCode(file.content);
+              const compiledComponent = compileComponentTemplates(componentObj);
+              item.data = compiledComponent;
+            } catch (err) {
+              console.log(chalk.red(`  ✗ ${endpoint.name}/${file.name}: Vue compilation failed - ${err.message}`));
+              hasError = true;
+              break;
+            }
+          }
+        } else {
+          // CSS or JS - raw content
+          item.data = file.content || '';
+        }
+        
+        itemsToUpload.push(item);
+        console.log(chalk.cyan(`  → ${endpoint.name}/${file.name}`));
+      }
+      
+      if (hasError) {
+        console.log(chalk.red(`  Upload cancelled for ${endpoint.name} due to compilation errors`));
+        continue;
       }
       
-      if (sourceContent !== localContent) {
-        fs.writeFileSync(localPath, sourceContent);
-        console.log(chalk.green(`DEV_DOC/${file} was updated`));
+      // Upload to server
+      const response = await endpoint.set(itemsToUpload);
+      
+      if (response.updated_at) {
+        setSpaTimestamp(cache, spaKey, response.updated_at);
       }
+      
+      console.log(chalk.green(`  ✓ ${endpoint.name} uploaded successfully`));
+      
+    } catch (err) {
+      console.log(chalk.red(`  ✗ Could not upload ${endpoint.name}: ${err.message}`));
     }
   }
 }
 
-
-
 program.parse();

package/src/vue-utils.js

@@ -0,0 +1,149 @@
+const { compile } = require('vue-template-compiler');
+
+/**
+ * Parses a component JavaScript code string into an object
+ * @param {string} componentText - JavaScript code representing the component
+ * @returns {Object} - Parsed component object
+ */
+function parseComponentJsCode(componentText) {
+  var codeToEval = componentText.replace("module.exports =", "");
+  if(codeToEval.endsWith(";")) {
+    codeToEval = codeToEval.slice(0, -1);
+  }
+  var parsedComponent = eval(`(${codeToEval})`);
+  for(var key of Object.keys(parsedComponent)) {
+    if(typeof parsedComponent[key] === "string") {
+      parsedComponent[key] = parsedComponent[key].trim();
+    }
+  }
+  return parsedComponent;
+}
+
+/**
+ * Converts a component object to JavaScript code (For file saving)
+ * @param {Object} component - Component definition with code.template
+ * @returns {string} - JavaScript code representing the component
+ */
+function componentObjectToJsCode(component) {
+  var newComponent = Object.keys(component).reduce((final, key) => {
+    if(key == "compiledTemplate" || !component[key]) return final;
+    final[key] = "#" + key.toUpperCase();
+    return final;
+  }, {});
+  var jsCode = JSON.stringify(newComponent, null, 2);
+  jsCode = jsCode.replace(/"/g, "");
+  Object.keys(component).forEach(key => {
+    if(key == "compiledTemplate" || !component[key]) return;
+    var newContent = (typeof component[key] === "string") ? component[key] : JSON.stringify(component[key]);
+    newContent = "\n    " + newContent.trim();
+    // // Add Tabs
+    // newContent = "  " + newContent.replace(/\n/g, "\n    ");
+    // Add comments
+    if(key == "template") {
+      newContent = "\/* html *\/`" + newContent + "\n  `";
+    } else if(key == "style") {
+      newContent = "\/* css *\/`" + newContent + "\n  `";
+    } else if(key == "name") {
+      newContent = "\"" + newContent.trim() + "\"";
+    } else  if(key == "props" && typeof component[key] !== "string") {
+      // Add nothing
+    } else {
+      newContent = "\/* js *\/`" + newContent + "\n  `";
+    }
+    // Replace
+    jsCode = jsCode.replace("#" + key.toUpperCase(), newContent);
+  });
+  return "module.exports = " + jsCode;
+}
+
+/**
+ * Compiles Vue template for a single component
+ * @param {Object} component - Component definition with code.template
+ * @returns {Object} - Same component with `compiledTemplate` added to code
+ */
+function compileComponentTemplates(component) {
+  const compiled = compile(component.template);
+
+  if (compiled.errors.length > 0) {
+    console.warn(`Template compilation errors:`, compiled.errors);
+  }
+
+  return {
+    ...component,
+    compiledTemplate: {
+      render: compiled.render,
+      staticRenderFns: compiled.staticRenderFns,
+      errors: compiled.errors,
+      tips: compiled.tips
+    }
+  };
+}
+
+// function test() {
+//   console.log('test +++++++');
+//   var components = [
+//     {
+//       "name": "CardComponent",
+//       "template": "\n        <div class=\"card-component\">\n          <h2>🎴 {{ title }}</h2>\n          <p>{{ description }}</p>\n          \n          <div style=\"margin: 20px 0;\">\n            <v-text-field \n              v-model=\"userInput\" \n              label=\"Type something...\"\n              variant=\"outlined\"\n              density=\"compact\"\n              style=\"max-width: 300px; display: inline-block;\"\n            />\n            <v-btn color=\"primary\" @click=\"incrementCounter\" class=\"ml-2\">\n              Clicked {{ counter }} times\n            </v-btn>\n          </div>\n          \n          <p v-if=\"userInput\">You typed: <strong>{{ userInput }}</strong></p>\n          \n          <div style=\"margin: 20px 0;\">\n            <h3>Default Slot:</h3>\n            <slot>\n              <p style=\"color: #999;\">No slot content provided</p>\n            </slot>\n          </div>\n          \n          <slot name=\"footer\"></slot>\n        </div>\n      ",
+//       "data": "function() {\n        return {\n          title: 'Card Component',\n          description: 'This is a dynamically loaded CARD component with slots!',\n          counter: 0,\n          userInput: ''\n        };\n      }",
+//       "computed": "{\n        doubleCounter() {\n          return this.counter * 2;\n        }\n      }",
+//       "watch": "{\n        counter(newVal) {\n          console.log('Counter changed to:', newVal);\n        }\n      }",
+//       "methods": "{\n        incrementCounter() {\n          this.counter++;\n        }\n      }",
+//       "beforeCreate": null,
+//       "created": null,
+//       "beforeMount": null,
+//       "mounted": "function() {\n        console.log('Card component mounted!');\n      }",
+//       "beforeUpdate": null,
+//       "updated": null,
+//       "beforeDestroy": null,
+//       "destroyed": null,
+//       "compiledTemplate": {
+//         "render": "with(this){return _c('div',{staticClass:\"card-component\"},[_c('h2',[_v(\"🎴 \"+_s(title))]),_v(\" \"),_c('p',[_v(_s(description))]),_v(\" \"),_c('div',{staticStyle:{\"margin\":\"20px 0\"}},[_c('v-text-field',{staticStyle:{\"max-width\":\"300px\",\"display\":\"inline-block\"},attrs:{\"label\":\"Type something...\",\"variant\":\"outlined\",\"density\":\"compact\"},model:{value:(userInput),callback:function ($$v) {userInput=$$v},expression:\"userInput\"}}),_v(\" \"),_c('v-btn',{staticClass:\"ml-2\",attrs:{\"color\":\"primary\"},on:{\"click\":incrementCounter}},[_v(\"\\n              Clicked \"+_s(counter)+\" times\\n            \")])],1),_v(\" \"),(userInput)?_c('p',[_v(\"You typed: \"),_c('strong',[_v(_s(userInput))])]):_e(),_v(\" \"),_c('div',{staticStyle:{\"margin\":\"20px 0\"}},[_c('h3',[_v(\"Default Slot:\")]),_v(\" \"),_t(\"default\",function(){return [_c('p',{staticStyle:{\"color\":\"#999\"}},[_v(\"No slot content provided\")])]})],2),_v(\" \"),_t(\"footer\")],2)}",
+//         "staticRenderFns": [],
+//         "errors": [],
+//         "tips": []
+//       }
+//     },
+//     {
+//       "name": "ListComponent",
+//       "template": "<div class=\"list-component\">\n  <h2>📋 {{ title }}</h2>\n  <p>{{ description }}</p>\n  \n  <div style=\"margin: 20px 0;\">\n    <v-text-field \n      v-model=\"newItem\" \n      @keyup.enter=\"addItem\"\n      label=\"Add new item...\"\n      variant=\"outlined\"\n      density=\"compact\"\n      style=\"max-width: 300px; display: inline-block;\"\n    />\n    <v-btn color=\"primary\" @click=\"addItem\" class=\"ml-2\">Add Item</v-btn>\n  </div>\n  \n  <v-list>\n    <v-list-item v-for=\"item in items\" :key=\"item.id\">\n      <v-list-item-title>{{ item.name }}</v-list-item-title>\n      <template v-slot:append>\n<v-btn color=\"error\" size=\"small\" @click=\"removeItem(item.id)\">Remove</v-btn>\n      </template>\n    </v-list-item>\n  </v-list>\n  \n  <div style=\"margin: 20px 0;\">\n    <h3>Default Slot:</h3>\n    <slot>\n      <p style=\"color: #999;\">No slot content provided</p>\n    </slot>\n  </div>\n  \n  <slot name=\"footer\"></slot>\n</div>\n      ",
+//       "data": "function() {\nreturn {\n  title: 'List Component',\n  description: 'This is a dynamically loaded LIST component with slots!',\n  newItem: '',\n  items: [\n    { id: 1, name: 'Learn Vue.js' },\n    { id: 2, name: 'Build dynamic components' },\n    { id: 3, name: 'Master slots' }\n  ],\n  nextId: 4\n};\n      }",
+//       "computed": "{\nitemCount() {\n  return this.items.length;\n}\n      }",
+//       "watch": null,
+//       "methods": "{\naddItem() {\n  if (this.newItem.trim()) {\n    this.items.push({\n      id: this.nextId++,\n      name: this.newItem\n    });\n    this.newItem = '';\n  }\n},\nremoveItem(id) {\n  this.items = this.items.filter(item => item.id !== id);\n}\n      }",
+//       "beforeCreate": null,
+//       "created": null,
+//       "beforeMount": null,
+//       "mounted": "function() {\nconsole.log('List component mounted!');\n      }",
+//       "beforeUpdate": null,
+//       "updated": null,
+//       "beforeDestroy": null,
+//       "destroyed": null,
+//       "compiledTemplate": {
+//         "render": "with(this){return _c('div',{staticClass:\"list-component\"},[_c('h2',[_v(\"📋 \"+_s(title))]),_v(\" \"),_c('p',[_v(_s(description))]),_v(\" \"),_c('div',{staticStyle:{\"margin\":\"20px 0\"}},[_c('v-text-field',{staticStyle:{\"max-width\":\"300px\",\"display\":\"inline-block\"},attrs:{\"label\":\"Add new item...\",\"variant\":\"outlined\",\"density\":\"compact\"},on:{\"keyup\":function($event){if(!$event.type.indexOf('key')&&_k($event.keyCode,\"enter\",13,$event.key,\"Enter\"))return null;return addItem.apply(null, arguments)}},model:{value:(newItem),callback:function ($$v) {newItem=$$v},expression:\"newItem\"}}),_v(\" \"),_c('v-btn',{staticClass:\"ml-2\",attrs:{\"color\":\"primary\"},on:{\"click\":addItem}},[_v(\"Add Item\")])],1),_v(\" \"),_c('v-list',_l((items),function(item){return _c('v-list-item',{key:item.id,scopedSlots:_u([{key:\"append\",fn:function(){return [_c('v-btn',{attrs:{\"color\":\"error\",\"size\":\"small\"},on:{\"click\":function($event){return removeItem(item.id)}}},[_v(\"Remove\")])]},proxy:true}],null,true)},[_c('v-list-item-title',[_v(_s(item.name))])],1)}),1),_v(\" \"),_c('div',{staticStyle:{\"margin\":\"20px 0\"}},[_c('h3',[_v(\"Default Slot:\")]),_v(\" \"),_t(\"default\",function(){return [_c('p',{staticStyle:{\"color\":\"#999\"}},[_v(\"No slot content provided\")])]})],2),_v(\" \"),_t(\"footer\")],2)}",
+//         "staticRenderFns": [],
+//         "errors": [],
+//         "tips": []
+//       }
+//     }
+//   ];
+
+//   const fs = require('fs');
+
+//   // Create components directory if it doesn't exist
+//   if (!fs.existsSync('./components')) {
+//     fs.mkdirSync('./components');
+//   }
+
+//   // For each component
+//   for (const component of components) {
+//     fs.writeFileSync(`./components/${component.name}.js`, componentObjectToJsCode(component));
+//     fs.writeFileSync(`./components/${component.name}_clean.json`, JSON.stringify(parseComponentJsCode(componentObjectToJsCode(component)), null, 2));
+//   }
+
+// }
+
+// test();
+
+
+module.exports = { compileComponentTemplates, componentObjectToJsCode, parseComponentJsCode };