TypeScript Tutorial: Creating a Simple Web-Based Code Diff Checker

Written by

learnmodernjavascript

in

In the world of software development, comparing and understanding the differences between two versions of code is a fundamental task. Whether you’re collaborating with others, tracking changes, or debugging, the ability to quickly identify what’s changed is invaluable. This tutorial will guide you through building a simple, yet effective, web-based code diff checker using TypeScript. We’ll explore the core concepts, implement the necessary logic, and create a user-friendly interface. This project is ideal for beginners and intermediate developers looking to expand their TypeScript skills and gain practical experience with a common development tool.

Why Build a Code Diff Checker?

Code diff checkers are essential for several reasons:

  • Collaboration: They make it easy to see the changes made by collaborators, ensuring everyone is on the same page.
  • Version Control: They help you understand what has changed between different versions of your code, making it easier to revert to previous states or track down bugs.
  • Debugging: They help pinpoint the exact lines of code that are causing issues, speeding up the debugging process.
  • Learning: Building one provides a hands-on learning experience that solidifies your understanding of programming concepts and TypeScript.

This tutorial provides a solid foundation for understanding and implementing a code diff checker, equipping you with valuable skills applicable to various software development scenarios.

Setting Up Your Development Environment

Before we start, ensure you have the following installed:

  • Node.js and npm (or yarn): These are essential for managing dependencies and running the TypeScript compiler.
  • A code editor: Visual Studio Code, Sublime Text, or any editor of your choice.

Let’s create a new project directory and initialize it with npm:

mkdir code-diff-checker
cd code-diff-checker
npm init -y

Next, install TypeScript and a few other packages we’ll need:

npm install typescript @types/diff @types/dompurify diff dompurify --save-dev

Here’s what each package does:

  • typescript: The TypeScript compiler.
  • @types/diff: Type definitions for the `diff` library.
  • @types/dompurify: Type definitions for the `dompurify` library.
  • diff: A library for generating diffs between strings.
  • dompurify: A library for sanitizing HTML to prevent XSS attacks.

Now, create a tsconfig.json file in your project root with the following content. This file configures the TypeScript compiler:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"]
}

This configuration compiles TypeScript to ES5 JavaScript, uses CommonJS modules, and outputs the compiled files to a `dist` directory. The `strict` flag enables strict type checking, and `esModuleInterop` allows interoperability between CommonJS and ES modules. Finally, create a `src` directory where we’ll put our TypeScript code.

Building the Core Logic: The Diffing Function

The heart of our application is the diffing function. This function takes two strings (the old and new code) and generates a diff. We’ll use the `diff` library for this purpose. Create a file named src/diffChecker.ts and add the following code:

import { diffChars } from 'diff';
import DOMPurify from 'dompurify';

interface DiffResult {
  added?: boolean;
  removed?: boolean;
  value: string;
}

function generateDiffHTML(oldText: string, newText: string): string {
  const diff = diffChars(oldText, newText);
  const html = diff.map((part: DiffResult) => {
    if (part.added) {
      return `<ins>${DOMPurify.sanitize(part.value)}</ins>`;
    } else if (part.removed) {
      return `<del>${DOMPurify.sanitize(part.value)}</del>`;
    } else {
      return `<span>${DOMPurify.sanitize(part.value)}</span>`;
    }
  }).join('');
  return html;
}

export default generateDiffHTML;

Let’s break down this code:

  • We import the `diffChars` function from the `diff` library, which compares strings character by character.
  • We import `DOMPurify` to sanitize the diff output and prevent potential XSS vulnerabilities.
  • We define an interface `DiffResult` to represent the output of the diff operation. Each part of the diff will be either added, removed, or unchanged.
  • The generateDiffHTML function takes two strings, `oldText` and `newText`, as input.
  • It calls diffChars to generate the diff.
  • It then iterates over the diff results, creating HTML elements to represent the changes. Added text is wrapped in <ins> tags, removed text in <del> tags, and unchanged text in <span> tags.
  • The `DOMPurify.sanitize()` function is used to sanitize the `value` of each diff part, ensuring that any potentially malicious HTML or JavaScript is removed. This is crucial for security.
  • Finally, it joins all the HTML parts into a single string and returns it.

Creating the User Interface (UI)

Now, let’s create a simple HTML page to display our code diff checker. Create an index.html file in your project root with the following content:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Code Diff Checker</title>
  <style>
    body {
      font-family: monospace;
      margin: 20px;
    }
    textarea {
      width: 100%;
      height: 100px;
      margin-bottom: 10px;
    }
    ins {
      background-color: #ccffcc;
      text-decoration: none;
    }
    del {
      background-color: #ffcccc;
      text-decoration: line-through;
    }
  </style>
</head>
<body>
  <h2>Code Diff Checker</h2>
  <textarea id="oldText" placeholder="Enter old code here"></textarea>
  <textarea id="newText" placeholder="Enter new code here"></textarea>
  <button id="diffButton">Diff</button>
  <div id="diffOutput"></div>
  <script src="./dist/main.js"></script>
</body>
</html>

