refactor: update exports within index files to be ordered (#8)

* chore: re-sync
* refactor: sort exports of index files

---------

Co-authored-by: Richard Herman <[email protected]>

Author: GeekyEggo

scripts/transformers/react.ts

@@ -4,6 +4,7 @@ import { rm } from "node:fs/promises";
 
 import { metadata } from "../metadata/metadata.ts";
 import type { SvgIcon, Transformer } from "../transformer.ts";
+import type { ExportSpecifier } from "../utils.ts";
 import * as utils from "../utils.ts";
 
 const svgrConfig: Config = {
@@ -40,15 +41,20 @@ export class ReactTransformer implements Transformer {
 	public readonly name = "React components";
 
 	/**
-	 * Contents of the components index file.
+	 * Components exported from the index file.
 	 */
-	#indexContents = "";
+	#exports: ExportSpecifier[] = [];
 
 	/**
 	 * @inheritdoc
 	 */
 	public finalize(): Promise<void> {
-		return utils.writeGeneratedFile("src/react/icons/index.ts", this.#indexContents);
+		const contents = this.#exports
+			.sort((a, b) => a.identifier.localeCompare(b.identifier))
+			.map(({ identifier, filename }) => `export { default as ${identifier} } from "./${filename}.g.js";`)
+			.join("\n");
+
+		return utils.writeGeneratedFile("src/react/icons/index.ts", contents);
 	}
 
 	/**
@@ -87,7 +93,10 @@ export class ReactTransformer implements Transformer {
 			this.#formatComponent(componentName, icon.name, elementOrSwitch),
 		);
 
-		this.#indexContents += `export { default as ${componentName} } from "./${filename}.g.js";\n`;
+		this.#exports.push({
+			identifier: componentName,
+			filename,
+		});
 	}
 
 	/**

scripts/transformers/strings.ts

@@ -27,13 +27,18 @@ export class StringsTransformer implements Transformer {
 	 * @inheritdoc
 	 */
 	public async finalize(): Promise<void> {
-		for (const [size, { names, indexContents }] of this.#catalogues) {
+		for (const [size, { names, exports }] of this.#catalogues) {
 			// Ignore empty catalogues.
 			if (names.length === 0) {
 				continue;
 			}
 
-			await utils.writeGeneratedFile(`${this.#pathOf(size)}/index.ts`, indexContents);
+			const contents = exports
+				.sort((a, b) => a.identifier.localeCompare(b.identifier))
+				.map(({ filename, identifier }) => `export { default as ${identifier} } from "${filename}";`)
+				.join("\n");
+
+			await utils.writeGeneratedFile(`${this.#pathOf(size)}/index.ts`, contents);
 		}
 	}
 
@@ -63,7 +68,10 @@ export class StringsTransformer implements Transformer {
 
 			const catalogue = this.#catalogues.get(size)!;
 			catalogue.names.push(icon.name);
-			catalogue.indexContents += `export { default as ${metadata.getSvgStringMetadata(icon.name as keyof typeof metadata.icons).exportName} } from "./icons/${icon.name}.g.js";\n`;
+			catalogue.exports.push({
+				identifier: metadata.getSvgStringMetadata(icon.name as keyof typeof metadata.icons).exportName,
+				filename: `./icons/${icon.name}.g.js`,
+			});
 		}
 	}
 
@@ -87,7 +95,7 @@ class Catalogue {
 	public readonly names: string[] = [];
 
 	/**
-	 * String that represents the index (barrel file) of the catalogue.
+	 * Icons exported from the index file.
 	 */
-	public indexContents: string = "";
+	public exports: utils.ExportSpecifier[] = [];
 }

scripts/utils.ts

@@ -38,3 +38,18 @@ export function writeGeneratedFile(path: string, data: string): Promise<void> {
 
 	return writeFile(path, data);
 }
+
+/**
+ * Information for an export, for example `export { default as IconElgato } from "./logo-elgato.js"`;
+ */
+export type ExportSpecifier = {
+	/**
+	 * The identifier of the export.
+	 */
+	identifier: string;
+
+	/**
+	 * Filename of the export.
+	 */
+	filename: string;
+};

src/metadata/icons.g.ts

@@ -1,4 +1,4 @@
-// Last synchronized: Mon, 24 Feb 2025 15:37:44 GMT
+// Last synchronized: Thu, 27 Feb 2025 12:11:56 GMT
 
 /**
  * Collection of available icons, and their associated metadata.
@@ -364,8 +364,8 @@ export const icons = {
 	"image-check--filled": { name: "ImageCheckFilled", sizes: ["l"] },
 	inbox: { name: "Inbox", sizes: ["l"] },
 	"inbox--filled": { name: "InboxFilled", sizes: ["l"] },
-	info: { name: "Info", sizes: ["m", "l"] },
-	"info--filled": { name: "InfoFilled", sizes: ["m", "l"] },
+	info: { name: "Info", sizes: ["s", "m", "l"] },
+	"info--filled": { name: "InfoFilled", sizes: ["s", "m", "l"] },
 	infobar: { name: "Infobar", sizes: ["l"] },
 	"infobar--filled": { name: "InfobarFilled", sizes: ["l"] },
 	"iron-low": { name: "IronLow", sizes: ["m"] },

src/metadata/providers.ts

@@ -60,7 +60,7 @@ export type ReactMetadata = {
 	componentName: string;
 
 	/**
-	 * Filename of the component.
+	 * Filename of the component, with the extension omitted.
 	 */
 	filename: string;
 };

src/react/icons/Info.g.tsx

@@ -27,6 +27,25 @@ const IconInfo = (props: IconProps & SVGProps<SVGSVGElement>) => {
 					/>
 				</svg>
 			);
+		case "s":
+			return (
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					fill="currentColor"
+					viewBox="0 0 16 16"
+					width={size}
+					height={size}
+					aria-label={label}
+					role="img"
+					{...props}
+				>
+					<path
+						fillRule="evenodd"
+						d="M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12m0 1A7 7 0 1 0 8 1a7 7 0 0 0 0 14m0-8.5a.5.5 0 0 1 .5.5v4.502a.5.5 0 0 1-1 0V7a.5.5 0 0 1 .5-.5m0-1A.75.75 0 1 0 8 4a.75.75 0 0 0 0 1.5"
+						clipRule="evenodd"
+					/>
+				</svg>
+			);
 		default:
 			return (
 				<svg

src/react/icons/InfoFilled.g.tsx

@@ -26,6 +26,25 @@ const IconInfoFilled = (props: IconProps & SVGProps<SVGSVGElement>) => {
 					/>
 				</svg>
 			);
+		case "s":
+			return (
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					fill="currentColor"
+					viewBox="0 0 16 16"
+					width={size}
+					height={size}
+					aria-label={label}
+					role="img"
+					{...props}
+				>
+					<path
+						fillRule="evenodd"
+						d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14m.75-10.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0M8 6.5a.5.5 0 0 1 .5.5v4.502a.5.5 0 0 1-1 0V7a.5.5 0 0 1 .5-.5"
+						clipRule="evenodd"
+					/>
+				</svg>
+			);
 		default:
 			return (
 				<svg