heroshot 0.0.2-alpha.1 → 0.0.2-alpha.2

package/src/browser.ts

@@ -1,302 +0,0 @@
-import { readFileSync } from 'node:fs';
-import { homedir } from 'node:os';
-import path from 'node:path';
-import { type BrowserContext, type Page, chromium } from 'playwright';
-import type { Screenshot, Viewport } from './config';
-import { getConfigPath, loadConfig, saveConfig } from './configFile';
-
-const PROFILE_DIR = path.join(homedir(), '.heroshot', 'browser-profile');
-const TOOLBAR_DIR = path.join(import.meta.dirname, '..', 'toolbar');
-
-export function getProfilePath(): string {
-  return PROFILE_DIR;
-}
-
-const DEFAULT_VIEWPORT: Viewport = { width: 1280, height: 800 };
-
-/**
- * Browser channels to try in order of preference.
- * System Chrome first (no download needed), then Playwright's bundled Chromium.
- */
-const BROWSER_CHANNELS: readonly string[] = ['chrome', 'chromium'];
-
-/**
- * Launch browser with persistent profile, trying system Chrome first.
- * Falls back to Playwright's bundled Chromium if Chrome isn't installed.
- */
-export async function launchPersistentBrowser(
-  options: { headless?: boolean; viewport?: Viewport } = {}
-): Promise<BrowserContext> {
-  const viewport = options.viewport ?? DEFAULT_VIEWPORT;
-  const baseOptions = {
-    headless: options.headless ?? false,
-    viewport,
-  };
-
-  // Try each browser channel in order
-  for (const channel of BROWSER_CHANNELS) {
-    try {
-      const context = await chromium.launchPersistentContext(PROFILE_DIR, {
-        ...baseOptions,
-        channel,
-      });
-      return context;
-    } catch {
-      // This channel failed, try next one
-      continue;
-    }
-  }
-
-  // All channels failed - throw error with helpful message
-  const message = [
-    '',
-    'Error: No browser found.',
-    '',
-    'Heroshot needs a browser to capture screenshots. Options:',
-    '',
-    '  1. Install Chrome (recommended):',
-    '     https://www.google.com/chrome/',
-    '',
-    '  2. Or install Playwright browsers:',
-    '     npx playwright install chromium',
-    '',
-  ].join('\n');
-
-  throw new Error(message);
-}
-
-interface ScreenshotData {
-  id: string;
-  name: string;
-  url: string;
-  selector: string;
-}
-
-// Job types that CLI can send to toolbar
-type ToolbarJob =
-  | { type: 'highlight'; selector: string }
-  | { type: 'navigate-and-highlight'; url: string; selector: string };
-
-// Events that toolbar sends to CLI
-type ToolbarEvent =
-  | { type: 'screenshot-added'; data: ScreenshotData }
-  | { type: 'screenshot-selected'; id: string; url: string; selector: string }
-  | { type: 'screenshot-removed'; id: string }
-  | { type: 'job-complete' }
-  | { type: 'done' };
-
-const exposedPages = new WeakSet<Page>();
-
-async function injectToolbar(
-  page: Page,
-  initialScreenshots: ScreenshotData[],
-  pendingJob: ToolbarJob | null,
-  onEvent: (event: ToolbarEvent) => void
-): Promise<void> {
-  // Expose single event handler to page (only once per page)
-  // All toolbar events go through this single channel
-  if (!exposedPages.has(page)) {
-    await page.exposeFunction('__heroshotEmit', (eventJson: string) => {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- JSON from trusted toolbar
-      const event: ToolbarEvent = JSON.parse(eventJson);
-      onEvent(event);
-    });
-    exposedPages.add(page);
-  }
-
-  // Initialize or update __heroshot namespace
-  // Using string to avoid tsx transpilation issues (__name helper)
-  const screenshotsJson = JSON.stringify(initialScreenshots);
-  const pendingJobJson = JSON.stringify(pendingJob);
-
-  // Check if toolbar is already initialized - if so, just update the job
-  const alreadyInitialized = await page.evaluate('globalThis.__heroshot?.initialized === true');
-
-  if (alreadyInitialized) {
-    // Toolbar already running - just update the pending job and trigger execution
-    await page.evaluate(`
-      globalThis.__heroshot.pendingJob = ${pendingJobJson};
-      // Dispatch custom event to notify toolbar of new job
-      window.dispatchEvent(new CustomEvent('heroshot-job', { detail: ${pendingJobJson} }));
-    `);
-    return;
-  }
-
-  await page.evaluate(`
-    globalThis.__heroshot = {
-      initialized: false,
-      screenshots: ${screenshotsJson},
-      pendingJob: ${pendingJobJson},
-      emit: function(event) {
-        globalThis.__heroshotEmit(JSON.stringify(event));
-      },
-    };
-  `);
-
-  // Inject toolbar JS (CSS is bundled via Shadow DOM)
-  const scriptPath = path.join(TOOLBAR_DIR, 'dist', 'toolbar.js');
-  const script = readFileSync(scriptPath, 'utf8');
-  await page.addScriptTag({ content: script });
-}
-
-export async function captureUrl(url: string, output: string): Promise<void> {
-  console.log(`Capturing: ${url}`);
-
-  const context = await launchPersistentBrowser({ headless: true });
-  const page = await context.newPage();
-
-  await page.goto(url, { waitUntil: 'networkidle' });
-  await page.screenshot({ path: output, fullPage: false });
-
-  await context.close();
-
-  console.log(`Saved: ${output}`);
-}
-
-export async function setup(): Promise<void> {
-  console.log('Opening browser for setup...');
-  console.log(`Profile will be saved to: ${PROFILE_DIR}`);
-  console.log('');
-
-  const configPath = getConfigPath();
-  const config = loadConfig(configPath);
-  const viewport = config.browser?.viewport ?? DEFAULT_VIEWPORT;
-
-  // Convert config screenshots to toolbar format - this is the running list
-  // that includes both original config items AND newly added items
-  const allScreenshots: ScreenshotData[] = config.screenshots.map(screenshot => ({
-    id: screenshot.id,
-    name: screenshot.name,
-    url: screenshot.url,
-    selector: screenshot.selector ?? '',
-  }));
-
-  // Track only NEW items added this session (for saving to config at the end)
-  const newlyAddedIds = new Set<string>();
-  let pendingJob: ToolbarJob | null = null;
-
-  const context = await launchPersistentBrowser({ headless: false, viewport });
-
-  // Handle events from toolbar
-  const handleEvent = (event: ToolbarEvent) => {
-    switch (event.type) {
-      case 'screenshot-added': {
-        allScreenshots.push(event.data);
-        newlyAddedIds.add(event.data.id);
-        console.log(`\nAdded: ${event.data.name} (${event.data.selector})`);
-        console.log(`URL: ${event.data.url}`);
-        break;
-      }
-
-      case 'screenshot-selected': {
-        // User selected a screenshot - create job to highlight it
-        const [currentPage] = context.pages();
-        if (!currentPage) break;
-
-        const currentUrl = currentPage.url();
-
-        if (currentUrl === event.url) {
-          // Already on the right page - send highlight job via event
-          pendingJob = { type: 'highlight', selector: event.selector };
-          void currentPage.evaluate(`
-            window.dispatchEvent(new CustomEvent('heroshot-job', {
-              detail: { type: 'highlight', selector: ${JSON.stringify(event.selector)} }
-            }));
-          `);
-        } else {
-          // Navigate to the page - toolbar will get job on inject
-          pendingJob = { type: 'navigate-and-highlight', url: event.url, selector: event.selector };
-          void currentPage.goto(event.url, { waitUntil: 'domcontentloaded' });
-        }
-        break;
-      }
-
-      case 'job-complete': {
-        pendingJob = null;
-        break;
-      }
-
-      case 'done': {
-        void context.close();
-        break;
-      }
-    }
-  };
-
-  const setupPage = (page: Page) => {
-    // Inject on every navigation within the page
-    page.on('domcontentloaded', async () => {
-      const url = page.url();
-      // Skip about:blank and other non-http pages
-      if (!url.startsWith('http')) return;
-
-      try {
-        await injectToolbar(page, allScreenshots, pendingJob, handleEvent);
-      } catch {
-        // Toolbar injection can fail on some pages, ignore silently
-      }
-    });
-  };
-
-  // Handle new pages/tabs
-  context.on('page', page => {
-    setupPage(page);
-  });
-
-  // Use existing page from context or create one if none exists
-  const existingPages = context.pages();
-  const page = existingPages[0] ?? (await context.newPage());
-  setupPage(page);
-
-  console.log('Browser is open.');
-  console.log('1. Navigate to any site (e.g., https://example.com)');
-  console.log('2. Click the picker icon in the toolbar to select elements');
-  console.log('3. Click Done or close the browser when finished');
-  console.log('');
-
-  // Wait for browser to close (either via Done button or manual close)
-  await new Promise<void>(resolve => {
-    context.once('close', () => resolve());
-  });
-
-  console.log('');
-  if (newlyAddedIds.size > 0) {
-    // Reload config in case it was modified while browser was open
-    const latestConfig = loadConfig(configPath);
-
-    console.log('Saved screenshots:');
-    // Only save newly added items (not items that were already in config)
-    for (const element of allScreenshots) {
-      if (!newlyAddedIds.has(element.id)) continue;
-
-      // Slugify name for output filename (just filename, no path)
-      const filename =
-        element.name
-          .toLowerCase()
-          .replaceAll(/[^a-z0-9]+/g, '-')
-          .replaceAll(/(?:^-|-$)/g, '') + '.png';
-
-      const screenshot: Screenshot = {
-        id: element.id,
-        name: element.name,
-        url: element.url,
-        selector: element.selector,
-        filename,
-      };
-
-      // Add or update screenshot
-      const existingIndex = latestConfig.screenshots.findIndex(item => item.id === element.id);
-      if (existingIndex === -1) {
-        latestConfig.screenshots.push(screenshot);
-        console.log(`  + ${element.name}: ${element.selector}`);
-      } else {
-        latestConfig.screenshots[existingIndex] = screenshot;
-        console.log(`  ~ ${element.name}: ${element.selector} (updated)`);
-      }
-    }
-
-    saveConfig(configPath, latestConfig);
-    console.log(`\nConfig saved to: ${configPath}`);
-  }
-  console.log('You can now use `heroshot sync` to capture screenshots.');
-}

