@vizzly-testing/cli 0.16.4 → 0.18.0

package/dist/services/config-service.js

@@ -3,12 +3,12 @@
  * Manages reading and writing Vizzly configuration files
  */
 
+import { readFile, writeFile } from 'node:fs/promises';
+import { join } from 'node:path';
 import { cosmiconfigSync } from 'cosmiconfig';
-import { writeFile, readFile } from 'fs/promises';
-import { join } from 'path';
 import { VizzlyError } from '../errors/vizzly-error.js';
 import { validateVizzlyConfigWithDefaults } from '../utils/config-schema.js';
-import { loadGlobalConfig, saveGlobalConfig, getGlobalConfigPath } from '../utils/global-config.js';
+import { getGlobalConfigPath, loadGlobalConfig, saveGlobalConfig } from '../utils/global-config.js';
 
 /**
  * ConfigService for reading and writing configuration
@@ -44,7 +44,7 @@ export class ConfigService {
    * @returns {Promise<Object>}
    */
   async _getProjectConfig() {
-    let result = this.explorer.search(this.projectRoot);
+    const result = this.explorer.search(this.projectRoot);
     if (!result || !result.config) {
       return {
         config: {},
@@ -52,7 +52,7 @@ export class ConfigService {
         isEmpty: true
       };
     }
-    let config = result.config.default || result.config;
+    const config = result.config.default || result.config;
     return {
       config,
       filepath: result.filepath,
@@ -66,7 +66,7 @@ export class ConfigService {
    * @returns {Promise<Object>}
    */
   async _getGlobalConfig() {
-    let globalConfig = await loadGlobalConfig();
+    const globalConfig = await loadGlobalConfig();
     return {
       config: globalConfig,
       filepath: getGlobalConfigPath(),
@@ -80,15 +80,15 @@ export class ConfigService {
    * @returns {Promise<Object>}
    */
   async _getMergedConfig() {
-    let projectConfigData = await this._getProjectConfig();
-    let globalConfigData = await this._getGlobalConfig();
+    const projectConfigData = await this._getProjectConfig();
+    const globalConfigData = await this._getGlobalConfig();
 
     // Build config with source tracking
-    let mergedConfig = {};
-    let sources = {};
+    const mergedConfig = {};
+    const sources = {};
 
     // Layer 1: Defaults
-    let defaults = {
+    const defaults = {
       apiUrl: 'https://app.vizzly.dev',
       server: {
         port: 47392,
@@ -104,7 +104,7 @@ export class ConfigService {
         timeout: 30000
       },
       comparison: {
-        threshold: 0.1
+        threshold: 2.0
       },
       tdd: {
         openReport: false
@@ -133,7 +133,7 @@ export class ConfigService {
     });
 
     // Layer 4: Environment variables (tracked separately)
-    let envOverrides = {};
+    const envOverrides = {};
     if (process.env.VIZZLY_TOKEN) {
       envOverrides.apiKey = process.env.VIZZLY_TOKEN;
       sources.apiKey = 'env';
@@ -176,12 +176,12 @@ export class ConfigService {
    * @returns {Promise<Object>} Updated config
    */
   async _updateProjectConfig(updates) {
-    let result = this.explorer.search(this.projectRoot);
+    const result = this.explorer.search(this.projectRoot);
 
     // Determine config file path
     let configPath;
     let currentConfig = {};
-    if (result && result.filepath) {
+    if (result?.filepath) {
       configPath = result.filepath;
       currentConfig = result.config.default || result.config;
     } else {
@@ -190,7 +190,7 @@ export class ConfigService {
     }
 
     // Merge updates with current config
-    let newConfig = this._deepMerge(currentConfig, updates);
+    const newConfig = this._deepMerge(currentConfig, updates);
 
     // Validate before writing
     try {
@@ -219,8 +219,8 @@ export class ConfigService {
    * @returns {Promise<Object>} Updated config
    */
   async _updateGlobalConfig(updates) {
-    let currentConfig = await loadGlobalConfig();
-    let newConfig = this._deepMerge(currentConfig, updates);
+    const currentConfig = await loadGlobalConfig();
+    const newConfig = this._deepMerge(currentConfig, updates);
     await saveGlobalConfig(newConfig);
     return {
       config: newConfig,
@@ -238,22 +238,22 @@ export class ConfigService {
   async _writeProjectConfigFile(filepath, config) {
     // For .js files, export as ES module
     if (filepath.endsWith('.js') || filepath.endsWith('.mjs')) {
-      let content = this._serializeToJavaScript(config);
+      const content = this._serializeToJavaScript(config);
       await writeFile(filepath, content, 'utf-8');
       return;
     }
 
     // For .json files
     if (filepath.endsWith('.json')) {
-      let content = JSON.stringify(config, null, 2);
+      const content = JSON.stringify(config, null, 2);
       await writeFile(filepath, content, 'utf-8');
       return;
     }
 
     // For package.json, merge into existing
     if (filepath.endsWith('package.json')) {
-      let pkgContent = await readFile(filepath, 'utf-8');
-      let pkg = JSON.parse(pkgContent);
+      const pkgContent = await readFile(filepath, 'utf-8');
+      const pkg = JSON.parse(pkgContent);
       pkg.vizzly = config;
       await writeFile(filepath, JSON.stringify(pkg, null, 2), 'utf-8');
       return;
@@ -268,7 +268,7 @@ export class ConfigService {
    * @returns {string} JavaScript source code
    */
   _serializeToJavaScript(config) {
-    let lines = ['/**', ' * Vizzly Configuration', ' * @see https://docs.vizzly.dev/cli/configuration', ' */', '', "import { defineConfig } from '@vizzly-testing/cli/config';", '', 'export default defineConfig(', this._stringifyWithIndent(config, 1), ');', ''];
+    const lines = ['/**', ' * Vizzly Configuration', ' * @see https://docs.vizzly.dev/cli/configuration', ' */', '', "import { defineConfig } from '@vizzly-testing/cli/config';", '', 'export default defineConfig(', this._stringifyWithIndent(config, 1), ');', ''];
     return lines.join('\n');
   }
 
@@ -280,8 +280,8 @@ export class ConfigService {
    * @returns {string}
    */
   _stringifyWithIndent(value, depth = 0) {
-    let indent = '  '.repeat(depth);
-    let prevIndent = '  '.repeat(depth - 1);
+    const indent = '  '.repeat(depth);
+    const prevIndent = '  '.repeat(depth - 1);
     if (value === null || value === undefined) {
       return String(value);
     }
@@ -293,14 +293,14 @@ export class ConfigService {
     }
     if (Array.isArray(value)) {
       if (value.length === 0) return '[]';
-      let items = value.map(item => `${indent}${this._stringifyWithIndent(item, depth + 1)}`);
+      const items = value.map(item => `${indent}${this._stringifyWithIndent(item, depth + 1)}`);
       return `[\n${items.join(',\n')}\n${prevIndent}]`;
     }
     if (typeof value === 'object') {
-      let keys = Object.keys(value);
+      const keys = Object.keys(value);
       if (keys.length === 0) return '{}';
-      let items = keys.map(key => {
-        let val = this._stringifyWithIndent(value[key], depth + 1);
+      const items = keys.map(key => {
+        const val = this._stringifyWithIndent(value[key], depth + 1);
         return `${indent}${key}: ${val}`;
       });
       return `{\n${items.join(',\n')}\n${prevIndent}}`;
@@ -315,7 +315,7 @@ export class ConfigService {
    */
   async validateConfig(config) {
     try {
-      let validated = validateVizzlyConfigWithDefaults(config);
+      const validated = validateVizzlyConfigWithDefaults(config);
       return {
         valid: true,
         config: validated,
@@ -338,7 +338,7 @@ export class ConfigService {
    * @returns {Promise<string>} Source ('default', 'global', 'project', 'env', 'cli')
    */
   async getConfigSource(key) {
-    let merged = await this._getMergedConfig();
+    const merged = await this._getMergedConfig();
     return merged.sources[key] || 'unknown';
   }
 
@@ -350,10 +350,10 @@ export class ConfigService {
    * @returns {Object} Merged object
    */
   _deepMerge(target, source) {
-    let output = {
+    const output = {
       ...target
     };
-    for (let key in source) {
+    for (const key in source) {
       if (source[key] && typeof source[key] === 'object' && !Array.isArray(source[key])) {
         if (target[key] && typeof target[key] === 'object' && !Array.isArray(target[key])) {
           output[key] = this._deepMerge(target[key], source[key]);

package/dist/services/html-report-generator.js

@@ -3,10 +3,10 @@
  * Creates an interactive report with overlay, toggle, and onion skin modes
  */
 
-import { writeFile, mkdir } from 'fs/promises';
-import { existsSync } from 'fs';
-import { join, relative, dirname } from 'path';
-import { fileURLToPath } from 'url';
+import { existsSync } from 'node:fs';
+import { mkdir, writeFile } from 'node:fs/promises';
+import { dirname, join, relative } from 'node:path';
+import { fileURLToPath } from 'node:url';
 import * as output from '../utils/output.js';
 export class HtmlReportGenerator {
   constructor(workingDir, config) {
@@ -16,8 +16,8 @@ export class HtmlReportGenerator {
     this.reportPath = join(this.reportDir, 'index.html');
 
     // Get path to the CSS file that ships with the package
-    let __filename = fileURLToPath(import.meta.url);
-    let __dirname = dirname(__filename);
+    const __filename = fileURLToPath(import.meta.url);
+    const __dirname = dirname(__filename);
     this.cssPath = join(__dirname, 'report-generator', 'report.css');
   }
 
@@ -37,7 +37,7 @@ export class HtmlReportGenerator {
    * @returns {Object} Sanitized build info
    */
   sanitizeBuildInfo(buildInfo = {}) {
-    let sanitized = {};
+    const sanitized = {};
     if (buildInfo.baseline && typeof buildInfo.baseline === 'object') {
       sanitized.baseline = {
         buildId: this.sanitizeHtml(buildInfo.baseline.buildId || ''),
@@ -383,7 +383,7 @@ function rejectChanges(screenshotName) {
         <p>Missing comparison images</p>
       </div>`;
     }
-    let safeName = this.sanitizeHtml(comparison.name);
+    const safeName = this.sanitizeHtml(comparison.name);
     return `
     <div class="comparison" data-comparison="${safeName}">
         <div class="comparison-header">

package/dist/services/index.js

@@ -5,13 +5,13 @@
 
 import { ApiService } from './api-service.js';
 import { AuthService } from './auth-service.js';
+import { BuildManager } from './build-manager.js';
 import { ConfigService } from './config-service.js';
 import { ProjectService } from './project-service.js';
-import { createUploader } from './uploader.js';
-import { BuildManager } from './build-manager.js';
 import { ServerManager } from './server-manager.js';
 import { createTDDService } from './tdd-service.js';
 import { TestRunner } from './test-runner.js';
+import { createUploader } from './uploader.js';
 
 /**
  * Create all services with their dependencies
@@ -20,36 +20,36 @@ import { TestRunner } from './test-runner.js';
  * @returns {Object} Services object
  */
 export function createServices(config, command = 'run') {
-  let apiService = new ApiService({
+  const apiService = new ApiService({
     ...config,
     allowNoToken: true
   });
-  let authService = new AuthService({
+  const authService = new AuthService({
     baseUrl: config.apiUrl
   });
-  let configService = new ConfigService(config, {
+  const configService = new ConfigService(config, {
     projectRoot: process.cwd()
   });
-  let projectService = new ProjectService(config, {
+  const projectService = new ProjectService(config, {
     apiService,
     authService
   });
-  let uploader = createUploader({
+  const uploader = createUploader({
     ...config,
     command
   });
-  let buildManager = new BuildManager(config);
-  let tddService = createTDDService(config, {
+  const buildManager = new BuildManager(config);
+  const tddService = createTDDService(config, {
     authService
   });
-  let serverManager = new ServerManager(config, {
+  const serverManager = new ServerManager(config, {
     services: {
       configService,
       authService,
       projectService
     }
   });
-  let testRunner = new TestRunner(config, buildManager, serverManager, tddService);
+  const testRunner = new TestRunner(config, buildManager, serverManager, tddService);
   return {
     apiService,
     authService,

package/dist/services/project-service.js

@@ -4,7 +4,7 @@
  */
 
 import { VizzlyError } from '../errors/vizzly-error.js';
-import { getProjectMappings, saveProjectMapping, deleteProjectMapping, getProjectMapping } from '../utils/global-config.js';
+import { deleteProjectMapping, getProjectMapping, getProjectMappings, saveProjectMapping } from '../utils/global-config.js';
 
 /**
  * ProjectService for managing project mappings and operations
@@ -21,7 +21,7 @@ export class ProjectService {
    * @returns {Promise<Array>} Array of project mappings
    */
   async listMappings() {
-    let mappings = await getProjectMappings();
+    const mappings = await getProjectMappings();
 
     // Convert object to array with directory path included
     return Object.entries(mappings).map(([directory, data]) => ({
@@ -89,7 +89,7 @@ export class ProjectService {
    * @returns {Promise<Object>} Updated mapping
    */
   async switchProject(projectSlug, organizationSlug, token) {
-    let currentDir = process.cwd();
+    const currentDir = process.cwd();
     return this.createMapping(currentDir, {
       projectSlug,
       organizationSlug,
@@ -107,19 +107,19 @@ export class ProjectService {
     if (this.authService) {
       try {
         // First get the user's organizations via whoami
-        let whoami = await this.authService.authenticatedRequest('/api/auth/cli/whoami', {
+        const whoami = await this.authService.authenticatedRequest('/api/auth/cli/whoami', {
           method: 'GET'
         });
-        let organizations = whoami.organizations || [];
+        const organizations = whoami.organizations || [];
         if (organizations.length === 0) {
           return [];
         }
 
         // Fetch projects for each organization
-        let allProjects = [];
-        for (let org of organizations) {
+        const allProjects = [];
+        for (const org of organizations) {
           try {
-            let response = await this.authService.authenticatedRequest('/api/project', {
+            const response = await this.authService.authenticatedRequest('/api/project', {
               method: 'GET',
               headers: {
                 'X-Organization': org.slug
@@ -127,7 +127,7 @@ export class ProjectService {
             });
 
             // Add organization info to each project
-            let projects = (response.projects || []).map(project => ({
+            const projects = (response.projects || []).map(project => ({
               ...project,
               organizationSlug: org.slug,
               organizationName: org.name
@@ -146,7 +146,7 @@ export class ProjectService {
     // Fall back to API token-based request (tokens are org-scoped, so no org header needed)
     if (this.apiService) {
       try {
-        let response = await this.apiService.request('/api/project', {
+        const response = await this.apiService.request('/api/project', {
           method: 'GET'
         });
         return response.projects || [];
@@ -169,7 +169,7 @@ export class ProjectService {
     // Try OAuth-based request first
     if (this.authService) {
       try {
-        let response = await this.authService.authenticatedRequest(`/api/project/${projectSlug}`, {
+        const response = await this.authService.authenticatedRequest(`/api/project/${projectSlug}`, {
           method: 'GET',
           headers: {
             'X-Organization': organizationSlug
@@ -184,7 +184,7 @@ export class ProjectService {
     // Fall back to API token
     if (this.apiService) {
       try {
-        let response = await this.apiService.request(`/api/project/${projectSlug}`, {
+        const response = await this.apiService.request(`/api/project/${projectSlug}`, {
           method: 'GET',
           headers: {
             'X-Organization': organizationSlug
@@ -211,16 +211,16 @@ export class ProjectService {
    * @returns {Promise<Array>} Array of builds
    */
   async getRecentBuilds(projectSlug, organizationSlug, options = {}) {
-    let queryParams = new globalThis.URLSearchParams();
+    const queryParams = new globalThis.URLSearchParams();
     if (options.limit) queryParams.append('limit', String(options.limit));
     if (options.branch) queryParams.append('branch', options.branch);
-    let query = queryParams.toString();
-    let url = `/api/build/${projectSlug}${query ? `?${query}` : ''}`;
+    const query = queryParams.toString();
+    const url = `/api/build/${projectSlug}${query ? `?${query}` : ''}`;
 
     // Try OAuth-based request first (user login via device flow)
     if (this.authService) {
       try {
-        let response = await this.authService.authenticatedRequest(url, {
+        const response = await this.authService.authenticatedRequest(url, {
           method: 'GET',
           headers: {
             'X-Organization': organizationSlug
@@ -235,7 +235,7 @@ export class ProjectService {
     // Fall back to API token-based request
     if (this.apiService) {
       try {
-        let response = await this.apiService.request(url, {
+        const response = await this.apiService.request(url, {
           method: 'GET',
           headers: {
             'X-Organization': organizationSlug
@@ -265,7 +265,7 @@ export class ProjectService {
       throw new VizzlyError('API service not available', 'NO_API_SERVICE');
     }
     try {
-      let response = await this.apiService.request(`/api/cli/organizations/${organizationSlug}/projects/${projectSlug}/tokens`, {
+      const response = await this.apiService.request(`/api/cli/organizations/${organizationSlug}/projects/${projectSlug}/tokens`, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json'
@@ -291,7 +291,7 @@ export class ProjectService {
       throw new VizzlyError('API service not available', 'NO_API_SERVICE');
     }
     try {
-      let response = await this.apiService.request(`/api/cli/organizations/${organizationSlug}/projects/${projectSlug}/tokens`, {
+      const response = await this.apiService.request(`/api/cli/organizations/${organizationSlug}/projects/${projectSlug}/tokens`, {
         method: 'GET'
       });
       return response.tokens || [];

package/dist/services/report-generator/report.css

@@ -6,7 +6,7 @@
 
 body {
   font-family:
-    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   line-height: 1.6;
   color: #e2e8f0;
   background: #0f172a;
@@ -296,7 +296,7 @@ body {
 }
 
 .onion-divider::before {
-  content: '';
+  content: "";
   position: absolute;
   top: 50%;
   left: 50%;
@@ -309,7 +309,7 @@ body {
 }
 
 .onion-divider::after {
-  content: '⟷';
+  content: "⟷";
   position: absolute;
   top: 50%;
   left: 50%;

package/dist/services/report-generator/viewer.js

@@ -1,16 +1,18 @@
-document.addEventListener('DOMContentLoaded', function () {
+document.addEventListener('DOMContentLoaded', () => {
   // Handle view mode switching
   document.querySelectorAll('.view-mode-btn').forEach(btn => {
     btn.addEventListener('click', function () {
-      let comparison = this.closest('.comparison');
-      let mode = this.dataset.mode;
+      const comparison = this.closest('.comparison');
+      const mode = this.dataset.mode;
 
       // Update active button
-      comparison.querySelectorAll('.view-mode-btn').forEach(b => b.classList.remove('active'));
+      for (let b of comparison.querySelectorAll('.view-mode-btn')) {
+        b.classList.remove('active');
+      }
       this.classList.add('active');
 
       // Update viewer mode
-      let viewer = comparison.querySelector('.comparison-viewer');
+      const viewer = comparison.querySelector('.comparison-viewer');
       viewer.dataset.mode = mode;
 
       // Hide all mode containers
@@ -19,7 +21,7 @@ document.addEventListener('DOMContentLoaded', function () {
       });
 
       // Show appropriate mode container
-      let activeContainer = viewer.querySelector('.' + mode + '-mode');
+      const activeContainer = viewer.querySelector(`.${mode}-mode`);
       if (activeContainer) {
         activeContainer.style.display = 'block';
       }
@@ -30,42 +32,42 @@ document.addEventListener('DOMContentLoaded', function () {
   document.querySelectorAll('.onion-container').forEach(container => {
     let isDragging = false;
     function updateOnionSkin(x) {
-      let rect = container.getBoundingClientRect();
-      let percentage = Math.max(0, Math.min(100, (x - rect.left) / rect.width * 100));
-      let currentImg = container.querySelector('.onion-current');
-      let divider = container.querySelector('.onion-divider');
+      const rect = container.getBoundingClientRect();
+      const percentage = Math.max(0, Math.min(100, (x - rect.left) / rect.width * 100));
+      const currentImg = container.querySelector('.onion-current');
+      const divider = container.querySelector('.onion-divider');
       if (currentImg && divider) {
-        currentImg.style.clipPath = 'inset(0 ' + (100 - percentage) + '% 0 0)';
-        divider.style.left = percentage + '%';
+        currentImg.style.clipPath = `inset(0 ${100 - percentage}% 0 0)`;
+        divider.style.left = `${percentage}%`;
       }
     }
-    container.addEventListener('mousedown', function (e) {
+    container.addEventListener('mousedown', e => {
       isDragging = true;
       updateOnionSkin(e.clientX);
       e.preventDefault();
     });
-    container.addEventListener('mousemove', function (e) {
+    container.addEventListener('mousemove', e => {
       if (isDragging) {
         updateOnionSkin(e.clientX);
       }
     });
-    document.addEventListener('mouseup', function () {
+    document.addEventListener('mouseup', () => {
       isDragging = false;
     });
 
     // Touch events for mobile
-    container.addEventListener('touchstart', function (e) {
+    container.addEventListener('touchstart', e => {
       isDragging = true;
       updateOnionSkin(e.touches[0].clientX);
       e.preventDefault();
     });
-    container.addEventListener('touchmove', function (e) {
+    container.addEventListener('touchmove', e => {
       if (isDragging) {
         updateOnionSkin(e.touches[0].clientX);
         e.preventDefault();
       }
     });
-    document.addEventListener('touchend', function () {
+    document.addEventListener('touchend', () => {
       isDragging = false;
     });
   });
@@ -73,10 +75,10 @@ document.addEventListener('DOMContentLoaded', function () {
   // Handle overlay mode clicking
   document.querySelectorAll('.overlay-container').forEach(container => {
     container.addEventListener('click', function () {
-      let diffImage = this.querySelector('.diff-image');
+      const diffImage = this.querySelector('.diff-image');
       if (diffImage) {
         // Toggle diff visibility
-        let isVisible = diffImage.style.opacity === '1';
+        const isVisible = diffImage.style.opacity === '1';
         diffImage.style.opacity = isVisible ? '0' : '1';
       }
     });
@@ -85,9 +87,9 @@ document.addEventListener('DOMContentLoaded', function () {
   // Handle toggle mode clicking
   document.querySelectorAll('.toggle-container img').forEach(img => {
     let isBaseline = true;
-    let comparison = img.closest('.comparison');
-    let baselineSrc = comparison.querySelector('.baseline-image').src;
-    let currentSrc = comparison.querySelector('.current-image').src;
+    const comparison = img.closest('.comparison');
+    const baselineSrc = comparison.querySelector('.baseline-image').src;
+    const currentSrc = comparison.querySelector('.current-image').src;
     img.addEventListener('click', function () {
       isBaseline = !isBaseline;
       this.src = isBaseline ? baselineSrc : currentSrc;

package/dist/services/screenshot-server.js

@@ -3,7 +3,7 @@
  * Listens for and processes screenshots from the test runner
  */
 
-import { createServer } from 'http';
+import { createServer } from 'node:http';
 import { VizzlyError } from '../errors/vizzly-error.js';
 import * as output from '../utils/output.js';
 export class ScreenshotServer {

package/dist/services/server-manager.js

@@ -3,11 +3,11 @@
  * Manages the HTTP server with functional handlers
  */
 
-import { createHttpServer } from '../server/http-server.js';
-import { createTddHandler } from '../server/handlers/tdd-handler.js';
+import { existsSync, mkdirSync, unlinkSync, writeFileSync } from 'node:fs';
+import { join } from 'node:path';
 import { createApiHandler } from '../server/handlers/api-handler.js';
-import { writeFileSync, mkdirSync, unlinkSync, existsSync } from 'fs';
-import { join } from 'path';
+import { createTddHandler } from '../server/handlers/tdd-handler.js';
+import { createHttpServer } from '../server/http-server.js';
 export class ServerManager {
   constructor(config, options = {}) {
     this.config = config;
@@ -88,7 +88,7 @@ export class ServerManager {
 
     // Clean up server.json so the client SDK doesn't try to connect to a dead server
     try {
-      let serverFile = join(process.cwd(), '.vizzly', 'server.json');
+      const serverFile = join(process.cwd(), '.vizzly', 'server.json');
       if (existsSync(serverFile)) {
         unlinkSync(serverFile);
       }