@wealthfolio/addon-dev-tools 1.0.0 → 2.0.0

package/README.md

@@ -11,27 +11,32 @@ npm install -g @wealthfolio/addon-dev-tools
 ## CLI Commands
 
 ### Create New Addon
+
 ```bash
 wealthfolio create my-awesome-addon
 ```
 
 ### Start Development Server
+
 ```bash
 # In your addon directory
 wealthfolio dev
 ```
 
 ### Build Addon
+
 ```bash
 wealthfolio build
 ```
 
 ### Package for Distribution
+
 ```bash
 wealthfolio package
 ```
 
 ### Test Setup
+
 ```bash
 wealthfolio test
 ```
@@ -39,6 +44,7 @@ wealthfolio test
 ## Development Server
 
 The development server provides:
+
 - Hot reload functionality
 - File watching
 - Auto-building
@@ -71,8 +77,9 @@ Add to your addon's `package.json`:
 ## Architecture
 
 This package is separate from `@wealthfolio/addon-sdk` to:
+
 - Keep the SDK lightweight for production
-- Avoid unnecessary dependencies in addon bundles  
+- Avoid unnecessary dependencies in addon bundles
 - Provide optional development tooling
 
 ## License

package/cli.js

@@ -2,31 +2,31 @@
 
 /**
  * Wealthfolio Addon CLI
- * 
+ *
  * Command-line tool for developing, building, and managing addons
  */
 