package/src/capture.ts

@@ -1,7 +0,0 @@
-import type { ScreenshotDefinition } from './types';
-
-export async function capture(_definition: ScreenshotDefinition): Promise<Buffer> {
-  // TODO: Implement capture logic with Playwright
-  await Promise.resolve();
-  throw new Error('Not implemented');
-}

package/src/cli.ts

@@ -1,60 +0,0 @@
-import { existsSync, rmSync } from 'node:fs';
-import { Command } from 'commander';
-import { captureUrl, getProfilePath, setup } from './browser';
-import { sync } from './sync';
-
-const program = new Command();
-
-program
-  .name('heroshot')
-  .description('Define your screenshots once, update them forever with one command')
-  .version('0.0.2-alpha.1');
-
-program
-  .command('setup', { isDefault: true })
-  .description('Open browser to log in to sites you want to screenshot')
-  .option('--reset', 'Clear existing browser profile and start fresh')
-  .action(async (options: { reset?: boolean }) => {
-    if (options.reset) {
-      const profilePath = getProfilePath();
-      if (existsSync(profilePath)) {
-        rmSync(profilePath, { recursive: true });
-        console.log('Browser profile cleared.');
-      }
-    }
-    await setup();
-  });
-
-program
-  .command('capture <url> <output>')
-  .description('Capture a screenshot of a URL')
-  .action(async (url: string, output: string) => {
-    await captureUrl(url, output);
-  });
-
-program
-  .command('init')
-  .description('Create a heroshot.json config file')
-  .action(() => {
-    console.log('TODO: Create heroshot.json');
-  });
-
-program
-  .command('sync')
-  .description('Capture all screenshots defined in config')
-  .option('--id <id>', 'Only capture a specific screenshot by ID')
-  .action(async (options: { id?: string }) => {
-    const result = await sync(options);
-    if (result.failed > 0) {
-      process.exitCode = 1;
-    }
-  });
-
-program
-  .command('check')
-  .description('Check if screenshots are up-to-date (for CI)')
-  .action(() => {
-    console.log('TODO: Check screenshots');
-  });
-
-program.parse();

