import * as jsDiff from "diff"; import { unifyPath, hashCode } from "./utils"; import * as rematch from "./rematch"; import { LineMatchingType, DiffStyleType, LineType, DiffLineParts, DiffFile, DiffFileName } from "./types"; export enum CSSLineClass { INSERTS = "d2h-ins", DELETES = "d2h-del", CONTEXT = "d2h-cntx", INFO = "d2h-info", INSERT_CHANGES = "d2h-ins d2h-change", DELETE_CHANGES = "d2h-del d2h-change" } export type HighlightedLines = { oldLine: { prefix: string; content: string; }; newLine: { prefix: string; content: string; }; }; export interface RenderConfig { matching?: LineMatchingType; matchWordsThreshold?: number; maxLineLengthHighlight?: number; diffStyle?: DiffStyleType; } export const defaultRenderConfig = { matching: LineMatchingType.NONE, matchWordsThreshold: 0.25, maxLineLengthHighlight: 10000, diffStyle: DiffStyleType.WORD }; const separator = "/"; const distance = rematch.newDistanceFn((change: jsDiff.Change) => change.value); const matcher = rematch.newMatcherFn(distance); function isDevNullName(name: string): boolean { return name.indexOf("dev/null") !== -1; } function removeInsElements(line: string): string { return line.replace(/(]*>((.|\n)*?)<\/ins>)/g, ""); } function removeDelElements(line: string): string { return line.replace(/(]*>((.|\n)*?)<\/del>)/g, ""); } /** * Convert from LineType to CSSLineClass */ export function toCSSClass(lineType: LineType): CSSLineClass { switch (lineType) { case LineType.CONTEXT: return CSSLineClass.CONTEXT; case LineType.INSERT: return CSSLineClass.INSERTS; case LineType.DELETE: return CSSLineClass.DELETES; } } /** * Prefix length of the hunk lines in the diff */ function prefixLength(isCombined: boolean): number { return isCombined ? 2 : 1; } /** * Escapes all required characters for safe HTML rendering */ // TODO: Test this method inside deconstructLine since it should not be used anywhere else export function escapeForHtml(str: string): string { return str .slice(0) .replace(/&/g, "&") .replace(//g, ">") .replace(/"/g, """) .replace(/'/g, "'") .replace(/\//g, "/"); } /** * Deconstructs diff @line by separating the content from the prefix type */ export function deconstructLine(line: string, isCombined: boolean): DiffLineParts { const indexToSplit = prefixLength(isCombined); return { prefix: line.substring(0, indexToSplit), content: escapeForHtml(line.substring(indexToSplit)) }; } /** * Generates pretty filename diffs * * e.g.: * 1. file = { oldName: "my/path/to/file.js", newName: "my/path/to/new-file.js" } * returns "my/path/to/{file.js → new-file.js}" * 2. file = { oldName: "my/path/to/file.js", newName: "very/new/path/to/new-file.js" } * returns "my/path/to/file.js → very/new/path/to/new-file.js" * 3. file = { oldName: "my/path/to/file.js", newName: "my/path/for/file.js" } * returns "my/path/{to → for}/file.js" */ export function filenameDiff(file: DiffFileName): string { // TODO: Move unify path to parsing const oldFilename = unifyPath(file.oldName); const newFilename = unifyPath(file.newName); if (oldFilename !== newFilename && !isDevNullName(oldFilename) && !isDevNullName(newFilename)) { const prefixPaths = []; const suffixPaths = []; const oldFilenameParts = oldFilename.split(separator); const newFilenameParts = newFilename.split(separator); const oldFilenamePartsSize = oldFilenameParts.length; const newFilenamePartsSize = newFilenameParts.length; let i = 0; let j = oldFilenamePartsSize - 1; let k = newFilenamePartsSize - 1; while (i < j && i < k) { if (oldFilenameParts[i] === newFilenameParts[i]) { prefixPaths.push(newFilenameParts[i]); i += 1; } else { break; } } while (j > i && k > i) { if (oldFilenameParts[j] === newFilenameParts[k]) { suffixPaths.unshift(newFilenameParts[k]); j -= 1; k -= 1; } else { break; } } const finalPrefix = prefixPaths.join(separator); const finalSuffix = suffixPaths.join(separator); const oldRemainingPath = oldFilenameParts.slice(i, j + 1).join(separator); const newRemainingPath = newFilenameParts.slice(i, k + 1).join(separator); if (finalPrefix.length && finalSuffix.length) { return ( finalPrefix + separator + "{" + oldRemainingPath + " → " + newRemainingPath + "}" + separator + finalSuffix ); } else if (finalPrefix.length) { return finalPrefix + separator + "{" + oldRemainingPath + " → " + newRemainingPath + "}"; } else if (finalSuffix.length) { return "{" + oldRemainingPath + " → " + newRemainingPath + "}" + separator + finalSuffix; } return oldFilename + " → " + newFilename; } else if (!isDevNullName(newFilename)) { return newFilename; } else { return oldFilename; } } /** * Generates a unique string numerical identifier based on the names of the file diff */ export function getHtmlId(file: DiffFileName): string { return `d2h-${hashCode(filenameDiff(file)) .toString() .slice(-6)}`; } /** * Selects the correct icon name for the file */ export function getFileIcon(file: DiffFile): string { let templateName = "file-changed"; if (file.isRename) { templateName = "file-renamed"; } else if (file.isCopy) { templateName = "file-renamed"; } else if (file.isNew) { templateName = "file-added"; } else if (file.isDeleted) { templateName = "file-deleted"; } else if (file.newName !== file.oldName) { // If file is not Added, not Deleted and the names changed it must be a rename :) templateName = "file-renamed"; } return templateName; } /** * Highlight differences between @diffLine1 and @diffLine2 using and tags */ export function diffHighlight( diffLine1: string, diffLine2: string, isCombined: boolean, config: RenderConfig = {} ): HighlightedLines { const { matching, maxLineLengthHighlight, matchWordsThreshold, diffStyle } = { ...defaultRenderConfig, ...config }; const line1 = deconstructLine(diffLine1, isCombined); const line2 = deconstructLine(diffLine2, isCombined); if (line1.content.length > maxLineLengthHighlight || line2.content.length > maxLineLengthHighlight) { return { oldLine: { prefix: line1.prefix, content: line1.content }, newLine: { prefix: line2.prefix, content: line2.content } }; } const diff = diffStyle === "char" ? jsDiff.diffChars(line1.content, line2.content) : jsDiff.diffWordsWithSpace(line1.content, line2.content); const changedWords: jsDiff.Change[] = []; if (diffStyle === "word" && matching === "words") { const removed = diff.filter(element => element.removed); const added = diff.filter(element => element.added); const chunks = matcher(added, removed); chunks.forEach(chunk => { if (chunk[0].length === 1 && chunk[1].length === 1) { const dist = distance(chunk[0][0], chunk[1][0]); if (dist < matchWordsThreshold) { changedWords.push(chunk[0][0]); changedWords.push(chunk[1][0]); } } }); } const highlightedLine = diff.reduce((highlightedLine, part) => { const elemType = part.added ? "ins" : part.removed ? "del" : null; const addClass = changedWords.indexOf(part) > -1 ? ' class="d2h-change"' : ""; return elemType !== null ? `${highlightedLine}<${elemType}${addClass}>${part.value}` : `${highlightedLine}${part.value}`; }, ""); return { oldLine: { prefix: line1.prefix, content: removeInsElements(highlightedLine) }, newLine: { prefix: line2.prefix, content: removeDelElements(highlightedLine) } }; }