jsdiff

When applying Git patches, use applyPatches with a pattern that handles file renames and deletions using a pendingWrites Map. This prevents issues with file swaps (e.g., a -> b and b -> a) and ensures renames are handled correctly.

Key properties available on the patch object:

• patch.isRename: Boolean indicating a rename.
• patch.isCopy: Boolean indicating a copy.
• patch.isDelete: Boolean indicating a deletion.
• patch.isCreate: Boolean indicating a new file creation.
• patch.oldFileName: The original file path (often prefixed with a/ in Git).
• patch.newFileName: The new file path (often prefixed with b/ in Git).
• patch.newMode: The new file mode/permissions.

const {applyPatches} = require('diff');
const fs = require('fs'); // Note: fs must be required
const patch = fs.readFileSync("git-diff.patch").toString();
const DELETE = Symbol('delete');
const pendingWrites = new Map(); // filePath → {content, mode} or DELETE sentinel
applyPatches(patch, {
    loadFile: (patch, callback) => {
        if (patch.isCreate) {
            // Newly created file — no old content to load
            callback(undefined, '');
            return;
        }
        try {
            // Git diffs use a/ and b/ prefixes; strip them to get the real path
            const filePath = patch.oldFileName.replace(/^a\//, '');
            callback(undefined, fs.readFileSync(filePath).toString());
        } catch (e) {
            callback(`No such file: ${patch.oldFileName}`);
        }
    },
    patched: (patch, patchedContent, callback) => {
        if (patchedContent === false) {
            callback(`Failed to apply patch to ${patch.oldFileName}`);
            return;
        }
        const oldPath = patch.oldFileName.replace(/^a\//, '');
        const newPath = patch.newFileName.replace(/^b\//, '');
        if (patch.isDelete) {
            if (!pendingWrites.has(oldPath)) {
                pendingWrites.set(oldPath, DELETE);
            }
        } else {
            pendingWrites.set(newPath, {content: patchedContent, mode: patch.newMode});
            // For renames, delete the old file (but not for copies, 
            // where the old file should be kept)
            if (patch.isRename && !pendingWrites.has(oldPath)) {
                pendingWrites.set(oldPath, DELETE);
            }
        }
        callback();
    },
    complete: (err) => {
        if (err) {
            console.log("Failed with error:", err);
            return;
        }
        for (const [filePath, entry] of pendingWrites) {
            if (entry === DELETE) {
                fs.unlinkSync(filePath);
            } else {
                fs.writeFileSync(filePath, entry.content);
                if (entry.mode) {
                    fs.chmodSync(filePath, entry.mode.slice(-3));
                }
            }
        }
    }
});

Use applyPatches to apply a patch that affects multiple files. You must provide a configuration object with the following callbacks:

• loadFile(patch, callback): Called to load the content of the file being patched. patch.oldFileName provides the path.
• patched(patch, patchedContent, callback): Called after a patch is successfully applied to a file's content. Use this to write the patchedContent to disk.
• complete(err): Called when all patches have been processed.

const {applyPatches} = require('diff');
const fs = require('fs'); // Note: fs must be required
const patch = fs.readFileSync("mydiff.patch").toString();
applyPatches(patch, {
    loadFile: (patch, callback) => {
        let fileContents;
        try {
            fileContents = fs.readFileSync(patch.oldFileName).toString();
        } catch (e) {
            callback(`No such file: ${patch.oldFileName}`);
            return;
        }
        callback(undefined, fileContents);
    },
    patched: (patch, patchedContent, callback) => {
        if (patchedContent === false) {
            callback(`Failed to apply patch to ${patch.oldFileName}`)
            return;
        }
        fs.writeFileSync(patch.oldFileName, patchedContent);
        callback();
    },
    complete: (err) => {
        if (err) {
            console.log("Failed with error:", err);
        }
    }
});

In a browser environment, include diff.js via a <script> tag. Access the Diff global object to call Diff.diffChars(one, other). The resulting array can be used to manipulate the DOM, such as creating <span> elements with different colors for additions, deletions, or common text.

<pre id="display"></pre>
<script src="diff.js"></script>
<script>
const one = 'beep boop',
    other = 'beep boob blah',
    color = '';
    
let span = null;

const diff = Diff.diffChars(one, other),
    display = document.getElementById('display'),
    fragment = document.createDocumentFragment();

diff.forEach((part) => {
  // green for additions, red for deletions
  // grey for common parts
  const color = part.added ? 'green' :
    part.removed ? 'red' : 'grey';
  span = document.createElement('span');
  span.style.color = color;
  span.appendChild(document
    .createTextNode(part.value));
  fragment.appendChild(span);
});

display.appendChild(fragment);
</script>