Migrated frontend to typescript

1 files changed, 136 insertions, 112 deletions

diff --git a/packages/client/src/components/CommitPatch.vue b/packages/client/src/components/CommitPatch.vue
index fdeb28d..a51a6cb 100644
--- a/packages/client/src/components/CommitPatch.vue
+++ b/packages/client/src/components/CommitPatch.vue
@@ -1,129 +1,153 @@
-<script>
-import { h } from "vue";
+<script lang="ts">
+import { defineComponent, h, PropType, VNode } from "vue";
 import hljs from "highlight.js";
 import hljs_languages from "../util/hljs-languages";
 
-export default {
+type Hunk = {
+	new_start: number,
+	new_lines_cnt: number,
+	new_lines: number[],
+	old_start: number,
+	old_lines_cnt: number,
+	deleted_lines: number[],
+	hunk: string
+}
+
+type Patch = {
+	additions: number,
+	deletions: number,
+	from: string,
+	to: string,
+	too_large: boolean,
+	hunks: Hunk[]
+}
+
+export default defineComponent({
 	name: "CommitPatch",
 	props: {
 		patch: {
-			type: Object,
+			type: Object as PropType<Patch>,
 			required: true
 		}
 	},
 	setup(props) {
-		let commit_patch;
-
-		if(props.patch.too_large === false) {
-			let all_hunks = props.patch.hunks.map((hunk) => hunk.hunk.split("\n").slice(1).join("\n"));
-
-			const language = hljs_languages.find((lang) => lang.extensions.some((extension) => props.patch.to.endsWith(extension)));
-			let highlighted = language ? hljs.highlight(all_hunks.join("\n"), { language: language.name }) : hljs.highlightAuto(all_hunks.join("\n"));
-			highlighted = highlighted.value.split("\n");
-
-			const highlighted_hunks = [];
-			let hunk_start = 0;
-			all_hunks.forEach((hunk, index) => {
-				const hunk_row_cnt = hunk.split("\n").length;
-				all_hunks[index] = props.patch.hunks[index].hunk.split("\n")[0] + all_hunks[index];
-				highlighted_hunks.push(highlighted.slice(hunk_start, hunk_start + hunk_row_cnt));
-				hunk_start = hunk_start + hunk_row_cnt;
-			});
-
-			all_hunks = all_hunks.map((hunk) => hunk.split("\n"));
-
-			commit_patch = h("table", { cellspacing: "0px" }, [
-				h("tbody", [
-					props.patch.hunks.map((hunk, hunk_index) => {
-						let new_offset = 0;
-						let deleted_offset = 0;
-						const multiline_comments = [];
-
-						return highlighted_hunks[hunk_index].map((line, line_index) => {
-							if(/^@@ -[0-9,]+ \+[0-9,]+ @@/.test(all_hunks[hunk_index][line_index])) {
-								new_offset++;
+		if(props.patch.too_large === true) {
+			return () => h("div", { class: "ps-3 pt-3 patch-too-large" }, [
+				h("span", "Patch is too large to display.")
+			]);
+		}
+
+		// Array of hunks without the first chunk headers
+		const all_hunks = props.patch.hunks.map((hunk) => hunk.hunk.split("\n").slice(1).join("\n"));
+
+		// Check if the patch's file extension matches any predefined language.
+		const language = hljs_languages.find((lang) => lang.extensions.some((extension) => props.patch.to.endsWith(extension)));
+
+		// Syntax highlight all of the patch's hunks
+		const highlight_result = language
+			? hljs.highlight(all_hunks.join("\n"), { language: language.name })
+			: hljs.highlightAuto(all_hunks.join("\n"));
+
+		const highlighted = highlight_result.value.split("\n");
+
+		const highlighted_hunks: string[][] = [];
+
+		let hunk_start = 0;
+		all_hunks.forEach((hunk, index) => {
+			// Add the chunk headers back to the hunks
+			all_hunks[index] = props.patch.hunks[index].hunk.split("\n")[0] + all_hunks[index];
+
+			// Split the syntax highlighted patch back into hunks
+			const hunk_row_cnt = hunk.split("\n").length;
+			highlighted_hunks.push(highlighted.slice(hunk_start, hunk_start + hunk_row_cnt));
+
+			hunk_start = hunk_start + hunk_row_cnt;
+		});
+
+		const all_hunks_raw = all_hunks.map((hunk) => hunk.split("\n"));
+
+		return () => h("table", { cellspacing: "0px" }, [
+			h("tbody", [
+				props.patch.hunks.map((hunk, hunk_index) => {
+					let new_offset = 0;
+					let deleted_offset = 0;
+					const multiline_comments: string[] = [];
+
+					return highlighted_hunks[hunk_index].map((line, line_index) => {
+						if(/^@@ -[0-9,]+ \+[0-9,]+ @@/.test(all_hunks_raw[hunk_index][line_index])) {
+							return h("tr", { class: "commit-file-pos-change" }, [
+								h("td", { "patch-line-col-unsel": "..." }),
+								h("td", { "patch-line-col-unsel": "..." }),
+								h("td", { "patch-line-col-unsel": "..." }),
+								h("td", [
+									h("code", all_hunks_raw[hunk_index][line_index])
+								])
+							]);
+						} else if(/^\\ No newline at end of file$/.test(all_hunks_raw[hunk_index][line_index])) {
+							new_offset++;
+							deleted_offset++;
+							return h("tr", { class: "commit-file-no-newline" }, [
+								h("td", ""),
+								h("td", ""),
+								h("td", ""),
+								h("td", [
+									h("code", all_hunks_raw[hunk_index][line_index])
+								])
+							]);
+						} else {
+							let first_td: VNode;
+							let second_td: VNode;
+							let third_td: VNode;
+
+							const adjusted_line_index = line_index + 1;
+
+							if(hunk.new_lines.includes(adjusted_line_index)) {
+								first_td = h("td", "");
+								second_td = h("td", { class: "line-highlight-new", "patch-line-col-unsel": Number(hunk.new_start) + line_index - new_offset });
+								third_td = h("td", { class: "line-new", "patch-line-col-unsel": "+" });
 								deleted_offset++;
-								return h("tr", { class: "commit-file-pos-change" }, [
-									h("td", { "patch-line-col-unsel": "..." }),
-									h("td", { "patch-line-col-unsel": "..." }),
-									h("td", { "patch-line-col-unsel": "..." }),
-									h("td", [
-										h("code", all_hunks[hunk_index][line_index])
-									])
-								]);
-							} else if(/^\\ No newline at end of file$/.test(all_hunks[hunk_index][line_index])) {
+							} else if(hunk.deleted_lines.includes(adjusted_line_index)) {
+								first_td = h("td", { "patch-line-col-unsel": Number(hunk.old_start) + line_index - deleted_offset });
+								second_td = h("td", { class: "line-highlight-deleted" });
+								third_td = h("td", { class: "line-deleted", "patch-line-col-unsel": "-" });
 								new_offset++;
-								deleted_offset++;
-								return h("tr", { class: "commit-file-no-newline" }, [
-									h("td", ""),
-									h("td", ""),
-									h("td", ""),
-									h("td", [
-										h("code", all_hunks[hunk_index][line_index])
-									])
-								]);
 							} else {
-								let first_td;
-								let second_td;
-								let third_td;
-
-								if(hunk.new_lines.includes(line_index)) {
-									first_td = h("td", "");
-									second_td = h("td", { class: "line-highlight-new", "patch-line-col-unsel": Number(hunk.new_start) + line_index - new_offset });
-									third_td = h("td", { class: "line-new", "patch-line-col-unsel": "+" });
-									deleted_offset++;
-								} else if(hunk.deleted_lines.includes(line_index)) {
-									first_td = h("td", { "patch-line-col-unsel": Number(hunk.old_start) + line_index - deleted_offset });
-									second_td = h("td", { class: "line-highlight-deleted" });
-									third_td = h("td", { class: "line-deleted", "patch-line-col-unsel": "-" });
-									new_offset++;
-								} else {
-									first_td = h("td", { class: "line-unchanged", "patch-line-col-unsel": Number(hunk.old_start) + line_index - deleted_offset });
-									second_td = h("td", { class: "line-unchanged", "patch-line-col-unsel": Number(hunk.new_start) + line_index - new_offset });
-									third_td = h("td", "");
-								}
-
-								let comment_open = line.match(/<span class="hljs-comment">/g);
-								const comment_open_cnt = (comment_open !== null) ? comment_open.length : 0;
-								comment_open = (comment_open !== null) ? comment_open[0] : "";
-
-								let comment_close = line.match(/<\/span>/g);
-								const comment_close_cnt = (comment_close !== null) ? comment_close.length : 0;
-								comment_close = (comment_close !== null) ? comment_close[0] : "";
-
-								if(comment_open_cnt > comment_close_cnt) {
-									line = line + "</span>";
-									console.log("Öppning " + line);
-									multiline_comments.push(comment_open);
-								} else if(comment_open_cnt < comment_close_cnt && multiline_comments.length !== 0) {
-									line = multiline_comments[multiline_comments.length - 1] + line;
-									console.log("Stängning " + line + "	" + multiline_comments[multiline_comments.length - 1]);
-									multiline_comments.pop();
-								} else if(multiline_comments.length !== 0) {
-									line = multiline_comments[multiline_comments.length - 1] + line + "</span>";
-									console.log("Mitt i " + line);
-								}
-
-								return h("tr", [
-									first_td,
-									second_td,
-									third_td,
-									h("td", [
-										h("code", { innerHTML: line })
-									])
-								]);
+								first_td = h("td", { class: "line-unchanged", "patch-line-col-unsel": Number(hunk.old_start) + line_index - deleted_offset });
+								second_td = h("td", { class: "line-unchanged", "patch-line-col-unsel": Number(hunk.new_start) + line_index - new_offset });
+								third_td = h("td", "");
+							}
+
+							const is_comment_open = line.match(/<span class="hljs-comment">/g);
+							const comment_open_cnt = (is_comment_open !== null) ? is_comment_open.length : 0;
+							const comment_open = (is_comment_open !== null) ? is_comment_open[0] : "";
+
+							const is_comment_close = line.match(/<\/span>/g);
+							const comment_close_cnt = (is_comment_close !== null) ? is_comment_close.length : 0;
+							// Const comment_close = (is_comment_close !== null) ? is_comment_close[0] : "";
+
+							if(comment_open_cnt > comment_close_cnt) {
+								line = line + "</span>";
+								multiline_comments.push(comment_open);
+							} else if(comment_open_cnt < comment_close_cnt && multiline_comments.length !== 0) {
+								line = multiline_comments[multiline_comments.length - 1] + line;
+								multiline_comments.pop();
+							} else if(multiline_comments.length !== 0) {
+								line = multiline_comments[multiline_comments.length - 1] + line + "</span>";
 							}
-						});
-					})
-				])
-			]);
-		} else {
-			commit_patch = h("div", { class: "ps-3 pt-3 patch-too-large" }, [
-				h("span", "Patch is too large to display.")
-			]);
-		}
 
-		return () => commit_patch;
+							return h("tr", [
+								first_td,
+								second_td,
+								third_td,
+								h("td", [
+									h("code", { innerHTML: line })
+								])
+							]);
+						}
+					});
+				})
+			])
+		]);
 	}
-};
+});
 </script>