# Comparador de Diferencias de Texto y Código Online: Arquitectura Técnica y Guía Exhaustiva

La comparación algorítmica de texto, esquemas y código fuente es clave en desarrollo de software, DevOps y auditoría técnica. Al evaluar un pull request, revisar desviaciones de configuración (configuration drift) o validar contratos, la exactitud matemática y la velocidad son críticas.

El Comparador de Diferencias de Texto y Código de ToolsAA es una herramienta web profesional ejecutada 100% en el navegador. Integra un verificador de diferencias de texto (diff checker online), visor de código en paralelo (side-by-side) y generador de parches Git y POSIX. Con arquitectura de conocimiento cero (zero-knowledge), procesa todo en el cliente sin servidores externos ni telemetría. Esta guía analiza el algoritmo de Myers, la arquitectura web, código en TypeScript y Python, y resolución de casos límite.

# Visión General y Casos de Uso en Producción

Los comparadores calculan las transformaciones mínimas para convertir un documento original en uno modificado, aislando adiciones, supresiones y ajustes intra-línea a nivel de punto de código (code point).

[ Documento Original ]                     [ Documento Modificado ]
         \                                       /
          v                                     v
+-------------------------------------------------------------+
|        Motor de Comparación Diff en Navegador ToolsAA       |
|  - Cero Telemetría de Red (Evaluación 100% en el Cliente)   |
|  - Normalización (CRLF -> LF, Unicode NFC, Espacios)        |
|  - Recorrido del Gráfico de Edición O(ND) de Eugene Myers   |
|  - Tokenizador Intra-Línea Detallado (\p{L}\p{N} RegEx)     |
+-------------------------------------------------------------+
               |                               |
               v                               v
   [ Vista Dividida (Split) ]      [ Parche Unificado (POSIX/Git) ]

# Casos de Uso Clave en Ingeniería

• Commits y PRs: Resalta variables renombradas, dependencias y mutaciones sin alternar ramas.
• Auditoría IaC: Compare manifiestos de Kubernetes, Terraform y Docker Compose protegiendo secretos.
• Migraciones SQL: Audite esquemas DDL y planes EXPLAIN verificando índices y filtros lógicos.
• Payloads JSON: Detecte propiedades suprimidas y alteraciones en respuestas REST y GraphQL.
• Contratos y Legal: Compare acuerdos legales y especificaciones, detectando cláusulas de responsabilidad alteradas.

# Privacidad Absoluta en el Cliente

Muchos comparadores envían datos a servidores remotos arriesgando credenciales en logs ajenos. ToolsAA aplica un Modelo de Cero Servidor: al comparar textos online, tokenización, cálculo y renderizado ocurren en la sandbox local del navegador. Cero datos abandonan su equipo.

# Arquitectura Técnica y Funcionamiento Interno

El cálculo de diferencias moderno resuelve la Subsecuencia Común Más Larga (LCS), matemáticamente dual a la Secuencia de Edición Más Corta (SES).

# 1. El Algoritmo O(ND) de Eugene Myers

Git implementa el algoritmo de Eugene Myers (1986). Dadas secuencias $A$ ($N$) y $B$ ($M$), modela la comparación sobre un gráfico de edición (edit graph) de cuadrícula $(N+1) \times (M+1)$:

• Paso horizontal $(x, y) \to (x+1, y)$: Eliminación de $A[x+1]$ (coste 1).
• Paso vertical $(x, y) \to (x, y+1)$: Inserción de $B[y+1]$ (coste 1).
• Paso diagonal $(x, y) \to (x+1, y+1)$: Coincidencia $A[x+1] == B[y+1]$ (coste 0).

Busca el camino óptimo de $(0,0)$ a $(N,M)$ minimizando $D$:

• Diagonales: $k = x - y$, con $k \in [-M, N]$.
• Mayor alcance: El vector $V$ almacena el mayor $x$: $x = \max(V[k-1] + 1, V[k+1])$.
• Avance voraz (snakes): Avanza por diagonales sin coste mientras $A[x+1] == B[y+1]$.

