chore(scripts): Refactor scripts to typescript (#3316)

* Adjust typescript types

* adjust types

* fix types in all helper files

* Fix types

* Migrate js files to ts files

* Refactor to TS files

* Rename extentions

* Adjust imports

* Fix builds

* Update lockfile

* Fix last typescript migration

* Fix entry path @lucide/outline-svg

* Fix types

* add checkout step

* format files

* Format files

scripts/addMissingIconJsonFiles.mts

@@ -4,13 +4,13 @@ import {
   readAllMetadata,
   readSvgDirectory,
   writeFile,
-} from '../tools/build-helpers/helpers.mjs';
+} from '../tools/build-helpers/helpers.ts';
 
 const currentDir = getCurrentDirPath(import.meta.url);
 const ICONS_DIR = path.resolve(currentDir, '../icons');
-const icons = readAllMetadata(ICONS_DIR);
+const icons = await readAllMetadata(ICONS_DIR);
 
-const svgFiles = readSvgDirectory(ICONS_DIR);
+const svgFiles = await readSvgDirectory(ICONS_DIR);
 
 const iconNames = svgFiles.map((icon) => icon.split('.')[0]);
 

scripts/checkIconsAndCategories.mts

@@ -3,13 +3,17 @@ import {
   readSvgDirectory,
   getCurrentDirPath,
   readAllMetadata,
-} from '../tools/build-helpers/helpers.mjs';
+} from '../tools/build-helpers/helpers.ts';
+import { type IconMetadata } from '../tools/build-icons/types.ts';
 
 const currentDir = getCurrentDirPath(import.meta.url);
 const ICONS_DIR = path.resolve(currentDir, '../icons');
-const icons = await readAllMetadata(ICONS_DIR);
+const icons = await readAllMetadata(ICONS_DIR) as Record<string, IconMetadata>;
 const CATEGORIES_DIR = path.resolve(currentDir, '../categories');
-const categories = await readAllMetadata(CATEGORIES_DIR);
+const categories = await readAllMetadata(CATEGORIES_DIR) as Record<string, {
+  icon: string;
+  name: string;
+}>;;
 
 console.log('Reading all icons');
 
