@matrixreq/htmldiff 1.0.0

package/package.json

@@ -0,0 +1,60 @@
+{
+    "name": "@matrixreq/htmldiff",
+    "description": "Diff and markup HTML with <ins> and <del> tags",
+    "companyname": "Matrix Requirements",
+    "version": "1.0.0",
+    "keywords": [
+        "diff",
+        "html",
+        "htmldiff",
+        "ins",
+        "del"
+    ],
+    "homepage": "https://github.com/MatrixRequirements/htmldiff.js",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/MatrixRequirements/htmldiff.js"
+    },
+    "readme": "README.md",
+    "bugs": {
+        "url": "https://github.com/MatrixRequirements/htmldiff.js/issues"
+    },
+    "license": "MIT",
+    "main": "js/htmldiff.js",
+    "bin": {
+        "htmldiff": "./htmldiff-cli.js"
+    },
+    "files": [
+        "js/htmldiff.js",
+        "js/htmldiff.d.ts",
+        "sample/*",
+        "test/*",
+        "htmldiff-cli.js"
+    ],
+    "types": "js/htmldiff.d.ts",
+    "dependencies": {},
+    "devDependencies": {
+        "@types/node": "18.7.11",
+        "@typescript-eslint/eslint-plugin": "5.34.0",
+        "@typescript-eslint/parser": "5.34.0",
+        "chai": "*",
+        "eslint": "8.22.0",
+        "eslint-plugin-jsdoc": "39.3.6",
+        "pkg": "5.8.0",
+        "typescript": "4.7.4",
+        "mocha": "*"
+    },
+    "scripts": {
+        "test": "mocha -R min",
+        "testsample": "node htmldiff-cli.js sample/before.html sample/after.html - -c myDiffClass -p myPrefix",
+        "lint": "eslint -c eslintrc.json --parser-options=project:./tsconfig.json --ext .ts ./",
+        "premake": "npm run lint",
+        "make": "tsc -p tsconfig.json && node -e \"require('fs').unlinkSync('./htmldiff-cli.d.ts')\"",
+        "pack-macos-aarch64": "pkg -t node18-macos-arm64       -C GZip --output ./bin/macos-aarch64/htmldiff-cli htmldiff-cli.js -c ./pkg.json",
+        "pack-macos-x64": "    pkg -t node18-macos-x64         -C GZip --output ./bin/macos-x64/htmldiff-cli     htmldiff-cli.js -c ./pkg.json",
+        "pack-win32-x64": "    pkg -t node18-win32-x64         -C GZip --output ./bin/win32-x64/htmldiff-cli     htmldiff-cli.js -c ./pkg.json",
+        "pack-linux-x64": "    pkg -t node18-linuxstatic-x64   -C GZip --output ./bin/linux-x64/htmldiff-cli     htmldiff-cli.js -c ./pkg.json",
+        "pack-linux-aarch64": "pkg -t node18-linuxstatic-arm64 -C GZip --output ./bin/linux-aarch64/htmldiff-cli htmldiff-cli.js -c ./pkg.json",
+        "pack-all": "npm run pack-macos-aarch64 && npm run pack-macos-x64 && npm run pack-win32-x64 && npm run pack-linux-x64 && npm run pack-linux-aarch64"
+    }
+}

package/sample/after.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
+<head>
+	<meta charset="utf-8"/>
+</head>
+<body>
+
+<p>That is some more text.</p>
+
+<figure>
+<img src="after.png" alt="This is another image" />
+<figcaption>This is another image</figcaption>
+</figure>
+
+An anchor to <a href="https://www.idesis.com">idesis GmbH</a>.
+
+</body>
+</html>

package/sample/before.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
+<head>
+	<meta charset="utf-8"/>
+</head>
+<body>
+
+<p>This is some text.</p>
+
+<figure>
+<img src="before.png" alt="This is an image" />
+<figcaption>This is an image</figcaption>
+</figure>
+
+An anchor to <a href="http://www.idesis.com">idesis GmbH</a>.
+
+</body>
+</html>

package/test/calculate_operations.spec.js