package/src/config.ts

@@ -1,94 +0,0 @@
-import { z } from 'zod';
-
-/**
- * Generate a simple random UID (8 chars)
- */
-function generateUid(): string {
-  // eslint-disable-next-line sonarjs/pseudo-random -- Not used for security, just unique IDs
-  return Math.random().toString(36).slice(2, 10);
-}
-
-// Browser/viewport settings
-const viewportSchema = z.object({
-  width: z.number().int().positive().default(1280),
-  height: z.number().int().positive().default(800),
-});
-
-// Beautification options
-const beautifySchema = z.object({
-  shadow: z.boolean().default(false),
-  radius: z.number().int().nonnegative().default(0),
-  background: z.string().default('transparent'),
-  padding: z.number().int().nonnegative().default(0),
-});
-
-// Color scheme for light/dark mode
-const colorSchemeSchema = z.enum(['light', 'dark', 'both']);
-
-// Single screenshot definition
-const screenshotSchema = z.object({
-  id: z.string().min(1).default(generateUid),
-  name: z.string().min(1),
-  url: z.url(),
-  filename: z.string().min(1),
-  selector: z.string().optional(),
-  viewport: viewportSchema.optional(),
-  waitFor: z.string().optional(),
-  delay: z.number().int().nonnegative().optional(),
-  colorScheme: colorSchemeSchema.optional(),
-  beautify: beautifySchema.partial().optional(),
-});
-
-// Browser settings
-const browserSchema = z.object({
-  viewport: viewportSchema.optional(),
-  colorScheme: colorSchemeSchema.optional(),
-  cdp: z.url().optional(), // Connect to existing Chrome
-});
-
-// Global config
-const configSchema = z.object({
-  // Output directory for screenshots (relative to config file)
-  outputDirectory: z.string().default('.'),
-
-  // Default browser settings
-  browser: browserSchema.optional(),
-
-  // Default beautification
-  beautify: beautifySchema.partial().optional(),
-
-  // Screenshot definitions
-  screenshots: z.array(screenshotSchema).default([]),
-});
-
-// Infer types from schemas
-export type Viewport = z.infer<typeof viewportSchema>;
-export type Beautify = z.infer<typeof beautifySchema>;
-export type ColorScheme = z.infer<typeof colorSchemeSchema>;
-export type Screenshot = z.infer<typeof screenshotSchema>;
-export type Browser = z.infer<typeof browserSchema>;
-export type Config = z.infer<typeof configSchema>;
-
-// Export schemas for validation
-export const schemas = {
-  viewport: viewportSchema,
-  beautify: beautifySchema,
-  colorScheme: colorSchemeSchema,
-  screenshot: screenshotSchema,
-  browser: browserSchema,
-  config: configSchema,
-};
-
-export function parseConfig(input: unknown): Config {
-  return configSchema.parse(input);
-}
-
-export function validateConfig(
-  input: unknown
-): { success: true; data: Config } | { success: false; error: z.ZodError } {
-  const result = configSchema.safeParse(input);
-  if (result.success) {
-    return { success: true, data: result.data };
-  }
-  return { success: false, error: result.error };
-}

