impr: use typescript for font-preview and fontawesome scripts (@fehmer) (#5613)

Author: fehmer

frontend/scripts/font-preview.mjs frontend/scripts/font-preview.tsfrontend/scripts/font-preview.mjs renamed to frontend/scripts/font-preview.ts

@@ -1,13 +1,15 @@
 import * as fs from "fs";
 import * as path from "path";
 import { fileURLToPath } from "url";
-import Fonts from "../static/fonts/_list.json" assert { type: "json" };
+import Fonts from "../static/fonts/_list.json";
 import subsetFont from "subset-font";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
-export async function generatePreviewFonts(debug) {
+export async function generatePreviewFonts(
+  debug: boolean = false
+): Promise<void> {
   const srcDir = __dirname + "/../static/webfonts";
   const targetDir = __dirname + "/../static/webfonts-preview";
   fs.mkdirSync(targetDir, { recursive: true });
@@ -17,7 +19,7 @@ export async function generatePreviewFonts(debug) {
   for (const font of Fonts) {
     if (font.systemFont) continue;
 
-    const display = (font.display || font.name) + "Fontfamily";
+    const display = (font.display ?? font.name) + "Fontfamily";
 
     const fileNames = srcFiles.filter((it) =>
       it.startsWith(font.name.replaceAll(" ", "") + "-")
@@ -29,7 +31,7 @@ export async function generatePreviewFonts(debug) {
       );
     const fileName = fileNames[0];
 
-    generateSubset(
+    await generateSubset(
       srcDir + "/" + fileName,
       targetDir + "/" + fileName,
       display
@@ -42,7 +44,7 @@ export async function generatePreviewFonts(debug) {
   }
 }
 
-async function generateSubset(source, target, name, debug) {
+async function generateSubset(source, target, name): Promise<void> {
   const font = fs.readFileSync(source);
   const subset = await subsetFont(font, name, {
     targetFormat: "woff2",
@@ -51,5 +53,5 @@ async function generateSubset(source, target, name, debug) {
 }
 //detect if we run this as a main
 if (import.meta.url.endsWith(process.argv[1])) {
-  generatePreviewFonts(true);
+  await generatePreviewFonts(true);
 }

frontend/scripts/fontawesome.mjs frontend/scripts/fontawesome.tsfrontend/scripts/fontawesome.mjs renamed to frontend/scripts/fontawesome.ts

@@ -1,6 +1,17 @@
 import * as fs from "fs";
 import * as path from "path";
 
+type FontawesomeConfig = {
+  /* used regular icons without `fa-` prefix*/
+  regular: string[];
+  /* used solid icons without `fa-` prefix*/
+  solid: string[];
+  /* used brands icons without `fa-` prefix*/
+  brands: string[];
+};
+
+type FileObject = { name: string; isDirectory: boolean };
+
 const iconSet = {
   solid: parseIcons("solid"),
   regular: parseIcons("regular"),
@@ -39,20 +50,13 @@ const modules2 = {
   stacked: ["stack", "stack-1x", "stack-2x", "inverse"],
 };
 
-/**
- * fontawesome icon config
- * @typedef {Object} FontawesomeConfig
- * @property {string[]} solid - used solid icons without `fa-` prefix
- * @property {string[]} brands - used brands icons without `fa-` prefix
- */
-
 /**
  * Detect used fontawesome icons in the directories `src/**` and `static/**{.html|.css}`
  * @param {boolean} debug - Enable debug output
  * @returns {FontawesomeConfig} - used icons
  */
 
-export function getFontawesomeConfig(debug = false) {
+export function getFontawesomeConfig(debug = false): FontawesomeConfig {
   const time = Date.now();
   const srcFiles = findAllFiles(
     "./src",
@@ -66,7 +70,7 @@ export function getFontawesomeConfig(debug = false) {
   );
 
   const allFiles = [...srcFiles, ...staticFiles];
-  const usedClassesSet = new Set();
+  const usedClassesSet: Set<string> = new Set();
 
   const regex = /\bfa-[a-z0-9-]+\b/g;
 
@@ -130,12 +134,15 @@ if (import.meta.url.endsWith(process.argv[1])) {
   getFontawesomeConfig(true);
 }
 
-function toFileAndDir(dir, file) {
+function toFileAndDir(dir, file): FileObject {
   const name = path.join(dir, file);
   return { name, isDirectory: fs.statSync(name).isDirectory() };
 }
 
-function findAllFiles(dir, filter = (filename) => true) {
+function findAllFiles(
+  dir: string,
+  filter: (filename: string) => boolean = (_it): boolean => true
+): string[] {
   return fs
     .readdirSync(dir)
     .map((it) => toFileAndDir(dir, it))
@@ -147,11 +154,12 @@ function findAllFiles(dir, filter = (filename) => true) {
     }, []);
 }
 
-function parseIcons(iconSet) {
-  const file = fs
+function parseIcons(iconSet: string): string[] {
+  const file: string | null = fs
     .readFileSync(`node_modules/@fortawesome/fontawesome-free/js/${iconSet}.js`)
     .toString();
+
   return file
-    .match(/\"(.*)\"\: \[.*\],/g)
-    .map((it) => it.substring(1, it.indexOf(":") - 1));
+    ?.match(/"(.*)": \[.*\],/g)
+    ?.map((it) => it.substring(1, it.indexOf(":") - 1)) as string[];
 }

frontend/scripts/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "incremental": true,
+    "module": "ESNext",
+    "target": "ESNext",
+    "sourceMap": false,
+    "allowJs": true,
+    "checkJs": true,
+    "outDir": "build",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "strictNullChecks": true,
+    "skipLibCheck": true,
+    "noEmit": true
+  },
+  "ts-node": {
+    "files": true
+  },
+  "files": ["../src/ts/types/types.d.ts"],
+  "include": ["./**/*.ts"]
+}

frontend/vite.config.js

@@ -9,8 +9,8 @@ import Inspect from "vite-plugin-inspect";
 import autoprefixer from "autoprefixer";
 import "dotenv/config";
 import { fontawesomeSubset } from "fontawesome-subset";
-import { getFontawesomeConfig } from "./scripts/fontawesome.mjs";
-import { generatePreviewFonts } from "./scripts/font-preview.mjs";
+import { getFontawesomeConfig } from "./scripts/fontawesome";
+import { generatePreviewFonts } from "./scripts/font-preview";
 
 function pad(numbers, maxLength, fillString) {
   return numbers.map((number) =>