@@ -31,7 +35,7 @@ Object.keys(icons).forEach((iconName) => {
     console.error(`'${iconName}.svg' does not exist.`);
     error = true;
   }
-  icon.categories.forEach((categoryName) => {
+  icon.categories?.forEach((categoryName) => {
     if (typeof categories[categoryName] === 'undefined') {
       console.error(`Icon '${iconName}' refers to the non-existing category '${categoryName}'.`);
       error = true;
@@ -41,7 +45,7 @@ Object.keys(icons).forEach((iconName) => {
 
 Object.keys(categories).forEach((categoryName) => {
   const category = categories[categoryName];
-  if (!category.icon) {
+  if (!category?.icon) {
     console.error(`Category '${categoryName}' does not use an icon '${category.icon}'.`);
     error = true;
   } else if (typeof icons[category.icon] === 'undefined') {

scripts/generate/generateIcons.mts

@@ -1,5 +1,5 @@
 import path from 'path';
-import { getCurrentDirPath, writeFileIfNotExists } from '../../tools/build-helpers/helpers.mjs';
+import { getCurrentDirPath, writeFileIfNotExists } from '../../tools/build-helpers/helpers.ts';
 
 const currentDir = getCurrentDirPath(import.meta.url);
 const ICONS_DIR = path.resolve(currentDir, '../../icons');

scripts/generateChangedIconsCommentMarkup.mts

@@ -7,7 +7,7 @@ import {
   getCurrentDirPath,
   minifySvg,
   toPascalCase,
-} from '../tools/build-helpers/helpers.mjs';
+} from '../tools/build-helpers/helpers.ts';
 
 const currentDir = getCurrentDirPath(import.meta.url);
 const ICONS_DIR = path.resolve(currentDir, '../icons');
@@ -30,7 +30,7 @@ if (changedFiles.length === 0) {
   process.exit(0);
 }
 
-const getImageTagsByFiles = (files, getBaseUrl, width) =>
+const getImageTagsByFiles = (files: string[], getBaseUrl: (file: string) => string, width?: number) =>
   files.map((file) => {
     const svgContent = fs.readFileSync(path.join(process.cwd(), file), 'utf-8');
     const strippedAttrsSVG = svgContent.replace(/<svg[^>]*>/, '<svg>');
@@ -46,7 +46,7 @@ const getImageTagsByFiles = (files, getBaseUrl, width) =>
 const svgFiles = await readSvgDirectory(ICONS_DIR);
 const svgFilePaths = svgFiles.map((file) => `icons/${file}`);
 
-const iconsFilteredByName = (search) => svgFilePaths.filter((file) => file.includes(search));
+const iconsFilteredByName = (search: string) => svgFilePaths.filter((file) => file.includes(search));
 
 const cohesionRandomImageTags = getImageTagsByFiles(
   shuffleArray(svgFilePaths).slice(0, changedFiles.length),

scripts/generateChangelog.mts

@@ -1,11 +1,11 @@
 import getArgumentOptions from 'minimist';
-import githubApi from './githubApi.mjs';
+import githubApi from './githubApi.mts';
 
-const fetchCompareTags = (oldTag) =>
+const fetchCompareTags = (oldTag: string) =>
   githubApi(`https://api.github.com/repos/lucide-icons/lucide/compare/${oldTag}...main`);
 
 const iconRegex = /icons\/(.*)\.svg/g;
-const iconTemplate = ({ name, pullNumber, author }) =>
+const iconTemplate = ({ name, pullNumber, author }: { name: string, pullNumber: number, author: string }) =>
   `- \`${name}\` (${pullNumber}) by @${author}`;
 
 const topics = [
@@ -47,7 +47,7 @@ const cliArguments = getArgumentOptions(process.argv.slice(2));
     }
 
     const changedFiles = output.files.filter(
-      ({ filename }) => !filename.match(/docs\/(.*)|(.*)package\.json|tags.json/g),
+      ({ filename }: { filename: string }) => !filename.match(/docs\/(.*)|(.*)package\.json|tags.json/g),
     );
 
     const commits = await Promise.all(changedFiles.map(fetchCommits));
@@ -76,11 +76,11 @@ const cliArguments = getArgumentOptions(process.argv.slice(2));
           status,
         };
       })
-      .filter(Boolean)
+      .filter((commit): commit is NonNullable<typeof commit> => Boolean(commit))
       .filter(({ pullNumber }) => !!pullNumber);
 
     const changelog = topics.map(({ title, filter, template }) => {
-      const lines = mappedCommits.filter(filter).map(template);
+      const lines = mappedCommits.filter(filter).map<string>(template);
 
       if (lines.length) {
         return [`## ${title}`, ' ', ...lines, ' '];

scripts/generateNextJSAliases.mts

@@ -1,9 +1,9 @@
 import path from 'path';
 import { promises as fs } from 'fs';
-import { getCurrentDirPath, readSvgDirectory } from '../tools/build-helpers/helpers.mjs';
+import { getCurrentDirPath, readSvgDirectory } from '../tools/build-helpers/helpers.ts';
 
 // This is a special case convertion NextJS uses for their modularize imports. We try to follow the same convention, to generate the same imports.
-function pascalToKebabNextJSFlavour(str) {
+function pascalToKebabNextJSFlavour(str: string) {
   return str
     .replace(/([a-z])([A-Z])/g, '$1-$2')
     .replace(/([A-Z]+)([A-Z][a-z])/g, '$1-$2')

scripts/githubApi.mts

@@ -1,4 +1,4 @@
-const githubApi = async (endpoint) => {
+const githubApi = async (endpoint: string) => {
   const headers = new Headers();
   const username = 'ericfennis';
   const password = process.env.GITHUB_API_KEY;

scripts/lintFilenames.mts

@@ -17,11 +17,11 @@ cspell.stdout.on('data', (data) => {
   data
     .toString()
     .split('\n')
-    .forEach((line) => {
+    .forEach((line: string) => {
       const match = line.match(regex);
       if (match) {
-        const { line, message } = match.groups;
-        console.log(`::error file=${fileList[line - 1]},line=1,column=1::${message}`);
+        const { line, message } = match.groups ?? {};
+        console.log(`::error file=${fileList[Number(line) - 1]},line=1,column=1::${message}`);
       }
     });
 });

scripts/migrateCategoriesToIcons.mjs

@@ -1,23 +0,0 @@
-import path from 'path';
-import categories from '../categories.json' with { type: 'json' };
-import {
-  mergeArrays,
-  writeFile,
-  readAllMetadata,
-  getCurrentDirPath,
-} from '../tools/build-helpers/helpers.mjs';
-
-const currentDir = getCurrentDirPath(import.meta.url);
-const ICONS_DIR = path.resolve(currentDir, '../icons');
-const icons = readAllMetadata(ICONS_DIR);
-
-Object.keys(categories).forEach((categoryName) => {
-  categories[categoryName].forEach((iconName) => {
-    icons[iconName].categories = mergeArrays(icons[iconName].categories, [categoryName]);
-  });
-});
-
-Object.keys(icons).forEach((iconName) => {
-  const iconContent = JSON.stringify(icons[iconName], null, 2);
-  writeFile(iconContent, `${iconName}.json`, path.resolve(currentDir, '../icons'));
-});

scripts/migrateIconsToCategories.mjs

@@ -1,25 +0,0 @@
-import path from 'path';
-import { writeFile, getCurrentDirPath, readAllMetadata } from '../tools/build-helpers/helpers.mjs';
-
-const currentDir = getCurrentDirPath(import.meta.url);
-const ICONS_DIR = path.resolve(currentDir, '../icons');
-const icons = readAllMetadata(ICONS_DIR);
-
-const newCategories = {};
-Object.keys(icons).forEach((iconName) => {
-  icons[iconName].categories.forEach((categoryName) => {
-    newCategories[categoryName] = newCategories[categoryName] || [];
-    newCategories[categoryName].push(iconName);
-  });
-});
-
-const ordered = Object.keys(newCategories)
-  .sort()
-  .reduce((obj, key) => {
-    obj[key] = newCategories[key];
-    return obj;
-  }, {});
-
-const categoriesContent = JSON.stringify(ordered, null, 2);
-
-writeFile(categoriesContent, 'categories.json', path.resolve(currentDir, '..'));

scripts/migrateIconsToTags.mjs

@@ -1,17 +0,0 @@
-import path from 'path';
-import { writeFile, getCurrentDirPath, readAllMetadata } from '../tools/build-helpers/helpers.mjs';
-
-const currentDir = getCurrentDirPath(import.meta.url);
-const ICONS_DIR = path.resolve(currentDir, '../icons');
-const icons = await readAllMetadata(ICONS_DIR);
-
-const tags = Object.keys(icons)
-  .sort()
-  .reduce((acc, iconName) => {
-    acc[iconName] = icons[iconName].tags;
-    return acc;
-  }, {});
-
-const tagsContent = JSON.stringify(tags, null, 2);
-
-await writeFile(tagsContent, 'tags.json', path.resolve(process.cwd()));

scripts/migrateTagsToIcons.mjs

@@ -1,27 +0,0 @@
-import path from 'path';
-import tags from '../tags.json' with { type: 'json' };
-import {
-  readSvgDirectory,
-  readAllMetadata,
-  writeFile,
-  mergeArrays,
-  getCurrentDirPath,
-} from '../tools/build-helpers/helpers.mjs';
-
-const currentDir = getCurrentDirPath(import.meta.url);
-const ICONS_DIR = path.resolve(currentDir, '../icons');
-const icons = readAllMetadata(ICONS_DIR);
-const svgFiles = readSvgDirectory(ICONS_DIR);
-
-const iconNames = svgFiles.map((icon) => icon.split('.')[0]);
-
-iconNames.forEach((iconName) => {
-  icons[iconName] = icons[iconName] || {
-    $schema: '../icon.schema.json',
-    tags: [],
-    categories: [],
-  };
-  icons[iconName].tags = mergeArrays(icons[iconName].tags, tags[iconName]);
-  const iconContent = JSON.stringify(icons[iconName], null, 2);
-  writeFile(iconContent, `${iconName}.json`, path.resolve(currentDir, '../icons'));
-});

scripts/optimizeStagedSvgs.mts

@@ -5,7 +5,7 @@ const svgFiles = process.argv.slice(2);
 
 svgFiles.forEach(async (svgFile) => {
   console.log('Optimizing staged SVG file:', svgFile);
-  const content = fs.readFileSync(svgFile);
+  const content = fs.readFileSync(svgFile, 'utf-8');
   const svg = await processSvg(content, svgFile);
   fs.writeFileSync(svgFile, svg, 'utf-8');
 });

scripts/optimizeSvgs.mts

@@ -1,15 +1,15 @@
 import fs from 'fs';
 import path from 'path';
-import { readSvgDirectory, writeSvgFile } from '../tools/build-helpers/helpers.mjs';
-import processSvg from './render/processSvg.mjs';
+import { readSvgDirectory, writeSvgFile } from '../tools/build-helpers/helpers.ts';
+import processSvg from './render/processSvg.mts';
 
 const ICONS_DIR = path.resolve(process.cwd(), 'icons');
 
 console.log(`Optimizing SVGs...`);
 
-const svgFiles = readSvgDirectory(ICONS_DIR);
+const svgFiles = await readSvgDirectory(ICONS_DIR);
 
-svgFiles.forEach((svgFile) => {
-  const content = fs.readFileSync(path.join(ICONS_DIR, svgFile));
+svgFiles.forEach((svgFile: string) => {
+  const content = fs.readFileSync(path.join(ICONS_DIR, svgFile), 'utf-8');
   processSvg(content, svgFile).then((svg) => writeSvgFile(svgFile, ICONS_DIR, svg));
 });

scripts/rename/renameIcon.function.mts

@@ -2,6 +2,7 @@ import path from 'path';
 import fs from 'fs';
 import { promisify } from 'util';
 import simpleGit from 'simple-git';
+import { IconMetadata } from '../../tools/build-icons/types';
 
 /**
  * Renames an icon and adds the old name as an alias.
@@ -11,10 +12,10 @@ import simpleGit from 'simple-git';
  * @param {boolean} logInfo
  * @param {boolean} addAlias
  */
-export async function renameIcon(ICONS_DIR, oldName, newName, logInfo = true, addAlias = true) {
+export async function renameIcon(ICONS_DIR: string, oldName: string, newName: string, logInfo = true, addAlias = true) {
   const git = simpleGit();
 
-  async function fileExists(filePath) {
+  async function fileExists(filePath: string) {
     try {
       await promisify(fs.access)(filePath);
       return true;
@@ -44,7 +45,7 @@ export async function renameIcon(ICONS_DIR, oldName, newName, logInfo = true, ad
   await git.mv(oldJsonPath, newJsonPath);
   if (addAlias) {
     const json = fs.readFileSync(newJsonPath, 'utf8');
-    const jsonData = JSON.parse(json);
+    const jsonData: IconMetadata = JSON.parse(json);
     if (Array.isArray(jsonData.aliases)) {
       jsonData.aliases = jsonData.aliases.filter(
         (alias) => (typeof alias === 'string' ? alias : alias.name) !== newName,

scripts/rename/renameIcon.mts

@@ -1,6 +1,6 @@
 import path from 'path';
-import { getCurrentDirPath } from '../../tools/build-helpers/helpers.mjs';
-import { renameIcon } from './renameIcon.function.mjs';
+import { getCurrentDirPath } from '../../tools/build-helpers/helpers.ts';
+import { renameIcon } from './renameIcon.function.mts';
 
 async function main() {
   const oldName = path.basename(process.argv[2]).replace(/\.[^/.]+$/, '');
@@ -20,7 +20,11 @@ async function main() {
     const ICONS_DIR = path.resolve(currentDir, '../../icons');
     await renameIcon(ICONS_DIR, oldName, newName);
   } catch (err) {
-    console.error(err.message);
+    if(err instanceof Error) {
+      console.error(err.message);
+    } else {
+      console.error('An unexpected error occurred:', err);
+    }
     process.exit(1);
   }
 }

scripts/rename/renamePattern.mts

@@ -1,15 +1,17 @@
 import path from 'path';
-import { getCurrentDirPath, readSvgDirectory } from '../../tools/build-helpers/helpers.mjs';
+import { getCurrentDirPath, readSvgDirectory } from '../../tools/build-helpers/helpers.ts';
 import yargs from 'yargs/yargs';
 import { hideBin } from 'yargs/helpers';
-import { renameIcon } from './renameIcon.function.mjs';
+import { renameIcon } from './renameIcon.function.mts';
+import { type Arguments } from 'yargs';
 
 async function main() {
   const currentDir = getCurrentDirPath(import.meta.url);
   const ICONS_DIR = path.resolve(currentDir, '../../icons');
-  const svgFiles = readSvgDirectory(ICONS_DIR);
+  const svgFiles = await readSvgDirectory(ICONS_DIR);
   const iconNames = svgFiles.map((icon) => icon.split('.')[0]).reverse();
-  const argv = yargs(hideBin(process.argv))
+  const argv = (yargs(hideBin(process.argv))
+  // @ts-ignore
     .usage('$0 <pattern> <replacement>', 'Renames all icons matching a pattern', (yargs) => {
       yargs
         .positional('pattern', {
@@ -28,9 +30,14 @@ async function main() {
       'dry-run': { type: 'boolean', default: false, alias: 'd' },
       'add-alias': { type: 'boolean', default: true, alias: 'a' },
     })
-    .parse();
+    .parse()) as unknown as Arguments<{
+      pattern: string;
+      replacement: string;
+      dryRun: boolean;
+      addAlias: boolean;
+    }>;
 
-  const pattern = new RegExp(argv.pattern, 'g');
+  const pattern = new RegExp(argv?.pattern, 'g');
   const replacement = argv.replacement.replaceAll(/\\([0-9]+)/g, (s, i) => `$${i}`);
 
   if (!(pattern instanceof RegExp)) {
@@ -47,7 +54,11 @@ async function main() {
         await renameIcon(ICONS_DIR, oldName, newName, false, argv.addAlias);
       }
     } catch (err) {
+       if(err instanceof Error) {
       console.error(err.message);
+    } else {
+      console.error('An unexpected error occurred:', err);
+    }
     }
   }
 }

scripts/render/processSvg.mts

@@ -8,7 +8,7 @@ import DEFAULT_ATTRS from '../../tools/build-icons/render/default-attrs.json' wi
  * @param {string} svg - An SVG string.
  * @returns {Promise<string>} An optimized svg
  */
-async function optimizeSvg(svg, path) {
+async function optimizeSvg(svg: string, path: string) {
   const result = optimize(svg, {
     path,
     plugins: [
@@ -38,10 +38,16 @@ async function optimizeSvg(svg, path) {
  * @param {string} svg - An SVG string.
  * @returns {string} An SVG string, included with the default attributes.
  */
-function setAttrs(svg) {
+function setAttrs(svg: string) {
   const contents = parseSync(svg);
 
-  contents.attributes = DEFAULT_ATTRS;
+  contents.attributes = {
+    ...DEFAULT_ATTRS,
+    width: String(DEFAULT_ATTRS.width),
+    height: String(DEFAULT_ATTRS.height),
+    "stroke-width": String(DEFAULT_ATTRS['stroke-width']),
+    ...contents.attributes,
+  };
 
   return stringify(contents);
 }
@@ -51,7 +57,7 @@ function setAttrs(svg) {
  * @param {string} svg An SVG string.
  * @returns {Promise<string>} An optimized svg
  */
-function processSvg(svg, path) {
+function processSvg(svg: string, path: string) {
   return (
     optimizeSvg(svg, path)
       .then(setAttrs)

scripts/updateContributors.mts

@@ -29,23 +29,29 @@ const getUserName = pMemoize(
 );
 
 // Check that a commit changes more than just the icon name
-const isCommitRelevant = async (hash, file) => {
+const isCommitRelevant = async (hash: string, file: string) => {
   const summary = await git.diffSummary(['--diff-filter=AM', `${hash}~1`, hash]);
   return summary.files.some(({ file: name }) => name === file);
 };
 
-const getContributors = async (file, includeCoAuthors) => {
+const getContributors = async (file: string, includeCoAuthors?: boolean) => {
   const { all } = await git.log([`HEAD~${FETCH_DEPTH}..`, '--', file]);
   const commits = file.endsWith('.svg')
     ? (
-        await Promise.all(all.map((commit) => isCommitRelevant(commit.hash, file) && commit))
+        await Promise.all(all.map(async (commit) => await isCommitRelevant(commit.hash, file) && commit))
       ).filter(Boolean)
     : all;
 
   const emails = new Map();
   for (let i = commits.length - 1; i >= 0; i -= 1) {
     const commit = commits[i];
-    if (!IGNORED_COMMITS.includes(commit.hash)) {
+
+    if(!commit || !commit.author_email) {
+      console.warn(`Skipping commit without author email: ${JSON.stringify(commit)}`);
+      continue;
+    }
+
+    if ("hash" in commit && !IGNORED_COMMITS.includes(commit.hash)) {
       if (!emails.has(commit.author_email)) {
         emails.set(commit.author_email, getUserName(commit));
       }
@@ -55,8 +61,8 @@ const getContributors = async (file, includeCoAuthors) => {
         );
         // eslint-disable-next-line no-restricted-syntax
         for (const match of matches) {
-          if (!emails.has(match.groups.email) && cache.has(match.groups.email)) {
-            emails.set(match.groups.email, Promise.resolve(cache.get(match.groups.email)));
+          if (!emails.has(match.groups?.email) && cache.has(match.groups?.email)) {
+            emails.set(match.groups?.email, Promise.resolve(cache.get(match.groups?.email)));
           }
         }
       }
@@ -66,7 +72,7 @@ const getContributors = async (file, includeCoAuthors) => {
   return Promise.all(Array.from(emails.values()));
 };
 
-const files = process.env.CHANGED_FILES.split(' ')
+const files = (process.env.CHANGED_FILES?.split(' ') ?? [])
   .map((file) => file.replace('.json', '.svg'))
   .filter((file, idx, arr) => arr.indexOf(file) === idx);
 
@@ -81,7 +87,7 @@ await getContributors('icons');
 await Promise.all(
   files.map(async (file) => {
     const jsonFile = path.join(process.cwd(), file.replace('.svg', '.json'));
-    const json = JSON.parse(fs.readFileSync(jsonFile));
+    const json = JSON.parse(fs.readFileSync(jsonFile, 'utf-8'));
     const { tags, categories, aliases, contributors: previousContributors, ...rest } = json;
     const contributors = [
       ...(previousContributors || []),