Complejidad: $O(ND)$ en tiempo y $O(N+M)$ en memoria; con cambios moderados ($D \ll N$), concluye en milisegundos.

# 2. Salvaguardas: Exploración Acotada y Anclaje Heurístico

En textos divergentes ($D \approx N+M$), la complejidad escala a $O(N^2)$. ToolsAA aplica tres salvaguardas:

1. Poda Lineal ($O(K)$): Descarta líneas idénticas iniciales y finales previo al grafo.
2. Profundidad Acotada: Con $N \cdot M > 300.000$, limita la búsqueda a $D_{\max} = 400$.
3. Anclaje Heurístico ($O(N+M)$): Tabla hash que vincula bloques comunes en ventanas de 60 líneas.

# 3. Tokenización Multinivel y Web APIs Nativas

• Línea: Divide por \n, idóneo para código.
• Palabra: RegEx Unicode (\p{L}\p{N}_) que separa palabras preservando acentos y grafías internacionales.
• Carácter: Array.from() descompone pares sustitutos UTF-16, preservando emojis.
• Web APIs: FileReader para lectura local sin red, Int32Array para evitar recolección de basura y useDeferredValue de React 18 para no bloquear el renderizado.

# 4. Estándar POSIX y Especificación de Parche Unificado

Genera parches conformes a POSIX.1-2008 y Git. En la cabecera @@ -l,s +l,s @@, $l$ y $s$ definen inicio y extensión en archivos base y modificado, con 3 líneas de contexto para que git apply ubique cambios con exactitud.

# Guía Práctica de Uso Paso a Paso

# Paso 1: Carga e Introducción de Datos

• Pegar Texto: Inserte el original a la izquierda y el modificado a la derecha.
• Cargar Archivos: Use Subir Archivo para importar ficheros locales vía FileReader nativo, sin conexión remota.
• Plantillas: Presets de TypeScript, JSON, SQL o texto editorial.

# Paso 2: Selección del Modo de Vista

• Vista Dividida (Split View): Columnas sincronizadas que resaltan supresiones en rojo e inserciones en verde.
• Vista Unificada (Unified View): Flujo cronológico con prefijos + y -, idéntico a git diff.

# Paso 3: Configuración de Granularidad y Normalización

• Granularidad: Palabra para léxico, Línea para código, o Carácter para hashes.
• Espacios: Conservar Todo para indentación, Omitir Extremos para márgenes, o Ignorar Todo para contenido puro.
• Mayúsculas/Minúsculas: Active Ignorar Mayúsculas para sentencias SQL o claves no sensibles a caja.

# Paso 4: Navegación y Exportación de Resultados

• Navegador: Salte entre bloques modificados con Anterior y Siguiente.
• Exportar: Copie el parche unificado o descargue archivos .diff o .patch para CI/CD.

# Implementaciones de Código en Producción

# 1. Implementación en TypeScript Moderno

Algoritmo de Myers y generador de parches unificados para navegador y Node.js:

export type DiffOp = "equal" | "delete" | "insert";
export interface DiffItem { op: DiffOp; val: string; }