package/src/configFile.ts

@@ -1,25 +0,0 @@
-import { existsSync, readFileSync, writeFileSync } from 'node:fs';
-import path from 'node:path';
-import { type Config, parseConfig } from './config';
-
-const CONFIG_FILENAME = 'heroshot.json';
-
-export function getConfigPath(directory: string = process.cwd()): string {
-  return path.join(directory, CONFIG_FILENAME);
-}
-
-export function loadConfig(configPath: string): Config {
-  if (!existsSync(configPath)) {
-    // Return default config with Zod defaults applied
-    return parseConfig({});
-  }
-
-  const content = readFileSync(configPath, 'utf8');
-  const json: unknown = JSON.parse(content);
-  return parseConfig(json);
-}
-
-export function saveConfig(configPath: string, config: Config): void {
-  const content = JSON.stringify(config, null, 2);
-  writeFileSync(configPath, content, 'utf8');
-}

package/src/sync.ts

@@ -1,214 +0,0 @@
-import { existsSync, mkdirSync } from 'node:fs';
-import path from 'node:path';
-import type { ElementHandle, Page } from 'playwright';
-import { launchPersistentBrowser } from './browser';
-import type { Config, Screenshot } from './config';
-import { getConfigPath, loadConfig } from './configFile';
-
-/**
- * Find element using shadow-piercing selector with retries
- * The >>> syntax pierces shadow DOM boundaries
- */
-async function findElement(
-  page: Page,
-  selector: string,
-  maxAttempts = 10,
-  intervalMs = 500
-): Promise<ElementHandle | null> {
-  for (let attempt = 1; attempt <= maxAttempts; attempt++) {
-    // Run shadow-piercing query in browser context
-    // The function body runs in browser where DOM types exist
-    const handle = await page.evaluateHandle(`
-      (() => {
-        const selector = ${JSON.stringify(selector)};
-        const parts = selector.split('>>>').map((part) => part.trim());
-        let current = document;
-
-        for (const part of parts) {
-          if (!part) continue;
-
-          const root = current instanceof Element
-            ? (current.shadowRoot ?? current)
-            : current;
-
-          const found = root.querySelector(part);
-          if (!found) return null;
-
-          current = found;
-        }
-
-        return current instanceof Element ? current : null;
-      })()
-    `);
-
-    // Check if we got an element (not null/undefined)
-    const element = handle.asElement();
-    if (element) {
-      return element;
-    }
-
-    // Dispose the handle if it's not an element
-    await handle.dispose();
-
-    if (attempt < maxAttempts) {
-      await page.waitForTimeout(intervalMs);
-    }
-  }
-
-  return null;
-}
-
-/**
- * Capture a single screenshot
- */
-async function captureScreenshot(
-  page: Page,
-  screenshot: Screenshot,
-  outputDirectory: string
-): Promise<{ success: boolean; error?: string }> {
-  const { name, url, selector, filename } = screenshot;
-
-  console.log(`  ${name}...`);
-
-  // Navigate to URL and wait for network to settle
-  try {
-    await page.goto(url, { waitUntil: 'networkidle', timeout: 30_000 });
-  } catch (error) {
-    const message = error instanceof Error ? error.message : String(error);
-    return { success: false, error: `Failed to navigate: ${message}` };
-  }
-
-  // Extra wait for dynamic content (web components, lazy loading)
-  await page.waitForTimeout(1000);
-
-  const outputPath = path.join(outputDirectory, filename);
-
-  // Ensure output directory exists
-  const outputDirectoryPath = path.dirname(outputPath);
-  if (!existsSync(outputDirectoryPath)) {
-    mkdirSync(outputDirectoryPath, { recursive: true });
-  }
-
-  if (selector) {
-    // Find element with shadow-piercing selector
-    const element = await findElement(page, selector);
-
-    if (!element) {
-      return {
-        success: false,
-        error: `Element not found: ${selector}`,
-      };
-    }
-
-    // Screenshot the element
-    try {
-      await element.screenshot({ path: outputPath });
-    } catch (error) {
-      const message = error instanceof Error ? error.message : String(error);
-      return { success: false, error: `Screenshot failed: ${message}` };
-    }
-  } else {
-    // Full page screenshot
-    try {
-      await page.screenshot({ path: outputPath, fullPage: false });
-    } catch (error) {
-      const message = error instanceof Error ? error.message : String(error);
-      return { success: false, error: `Screenshot failed: ${message}` };
-    }
-  }
-
-  return { success: true };
-}
-
-interface SyncOptions {
-  id?: string;
-}
-
-interface ScreenshotResult {
-  id: string;
-  name: string;
-  success: boolean;
-  error?: string;
-}
-
-interface SyncResult {
-  total: number;
-  success: number;
-  failed: number;
-  results: ScreenshotResult[];
-}
-
-/**
- * Sync all screenshots defined in config
- */
-export async function sync(options: SyncOptions = {}): Promise<SyncResult> {
-  const configPath = getConfigPath();
-  const config: Config = loadConfig(configPath);
-
-  if (config.screenshots.length === 0) {
-    console.log('No screenshots defined in config.');
-    return { total: 0, success: 0, failed: 0, results: [] };
-  }
-
-  // Filter by ID if specified
-  const { id: filterId } = options;
-  const screenshots = filterId
-    ? config.screenshots.filter(screenshot => screenshot.id === filterId)
-    : config.screenshots;
-
-  if (filterId && screenshots.length === 0) {
-    console.log(`No screenshot found with ID: ${filterId}`);
-    return { total: 0, success: 0, failed: 0, results: [] };
-  }
-
-  console.log(`Syncing ${screenshots.length} screenshot(s)...`);
-  console.log('');
-
-  // Get output directory (relative to config file location)
-  const configDirectory = path.dirname(configPath);
-  const outputDirectory = path.resolve(configDirectory, config.outputDirectory);
-
-  // Launch browser with persistent profile (reuses auth sessions)
-  const viewport = config.browser?.viewport ?? { width: 1280, height: 800 };
-  const context = await launchPersistentBrowser({
-    headless: true,
-    viewport,
-  });
-
-  const page = await context.newPage();
-  const results: SyncResult['results'] = [];
-
-  for (const screenshot of screenshots) {
-    const result = await captureScreenshot(page, screenshot, outputDirectory);
-
-    results.push({
-      id: screenshot.id,
-      name: screenshot.name,
-      success: result.success,
-      error: result.error,
-    });
-
-    if (result.success) {
-      console.log(`    Saved: ${screenshot.filename}`);
-    } else {
-      console.log(`    Failed: ${result.error ?? 'Unknown error'}`);
-    }
-  }
-
-  await context.close();
-
-  const { length: totalCount } = results;
-  const successfulResults = results.filter(({ success }) => success);
-  const { length: successCount } = successfulResults;
-  const failedCount = totalCount - successCount;
-
-  console.log('');
-  console.log(`Done: ${successCount} succeeded, ${failedCount} failed`);
-
-  return {
-    total: totalCount,
-    success: successCount,
-    failed: failedCount,
-    results,
-  };
-}