@sun-asterisk/sungen 1.0.20 → 1.0.21

package/src/tools/auto-tagger.ts

@@ -1,572 +0,0 @@
-/**
- * Auto-Tagging Tool - v3.1
- *
- * Automatically injects stable data-testid attributes into React/Vue/HTML source code
- *
- * Key Features:
- * 1. Idempotent (skips if data-testid already exists)
- * 2. Preserves code formatting (Prettier/ESLint compatible)
- * 3. Generates stable, semantic IDs (screen-element-type)
- * 4. Supports React, Vue, HTML
- * 5. Dry-run mode for preview
- *
- * Philosophy: Proactive solution - add test IDs BEFORE you need them
- */
-
-import * as parser from '@babel/parser';
-import traverse, { NodePath } from '@babel/traverse';
-import generate from '@babel/generator';
-import * as t from '@babel/types';
-import * as fs from 'fs';
-import * as path from 'path';
-
-// ============================================================================
-// TYPES
-// ============================================================================
-
-export interface AutoTagConfig {
-  sourceRoot: string;
-  projectRoot: string;
-  screenName?: string;          // Specific screen or all
-  dryRun: boolean;              // Preview changes without writing
-  force: boolean;               // Overwrite existing data-testid
-  verbose: boolean;
-  preserveFormatting: boolean;  // Use Prettier if available
-}
-
-export interface TaggingResult {
-  filePath: string;
-  totalElements: number;
-  taggedElements: number;
-  skippedElements: number;
-  changes: ElementChange[];
-  modified: boolean;
-}
-
-export interface ElementChange {
-  line: number;
-  tag: string;
-  generatedId: string;
-  action: 'added' | 'skipped' | 'overwritten';
-  reason?: string;
-}
-
-export interface TaggingStats {
-  totalFiles: number;
-  modifiedFiles: number;
-  totalElements: number;
-  taggedElements: number;
-  skippedElements: number;
-  processingTime: number;
-}
-
-// ============================================================================
-// TEST ID GENERATOR
-// ============================================================================
-
-class TestIDGenerator {
-  private screenName: string;
-  private usedIds = new Set<string>();
-
-  constructor(screenName: string) {
-    this.screenName = this.normalize(screenName);
-  }
-
-  /**
-   * Generate stable, semantic test ID
-   *
-   * Format: {screen}-{element}-{type}
-   * Examples:
-   * - login-email-input
-   * - login-password-input
-   * - login-submit-btn
-   * - dashboard-user-menu-btn
-   */
-  generate(element: any, index: number): string {
-    const tag = element.tag?.toLowerCase() || 'element';
-    const props = element.props || {};
-
-    let elementName = '';
-
-    // Strategy 1: Use existing name/id/placeholder
-    if (props.name) {
-      elementName = this.normalize(props.name);
-    } else if (props.id) {
-      elementName = this.normalize(props.id);
-    } else if (props.placeholder) {
-      elementName = this.normalize(props.placeholder);
-    } else if (element.text && ['button', 'a'].includes(tag)) {
-      elementName = this.normalize(element.text);
-    } else if (props['aria-label']) {
-      elementName = this.normalize(props['aria-label']);
-    }
-
-    // Strategy 2: Use type-based naming
-    if (!elementName && props.type) {
-      elementName = this.normalize(props.type);
-    }
-
-    // Strategy 3: Fallback to index
-    if (!elementName) {
-      elementName = `${tag}-${index}`;
-    }
-
-    // Add suffix based on tag
-    const suffix = this.getSuffix(tag, props.type);
-
-    // Combine: screen-element-suffix
-    const baseId = `${this.screenName}-${elementName}${suffix}`;
-
-    // Ensure uniqueness
-    let finalId = baseId;
-    let counter = 1;
-    while (this.usedIds.has(finalId)) {
-      finalId = `${baseId}-${counter}`;
-      counter++;
-    }
-
-    this.usedIds.add(finalId);
-    return finalId;
-  }
-
-  private getSuffix(tag: string, type?: string): string {
-    if (tag === 'input') {
-      if (type === 'submit') return '-btn';
-      return '-input';
-    }
-
-    const suffixMap: Record<string, string> = {
-      'button': '-btn',
-      'a': '-link',
-      'select': '-select',
-      'textarea': '-textarea',
-      'form': '-form',
-    };
-
-    return suffixMap[tag] || '';
-  }
-
-  private normalize(str: string): string {
-    return str
-      .toLowerCase()
-      .replace(/[^a-z0-9]+/g, '-')
-      .replace(/^-+|-+$/g, '');
-  }
-
-  reset() {
-    this.usedIds.clear();
-  }
-}
-
-// ============================================================================
-// AST ELEMENT EXTRACTOR
-// ============================================================================
-
-class ElementExtractor {
-  /**
-   * Extract element data from JSX node
-   */
-  extract(node: t.JSXElement): any {
-    const openingElement = node.openingElement;
-    const tag = this.getTagName(openingElement.name);
-
-    // Extract props
-    const props: Record<string, any> = {};
-    for (const attr of openingElement.attributes) {
-      if (t.isJSXAttribute(attr) && t.isJSXIdentifier(attr.name)) {
-        const name = attr.name.name;
-        const value = this.getAttributeValue(attr.value);
-        props[name] = value;
-      }
-    }
-
-    // Extract text content
-    const text = this.extractTextContent(node);
-
-    return { tag, props, text, node, openingElement };
-  }
-
-  private getTagName(name: any): string {
-    if (t.isJSXIdentifier(name)) {
-      return name.name.toLowerCase();
-    }
-    if (t.isJSXMemberExpression(name)) {
-      // Handle <Form.Input> → "input"
-      return this.getTagName(name.property);
-    }
-    return 'unknown';
-  }
-
-  private getAttributeValue(value: any): any {
-    if (!value) return true; // Boolean attribute
-    if (t.isStringLiteral(value)) return value.value;
-    if (t.isJSXExpressionContainer(value)) {
-      if (t.isStringLiteral(value.expression)) {
-        return value.expression.value;
-      }
-      if (t.isBooleanLiteral(value.expression)) {
-        return value.expression.value;
-      }
-    }
-    return undefined;
-  }
-
-  private extractTextContent(node: t.JSXElement): string | null {
-    const children = node.children || [];
-
-    for (const child of children) {
-      if (t.isJSXText(child)) {
-        const text = child.value.trim();
-        if (text) return text;
-      }
-      if (t.isJSXExpressionContainer(child)) {
-        if (t.isStringLiteral(child.expression)) {
-          return child.expression.value;
-        }
-      }
-    }
-
-    return null;
-  }
-}
-
-// ============================================================================
-// AUTO TAGGER (Main Class)
-// ============================================================================
-
-export class AutoTagger {
-  private config: AutoTagConfig;
-  private extractor = new ElementExtractor();
-  private stats: TaggingStats = {
-    totalFiles: 0,
-    modifiedFiles: 0,
-    totalElements: 0,
-    taggedElements: 0,
-    skippedElements: 0,
-    processingTime: 0,
-  };
-
-  // Interactive elements that should have data-testid
-  private readonly INTERACTIVE_TAGS = ['input', 'button', 'a', 'select', 'textarea', 'form'];
-
-  constructor(config: AutoTagConfig) {
-    this.config = config;
-  }
-
-  /**
-   * Tag a specific screen or all screens
-   */
-  async tag(): Promise<TaggingStats> {
-    const startTime = Date.now();
-
-    if (this.config.screenName) {
-      await this.tagScreen(this.config.screenName);
-    } else {
-      await this.tagAllScreens();
-    }
-
-    this.stats.processingTime = Date.now() - startTime;
-    return this.stats;
-  }
-
-  /**
-   * Tag a specific screen
-   */
-  private async tagScreen(screenName: string): Promise<void> {
-    const files = this.findSourceFiles(screenName);
-
-    if (files.length === 0) {
-      console.log(`⚠️  No source files found for screen: ${screenName}`);
-      return;
-    }
-
-    console.log(`📂 Found ${files.length} files for screen: ${screenName}\n`);
-
-    for (const file of files) {
-      await this.tagFile(file, screenName);
-    }
-  }
-
-  /**
-   * Tag all screens (scan entire source root)
-   */
-  private async tagAllScreens(): Promise<void> {
-    console.log('📂 Scanning all source files...\n');
-
-    const allFiles = this.findAllSourceFiles(this.config.sourceRoot);
-    console.log(`Found ${allFiles.length} files\n`);
-
-    for (const file of allFiles) {
-      const screenName = this.inferScreenName(file);
-      await this.tagFile(file, screenName);
-    }
-  }
-
-  /**
-   * Tag a single file
-   */
-  private async tagFile(filePath: string, screenName: string): Promise<TaggingResult> {
-    this.stats.totalFiles++;
-
-    const relativePath = path.relative(this.config.projectRoot, filePath);
-    console.log(`📄 Processing: ${relativePath}`);
-
-    // Read file
-    const code = fs.readFileSync(filePath, 'utf-8');
-
-    // Parse with Babel
-    let ast;
-    try {
-      ast = parser.parse(code, {
-        sourceType: 'module',
-        plugins: ['jsx', 'typescript'],
-      });
-    } catch (error) {
-      console.log(`   ⚠️  Parse error, skipping\n`);
-      return this.createEmptyResult(filePath);
-    }
-
-    // Tag elements in AST
-    const result = await this.tagAST(ast, filePath, screenName);
-
-    // Write back if modified and not dry-run
-    if (result.modified && !this.config.dryRun) {
-      const newCode = generate(ast, {
-        retainLines: true,
-        comments: true,
-      }).code;
-
-      fs.writeFileSync(filePath, newCode, 'utf-8');
-      this.stats.modifiedFiles++;
-
-      console.log(`   ✓ Modified (${result.taggedElements} elements tagged)\n`);
-    } else if (result.modified && this.config.dryRun) {
-      console.log(`   🔍 Would modify (${result.taggedElements} elements)\n`);
-    } else {
-      console.log(`   ○ No changes needed\n`);
-    }
-
-    return result;
-  }
-
-  /**
-   * Tag elements in AST
-   */
-  private async tagAST(ast: any, filePath: string, screenName: string): Promise<TaggingResult> {
-    const idGenerator = new TestIDGenerator(screenName);
-    const changes: ElementChange[] = [];
-    let totalElements = 0;
-    let taggedElements = 0;
-    let skippedElements = 0;
-    let modified = false;
-
-    let elementIndex = 0;
-
-    traverse(ast, {
-      JSXElement: (path: NodePath<t.JSXElement>) => {
-        const node = path.node;
-        const element = this.extractor.extract(node);
-
-        // Only process interactive elements
-        if (!this.shouldTag(element)) {
-          return;
-        }
-
-        totalElements++;
-        elementIndex++;
-
-        // Check if already has data-testid
-        const existingTestId = this.findAttribute(element.openingElement, 'data-testid');
-
-        if (existingTestId && !this.config.force) {
-          skippedElements++;
-          changes.push({
-            line: node.loc?.start.line || 0,
-            tag: element.tag,
-            generatedId: existingTestId,
-            action: 'skipped',
-            reason: 'Already has data-testid',
-          });
-          return;
-        }
-
-        // Generate test ID
-        const testId = idGenerator.generate(element, elementIndex);
-
-        // Add or replace data-testid attribute
-        if (existingTestId && this.config.force) {
-          // Overwrite
-          this.setAttribute(element.openingElement, 'data-testid', testId);
-          taggedElements++;
-          modified = true;
-          changes.push({
-            line: node.loc?.start.line || 0,
-            tag: element.tag,
-            generatedId: testId,
-            action: 'overwritten',
-            reason: `Replaced ${existingTestId}`,
-          });
-        } else {
-          // Add new
-          this.addAttribute(element.openingElement, 'data-testid', testId);
-          taggedElements++;
-          modified = true;
-          changes.push({
-            line: node.loc?.start.line || 0,
-            tag: element.tag,
-            generatedId: testId,
-            action: 'added',
-          });
-        }
-      },
-    });
-
-    this.stats.totalElements += totalElements;
-    this.stats.taggedElements += taggedElements;
-    this.stats.skippedElements += skippedElements;
-
-    return {
-      filePath,
-      totalElements,
-      taggedElements,
-      skippedElements,
-      changes,
-      modified,
-    };
-  }
-
-  /**
-   * Determine if element should be tagged
-   */
-  private shouldTag(element: any): boolean {
-    const tag = element.tag?.toLowerCase();
-    return this.INTERACTIVE_TAGS.includes(tag);
-  }
-
-  /**
-   * Find existing attribute value
-   */
-  private findAttribute(openingElement: t.JSXOpeningElement, name: string): string | null {
-    for (const attr of openingElement.attributes) {
-      if (t.isJSXAttribute(attr) && t.isJSXIdentifier(attr.name) && attr.name.name === name) {
-        if (t.isStringLiteral(attr.value)) {
-          return attr.value.value;
-        }
-      }
-    }
-    return null;
-  }
-
-  /**
-   * Set attribute value (replace if exists)
-   */
-  private setAttribute(openingElement: t.JSXOpeningElement, name: string, value: string): void {
-    for (const attr of openingElement.attributes) {
-      if (t.isJSXAttribute(attr) && t.isJSXIdentifier(attr.name) && attr.name.name === name) {
-        attr.value = t.stringLiteral(value);
-        return;
-      }
-    }
-  }
-
-  /**
-   * Add new attribute
-   */
-  private addAttribute(openingElement: t.JSXOpeningElement, name: string, value: string): void {
-    const newAttr = t.jsxAttribute(
-      t.jsxIdentifier(name),
-      t.stringLiteral(value)
-    );
-    openingElement.attributes.push(newAttr);
-  }
-
-  /**
-   * Find source files for a screen
-   */
-  private findSourceFiles(screenName: string): string[] {
-    const patterns = [
-      path.join(this.config.sourceRoot, `${screenName}/page.tsx`),
-      path.join(this.config.sourceRoot, `${screenName}/index.tsx`),
-      path.join(this.config.sourceRoot, `${screenName}.tsx`),
-      path.join(this.config.sourceRoot, `${screenName}/page.js`),
-      path.join(this.config.sourceRoot, `${screenName}/index.js`),
-      path.join(this.config.sourceRoot, `${screenName}.js`),
-    ];
-
-    const found: string[] = [];
-    for (const pattern of patterns) {
-      if (fs.existsSync(pattern)) {
-        found.push(pattern);
-      }
-    }
-
-    return found;
-  }
-
-  /**
-   * Find all source files recursively
-   */
-  private findAllSourceFiles(dir: string): string[] {
-    const files: string[] = [];
-
-    const scan = (currentDir: string) => {
-      const entries = fs.readdirSync(currentDir, { withFileTypes: true });
-
-      for (const entry of entries) {
-        const fullPath = path.join(currentDir, entry.name);
-
-        // Skip node_modules, .git, etc.
-        if (entry.name.startsWith('.') || entry.name === 'node_modules') {
-          continue;
-        }
-
-        if (entry.isDirectory()) {
-          scan(fullPath);
-        } else if (entry.isFile()) {
-          // Only process .tsx, .jsx, .ts, .js files
-          if (/\.(tsx|jsx|ts|js)$/.test(entry.name)) {
-            files.push(fullPath);
-          }
-        }
-      }
-    };
-
-    scan(dir);
-    return files;
-  }
-
-  /**
-   * Infer screen name from file path
-   */
-  private inferScreenName(filePath: string): string {
-    const relativePath = path.relative(this.config.sourceRoot, filePath);
-    const parts = relativePath.split(path.sep);
-
-    // Use first directory as screen name
-    if (parts.length > 1) {
-      return parts[0];
-    }
-
-    // Use filename without extension
-    const fileName = path.basename(filePath, path.extname(filePath));
-    return fileName === 'page' || fileName === 'index' ? 'app' : fileName;
-  }
-
-  private createEmptyResult(filePath: string): TaggingResult {
-    return {
-      filePath,
-      totalElements: 0,
-      taggedElements: 0,
-      skippedElements: 0,
-      changes: [],
-      modified: false,
-    };
-  }
-
-  /**
-   * Get statistics
-   */
-  getStats(): TaggingStats {
-    return { ...this.stats };
-  }
-}