Start test diff page

web/package-lock.json

@@ -9,7 +9,8 @@
 			"version": "0.0.1",
 			"dependencies": {
 				"@sveltejs/adapter-node": "^1.2.3",
-				"bootstrap-dark-5": "^1.1.3"
+				"bootstrap-dark-5": "^1.1.3",
+				"diff2html": "^3.4.35"
 			},
 			"devDependencies": {
 				"@sveltejs/adapter-auto": "^2.0.0",
@@ -970,6 +971,11 @@
 				"url": "https://opencollective.com/typescript-eslint"
 			}
 		},
+		"node_modules/abbrev": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
+			"integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q=="
+		},
 		"node_modules/acorn": {
 			"version": "8.8.2",
 			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
@@ -1314,6 +1320,29 @@
 			"resolved": "https://registry.npmjs.org/devalue/-/devalue-4.3.0.tgz",
 			"integrity": "sha512-n94yQo4LI3w7erwf84mhRUkUJfhLoCZiLyoOZ/QFsDbcWNZePrLwbQpvZBUG2TNxwV3VjCKPxkiiQA6pe3TrTA=="
 		},
+		"node_modules/diff": {
+			"version": "5.1.0",
+			"resolved": "https://registry.npmjs.org/diff/-/diff-5.1.0.tgz",
+			"integrity": "sha512-D+mk+qE8VC/PAUrlAU34N+VfXev0ghe5ywmpqrawphmVZc1bEfn56uo9qpyGp1p4xpzOHkSW4ztBd6L7Xx4ACw==",
+			"engines": {
+				"node": ">=0.3.1"
+			}
+		},
+		"node_modules/diff2html": {
+			"version": "3.4.35",
+			"resolved": "https://registry.npmjs.org/diff2html/-/diff2html-3.4.35.tgz",
+			"integrity": "sha512-+pKs1BrA7l8DAwY33awHyznE3iuTIo58xmINmDBUwGsnou2KvBoSr6dAa6AvQAM7SH+nGtuOKNXmxumgbGp/Pw==",
+			"dependencies": {
+				"diff": "5.1.0",
+				"hogan.js": "3.0.2"
+			},
+			"engines": {
+				"node": ">=12"
+			},
+			"optionalDependencies": {
+				"highlight.js": "11.6.0"
+			}
+		},
 		"node_modules/dir-glob": {
 			"version": "3.0.1",
 			"resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -1854,6 +1883,36 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/highlight.js": {
+			"version": "11.6.0",
+			"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.6.0.tgz",
+			"integrity": "sha512-ig1eqDzJaB0pqEvlPVIpSSyMaO92bH1N2rJpLMN/nX396wTpDA4Eq0uK+7I/2XG17pFaaKE0kjV/XPeGt7Evjw==",
+			"optional": true,
+			"engines": {
+				"node": ">=12.0.0"
+			}
+		},
+		"node_modules/hogan.js": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/hogan.js/-/hogan.js-3.0.2.tgz",
+			"integrity": "sha512-RqGs4wavGYJWE07t35JQccByczmNUXQT0E12ZYV1VKYu5UiAU9lsos/yBAcf840+zrUQQxgVduCR5/B8nNtibg==",
+			"dependencies": {
+				"mkdirp": "0.3.0",
+				"nopt": "1.0.10"
+			},
+			"bin": {
+				"hulk": "bin/hulk"
+			}
+		},
+		"node_modules/hogan.js/node_modules/mkdirp": {
+			"version": "0.3.0",
+			"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.3.0.tgz",
+			"integrity": "sha512-OHsdUcVAQ6pOtg5JYWpCBo9W/GySVuwvP9hueRMW7UqshC0tbfzLv8wjySTPm3tfUZ/21CE9E1pJagOA91Pxew==",
+			"deprecated": "Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)",
+			"engines": {
+				"node": "*"
+			}
+		},
 		"node_modules/ignore": {
 			"version": "5.2.4",
 			"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
@@ -2231,6 +2290,20 @@
 			"integrity": "sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==",
 			"dev": true
 		},
+		"node_modules/nopt": {
+			"version": "1.0.10",
+			"resolved": "https://registry.npmjs.org/nopt/-/nopt-1.0.10.tgz",
+			"integrity": "sha512-NWmpvLSqUrgrAC9HCuxEvb+PSloHpqVu+FqcO4eeF2h5qYRhA7ev6KvelyQAKtegUbC6RypJnlEOhd8vloNKYg==",
+			"dependencies": {
+				"abbrev": "1"
+			},
+			"bin": {
+				"nopt": "bin/nopt.js"
+			},
+			"engines": {
+				"node": "*"
+			}
+		},
 		"node_modules/normalize-path": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",

web/package.json

@@ -31,6 +31,7 @@
 	"type": "module",
 	"dependencies": {
 		"@sveltejs/adapter-node": "^1.2.3",
-		"bootstrap-dark-5": "^1.1.3"
+		"bootstrap-dark-5": "^1.1.3",
+		"diff2html": "^3.4.35"
 	}
 }

web/src/routes/diff-test/+page.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Diff2HtmlUI } from 'diff2html/lib/ui/js/diff2html-ui-slim';
+	import type { Diff2HtmlUIConfig } from 'diff2html/lib/ui/js/diff2html-ui';
+	import { onMount } from 'svelte';
+
+	const diffString = `diff --git a/sample.js b/sample.js
+        index 0000001..0ddf2ba
+        --- a/sample.js
+        +++ b/sample.js
+        @@ -1 +1 @@
+        -console.log("Hello World!")
+        +console.log("Hello from Diff2Html!")`;
+
+	onMount(() => {
+		const diff2htmlUi = new Diff2HtmlUI(document.getElementById('diff')!, diffString);
+        diff2htmlUi.draw();
+	});
+</script>
+
+<div id="diff" />