Modernize and fix website build tooling deps and utilize JS type checking (#3348)

* Modernize and fix website build tooling deps and utilize JS type checking

* Upgrade to the latest Node.js

Author: Keavon

.github/workflows/website.yml

@@ -26,6 +26,14 @@ jobs:
       - name: 📥 Clone and checkout repository
         uses: actions/checkout@v3
 
+      # We can remove this step once `ubuntu-latest` has Node.js 22 or newer for its native TypeScript support. See:
+      # https://github.com/actions/runner-images?tab=readme-ov-file#available-images
+      # https://nodejs.org/en/learn/typescript/run-natively
+      - name: 📦 Install the latest Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "latest"
+
       - name: 🕸 Install Zola
         uses: taiki-e/install-action@v2
         with:
@@ -77,7 +85,8 @@ jobs:
           MODE: prod
         run: |
           cd website
-          npm run install-fonts
+          npm ci
+          npm run lint
           zola --config config.toml build --minify
 
       - name: 📤 Publish to Cloudflare Pages

website/build-scripts/generate-editor-structure.js renamed to website/.build-scripts/generate-editor-structure.ts

@@ -1,21 +1,12 @@
-const fs = require("fs");
-const path = require("path");
-
-/**
- * Escapes characters that have special meaning in HTML.
- * @param {string} text The text to escape.
- * @returns {string} The escaped text.
- */
-function escapeHtml(text) {
-	return text.replace(/</g, "&lt;").replace(/>/g, "&gt;");
-}
+/* eslint-disable no-console */
+
+import fs from "fs";
+import path from "path";
 
-/**
- * Parses a single line of the input text.
- * @param {string} line The line to parse.
- * @returns {{ level: number, text: string, link: string | undefined }}
- */
-function parseLine(line) {
+type Entry = { level: number; text: string; link: string | undefined };
+
+/// Parses a single line of the input text.
+function parseLine(line: string) {
 	const linkRegex = /`([^`]+)`$/;
 	const linkMatch = line.match(linkRegex);
 	let link = undefined;
@@ -25,22 +16,19 @@ function parseLine(line) {
 		link = `https://github.com/GraphiteEditor/Graphite/blob/master/${filePath}`;
 	}
 
-	const textContent = line.replace(/^[\s│├└─]*/, "").replace(linkRegex, "").trim();
+	const textContent = line
+		.replace(/^[\s│├└─]*/, "")
+		.replace(linkRegex, "")
+		.trim();
 	const indentation = line.indexOf(textContent);
 	// Each level of indentation is 4 characters.
 	const level = Math.floor(indentation / 4);
 
 	return { level, text: textContent, link };
 }
 