This HTML provides the basic structure of our UI:

  • Two textareas for entering the old and new code.
  • A button to trigger the diff calculation.
  • A div to display the diff output.
  • Basic CSS styling to improve readability.
  • A script tag to include our compiled JavaScript file (main.js), which we’ll create next.

Now, create src/main.ts to handle the UI interactions:

import generateDiffHTML from './diffChecker';

const oldTextarea = document.getElementById('oldText') as HTMLTextAreaElement;
const newTextarea = document.getElementById('newText') as HTMLTextAreaElement;
const diffButton = document.getElementById('diffButton') as HTMLButtonElement;
const diffOutput = document.getElementById('diffOutput') as HTMLDivElement;

diffButton.addEventListener('click', () => {
  const oldText = oldTextarea.value;
  const newText = newTextarea.value;
  const diffHTML = generateDiffHTML(oldText, newText);
  diffOutput.innerHTML = diffHTML;
});

Let’s break down this script:

  • We import the generateDiffHTML function from ./diffChecker.
  • We get references to the HTML elements using document.getElementById(). The as HTMLTextAreaElement and as HTMLButtonElement etc. are type assertions, which tell TypeScript the expected type of the element.
  • We attach a click event listener to the “Diff” button.
  • When the button is clicked, we get the values from the textareas, call generateDiffHTML to get the diff HTML, and set the innerHTML of the diffOutput div to display the diff.

Compiling and Running the Application

Now, let’s compile our TypeScript code and run the application. In your terminal, run the following command:

tsc

This will compile your TypeScript files into JavaScript files in the dist directory. To test the application, open index.html in your web browser. You can also use a simple web server (like the one provided by VS Code’s Live Server extension) or a more robust server like `http-server`:

npm install -g http-server
http-server

Then, navigate to the URL provided by `http-server` in your browser (usually `http://localhost:8080`). Enter some old and new code into the textareas, and click the “Diff” button. You should see the differences highlighted in the output area.

Advanced Features and Enhancements

The basic code diff checker is functional, but there are several ways to enhance it:

  • Syntax Highlighting: Integrate a code syntax highlighting library (like Prism.js or highlight.js) to improve the readability of the code in the textareas and the diff output.
  • Line Numbers: Add line numbers to the diff output to make it easier to pinpoint changes.
  • File Input: Allow users to upload files to compare, rather than just pasting code.
  • Code Folding: Implement code folding to collapse and expand sections of code, especially useful for long diffs.
  • Diff Type Selection: Allow users to choose different diff algorithms (e.g., character-level, word-level, or line-level).
  • Error Handling: Implement proper error handling to gracefully handle invalid input or unexpected errors.
  • Real-time Updates: Use JavaScript to update the diff output dynamically as the user types, providing instant feedback.

Common Mistakes and How to Fix Them

Here are some common mistakes developers make when building code diff checkers and how to avoid them:

  • Missing Sanitization: Failing to sanitize the diff output can lead to Cross-Site Scripting (XSS) vulnerabilities. Always sanitize the output using a library like DOMPurify.
  • Incorrect Type Assertions: Using incorrect type assertions (e.g., as any) can bypass TypeScript’s type checking and lead to runtime errors. Make sure your type assertions are accurate.
  • Ignoring Edge Cases: Not handling edge cases like empty inputs or very long code snippets can lead to unexpected behavior. Test your code with various inputs to ensure it works correctly.
  • Inefficient Diffing Algorithms: Using an inefficient diffing algorithm can make the diff calculation slow, especially for large codebases. Choose a diffing library that is optimized for performance.
  • Poor UI Design: A poorly designed UI can make it difficult for users to understand the diff. Use clear visual cues (e.g., color-coding) to highlight changes, and provide a user-friendly interface.

Key Takeaways

  • You’ve learned how to create a basic code diff checker using TypeScript, the `diff` library, and DOMPurify.
  • You understand the importance of sanitizing user input to prevent XSS attacks.
  • You’ve seen how to structure a TypeScript project with a focus on modularity and readability.
  • You’ve gained practical experience with event handling and DOM manipulation in a web environment.

FAQ

Here are some frequently asked questions about building a code diff checker:

  1. What is a diff? A diff (short for difference) is a representation of the changes between two sets of data, often text files or code. It highlights the additions, deletions, and modifications made.
  2. Why is sanitization important? Sanitization is crucial to prevent XSS attacks. Without sanitization, malicious code could be injected into the diff output and executed in the user’s browser.
  3. What are some alternative diff libraries? Besides `diff`, other popular diff libraries include `jsdiff` and `google-diff-match-patch`.
  4. Can I use this code diff checker in a production environment? The basic code diff checker in this tutorial is a good starting point. You’ll need to add more robust error handling, security measures, and testing before deploying it to production.
  5. How can I improve the performance of the diff checker? Consider optimizing the diff algorithm (e.g., using a faster diffing library), caching the diff results, and using techniques like code splitting to improve performance.

This tutorial provides a solid foundation for understanding and implementing a code diff checker, equipping you with valuable skills applicable to various software development scenarios. By building this tool, you’ve not only learned practical TypeScript skills but also gained insight into how to manage and visualize code changes effectively.

More posts