Migrate tools and configs to typescript, require node.js >= 22.18.0 (#35421)

Migrate all JS config and tools to TS and fix a number of type issues.
This required Node.js 22.18.0 or greater where [type-stripping was
enabled](https://nodejs.org/en/blog/release/v22.18.0) by default.

Given that Node 22 is the current LTS, I think it's ok to assume that
the user has a recent version of it.

Webpack currently requires the `--disable-interpret` flag to work,
should be fixed eventually with
https://github.com/webpack/webpack-cli/issues/4525.
`fast-glob` is replaced by `fs.globSync`, available in Node 22.0.0 or
greater.

tools/generate-images.ts

@@ -4,12 +4,7 @@ import {optimize} from 'svgo';
 import {readFile, writeFile} from 'node:fs/promises';
 import {argv, exit} from 'node:process';
 
-function doExit(err) {
-  if (err) console.error(err);
-  exit(err ? 1 : 0);
-}
-
-async function generate(svg, path, {size, bg}) {
+async function generate(svg: string, path: string, {size, bg}: {size: number, bg?: boolean}) {
   const outputFile = new URL(path, import.meta.url);
 
   if (String(outputFile).endsWith('.svg')) {
@@ -19,7 +14,9 @@ async function generate(svg, path, {size, bg}) {
         'removeDimensions',
         {
           name: 'addAttributesToSVGElement',
-          params: {attributes: [{width: size}, {height: size}]},
+          params: {
+            attributes: [{width: String(size)}, {height: String(size)}],
+          },
         },
       ],
     });
@@ -57,7 +54,8 @@ async function main() {
 }
 
 try {
-  doExit(await main());
+  await main();
 } catch (err) {
-  doExit(err);
+  console.error(err);
+  exit(1);
 }

tools/generate-svg.ts

@@ -1,27 +1,29 @@
 #!/usr/bin/env node
-import fastGlob from 'fast-glob';
 import {optimize} from 'svgo';
-import {parse} from 'node:path';
+import {dirname, parse} from 'node:path';
+import {globSync, writeFileSync} from 'node:fs';
 import {readFile, writeFile, mkdir} from 'node:fs/promises';
 import {fileURLToPath} from 'node:url';
 import {exit} from 'node:process';
-import * as fs from 'node:fs';
+import type {Manifest} from 'material-icon-theme';
 
-const glob = (pattern) => fastGlob.sync(pattern, {
-  cwd: fileURLToPath(new URL('..', import.meta.url)),
-  absolute: true,
-});
+const glob = (pattern: string) => globSync(pattern, {cwd: dirname(import.meta.dirname)});
 
-async function processAssetsSvgFile(file, {prefix, fullName} = {}) {
+type Opts = {
+  prefix?: string,
+  fullName?: string,
+};
+
+async function processAssetsSvgFile(path: string, {prefix, fullName}: Opts = {}) {
   let name = fullName;
   if (!name) {
-    name = parse(file).name;
+    name = parse(path).name;
     if (prefix) name = `${prefix}-${name}`;
     if (prefix === 'octicon') name = name.replace(/-[0-9]+$/, ''); // chop of '-16' on octicons
   }
   // Set the `xmlns` attribute so that the files are displayable in standalone documents
   // The svg backend module will strip the attribute during startup for inline display
-  const {data} = optimize(await readFile(file, 'utf8'), {
+  const {data} = optimize(await readFile(path, 'utf8'), {
     plugins: [
       {name: 'preset-default'},
       {name: 'removeDimensions'},
@@ -41,16 +43,16 @@ async function processAssetsSvgFile(file, {prefix, fullName} = {}) {
   await writeFile(fileURLToPath(new URL(`../public/assets/img/svg/${name}.svg`, import.meta.url)), data);
 }
 
-function processAssetsSvgFiles(pattern, opts) {
-  return glob(pattern).map((file) => processAssetsSvgFile(file, opts));
+function processAssetsSvgFiles(pattern: string, opts: Opts = {}) {
+  return glob(pattern).map((path) => processAssetsSvgFile(path, opts));
 }
 
 async function processMaterialFileIcons() {
-  const files = glob('node_modules/material-icon-theme/icons/*.svg');
-  const svgSymbols = {};
-  for (const file of files) {
+  const paths = glob('node_modules/material-icon-theme/icons/*.svg');
+  const svgSymbols: Record<string, string> = {};
+  for (const path of paths) {
     // remove all unnecessary attributes, only keep "viewBox"
-    const {data} = optimize(await readFile(file, 'utf8'), {
+    const {data} = optimize(await readFile(path, 'utf8'), {
       plugins: [
         {name: 'preset-default'},
         {name: 'removeDimensions'},
@@ -58,16 +60,16 @@ async function processMaterialFileIcons() {
         {name: 'removeAttrs', params: {attrs: 'xml:space', elemSeparator: ','}},
       ],
     });
-    const svgName = parse(file).name;
+    const svgName = parse(path).name;
     // intentionally use single quote here to avoid escaping
     svgSymbols[svgName] = data.replace(/"/g, `'`);
   }
-  fs.writeFileSync(fileURLToPath(new URL(`../options/fileicon/material-icon-svgs.json`, import.meta.url)), JSON.stringify(svgSymbols, null, 2));
+  writeFileSync(fileURLToPath(new URL(`../options/fileicon/material-icon-svgs.json`, import.meta.url)), JSON.stringify(svgSymbols, null, 2));
 
-  const vscodeExtensionsJson = await readFile(fileURLToPath(new URL(`generate-svg-vscode-extensions.json`, import.meta.url)));
-  const vscodeExtensions = JSON.parse(vscodeExtensionsJson);
-  const iconRulesJson = await readFile(fileURLToPath(new URL(`../node_modules/material-icon-theme/dist/material-icons.json`, import.meta.url)));
-  const iconRules = JSON.parse(iconRulesJson);
+  const vscodeExtensionsJson = await readFile(fileURLToPath(new URL(`generate-svg-vscode-extensions.json`, import.meta.url)), 'utf8');
+  const vscodeExtensions = JSON.parse(vscodeExtensionsJson) as Record<string, string>;
+  const iconRulesJson = await readFile(fileURLToPath(new URL(`../node_modules/material-icon-theme/dist/material-icons.json`, import.meta.url)), 'utf8');
+  const iconRules = JSON.parse(iconRulesJson) as Manifest;
   // The rules are from VSCode material-icon-theme, we need to adjust them to our needs
   // 1. We only use lowercase filenames to match (it should be good enough for most cases and more efficient)
   // 2. We do not have a "Language ID" system:
@@ -91,7 +93,7 @@ async function processMaterialFileIcons() {
     }
   }
   const iconRulesPretty = JSON.stringify(iconRules, null, 2);
-  fs.writeFileSync(fileURLToPath(new URL(`../options/fileicon/material-icon-rules.json`, import.meta.url)), iconRulesPretty);
+  writeFileSync(fileURLToPath(new URL(`../options/fileicon/material-icon-rules.json`, import.meta.url)), iconRulesPretty);
 }
 
 async function main() {

tools/lint-templates-svg.ts

@@ -1,11 +1,10 @@
 #!/usr/bin/env node
-import {readdirSync, readFileSync} from 'node:fs';
+import {readdirSync, readFileSync, globSync} from 'node:fs';
 import {parse, relative} from 'node:path';
 import {fileURLToPath} from 'node:url';
 import {exit} from 'node:process';
-import fastGlob from 'fast-glob';
 
-const knownSvgs = new Set();
+const knownSvgs = new Set<string>();
 for (const file of readdirSync(new URL('../public/assets/img/svg', import.meta.url))) {
   knownSvgs.add(parse(file).name);
 }
@@ -13,7 +12,7 @@ for (const file of readdirSync(new URL('../public/assets/img/svg', import.meta.u
 const rootPath = fileURLToPath(new URL('..', import.meta.url));
 let hadErrors = false;
 
-for (const file of fastGlob.sync(fileURLToPath(new URL('../templates/**/*.tmpl', import.meta.url)))) {
+for (const file of globSync(fileURLToPath(new URL('../templates/**/*.tmpl', import.meta.url)))) {
   const content = readFileSync(file, 'utf8');
   for (const [_, name] of content.matchAll(/svg ["'`]([^"'`]+)["'`]/g)) {
     if (!knownSvgs.has(name)) {