@vizzly-testing/cli 0.10.0 → 0.10.1

package/dist/cli.js

@@ -34,8 +34,9 @@ let logger = createComponentLogger('CLI', {
   verbose: verboseMode || false
 });
 let container = await createServiceContainer(config);
+let plugins = [];
 try {
-  let plugins = await loadPlugins(configPath, config, logger);
+  plugins = await loadPlugins(configPath, config, logger);
   for (let plugin of plugins) {
     try {
       // Add timeout protection for plugin registration (5 seconds)
@@ -58,7 +59,8 @@ program.command('init').description('Initialize Vizzly in your project').option(
   const globalOptions = program.opts();
   await init({
     ...globalOptions,
-    ...options
+    ...options,
+    plugins
   });
 });
 program.command('upload').description('Upload screenshots to Vizzly').argument('<path>', 'Path to screenshots directory or file').option('-b, --build-name <name>', 'Build name for grouping').option('-m, --metadata <json>', 'Additional metadata as JSON').option('--batch-size <n>', 'Upload batch size', v => parseInt(v, 10)).option('--upload-timeout <ms>', 'Upload timeout in milliseconds', v => parseInt(v, 10)).option('--branch <branch>', 'Git branch').option('--commit <sha>', 'Git commit SHA').option('--message <msg>', 'Commit message').option('--environment <env>', 'Environment name', 'test').option('--threshold <number>', 'Comparison threshold', parseFloat).option('--token <token>', 'API token override').option('--wait', 'Wait for build completion').option('--upload-all', 'Upload all screenshots without SHA deduplication').option('--parallel-id <id>', 'Unique identifier for parallel test execution').action(async (path, options) => {

package/dist/commands/init.js

@@ -3,15 +3,19 @@ import fs from 'fs/promises';
 import path from 'path';
 import { VizzlyError } from '../errors/vizzly-error.js';
 import { createComponentLogger } from '../utils/logger-factory.js';
+import { loadPlugins } from '../plugin-loader.js';
+import { loadConfig } from '../utils/config-loader.js';
+import { z } from 'zod';
 
 /**
  * Simple configuration setup for Vizzly CLI
  */
 export class InitCommand {
-  constructor(logger) {
+  constructor(logger, plugins = []) {
     this.logger = logger || createComponentLogger('INIT', {
       level: 'info'
     });
+    this.plugins = plugins;
   }
   async run(options = {}) {
     this.logger.info('🎯 Initializing Vizzly configuration...\n');
@@ -37,7 +41,7 @@ export class InitCommand {
     }
   }
   async generateConfigFile(configPath) {
-    const configContent = `export default {
+    let coreConfig = `export default {
   // Server configuration (for run command)
   server: {
     port: 47392,
@@ -65,11 +69,103 @@ export class InitCommand {
   // TDD configuration
   tdd: {
     openReport: false // Whether to auto-open HTML report in browser
-  }
-};
-`;
-    await fs.writeFile(configPath, configContent, 'utf8');
+  }`;
+
+    // Add plugin configurations
+    let pluginConfigs = this.generatePluginConfigs();
+    if (pluginConfigs) {
+      coreConfig += ',\n\n' + pluginConfigs;
+    }
+    coreConfig += '\n};\n';
+    await fs.writeFile(configPath, coreConfig, 'utf8');
     this.logger.info(`📄 Created vizzly.config.js`);
+
+    // Log discovered plugins
+    let pluginsWithConfig = this.plugins.filter(p => p.configSchema);
+    if (pluginsWithConfig.length > 0) {
+      this.logger.info(`   Added config for ${pluginsWithConfig.length} plugin(s):`);
+      pluginsWithConfig.forEach(p => {
+        this.logger.info(`   - ${p.name}`);
+      });
+    }
+  }
+
+  /**
+   * Generate configuration sections for plugins
+   * @returns {string} Plugin config sections as formatted string
+   */
+  generatePluginConfigs() {
+    let sections = [];
+    for (let plugin of this.plugins) {
+      if (plugin.configSchema) {
+        let configStr = this.formatPluginConfig(plugin);
+        if (configStr) {
+          sections.push(configStr);
+        }
+      }
+    }
+    return sections.length > 0 ? sections.join(',\n\n') : '';
+  }
+
+  /**
+   * Format a plugin's config schema as JavaScript code
+   * @param {Object} plugin - Plugin with configSchema
+   * @returns {string} Formatted config string
+   */
+  formatPluginConfig(plugin) {
+    try {
+      // Validate config schema structure with Zod (defensive check)
+      let configValueSchema = z.lazy(() => z.union([z.string(), z.number(), z.boolean(), z.null(), z.array(configValueSchema), z.record(configValueSchema)]));
+      let configSchemaValidator = z.record(configValueSchema);
+      configSchemaValidator.parse(plugin.configSchema);
+      let configEntries = [];
+      for (let [key, value] of Object.entries(plugin.configSchema)) {
+        let formattedValue = this.formatValue(value, 1);
+        configEntries.push(`  // ${plugin.name} plugin configuration\n  ${key}: ${formattedValue}`);
+      }
+      return configEntries.join(',\n\n');
+    } catch (error) {
+      if (error instanceof z.ZodError) {
+        let messages = error.errors.map(e => `${e.path.join('.')}: ${e.message}`);
+        this.logger.warn(`Invalid config schema for plugin ${plugin.name}: ${messages.join(', ')}`);
+      } else {
+        this.logger.warn(`Failed to format config for plugin ${plugin.name}: ${error.message}`);
+      }
+      return '';
+    }
+  }
+
+  /**
+   * Format a JavaScript value with proper indentation
+   * @param {*} value - Value to format
+   * @param {number} depth - Current indentation depth
+   * @returns {string} Formatted value
+   */
+  formatValue(value, depth = 0) {
+    let indent = '  '.repeat(depth);
+    let nextIndent = '  '.repeat(depth + 1);
+    if (value === null) return 'null';
+    if (value === undefined) return 'undefined';
+    if (typeof value === 'string') return `'${value.replace(/'/g, "\\'")}'`;
+    if (typeof value === 'number' || typeof value === 'boolean') return String(value);
+    if (Array.isArray(value)) {
+      if (value.length === 0) return '[]';
+      let items = value.map(item => {
+        let formatted = this.formatValue(item, depth + 1);
+        return `${nextIndent}${formatted}`;
+      });
+      return `[\n${items.join(',\n')}\n${indent}]`;
+    }
+    if (typeof value === 'object') {
+      let entries = Object.entries(value);
+      if (entries.length === 0) return '{}';
+      let props = entries.map(([k, v]) => {
+        let formatted = this.formatValue(v, depth + 1);
+        return `${nextIndent}${k}: ${formatted}`;
+      });
+      return `{\n${props.join(',\n')}\n${indent}}`;
+    }
+    return String(value);
   }
   showNextSteps() {
     this.logger.info('\n📚 Next steps:');
@@ -92,12 +188,28 @@ export class InitCommand {
 
 // Export factory function for CLI
 export function createInitCommand(options) {
-  const command = new InitCommand(options.logger);
+  const command = new InitCommand(options.logger, options.plugins);
   return () => command.run(options);
 }
 
 // Simple export for direct CLI usage
 export async function init(options = {}) {
-  const command = new InitCommand();
+  let plugins = [];
+
+  // Try to load plugins if not provided
+  if (!options.plugins) {
+    try {
+      let config = await loadConfig(options.config, {});
+      let logger = createComponentLogger('INIT', {
+        level: 'debug'
+      });
+      plugins = await loadPlugins(options.config, config, logger);
+    } catch {
+      // Silent fail - plugins are optional for init
+    }
+  } else {
+    plugins = options.plugins;
+  }
+  const command = new InitCommand(null, plugins);
   return await command.run(options);
 }

package/dist/plugin-loader.js

@@ -2,6 +2,7 @@ import { glob } from 'glob';
 import { readFileSync } from 'fs';
 import { resolve, dirname } from 'path';
 import { pathToFileURL } from 'url';
+import { z } from 'zod';
 
 /**
  * Load and register plugins from node_modules and config
@@ -128,23 +129,43 @@ async function loadPlugin(pluginPath) {
   }
 }
 
+/**
+ * Zod schema for validating plugin structure
+ */
+const pluginSchema = z.object({
+  name: z.string().min(1, 'Plugin name is required'),
+  version: z.string().optional(),
+  register: z.function(z.tuple([z.any(), z.any()]), z.void()),
+  configSchema: z.record(z.any()).optional()
+});
+
+/**
+ * Zod schema for validating plugin config values
+ * Supports: string, number, boolean, null, arrays, and nested objects
+ */
+const configValueSchema = z.lazy(() => z.union([z.string(), z.number(), z.boolean(), z.null(), z.array(configValueSchema), z.record(configValueSchema)]));
+
 /**
  * Validate plugin has required structure
  * @param {Object} plugin - Plugin object
  * @throws {Error} If plugin structure is invalid
  */
 function validatePluginStructure(plugin) {
-  if (!plugin || typeof plugin !== 'object') {
-    throw new Error('Plugin must export an object');
-  }
-  if (!plugin.name || typeof plugin.name !== 'string') {
-    throw new Error('Plugin must have a name (string)');
-  }
-  if (!plugin.register || typeof plugin.register !== 'function') {
-    throw new Error('Plugin must have a register function');
-  }
-  if (plugin.version && typeof plugin.version !== 'string') {
-    throw new Error('Plugin version must be a string');
+  try {
+    // Validate basic plugin structure
+    pluginSchema.parse(plugin);
+
+    // If configSchema exists, validate it contains valid config values
+    if (plugin.configSchema) {
+      let configSchemaValidator = z.record(configValueSchema);
+      configSchemaValidator.parse(plugin.configSchema);
+    }
+  } catch (error) {
+    if (error instanceof z.ZodError) {
+      let messages = error.errors.map(e => `${e.path.join('.')}: ${e.message}`);
+      throw new Error(`Invalid plugin structure: ${messages.join(', ')}`);
+    }
+    throw error;
   }
 }
 

package/dist/types/commands/init.d.ts

@@ -5,10 +5,29 @@ export function init(options?: {}): Promise<void>;
  * Simple configuration setup for Vizzly CLI
  */
 export class InitCommand {
-    constructor(logger: any);
+    constructor(logger: any, plugins?: any[]);
     logger: any;
+    plugins: any[];
     run(options?: {}): Promise<void>;
     generateConfigFile(configPath: any): Promise<void>;
+    /**
+     * Generate configuration sections for plugins
+     * @returns {string} Plugin config sections as formatted string
+     */
+    generatePluginConfigs(): string;
+    /**
+     * Format a plugin's config schema as JavaScript code
+     * @param {Object} plugin - Plugin with configSchema
+     * @returns {string} Formatted config string
+     */
+    formatPluginConfig(plugin: any): string;
+    /**
+     * Format a JavaScript value with proper indentation
+     * @param {*} value - Value to format
+     * @param {number} depth - Current indentation depth
+     * @returns {string} Formatted value
+     */
+    formatValue(value: any, depth?: number): string;
     showNextSteps(): void;
     fileExists(filePath: any): Promise<boolean>;
 }

package/dist/types/utils/config-schema.d.ts

@@ -35,14 +35,14 @@ export let vizzlyConfigSchema: z.ZodDefault<z.ZodObject<{
         commit: z.ZodOptional<z.ZodString>;
         message: z.ZodOptional<z.ZodString>;
     }, "strip", z.ZodTypeAny, {
-        message?: string;
         name?: string;
+        message?: string;
         environment?: string;
         branch?: string;
         commit?: string;
     }, {
-        message?: string;
         name?: string;
+        message?: string;
         environment?: string;
         branch?: string;
         commit?: string;
@@ -101,14 +101,14 @@ export let vizzlyConfigSchema: z.ZodDefault<z.ZodObject<{
         commit: z.ZodOptional<z.ZodString>;
         message: z.ZodOptional<z.ZodString>;
     }, "strip", z.ZodTypeAny, {
-        message?: string;
         name?: string;
+        message?: string;
         environment?: string;
         branch?: string;
         commit?: string;
     }, {
-        message?: string;
         name?: string;
+        message?: string;
         environment?: string;
         branch?: string;
         commit?: string;
@@ -167,14 +167,14 @@ export let vizzlyConfigSchema: z.ZodDefault<z.ZodObject<{
         commit: z.ZodOptional<z.ZodString>;
         message: z.ZodOptional<z.ZodString>;
     }, "strip", z.ZodTypeAny, {
-        message?: string;
         name?: string;
+        message?: string;
         environment?: string;
         branch?: string;
         commit?: string;
     }, {
-        message?: string;
         name?: string;
+        message?: string;
         environment?: string;
         branch?: string;
         commit?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vizzly-testing/cli",
-  "version": "0.10.0",
+  "version": "0.10.1",
   "description": "Visual review platform for UI developers and designers",
   "keywords": [
     "visual-testing",
@@ -84,7 +84,7 @@
     "form-data": "^4.0.0",
     "glob": "^11.0.3",
     "odiff-bin": "^3.2.1",
-    "zod": "^3.24.1"
+    "zod": "^3.25.76"
   },
   "devDependencies": {
     "@babel/cli": "^7.28.0",