From dd13fabeedb8546bdc0f0c1bacc33cbaca06d682 Mon Sep 17 00:00:00 2001 From: Richard Russell Date: Sat, 6 May 2023 13:11:09 +0100 Subject: [PATCH] feat(ngx-jwt): mark DiffMatchPatchService as providedIn root --- .prettierrc | 11 +- angular.json | 10 +- package-lock.json | 176 ++++++++++++++++++ package.json | 4 +- .../inline-diff/inline-diff.component.html | 23 +++ .../inline-diff/inline-diff.component.scss | 83 +++++++++ .../inline-diff/inline-diff.component.spec.ts | 32 ++-- .../inline-diff/inline-diff.component.ts | 124 ++---------- .../diff-match-patch.service.spec.ts | 16 ++ .../diff-match-patch.service.ts | 9 +- projects/ngx-diff/src/ngx-diff.module.ts | 5 +- projects/ngx-diff/src/public-api.ts | 4 +- 12 files changed, 354 insertions(+), 143 deletions(-) create mode 100644 projects/ngx-diff/src/lib/components/inline-diff/inline-diff.component.html create mode 100644 projects/ngx-diff/src/lib/components/inline-diff/inline-diff.component.scss rename projects/ngx-diff/src/{ => lib/components}/inline-diff/inline-diff.component.spec.ts (69%) rename projects/ngx-diff/src/{ => lib/components}/inline-diff/inline-diff.component.ts (66%) create mode 100644 projects/ngx-diff/src/lib/services/diff-match-patch/diff-match-patch.service.spec.ts rename projects/ngx-diff/src/{ => lib/services/diff-match-patch}/diff-match-patch.service.ts (80%) diff --git a/.prettierrc b/.prettierrc index 554f2a3..297df9b 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,4 +1,13 @@ { "singleQuote": true, - "printWidth": 100 + "printWidth": 100, + "importOrder": [ + "^@angular/(.*)$", + "^@(.*)/(.*)$", + "^[./]" + ], + "importOrderSeparation": true, + "importOrderSortSpecifiers": true, + "trailingComma": "all", + "importOrderParserPlugins": ["typescript", "decorators-legacy"] } diff --git a/angular.json b/angular.json index b4f613d..da361ca 100644 --- a/angular.json +++ b/angular.json @@ -5,11 +5,6 @@ "projects": { "ngx-diff-demo": { "projectType": "application", - "schematics": { - "@schematics/angular:component": { - "style": "scss" - } - }, "root": "", "sourceRoot": "src", "prefix": "app", @@ -154,6 +149,11 @@ } } }, + "schematics": { + "@schematics/angular:component": { + "style": "scss" + } + }, "cli": { "analytics": "3c2711c5-4843-4cca-a328-5806ff26cc55" } diff --git a/package-lock.json b/package-lock.json index 7a3fb9c..34e3e52 100644 --- a/package-lock.json +++ b/package-lock.json @@ -35,6 +35,7 @@ "@angular/cli": "^14.2.11", "@angular/compiler-cli": "^14.3.0", "@angular/language-service": "^14.3.0", + "@trivago/prettier-plugin-sort-imports": "^4.1.1", "@types/jasmine": "^3.6.9", "@types/jasminewd2": "~2.0.3", "@typescript-eslint/eslint-plugin": "^5.36.2", @@ -53,6 +54,7 @@ "karma-jasmine": "~5.1.0", "karma-jasmine-html-reporter": "^2.0.0", "ng-packagr": "^14.2.2", + "prettier": "^2.8.8", "protractor": "~7.0.0", "ts-node": "~8.3.0", "typescript": "^4.3.5" @@ -3820,6 +3822,86 @@ "node": ">= 10" } }, + "node_modules/@trivago/prettier-plugin-sort-imports": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/@trivago/prettier-plugin-sort-imports/-/prettier-plugin-sort-imports-4.1.1.tgz", + "integrity": "sha512-dQ2r2uzNr1x6pJsuh/8x0IRA3CBUB+pWEW3J/7N98axqt7SQSm+2fy0FLNXvXGg77xEDC7KHxJlHfLYyi7PDcw==", + "dev": true, + "dependencies": { + "@babel/generator": "7.17.7", + "@babel/parser": "^7.20.5", + "@babel/traverse": "7.17.3", + "@babel/types": "7.17.0", + "javascript-natural-sort": "0.7.1", + "lodash": "^4.17.21" + }, + "peerDependencies": { + "@vue/compiler-sfc": "3.x", + "prettier": "2.x" + }, + "peerDependenciesMeta": { + "@vue/compiler-sfc": { + "optional": true + } + } + }, + "node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/generator": { + "version": "7.17.7", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.17.7.tgz", + "integrity": "sha512-oLcVCTeIFadUoArDTwpluncplrYBmTCCZZgXCbgNGvOBBiSDDK3eWO4b/+eOTli5tKv1lg+a5/NAXg+nTcei1w==", + "dev": true, + "dependencies": { + "@babel/types": "^7.17.0", + "jsesc": "^2.5.1", + "source-map": "^0.5.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/traverse": { + "version": "7.17.3", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.17.3.tgz", + "integrity": "sha512-5irClVky7TxRWIRtxlh2WPUUOLhcPN06AGgaQSB8AEwuyEBgJVuJ5imdHm5zxk8w0QS5T+tDfnDxAlhWjpb7cw==", + "dev": true, + "dependencies": { + "@babel/code-frame": "^7.16.7", + "@babel/generator": "^7.17.3", + "@babel/helper-environment-visitor": "^7.16.7", + "@babel/helper-function-name": "^7.16.7", + "@babel/helper-hoist-variables": "^7.16.7", + "@babel/helper-split-export-declaration": "^7.16.7", + "@babel/parser": "^7.17.3", + "@babel/types": "^7.17.0", + "debug": "^4.1.0", + "globals": "^11.1.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/types": { + "version": "7.17.0", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.17.0.tgz", + "integrity": "sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw==", + "dev": true, + "dependencies": { + "@babel/helper-validator-identifier": "^7.16.7", + "to-fast-properties": "^2.0.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@trivago/prettier-plugin-sort-imports/node_modules/source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/@tsconfig/node10": { "version": "1.0.9", "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.9.tgz", @@ -11204,6 +11286,12 @@ "node": ">= 6.9.x" } }, + "node_modules/javascript-natural-sort": { + "version": "0.7.1", + "resolved": "https://registry.npmjs.org/javascript-natural-sort/-/javascript-natural-sort-0.7.1.tgz", + "integrity": "sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw==", + "dev": true + }, "node_modules/jest-worker": { "version": "27.5.1", "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz", @@ -14357,6 +14445,21 @@ "node": ">= 0.8.0" } }, + "node_modules/prettier": { + "version": "2.8.8", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", + "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", + "dev": true, + "bin": { + "prettier": "bin-prettier.js" + }, + "engines": { + "node": ">=10.13.0" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, "node_modules/pretty-bytes": { "version": "5.6.0", "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz", @@ -20951,6 +21054,67 @@ "integrity": "sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==", "dev": true }, + "@trivago/prettier-plugin-sort-imports": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/@trivago/prettier-plugin-sort-imports/-/prettier-plugin-sort-imports-4.1.1.tgz", + "integrity": "sha512-dQ2r2uzNr1x6pJsuh/8x0IRA3CBUB+pWEW3J/7N98axqt7SQSm+2fy0FLNXvXGg77xEDC7KHxJlHfLYyi7PDcw==", + "dev": true, + "requires": { + "@babel/generator": "7.17.7", + "@babel/parser": "^7.20.5", + "@babel/traverse": "7.17.3", + "@babel/types": "7.17.0", + "javascript-natural-sort": "0.7.1", + "lodash": "^4.17.21" + }, + "dependencies": { + "@babel/generator": { + "version": "7.17.7", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.17.7.tgz", + "integrity": "sha512-oLcVCTeIFadUoArDTwpluncplrYBmTCCZZgXCbgNGvOBBiSDDK3eWO4b/+eOTli5tKv1lg+a5/NAXg+nTcei1w==", + "dev": true, + "requires": { + "@babel/types": "^7.17.0", + "jsesc": "^2.5.1", + "source-map": "^0.5.0" + } + }, + "@babel/traverse": { + "version": "7.17.3", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.17.3.tgz", + "integrity": "sha512-5irClVky7TxRWIRtxlh2WPUUOLhcPN06AGgaQSB8AEwuyEBgJVuJ5imdHm5zxk8w0QS5T+tDfnDxAlhWjpb7cw==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.16.7", + "@babel/generator": "^7.17.3", + "@babel/helper-environment-visitor": "^7.16.7", + "@babel/helper-function-name": "^7.16.7", + "@babel/helper-hoist-variables": "^7.16.7", + "@babel/helper-split-export-declaration": "^7.16.7", + "@babel/parser": "^7.17.3", + "@babel/types": "^7.17.0", + "debug": "^4.1.0", + "globals": "^11.1.0" + } + }, + "@babel/types": { + "version": "7.17.0", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.17.0.tgz", + "integrity": "sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw==", + "dev": true, + "requires": { + "@babel/helper-validator-identifier": "^7.16.7", + "to-fast-properties": "^2.0.0" + } + }, + "source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==", + "dev": true + } + } + }, "@tsconfig/node10": { "version": "1.0.9", "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.9.tgz", @@ -26444,6 +26608,12 @@ "integrity": "sha512-Rn0nZe4rfDhzA63Al3ZGh0E+JTmM6ESZYXJGKuqKGZObsAB9fwXPD03GjtIEvJBDOhN94T5MzbwZSqzFHSQPzg==", "dev": true }, + "javascript-natural-sort": { + "version": "0.7.1", + "resolved": "https://registry.npmjs.org/javascript-natural-sort/-/javascript-natural-sort-0.7.1.tgz", + "integrity": "sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw==", + "dev": true + }, "jest-worker": { "version": "27.5.1", "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz", @@ -28713,6 +28883,12 @@ "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==", "dev": true }, + "prettier": { + "version": "2.8.8", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", + "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", + "dev": true + }, "pretty-bytes": { "version": "5.6.0", "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz", diff --git a/package.json b/package.json index 8d00158..1d1eaeb 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ "@angular/cli": "^14.2.11", "@angular/compiler-cli": "^14.3.0", "@angular/language-service": "^14.3.0", + "@trivago/prettier-plugin-sort-imports": "^4.1.1", "@types/jasmine": "^3.6.9", "@types/jasminewd2": "~2.0.3", "@typescript-eslint/eslint-plugin": "^5.36.2", @@ -57,6 +58,7 @@ "karma-jasmine": "~5.1.0", "karma-jasmine-html-reporter": "^2.0.0", "ng-packagr": "^14.2.2", + "prettier": "^2.8.8", "protractor": "~7.0.0", "ts-node": "~8.3.0", "typescript": "^4.3.5" @@ -68,4 +70,4 @@ "bump": true } } -} \ No newline at end of file +} diff --git a/projects/ngx-diff/src/lib/components/inline-diff/inline-diff.component.html b/projects/ngx-diff/src/lib/components/inline-diff/inline-diff.component.html new file mode 100644 index 0000000..be23b94 --- /dev/null +++ b/projects/ngx-diff/src/lib/components/inline-diff/inline-diff.component.html @@ -0,0 +1,23 @@ +
+ There are no changes to display. +
+
+
+
+
{{ lineDiff[1] }}
+ +
{{ lineDiff[2] }}
+
+
+
+ +
+
+
+
{{ lineDiff[3] }}
+
+
+
+
diff --git a/projects/ngx-diff/src/lib/components/inline-diff/inline-diff.component.scss b/projects/ngx-diff/src/lib/components/inline-diff/inline-diff.component.scss new file mode 100644 index 0000000..9eb3eda --- /dev/null +++ b/projects/ngx-diff/src/lib/components/inline-diff/inline-diff.component.scss @@ -0,0 +1,83 @@ +div.inline-diff { + display: flex; + flex-direction: row; + border: 1px solid #808080; + font-family: Consolas, Courier, monospace; +} + +div.inline-diff-content { + position: relative; + top: 0px; + left: 0px; + flex-grow: 1; + overflow-x: scroll; +} + +div.inline-diff-content-wrapper { + position: absolute; + top: 0px; + left: 0px; + display: flex; + flex-direction: column; + align-items: stretch; + width: 100%; +} + +div.inline-diff-old { + width: 50px; + text-align: center; + color: #484848; +} + +div.inline-diff-equal>div.inline-diff-old, +div.inline-diff-equal>div.inline-diff-new { + background-color: #dedede; +} + +div.inline-diff-insert>div.inline-diff-old, +div.inline-diff-insert>div.inline-diff-new { + background-color: #8bfb6f; +} + +div.inline-diff-delete>div.inline-diff-old, +div.inline-diff-delete>div.inline-diff-new { + background-color: #f56868; +} + +div.inline-diff-new { + width: 50px; + text-align: center; + color: #484848; + border-right: 1px solid #888888; +} + +div.inline-diff-text { + white-space: pre; + padding-left: 10px; +} + +.inline-diff-delete { + background-color: #ff8c8c; +} + +.inline-diff-insert { + background-color: #9dff97; +} + +.inline-diff-delete>div { + display: inline-block; +} + +.inline-diff-insert>div { + display: inline-block; +} + +.inline-diff-equal>div { + display: inline-block; +} + +.dmp-margin-bottom-spacer { + height: 20px; + background-color: #dedede; + border-right: 1px solid #888888; +} diff --git a/projects/ngx-diff/src/inline-diff/inline-diff.component.spec.ts b/projects/ngx-diff/src/lib/components/inline-diff/inline-diff.component.spec.ts similarity index 69% rename from projects/ngx-diff/src/inline-diff/inline-diff.component.spec.ts rename to projects/ngx-diff/src/lib/components/inline-diff/inline-diff.component.spec.ts index fb0e8cb..af1fb05 100644 --- a/projects/ngx-diff/src/inline-diff/inline-diff.component.spec.ts +++ b/projects/ngx-diff/src/lib/components/inline-diff/inline-diff.component.spec.ts @@ -1,9 +1,9 @@ -import { NO_ERRORS_SCHEMA } from '@angular/core'; -import { TestBed, ComponentFixture, waitForAsync } from '@angular/core/testing'; import { Diff, DiffOp } from 'diff-match-patch-ts'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DiffMatchPatchService } from '../../services/diff-match-patch/diff-match-patch.service'; import { InlineDiffComponent } from './inline-diff.component'; -import { DiffMatchPatchService } from '../diff-match-patch.service'; class DiffMatchPatchServiceMock { // eslint-disable-next-line @typescript-eslint/naming-convention, no-underscore-dangle, id-blacklist, id-match @@ -12,7 +12,7 @@ class DiffMatchPatchServiceMock { [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'] + [DiffOp.Equal, 'Diff Four A\r\nDiff Four B\r\n'], ]; } } @@ -21,23 +21,19 @@ describe('InlineDiffComponent', () => { let component: InlineDiffComponent; let fixture: ComponentFixture; - beforeEach(waitForAsync(() => { - TestBed.configureTestingModule({ + beforeEach(async () => { + await TestBed.configureTestingModule({ declarations: [InlineDiffComponent], providers: [{ provide: DiffMatchPatchService, useClass: DiffMatchPatchServiceMock }], - schemas: [NO_ERRORS_SCHEMA] }).compileComponents(); - })); - beforeEach(() => { fixture = TestBed.createComponent(InlineDiffComponent); component = fixture.componentInstance; fixture.detectChanges(); }); - it('should initialise component', () => { - expect(fixture).toBeDefined(); - expect(component).toBeDefined(); + it('should create', () => { + expect(component).toBeTruthy(); }); it('should have 8 line diffs', () => { @@ -45,15 +41,15 @@ describe('InlineDiffComponent', () => { }); it('should have correct line numbers', () => { - const leftLineNumbers = component.calculatedDiff.map(x => x[1]); + const leftLineNumbers = component.calculatedDiff.map((x) => x[1]); expect(leftLineNumbers).toEqual(['1', '2', '-', '-', '3', '4', '5', '6']); - const rightLineNumbers = component.calculatedDiff.map(x => x[2]); + const rightLineNumbers = component.calculatedDiff.map((x) => x[2]); expect(rightLineNumbers).toEqual(['1', '2', '3', '4', '-', '-', '5', '6']); }); it('should have correct class annotations', () => { - const classes = component.calculatedDiff.map(x => x[0]); + const classes = component.calculatedDiff.map((x) => x[0]); expect(classes).toEqual([ 'inline-diff-equal', 'inline-diff-equal', @@ -62,12 +58,12 @@ describe('InlineDiffComponent', () => { 'inline-diff-delete', 'inline-diff-delete', 'inline-diff-equal', - 'inline-diff-equal' + 'inline-diff-equal', ]); }); it('should have correct line contents', () => { - const contents = component.calculatedDiff.map(x => x[3]); + const contents = component.calculatedDiff.map((x) => x[3]); expect(contents).toEqual([ 'Diff One A', 'Diff One B', @@ -76,7 +72,7 @@ describe('InlineDiffComponent', () => { 'Diff Three A', 'Diff Three B', 'Diff Four A', - 'Diff Four B' + 'Diff Four B', ]); }); }); diff --git a/projects/ngx-diff/src/inline-diff/inline-diff.component.ts b/projects/ngx-diff/src/lib/components/inline-diff/inline-diff.component.ts similarity index 66% rename from projects/ngx-diff/src/inline-diff/inline-diff.component.ts rename to projects/ngx-diff/src/lib/components/inline-diff/inline-diff.component.ts index c61c0ff..80a5703 100644 --- a/projects/ngx-diff/src/inline-diff/inline-diff.component.ts +++ b/projects/ngx-diff/src/lib/components/inline-diff/inline-diff.component.ts @@ -1,110 +1,14 @@ -import { Component, Input, OnChanges, OnInit } from '@angular/core'; import { Diff, DiffOp } from 'diff-match-patch-ts'; -import { DiffMatchPatchService } from '../diff-match-patch.service'; -import { IDiffCalculation } from './diff-calculation.interface'; -// Styles and HTML template intentionally inlined here so that they can be easily picked up -// by the client application. +import { Component, Input, OnChanges, OnInit } from '@angular/core'; + +import { IDiffCalculation } from '../../../inline-diff/diff-calculation.interface'; +import { DiffMatchPatchService } from '../../services/diff-match-patch/diff-match-patch.service'; + @Component({ selector: 'inline-diff', - styles: [ - ` - div.inline-diff { - display: flex; - flex-direction: row; - border: 1px solid #808080; - font-family: Consolas, Courier, monospace; - } - div.inline-diff-content { - position: relative; - top: 0px; - left: 0px; - flex-grow: 1; - overflow-x: scroll; - } - div.inline-diff-content-wrapper { - position: absolute; - top: 0px; - left: 0px; - display: flex; - flex-direction: column; - align-items: stretch; - width: 100%; - } - div.inline-diff-old { - width: 50px; - text-align: center; - color: #484848; - } - div.inline-diff-equal > div.inline-diff-old, - div.inline-diff-equal > div.inline-diff-new { - background-color: #dedede; - } - div.inline-diff-insert > div.inline-diff-old, - div.inline-diff-insert > div.inline-diff-new { - background-color: #8bfb6f; - } - div.inline-diff-delete > div.inline-diff-old, - div.inline-diff-delete > div.inline-diff-new { - background-color: #f56868; - } - div.inline-diff-new { - width: 50px; - text-align: center; - color: #484848; - border-right: 1px solid #888888; - } - div.inline-diff-text { - white-space: pre; - padding-left: 10px; - } - .inline-diff-delete { - background-color: #ff8c8c; - } - .inline-diff-insert { - background-color: #9dff97; - } - .inline-diff-delete > div { - display: inline-block; - } - .inline-diff-insert > div { - display: inline-block; - } - .inline-diff-equal > div { - display: inline-block; - } - .dmp-margin-bottom-spacer { - height: 20px; - background-color: #dedede; - border-right: 1px solid #888888; - } - ` - ], - template: ` -
- There are no changes to display. -
-
-
-
-
{{ lineDiff[1] }}
- -
{{ lineDiff[2] }}
-
-
-
- -
-
-
-
{{ lineDiff[3] }}
-
-
-
-
- ` + templateUrl: './inline-diff.component.html', + styleUrls: ['./inline-diff.component.scss'], }) export class InlineDiffComponent implements OnInit, OnChanges { @Input() @@ -119,7 +23,7 @@ export class InlineDiffComponent implements OnInit, OnChanges { public calculatedDiff: Array<[string, string, string, string]>; public isContentEqual: boolean; - public constructor(private dmp: DiffMatchPatchService) { + public constructor(private readonly dmp: DiffMatchPatchService) { this.calculatedDiff = []; this.isContentEqual = false; } @@ -146,7 +50,7 @@ export class InlineDiffComponent implements OnInit, OnChanges { const diffCalculation: IDiffCalculation = { lineInNewText: 1, lineInOldText: 1, - lines: [] + lines: [], }; this.isContentEqual = diffs.length === 1 && diffs[0][0] === DiffOp.Equal; @@ -204,7 +108,7 @@ export class InlineDiffComponent implements OnInit, OnChanges { diffLines: string[], diffCalculation: IDiffCalculation, isFirstDiff: boolean, - isLastDiff: boolean + isLastDiff: boolean, ): void { if (this.lineContextSize && diffLines.length > this.lineContextSize) { if (isFirstDiff) { @@ -229,7 +133,7 @@ export class InlineDiffComponent implements OnInit, OnChanges { // Take the last 'lineContextSize' lines from this diff to provide context for the next diff this.outputEqualDiffLines( diffLines.slice(diffLines.length - this.lineContextSize), - diffCalculation + diffCalculation, ); // This if branch has already output the diff lines so we return early to avoid outputting the lines // at the end of the method. @@ -245,7 +149,7 @@ export class InlineDiffComponent implements OnInit, OnChanges { 'inline-diff-equal', `${diffCalculation.lineInOldText}`, `${diffCalculation.lineInNewText}`, - line + line, ]); diffCalculation.lineInOldText++; diffCalculation.lineInNewText++; @@ -258,7 +162,7 @@ export class InlineDiffComponent implements OnInit, OnChanges { 'inline-diff-delete', `${diffCalculation.lineInOldText}`, '-', - line + line, ]); diffCalculation.lineInOldText++; } @@ -270,7 +174,7 @@ export class InlineDiffComponent implements OnInit, OnChanges { 'inline-diff-insert', '-', `${diffCalculation.lineInNewText}`, - line + line, ]); diffCalculation.lineInNewText++; } diff --git a/projects/ngx-diff/src/lib/services/diff-match-patch/diff-match-patch.service.spec.ts b/projects/ngx-diff/src/lib/services/diff-match-patch/diff-match-patch.service.spec.ts new file mode 100644 index 0000000..54446ff --- /dev/null +++ b/projects/ngx-diff/src/lib/services/diff-match-patch/diff-match-patch.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { DiffMatchPatchService } from './diff-match-patch.service'; + +describe('DiffMatchPatchService', () => { + let service: DiffMatchPatchService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(DiffMatchPatchService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/projects/ngx-diff/src/diff-match-patch.service.ts b/projects/ngx-diff/src/lib/services/diff-match-patch/diff-match-patch.service.ts similarity index 80% rename from projects/ngx-diff/src/diff-match-patch.service.ts rename to projects/ngx-diff/src/lib/services/diff-match-patch/diff-match-patch.service.ts index e557c5b..54090d1 100644 --- a/projects/ngx-diff/src/diff-match-patch.service.ts +++ b/projects/ngx-diff/src/lib/services/diff-match-patch/diff-match-patch.service.ts @@ -1,9 +1,12 @@ -import { Injectable } from '@angular/core'; import { Diff, DiffMatchPatch } from 'diff-match-patch-ts'; -@Injectable() +import { Injectable } from '@angular/core'; + +@Injectable({ + providedIn: 'root', +}) export class DiffMatchPatchService { - private dmp: DiffMatchPatch; + private readonly dmp: DiffMatchPatch; public constructor() { this.dmp = new DiffMatchPatch(); diff --git a/projects/ngx-diff/src/ngx-diff.module.ts b/projects/ngx-diff/src/ngx-diff.module.ts index d9f4e36..1ab839e 100644 --- a/projects/ngx-diff/src/ngx-diff.module.ts +++ b/projects/ngx-diff/src/ngx-diff.module.ts @@ -1,12 +1,11 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { DiffMatchPatchService } from './diff-match-patch.service'; -import { InlineDiffComponent } from './inline-diff/inline-diff.component'; + +import { InlineDiffComponent } from './lib/components/inline-diff/inline-diff.component'; @NgModule({ declarations: [InlineDiffComponent], exports: [InlineDiffComponent], imports: [CommonModule], - providers: [DiffMatchPatchService] }) export class NgxDiffModule {} diff --git a/projects/ngx-diff/src/public-api.ts b/projects/ngx-diff/src/public-api.ts index 49a2a6b..c42204f 100644 --- a/projects/ngx-diff/src/public-api.ts +++ b/projects/ngx-diff/src/public-api.ts @@ -2,6 +2,6 @@ * Public API Surface of ngx-diff */ -export { DiffMatchPatchService } from './diff-match-patch.service'; +export { DiffMatchPatchService } from './lib/services/diff-match-patch/diff-match-patch.service'; +export { InlineDiffComponent } from './lib/components/inline-diff/inline-diff.component'; export { NgxDiffModule } from './ngx-diff.module'; -export { InlineDiffComponent } from './inline-diff/inline-diff.component';