Vue Diff Algorithm Implementation Challenge

This challenge asks you to implement a simplified version of a diff algorithm, similar to what powers features like Git's diff view or code comparison tools. You will create a Vue component that takes two arrays of strings as input and highlights the differences between them, indicating added, removed, and unchanged lines. This is fundamental for visualizing changes in text-based data within a user interface.

Problem Description

You need to develop a Vue 3 component using TypeScript that accepts two arrays of strings, representing the "old" and "new" versions of some text content. The component should then compute the differences between these two arrays and render them visually.

Key Requirements:

• Input: The component should accept two props: oldLines (an array of strings) and newLines (an array of strings).
• Diff Calculation: Implement or integrate a diff algorithm to find the added, removed, and unchanged lines. For this challenge, you can use a simplified diff algorithm or a readily available library if preferred, but the core task is to apply its output within Vue.
• Rendering:
  • Lines present in both arrays and unchanged should be displayed normally.
  • Lines present only in oldLines and removed should be visually indicated (e.g., with a red background and a '-' prefix).
  • Lines present only in newLines and added should be visually indicated (e.g., with a green background and a '+' prefix).
• Output: The component should render a list of lines, each with appropriate styling and prefixes to denote its status (unchanged, added, removed).

Expected Behavior: The component should accurately represent the transformation from oldLines to newLines by showing exactly which lines were added, removed, or kept the same.

Edge Cases:

• Empty input arrays (oldLines or newLines or both).
• Identical input arrays.
• Arrays with a large number of differences.

Examples

Example 1:

Input:
oldLines: ["line 1", "line 2", "line 3"]
newLines: ["line 1", "line 2 modified", "line 4"]

Output:

<div>
  <div style="background-color: transparent;">line 1</div>
  <div style="background-color: lightcoral;">- line 2</div>
  <div style="background-color: lightcoral;">- line 3</div>
  <div style="background-color: lightgreen;">+ line 2 modified</div>
  <div style="background-color: lightgreen;">+ line 4</div>
</div>

Explanation: "line 1" is unchanged. "line 2" and "line 3" were removed. "line 2 modified" and "line 4" were added. The output shows this using styling and prefixes.

Example 2:

Input:
oldLines: ["apple", "banana", "cherry"]
newLines: ["apple", "banana", "cherry"]

Output:

<div>
  <div style="background-color: transparent;">apple</div>
  <div style="background-color: transparent;">banana</div>
  <div style="background-color: transparent;">cherry</div>
</div>

Explanation: The input arrays are identical, so all lines are rendered as unchanged.

Example 3:

Input:
oldLines: []
newLines: ["first", "second"]

Output:

<div>
  <div style="background-color: lightgreen;">+ first</div>
  <div style="background-color: lightgreen;">+ second</div>
</div>

Explanation: When the old lines are empty, all new lines are considered added.

Example 4:

Input:
oldLines: ["one", "two"]
newLines: []

Output:

<div>
  <div style="background-color: lightcoral;">- one</div>
  <div style="background-color: lightcoral;">- two</div>
</div>

Explanation: When the new lines are empty, all old lines are considered removed.

Constraints

• The input arrays (oldLines, newLines) will contain strings.
• The maximum number of lines in either array will not exceed 1000.
• The length of individual strings within the arrays will not exceed 256 characters.
• Performance is important; the diff calculation and rendering should be reasonably fast for the given constraints.
• You should use Vue 3 and TypeScript.

Notes

• You are encouraged to research and utilize a diffing algorithm. A common and effective one is the Longest Common Subsequence (LCS) algorithm, or more specialized algorithms like Myers' diff algorithm. Libraries like diff (npm package) can be helpful, but the challenge is to integrate its output into your Vue component.
• Think about how to represent the diff results internally before rendering. An array of objects, where each object describes a line and its type (added, removed, common), is a good starting point.
• The styling for added/removed lines in the examples is illustrative. You can choose your preferred visual indicators (colors, icons, etc.) as long as they are clear.
• Consider how to handle cases where a line is modified (e.g., "hello" becomes "hallo"). For this challenge, a simple diff that treats a modified line as a removal of the old and an addition of the new is acceptable. More sophisticated word-level diffing is out of scope unless you choose to implement it.