// Algoritmo de Eugene Myers O(ND) en TypeScript
export function myersDiff(a: string[], b: string[]): DiffItem[] {
  const n = a.length, m = b.length, max = n + m;
  const v = new Int32Array(2 * max + 1);
  const trace: Int32Array[] = [];

  for (let d = 0; d <= max; d++) {
    trace.push(new Int32Array(v));
    for (let k = -d; k <= d; k += 2) {
      let x = (k === -d || (k !== d && v[k - 1 + max] < v[k + 1 + max]))
        ? v[k + 1 + max] : v[k - 1 + max] + 1;
      let y = x - k;
      while (x < n && y < m && a[x] === b[y]) { x++; y++; }
      v[k + max] = x;
      if (x >= n && y >= m) { d = max + 1; break; }
    }
  }

  // Reconstrucción del historial de edición (backtracking)
  let x = n, y = m;
  const diff: DiffItem[] = [];
  for (let d = trace.length - 1; d >= 0; d--) {
    const vP = trace[d], k = x - y;
    const prevK = (k === -d || (k !== d && vP[k - 1 + max] < vP[k + 1 + max])) ? k + 1 : k - 1;
    const px = vP[prevK + max], py = px - prevK;
    while (x > px && y > py) { x--; y--; diff.push({ op: "equal", val: a[x] }); }
    if (d > 0) {
      if (x === px) { y--; diff.push({ op: "insert", val: b[y] }); }
      else { x--; diff.push({ op: "delete", val: a[x] }); }
    }
    x = px; y = py;
  }
  return diff.reverse();
}

// Formateo de parche unificado estándar POSIX/Git
export function toPatch(diff: DiffItem[], nameA = "a.txt", nameB = "b.txt"): string {
  let patch = `--- ${nameA}\n+++ ${nameB}\n@@ -1,${diff.length} +1,${diff.length} @@\n`;
  for (const item of diff) {
    const pfx = item.op === "equal" ? " " : item.op === "delete" ? "-" : "+";
    patch += `${pfx}${item.val}\n`;
  }
  return patch;
}

# 2. Implementación en Python 3.11+

Implementación completa en Python moderno para calcular diferencias y generar parches:

from typing import List, Tuple

def myers_diff(a: List[str], b: List[str]) -> List[Tuple[str, str]]:
    """Calcula diferencias óptimas utilizando el algoritmo O(ND) de Myers."""
    n, m = len(a), len(b)
    max_d = n + m
    v = {1: 0}
    trace = []

    for d in range(max_d + 1):
        trace.append(v.copy())
        for k in range(-d, d + 1, 2):
            x = v[k + 1] if (k == -d or (k != d and v.get(k - 1, 0) < v.get(k + 1, 0))) else v.get(k - 1, 0) + 1
            y = x - k
            while x < n and y < m and a[x] == b[y]:
                x += 1; y += 1
            v[k] = x
            if x >= n and y >= m:
                break
        if v.get(n - m, 0) >= n:
            break

    # Reconstrucción de la secuencia óptima (backtracking)
    x, y = n, m
    diff = []
    for d in range(len(trace) - 1, -1, -1):
        v_p = trace[d]
        k = x - y
        prev_k = k + 1 if (k == -d or (k != d and v_p.get(k - 1, 0) < v_p.get(k + 1, 0))) else k - 1
        px = v_p.get(prev_k, 0)
        py = px - prev_k
        while x > px and y > py:
            x -= 1; y -= 1
            diff.append(("equal", a[x]))
        if d > 0:
            if x == px:
                y -= 1; diff.append(("insert", b[y]))
            else:
                x -= 1; diff.append(("delete", a[x]))
        x, y = px, py

    return list(reversed(diff))

def format_patch(diff: List[Tuple[str, str]], file_a="a.txt", file_b="b.txt") -> str:
    """Genera un parche unificado compatible con git apply y patch."""
    lines = [f"--- {file_a}", f"+++ {file_b}", f"@@ -1,{len(diff)} +1,{len(diff)} @@"]
    for op, val in diff:
        pfx = " " if op == "equal" else ("-" if op == "delete" else "+")
        lines.append(f"{pfx}{val}")
    return "\n".join(lines) + "\n"

# Errores Comunes, Casos Límite y Solución de Problemas

# 1. Inconsistencias de Saltos de Línea (CRLF frente a LF)

• Problema: Archivos idénticos entre Windows y Linux aparecen modificados por diferencias entre \r\n y \n.
• Solución: ToolsAA convierte CRLF a LF (.replace(/\r\n/g, "\n")) previo a la matriz.

# 2. Normalización Unicode: NFC frente a NFD