-/**
- * Recursively builds the HTML list from the parsed nodes.
- * @param {Array} nodes The array of parsed node objects.
- * @param {number} currentIndex The current index in the nodes array.
- * @param {number} currentLevel The current indentation level.
- * @returns {{html: string, nextIndex: number}}
- */
-function buildHtmlList(nodes, currentIndex, currentLevel) {
+/// Recursively builds the HTML list from the parsed nodes.
+function buildHtmlList(nodes: Entry[], currentIndex: number, currentLevel: number) {
 	if (currentIndex >= nodes.length) {
 		return { html: "", nextIndex: currentIndex };
 	}
@@ -68,16 +56,18 @@ function buildHtmlList(nodes, currentIndex, currentLevel) {
 		} else {
 			escapedText = [escapeHtml(node.text)];
 		}
-		
+
 		let role = "message";
 		if (node.link) role = "subsystem";
 		else if (hasDeeperChildren) role = "submessage";
 		else if (escapedText.length === 2) role = "field";
 
 		const partOfMessageFromNamingConvention = ["Message", "MessageHandler", "MessageContext"].some((suffix) => node.text.replace(/(.*)<.*>/g, "$1").endsWith(suffix));
 		const partOfMessageViolatesNamingConvention = node.link && !partOfMessageFromNamingConvention;
-		const violatesNamingConvention = partOfMessageViolatesNamingConvention ? "<span class=\"warn\">(violates naming convention — should end with 'Message', 'MessageHandler', or 'MessageContext')</span>" : "";
-		
+		const violatesNamingConvention = partOfMessageViolatesNamingConvention
+			? "<span class=\"warn\">(violates naming convention — should end with 'Message', 'MessageHandler', or 'MessageContext')</span>"
+			: "";
+
 		if (hasDirectChildren) {
 			html += `<li><span class="tree-node"><span class="${role}">${escapedText}</span>${linkHtml}${violatesNamingConvention}</span>`;
 			const childResult = buildHtmlList(nodes, i + 1, node.level + 1);
@@ -96,12 +86,16 @@ function buildHtmlList(nodes, currentIndex, currentLevel) {
 	return { html, nextIndex: i };
 }
 
+function escapeHtml(text: string) {
+	return text.replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+
 const inputFile = process.argv[2];
 const outputFile = process.argv[3];
 
 if (!inputFile || !outputFile) {
 	console.error("Error: Please provide the input text and output HTML file paths as arguments.");
-	console.log("Usage: node generate-editor-structure.js <input txt> <output html>");
+	console.log("Usage: node generate-editor-structure.ts <input txt> <output html>");
 	process.exit(1);
 }
 
@@ -112,7 +106,7 @@ if (!fs.existsSync(inputFile)) {
 
 try {
 	const fileContent = fs.readFileSync(inputFile, "utf-8");
-	const lines = fileContent.split(/\r?\n/).filter(line => line.trim() !== "" && !line.startsWith("// filepath:"));
+	const lines = fileContent.split(/\r?\n/).filter((line) => line.trim() !== "" && !line.startsWith("// filepath:"));
 	const parsedNodes = lines.map(parseLine);
 
 	const { html } = buildHtmlList(parsedNodes, 0, 0);

website/build-scripts/install-fonts.js renamed to website/.build-scripts/install-fonts.ts

@@ -1,9 +1,11 @@
-const fs = require("fs");
-const https = require("https");
-const path = require("path");
+/* eslint-disable no-console */
 
-// Define basePath
-const basePath = path.resolve(__dirname);
+import fs from "fs";
+import https from "https";
+import path from "path";
+
+// Define basePath as the directory of the current script
+const basePath = import.meta.dirname;
 
 // Define files to copy as [source, destination] pairs
 // Files with the same destination will be concatenated
@@ -21,8 +23,8 @@ const DIRECTORIES_TO_COPY = [
 
 // Track processed destination files and CSS content
 const processedDestinations = new Set();
-const cssDestinations = new Set();
-const allCopiedFiles = new Set();
+const cssDestinations = new Set<string>();
+const allCopiedFiles = new Set<string>();
 
 // Process each file
 FILES_TO_COPY.forEach(([source, dest]) => {
@@ -68,8 +70,7 @@ FILES_TO_COPY.forEach(([source, dest]) => {
 	}
 });
 
-// Function to recursively copy a directory
-function copyDirectoryRecursive(source, destination) {
+function copyDirectoryRecursive(source: string, destination: string) {
 	// Ensure destination directory exists
 	if (!fs.existsSync(destination)) {
 		fs.mkdirSync(destination, { recursive: true });
@@ -130,7 +131,7 @@ cssDestinations.forEach((cssPath) => {
 });
 
 // Filter files that aren't referenced in CSS
-const unusedFiles = [];
+const unusedFiles: string[] = [];
 allCopiedFiles.forEach((filePath) => {
 	const fileName = path.basename(filePath);
 
@@ -185,10 +186,10 @@ https
 				fs.writeFileSync(textBalancerDest, data, "utf8");
 				console.log(`Downloaded and saved: ${textBalancerDest}`);
 			} catch (error) {
-				console.error(`Error saving text-balancer.js:`, error);
+				console.error("Error saving text-balancer.js:", error);
 			}
 		});
 	})
 	.on("error", (err) => {
-		console.error(`Error downloading text-balancer.js:`, err);
+		console.error("Error downloading text-balancer.js:", err);
 	});

website/.eslintrc.js

@@ -0,0 +1,106 @@
+import js from "@eslint/js";
+import { defineConfig, globalIgnores } from "eslint/config";
+import * as pluginImport from "eslint-plugin-import";
+import pluginPrettier from "eslint-plugin-prettier";
+import globals from "globals";
+import ts from "typescript-eslint";
+
+export default defineConfig([
+	js.configs.recommended,
+	ts.configs.recommended,
+	pluginImport.flatConfigs.recommended,
+	pluginImport.flatConfigs.typescript,
+	globalIgnores([
+		// Ignore generated directories
+		"node_modules/",
+		"public/",
+		// Ignore vendored code
+		"static/*.js",
+		// Don't ignore JS and TS dotfiles in this folder
+		"!.*.js",
+		"!.*.ts",
+	]),
+	{
+		plugins: {
+			prettier: pluginPrettier,
+		},
+		settings: {
+			"import/parsers": { "@typescript-eslint/parser": [".ts", ".js"] },
+			"import/resolver": { typescript: true, node: true },
+		},
+		languageOptions: {
+			parserOptions: {
+				project: "./tsconfig.json",
+			},
+			globals: {
+				...globals.browser,
+				...globals.node,
+			},
+		},
+		rules: {
+			// Standard ESLint config (for ordinary JS syntax linting)
+			indent: "off",
+			quotes: ["error", "double", { allowTemplateLiterals: true }],
+			camelcase: ["error", { properties: "always" }],
+			curly: ["error", "multi-line"],
+			"linebreak-style": ["error", "unix"],
+			"eol-last": ["error", "always"],
+			"max-len": ["error", { code: 200, tabWidth: 4, ignorePattern: `d="([\\s\\S]*?)"` }],
+			"prefer-destructuring": "off",
+			"no-console": "warn",
+			"no-debugger": "warn",
+			"no-param-reassign": ["error", { props: false }],
+			"no-bitwise": "off",
+			"no-shadow": "off",
+			"no-use-before-define": "off",
+			"no-restricted-imports": ["error", { patterns: [".*"] }],
+
+			// TypeScript plugin config (for TS-specific linting)
+			"@typescript-eslint/indent": "off",
+			"@typescript-eslint/camelcase": "off",
+			"@typescript-eslint/no-use-before-define": "off",
+			"@typescript-eslint/no-unused-vars": [
+				"error",
+				{
+					args: "all",
+					argsIgnorePattern: "^_",
+					caughtErrors: "all",
+					caughtErrorsIgnorePattern: "^_",
+					destructuredArrayIgnorePattern: "^_",
+					varsIgnorePattern: "^_",
+					ignoreRestSiblings: true,
+				},
+			],
+			"@typescript-eslint/consistent-type-imports": "error",
+			"@typescript-eslint/consistent-type-definitions": ["error", "type"],
+			"@typescript-eslint/consistent-type-assertions": ["error", { assertionStyle: "as", objectLiteralTypeAssertions: "never" }],
+			"@typescript-eslint/consistent-indexed-object-style": ["error", "record"],
+			"@typescript-eslint/consistent-generic-constructors": ["error", "constructor"],
+			"@typescript-eslint/no-restricted-types": ["error", { types: { null: "Use `undefined` instead." } }],
+
+			// Import plugin config (for intelligently validating module import statements)
+			"import/no-unresolved": "error",
+			"import/prefer-default-export": "off",
+			"import/no-relative-packages": "error",
+			"import/no-named-as-default-member": "off",
+			"import/order": [
+				"error",
+				{
+					alphabetize: { order: "asc", caseInsensitive: true },
+					warnOnUnassignedImports: true,
+					"newlines-between": "always-and-inside-groups",
+				},
+			],
+
+			// Prettier plugin config (for validating and fixing formatting)
+			"prettier/prettier": [
+				"error",
+				{
+					tabWidth: 4,
+					tabs: true,
+					printWidth: 200,
+				},
+			],
+		},
+	},
+]);