- @for (lineDiff of calculatedDiff(); track lineDiff.id; let idx = $index) {
-
-
- @for (lineDiff of calculatedDiff(); track lineDiff.id) {
+ } @else {
+
+
+ @for (lineDiff of calculatedDiff(); track lineDiff.id; let idx = $index) {
-
{{ lineDiff.line }}
+
{{ lineDiff.lineNumberInOldText | lineNumber }}
+
{{ lineDiff.lineNumberInNewText | lineNumber }}
}
-
+
+
+
+
+ @for (lineDiff of calculatedDiff(); track lineDiff.id) {
+
+ }
+
+
-
+ }
}
diff --git a/projects/ngx-diff/src/lib/components/unified-diff/unified-diff.component.spec.ts b/projects/ngx-diff/src/lib/components/unified-diff/unified-diff.component.spec.ts
index 0d74def..7b42400 100644
--- a/projects/ngx-diff/src/lib/components/unified-diff/unified-diff.component.spec.ts
+++ b/projects/ngx-diff/src/lib/components/unified-diff/unified-diff.component.spec.ts
@@ -10,14 +10,13 @@ import { DiffMatchPatchService } from '../../services/diff-match-patch/diff-matc
class DiffMatchPatchServiceMock {
// eslint-disable-next-line @typescript-eslint/naming-convention, @typescript-eslint/no-unused-vars, no-underscore-dangle, id-blacklist, id-match
- public computeLineDiff(_oldText: string, _newText: string): Diff[] {
- return [
+ public computeLineDiff = (_oldText: string, _newText: string): Promise
=>
+ Promise.resolve([
[DiffOp.Equal, 'Diff One A\r\nDiff One B\r\n'],
[DiffOp.Insert, 'Diff Two A\r\nDiff Two B\r\n'],
[DiffOp.Delete, 'Diff Three A\r\nDiff Three B'],
[DiffOp.Equal, 'Diff Four A\r\nDiff Four B\r\n'],
- ];
- }
+ ]);
}
describe('UnifiedDiffComponent', () => {
@@ -25,11 +24,12 @@ describe('UnifiedDiffComponent', () => {
let fixture: ComponentFixture;
beforeEach(async () => {
+ vi.useFakeTimers();
+
await TestBed.configureTestingModule({
imports: [UnifiedDiffComponent, LineNumberPipe],
providers: [{ provide: DiffMatchPatchService, useClass: DiffMatchPatchServiceMock }],
}).compileComponents();
-
fixture = TestBed.createComponent(UnifiedDiffComponent);
component = fixture.componentInstance;
fixture.componentRef.setInput('before', 'a');
@@ -37,47 +37,61 @@ describe('UnifiedDiffComponent', () => {
fixture.detectChanges();
});
- it('should create', () => {
- expect(component).toBeTruthy();
+ afterEach(() => {
+ vi.useRealTimers();
});
- it('should have 8 line diffs', () => {
- expect(component.calculatedDiff().length).toBe(8);
- });
+ describe('after diff calculation', () => {
+ beforeEach(async () => {
+ vi.advanceTimersByTime(100);
+ await fixture.whenStable();
+ fixture.detectChanges();
+ });
- it('should have correct line numbers', () => {
- const leftLineNumbers = component.calculatedDiff().map((x) => x.lineNumberInOldText);
- expect(leftLineNumbers).toEqual([1, 2, null, null, 3, 4, 5, 6]);
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
- const rightLineNumbers = component.calculatedDiff().map((x) => x.lineNumberInNewText);
- expect(rightLineNumbers).toEqual([1, 2, 3, 4, null, null, 5, 6]);
- });
+ it('should have 8 line diffs', () => {
+ expect(component.calculatedDiff().length).toBe(8);
+ });
- it('should have correct class annotations', () => {
- const classes = component.calculatedDiff().map((x) => x.type);
- expect(classes).toEqual([
- LineDiffType.Equal,
- LineDiffType.Equal,
- LineDiffType.Insert,
- LineDiffType.Insert,
- LineDiffType.Delete,
- LineDiffType.Delete,
- LineDiffType.Equal,
- LineDiffType.Equal,
- ]);
- });
+ it('should have correct line numbers', () => {
+ const leftLineNumbers = component.calculatedDiff().map((x) => x.lineNumberInOldText);
+ expect(leftLineNumbers).toEqual([1, 2, null, null, 3, 4, 5, 6]);
- it('should have correct line contents', () => {
- const contents = component.calculatedDiff().map((x) => x.line);
- expect(contents).toEqual([
- 'Diff One A',
- 'Diff One B',
- 'Diff Two A',
- 'Diff Two B',
- 'Diff Three A',
- 'Diff Three B',
- 'Diff Four A',
- 'Diff Four B',
- ]);
+ const rightLineNumbers = component.calculatedDiff().map((x) => x.lineNumberInNewText);
+ expect(rightLineNumbers).toEqual([1, 2, 3, 4, null, null, 5, 6]);
+ });
+
+ it('should have correct class annotations', () => {
+ const classes = component.calculatedDiff().map((x) => x.type);
+ const expected = [
+ LineDiffType.Equal,
+ LineDiffType.Equal,
+ LineDiffType.Insert,
+ LineDiffType.Insert,
+ LineDiffType.Delete,
+ LineDiffType.Delete,
+ LineDiffType.Equal,
+ LineDiffType.Equal,
+ ];
+ expect(classes).toEqual(expected);
+ });
+
+ it('should have correct line contents', () => {
+ const contents = component.calculatedDiff().map((x) => x.line);
+ const expected = [
+ 'Diff One A',
+ 'Diff One B',
+ 'Diff Two A',
+ 'Diff Two B',
+ 'Diff Three A',
+ 'Diff Three B',
+ 'Diff Four A',
+ 'Diff Four B',
+ ];
+ expect(contents).toEqual(expected);
+ });
});
});
diff --git a/projects/ngx-diff/src/lib/components/unified-diff/unified-diff.component.ts b/projects/ngx-diff/src/lib/components/unified-diff/unified-diff.component.ts
index 9eedb99..5d2f2e6 100644
--- a/projects/ngx-diff/src/lib/components/unified-diff/unified-diff.component.ts
+++ b/projects/ngx-diff/src/lib/components/unified-diff/unified-diff.component.ts
@@ -23,6 +23,9 @@ import { DiffMatchPatchService } from '../../services/diff-match-patch/diff-matc
import { LineNumberPipe } from '../../pipes/line-number/line-number.pipe';
import { NgClass } from '@angular/common';
import { StyleCalculatorService } from '../../services/style-calculator/style-calculator.service';
+import { BehaviorSubject, debounceTime, startWith, switchMap } from 'rxjs';
+import { takeUntilDestroyed, toObservable, toSignal } from '@angular/core/rxjs-interop';
+import { ProgressBarComponent } from '../progress-bar/progress-bar.component';
type LineDiff = {
id: string;
@@ -43,17 +46,11 @@ type LineDiffResult = {
};
};
-const transformToString = (value: string | number | boolean | undefined) => {
- if (typeof value === 'number' || typeof value === 'boolean') {
- return value.toString();
- }
-
- return value ?? '';
-};
+const transformToString = (value: string | number | boolean | undefined) => value?.toString() ?? '';
@Component({
selector: 'ngx-unified-diff',
- imports: [NgClass, LineNumberPipe],
+ imports: [NgClass, LineNumberPipe, ProgressBarComponent],
templateUrl: './unified-diff.component.html',
styleUrl: './unified-diff.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush,
@@ -79,6 +76,12 @@ export class UnifiedDiffComponent implements AfterViewInit {
public readonly before = input.required();
public readonly after = input.required();
+ protected readonly diffData = computed(() => ({
+ title: this.title(),
+ before: transformToString(this.before()),
+ after: transformToString(this.after()),
+ }));
+
/**
* The number of lines of context to provide either side of a DiffOp.Insert or DiffOp.Delete diff.
* Context is taken from a DiffOp.Equal section.
@@ -89,24 +92,38 @@ export class UnifiedDiffComponent implements AfterViewInit {
public selectedLine?: LineDiff;
- public readonly isContentEqual = computed(() => this.lineDiffResult().isContentEqual);
+ // This needs to be a signal, rather than computed(..) to support alterations when a placeholder is expanded.
public readonly calculatedDiff = signal([]);
- public readonly diffSummary = computed(() => this.lineDiffResult().diffSummary);
-
- protected readonly beforeString = computed(() => transformToString(this.before()));
- protected readonly afterString = computed(() => transformToString(this.after()));
-
- protected readonly diffs = computed(() => {
- return this.dmp.computeLineDiff(this.beforeString(), this.afterString());
- });
- private readonly lineDiffResult = computed(() => {
- return UnifiedDiffComponent.calculateLineDiff(this.diffs(), this.lineContextSize());
- });
+ private readonly isCalculatingSubject = new BehaviorSubject(false);
+
+ protected readonly isCalculating = toSignal(
+ this.isCalculatingSubject.asObservable().pipe(debounceTime(50)),
+ );
+
+ protected readonly diffs = toSignal(
+ toObservable(this.diffData).pipe(
+ takeUntilDestroyed(),
+ debounceTime(50),
+ switchMap(async ({ title, before, after }) => {
+ this.isCalculatingSubject.next(true);
+ const diffs = await this.dmp.computeLineDiff(before, after);
+ return { title, diffs };
+ }),
+ startWith({ title: undefined, diffs: [] }),
+ ),
+ { requireSync: true },
+ );
+
+ protected readonly processedDiff = computed(() => ({
+ ...UnifiedDiffComponent.calculateLineDiff(this.diffs().diffs, this.lineContextSize()),
+ title: this.diffs().title,
+ }));
public constructor() {
effect(() => {
- this.calculatedDiff.set(this.lineDiffResult().calculatedDiff);
+ this.isCalculatingSubject.next(false);
+ this.calculatedDiff.set(this.processedDiff().calculatedDiff);
});
}
@@ -117,7 +134,7 @@ export class UnifiedDiffComponent implements AfterViewInit {
return;
}
- const maxLineNumber = this.lineDiffResult().calculatedDiff.reduce(
+ const maxLineNumber = this.processedDiff().calculatedDiff.reduce(
(maxLineNumber, entry) =>
Math.max(
maxLineNumber,
diff --git a/projects/ngx-diff/src/lib/services/diff-match-patch/diff-match-patch.service.ts b/projects/ngx-diff/src/lib/services/diff-match-patch/diff-match-patch.service.ts
index 2a332a6..1ed4f33 100644
--- a/projects/ngx-diff/src/lib/services/diff-match-patch/diff-match-patch.service.ts
+++ b/projects/ngx-diff/src/lib/services/diff-match-patch/diff-match-patch.service.ts
@@ -1,14 +1,131 @@
import { type Diff, DiffMatchPatch } from 'diff-match-patch-ts';
-import { Injectable } from '@angular/core';
+import { inject, Injectable, InjectionToken, OnDestroy } from '@angular/core';
+
+export interface IDiffWebWorkerFactory {
+ createWorker(): Worker | undefined;
+}
+
+interface DiffWorkerSuccessResponse {
+ id: number;
+ status: 'success';
+ diffs: Diff[];
+}
+
+interface DiffWorkerErrorResponse {
+ id: number;
+ status: 'error';
+ error: { message: string };
+}
+
+export const NGX_DIFF_WEB_WORKER_FACTORY = new InjectionToken('NGX_DIFF_WEB_WORKER_FACTORY');
@Injectable({
providedIn: 'root',
})
-export class DiffMatchPatchService {
+export class DiffMatchPatchService implements OnDestroy {
private readonly dmp = new DiffMatchPatch();
- public computeLineDiff(text1: string, text2: string): Diff[] {
- return this.dmp.diff_lineMode(text1, text2);
+ private readonly promises = new Map<
+ number,
+ { resolve: (value: Diff[]) => void; reject: (reason?: unknown) => void }
+ >();
+
+ private readonly factory = inject(NGX_DIFF_WEB_WORKER_FACTORY, {
+ optional: true,
+ });
+
+ private worker?: Worker;
+ private messageId = 0;
+
+ public computeLineDiff(text1: string, text2: string): Promise {
+ if (this.factory && this.isPotentiallyLongComputation(text1, text2)) {
+ const worker = this.getOrCreateWorker();
+
+ if (worker) {
+ return new Promise((resolve, reject) => {
+ const id = this.messageId++;
+ this.promises.set(id, { resolve, reject });
+
+ try {
+ worker.postMessage({ id, before: text1, after: text2 });
+ } catch (error) {
+ this.promises.delete(id);
+ reject(error);
+ }
+ });
+ }
+ }
+
+ return new Promise((resolve) => resolve(this.dmp.diff_lineMode(text1, text2)));
+ }
+
+ public ngOnDestroy(): void {
+ if (this.worker) {
+ const error = new Error('DiffMatchPatchService is being destroyed.');
+ for (const promise of this.promises.values()) {
+ promise.reject(error);
+ }
+ this.promises.clear();
+
+ this.worker.terminate();
+ this.worker = undefined;
+ }
+ }
+
+ private getOrCreateWorker(): Worker | undefined {
+ if (this.worker) {
+ return this.worker;
+ }
+
+ const worker = this.factory?.createWorker();
+ if (worker) {
+ this.worker = worker;
+ this.worker.onmessage = this.onWorkerMessage.bind(this);
+ this.worker.onerror = this.onWorkerError.bind(this);
+ }
+ return this.worker;
+ }
+
+ private onWorkerMessage({
+ data,
+ }: MessageEvent): void {
+ const promise = this.promises.get(data.id);
+ if (!promise) {
+ console.error('Received a message from web worker with an unknown id.', data);
+ return;
+ }
+
+ if (data.status === 'success') {
+ promise.resolve(data.diffs);
+ } else if (data.status === 'error') {
+ console.error('Web worker error:', data.error);
+ promise.reject(new Error(data.error.message));
+ }
+ this.promises.delete(data.id);
+ }
+
+ private onWorkerError(error: ErrorEvent): void {
+ for (const promise of this.promises.values()) {
+ promise.reject(error);
+ }
+ this.promises.clear();
+
+ if (this.worker) {
+ this.worker.terminate();
+ this.worker = undefined;
+ }
+ }
+
+ private isPotentiallyLongComputation(text1: string, text2: string): boolean {
+ const numLines1 = this.countNewLines(text1);
+ const numLines2 = this.countNewLines(text2);
+
+ return numLines1 + numLines2 > 10000;
+ }
+
+ private countNewLines(input: string): number {
+ const matches = input.match(/\n/g);
+ return matches ? matches.length : 0;
}
}
diff --git a/projects/ngx-diff/styles/default-theme.css b/projects/ngx-diff/styles/default-theme.css
index c7ce9bd..8e28db6 100644
--- a/projects/ngx-diff/styles/default-theme.css
+++ b/projects/ngx-diff/styles/default-theme.css
@@ -26,6 +26,9 @@
--ngx-diff-light-mix-percentage: 4%;
--ngx-diff-heavy-mix-percentage: 10%;
+ --ngx-diff-progress-background-color: #dfdfdf;
+ --ngx-diff-progress-foreground-color: #aaaaaa;
+
--ngx-diff-inserted-background-color: var(--ngx-diff-insert-color);
--ngx-diff-deleted-background-color: var(--ngx-diff-delete-color);
--ngx-diff-equal-background-color: var(--ngx-diff-equal-color);
@@ -73,4 +76,7 @@
--ngx-diff-mix-color: #fff;
--ngx-diff-light-mix-percentage: 4%;
--ngx-diff-heavy-mix-percentage: 10%;
+
+ --ngx-diff-progress-background-color: #354a54;
+ --ngx-diff-progress-foreground-color: #636363;
}
diff --git a/src/app/app.component.html b/src/app/app.component.html
index cf86277..10c6e74 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -34,6 +34,7 @@
(selectedLineChange)="selectedLineChange($event)"
/>
+
+
{
+ let service: DiffWebWorkerFactoryService;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({});
+ service = TestBed.inject(DiffWebWorkerFactoryService);
+ });
+
+ it('should be created', () => {
+ expect(service).toBeTruthy();
+ });
+});
diff --git a/src/app/services/diff-web-worker-factory/diff-web-worker-factory.service.ts b/src/app/services/diff-web-worker-factory/diff-web-worker-factory.service.ts
new file mode 100644
index 0000000..eaa97d3
--- /dev/null
+++ b/src/app/services/diff-web-worker-factory/diff-web-worker-factory.service.ts
@@ -0,0 +1,13 @@
+import { Injectable } from '@angular/core';
+import { IDiffWebWorkerFactory } from 'ngx-diff';
+
+@Injectable()
+export class DiffWebWorkerFactoryService implements IDiffWebWorkerFactory {
+ public createWorker(): Worker | undefined {
+ if (typeof Worker !== 'undefined') {
+ return new Worker(new URL('../../web-workers/diff-web-worker.worker', import.meta.url));
+ } else {
+ return undefined;
+ }
+ }
+}
diff --git a/src/app/web-workers/diff-web-worker.worker.ts b/src/app/web-workers/diff-web-worker.worker.ts
new file mode 100644
index 0000000..85f1dc2
--- /dev/null
+++ b/src/app/web-workers/diff-web-worker.worker.ts
@@ -0,0 +1,25 @@
+///
+
+import { DiffMatchPatch } from 'diff-match-patch-ts';
+
+addEventListener('message', ({ data }) => {
+ try {
+ if (typeof data.before !== 'string' || typeof data.after !== 'string') {
+ throw new TypeError('Input data for diffing must be strings.');
+ }
+
+ const dmp = new DiffMatchPatch();
+ console.time('dmp');
+ const diffs = dmp.diff_lineMode(data.before, data.after);
+ console.timeEnd('dmp');
+ console.log(`${data.before.length} ${data.after.length} length`);
+
+ postMessage({ id: data.id, status: 'success', diffs });
+ } catch (error: any) {
+ postMessage({
+ id: data.id,
+ status: 'error',
+ error: { message: error.message, stack: error.stack },
+ });
+ }
+});
diff --git a/src/main.ts b/src/main.ts
index 7c7f48a..70d39cf 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -4,6 +4,8 @@ import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
import { AppRoutingModule } from './app/app-routing.module';
import { AppComponent } from './app/app.component';
import { environment } from './environments/environment';
+import { NGX_DIFF_WEB_WORKER_FACTORY } from 'ngx-diff';
+import { DiffWebWorkerFactoryService } from './app/services/diff-web-worker-factory/diff-web-worker-factory.service';
if (environment.production) {
enableProdMode();
@@ -13,5 +15,6 @@ bootstrapApplication(AppComponent, {
providers: [
importProvidersFrom(BrowserModule, AppRoutingModule),
provideZonelessChangeDetection(),
+ { provide: NGX_DIFF_WEB_WORKER_FACTORY, useClass: DiffWebWorkerFactoryService },
],
}).catch((err) => console.error(err));
diff --git a/tsconfig.worker.json b/tsconfig.worker.json
new file mode 100644
index 0000000..0ed426a
--- /dev/null
+++ b/tsconfig.worker.json
@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+{
+ "extends": "./tsconfig.json",
+ "compilerOptions": {
+ "outDir": "./out-tsc/worker",
+ "lib": [
+ "es2018",
+ "webworker"
+ ],
+ "types": []
+ },
+ "include": [
+ "src/**/*.worker.ts"
+ ]
+}