• Problema: Acentos difieren entre macOS (NFD) y Linux/Windows (NFC), generando falsos positivos.
• Solución: Aplique String.prototype.normalize('NFC') antes de tokenizar para alinear puntos de código.

# 3. Caracteres Invisibles de Ancho Cero y Troyanos BiDi

• Problema: Líneas idénticas difieren por espacios de ancho cero (U+200B), marcas BOM (U+FEFF) o anulaciones (U+202E).
• Solución: El motor renderiza etiquetas visuales explícitas ([ZWSP], [BOM]) sobre caracteres no imprimibles.

# 4. Claves Desordenadas en Objetos JSON

• Problema: JSONs equivalentes reportan diferencias masivas por distinto orden de propiedades.
• Solución: Ordene recursivamente las claves con Object.keys().sort() previo a la comparación.

# 5. Saturación de Memoria en Archivos Minificados Monolínea

• Problema: Archivos minificados masivos en una sola línea congestionan el análisis léxico y el DOM.
• Solución: ToolsAA acota la segmentación a 5.000 caracteres por línea y delega el renderizado en useDeferredValue.

# Preguntas Frecuentes (FAQ)

# Q1: ¿Cómo garantiza ToolsAA la privacidad de código y credenciales?

Respuesta: Opera 100% en el navegador ("use client"). Algoritmo, normalización y parches se procesan en memoria local sin llamadas remotas ni telemetría.

# Q2: ¿En qué se diferencia el algoritmo de Myers de la programación dinámica tradicional de LCS?

Respuesta: La programación clásica evalúa una matriz $N \times M$ en $O(NM)$. Myers recorre diagonales con coste cero en coincidencias, alcanzando $O(ND)$ cuando $D \ll N$.

# Q3: ¿Por qué el comparador resalta todo el archivo si parece idéntico?

Respuesta: Ocurre por discrepancias de fin de línea entre Windows (\r\n) y Unix (\n). Active Omitir Extremos o la normalización automática a LF en ToolsAA.

# Q4: ¿Es posible comparar archivos minificados o JSON en una línea?

Respuesta: Sí. Configure la Granularidad en Palabra o Carácter. El motor fragmenta la línea en tokens léxicos, aislando cambios sin requerir saltos de línea.

# Q5: ¿Cómo se interpretan las coordenadas en las cabeceras de un parche?

Respuesta: En @@ -l,s +l,s @@, -l,s indica línea inicial y longitud en el archivo original, y +l,s en el modificado. git apply las usa para ubicar cambios sin desfases.

# Q6: ¿Qué nivel de granularidad conviene según el contenido?

Respuesta: Use Palabra con Conservar Espacios para código; Palabra con Omitir Extremos para prosa o Markdown; y Carácter para hashes y firmas criptográficas.

# Q7: ¿Cómo evita ToolsAA bloqueos de interfaz con archivos grandes?

Respuesta: Aplica poda lineal previa, exploración limitada a $D_{\max}=400$ con anclaje heurístico, matrices Int32Array y useDeferredValue de React 18.

# Q8: ¿Cómo se aplica un parche generado en la terminal?

Respuesta: Guarde el archivo como .patch y aplíquelo en su terminal con utilidades estándar:

git apply --ignore-whitespace cambios.patch
patch -p1 < cambios.patch

# Matriz Comparativa: Modos, Granularidades y Casos de Uso

# Conclusión

El Comparador de Diferencias de Texto y Código de ToolsAA ofrece una plataforma de ingeniería rigurosa para el análisis de cambios, respaldada por el algoritmo O(ND) de Eugene Myers y un modelo estricto de privacidad en el cliente. Al ejecutar todas las operaciones en el navegador, garantiza velocidad instantánea sin transferir código confidencial ni credenciales a servidores remotos.

Ya sea para auditar pull requests, verificar manifiestos o inspeccionar respuestas de APIs, disfrute de una herramienta precisa para comparar texto online con exactitud matemática y confidencialidad absoluta.