-const { program } = require('commander');
-const fs = require('fs');
-const path = require('path');
-const { exec, spawn } = require('child_process');
-const { promisify } = require('util');
-const readline = require('node:readline/promises');
-const { stdin, stdout } = require('node:process');
-const { AddonScaffold } = require('./scaffold');
+const { program } = require("commander");
+const fs = require("fs");
+const path = require("path");
+const { exec, spawn } = require("child_process");
+const { promisify } = require("util");
+const readline = require("node:readline/promises");
+const { stdin, stdout } = require("node:process");
+const { AddonScaffold } = require("./scaffold");
 
 const execAsync = promisify(exec);
 
 // Colors for console output
 const colors = {
-  reset: '\x1b[0m',
-  bright: '\x1b[1m',
-  red: '\x1b[31m',
-  green: '\x1b[32m',
-  yellow: '\x1b[33m',
-  blue: '\x1b[34m',
-  magenta: '\x1b[35m',
-  cyan: '\x1b[36m'
+  reset: "\x1b[0m",
+  bright: "\x1b[1m",
+  red: "\x1b[31m",
+  green: "\x1b[32m",
+  yellow: "\x1b[33m",
+  blue: "\x1b[34m",
+  magenta: "\x1b[35m",
+  cyan: "\x1b[36m",
 };
 
 function log(message, color = colors.reset) {
@@ -56,19 +56,19 @@ const scaffold = new AddonScaffold();
 async function createAddon(name, options) {
   try {
     info(`Creating new addon: ${name}`);
-    
+
     // Prepare configuration
     const config = {
       name,
       description: options.description,
-      author: options.author
+      author: options.author,
     };
 
     // Validate configuration
     const validationErrors = scaffold.validateConfig(config);
     if (validationErrors.length > 0) {
-      error('Configuration errors:');
-      validationErrors.forEach(err => error(`  - ${err}`));
+      error("Configuration errors:");
+      validationErrors.forEach((err) => error(`  - ${err}`));
       return;
     }
 
@@ -83,7 +83,7 @@ async function createAddon(name, options) {
           config.description = answer.length > 0 ? answer : defaultDesc;
         }
         if (!config.author) {
-          const defaultAuthor = 'Anonymous';
+          const defaultAuthor = "Anonymous";
           const answer = (await rl.question(`Author [${defaultAuthor}]: `)).trim();
           config.author = answer.length > 0 ? answer : defaultAuthor;
         }
@@ -97,25 +97,25 @@ async function createAddon(name, options) {
       config.description = `A Wealthfolio addon for ${name}`;
     }
     if (!config.author) {
-      config.author = 'Anonymous';
+      config.author = "Anonymous";
     }
-    
-    const addonId = name.toLowerCase().replace(/[^a-z0-9]/g, '-');
+
+    const addonId = name.toLowerCase().replace(/[^a-z0-9]/g, "-");
     const addonDir = path.resolve(process.cwd(), addonId);
-    
+
     // Check if directory already exists
     if (fs.existsSync(addonDir)) {
       error(`Directory ${addonId} already exists`);
       return;
     }
-    
+
     // Add current date for changelog
-    const currentDate = new Date().toISOString().split('T')[0];
+    const currentDate = new Date().toISOString().split("T")[0];
     config.currentDate = currentDate;
-    
+
     // Create addon using scaffold service
     const result = await scaffold.createAddon(config, addonDir);
-    
+
     success(`Addon ${name} created successfully!`);
     info(`Directory: ${result.addonDir}`);
     info(`Addon ID: ${result.addonId}`);
@@ -139,7 +139,6 @@ async function createAddon(name, options) {
     info(`  1. cd ${addonId}`);
     info(`  2. pnpm install`);
     info(`  3. pnpm run dev:server`);
-    
   } catch (err) {
     error(`Failed to create addon: ${err.message}`);
   }
@@ -148,34 +147,33 @@ async function createAddon(name, options) {
 // Command: dev
 async function startDev(port = 3001) {
   try {
-    const manifestPath = path.resolve(process.cwd(), 'manifest.json');
-    
+    const manifestPath = path.resolve(process.cwd(), "manifest.json");
+
     if (!fs.existsSync(manifestPath)) {
-      error('No manifest.json found. Are you in an addon directory?');
+      error("No manifest.json found. Are you in an addon directory?");
       return;
     }
-    
-    const manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf-8'));
-    
+
+    const manifest = JSON.parse(fs.readFileSync(manifestPath, "utf-8"));
+
     info(`Starting development server for ${manifest.name}`);
     info(`Server will run on http://localhost:${port}`);
-    
+
     // Start the development server
-    const devServerPath = path.resolve(__dirname, 'dev-server.js');
-    const child = spawn('node', [devServerPath, process.cwd(), port.toString()], {
-      stdio: 'inherit'
+    const devServerPath = path.resolve(__dirname, "dev-server.js");
+    const child = spawn("node", [devServerPath, process.cwd(), port.toString()], {
+      stdio: "inherit",
     });
-    
+
     // Handle cleanup on exit
-    process.on('SIGINT', () => {
-      child.kill('SIGINT');
+    process.on("SIGINT", () => {
+      child.kill("SIGINT");
       process.exit(0);
     });
-    
-    child.on('exit', (code) => {
+
+    child.on("exit", (code) => {
       process.exit(code);
     });
-    
   } catch (err) {
     error(`Failed to start development server: ${err.message}`);
   }
@@ -184,17 +182,16 @@ async function startDev(port = 3001) {
 // Command: build
 async function buildAddon() {
   try {
-    info('Building addon...');
-    
-    const packageJsonPath = path.resolve(process.cwd(), 'package.json');
+    info("Building addon...");
+
+    const packageJsonPath = path.resolve(process.cwd(), "package.json");
     if (!fs.existsSync(packageJsonPath)) {
-      error('No package.json found. Are you in an addon directory?');
+      error("No package.json found. Are you in an addon directory?");
       return;
     }
-    
-    await execAsync('pnpm run build');
-    success('Addon built successfully!');
-    
+
+    await execAsync("pnpm run build");
+    success("Addon built successfully!");
   } catch (err) {
     error(`Build failed: ${err.message}`);
   }
@@ -203,15 +200,14 @@ async function buildAddon() {
 // Command: package
 async function packageAddon() {
   try {
-    info('Packaging addon...');
-    
+    info("Packaging addon...");
+
     // Build first
     await buildAddon();
-    
+
     // Create package
-    await execAsync('pnpm run package');
-    success('Addon packaged successfully!');
-    
+    await execAsync("pnpm run package");
+    success("Addon packaged successfully!");
   } catch (err) {
     error(`Packaging failed: ${err.message}`);
   }
@@ -220,44 +216,43 @@ async function packageAddon() {
 // Command: test
 async function testSetup() {
   try {
-    info('Testing addon development setup...');
-    
+    info("Testing addon development setup...");
+
     // Check if manifest exists
-    const manifestPath = path.resolve(process.cwd(), 'manifest.json');
+    const manifestPath = path.resolve(process.cwd(), "manifest.json");
     if (!fs.existsSync(manifestPath)) {
-      error('❌ No manifest.json found. Are you in an addon directory?');
+      error("❌ No manifest.json found. Are you in an addon directory?");
       return;
     }
-    
-    const manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf-8'));
+
+    const manifest = JSON.parse(fs.readFileSync(manifestPath, "utf-8"));
     success(`✅ Found manifest for: ${manifest.name}`);
-    
+
     // Check if dist exists
-    const distPath = path.resolve(process.cwd(), 'dist');
+    const distPath = path.resolve(process.cwd(), "dist");
     if (!fs.existsSync(distPath)) {
-      warn('⚠️  No dist directory found. Run `pnpm run build` first.');
+      warn("⚠️  No dist directory found. Run `pnpm run build` first.");
     } else {
-      success('✅ Dist directory exists');
+      success("✅ Dist directory exists");
     }
-    
+
     // Check if dev server is running
     try {
-      const response = await fetch('http://localhost:3001/test');
+      const response = await fetch("http://localhost:3001/test");
       if (response.ok) {
         const data = await response.json();
-        success('✅ Development server is running');
+        success("✅ Development server is running");
         info(`   Server message: ${data.message}`);
       }
     } catch (error) {
-      warn('⚠️  Development server not running on port 3001');
-      info('   Start it with: pnpm run dev:server');
+      warn("⚠️  Development server not running on port 3001");
+      info("   Start it with: pnpm run dev:server");
     }
-    
-    info('\nNext steps:');
-    info('1. Start dev server: pnpm run dev:server');
-    info('2. Start main app in dev mode');
-    info('3. Check console: discoverAddons()');
-    
+
+    info("\nNext steps:");
+    info("1. Start dev server: pnpm run dev:server");
+    info("2. Start main app in dev mode");
+    info("3. Check console: discoverAddons()");
   } catch (err) {
     error(`Test failed: ${err.message}`);
   }
@@ -267,52 +262,36 @@ async function testSetup() {
 async function installAddon(zipPath) {
   try {
     info(`Installing addon from ${zipPath}`);
-    
+
     // This would integrate with the main app's addon installation
-    warn('Install command not yet implemented. Use the main app to install.');
-    
+    warn("Install command not yet implemented. Use the main app to install.");
   } catch (err) {
     error(`Installation failed: ${err.message}`);
   }
 }
 
 // CLI Setup
-program
-  .name('wealthfolio')
-  .description('Wealthfolio Addon Development CLI')
-  .version('1.0.0');
+program.name("wealthfolio").description("Wealthfolio Addon Development CLI").version("1.0.0");
 
 program
-  .command('create <name>')
-  .description('Create a new addon')
-  .option('-d, --description <desc>', 'Addon description')
-  .option('-a, --author <author>', 'Addon author')
+  .command("create <name>")
+  .description("Create a new addon")
+  .option("-d, --description <desc>", "Addon description")
+  .option("-a, --author <author>", "Addon author")
   .action(createAddon);
 
 program
-  .command('dev')
-  .description('Start development server')
-  .option('-p, --port <port>', 'Port number', '3001')
+  .command("dev")
+  .description("Start development server")
+  .option("-p, --port <port>", "Port number", "3001")
   .action((options) => startDev(parseInt(options.port)));
 
-program
-  .command('build')
-  .description('Build the addon')
-  .action(buildAddon);
+program.command("build").description("Build the addon").action(buildAddon);
 
-program
-  .command('package')
-  .description('Package the addon for distribution')
-  .action(packageAddon);
+program.command("package").description("Package the addon for distribution").action(packageAddon);
 
-program
-  .command('test')
-  .description('Test addon development setup')
-  .action(testSetup);
+program.command("test").description("Test addon development setup").action(testSetup);
 
-program
-  .command('install <zip>')
-  .description('Install an addon from zip file')
-  .action(installAddon);
+program.command("install <zip>").description("Install an addon from zip file").action(installAddon);
 
 program.parse();

package/dev-server.js

@@ -3,18 +3,18 @@
 
 /**
  * Addon Development Server
- * 
+ *
  * A simple development server for hot reloading addons during development.
  * This server watches for file changes and provides a hot reload endpoint.
  */
 
-const express = require('express');
-const cors = require('cors');
-const chokidar = require('chokidar');
-const path = require('path');
-const fs = require('fs');
-const { exec } = require('child_process');
-const { promisify } = require('util');
+const express = require("express");
+const cors = require("cors");
+const chokidar = require("chokidar");
+const path = require("path");
+const fs = require("fs");
+const { exec } = require("child_process");
+const { promisify } = require("util");
 
 const execAsync = promisify(exec);
 
@@ -25,7 +25,7 @@ class AddonDevServer {
     this.lastModified = new Date();
     this.buildInProgress = false;
     this.viteWatcher = null;
-    
+
     this.setupMiddleware();
     this.setupRoutes();
     this.setupFileWatcher();
@@ -33,76 +33,80 @@ class AddonDevServer {
   }
 
   setupMiddleware() {
-    this.app.use(cors({
-      origin: ['http://localhost:1420', 'http://localhost:3000'],
-      credentials: true
-    }));
+    this.app.use(
+      cors({
+        origin: ["http://localhost:1420", "http://localhost:3000"],
+        credentials: true,
+      }),
+    );
     this.app.use(express.static(this.config.addonPath));
   }
 
   setupRoutes() {
     // Health check endpoint
-    this.app.get('/health', (req, res) => {
+    this.app.get("/health", (req, res) => {
       res.json({
-        status: 'ok',
+        status: "ok",
         timestamp: new Date().toISOString(),
-        addonPath: this.config.addonPath
+        addonPath: this.config.addonPath,
       });
     });
 
     // Addon status endpoint
-    this.app.get('/status', (req, res) => {
+    this.app.get("/status", (req, res) => {
       res.json({
         lastModified: this.lastModified.toISOString(),
         buildInProgress: this.buildInProgress,
-        files: this.getFileList()
+        files: this.getFileList(),
       });
     });
 
     // Serve addon manifest
-    this.app.get('/manifest.json', (req, res) => {
+    this.app.get("/manifest.json", (req, res) => {
       try {
         const manifestPath = path.resolve(this.config.manifestPath);
         if (fs.existsSync(manifestPath)) {
-          const manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf-8'));
+          const manifest = JSON.parse(fs.readFileSync(manifestPath, "utf-8"));
           res.json(manifest);
         } else {
-          res.status(404).json({ error: 'Manifest not found' });
+          res.status(404).json({ error: "Manifest not found" });
         }
       } catch (error) {
-        res.status(500).json({ error: 'Failed to read manifest' });
+        res.status(500).json({ error: "Failed to read manifest" });
       }
     });
 
     // Serve addon code
-    this.app.get('/addon.js', async (req, res) => {
+    this.app.get("/addon.js", async (req, res) => {
       try {
-        const addonFile = path.resolve(this.config.addonPath, 'dist/addon.js');
+        const addonFile = path.resolve(this.config.addonPath, "dist/addon.js");
         console.log(`📦 Serving addon.js from: ${addonFile}`);
-        
+
         // Wait for file to exist (with timeout)
         const fileExists = await this.waitForFile(addonFile, 3000);
-        
+
         if (fileExists) {
-          const code = fs.readFileSync(addonFile, 'utf-8');
-          res.type('application/javascript').send(code);
+          const code = fs.readFileSync(addonFile, "utf-8");
+          res.type("application/javascript").send(code);
         } else {
           console.error(`❌ Addon file not found at: ${addonFile}`);
-          res.status(404).json({ error: 'Addon file not found. Run build first.', path: addonFile });
+          res
+            .status(404)
+            .json({ error: "Addon file not found. Run build first.", path: addonFile });
         }
       } catch (error) {
         console.error(`❌ Error serving addon.js:`, error);
-        res.status(500).json({ error: 'Failed to read addon file', details: error.message });
+        res.status(500).json({ error: "Failed to read addon file", details: error.message });
       }
     });
 
     // Hot reload endpoint
-    this.app.get('/reload', (req, res) => {
+    this.app.get("/reload", (req, res) => {
       res.json({
-        message: 'Reload triggered',
-        timestamp: new Date().toISOString()
+        message: "Reload triggered",
+        timestamp: new Date().toISOString(),
       });
-      
+
       // Trigger rebuild if configured
       if (this.config.buildCommand) {
         this.triggerBuild();
@@ -110,26 +114,26 @@ class AddonDevServer {
     });
 
     // File listing for debugging
-    this.app.get('/files', (req, res) => {
+    this.app.get("/files", (req, res) => {
       res.json({
         files: this.getFileList(),
-        watchPaths: this.config.watchPaths
+        watchPaths: this.config.watchPaths,
       });
     });
 
     // Test endpoint for connectivity
-    this.app.get('/test', (req, res) => {
+    this.app.get("/test", (req, res) => {
       res.json({
-        message: 'Addon development server is working!',
+        message: "Addon development server is working!",
         addonPath: this.config.addonPath,
         timestamp: new Date().toISOString(),
-        manifest: this.getManifestInfo()
+        manifest: this.getManifestInfo(),
       });
     });
 
     // Debug endpoint for troubleshooting
-    this.app.get('/debug', (req, res) => {
-      const addonFile = path.resolve(this.config.addonPath, 'dist/addon.js');
+    this.app.get("/debug", (req, res) => {
+      const addonFile = path.resolve(this.config.addonPath, "dist/addon.js");
       res.json({
         lastModified: this.lastModified.toISOString(),
         buildInProgress: this.buildInProgress,
@@ -139,18 +143,18 @@ class AddonDevServer {
         addonFile: {
           path: addonFile,
           exists: fs.existsSync(addonFile),
-          size: fs.existsSync(addonFile) ? fs.statSync(addonFile).size : 0
+          size: fs.existsSync(addonFile) ? fs.statSync(addonFile).size : 0,
         },
         config: {
           port: this.config.port,
-          buildCommand: this.config.buildCommand
-        }
+          buildCommand: this.config.buildCommand,
+        },
       });
     });
 
     // Simple ping endpoint
-    this.app.get('/ping', (req, res) => {
-      res.json({ message: 'pong', timestamp: new Date().toISOString() });
+    this.app.get("/ping", (req, res) => {
+      res.json({ message: "pong", timestamp: new Date().toISOString() });
     });
   }
 
@@ -158,44 +162,44 @@ class AddonDevServer {
     const watcher = chokidar.watch(this.config.watchPaths, {
       ignored: /node_modules|\.git/,
       persistent: true,
-      ignoreInitial: true
+      ignoreInitial: true,
     });
 
-    watcher.on('change', (filePath) => {
+    watcher.on("change", (filePath) => {
       console.log(`📝 File changed: ${filePath}`);
       // Don't trigger manual build since Vite is already watching
       // Just update the timestamp for status endpoint
       this.lastModified = new Date();
     });
 
-    watcher.on('add', (filePath) => {
+    watcher.on("add", (filePath) => {
       console.log(`➕ File added: ${filePath}`);
       this.lastModified = new Date();
     });
 
-    watcher.on('unlink', (filePath) => {
+    watcher.on("unlink", (filePath) => {
       console.log(`➖ File removed: ${filePath}`);
       this.lastModified = new Date();
     });
 
-    console.log(`👀 Watching files: ${this.config.watchPaths.join(', ')}`);
+    console.log(`👀 Watching files: ${this.config.watchPaths.join(", ")}`);
   }
 
   async triggerBuild() {
     if (this.buildInProgress || !this.config.buildCommand) return;
-    
+
     this.buildInProgress = true;
     console.log(`🔨 Building addon with: ${this.config.buildCommand}`);
-    
+
     try {
       await execAsync(this.config.buildCommand, {
-        cwd: this.config.addonPath
+        cwd: this.config.addonPath,
       });
-      
-      console.log('✅ Build completed successfully');
+
+      console.log("✅ Build completed successfully");
       this.lastModified = new Date();
     } catch (error) {
-      console.error('❌ Build failed:', error);
+      console.error("❌ Build failed:", error);
     } finally {
       this.buildInProgress = false;
     }
@@ -203,9 +207,9 @@ class AddonDevServer {
 
   getFileList() {
     try {
-      const distPath = path.resolve(this.config.addonPath, 'dist');
+      const distPath = path.resolve(this.config.addonPath, "dist");
       if (fs.existsSync(distPath)) {
-        return fs.readdirSync(distPath).map(file => `dist/${file}`);
+        return fs.readdirSync(distPath).map((file) => `dist/${file}`);
       }
       return [];
     } catch (error) {
@@ -217,7 +221,7 @@ class AddonDevServer {
     try {
       const manifestPath = path.resolve(this.config.manifestPath);
       if (fs.existsSync(manifestPath)) {
-        return JSON.parse(fs.readFileSync(manifestPath, 'utf-8'));
+        return JSON.parse(fs.readFileSync(manifestPath, "utf-8"));
       }
       return null;
     } catch (error) {
@@ -231,7 +235,7 @@ class AddonDevServer {
   async waitForFile(filePath, timeout = 3000) {
     const startTime = Date.now();
     const checkInterval = 100;
-    
+
     while (Date.now() - startTime < timeout) {
       if (fs.existsSync(filePath)) {
         // Additional check to ensure file is fully written
@@ -244,50 +248,50 @@ class AddonDevServer {
           // File might be in the process of being written
         }
       }
-      
-      await new Promise(resolve => setTimeout(resolve, checkInterval));
+
+      await new Promise((resolve) => setTimeout(resolve, checkInterval));
     }
-    
+
     return false;
   }
 
   startViteWatcher() {
     if (!this.config.buildCommand) return;
-    
-    console.log('🔨 Starting Vite in watch mode...');
-    
+
+    console.log("🔨 Starting Vite in watch mode...");
+
     // Start vite build in watch mode
-    const { spawn } = require('child_process');
-    this.viteWatcher = spawn('npm', ['run', 'dev'], {
+    const { spawn } = require("child_process");
+    this.viteWatcher = spawn("npm", ["run", "dev"], {
       cwd: this.config.addonPath,
-      stdio: ['ignore', 'pipe', 'pipe']
+      stdio: ["ignore", "pipe", "pipe"],
     });
-    
-    this.viteWatcher.stdout.on('data', (data) => {
+
+    this.viteWatcher.stdout.on("data", (data) => {
       const output = data.toString();
       console.log(`Vite output: ${output.trim()}`);
-      
-      if (output.includes('build started')) {
+
+      if (output.includes("build started")) {
         this.buildInProgress = true;
       }
-      
-      if (output.includes('built in')) {
+
+      if (output.includes("built in")) {
         console.log(`✅ Vite rebuild completed`);
         this.lastModified = new Date();
         this.buildInProgress = false;
       }
-      
-      if (output.includes('watching for file changes')) {
+
+      if (output.includes("watching for file changes")) {
         console.log(`✅ Vite watcher ready`);
         this.buildInProgress = false;
       }
     });
-    
-    this.viteWatcher.stderr.on('data', (data) => {
+
+    this.viteWatcher.stderr.on("data", (data) => {
       console.error(`Vite error: ${data}`);
     });
-    
-    this.viteWatcher.on('close', (code) => {
+
+    this.viteWatcher.on("close", (code) => {
       if (code !== 0) {
         console.error(`Vite watcher exited with code ${code}`);
       }
@@ -299,30 +303,30 @@ class AddonDevServer {
       console.log(`🚀 Addon dev server running on http://localhost:${this.config.port}`);
       console.log(`📁 Serving from: ${this.config.addonPath}`);
       console.log(`📋 Manifest: ${this.config.manifestPath}`);
-      console.log(`👀 Watching files: ${this.config.watchPaths.join(', ')}`);
-      
+      console.log(`👀 Watching files: ${this.config.watchPaths.join(", ")}`);
+
       if (this.config.buildCommand) {
         console.log(`🔨 Build command: ${this.config.buildCommand}`);
       }
     });
 
     // Handle graceful shutdown
-    process.on('SIGINT', () => {
+    process.on("SIGINT", () => {
       this.stop();
       process.exit(0);
     });
 
-    process.on('SIGTERM', () => {
+    process.on("SIGTERM", () => {
       this.stop();
       process.exit(0);
     });
   }
 
   stop() {
-    console.log('🛑 Shutting down dev server...');
-    
+    console.log("🛑 Shutting down dev server...");
+
     if (this.viteWatcher) {
-      this.viteWatcher.kill('SIGTERM');
+      this.viteWatcher.kill("SIGTERM");
       this.viteWatcher = null;
     }
   }
@@ -333,16 +337,13 @@ function main() {
   const args = process.argv.slice(2);
   const addonPath = args[0] || process.cwd();
   const port = parseInt(args[1]) || 3001;
-  
+
   const config = {
     port,
     addonPath: path.resolve(addonPath),
-    manifestPath: path.resolve(addonPath, 'manifest.json'),
-    buildCommand: 'npm run build',
-    watchPaths: [
-      path.resolve(addonPath, 'src'),
-      path.resolve(addonPath, 'manifest.json')
-    ]
+    manifestPath: path.resolve(addonPath, "manifest.json"),
+    buildCommand: "npm run build",
+    watchPaths: [path.resolve(addonPath, "src"), path.resolve(addonPath, "manifest.json")],
   };
 
   // Check if addon directory exists

package/index.js

@@ -1,3 +1,3 @@
 module.exports = {
-  AddonDevServer: require('./dev-server').AddonDevServer
+  AddonDevServer: require("./dev-server").AddonDevServer,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wealthfolio/addon-dev-tools",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "Development tools for Wealthfolio addons - hot reload server and CLI",
   "main": "index.js",
   "bin": {
@@ -14,7 +14,6 @@
     "hot-reload"
   ],
   "author": "Wealthfolio Team",
-
   "license": "MIT",
   "repository": {
     "type": "git",

package/scaffold.js

@@ -1,12 +1,12 @@
-const fs = require('fs');
-const path = require('path');
+const fs = require("fs");
+const path = require("path");
 
 /**
  * Scaffold service for creating new addons from templates
  */
 class AddonScaffold {
   constructor() {
-    this.templatesDir = path.join(__dirname, 'templates');
+    this.templatesDir = path.join(__dirname, "templates");
   }
 
   /**
@@ -14,12 +14,13 @@ class AddonScaffold {
    */
   getAvailableTemplates() {
     if (!fs.existsSync(this.templatesDir)) {
-      throw new Error('Templates directory not found');
+      throw new Error("Templates directory not found");
     }
 
-    return fs.readdirSync(this.templatesDir)
-      .filter(file => file.endsWith('.template'))
-      .map(file => file.replace('.template', ''));
+    return fs
+      .readdirSync(this.templatesDir)
+      .filter((file) => file.endsWith(".template"))
+      .map((file) => file.replace(".template", ""));
   }
 
   /**
@@ -27,12 +28,12 @@ class AddonScaffold {
    */
   loadTemplate(templateName) {
     const templatePath = path.join(this.templatesDir, `${templateName}.template`);
-    
+
     if (!fs.existsSync(templatePath)) {
       throw new Error(`Template ${templateName} not found`);
     }
 
-    return fs.readFileSync(templatePath, 'utf-8');
+    return fs.readFileSync(templatePath, "utf-8");
   }
 
   /**
@@ -41,7 +42,7 @@ class AddonScaffold {
   processTemplate(content, replacements) {
     let result = content;
     for (const [key, value] of Object.entries(replacements)) {
-      const pattern = new RegExp(`{{${key}}}`, 'g');
+      const pattern = new RegExp(`{{${key}}}`, "g");
       result = result.replace(pattern, value);
     }
     return result;
@@ -51,9 +52,9 @@ class AddonScaffold {
    * Generate replacements object from addon config
    */
   generateReplacements(config) {
-    const addonId = config.name.toLowerCase().replace(/[^a-z0-9]/g, '-');
+    const addonId = config.name.toLowerCase().replace(/[^a-z0-9]/g, "-");
     const packageName = `wealthfolio-${addonId}-addon`;
-    const componentName = config.name.replace(/[^a-zA-Z0-9]/g, '');
+    const componentName = config.name.replace(/[^a-zA-Z0-9]/g, "");
 
     return {
       addonId,
@@ -61,7 +62,7 @@ class AddonScaffold {
       packageName,
       componentName,
       description: config.description || `A Wealthfolio addon for ${config.name}`,
-      author: config.author || 'Anonymous'
+      author: config.author || "Anonymous",
     };
   }
 
@@ -70,22 +71,22 @@ class AddonScaffold {
    */
   async createAddon(config, targetDir) {
     const replacements = this.generateReplacements(config);
-    
+
     // Create directory structure
     if (!fs.existsSync(targetDir)) {
       fs.mkdirSync(targetDir, { recursive: true });
     }
-    
+
     // Create src directory and subdirectories
-    const srcDir = path.join(targetDir, 'src');
-    const srcSubDirs = ['components', 'hooks', 'pages', 'lib', 'types'];
-    
+    const srcDir = path.join(targetDir, "src");
+    const srcSubDirs = ["components", "hooks", "pages", "lib", "types"];
+
     if (!fs.existsSync(srcDir)) {
       fs.mkdirSync(srcDir);
     }
-    
+
     // Create all subdirectories
-    srcSubDirs.forEach(subDir => {
+    srcSubDirs.forEach((subDir) => {
       const subDirPath = path.join(srcDir, subDir);
       if (!fs.existsSync(subDirPath)) {
         fs.mkdirSync(subDirPath, { recursive: true });
@@ -94,18 +95,18 @@ class AddonScaffold {
 
     // Template file mappings
     const fileTemplates = [
-      { template: 'manifest.json', output: 'manifest.json' },
-      { template: 'package.json', output: 'package.json' },
-      { template: 'vite.config.ts', output: 'vite.config.ts' },
-      { template: 'tsconfig.json', output: 'tsconfig.json' },
-      { template: 'README.md', output: 'README.md' },
-      { template: 'CHANGELOG.md', output: 'CHANGELOG.md' },
-      { template: 'addon.tsx', output: 'src/addon.tsx' },
-      { template: 'components-index.ts', output: 'src/components/index.ts' },
-      { template: 'hooks-index.ts', output: 'src/hooks/index.ts' },
-      { template: 'pages-index.ts', output: 'src/pages/index.ts' },
-      { template: 'lib-index.ts', output: 'src/lib/index.ts' },
-      { template: 'types-index.ts', output: 'src/types/index.ts' }
+      { template: "manifest.json", output: "manifest.json" },
+      { template: "package.json", output: "package.json" },
+      { template: "vite.config.ts", output: "vite.config.ts" },
+      { template: "tsconfig.json", output: "tsconfig.json" },
+      { template: "README.md", output: "README.md" },
+      { template: "CHANGELOG.md", output: "CHANGELOG.md" },
+      { template: "addon.tsx", output: "src/addon.tsx" },
+      { template: "components-index.ts", output: "src/components/index.ts" },
+      { template: "hooks-index.ts", output: "src/hooks/index.ts" },
+      { template: "pages-index.ts", output: "src/pages/index.ts" },
+      { template: "lib-index.ts", output: "src/lib/index.ts" },
+      { template: "types-index.ts", output: "src/types/index.ts" },
     ];
 
     // Process and write each template
@@ -114,13 +115,13 @@ class AddonScaffold {
         const templateContent = this.loadTemplate(template);
         const processedContent = this.processTemplate(templateContent, replacements);
         const outputPath = path.join(targetDir, output);
-        
+
         // Ensure directory exists
         const outputDir = path.dirname(outputPath);
         if (!fs.existsSync(outputDir)) {
           fs.mkdirSync(outputDir, { recursive: true });
         }
-        
+
         fs.writeFileSync(outputPath, processedContent);
       } catch (error) {
         throw new Error(`Failed to process template ${template}: ${error.message}`);
@@ -130,7 +131,7 @@ class AddonScaffold {
     return {
       addonDir: targetDir,
       addonId: replacements.addonId,
-      packageName: replacements.packageName
+      packageName: replacements.packageName,
     };
   }
 
@@ -140,20 +141,20 @@ class AddonScaffold {
   validateConfig(config) {
     const errors = [];
 
-    if (!config.name || typeof config.name !== 'string') {
-      errors.push('Addon name is required and must be a string');
+    if (!config.name || typeof config.name !== "string") {
+      errors.push("Addon name is required and must be a string");
     }
 
     if (config.name && config.name.trim().length === 0) {
-      errors.push('Addon name cannot be empty');
+      errors.push("Addon name cannot be empty");
     }
 
-    if (config.description && typeof config.description !== 'string') {
-      errors.push('Description must be a string');
+    if (config.description && typeof config.description !== "string") {
+      errors.push("Description must be a string");
     }
 
-    if (config.author && typeof config.author !== 'string') {
-      errors.push('Author must be a string');
+    if (config.author && typeof config.author !== "string") {
+      errors.push("Author must be a string");
     }
 
     return errors;

package/templates/package.json.template

@@ -17,19 +17,21 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@wealthfolio/addon-sdk": "^1.0.0",
-    "@wealthfolio/ui": "^1.0.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "@wealthfolio/addon-sdk": "^2.0.0",
+    "@wealthfolio/ui": "^2.0.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1"
   },
   "devDependencies": {
-    "@wealthfolio/addon-dev-tools": "^1.0.0",
-    "@types/node": "^22.14.0",
-    "@types/react": "^18.3.11",
-    "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react": "^4.4.1",
+    "@tailwindcss/vite": "^4.1.13",
+    "@wealthfolio/addon-dev-tools": "^2.0.0",
+    "@types/node": "^20.0.0",
+    "@types/react": "^19.1.1",
+    "@types/react-dom": "^19.1.1",
+    "@vitejs/plugin-react": "^5.0.2",
     "rollup-plugin-external-globals": "^0.13.0",
-    "typescript": "^5.8.3",
-    "vite": "^6.2.7"
+    "tailwindcss": "^4.1.13",
+    "typescript": "^5.9.2",
+    "vite": "^7.1.5"
   }
 }

package/templates/vite.config.ts.template

@@ -1,9 +1,10 @@
-import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
+import { defineConfig } from 'vite';
 import externalGlobals from 'rollup-plugin-external-globals';
 
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), tailwindcss()],
   define: {
     'process.env.NODE_ENV': JSON.stringify('production'),
   },