AL Differ
Early Preview — Work in Progress
This extension is under active development. Features, APIs, and UI are subject to major changes between versions. Expect rough edges, breaking changes, and incomplete functionality. Use at your own risk and please report issues on GitHub.
Structural diff analysis for AL (Microsoft Dynamics 365 Business Central) files.
AL Differ uses a tree-sitter-al parser (@sshadows/tree-sitter-al) to produce tree-recursive diffs that understand AL constructs — objects, fields, procedures, triggers, properties — instead of comparing lines of text.
Features
- Structural diff engine — Matches AL constructs by identity (name, kind), not position. Detects renamed procedures, moved fields, added triggers — things line-based diffs can't see.
- 8 change categories — Logic, property, structural, cosmetic, moved, renamed, added, deleted. Each with a distinct color, used consistently across tree, decorations, and diff views.
- Tree navigation panel — Collapsible DiffTree in the activity bar showing every changed construct with status badges and category labels.
- 4 diff view modes — Full Construct (side-by-side per hunk), Context Lines (changed lines + context), Unified Inline, and Side-by-Side (full file with aligned spacers).
- Editor decorations — Inline gutter dots and background highlights in the standard VS Code diff editor.
- Keyboard-driven — Navigate changes with Alt+Up/Down, filter with Alt+F, switch view modes with Ctrl+1/2/3/4.
Installation
npm install
npm run build
Then press F5 in VS Code to launch the Extension Development Host.
To package as a .vsix:
npm run package
Usage
- Open a git diff of an
.al file in VS Code (e.g., from the Source Control panel).
- Click Show AL Differ in the editor title bar.
- The AL Differ panel opens with:
- Left: Tree view of all changed constructs
- Right: Diff view in your selected mode
Keyboard Shortcuts
| Shortcut |
Action |
| Alt+Down |
Next change |
| Alt+Up |
Previous change |
| Alt+Shift+Down |
Next logic change |
| Alt+Shift+Up |
Previous logic change |
| Alt+F |
Toggle change filter |
| Alt+L |
Show legend |
| Alt+T |
Focus tree panel |
| Ctrl+1/2/3/4 |
Switch view mode |
| U |
Toggle hide unchanged (tree) |
View Modes
| Mode |
Description |
| Full Construct |
Each changed construct as a side-by-side hunk block |
| Context Lines |
Changed lines with 3 lines of context, rest collapsed |
| Unified Inline |
Single column with +/- markers |
| Side-by-Side |
Full old file (left) and new file (right) with aligned spacers |
Change Categories
| Category |
Color |
Meaning |
| Logic |
Orange |
Code body changes (procedure/trigger content) |
| Property |
Blue |
Property value changes (Caption, ToolTip, etc.) |
| Structural |
Purple |
Structural changes (field type, data classification) |
| Cosmetic |
Gray |
Formatting-only changes |
| Moved |
Teal |
Construct moved to a different position |
| Renamed |
Gold |
Construct renamed |
| Added |
Green |
New construct |
| Deleted |
Red |
Removed construct |
Development
Commands
npm run validate # format + lint + typecheck + test (run before committing)
npm run build # esbuild extension bundle
npm run test # vitest unit tests
npm run harness:dev # start web test harness at http://localhost:4000
npm run harness:test # run Playwright visual tests
Project Structure
src/
engine/ # Tree-recursive diff engine (comparator, matcher, walker)
webview/ # WebviewPanel UI (hunk renderer, tree renderer, styles)
extension.ts # VS Code extension entry point
decorations.ts # Editor decoration controller
treeView.ts # Tree view data provider
navigation.ts # Change navigation controller
test/
engine/ # Engine unit tests (124 tests)
webview/ # Webview rendering tests (42 tests)
fixtures/ # Real AL file pairs from commit 8f25c39
harness/
viewer/ # Web-based test harness (no VS Code needed)
tests/ # Playwright screenshot tests
Test Harness
The web harness (npm run harness:dev) lets you test the diff engine and all view modes in a browser without launching VS Code. Select a fixture, switch view modes, and inspect the output.
Playwright tests capture screenshots of the Side-by-Side view and verify visual alignment:
cd harness
npx playwright test tests/side-by-side.spec.ts
npx playwright test tests/side-by-side.spec.ts --update-snapshots # update baselines
License
MIT
