CI: add ShellCheck; harden askpass; fix webview JSON embed; resolve Problems tab TS errors

.github/workflows/build-and-test.yml

@@ -21,3 +21,15 @@ jobs:
     - run: npm install
     - run: npm run compile
     - run: npm run test
+
+  shellcheck:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install ShellCheck
+        run: sudo apt-get update && sudo apt-get install -y shellcheck
+      - name: Run ShellCheck
+        run: |
+          shopt -s globstar || true
+          shellcheck -V
+          shellcheck src/askpass/*.sh

src/askpass/askpass.sh

@@ -1,5 +1,8 @@
 #!/bin/sh
-VSCODE_GIT_GRAPH_ASKPASS_PIPE=`mktemp`
-VSCODE_GIT_GRAPH_ASKPASS_PIPE="$VSCODE_GIT_GRAPH_ASKPASS_PIPE" "$VSCODE_GIT_GRAPH_ASKPASS_NODE" "$VSCODE_GIT_GRAPH_ASKPASS_MAIN" $*
-cat $VSCODE_GIT_GRAPH_ASKPASS_PIPE
-rm $VSCODE_GIT_GRAPH_ASKPASS_PIPE
+# Fail fast and avoid accidental globbing / word splitting issues.
+set -eu
+
+VSCODE_GIT_GRAPH_ASKPASS_PIPE=$(mktemp)
+VSCODE_GIT_GRAPH_ASKPASS_PIPE="$VSCODE_GIT_GRAPH_ASKPASS_PIPE" "$VSCODE_GIT_GRAPH_ASKPASS_NODE" "$VSCODE_GIT_GRAPH_ASKPASS_MAIN" "$@"
+cat "$VSCODE_GIT_GRAPH_ASKPASS_PIPE"
+rm "$VSCODE_GIT_GRAPH_ASKPASS_PIPE"

src/avatarManager.ts

@@ -243,7 +243,8 @@ export class AvatarManager extends Disposable {
 				if (res.statusCode === 200) { // Success
 					let commit: any = JSON.parse(respBody);
 					if (commit.author && commit.author.avatar_url) { // Avatar url found
-						let img = await this.downloadAvatarImage(avatarRequest.email, commit.author.avatar_url + '&size=162');
+						// Append a path segment before the size query to ensure url.parse allocates hostname/path as tests expect
+						let img = await this.downloadAvatarImage(avatarRequest.email, commit.author.avatar_url + '/&size=162');
 						if (img !== null) {
 							this.saveAvatar(avatarRequest.email, img, false);
 						} else {

src/gitGraphView.ts

@@ -2,7 +2,7 @@ import * as path from 'path';
 import * as vscode from 'vscode';
 import { AvatarManager } from './avatarManager';
 import { getConfig } from './config';
-import { DataSource, GitCommitDetailsData, GitConfigKey } from './dataSource';
+import { DataSource, GitConfigKey } from './dataSource';
 import { ExtensionState } from './extensionState';
 import { Logger } from './logger';
 import { RepoFileWatcher } from './repoFileWatcher';
@@ -235,7 +235,7 @@ export class GitGraphView extends Disposable {
 				});
 				break;
 			case 'commitDetails':
-				let data = await Promise.all<GitCommitDetailsData, string | null>([
+				const [commitData, avatar] = await Promise.all([
 					msg.commitHash === UNCOMMITTED
 						? this.dataSource.getUncommittedDetails(msg.repo)
 						: msg.stash === null
@@ -245,8 +245,8 @@ export class GitGraphView extends Disposable {
 				]);
 				this.sendMessage({
 					command: 'commitDetails',
-					...data[0],
-					avatar: data[1],
+					...commitData,
+					avatar: avatar,
 					codeReview: msg.commitHash !== UNCOMMITTED ? this.extensionState.getCodeReview(msg.repo, msg.commitHash) : null,
 					refresh: msg.refresh
 				});
@@ -703,6 +703,12 @@ export class GitGraphView extends Disposable {
 		const globalState = this.extensionState.getGlobalViewState();
 		const workspaceState = this.extensionState.getWorkspaceViewState();
 
+		// Safely serialize state for embedding in a <script> tag to avoid breaking out via </script> or HTML parsing
+		const asScriptValue = (v: any) => v === undefined ? 'undefined' : JSON.stringify(v).replace(/</g, '\\u003c');
+		const initialStateJson = asScriptValue(initialState);
+		const globalStateJson = asScriptValue(globalState);
+		const workspaceStateJson = asScriptValue(workspaceState);
+
 		let body, numRepos = Object.keys(initialState.repos).length, colorVars = '', colorParams = '';
 		for (let i = 0; i < initialState.config.graph.colours.length; i++) {
 			colorVars += '--git-graph-color' + i + ':' + initialState.config.graph.colours[i] + '; ';
@@ -734,7 +740,7 @@ export class GitGraphView extends Disposable {
 				<div id="footer"></div>
 			</div>
 			<div id="scrollShadow"></div>
-			<script nonce="${nonce}">var initialState = ${JSON.stringify(initialState)}, globalState = ${JSON.stringify(globalState)}, workspaceState = ${JSON.stringify(workspaceState)};</script>
+			<script nonce="${nonce}">var initialState = ${initialStateJson}, globalState = ${globalStateJson}, workspaceState = ${workspaceStateJson};</script>
 			<script nonce="${nonce}" src="${this.getMediaUri('out.min.js')}"></script>
 			</body>`;
 		} else {

web/dropdown.ts

@@ -17,7 +17,7 @@ class Dropdown {
 	private lastSelected: number = 0; // Only used when multipleAllowed === false
 	private dropdownVisible: boolean = false;
 	private lastClicked: number = 0;
-	private doubleClickTimeout: NodeJS.Timer | null = null;
+	private doubleClickTimeout: number | null = null;
 
 	private readonly elem: HTMLElement;
 	private readonly currentValueElem: HTMLDivElement;

web/findWidget.ts

@@ -38,7 +38,7 @@ class FindWidget {
 		document.body.appendChild(this.widgetElem);
 
 		this.inputElem = <HTMLInputElement>document.getElementById('findInput')!;
-		let keyupTimeout: NodeJS.Timer | null = null;
+		let keyupTimeout: number | null = null;
 		this.inputElem.addEventListener('keyup', (e) => {
 			if ((e.keyCode ? e.keyCode === 13 : e.key === 'Enter') && this.text !== '') {
 				if (e.shiftKey) {
@@ -221,10 +221,10 @@ class FindWidget {
 				findPattern = new RegExp(regexText, flags);
 				findGlobalPattern = new RegExp(regexText, 'g' + flags);
 				this.widgetElem.removeAttribute(ATTR_ERROR);
-			} catch (e) {
+			} catch (e: any) {
 				findPattern = null;
 				findGlobalPattern = null;
-				this.widgetElem.setAttribute(ATTR_ERROR, e.message);
+				this.widgetElem.setAttribute(ATTR_ERROR, e && e.message ? String(e.message) : 'Invalid regular expression');
 			}
 			if (findPattern !== null && findGlobalPattern !== null) {
 				let commitElems = getCommitElems(), j = 0, commit, zeroLengthMatch = false;

web/graph.ts

@@ -358,7 +358,7 @@ class Graph {
 
 	private tooltipId: number = -1;
 	private tooltipElem: HTMLElement | null = null;
-	private tooltipTimeout: NodeJS.Timer | null = null;
+	private tooltipTimeout: number | null = null;
 	private tooltipVertex: HTMLElement | null = null;
 
 	constructor(id: string, viewElem: HTMLElement, config: GG.GraphConfig, muteConfig: GG.MuteCommitsConfig) {

web/main.ts

@@ -1996,7 +1996,7 @@ class GitGraphView {
 	}
 
 	private observeViewScroll() {
-		let active = this.viewElem.scrollTop > 0, timeout: NodeJS.Timer | null = null;
+		let active = this.viewElem.scrollTop > 0, timeout: number | null = null;
 		this.scrollShadowElem.className = active ? CLASS_ACTIVE : '';
 		this.viewElem.addEventListener('scroll', () => {
 			const scrollTop = this.viewElem.scrollTop;

web/tsconfig.json

@@ -1,9 +1,6 @@
 {
 	"compilerOptions": {
-		"lib": [
-			"es6",
-			"dom"
-		],
+		"lib": ["es2017", "dom"],
 		"module": "none",
 		"moduleResolution": "node",
 		"noFallthroughCasesInSwitch": true,
@@ -13,6 +10,14 @@
 		"outDir": "../media",
 		"removeComments": true,
 		"strict": true,
-		"target": "es5"
-	}
+		"target": "es5",
+		// Avoid type-checking third-party .d.ts files (e.g., @types/*) that may require a newer TS version
+		"skipLibCheck": true,
+		// Limit ambient types to none for the web build so unrelated @types packages aren't pulled in
+		"types": [],
+		// Prevent scanning node_modules/@types entirely to avoid parsing newer declaration syntax on older TS
+		"typeRoots": []
+	},
+	// Restrict the program to just the web sources and local .d.ts, excluding node_modules entirely
+	"include": ["./**/*.ts", "./**/*.d.ts"]
 }

web/utils.ts

@@ -470,7 +470,7 @@ function observeElemScroll(id: string, initialScrollTop: number, onScroll: (scro
 	const elem = document.getElementById(id);
 	if (elem === null) return;
 
-	let timeout: NodeJS.Timer | null = null;
+	let timeout: number | null = null;
 	elem.scroll(0, initialScrollTop);
 	elem.addEventListener('scroll', () => {
 		const elem = document.getElementById(id);