@@ -0,0 +1,278 @@
+// Calculates the differences into a list of edit operations.
+describe('calculateOperations', function(){
+    var cut, res, tokenize;
+
+    beforeEach(function(){
+        cut = require('../js/htmldiff').calculateOperations;
+        tokenize = require('../js/htmldiff').htmlToTokens;
+    });
+
+    it('should be a function', function(){
+        expect(cut).is.a('function');
+    });
+
+    describe('Actions', function(){
+        describe('In the middle', function(){
+            describe('Replace', function(){
+                beforeEach(function(){
+                    var before = tokenize('working on it');
+                    var after = tokenize('working in it');
+                    res = cut(before, after);
+                });
+
+                it('should result in 3 operations', function(){
+                    expect(res.length).to.equal(3);
+                });
+
+                it('should replace "on"', function(){
+                    expect(res[1]).eql({
+                        action          : 'replace',
+                        startInBefore   : 2,
+                        endInBefore     : 2,
+                        startInAfter    : 2,
+                        endInAfter      : 2
+                    });
+                });
+            });
+
+            describe('Insert', function(){
+                beforeEach(function(){
+                    var before = tokenize('working it');
+                    var after = tokenize('working in it');
+                    res = cut(before, after);
+                });
+
+                it('should result in 3 operations', function(){
+                    expect(res.length).to.equal(3);
+                });
+
+                it('should show an insert for "on"', function(){
+                    expect(res[1]).eql({
+                        action          : 'insert',
+                        startInBefore   : 2,
+                        endInBefore     : null,
+                        startInAfter    : 2,
+                        endInAfter      : 3
+                    });
+                });
+
+                describe('More than one word', function(){
+                    beforeEach(function(){
+                        var before = tokenize('working it');
+                        var after =  tokenize('working all up on it');
+                        res = cut(before, after);
+                    });
+
+                    it('should still have 3 operations', function(){
+                        expect(res.length).to.equal(3);
+                    });
+
+                    it('should show a big insert', function(){
+                        expect(res[1]).eql({
+                            action          : 'insert',
+                            startInBefore   : 2,
+                            endInBefore     : null,
+                            startInAfter    : 2,
+                            endInAfter      : 7
+                        });
+                    });
+                });
+            });
+
+            describe('Delete', function(){
+                beforeEach(function(){
+                    var before = tokenize('this is a lot of text');
+                    var after = tokenize('this is text');
+                    res = cut(before, after);
+                });
+
+                it('should return 3 operations', function(){
+                    expect(res.length).to.equal(3);
+                });
+
+                it('should show the delete in the middle', function(){
+                    expect(res[1]).eql({
+                        action          : 'delete',
+                        startInBefore   : 4,
+                        endInBefore     : 9,
+                        startInAfter    : 4,
+                        endInAfter      : null
+                    });
+                });
+            });
+
+            describe('Equal', function(){
+                beforeEach(function(){
+                    var before = tokenize('this is what it sounds like');
+                    var after = tokenize('this is what it sounds like');
+                    res = cut(before, after);
+                });
+
+                it('should return a single op', function(){
+                    expect(res.length).to.equal(1);
+                    expect(res[0]).eql({
+                        action          : 'equal',
+                        startInBefore   : 0,
+                        endInBefore     : 10,
+                        startInAfter    : 0,
+                        endInAfter      : 10
+                    });
+                });
+            });
+        });
+
+        describe('At the beginning', function(){
+            describe('Replace', function(){
+                beforeEach(function(){
+                    var before = tokenize('I dont like veggies');
+                    var after = tokenize('Joe loves veggies');
+                    res = cut(before, after);
+                });
+
+                it('should return 2 operations', function(){
+                    expect(res.length).to.equal(2);
+                });
+
+                it('should have a replace at the beginning', function(){
+                    expect(res[0]).eql({
+                        action          : 'replace',
+                        startInBefore   : 0,
+                        endInBefore     : 4,
+                        startInAfter    : 0,
+                        endInAfter      : 2
+                    });
+                });
+            });
+
+            describe('Insert', function(){
+                beforeEach(function(){
+                    var before = tokenize('dog');
+                    var after = tokenize('the shaggy dog');
+                    res = cut(before, after);
+                });
+
+                it('should return 2 operations', function(){
+                    expect(res.length).to.equal(2);
+                });
+
+                it('should have an insert at the beginning', function(){
+                    expect(res[0]).eql({
+                        action          : 'insert',
+                        startInBefore   : 0,
+                        endInBefore     : null,
+                        startInAfter    : 0,
+                        endInAfter      : 3
+                    });
+                });
+            });
+
+            describe('Delete', function(){
+                beforeEach(function(){
+                    var before = tokenize('awesome dog barks');
+                    var after = tokenize('dog barks');
+                    res = cut(before, after);
+                });
+
+                it('should return 2 operations', function(){
+                    expect(res.length).to.equal(2);
+                });
+
+                it('should have a delete at the beginning', function(){
+                    expect(res[0]).eql({
+                        action          : 'delete',
+                        startInBefore   : 0,
+                        endInBefore     : 1,
+                        startInAfter    : 0,
+                        endInAfter      : null
+                    });
+                });
+            });
+        });
+
+        describe('At the end', function(){
+            describe('Replace', function(){
+                beforeEach(function(){
+                    var before = tokenize('the dog bit the cat');
+                    var after = tokenize('the dog bit a bird');
+                    res = cut(before, after);
+                });
+
+                it('should return 2 operations', function(){
+                    expect(res.length).to.equal(2);
+                });
+
+                it('should have a replace at the end', function(){
+                    expect(res[1]).eql({
+                        action          : 'replace',
+                        startInBefore   : 6,
+                        endInBefore     : 8,
+                        startInAfter    : 6,
+                        endInAfter      : 8
+                    });
+                });
+            });
+
+            describe('Insert', function(){
+                beforeEach(function(){
+                    var before = tokenize('this is a dog');
+                    var after = tokenize('this is a dog that barks');
+                    res = cut(before, after);
+                });
+
+                it('should return 2 operations', function(){
+                    expect(res.length).to.equal(2);
+                });
+
+                it('should have an Insert at the end', function(){
+                    expect(res[1]).eql({
+                        action          : 'insert',
+                        startInBefore   : 7,
+                        endInBefore     : null,
+                        startInAfter    : 7,
+                        endInAfter      : 10
+                    });
+                });
+            });
+
+            describe('Delete', function(){
+                beforeEach(function(){
+                    var before = tokenize('this is a dog that barks');
+                    var after = tokenize('this is a dog');
+                    res = cut(before, after);
+                });
+
+                it('should have 2 operations', function(){
+                    expect(res.length).to.equal(2);
+                });
+
+                it('should have a delete at the end', function(){
+                    expect(res[1]).eql({
+                        action          : 'delete',
+                        startInBefore   : 7,
+                        endInBefore     : 10,
+                        startInAfter    : 7,
+                        endInAfter      : null
+                    });
+                });
+            });
+        });
+    });
+
+    describe('Action Combination', function(){
+        describe('dont absorb non-single-whitespace tokens', function(){
+            beforeEach(function(){
+                var before = tokenize('I  am awesome');
+                var after = tokenize('You  are great');
+                res = cut(before, after);
+            });
+
+            it('should return 3 actions', function(){
+                expect(res.length).to.equal(1);
+            });
+
+            it('should have a replace first', function(){
+                expect(res[0].action).to.equal('replace');
+            });
+        });
+    });
+});

