From 5b970ecea76a88d155439b013dafe49e439667ad Mon Sep 17 00:00:00 2001 From: Christian Fehmer Date: Mon, 15 Jul 2024 12:17:31 +0200 Subject: [PATCH] impr: use typescript for font-preview and fontawesome scripts (@fehmer) (#5613) --- .../{font-preview.mjs => font-preview.ts} | 14 ++++--- .../{fontawesome.mjs => fontawesome.ts} | 38 +++++++++++-------- frontend/scripts/tsconfig.json | 23 +++++++++++ frontend/vite.config.js | 4 +- 4 files changed, 56 insertions(+), 23 deletions(-) rename frontend/scripts/{font-preview.mjs => font-preview.ts} (79%) rename frontend/scripts/{fontawesome.mjs => fontawesome.ts} (82%) create mode 100644 frontend/scripts/tsconfig.json diff --git a/frontend/scripts/font-preview.mjs b/frontend/scripts/font-preview.ts similarity index 79% rename from frontend/scripts/font-preview.mjs rename to frontend/scripts/font-preview.ts index 31ab17c2d..d89cb2c5a 100644 --- a/frontend/scripts/font-preview.mjs +++ b/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 { 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 { 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); } diff --git a/frontend/scripts/fontawesome.mjs b/frontend/scripts/fontawesome.ts similarity index 82% rename from frontend/scripts/fontawesome.mjs rename to frontend/scripts/fontawesome.ts index 739c04b0c..3e82f54b8 100644 --- a/frontend/scripts/fontawesome.mjs +++ b/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 = 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[]; } diff --git a/frontend/scripts/tsconfig.json b/frontend/scripts/tsconfig.json new file mode 100644 index 000000000..dd87e07dc --- /dev/null +++ b/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"] +} diff --git a/frontend/vite.config.js b/frontend/vite.config.js index 064950565..bdc35e7a2 100644 --- a/frontend/vite.config.js +++ b/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) =>