package/test/config.js

@@ -0,0 +1,2 @@
+var chai = require('chai');
+global.expect = chai.expect;

package/test/diff.spec.js

@@ -0,0 +1,210 @@
+describe('Diff', function(){
+    var cut, res, html_to_tokens, calculate_operations;
+  
+    beforeEach(function(){
+      cut = require('../js/htmldiff');
+      html_to_tokens = cut.htmlToTokens;
+      calculate_operations = cut.calculateOperations;
+    });
+  
+    describe('When both inputs are the same', function(){
+      beforeEach(function(){
+        res = cut('input text', 'input text');
+      });
+  
+      it('should return the text', function(){
+        expect(res).equal('input text');
+      });
+    }); // describe('When both inputs are the same')
+  
+    describe('When a letter is added', function(){
+      beforeEach(function(){
+        res = cut('input', 'input 2');
+      });
+  
+      it('should mark the new letter', function(){
+        expect(res).to.equal('input<ins data-operation-index="1"> 2</ins>');
+      });
+    }); // describe('When a letter is added')
+  
+    describe('Whitespace differences', function(){
+      it('should collapse adjacent whitespace', function(){
+        expect(cut('Much \n\t    spaces', 'Much spaces')).to.equal('Much spaces');
+      });
+  
+      it('should consider non-breaking spaces as equal', function(){
+        expect(cut('Hello&nbsp;world', 'Hello&#160;world')).to.equal('Hello&#160;world');
+      });
+  
+      it('should consider non-breaking spaces and non-adjacent regular spaces as equal', function(){
+        expect(cut('Hello&nbsp;world', 'Hello world')).to.equal('Hello world');
+      });
+    }); // describe('Whitespace differences')
+  
+    describe('When a class name is specified', function(){
+      it('should include the class in the wrapper tags', function(){
+        expect(cut('input', 'input 2', 'diff-result')).to.equal(
+          'input<ins data-operation-index="1" class="diff-result"> 2</ins>');
+      });
+    }); // describe('When a class name is specified')
+  
+    describe('Image Differences', function(){
+      it('show two images as different if their src attributes are different', function() {
+        var before = html_to_tokens('<img src="a.jpg">');
+        var after = html_to_tokens('<img src="b.jpg">');
+        var ops = calculate_operations(before, after);
+        expect(ops.length).to.equal(1);
+        expect(ops[0]).to.eql({
+          action: 'replace',
+          startInBefore: 0,
+          endInBefore: 0,
+          startInAfter: 0,
+          endInAfter: 0
+        });
+      });
+  
+      it('should show two images are the same if their src attributes are the same', function() {
+        var before = html_to_tokens('<img src="a.jpg">');
+        var after = html_to_tokens('<img src="a.jpg" alt="hey!">');
+        var ops = calculate_operations(before, after);
+        expect(ops.length).to.equal(1);
+        expect(ops[0]).to.eql({
+          action: 'equal',
+          startInBefore: 0,
+          endInBefore: 0,
+          startInAfter: 0,
+          endInAfter: 0
+        });
+      });
+    }); // describe('Image Differences')
+    
+    describe('Widget Differences', function(){
+      it('show two widgets as different if their data attributes are different', function() {
+        var before = html_to_tokens('<object data="a.jpg"></object>');
+        var after = html_to_tokens('<object data="b.jpg"></object>');
+        var ops = calculate_operations(before, after);
+        expect(ops.length).to.equal(1);
+        expect(ops[0]).to.eql({
+          action: 'replace',
+          startInBefore: 0,
+          endInBefore: 0,
+          startInAfter: 0,
+          endInAfter: 0
+        });
+      });
+  
+      it('should show two widgets are the same if their data attributes are the same', function() {
+        var before = html_to_tokens('<object data="a.jpg"><param>yo!</param></object>');
+        var after = html_to_tokens('<object data="a.jpg"></object>');
+        var ops = calculate_operations(before, after);
+        expect(ops.length).to.equal(1);
+        expect(ops[0]).to.eql({
+          action: 'equal',
+          startInBefore: 0,
+          endInBefore: 0,
+          startInAfter: 0,
+          endInAfter: 0
+        });
+      });
+    }); // describe('Widget Differences')
+  
+      describe('Math Differences', function(){
+      it('should show two math elements as different if their contents are different', function() {
+        var before = html_to_tokens('<math data-uuid="55784cd906504787a8e459e80e3bb554"><msqrt>' +
+          '<msup><mi>b</mi><mn>2</mn></msup></msqrt></math>');
+        var after = html_to_tokens('<math data-uuid="55784cd906504787a8e459e80e3bb554"><msqrt>' +
+          '<msup><mn>b</mn><mn>5</mn></msup></msqrt></math>');
+        var ops = calculate_operations(before, after);
+        expect(ops.length).to.equal(1);
+        expect(ops[0]).to.eql({
+          action: 'replace',
+          startInBefore: 0,
+          endInBefore: 0,
+          startInAfter: 0,
+          endInAfter: 0
+        });
+      });
+  
+      it('should show two math elements as the same if their contents are the same', function() {
+        var before = html_to_tokens('<math data-uuid="15568cd906504876548459e80e356878"><msqrt>' +
+          '<msup><mi>b</mi><mn>2</mn></msup></msqrt></math>');
+        var after = html_to_tokens('<math data-uuid="55784cd906504787a8e459e80e3bb554"><msqrt>' +
+          '<msup><mi>b</mi><mn>2</mn></msup></msqrt></math>');
+        var ops = calculate_operations(before, after);
+        expect(ops.length).to.equal(1);
+        expect(ops[0]).to.eql({
+          action: 'equal',
+          startInBefore: 0,
+          endInBefore: 0,
+          startInAfter: 0,
+          endInAfter: 0
+        });
+      });
+    }); // describe('Math Differences')
+  
+    describe('Video Differences', function(){
+      it('show two widgets as different if their data attributes are different', function() {
+        var before = html_to_tokens('<video data-uuid="0787866ab5494d88b4b1ee423453224b">' +
+          '<source src="inkling-video:///big_buck_bunny/webm_high" type="video/webm" /></video>');
+        var after = html_to_tokens('<video data-uuid="0787866ab5494d88b4b1ee423453224b">' +
+          '<source src="inkling-video:///big_buck_rabbit/mp4" type="video/webm" /></video>');
+        var ops = calculate_operations(before, after);
+        expect(ops.length).to.equal(1);
+        expect(ops[0]).to.eql({
+          action: 'replace',
+          startInBefore: 0,
+          endInBefore: 0,
+          startInAfter: 0,
+          endInAfter: 0
+        });
+  
+      });
+  
+      it('should show two widgets are the same if their data attributes are the same', function() {
+        var before = html_to_tokens('<video data-uuid="65656565655487787484545454548494">' +
+          '<source src="inkling-video:///big_buck_bunny/webm_high" type="video/webm" /></video>');
+        var after = html_to_tokens('<video data-uuid="0787866ab5494d88b4b1ee423453224b">' +
+          '<source src="inkling-video:///big_buck_bunny/webm_high" type="video/webm" /></video>');
+        var ops = calculate_operations(before, after);
+        expect(ops.length).to.equal(1);
+        expect(ops[0]).to.eql({
+          action: 'equal',
+          startInBefore: 0,
+          endInBefore: 0,
+          startInAfter: 0,
+          endInAfter: 0
+        });
+      });
+    }); // describe('Video Differences')
+  
+    describe('iframe Differences', function(){
+      it('show two widgets as different if their data attributes are different', function() {
+        var before = html_to_tokens('<iframe src="a.jpg"></iframe>');
+        var after = html_to_tokens('<iframe src="b.jpg"></iframe>');
+        var ops = calculate_operations(before, after);
+        expect(ops.length).to.equal(1);
+        expect(ops[0]).to.eql({
+          action: 'replace',
+          startInBefore: 0,
+          endInBefore: 0,
+          startInAfter: 0,
+          endInAfter: 0
+        });
+      });
+  
+      it('should show two widgets are the same if their data attributes are the same', function() {
+        var before = html_to_tokens('<iframe src="a.jpg"></iframe>');
+        var after = html_to_tokens('<iframe src="a.jpg" class="foo"></iframe>');
+        var ops = calculate_operations(before, after);
+        expect(ops.length).to.equal(1);
+        expect(ops[0]).to.eql({
+          action: 'equal',
+          startInBefore: 0,
+          endInBefore: 0,
+          startInAfter: 0,
+          endInAfter: 0
+        });
+      });
+    }); // describe('iframe Differences')
+    
+  }); // describe('Diff')

package/test/edge_cases.spec.js

@@ -0,0 +1,31 @@
+const diff = require('../js/htmldiff');
+
+describe('Edge cases', () => {
+    it('removes deleted closing-opening tag pair', () => {
+        const before = `
+            <div>
+                <p><img src="img1.jpg" /></p>
+                <p><img src="img2.jpg" /></p>
+                <p>something</p>
+            </div>
+        `;
+        const after = `
+            <div>
+                <p>
+                    <img src="img1.jpg" />
+                    <img src="img2.jpg" />
+                </p>
+                <p>something</p>
+            </div>
+        `;
+        const res = `
+            <div>
+                <p><img src="img1.jpg" /><del>
+                </del><img src="img2.jpg" /></p>
+                <p>something</p>
+            </div>
+        `;
+
+        expect(diff(before, after)).to.eql(res);
+    });
+});